@skyhook-io/radar-app 1.9.5 → 1.9.7

package/src/components/CloudFunnelButton.tsx

@@ -1,6 +1,7 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useId, useState, type ReactNode } from 'react'
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { Bell, Check, Globe, History, Sparkles, Users, X } from 'lucide-react'
+import { Collapse, CollapseChevron } from '@skyhook-io/k8s-ui/components/ui/Collapse'
 import { DialogPortal } from '@skyhook-io/k8s-ui/components/ui/DialogPortal'
 import { Tooltip } from './ui/Tooltip'
 import { CloudConnectFlow } from './CloudConnectFlow'
@@ -34,6 +35,9 @@ const FALLBACK_APP_URL = 'https://app.radarhq.io'
 // offline laptop all render exactly what Radar rendered before this fetch
 // existed — the dialog never waits on the network and never shows a gap.
 const DEFAULT_ASSURANCES = ['Free for 3 clusters', 'No credit card', 'Your cluster data stays in your cluster']
+// A product fact, not funnel copy — appended even when the Hub supplies its
+// own assurances (deduped if the Hub starts sending it).
+const SOC2_ASSURANCE = 'SOC 2 compliant'
 const SIGNUP_QUERY = '?utm_source=radar-oss&utm_medium=app&utm_campaign=cloud-modal'
 const ABOUT_URL = 'https://radarhq.io/about'
 const SELF_HOSTED_DOCS_URL = 'https://radarhq.io/docs/cloud/self-hosted/'
@@ -193,7 +197,7 @@ export function CloudFunnelButton() {
       <DialogPortal
         open={open}
         onClose={() => setOpen(false)}
-        className="w-[500px] max-w-full max-h-[calc(100vh-2rem)] overflow-hidden flex flex-col"
+        className="w-[580px] max-w-full max-h-[calc(100vh-2rem)] overflow-hidden flex flex-col"
       >
         <button
           onClick={() => setOpen(false)}
@@ -208,7 +212,7 @@ export function CloudFunnelButton() {
             more with the connect flow, whose plan card is the tallest state. */}
         {showFlow && flowForView ? (
           <div className="min-h-0 overflow-y-auto">
-            <div className="px-7 pt-6">
+            <div className="px-8 pt-7">
               <Eyebrow />
             </div>
             <CloudConnectFlow
@@ -245,6 +249,39 @@ export function CloudFunnelButton() {
   )
 }
 
+// Secondary copy the pitch shouldn't spend vertical space on until asked for.
+function Fold({ summary, className = '', children }: { summary: string; className?: string; children: ReactNode }) {
+  const [open, setOpen] = useState(false)
+  const bodyId = useId()
+  return (
+    <div className={className}>
+      <button
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        aria-expanded={open}
+        aria-controls={bodyId}
+        className="flex items-center gap-1.5 text-[11.5px] text-theme-text-tertiary hover:text-theme-text-primary transition-colors"
+      >
+        <CollapseChevron open={open} className="w-3 h-3" />
+        {summary}
+      </button>
+      <Collapse open={open}>
+        <p id={bodyId} className="mt-2 pl-[18px] text-[11.5px] leading-relaxed text-theme-text-tertiary">
+          {children}
+        </p>
+      </Collapse>
+    </div>
+  )
+}
+
+function assuranceItems(fromHub?: string[]): string[] {
+  const items = fromHub?.length ? fromHub : DEFAULT_ASSURANCES
+  if (items.some((item) => item.toLowerCase().includes('soc 2'))) return items
+  // Before the last item: the closer ("data stays in your cluster") is the
+  // longest line and wraps most naturally when it comes last.
+  return [...items.slice(0, -1), SOC2_ASSURANCE, items[items.length - 1]]
+}
+
 function RadarSweep() {
   return (
     <div
@@ -263,32 +300,13 @@ function RadarSweep() {
 
 function Eyebrow() {
   return (
-    <div className="flex items-center gap-2.5 mb-3.5">
+    <div className="flex items-center gap-3 mb-5">
       <RadarSweep />
       <span className="font-mono text-[10.5px] tracking-[0.16em] uppercase text-emerald-600 dark:text-emerald-400">Radar Cloud</span>
     </div>
   )
 }
 
-function Faces() {
-  return (
-    <div className="flex shrink-0" aria-hidden>
-      {[
-        ['R', 'bg-emerald-500/20 text-emerald-700 dark:text-emerald-300'],
-        ['N', 'bg-sky-500/20 text-sky-700 dark:text-sky-300'],
-        ['E', 'bg-amber-500/20 text-amber-700 dark:text-amber-300'],
-      ].map(([initial, color], i) => (
-        <div
-          key={initial}
-          className={`w-6 h-6 text-[10px] ${color} rounded-full grid place-items-center font-bold border-2 border-theme-surface ${i > 0 ? '-ml-1.5' : ''}`}
-        >
-          {initial}
-        </div>
-      ))}
-    </div>
-  )
-}
-
 function ModalFooter({
   lane,
   signupUrl,
@@ -328,9 +346,9 @@ function ModalFooter({
   // fast click would escape to signup before we could route this install.
   const selfPending = selfLoading === true
   return (
-    <div className="px-7 py-4 bg-theme-base border-t border-theme-border">
+    <div className="shrink-0 px-8 py-5 bg-theme-base border-t border-theme-border">
       {self && self.ownership !== 'unknown' && (
-        <div className="mb-3 card-inner text-[11.5px] leading-snug text-theme-text-secondary">
+        <div className="mb-3.5 card-inner p-3 text-[12px] leading-relaxed text-theme-text-secondary">
           {ambiguous ? (
             <>
               Radar found conflicting management metadata on this install, so it can't say whether a Helm
@@ -367,14 +385,20 @@ function ModalFooter({
         </div>
       )}
       {notice && (
-        <div className="mb-3 card-inner text-[11.5px] leading-snug text-theme-text-secondary">{notice}</div>
+        <div className="mb-3.5 card-inner p-3 text-[12px] leading-relaxed text-theme-text-secondary">{notice}</div>
+      )}
+      {lane === 'driver' && (
+        <p className="mb-3.5 text-[12px] leading-relaxed text-theme-text-secondary">
+          The guided setup runs right here in the app — Radar installs the Cloud agent on this cluster, and
+          you approve the connection in your browser.
+        </p>
       )}
-      <div className="flex items-center gap-4">
+      <div className="flex flex-wrap items-center gap-x-5 gap-y-2.5">
         {lane === 'driver' ? (
           <>
             <button
               onClick={onConnect}
-              className="px-5 py-2 rounded-[10px] bg-emerald-500 hover:bg-emerald-400 text-emerald-950 text-[13.5px] font-bold shadow-[0_0_22px_rgba(16,185,129,0.35)] hover:shadow-[0_0_30px_rgba(16,185,129,0.5)] hover:-translate-y-px transition-all"
+              className="whitespace-nowrap px-6 py-2.5 rounded-[10px] bg-emerald-500 hover:bg-emerald-400 text-emerald-950 text-[14px] font-bold shadow-[0_0_22px_rgba(16,185,129,0.35)] hover:shadow-[0_0_30px_rgba(16,185,129,0.5)] hover:-translate-y-px transition-all"
             >
               Connect this cluster
             </button>
@@ -382,9 +406,9 @@ function ModalFooter({
               href={driverEscapeUrl}
               target="_blank"
               rel="noopener noreferrer"
-              className="text-[12.5px] text-theme-text-secondary hover:text-theme-text-primary underline underline-offset-2 transition-colors"
+              className="whitespace-nowrap text-[13px] text-theme-text-secondary hover:text-theme-text-primary underline underline-offset-2 transition-colors"
             >
-              or start in the browser
+              or set up in the browser
             </a>
           </>
         ) : cliOnly ? null : (
@@ -399,33 +423,32 @@ function ModalFooter({
             {self?.ownership === 'helm' || gitops ? 'Connect this cluster' : 'Try Cloud free'}
           </a>
         )}
-        <button onClick={onLater} className="text-[12.5px] text-theme-text-tertiary hover:text-theme-text-primary transition-colors">
+        <button onClick={onLater} className="whitespace-nowrap text-[13px] text-theme-text-tertiary hover:text-theme-text-primary transition-colors">
           Maybe later
         </button>
       </div>
-      <div className="mt-2.5 flex flex-wrap items-center gap-x-4 gap-y-1 text-[11px] text-theme-text-tertiary">
-        {(assurances?.length ? assurances : DEFAULT_ASSURANCES).map((item) => (
-          <span key={item} className="flex items-center gap-1">
-            <Check className="w-3 h-3 text-emerald-600 dark:text-emerald-400" />
+      <div className="mt-4 grid grid-cols-2 gap-x-5 gap-y-2 text-[11.5px] text-theme-text-tertiary">
+        {assuranceItems(assurances).map((item) => (
+          <span key={item} className="flex items-start gap-1.5">
+            <Check className="w-3 h-3 mt-[3px] shrink-0 text-emerald-600 dark:text-emerald-400" />
             {item}
           </span>
         ))}
       </div>
-      <p className="mt-3.5 text-[11px] text-theme-text-tertiary">
-        Prefer to run the control plane in your own VPC? Self-hosting is self-serve — 30-day trial, no sales
-        call.{' '}
+      <Fold summary="Prefer to run the control plane in your own VPC?" className="mt-3.5">
+        Self-hosting is fully self-serve — set it up yourself, whenever you're ready.{' '}
         <a href={SELF_HOSTED_DOCS_URL} target="_blank" rel="noopener noreferrer" className="text-theme-text-secondary underline underline-offset-2 hover:text-theme-text-primary">
           Read the docs
         </a>
         .
-      </p>
+      </Fold>
     </div>
   )
 }
 
 // Headline defuses the paywall fear before anything is pitched; the grid
-// carries the concrete capabilities; the humans strip closes with the
-// anti-sell — the credibility beat that makes the sell land.
+// carries the concrete capabilities; the anti-sell closes — the credibility
+// beat that makes the sell land.
 function ModalBody() {
   const features = [
     {
@@ -456,43 +479,43 @@ function ModalBody() {
     },
   ]
   return (
-    <div className="px-7 pt-6 pb-1">
+    <div className="px-8 pt-7 pb-2">
       <Eyebrow />
-      <h3 className="text-[21px] font-semibold leading-tight tracking-tight text-theme-text-primary mb-2.5 text-balance">
+      <h3 className="text-[22px] font-semibold leading-tight tracking-tight text-theme-text-primary mb-3 text-balance">
         First things first: Radar stays free.
       </h3>
-      <p className="text-[13.5px] leading-relaxed text-theme-text-secondary mb-4">
+      <p className="text-[14px] leading-relaxed text-theme-text-secondary mb-5">
         The app you're looking at is Apache&nbsp;2.0 — every feature, forever, no rug pulls.{' '}
         <b className="text-theme-text-primary font-semibold">Radar Cloud is how we keep the lights on:</b> the
         same Radar, plus the parts that are genuinely hard to run on your own.
       </p>
-      <div className="grid grid-cols-2 gap-2 mb-4">
+      <div className="grid grid-cols-2 gap-3 mb-5">
         {features.map(({ icon: Icon, title, body, wide }) => (
-          <div key={title} className={`card-inner-lg flex gap-2.5 ${wide ? 'col-span-2' : ''}`}>
+          <div
+            key={title}
+            className={`card-inner-lg p-3.5 flex gap-3 ${
+              wide ? 'col-span-2 bg-emerald-500/[0.06] border-emerald-500/25 dark:bg-emerald-500/[0.08]' : ''
+            }`}
+          >
             <Icon className="w-4 h-4 shrink-0 mt-0.5 text-emerald-600 dark:text-emerald-400" />
             <div>
-              <div className="text-[12.5px] font-semibold text-theme-text-primary">{title}</div>
-              <p className="mt-0.5 text-[11.5px] leading-snug text-theme-text-tertiary">{body}</p>
+              <div className="text-[13px] font-semibold text-theme-text-primary">{title}</div>
+              <p className="mt-1 text-[12px] leading-relaxed text-theme-text-tertiary">{body}</p>
             </div>
           </div>
         ))}
       </div>
-      <div className="flex items-start gap-2.5 mb-4">
-        <div className="mt-0.5">
-          <Faces />
-        </div>
-        <div className="min-w-0">
-          <p className="text-[12px] leading-snug text-theme-text-secondary">
-            If it's just you and one cluster — honestly, stay right here. This app is the product, not a demo.
-          </p>
-          <p className="mt-1 text-[11px] leading-snug text-theme-text-tertiary">
-            Radar is built in the open by many hands, and overseen by a small team of humans — the kind you can
-            actually talk to.{' '}
-            <a href={ABOUT_URL} target="_blank" rel="noopener noreferrer" className="whitespace-nowrap text-theme-text-secondary underline underline-offset-2 hover:text-theme-text-primary">
-              Meet us →
-            </a>
-          </p>
-        </div>
+      <div className="mb-5 border-l-2 border-emerald-500/40 pl-3.5">
+        <p className="text-[12.5px] leading-relaxed text-theme-text-secondary">
+          If it's just you and one cluster — honestly, stay right here. This app is the product, not a demo.
+        </p>
+        <p className="mt-2 text-[11.5px] leading-relaxed text-theme-text-tertiary">
+          Radar is built in the open by many hands, and overseen by a small team of humans — the kind you
+          can actually talk to.{' '}
+          <a href={ABOUT_URL} target="_blank" rel="noopener noreferrer" className="whitespace-nowrap text-theme-text-secondary underline underline-offset-2 hover:text-theme-text-primary">
+            Meet us →
+          </a>
+        </p>
       </div>
     </div>
   )

package/src/components/diagnose/DiagnoseContext.tsx

@@ -32,6 +32,14 @@ export interface Target {
   kind: string;
   namespace: string;
   name: string;
+  /** The issue this investigation is for, when it came from an issue. Hosts
+   *  that group sessions by issue key on it; the rest carry it and ignore it. */
+  issueId?: string;
+  /** Start a new session instead of continuing one the backend would otherwise
+   *  return for this target. Rides here rather than as a separate argument so
+   *  the consent-deferred path replays one object — a parallel "was it fresh?"
+   *  state is a thing that can fall out of sync with the target it describes. */
+  fresh?: boolean;
 }
 export type DiagnoseView = "home" | "investigation";
 
@@ -66,6 +74,10 @@ interface DiagnoseCtx {
   historyDegraded: boolean; // persistence broke — history won't survive a restart
   needsConsent: boolean; // a start is pending the one-time consent
   startError: string | null;
+  // Kept apart from startError: the consent card renders this as "why your
+  // approval was refused", and a run-start failure landing in the same slot
+  // would be read as exactly that — the two paths don't share a lifecycle.
+  consentError: string | null;
   openInvestigation: (t: Target) => void;
   openRun: (id: string) => void;
   openHome: () => void;
@@ -200,6 +212,7 @@ export function DiagnoseProvider({ children }: { children: ReactNode }) {
   const [historyDegraded, setHistoryDegraded] = useState(false);
   const [pendingTarget, setPendingTarget] = useState<Target | null>(null);
   const [startError, setStartError] = useState<string | null>(null);
+  const [consentError, setConsentError] = useState<string | null>(null);
   const [width, setWidth] = useState<number>(() => {
     try {
       const v = Number(localStorage.getItem(WIDTH_KEY));
@@ -341,7 +354,7 @@ export function DiagnoseProvider({ children }: { children: ReactNode }) {
   // panel closed — and only re-render when the set actually changes, not every poll.
   const runningSig = runs
     .filter((r) => r.status === "running")
-    .map((r) => `${r.kind}\x00${r.namespace}\x00${r.name}`)
+    .map((r) => runTargetKey(r.kind, r.namespace, r.name))
     .sort()
     .join("|");
   const runningKeys = useMemo(
@@ -398,6 +411,7 @@ export function DiagnoseProvider({ children }: { children: ReactNode }) {
   const openInvestigation = useCallback(
     (t: Target) => {
       setStartError(null);
+      setConsentError(null);
       setOpen(true);
       if (!hosted && !consentSurface) {
         setPendingTarget(null);
@@ -449,21 +463,29 @@ export function DiagnoseProvider({ children }: { children: ReactNode }) {
     }
     if (id) openRun(id);
   }, [available, openRun]);
+  // Leaving the detail pane drops the failure that belonged to it. startError
+  // renders as the entire pane (maximized home still shows `detail`), where a
+  // message about a resource you just navigated away from has nothing to attach
+  // to and no way to be dismissed.
   const openHome = useCallback(() => {
     setView("home");
+    setStartError(null);
     setOpen(true);
   }, []);
-  const goHome = useCallback(() => setView("home"), []);
+  const goHome = useCallback(() => {
+    setView("home");
+    setStartError(null);
+  }, []);
   const close = useCallback(() => setOpen(false), []);
   const consentBusyRef = useRef(false);
   const approveConsent = useCallback(() => {
     if (consentBusyRef.current) return;
     if (!consentSurface) {
-      setStartError("Radar can’t record consent for this agent.");
+      setConsentError("Radar can’t record consent for this agent.");
       return;
     }
     consentBusyRef.current = true;
-    setStartError(null);
+    setConsentError(null);
     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.
@@ -475,8 +497,16 @@ export function DiagnoseProvider({ children }: { children: ReactNode }) {
         setPendingTarget(null);
         if (t) startRunRef.current(t);
       })
-      .catch(() => {
-        setStartError("Couldn't record your consent — try again.");
+      .catch((e) => {
+        // The server's message, when it has one. A host that records consent
+        // above the individual refuses whoever isn't allowed to grant it, and
+        // only its message can say who is — "try again" sends them at something
+        // that can never succeed.
+        setConsentError(
+          e instanceof DiagnoseError && e.message
+            ? e.message
+            : "Couldn't record your consent — try again.",
+        );
       })
       .finally(() => {
         consentBusyRef.current = false;
@@ -484,6 +514,7 @@ export function DiagnoseProvider({ children }: { children: ReactNode }) {
   }, [consentSurface, pendingTarget]);
   const cancelConsent = useCallback(() => {
     setPendingTarget(null);
+    setConsentError(null);
     setOpen(false);
   }, []);
   const dismissError = useCallback(() => setStartError(null), []);
@@ -517,6 +548,7 @@ export function DiagnoseProvider({ children }: { children: ReactNode }) {
     // cleared on approve/cancel — so its presence is exactly "consent needed now".
     needsConsent: !!pendingTarget,
     startError,
+    consentError,
     openInvestigation,
     openRun,
     openHome,

package/src/components/diagnose/DiagnoseSurface.test.tsx

@@ -0,0 +1,70 @@
+import { describe, expect, it } from "vitest";
+import { canStartNewInvestigation } from "./DiagnoseSurface";
+import type { RunSummary } from "../../api/diagnose";
+
+// The "new investigation" button dispatches an agent and spends the user's own
+// tokens, so every one of these clauses is load-bearing rather than cosmetic.
+// Each case below is a way it misfired before the gate existed.
+function run(status: RunSummary["status"]): RunSummary {
+  return {
+    id: "r1",
+    kind: "Deployment",
+    namespace: "prod",
+    name: "payments",
+    context: "prod-cluster",
+    status,
+    createdAt: "2026-01-01T00:00:00Z",
+    updatedAt: "2026-01-01T00:00:00Z",
+  };
+}
+
+describe("canStartNewInvestigation", () => {
+  it("offers a new investigation on a finished run", () => {
+    expect(canStartNewInvestigation("investigation", run("done"), false)).toBe(
+      true,
+    );
+  });
+
+  it("stays hidden on the investigations list", () => {
+    // goHome() leaves activeRunId set, so the header still has a run to read.
+    // Without the view check the click starts an agent on a resource the user
+    // navigated away from, over a list of unrelated investigations.
+    expect(canStartNewInvestigation("home", run("done"), false)).toBe(false);
+  });
+
+  it("stays hidden while a turn is in flight", () => {
+    // A start would be handed back the live run, so the button does nothing.
+    expect(canStartNewInvestigation("investigation", run("running"), false)).toBe(
+      false,
+    );
+  });
+
+  it("stays hidden on a stale run", () => {
+    // The body offers "Re-run on current cluster" WITH the context-changed
+    // warning. A bare + carries none of it, at a resource that may not exist in
+    // the context it would now run against.
+    expect(canStartNewInvestigation("investigation", run("stale"), false)).toBe(
+      false,
+    );
+  });
+
+  it("stays hidden while consent is pending", () => {
+    expect(canStartNewInvestigation("investigation", run("done"), true)).toBe(
+      false,
+    );
+  });
+
+  it("stays hidden with no focused run", () => {
+    expect(canStartNewInvestigation("investigation", null, false)).toBe(false);
+  });
+
+  it("offers one on an errored or stopped run", () => {
+    // Those are the runs a person most wants to start over from.
+    expect(canStartNewInvestigation("investigation", run("error"), false)).toBe(
+      true,
+    );
+    expect(canStartNewInvestigation("investigation", run("stopped"), false)).toBe(
+      true,
+    );
+  });
+});

package/src/components/diagnose/DiagnoseSurface.tsx

@@ -15,6 +15,7 @@ import {
   TerminalSquare,
   Copy,
   Check,
+  Plus,
 } from "lucide-react";
 import { Tooltip } from "../ui/Tooltip";
 import {
@@ -22,6 +23,7 @@ import {
   useDiagnoseLayout,
   agentLabelFor,
   openDiagnoseSettings,
+  type DiagnoseView,
 } from "./DiagnoseContext";
 import { useDiagnoseCustomization } from "../../context/DiagnoseCustomization";
 import { InvestigationView } from "./InvestigationView";
@@ -141,6 +143,33 @@ function InvestigationMenu({ run }: { run: RunSummary }) {
 // header, right of the nav rail) — App renders it there and passes topInset (the
 // header height; 0 in chromeless embeds). It shares that frame with the resource/
 // Helm drawers, so it no longer floats viewport-fixed or DOM-measures the chrome.
+// Whether the header offers a new investigation on the focused run's resource.
+// Every clause is a failure this button actually had:
+//
+//   view          goHome() leaves activeRunId set, so the header keeps rendering
+//                 the last focused run. Without this the button dispatches an
+//                 agent — real tokens — from a screen showing an unrelated list.
+//   run           nothing to take a resource from.
+//   running       a start is handed back the live run, so the click does nothing
+//                 and the button reads as broken.
+//   stale         the body already offers "Re-run on current cluster" WITH the
+//                 warning that the context changed; a bare + carries none of it,
+//                 and the resource may not exist in the context it'd run against.
+//   needsConsent  the consent card owns the surface until it's answered.
+export function canStartNewInvestigation(
+  view: DiagnoseView,
+  run: RunSummary | null,
+  needsConsent: boolean,
+): boolean {
+  return (
+    view === "investigation" &&
+    !!run &&
+    run.status !== "running" &&
+    run.status !== "stale" &&
+    !needsConsent
+  );
+}
+
 export function DiagnoseSurface({ topInset = 0 }: { topInset?: number }) {
   const d = useDiagnose();
   // Injected settings action: undefined = Radar's own Settings dialog;
@@ -223,6 +252,7 @@ export function DiagnoseSurface({ topInset = 0 }: { topInset?: number }) {
           profile={d.profile}
           copy={consentCopy}
           onOpenSettings={openSettings ?? undefined}
+          error={d.consentError}
           onApprove={d.approveConsent}
           onCancel={d.cancelConsent}
         />
@@ -341,6 +371,26 @@ export function DiagnoseSurface({ topInset = 0 }: { topInset?: number }) {
           </div>
         </div>
         <div className="flex shrink-0 items-center gap-0.5">
+          {activeRun &&
+            canStartNewInvestigation(d.view, activeRun, d.needsConsent) && (
+            <Tooltip content="New investigation on this resource" position="bottom">
+              <button
+                onClick={() =>
+                  d.openInvestigation({
+                    kind: activeRun.kind,
+                    namespace: activeRun.namespace,
+                    name: activeRun.name,
+                    issueId: activeRun.issueId,
+                    fresh: true,
+                  })
+                }
+                className="rounded-md p-1 text-theme-text-tertiary hover:bg-theme-hover hover:text-theme-text-primary"
+                aria-label="New investigation on this resource"
+              >
+                <Plus className="h-4 w-4" />
+              </button>
+            </Tooltip>
+          )}
           {activeRun && <InvestigationMenu run={activeRun} />}
           <Tooltip content={maximized ? "Restore" : "Expand"} position="bottom">
             <button

package/src/components/diagnose/InvestigationView.tsx

@@ -46,10 +46,21 @@ export function InvestigationView({
   const { kind, namespace, name } = run;
   // Apply is off for hosted agents (read-only server-side). Keyed on the selected
   // agent, which matches run.agent unless a deployment mixes hosted + local agents.
-  const { refreshRuns, openInvestigation, startError, hosted } = useDiagnose();
+  const { refreshRuns, openInvestigation, startError, dismissError, hosted } =
+    useDiagnose();
+  // Re-run means look again, so it asks for a new session explicitly and only
+  // carries the issue forward — being handed the previous answer is the one
+  // thing someone clicking this doesn't want.
   const retryDiagnosis = useCallback(
-    () => openInvestigation({ kind, namespace, name }),
-    [openInvestigation, kind, namespace, name],
+    () =>
+      openInvestigation({
+        kind,
+        namespace,
+        name,
+        issueId: run.issueId,
+        fresh: true,
+      }),
+    [openInvestigation, kind, namespace, name, run.issueId],
   );
   const queryClient = useQueryClient();
   const [turns, setTurns] = useState<Turn[]>([]);
@@ -470,7 +481,7 @@ export function InvestigationView({
                   </span>
                 </div>
                 <button
-                  onClick={() => openInvestigation({ kind, namespace, name })}
+                  onClick={retryDiagnosis}
                   className="mt-2 inline-flex items-center gap-1.5 rounded-md border border-amber-500/50 px-2.5 py-1 font-medium text-amber-600 hover:bg-amber-500/10 dark:text-amber-400"
                 >
                   <Send className="h-3 w-3" />
@@ -489,7 +500,7 @@ export function InvestigationView({
                   </span>
                 </div>
                 <button
-                  onClick={() => openInvestigation({ kind, namespace, name })}
+                  onClick={retryDiagnosis}
                   className="mt-2 inline-flex items-center gap-1.5 rounded-md border border-theme-border px-2.5 py-1 font-medium text-theme-text-primary hover:bg-theme-hover"
                 >
                   <Send className="h-3 w-3" />
@@ -525,10 +536,36 @@ export function InvestigationView({
                 />
               );
             })}
-            {(actionError || startError) && (
+            {actionError && (
               <div className="flex items-start gap-2 rounded-lg border border-red-500/30 bg-red-500/10 p-3 text-sm text-theme-text-primary">
                 <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-red-400" />
-                <span>{actionError || startError}</span>
+                <span>{actionError}</span>
+              </div>
+            )}
+            {/* A start that failed belongs to the investigation that never began,
+                not to the one on screen. Unlabelled at the foot of a finished
+                transcript — verdict directly above — it reads as "this
+                investigation failed". It also outlives the click that caused it,
+                and this is the only place it surfaces while a run is focused, so
+                it needs a way out. */}
+            {startError && (
+              <div
+                role="alert"
+                className="flex items-start gap-2 rounded-lg border border-red-500/30 bg-red-500/10 p-3 text-sm text-theme-text-primary"
+              >
+                <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-red-400" />
+                <div className="min-w-0 flex-1">
+                  <div className="font-medium">
+                    Couldn&apos;t start a new investigation
+                  </div>
+                  <div className="text-theme-text-secondary">{startError}</div>
+                </div>
+                <button
+                  onClick={dismissError}
+                  className="shrink-0 rounded px-1.5 py-0.5 text-xs text-theme-text-tertiary hover:bg-theme-hover hover:text-theme-text-primary"
+                >
+                  Dismiss
+                </button>
               </div>
             )}
           </div>

package/src/components/diagnose/parts.test.tsx

@@ -123,3 +123,42 @@ describe("ConsentCard execution profile treatment", () => {
     expect(html).not.toContain("Radar still enables the agent CLI");
   });
 });
+
+// The consent card's error box is the ONLY place a refused approval is
+// explained: the card stays mounted on failure, focus doesn't move, and nothing
+// else on screen changes. Red (not the card's own amber) and role="alert", or a
+// screen-reader user re-presses a button the server will never accept.
+describe("ConsentCard error", () => {
+  const base = {
+    agentName: "Claude",
+    profile: "safeguarded" as ExecutionProfile,
+    onApprove: noop,
+    onCancel: noop,
+  };
+
+  it("renders the server's refusal as an alert", () => {
+    const html = renderToStaticMarkup(
+      <ConsentCard {...base} error="An owner has to allow it once." />,
+    );
+    expect(html).toContain('role="alert"');
+    expect(html).toContain("An owner has to allow it once.");
+  });
+
+  it("uses the error tone, not the card's warning tone", () => {
+    // full-local renders the card itself amber; an amber box on it reads as
+    // another paragraph of body copy rather than a failure.
+    const html = renderToStaticMarkup(
+      <ConsentCard
+        {...base}
+        profile={"full-local" as ExecutionProfile}
+        error="Refused."
+      />,
+    );
+    expect(html).toContain("border-red-500/30");
+  });
+
+  it("renders no alert when the approval hasn't failed", () => {
+    const html = renderToStaticMarkup(<ConsentCard {...base} />);
+    expect(html).not.toContain('role="alert"');
+  });
+});