From 7eb50930712250b949fde90a09e033579d96ab6b Mon Sep 17 00:00:00 2001
From: jules <cloudtech@juleslive.net>
Date: Sat, 2 May 2026 19:43:00 +1000
Subject: [PATCH] =?UTF-8?q?fix(ai):=20unbreak=20model=20dropdown=20?=
 =?UTF-8?q?=E2=80=94=20base-ui=20Trigger=20doesn't=20take=20asChild?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The composer's model picker had <DropdownMenuTrigger asChild><button>...
which is the Radix Slot pattern. Project uses @base-ui/react where
Menu.Trigger has no asChild prop and renders its own <button>, so the
result was nested-button-inside-button (DOM-nesting violation) plus
asChild leaking as an unknown DOM attribute (React warning).

Dropped the inner <button> and put className/data-action straight on
the Trigger. Visual output identical, no more console errors.

This pattern is used by ~14 other routes (Button asChild + Link),
mostly behind sign-in-required states. They're broken too but rarely
fire — separate followup.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 app/routes/ai.tsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/app/routes/ai.tsx b/app/routes/ai.tsx
index 835ef47..34dd09d 100644
--- a/app/routes/ai.tsx
+++ b/app/routes/ai.tsx
@@ -1265,15 +1265,15 @@ function ModelSelector({
   const label = prettyModelName(model)
   return (
     <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <button
-          type="button"
-          data-action="ai-model"
-          className="inline-flex items-center gap-1 rounded-full px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
-        >
-          <span>{label}</span>
-          <ChevronDown className="size-4 opacity-70" />
-        </button>
+      {/* base-ui's Menu.Trigger renders its own <button>, so we don't wrap
+       * a nested <button> here (which Radix's asChild pattern would require).
+       * Styles + data-action go straight on the Trigger. */}
+      <DropdownMenuTrigger
+        data-action="ai-model"
+        className="inline-flex items-center gap-1 rounded-full px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+      >
+        <span>{label}</span>
+        <ChevronDown className="size-4 opacity-70" />
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end">
         {models.map((m) => (