test(web): add prefetchAvailableAgentDetails to useAvailableAgents mock

Fetching harness on individual hover caused hasKnobs() to flip mid-render,
making the '>' chevron appear lazily on entries that gained knobs after enrichment.

Instead, fire prefetchAvailableAgentDetails for all session-discovered agents
in onOpenChange when the picker opens. By the time the user reads the list
the enrichment is done and hasKnobs is stable. Remove the per-item
onMouseEnter handlers.

web/src/hooks/useAvailableAgents.ts

@@ -1,4 +1,4 @@
-import { useQuery } from "@tanstack/react-query";
+import { useQuery, type QueryClient } from "@tanstack/react-query";
 import { authenticatedFetch } from "@/lib/identity";
 import { agentRootName } from "@/lib/forkHarness";
 import { capitalizeAgentName } from "@/lib/agentLabels";
@@ -39,6 +39,10 @@ export interface AvailableAgent {
   // immutable, so it is the stable signal. Omitted on older servers and on
   // session-derived agents (whose recency comes from the scanned session).
   created_at?: number | null;
+  // Session id used to fetch the full agent spec on hover. Only set on
+  // session-discovered agents (custom uploads); absent on catalog agents
+  // whose full data is already present from GET /v1/agents.
+  sessionId?: string;
 }
 
 const DISPLAY_NAMES: Record<string, string> = {
@@ -194,42 +198,57 @@ interface AgentObjectWire {
 }
 
 /**
- * Enrich one scanned session agent into the picker's AvailableAgent
- * shape via `GET /v1/sessions/{id}/agent` (description, harness,
- * bundled skills). On failure the agent is still listed with the
- * name-only fields from the scan — mirroring the server's own
- * `_to_agent_object` degradation: one unloadable bundle must not
- * break discovery.
+ * Build an AvailableAgent from session scan data alone — no extra fetch.
+ * description, harness, and skills are null/empty and filled in on hover
+ * via prefetchAvailableAgentDetails.
  */
-async function enrichSessionAgent(scanned: ScannedSessionAgent): Promise<AvailableAgent> {
-  const fallback: AvailableAgent = {
+function sessionAgentFromScan(scanned: ScannedSessionAgent): AvailableAgent {
+  return {
     id: scanned.agentId,
     name: scanned.agentName,
     display_name: displayNameForAgent(scanned.agentName),
     description: null,
     harness: null,
     skills: [],
+    sessionId: scanned.sessionId,
     // builtin/created_at intentionally omitted: session-derived agents never
     // seed the catalog, and their recency comes from the scanned session's
     // createdAt (used directly in the dedup), not from this object.
   };
+}
+
+/**
+ * Fetch harness, description, and skills for a session-discovered agent and
+ * patch them into the ["available-agents"] cache. Call on hover so the data
+ * is ready before the user clicks — zero cost for agents they never hover.
+ */
+export async function prefetchAvailableAgentDetails(
+  agent: AvailableAgent,
+  queryClient: QueryClient,
+): Promise<void> {
+  if (!agent.sessionId || agent.harness !== null || agent.description !== null) return;
   try {
     const res = await authenticatedFetch(
-      `/v1/sessions/${encodeURIComponent(scanned.sessionId)}/agent`,
+      `/v1/sessions/${encodeURIComponent(agent.sessionId)}/agent`,
     );
-    if (!res.ok) return fallback;
+    if (!res.ok) return;
     const json = (await res.json()) as AgentObjectWire;
-    return {
-      ...fallback,
-      display_name: displayNameForAgent(json.name, json.harness),
-      description: json.description ?? null,
-      harness: json.harness ?? null,
-      skills: json.skills ?? [],
-    };
+    queryClient.setQueryData<AvailableAgent[]>(["available-agents"], (prev) => {
+      if (!prev) return prev;
+      return prev.map((a) =>
+        a.id !== agent.id
+          ? a
+          : {
+              ...a,
+              display_name: displayNameForAgent(json.name, json.harness),
+              description: json.description ?? null,
+              harness: json.harness ?? null,
+              skills: json.skills ?? [],
+            },
+      );
+    });
   } catch {
-    // Network-level failure — same best-effort degradation as the
-    // non-ok branch above: list the agent from scan fields.
-    return fallback;
+    // Best-effort — agent stays name-only on failure.
   }
 }
 
@@ -326,16 +345,12 @@ async function fetchAvailableAgents(): Promise<AvailableAgent[]> {
     }
   }
 
-  const resolved = (
-    await Promise.all(
-      Array.from(byName.values()).map((c) =>
-        c.template !== null ? Promise.resolve(c.template) : enrichSessionAgent(c.scanned!),
-      ),
-    )
-  ).filter((agent) => {
-    const nativeKey = nativeCodingAgentForAvailableAgent(agent)?.key;
-    return nativeKey !== "kiro" || !hasKiroBuiltin;
-  });
+  const resolved = Array.from(byName.values())
+    .map((c) => (c.template !== null ? c.template : sessionAgentFromScan(c.scanned!)))
+    .filter((agent) => {
+      const nativeKey = nativeCodingAgentForAvailableAgent(agent)?.key;
+      return nativeKey !== "kiro" || !hasKiroBuiltin;
+    });
   // Seeded built-ins first; user templates / custom uploads follow, newest
   // first. NewChatDialog's display-order sort is stable, so unranked names
   // keep this relative order.

web/src/shell/NewChatDialog.test.tsx

@@ -42,7 +42,10 @@ vi.mock("@/lib/identity", async (importOriginal) => ({
   authenticatedFetch: vi.fn(),
 }));
 vi.mock("@/hooks/useHosts", () => ({ useHosts: vi.fn() }));
-vi.mock("@/hooks/useAvailableAgents", () => ({ useAvailableAgents: vi.fn() }));
+vi.mock("@/hooks/useAvailableAgents", () => ({
+  useAvailableAgents: vi.fn(),
+  prefetchAvailableAgentDetails: vi.fn(),
+}));
 vi.mock("@/hooks/useHostFilesystem", () => ({
   useHostFilesystem: vi.fn(),
   // WorkspacePicker (rendered by the file browser) reads this on mount;

web/src/shell/NewChatDialog.tsx

@@ -88,7 +88,11 @@ import {
   onHostStatusChanged,
   type HostIdentity,
 } from "@/lib/nativeBridge";
-import { useAvailableAgents, type AvailableAgent } from "@/hooks/useAvailableAgents";
+import {
+  useAvailableAgents,
+  prefetchAvailableAgentDetails,
+  type AvailableAgent,
+} from "@/hooks/useAvailableAgents";
 import { useAutoGrowTextarea } from "@/hooks/useAutoGrowTextarea";
 import { useRecentWorkspaces } from "@/hooks/useRecentWorkspaces";
 import { useDirectorySessions } from "@/hooks/useDirectorySessions";
@@ -1300,6 +1304,7 @@ function AgentHarnessPicker({
   // Controlled so clicking a knobbed row can commit the pick and close the
   // menu (see the sub-trigger onClick below) without diving into the submenu.
   const [open, setOpen] = useState(false);
+  const queryClient = useQueryClient();
 
   // Touch devices can't hover, so the desktop knob flyout (a Radix sub-menu
   // that opens on hover) is unreachable there. On mobile we instead swap the
@@ -1575,6 +1580,11 @@ function AgentHarnessPicker({
           // tall list, so the later drill-in (shorter page) can't flip it.
           const rect = triggerRef.current?.getBoundingClientRect();
           if (rect) setMobileSide(window.innerHeight - rect.bottom >= rect.top ? "bottom" : "top");
+          // Prefetch harness/description/skills for all session-discovered
+          // agents so hasKnobs is stable before the user reads the list.
+          for (const agent of [...harnessEntries, ...agentEntries]) {
+            void prefetchAvailableAgentDetails(agent, queryClient);
+          }
         } else {
           // Closing resets the in-place page so the menu always reopens on the
           // agent list, never a stale knobs page.