From 29c9da5dd2eb74aeab422e49ebd36ea8ddc84ebc Mon Sep 17 00:00:00 2001
From: Merge Sim <sim@local>
Date: Fri, 11 Sep 2026 10:54:40 -0700
Subject: [PATCH] fix(onboarding): give the hooks disclosure a caret so it
 reads as clickable

Visual capture showed "What Orca changes, and when" rendering as plain static
text in both states, while its own sibling six pixels above it ("Show N more
agents") carries an arrow. Nothing signalled the row was interactive, which
makes a disclosure nobody opens.

Not raising the disclosure's height cap along with it. A live ablation in the
running wizard measured the cap as a zero-sum dial against the agent grid: at
160px the grid shows six full cards and the disclosure clips its third row; at
224px the disclosure gains one row and the grid drops to three full cards plus
a row of sliced card-tops; at 288px the disclosure finally fits and the grid
has no fully visible card at all. The cap is also inert on machines with few
detected CLIs, so raising it can only act in the case where it hurts. Getting
all four rows above the fold needs the variable-height agent list capped rather
than the whole disclosure, which is more than a polish change.
---
 .../src/components/onboarding/AgentStatusHooksControl.tsx    | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/renderer/src/components/onboarding/AgentStatusHooksControl.tsx b/src/renderer/src/components/onboarding/AgentStatusHooksControl.tsx
index 1c95f272c00..99cf0cf67ed 100644
--- a/src/renderer/src/components/onboarding/AgentStatusHooksControl.tsx
+++ b/src/renderer/src/components/onboarding/AgentStatusHooksControl.tsx
@@ -1,4 +1,5 @@
 import { Checkbox } from '@/components/ui/checkbox'
+import { ChevronRight } from 'lucide-react'
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
 import { translate } from '@/i18n/i18n'
 import type { TuiAgent } from '../../../../shared/tui-agent'
@@ -45,7 +46,9 @@ export function AgentStatusHooksControl({
       </p>
       {/* Sibling of the label, never nested inside it: a trigger under the label would toggle the checkbox. */}
       <Collapsible defaultOpen={false}>
-        <CollapsibleTrigger className="cursor-pointer text-xs font-medium text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50 data-[state=open]:mb-2">
+        <CollapsibleTrigger className="flex cursor-pointer items-center gap-1 text-xs font-medium text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50 data-[state=open]:mb-2 [&[data-state=open]>svg]:rotate-90">
+          {/* Why: without a caret the row reads as static text; its sibling "Show N more agents→" carries one. */}
+          <ChevronRight className="size-3.5 shrink-0 transition-transform" aria-hidden="true" />
           {translate(
             'auto.components.onboarding.AgentStatusHooksControl.disclosureSummary',
             'What Orca changes, and when'