From c2fb651c5e0073ac749b90cfe44ab5ec4add884f Mon Sep 17 00:00:00 2001
From: Brooklyn Nicholson <brooklyn.bb.nicholson@gmail.com>
Date: Tue, 30 Jun 2026 01:56:57 -0500
Subject: [PATCH 1/2] refactor(desktop): formalize row-as-button primitive
 (RowButton)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Finding 2 of the desktop UI-consistency pass. Several surfaces intentionally
make an entire row/cell the click target while hosting nested layout inside a
raw <button> (each re-justifying the pattern in a local comment). Introduce a
zero-style RowButton primitive (components/ui/row-button.tsx) that bakes in the
shared semantics — type="button" + a stable data-slot — without imposing any
styling, then migrate every genuine row-button onto it:

- app/overlays/panel.tsx
- app/artifacts/index.tsx
- app/chat/sidebar/chrome.tsx (SidebarRowBody, SidebarRowLink)
- app/settings/providers-settings.tsx
- components/desktop-onboarding-overlay.tsx (PROVIDER_ROW_CLASS rows)

Fully behavior-preserving: RowButton adds no classes, so each row keeps its
exact layout/look (verified by a unit test asserting className passthrough).

Left as-is (not row-buttons; converting would risk visual regressions): the
compact bespoke buttons in shell/statusbar-controls.tsx (STATUSBAR_ACTION_CLASS,
also a nested DropdownMenuTrigger asChild) and pet-generate/reference-chip.tsx.
---
 apps/desktop/src/app/artifacts/index.tsx      |  6 +--
 apps/desktop/src/app/chat/sidebar/chrome.tsx  |  7 ++--
 apps/desktop/src/app/overlays/panel.tsx       |  6 +--
 .../src/app/settings/providers-settings.tsx   |  5 ++-
 .../components/desktop-onboarding-overlay.tsx |  9 +++--
 .../src/components/ui/row-button.test.tsx     | 39 +++++++++++++++++++
 apps/desktop/src/components/ui/row-button.tsx | 20 ++++++++++
 7 files changed, 77 insertions(+), 15 deletions(-)
 create mode 100644 apps/desktop/src/components/ui/row-button.test.tsx
 create mode 100644 apps/desktop/src/components/ui/row-button.tsx

diff --git a/apps/desktop/src/app/artifacts/index.tsx b/apps/desktop/src/app/artifacts/index.tsx
index d76cc2baee4..f7d9e3238e3 100644
--- a/apps/desktop/src/app/artifacts/index.tsx
+++ b/apps/desktop/src/app/artifacts/index.tsx
@@ -16,6 +16,7 @@ import {
   PaginationNext,
   PaginationPrevious
 } from '@/components/ui/pagination'
+import { RowButton } from '@/components/ui/row-button'
 import { TextTab, TextTabMeta } from '@/components/ui/text-tab'
 import { Tip } from '@/components/ui/tooltip'
 import { getSessionMessages, listAllProfileSessions } from '@/hermes'
@@ -761,13 +762,12 @@ function ArtifactCellAction({
   }
 
   return (
-    <button
+    <RowButton
       className="flex h-full w-full min-w-0 items-center gap-2 px-2.5 py-1.5 text-left text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) font-normal text-(--ui-text-secondary) no-underline underline-offset-4 decoration-current/20 transition-colors hover:text-foreground hover:underline"
       onClick={onClick}
-      type="button"
     >
       {children}
-    </button>
+    </RowButton>
   )
 }
 
diff --git a/apps/desktop/src/app/chat/sidebar/chrome.tsx b/apps/desktop/src/app/chat/sidebar/chrome.tsx
index 3963aaf3dbd..7815d1fafcf 100644
--- a/apps/desktop/src/app/chat/sidebar/chrome.tsx
+++ b/apps/desktop/src/app/chat/sidebar/chrome.tsx
@@ -1,6 +1,7 @@
 import type * as React from 'react'
 
 import { Codicon } from '@/components/ui/codicon'
+import { RowButton } from '@/components/ui/row-button'
 import { cn } from '@/lib/utils'
 
 // Shared, content-agnostic sidebar chrome — used by both the flat session
@@ -64,7 +65,7 @@ export function SidebarRowCluster({ className, ...props }: React.ComponentProps<
 
 /** Session row main tap target. */
 export function SidebarRowBody({ className, ...props }: React.ComponentProps<'button'>) {
-  return <button className={cn(rowInset, 'bg-transparent text-left', className)} type="button" {...props} />
+  return <RowButton className={cn(rowInset, 'bg-transparent text-left', className)} {...props} />
 }
 
 /** Tappable label — underline/truncate live on the inner span, not the button. */
@@ -75,9 +76,9 @@ export function SidebarRowLink({
   ...props
 }: React.ComponentProps<'button'> & { labelClassName?: string }) {
   return (
-    <button className={cn('min-w-0 shrink bg-transparent p-0 text-left', className)} type="button" {...props}>
+    <RowButton className={cn('min-w-0 shrink bg-transparent p-0 text-left', className)} {...props}>
       <span className={cn(rowLabel, labelClassName)}>{children}</span>
-    </button>
+    </RowButton>
   )
 }
 
diff --git a/apps/desktop/src/app/overlays/panel.tsx b/apps/desktop/src/app/overlays/panel.tsx
index d03ed675d60..ae4ee5fde93 100644
--- a/apps/desktop/src/app/overlays/panel.tsx
+++ b/apps/desktop/src/app/overlays/panel.tsx
@@ -3,6 +3,7 @@ import type { ReactNode } from 'react'
 import { Button } from '@/components/ui/button'
 import { Codicon } from '@/components/ui/codicon'
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
+import { RowButton } from '@/components/ui/row-button'
 import { SearchField } from '@/components/ui/search-field'
 import { translateNow } from '@/i18n'
 import { cn } from '@/lib/utils'
@@ -162,10 +163,9 @@ export function PanelListRow({
       )}
       data-panel-row={rowKey}
     >
-      <button
+      <RowButton
         className="flex h-full min-w-0 flex-1 items-center gap-2 rounded-md pl-2 pr-1 text-left"
         onClick={onSelect}
-        type="button"
       >
         {lead ??
           (dotClassName ? (
@@ -174,7 +174,7 @@ export function PanelListRow({
             <Codicon className="shrink-0 text-muted-foreground/55" name={icon} size="0.85rem" />
           ) : null)}
         <span className="min-w-0 flex-1 truncate font-medium text-foreground/85">{title}</span>
-      </button>
+      </RowButton>
       {meta ? <span className="shrink-0 pr-2 text-[0.62rem] tabular-nums text-muted-foreground/45">{meta}</span> : null}
       {menu ? <div className="shrink-0 pr-1">{menu}</div> : null}
     </div>
diff --git a/apps/desktop/src/app/settings/providers-settings.tsx b/apps/desktop/src/app/settings/providers-settings.tsx
index febe47cb0c9..d06280902bc 100644
--- a/apps/desktop/src/app/settings/providers-settings.tsx
+++ b/apps/desktop/src/app/settings/providers-settings.tsx
@@ -12,6 +12,7 @@ import {
   sortProviders
 } from '@/components/desktop-onboarding-overlay'
 import { Button } from '@/components/ui/button'
+import { RowButton } from '@/components/ui/row-button'
 import { SearchField } from '@/components/ui/search-field'
 import { disconnectOAuthProvider, listOAuthProviders } from '@/hermes'
 import { useI18n } from '@/i18n'
@@ -237,7 +238,7 @@ function ConnectedProviderRow({
 
   return (
     <div className="group grid grid-cols-[minmax(0,1fr)_auto] items-center gap-1 rounded-[6px] transition-colors hover:bg-(--ui-control-hover-background)">
-      <button className="min-w-0 px-3 py-2.5 text-left" onClick={() => onSelect(provider)} type="button">
+      <RowButton className="min-w-0 px-3 py-2.5 text-left" onClick={() => onSelect(provider)}>
         <div className="flex min-w-0 items-center gap-2">
           <span className="truncate text-[length:var(--conversation-text-font-size)] font-semibold">{title}</span>
           <span className="inline-flex shrink-0 items-center gap-1 bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary">
@@ -251,7 +252,7 @@ function ConnectedProviderRow({
             {provider.flow === 'external' ? copy.removeExternalGeneric(title) : copy.removeKeyManaged(title)}
           </p>
         )}
-      </button>
+      </RowButton>
       <div className="flex items-center gap-1 pr-2">
         <Trail className="size-4 text-muted-foreground transition group-hover:text-foreground" />
         {canDisconnect && (
diff --git a/apps/desktop/src/components/desktop-onboarding-overlay.tsx b/apps/desktop/src/components/desktop-onboarding-overlay.tsx
index 7ea1c11ffb4..b884e6f7a9f 100644
--- a/apps/desktop/src/components/desktop-onboarding-overlay.tsx
+++ b/apps/desktop/src/components/desktop-onboarding-overlay.tsx
@@ -8,6 +8,7 @@ import { Codicon } from '@/components/ui/codicon'
 import { ErrorIcon } from '@/components/ui/error-state'
 import { Input } from '@/components/ui/input'
 import { Loader } from '@/components/ui/loader'
+import { RowButton } from '@/components/ui/row-button'
 import { getGlobalModelOptions } from '@/hermes'
 import { useI18n } from '@/i18n'
 import { Check, ChevronDown, ChevronLeft, ChevronRight, ExternalLink, KeyRound, Loader2, Terminal } from '@/lib/icons'
@@ -575,13 +576,13 @@ export function KeyProviderRow({ onClick }: { onClick: () => void }) {
   const { t } = useI18n()
 
   return (
-    <button className={PROVIDER_ROW_CLASS} onClick={onClick} type="button">
+    <RowButton className={PROVIDER_ROW_CLASS} onClick={onClick}>
       <div className="min-w-0">
         <span className="text-[length:var(--conversation-text-font-size)] font-semibold">OpenRouter</span>
         <p className="mt-1 text-xs leading-5 text-muted-foreground">{t.onboarding.openRouterPitch}</p>
       </div>
       <ChevronRight className="size-4 text-muted-foreground transition group-hover:text-foreground" />
-    </button>
+    </RowButton>
   )
 }
 
@@ -597,7 +598,7 @@ export function ProviderRow({
   const Trail = provider.flow === 'external' ? Terminal : ChevronRight
 
   return (
-    <button className={PROVIDER_ROW_CLASS} onClick={() => onSelect(provider)} type="button">
+    <RowButton className={PROVIDER_ROW_CLASS} onClick={() => onSelect(provider)}>
       <div className="min-w-0">
         <div className="flex items-center gap-2">
           <span className="text-[length:var(--conversation-text-font-size)] font-semibold">
@@ -608,7 +609,7 @@ export function ProviderRow({
         <p className="mt-1 text-xs leading-5 text-muted-foreground">{t.onboarding.flowSubtitles[provider.flow]}</p>
       </div>
       <Trail className="size-4 text-muted-foreground transition group-hover:text-foreground" />
-    </button>
+    </RowButton>
   )
 }
 
diff --git a/apps/desktop/src/components/ui/row-button.test.tsx b/apps/desktop/src/components/ui/row-button.test.tsx
new file mode 100644
index 00000000000..ad9c8cf7855
--- /dev/null
+++ b/apps/desktop/src/components/ui/row-button.test.tsx
@@ -0,0 +1,39 @@
+import { cleanup, render } from '@testing-library/react'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+import { RowButton } from './row-button'
+
+afterEach(cleanup)
+
+describe('RowButton', () => {
+  it('renders a real <button> with type=button and the row-button slot', () => {
+    const { getByText } = render(<RowButton>Row</RowButton>)
+    const el = getByText('Row')
+
+    expect(el.tagName).toBe('BUTTON')
+    expect(el.getAttribute('type')).toBe('button')
+    expect(el.getAttribute('data-slot')).toBe('row-button')
+  })
+
+  it('imposes no styling of its own — only the caller class is applied', () => {
+    const onClick = vi.fn()
+
+    const { getByText } = render(
+      <RowButton className="custom-row" onClick={onClick}>
+        Hit
+      </RowButton>
+    )
+
+    const el = getByText('Hit')
+
+    expect(el.className).toBe('custom-row')
+    el.click()
+    expect(onClick).toHaveBeenCalledTimes(1)
+  })
+
+  it('allows the native button type to be overridden', () => {
+    const { getByText } = render(<RowButton type="submit">Go</RowButton>)
+
+    expect(getByText('Go').getAttribute('type')).toBe('submit')
+  })
+})
diff --git a/apps/desktop/src/components/ui/row-button.tsx b/apps/desktop/src/components/ui/row-button.tsx
new file mode 100644
index 00000000000..016566a9cad
--- /dev/null
+++ b/apps/desktop/src/components/ui/row-button.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react'
+
+/**
+ * A full-row / full-region click target rendered as a real `<button>`.
+ *
+ * Several surfaces intentionally make an entire row (or cell) the click target
+ * while hosting nested layout and controls inside it — sidebar rows, overlay /
+ * panel list rows, settings + onboarding provider rows, the artifacts cell.
+ * This primitive bakes in the shared semantics (`type="button"` plus a stable
+ * `data-slot`) WITHOUT imposing any visual styling, so each row keeps its own
+ * layout classes and nothing changes visually.
+ *
+ * Use `RowButton` for these row/region targets; reach for `Button`
+ * (`components/ui/button.tsx`) for ordinary compact actions.
+ */
+function RowButton({ className, type = 'button', ...props }: React.ComponentProps<'button'>) {
+  return <button className={className} data-slot="row-button" type={type} {...props} />
+}
+
+export { RowButton }

From 57dd86f247637a080b9c2c42ae8240379f5b5c49 Mon Sep 17 00:00:00 2001
From: Brooklyn Nicholson <brooklyn.bb.nicholson@gmail.com>
Date: Tue, 30 Jun 2026 02:05:55 -0500
Subject: [PATCH 2/2] docs(desktop): tighten RowButton doc comment

---
 apps/desktop/src/components/ui/row-button.tsx | 15 ++++-----------
 1 file changed, 4 insertions(+), 11 deletions(-)

diff --git a/apps/desktop/src/components/ui/row-button.tsx b/apps/desktop/src/components/ui/row-button.tsx
index 016566a9cad..41799f7be43 100644
--- a/apps/desktop/src/components/ui/row-button.tsx
+++ b/apps/desktop/src/components/ui/row-button.tsx
@@ -1,17 +1,10 @@
 import * as React from 'react'
 
 /**
- * A full-row / full-region click target rendered as a real `<button>`.
- *
- * Several surfaces intentionally make an entire row (or cell) the click target
- * while hosting nested layout and controls inside it — sidebar rows, overlay /
- * panel list rows, settings + onboarding provider rows, the artifacts cell.
- * This primitive bakes in the shared semantics (`type="button"` plus a stable
- * `data-slot`) WITHOUT imposing any visual styling, so each row keeps its own
- * layout classes and nothing changes visually.
- *
- * Use `RowButton` for these row/region targets; reach for `Button`
- * (`components/ui/button.tsx`) for ordinary compact actions.
+ * A full-row / region click target rendered as a real `<button>`: bakes in
+ * `type="button"` + a stable `data-slot`, imposes no styling (callers keep their
+ * own layout classes, so nothing changes visually). Use for row/region targets;
+ * use `Button` for ordinary compact actions.
  */
 function RowButton({ className, type = 'button', ...props }: React.ComponentProps<'button'>) {
   return <button className={className} data-slot="row-button" type={type} {...props} />