@skyhook-io/radar-app 1.9.0 → 1.9.2

package/src/components/diagnose/AISettings.tsx

@@ -5,12 +5,16 @@
 // Settings tabs' layout — this renders only the controls (no card, no heading).
 import { useState } from "react";
 import { Trash2 } from "lucide-react";
-import { clearHistory, type AgentInfo } from "../../api/diagnose";
+import {
+  clearHistory,
+  type AgentInfo,
+  type ExecutionProfile,
+} from "../../api/diagnose";
 import { AgentControls } from "./parts";
 
 export interface AIDraft {
   agent: string;
-  isolated: boolean;
+  profile: ExecutionProfile;
   model: string;
   effort: string;
 }
@@ -120,17 +124,27 @@ export function AISettingsSection({
         // The agent, its model, and how it runs are all fixed by the host — none
         // of the local BYO-agent knobs apply, so there's nothing to configure.
         <p className="text-xs leading-snug text-theme-text-tertiary">
-          {agentLabel} manages the model and how it runs — there&apos;s nothing to
-          configure here.
+          {agentLabel} manages the model and how it runs — there&apos;s nothing
+          to configure here.
         </p>
       ) : (
         <AgentControls
           agents={agents}
           selectedAgent={draft.agent}
           // Model + effort are agent-specific; reset them when the agent changes.
-          onSelectAgent={(a) => onChange({ agent: a, model: "", effort: "" })}
-          isolated={draft.isolated}
-          onSetIsolated={(v) => onChange({ isolated: v })}
+          onSelectAgent={(a) => {
+            const nextProfile = agents.find(
+              (agent) => agent.name === a,
+            )?.profiles?.[0];
+            onChange({
+              agent: a,
+              profile: nextProfile ?? draft.profile,
+              model: "",
+              effort: "",
+            });
+          }}
+          profile={draft.profile}
+          onSetProfile={(v) => onChange({ profile: v })}
           model={draft.model}
           onSetModel={(v) => onChange({ model: v })}
           effort={draft.effort}

package/src/components/diagnose/AgentSetupNotice.tsx

@@ -0,0 +1,117 @@
+import { useState } from "react";
+import { Sparkles, Copy, Check, ExternalLink, RotateCw } from "lucide-react";
+import { SUPPORTED_AGENTS, type AgentInstall } from "./agentCatalog";
+import { type DiagnoseSetup } from "./DiagnoseContext";
+
+function CopyButton({ text }: { text: string }) {
+  const [copied, setCopied] = useState(false);
+  return (
+    <button
+      type="button"
+      onClick={() => {
+        void navigator.clipboard?.writeText(text);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 1100);
+      }}
+      className="shrink-0 rounded-md p-1 text-theme-text-tertiary hover:bg-theme-hover hover:text-theme-text-primary"
+      aria-label={copied ? "Copied" : "Copy install command"}
+    >
+      {copied ? (
+        <Check className="h-3.5 w-3.5 text-emerald-500" />
+      ) : (
+        <Copy className="h-3.5 w-3.5" />
+      )}
+    </button>
+  );
+}
+
+function AgentRow({ agent }: { agent: AgentInstall }) {
+  return (
+    <div className="rounded-lg border border-theme-border bg-theme-base p-3">
+      <div className="mb-2 flex items-center justify-between gap-2">
+        <span className="text-sm font-medium text-theme-text-primary">
+          {agent.label}
+        </span>
+        <a
+          href={agent.docs}
+          target="_blank"
+          rel="noreferrer"
+          className="inline-flex items-center gap-1 text-xs text-theme-text-tertiary hover:text-theme-text-primary"
+        >
+          Docs
+          <ExternalLink className="h-3 w-3" />
+        </a>
+      </div>
+      <div className="flex items-center gap-1.5 rounded-md bg-theme-elevated px-2 py-1.5">
+        <code className="min-w-0 flex-1 overflow-x-auto whitespace-nowrap font-mono text-xs text-theme-text-secondary">
+          {agent.install}
+        </code>
+        <CopyButton text={agent.install} />
+      </div>
+    </div>
+  );
+}
+
+// Shown in the AI surface's Home when diagnosis is eligible in this deployment
+// but not runnable yet — either no agent CLI is installed ("needs-install") or a
+// supported one appeared after Radar booted ("needs-restart"). Radar decides the
+// engine once at startup, so a fresh install needs a restart to take effect.
+export function AgentSetupNotice({
+  setupState,
+}: {
+  setupState: DiagnoseSetup;
+}) {
+  const needsRestart = setupState === "needs-restart";
+  return (
+    <div className="mx-auto max-w-md px-1 py-6">
+      <div className="mb-3 flex h-10 w-10 items-center justify-center rounded-xl border border-accent/30 bg-accent/5">
+        <Sparkles className="h-5 w-5 text-accent" />
+      </div>
+      <h3 className="text-base font-semibold text-theme-text-primary">
+        {needsRestart
+          ? "Restart Radar to enable AI diagnosis"
+          : "Set up AI diagnosis"}
+      </h3>
+      <p className="mt-1 text-sm text-theme-text-secondary">
+        {needsRestart ? (
+          <>
+            A supported agent CLI is now installed, but Radar started before it
+            was — restart Radar to pick it up. Investigations then run locally
+            on your machine, keyless, using your own agent.
+          </>
+        ) : (
+          <>
+            Radar runs investigations through a coding agent CLI on your own
+            machine — no Radar cloud, no API key. Install one of these, then
+            restart Radar:
+          </>
+        )}
+      </p>
+
+      {!needsRestart && (
+        <div className="mt-4 flex flex-col gap-2.5">
+          {SUPPORTED_AGENTS.map((a) => (
+            <AgentRow key={a.name} agent={a} />
+          ))}
+        </div>
+      )}
+
+      {/* The panel only re-reads /api/agents on load, so after installing or
+          restarting the user needs a way to refresh in place rather than
+          hunting for a manual browser reload. */}
+      <button
+        type="button"
+        onClick={() => window.location.reload()}
+        className="btn-brand mt-4 inline-flex items-center gap-1.5 px-3 py-1.5 text-sm"
+      >
+        <RotateCw className="h-3.5 w-3.5" />
+        {needsRestart ? "Reload after restarting" : "Reload after installing"}
+      </button>
+
+      <p className="mt-4 text-xs text-theme-text-tertiary">
+        The agent reads this cluster through Radar and finds the root cause. It
+        never leaves your machine.
+      </p>
+    </div>
+  );
+}

package/src/components/diagnose/DiagnoseContext.tsx

@@ -22,7 +22,11 @@ import {
   recordConsent,
   DiagnoseError,
 } from "../../api/diagnose";
-import { type RunSummary, type AgentInfo } from "../../api/diagnose";
+import {
+  type RunSummary,
+  type AgentInfo,
+  type ExecutionProfile,
+} from "../../api/diagnose";
 
 export interface Target {
   kind: string;
@@ -31,15 +35,25 @@ export interface Target {
 }
 export type DiagnoseView = "home" | "investigation";
 
+// Setup readiness of the local AI-diagnosis feature, derived from the agents API:
+//  - "ready":         an agent is installed and the engine is running (available)
+//  - "needs-install": the feature is supported here but no agent CLI is installed
+//  - "needs-restart": a supported agent is now on PATH but Radar booted before it
+//                     existed (the engine is decided once, at startup)
+//  - "off":           not available in this deployment (proxy/OIDC auth, --no-mcp,
+//                     or an embed host) — no install nudge would help
+export type DiagnoseSetup = "ready" | "needs-install" | "needs-restart" | "off";
+
 interface DiagnoseCtx {
   available: boolean; // an agent CLI is present (button/entry gate)
+  setupState: DiagnoseSetup; // readiness for the setup nudge (see DiagnoseSetup)
   agentLabel: string; // label of the selected agent, e.g. "Claude Code"
   hosted: boolean; // selected agent runs on the host's backend, not this machine
   agents: AgentInfo[]; // supported agents detected on PATH (for the picker)
   selectedAgent: string; // name of the chosen backend ("claude"/"codex")
   setSelectedAgent: (name: string) => void;
-  isolated: boolean; // run the agent without the user's own CLI config
-  setIsolated: (v: boolean) => void;
+  profile: ExecutionProfile;
+  setProfile: (v: ExecutionProfile) => void;
   model: string; // optional model override ("" = the agent's own default)
   setModel: (v: string) => void;
   effort: string; // optional Codex reasoning effort ("" = default)
@@ -82,7 +96,11 @@ interface DiagnoseLayoutCtx {
 
 // Stable key for "is THIS resource being investigated right now" — built the same way
 // from a run summary and from a button's target so the two always match.
-export function runTargetKey(kind: string, namespace: string, name: string): string {
+export function runTargetKey(
+  kind: string,
+  namespace: string,
+  name: string,
+): string {
   return `${kind} ${namespace} ${name}`;
 }
 
@@ -91,7 +109,8 @@ const LayoutCtx = createContext<DiagnoseLayoutCtx | null>(null);
 
 export function useDiagnoseLayout(): DiagnoseLayoutCtx {
   const c = useContext(LayoutCtx);
-  if (!c) throw new Error("useDiagnoseLayout must be used within DiagnoseProvider");
+  if (!c)
+    throw new Error("useDiagnoseLayout must be used within DiagnoseProvider");
   return c;
 }
 
@@ -108,15 +127,10 @@ const WIDTH_KEY = "radar-ai-panel-width";
 // Consent is machine-scoped and lives server-side (~/.radar): it gates a
 // machine-scoped action (spawn this machine's agent CLI, persist transcripts to
 // this machine's disk), so one acknowledgment covers this panel AND the
-// `radar diagnose` CLI. Cursor gets its own surface — its trust model is
-// materially different (the user's global MCP servers can't be excluded), so
-// approving Claude/Codex never bypasses Cursor's distinct disclosure.
-type ConsentSurface = "standard" | "cursor";
-function consentSurfaceFor(agent: string): ConsentSurface {
-  return agent === "cursor-agent" ? "cursor" : "standard";
-}
+// `radar diagnose` CLI. The execution profile selects the disclosure because
+// it determines the actual access available to the agent process.
 const AGENT_KEY = "radar-ai-agent";
-const ISOLATED_KEY = "radar-ai-isolated";
+const PROFILE_KEY = "radar-ai-profile";
 const MODEL_KEY = "radar-ai-model";
 const EFFORT_KEY = "radar-ai-effort";
 // Push (reflow the app left) only while the app keeps at least this much width to
@@ -140,7 +154,9 @@ export function agentLabelFor(name: string, fallbackLabel?: string): string {
 // openDiagnoseSettings opens the Settings dialog (App.tsx listens for this DOM
 // event) — the canonical home for AI-diagnosis config.
 export function openDiagnoseSettings() {
-  window.dispatchEvent(new CustomEvent("radar:open-settings"));
+  window.dispatchEvent(
+    new CustomEvent("radar:open-settings", { detail: { section: "ai" } }),
+  );
 }
 
 function readStored(key: string): string | null {
@@ -160,15 +176,14 @@ function writeStored(key: string, value: string) {
 
 export function DiagnoseProvider({ children }: { children: ReactNode }) {
   const [available, setAvailable] = useState(false);
+  const [eligible, setEligible] = useState(false);
   const [agents, setAgents] = useState<AgentInfo[]>([]);
-  const [consented, setConsented] = useState<
-    Record<ConsentSurface, boolean>
-  >({ standard: false, cursor: false });
+  const [consented, setConsented] = useState<Record<string, boolean>>({});
   const [selectedAgent, setSelectedAgentState] = useState<string>(
     () => readStored(AGENT_KEY) || "",
   );
-  const [isolated, setIsolatedState] = useState<boolean>(
-    () => readStored(ISOLATED_KEY) !== "0", // default isolated
+  const [profile, setProfileState] = useState<ExecutionProfile>(
+    () => (readStored(PROFILE_KEY) as ExecutionProfile) || "safeguarded",
   );
   const [model, setModelState] = useState<string>(
     () => readStored(MODEL_KEY) || "",
@@ -205,12 +220,16 @@ export function DiagnoseProvider({ children }: { children: ReactNode }) {
     fetchAgents()
       .then((r) => {
         if (!live) return;
-        setAvailable(r.enabled);
-        setConsented({
-          standard: !!r.consented?.standard,
-          cursor: !!r.consented?.cursor,
-        });
-        const supported = r.agents.filter((a) => a.supported);
+        setConsented(r.consented ?? {});
+        setEligible(!!r.eligible);
+        const supported = r.agents.filter(
+          (a) =>
+            a.supported &&
+            (a.hosted ||
+              (!!a.profiles?.length &&
+                a.profiles.every((p) => !!a.consentSurfaces?.[p]))),
+        );
+        setAvailable(r.enabled && supported.length > 0);
         setAgents(supported);
         // Keep the stored pick only if it's still installed; else default to the
         // first supported agent (matches the server's default selection).
@@ -220,6 +239,13 @@ export function DiagnoseProvider({ children }: { children: ReactNode }) {
             ? stored
             : (supported[0]?.name ?? "");
         setSelectedAgentState(next);
+        const profiles = supported.find((a) => a.name === next)?.profiles ?? [];
+        const storedProfile =
+          (readStored(PROFILE_KEY) as ExecutionProfile) || "safeguarded";
+        if (!profiles.includes(storedProfile) && profiles[0]) {
+          setProfileState(profiles[0]);
+          writeStored(PROFILE_KEY, profiles[0]);
+        }
         // Model/effort are agent-specific; if the stored agent is gone, its values
         // don't apply to the fallback agent (e.g. a Codex slug under Claude) — drop them.
         if (next !== stored) {
@@ -247,23 +273,45 @@ export function DiagnoseProvider({ children }: { children: ReactNode }) {
     (name: string) => {
       setSelectedAgentState(name);
       writeStored(AGENT_KEY, name);
+      const nextProfile = agents.find((agent) => agent.name === name)
+        ?.profiles?.[0];
+      if (nextProfile) {
+        setProfileState(nextProfile);
+        writeStored(PROFILE_KEY, nextProfile);
+      }
       // Model + effort are agent-specific (Claude aliases vs Codex slugs); reset
       // to the new agent's default rather than carry an invalid value across.
       setModel("");
       setEffort("");
     },
-    [setModel, setEffort],
+    [agents, setModel, setEffort],
   );
-  const setIsolated = useCallback((v: boolean) => {
-    setIsolatedState(v);
-    writeStored(ISOLATED_KEY, v ? "1" : "0");
+  const setProfile = useCallback((v: ExecutionProfile) => {
+    setProfileState(v);
+    writeStored(PROFILE_KEY, v);
   }, []);
 
-  const agentLabel = agentLabelFor(
-    selectedAgent,
-    agents.find((a) => a.name === selectedAgent)?.label,
-  );
-  const hosted = !!agents.find((a) => a.name === selectedAgent)?.hosted;
+  const selectedAgentInfo = agents.find((a) => a.name === selectedAgent);
+  const effectiveProfile = selectedAgentInfo?.profiles?.includes(profile)
+    ? profile
+    : (selectedAgentInfo?.profiles?.[0] ?? profile);
+  const agentLabel = agentLabelFor(selectedAgent, selectedAgentInfo?.label);
+  const hosted = !!selectedAgentInfo?.hosted;
+  // Hosted Radar uses its existing per-user disclosure surface and supplies its
+  // own copy. Local agents use the execution profile as the consent contract.
+  const consentSurface = hosted
+    ? "standard"
+    : (selectedAgentInfo?.consentSurfaces?.[effectiveProfile] ?? "");
+
+  // `agents` holds only supported CLIs (filtered on fetch), so a non-empty list
+  // while the engine is off means a drivable agent appeared on PATH after boot.
+  const setupState: DiagnoseSetup = available
+    ? "ready"
+    : !eligible
+      ? "off"
+      : agents.length > 0
+        ? "needs-restart"
+        : "needs-install";
 
   useEffect(() => {
     const onResize = () => setViewportW(window.innerWidth);
@@ -314,10 +362,6 @@ export function DiagnoseProvider({ children }: { children: ReactNode }) {
     return () => clearInterval(t);
   }, [open, available, hasRunning, refreshRuns]);
 
-  // Keep the live selected agent reachable from the [] -dep callbacks below
-  // (consent is agent-specific, so they must read the CURRENT pick, not a closure).
-  const selectedAgentRef = useRef(selectedAgent);
-  selectedAgentRef.current = selectedAgent;
   const consentedRef = useRef(consented);
   consentedRef.current = consented;
 
@@ -329,7 +373,7 @@ export function DiagnoseProvider({ children }: { children: ReactNode }) {
     const seq = ++startSeqRef.current;
     createRun(t, {
       agent: selectedAgent || undefined,
-      isolated,
+      profile: hosted ? undefined : effectiveProfile,
       model: model || undefined,
       effort: effort || undefined,
     })
@@ -351,17 +395,28 @@ export function DiagnoseProvider({ children }: { children: ReactNode }) {
       });
   };
 
-  const openInvestigation = useCallback((t: Target) => {
-    setStartError(null);
-    setOpen(true);
-    if (!consentedRef.current[consentSurfaceFor(selectedAgentRef.current)]) {
-      setPendingTarget(t);
+  const openInvestigation = useCallback(
+    (t: Target) => {
+      setStartError(null);
+      setOpen(true);
+      if (!hosted && !consentSurface) {
+        setPendingTarget(null);
+        setStartError(
+          "Radar can’t run this agent with a verified execution profile.",
+        );
+        setView("investigation");
+        return;
+      }
+      if (!consentedRef.current[consentSurface]) {
+        setPendingTarget(t);
+        setView("investigation");
+        return;
+      }
       setView("investigation");
-      return;
-    }
-    setView("investigation");
-    startRunRef.current(t);
-  }, []);
+      startRunRef.current(t);
+    },
+    [consentSurface, hosted],
+  );
   const openRun = useCallback((id: string) => {
     setStartError(null);
     setActiveRunId(id);
@@ -384,7 +439,9 @@ export function DiagnoseProvider({ children }: { children: ReactNode }) {
         window.history.replaceState(
           null,
           "",
-          window.location.pathname + (qs ? `?${qs}` : "") + window.location.hash,
+          window.location.pathname +
+            (qs ? `?${qs}` : "") +
+            window.location.hash,
         );
       }
     } catch {
@@ -401,15 +458,18 @@ export function DiagnoseProvider({ children }: { children: ReactNode }) {
   const consentBusyRef = useRef(false);
   const approveConsent = useCallback(() => {
     if (consentBusyRef.current) return;
+    if (!consentSurface) {
+      setStartError("Radar can’t record consent for this agent.");
+      return;
+    }
     consentBusyRef.current = true;
     setStartError(null);
-    const surface = consentSurfaceFor(selectedAgentRef.current);
     const t = pendingTarget;
     // The server ENFORCES consent at start, so the acknowledgment must land
     // before the run request — awaiting also makes it durable for the CLI.
-    recordConsent(surface)
+    recordConsent(consentSurface)
       .then(() => {
-        setConsented((prev) => ({ ...prev, [surface]: true }));
+        setConsented((prev) => ({ ...prev, [consentSurface]: true }));
         // Cleared only on success: a failed write keeps the consent card up
         // (needsConsent = !!pendingTarget) so "try again" works in place.
         setPendingTarget(null);
@@ -421,7 +481,7 @@ export function DiagnoseProvider({ children }: { children: ReactNode }) {
       .finally(() => {
         consentBusyRef.current = false;
       });
-  }, [pendingTarget]);
+  }, [consentSurface, pendingTarget]);
   const cancelConsent = useCallback(() => {
     setPendingTarget(null);
     setOpen(false);
@@ -435,13 +495,14 @@ export function DiagnoseProvider({ children }: { children: ReactNode }) {
 
   const value: DiagnoseCtx = {
     available,
+    setupState,
     agentLabel,
     hosted,
     agents,
     selectedAgent,
     setSelectedAgent,
-    isolated,
-    setIsolated,
+    profile: effectiveProfile,
+    setProfile,
     model,
     setModel,
     effort,
@@ -484,7 +545,16 @@ export function DiagnoseProvider({ children }: { children: ReactNode }) {
       panelWidthKey: WIDTH_KEY,
       runningKeys,
     }),
-    [open, contentGutter, maximized, width, narrow, runningKeys, setMaximized, setWidth],
+    [
+      open,
+      contentGutter,
+      maximized,
+      width,
+      narrow,
+      runningKeys,
+      setMaximized,
+      setWidth,
+    ],
   );
 
   return (

package/src/components/diagnose/DiagnoseSurface.tsx

@@ -26,27 +26,32 @@ import {
 import { useDiagnoseCustomization } from "../../context/DiagnoseCustomization";
 import { InvestigationView } from "./InvestigationView";
 import { RecentList } from "./Home";
+import { AgentSetupNotice } from "./AgentSetupNotice";
 import { ConsentCard } from "./parts";
 import { buildLaunchCommand, launchAgentLabel, openInTerminal } from "./launch";
-import { type RunSummary } from "../../api/diagnose";
+import { type RunSummary, type ExecutionProfile } from "../../api/diagnose";
 
 function capWord(s: string): string {
   return s ? s[0].toUpperCase() + s.slice(1) : s;
 }
 
 // buildConfigLine renders the active AI config as the header subtitle. Codex shows
-// its isolation mode + effective reasoning effort (Default → medium); a model
+// its execution profile + effective reasoning effort (Default → medium); a model
 // override is shown for either agent. Reflects a run's recorded settings, or the
 // current defaults on Home.
 function buildConfigLine(cfg: {
   agent?: string;
-  isolated?: boolean;
+  profile?: ExecutionProfile;
   model?: string;
   effort?: string;
 }): string {
   const parts = [agentLabelFor(cfg.agent ?? "")];
+  if (cfg.profile) {
+    parts.push(
+      cfg.profile === "full-local" ? "Your agent setup" : "Radar safeguards",
+    );
+  }
   if (cfg.agent === "codex") {
-    parts.push(cfg.isolated === false ? "My setup" : "Isolated");
     parts.push(`${capWord(cfg.effort || "medium")} effort`);
   }
   if (cfg.model) parts.push(capWord(cfg.model));
@@ -139,7 +144,8 @@ export function DiagnoseSurface({ topInset = 0 }: { topInset?: number }) {
   const d = useDiagnose();
   // Injected settings action: undefined = Radar's own Settings dialog;
   // null = hide the gear + links.
-  const { consentCopy, onOpenSettings: hostOpenSettings } = useDiagnoseCustomization();
+  const { consentCopy, onOpenSettings: hostOpenSettings } =
+    useDiagnoseCustomization();
   const openSettings =
     hostOpenSettings === undefined ? openDiagnoseSettings : hostOpenSettings;
   const {
@@ -174,18 +180,23 @@ export function DiagnoseSurface({ topInset = 0 }: { topInset?: number }) {
     document.addEventListener("mouseup", onUp);
   };
 
+  // Feature is eligible here but not runnable yet (no agent installed, or one
+  // appeared after boot) — Home leads with the setup notice instead of an empty list.
+  const setupPending =
+    d.setupState === "needs-install" || d.setupState === "needs-restart";
+
   const activeRun = d.runs.find((r) => r.id === d.activeRunId) ?? null;
   // A focused run shows the agent it actually ran with; Home reflects the current pick.
   const activeAgentLabel = activeRun?.agent
     ? agentLabelFor(activeRun.agent)
     : d.agentLabel;
   // Header subtitle: the config a focused run actually used (it records agent /
-  // isolation / model / effort), or the current defaults on Home. Codex shows mode
+  // profile / model / effort), or the current defaults on Home. Codex shows mode
   // + reasoning effort; model is shown only when overridden. Clicking opens Settings.
   const configLine = buildConfigLine(
     activeRun ?? {
       agent: d.selectedAgent,
-      isolated: d.isolated,
+      profile: d.hosted ? undefined : d.profile,
       model: d.model,
       effort: d.effort,
     },
@@ -208,7 +219,7 @@ export function DiagnoseSurface({ topInset = 0 }: { topInset?: number }) {
         <ConsentCard
           agentName={d.agentLabel}
           agent={d.selectedAgent}
-          isolated={d.isolated}
+          profile={d.profile}
           copy={consentCopy}
           onOpenSettings={openSettings ?? undefined}
           onApprove={d.approveConsent}
@@ -258,6 +269,10 @@ export function DiagnoseSurface({ topInset = 0 }: { topInset?: number }) {
         Dismiss
       </button>
     </div>
+  ) : setupPending ? (
+    <div className="flex-1 overflow-y-auto">
+      <AgentSetupNotice setupState={d.setupState} />
+    </div>
   ) : (
     <div className="flex flex-1 items-center justify-center px-6 text-center text-sm text-theme-text-tertiary">
       Select an investigation, or open a resource and click Diagnose.
@@ -357,7 +372,7 @@ export function DiagnoseSurface({ topInset = 0 }: { topInset?: number }) {
           only appears when expanded; keys keep the detail node identity-stable
           as it comes and goes. */}
       <div className="flex min-h-0 flex-1">
-        {showHistory && (
+        {showHistory && (!setupPending || d.runs.length > 0) && (
           <aside
             key="recent"
             className="w-72 shrink-0 overflow-y-auto border-r border-theme-border px-3 py-3"
@@ -376,12 +391,15 @@ export function DiagnoseSurface({ topInset = 0 }: { topInset?: number }) {
             key="main"
             className="flex-1 overflow-y-auto overflow-x-hidden px-4 py-3"
           >
-            <RecentList
-              agentLabel={d.agentLabel}
-              runs={d.runs}
-              onSelect={d.openRun}
-              historyDegraded={d.historyDegraded}
-            />
+            {setupPending && <AgentSetupNotice setupState={d.setupState} />}
+            {(!setupPending || d.runs.length > 0) && (
+              <RecentList
+                agentLabel={d.agentLabel}
+                runs={d.runs}
+                onSelect={d.openRun}
+                historyDegraded={d.historyDegraded}
+              />
+            )}
           </div>
         ) : (
           <div key="main" className="flex min-h-0 min-w-0 flex-1 flex-col">