@skyhook-io/radar-app 1.14.0 → 1.14.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/radar-app",
-  "version": "1.14.0",
+  "version": "1.14.2",
   "description": "Radar's full web UI as a reusable React component. Used by Radar's own binary and by external consumers like Radar Cloud.",
   "repository": {
     "type": "git",
@@ -41,7 +41,7 @@
     "yaml": "^2.9.0"
   },
   "peerDependencies": {
-    "@skyhook-io/k8s-ui": ">=1.14.2",
+    "@skyhook-io/k8s-ui": ">=1.14.7",
     "@tanstack/react-query": ">=5",
     "@xyflow/react": ">=12.0.0",
     "clsx": ">=2",

package/src/App.tsx

@@ -30,7 +30,7 @@ import { ApplicationsView } from './components/applications/ApplicationsView'
 import { HelmReleaseDrawer } from './components/helm/HelmReleaseDrawer'
 import { PortForwardProvider, PortForwardIndicator, PortForwardPanel } from './components/portforward/PortForwardManager'
 import { DockProvider, BottomDock, useDock, useDockReservedHeight, useOpenLocalTerminal } from './components/dock'
-import { DURATION_DOCK } from '@skyhook-io/k8s-ui/utils/animation'
+import { DURATION_DOCK, overlayExitMs } from '@skyhook-io/k8s-ui/utils/animation'
 import { ContextSwitcher } from './components/ContextSwitcher'
 import { NamespaceSwitcher, type NamespaceSwitcherHandle } from './components/NamespaceSwitcher'
 import { CloudFunnelButton } from './components/CloudFunnelButton'
@@ -680,9 +680,11 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
   // Animation hooks for smooth mount/unmount transitions
   const resourceDrawer = useAnimatedUnmount(!!routeSelectedResource, 300)
   const helmDrawer = useAnimatedUnmount(!!(mainView === 'helm' && selectedHelmRelease), 300)
-  const helpOverlay = useAnimatedUnmount(showHelp, 300)
-  const commandPaletteAnim = useAnimatedUnmount(showCommandPalette, 300)
-  const diagnosticsOverlay = useAnimatedUnmount(showDiagnostics, 300)
+  // Dialog-kind overlays wait their exit duration (shorter than the entrance);
+  // drawers keep the symmetric slide.
+  const helpOverlay = useAnimatedUnmount(showHelp, overlayExitMs('dialog'))
+  const commandPaletteAnim = useAnimatedUnmount(showCommandPalette, overlayExitMs('dialog'))
+  const diagnosticsOverlay = useAnimatedUnmount(showDiagnostics, overlayExitMs('dialog'))
 
   // Hold last valid values so drawers can animate out before data disappears
   const lastResourceRef = useRef(routeSelectedResource)

package/src/api/client.ts

@@ -1913,6 +1913,9 @@ export interface CloudInstallAttempted {
 
 export interface CloudInstallBlocked {
   reason: 'gitops' | 'preflight' | 'unsupported'
+  // The Kubernetes user the attempt acted as; absent when the API server
+  // would not say.
+  identity?: string
   // Preflight only: what would unblock it, and the Helm operation that was
   // dry-run — the plan card never renders when preflight blocks, so the
   // blocked card states what Radar tried itself.

package/src/api/diagnose.ts

@@ -72,7 +72,8 @@ export interface DiagnosisEvidenceSubject {
   group?: string;
   kind: string;
   namespace?: string;
-  name: string;
+  /** Absent when the subject is a listing cited for what it does not contain. */
+  name?: string;
   container?: string;
   stream?: "current" | "previous";
   /** Evidence kind (resource, logs, events, changes, metrics, …). */
@@ -85,6 +86,8 @@ export interface DiagnosisEvidenceItem {
   ref?: string;
   role?: DiagnosisEvidenceRole;
   claim?: string;
+  /** The agent's own statement of what this result does not cover. */
+  gap?: string;
   subject?: DiagnosisEvidenceSubject;
 }
 
@@ -94,10 +97,35 @@ export interface DiagnosisRuledOut {
   evidenceIndex: number;
 }
 
+export type DiagnosisCertainty = "established" | "likely" | "suspected";
+export type DiagnosisStepKind = "mitigate" | "verify" | "investigate";
+
+/** One typed next step; `remediation` mirrors `steps[].text` when steps are present. */
+export interface DiagnosisStep {
+  text: string;
+  kind: DiagnosisStepKind;
+  /** The condition under which this step is the right one, when the agent named one. */
+  precondition?: string;
+}
+
 export interface Diagnosis {
   healthy?: boolean;
   inconclusive?: boolean; // investigated but couldn't determine — distinct from healthy
   rootCause: string;
+  /**
+   * The plain-language headline; `rootCause` stays the technical one-liner.
+   * Present only on turns from a backend that emits the story contract; its
+   * absence selects the previous rendering.
+   */
+  summary?: string;
+  /** The agent's own word for how sure it is; rendered in the agent tone, never as a Radar mark. */
+  certainty?: DiagnosisCertainty;
+  /** What would change the answer or could not be verified. Rendered above the story fold. */
+  unresolved?: string[];
+  /** A follow-up answer that replaces the assessment on screen (server-validated as a complete verdict). */
+  revisesAssessment?: boolean;
+  /** Typed next steps; absent on older runs, where `remediation` is the only list. */
+  steps?: DiagnosisStep[];
   rootCauseEvidence?: RootCauseEvidence;
   /** The agent's case over Radar's evidence; absent from hosted backends and older runs. */
   evidence?: DiagnosisEvidenceItem[];
@@ -107,6 +135,8 @@ export interface Diagnosis {
   evidenceMalformed?: boolean;
   ruledOut?: DiagnosisRuledOut[];
   report: string;
+  /** The agent's evidence ledger, written before its verdict block; shown in Activity, never in Findings. */
+  notes?: string;
   remediation: string[];
   recommendedIndex?: number; // 1-based index into remediation of the step Apply performs
   recommendedReason?: string; // why the recommended step is the safe pick

package/src/components/CloudConnectFlow.tsx

@@ -1,7 +1,8 @@
-import { type ReactNode, useRef, useState } from 'react'
+import { type ReactNode, useEffect, useRef, useState } from 'react'
 import { useMutation } from '@tanstack/react-query'
-import { AlertTriangle, ArrowUpRight, Check, ExternalLink, GitBranch, Info, Loader2, ShieldAlert, X } from 'lucide-react'
-import type { BlockedExit } from './cloudConnectHandoff'
+import { AlertTriangle, ArrowUpRight, Check, Copy, ExternalLink, GitBranch, Info, Loader2, ShieldAlert, X } from 'lucide-react'
+import { type AdminNoteContext, type BlockedExit, composeAdminNote, composeFailureNote, needsAdminHandoff } from './cloudConnectHandoff'
+import { copyText } from '@skyhook-io/k8s-ui/utils/clipboard'
 import { Collapse, CollapseChevron } from '@skyhook-io/k8s-ui/components/ui/Collapse'
 import {
   ApiError,
@@ -21,19 +22,22 @@ export function CloudConnectFlow({
   status,
   blocked,
   exit,
+  where,
   onStatus,
   onExit,
 }: {
   status: CloudInstallStatus
   blocked: CloudInstallBlocked | null
   exit: BlockedExit
+  // Which cluster this is, for the note a blocked person hands to an admin.
+  where?: AdminNoteContext
   // Push a mutation's status response into the shared query state.
   onStatus: (st: CloudInstallStatus) => void
   // Leave the flow view (back to the pitch, or close after dismiss).
   onExit: () => void
 }) {
   if (blocked) {
-    return <BlockedView blocked={blocked} exit={exit} onExit={onExit} />
+    return <BlockedView blocked={blocked} exit={exit} where={where} onExit={onExit} />
   }
 
   switch (status.state) {
@@ -59,7 +63,7 @@ export function CloudConnectFlow({
     case 'connected':
       return <ConnectedCard status={status} onStatus={onStatus} onExit={onExit} />
     case 'failed':
-      return <FailedCard status={status} onStatus={onStatus} onExit={onExit} />
+      return <FailedCard status={status} where={where} onStatus={onStatus} onExit={onExit} />
     default:
       return null
   }
@@ -68,13 +72,20 @@ export function CloudConnectFlow({
 function BlockedView({
   blocked,
   exit,
+  where,
   onExit,
 }: {
   blocked: CloudInstallBlocked
   exit: BlockedExit
+  where?: AdminNoteContext
   onExit: () => void
 }) {
   const copy = blockedCopy(blocked, exit)
+  // The person who can act is usually not the one reading this card. What
+  // they need is an ask with the link and the evidence — not the card's
+  // second-person explanation — so the note is composed on its own; the
+  // CopyForAdmin action previews exactly what will be copied.
+  const note = composeAdminNote(blocked, exit, where)
   const icon =
     blocked.reason === 'gitops' ? (
       <GitBranch className="w-4 h-4 shrink-0 mt-0.5 text-emerald-600 dark:text-emerald-400" />
@@ -97,7 +108,7 @@ function BlockedView({
           <BlockedSection label="What to do">{copy.next}</BlockedSection>
         </div>
       </div>
-      <div className="mt-4 flex items-center gap-4">
+      <div className="relative mt-4 flex items-center gap-4">
         <a
           href={exit.href}
           target="_blank"
@@ -106,6 +117,7 @@ function BlockedView({
         >
           {exit.label}
         </a>
+        <CopyForAdmin note={note} />
         <button
           onClick={onExit}
           className="ml-auto text-[12.5px] text-theme-text-tertiary hover:text-theme-text-primary transition-colors"
@@ -117,6 +129,132 @@ function BlockedView({
   )
 }
 
+// The person who can act is usually not the one reading a stop card. This
+// hands them the composed note: a preview panel on hover or focus (card-wide,
+// on the elevated surface, sized to the note — a block of text laid over the
+// card, not a hint), and when the clipboard is refused the panel pins open
+// with the note selected so copying is one keystroke.
+function CopyForAdmin({ note }: { note: string }) {
+  const [copied, setCopied] = useState<'idle' | 'done' | 'failed'>('idle')
+  const [previewing, setPreviewing] = useState(false)
+  const [pinned, setPinned] = useState(false)
+  const noteRef = useRef<HTMLPreElement | null>(null)
+  const panelRef = useRef<HTMLDivElement | null>(null)
+  // The panel is anchored above the action row inside the dialog's scroll
+  // area. A hover panel taller than the room visible above the row is only
+  // partly on screen, and scrolling to see the rest moves it out from under
+  // the pointer and closes it. So the ceiling is measured — the row's
+  // distance from the visible top of the scroller — rather than guessed. A
+  // normal note fits and shows whole; only a longer one scrolls inside.
+  const [maxHeight, setMaxHeight] = useState<number>()
+  const shown = previewing || pinned
+  useEffect(() => {
+    if (!shown) return
+    const wrapper = panelRef.current
+    // The positioned ancestor the panel is anchored to — the action row.
+    const row = wrapper?.offsetParent as HTMLElement | null | undefined
+    const scroller = row?.closest<HTMLElement>('.overflow-y-auto')
+    if (!wrapper || !row || !scroller) return
+    const visibleRoom = row.getBoundingClientRect().top - scroller.getBoundingClientRect().top
+    const gap = wrapper.getBoundingClientRect().bottom - (wrapper.firstElementChild?.getBoundingClientRect().bottom ?? 0)
+    setMaxHeight(Math.max(96, Math.floor(visibleRoom - gap - 8)))
+  }, [shown])
+  // Leaving closes on a short delay that entering the panel cancels, so the
+  // pointer can cross the row's own space on its way up into the panel.
+  const closeTimer = useRef<number | undefined>(undefined)
+  const enter = () => {
+    window.clearTimeout(closeTimer.current)
+    setPreviewing(true)
+  }
+  const leave = () => {
+    window.clearTimeout(closeTimer.current)
+    closeTimer.current = window.setTimeout(() => setPreviewing(false), 200)
+  }
+  useEffect(() => () => window.clearTimeout(closeTimer.current), [])
+  const copy = () => {
+    // copyText also serves Radar on a plain-HTTP non-loopback address, where
+    // the async Clipboard API is missing and the legacy command still works.
+    void copyText(note).then((ok) => {
+      setCopied(ok ? 'done' : 'failed')
+      if (ok) setTimeout(() => setCopied('idle'), 2000)
+      else setPinned(true)
+    })
+  }
+  // The panel may not be mounted when the clipboard refuses (the pointer has
+  // left the button), so the selection waits for the pinned render.
+  useEffect(() => {
+    if (!pinned) return
+    const pre = noteRef.current
+    const selection = window.getSelection()
+    if (!pre || !selection) return
+    selection.removeAllRanges()
+    const range = document.createRange()
+    range.selectNodeContents(pre)
+    selection.addRange(range)
+  }, [pinned])
+  return (
+    // Hover is tracked on this wrapper, which contains the panel, and the
+    // gap between button and panel is padding rather than margin, so moving
+    // the pointer up into the panel (to scroll a long note) never counts as
+    // leaving.
+    <span className="contents" onMouseEnter={enter} onMouseLeave={leave}>
+      {shown && (
+        <div ref={panelRef} className="absolute inset-x-0 bottom-full z-20 pb-3">
+        <div
+          id="admin-note-preview"
+          role="tooltip"
+          style={maxHeight ? { maxHeight } : undefined}
+          className="flex flex-col rounded-xl border border-theme-border bg-theme-elevated p-4 shadow-theme-lg"
+        >
+          <div className="mb-1.5 flex items-center justify-between text-[10.5px] font-semibold uppercase tracking-wide text-theme-text-tertiary">
+            <span>{pinned ? 'Select and copy' : 'What gets copied'}</span>
+            {pinned && (
+              <button
+                type="button"
+                onClick={() => {
+                  setPinned(false)
+                  setCopied('idle')
+                }}
+                aria-label="Close"
+                className="rounded p-0.5 text-theme-text-tertiary hover:text-theme-text-primary transition-colors"
+              >
+                <X className="w-3 h-3" />
+              </button>
+            )}
+          </div>
+          <pre
+            ref={noteRef}
+            className="min-h-0 select-text overflow-y-auto whitespace-pre-wrap break-words font-mono text-[11px] leading-relaxed text-theme-text-primary"
+          >
+            {note}
+          </pre>
+        </div>
+        </div>
+      )}
+      <button
+        type="button"
+        onClick={copy}
+        onFocus={() => setPreviewing(true)}
+        onBlur={() => setPreviewing(false)}
+        aria-describedby={shown ? 'admin-note-preview' : undefined}
+        className="inline-flex items-center gap-1.5 text-[12.5px] text-theme-text-secondary hover:text-theme-text-primary transition-colors"
+      >
+        {copied === 'done' ? (
+          <>
+            <Check className="w-3.5 h-3.5 text-emerald-600 dark:text-emerald-400" /> Copied
+          </>
+        ) : copied === 'failed' ? (
+          'Couldn’t copy — the note is selected above, press ⌘C / Ctrl+C'
+        ) : (
+          <>
+            <Copy className="w-3.5 h-3.5" /> Copy for a cluster admin
+          </>
+        )}
+      </button>
+    </span>
+  )
+}
+
 function BlockedSection({ label, children }: { label: string; children: ReactNode }) {
   return (
     <div>
@@ -186,12 +324,12 @@ function blockedCopy(blocked: CloudInstallBlocked, exit: BlockedExit): { title:
       </>
     )
 
-  // Where the exit is an install command, Radar Cloud asks for a cluster name
+  // Where the exit is an install command, Radar Cloud confirms the cluster name (prefilled from the context)
   // first, then shows the instructions — say so, rather than promising a
   // command on the next screen.
   const installNext = (
     <>
-      Have an admin with cluster access get the install command from Radar Cloud: it asks for a cluster name, then
+      Have an admin with cluster access get the install command from Radar Cloud: it confirms the cluster name, then
       shows the Helm, Argo CD or Flux instructions to review before running.
     </>
   )
@@ -223,7 +361,7 @@ function blockedCopy(blocked: CloudInstallBlocked, exit: BlockedExit): { title:
       why: blocked.message,
       next: exit.install ? (
         <>
-          Have an admin with repo access get the values patch from Radar Cloud: it asks for a cluster name, then shows
+          Have an admin with repo access get the values patch from Radar Cloud: it confirms the cluster name, then shows
           the patch for your controller and the one command that creates the token Secret.
         </>
       ) : (
@@ -237,8 +375,9 @@ function blockedCopy(blocked: CloudInstallBlocked, exit: BlockedExit): { title:
   // Fresh offered on "nothing running" alone: say what was not confirmed.
   const unconfirmedNext = (
     <>
-      Radar found no Radar running in this cluster but couldn’t read Helm’s release records, so an admin with cluster
-      access should confirm nothing is installed before running a fresh install. {installNext}
+      An admin with cluster access should confirm nothing is installed — Radar couldn’t read Helm’s release records —
+      then get the install command from Radar Cloud: it confirms the cluster name, then shows the Helm, Argo CD or Flux
+      instructions to review before running.
     </>
   )
   const next = exit.install ? (a?.releaseUnread ? unconfirmedNext : installNext) : unknownNext
@@ -262,7 +401,15 @@ function blockedCopy(blocked: CloudInstallBlocked, exit: BlockedExit): { title:
         title: 'The cluster blocked part of this install',
         tried,
         why: 'The cluster refused: something already there conflicts with the install, or a policy rejects it. More permission wouldn’t change that.',
-        next: exit.install ? <>After the refusals above are resolved: {installNext}</> : next,
+        next: exit.install ? (
+          <>
+            Once the refusals above are resolved, have an admin with cluster access get the install command from Radar
+            Cloud: it confirms the cluster name, then shows the Helm, Argo CD or Flux instructions to review before
+            running.
+          </>
+        ) : (
+          next
+        ),
       }
   }
 }
@@ -644,16 +791,22 @@ function ConnectedCard({
 
 function FailedCard({
   status,
+  where,
   onStatus,
   onExit,
 }: {
   status: CloudInstallStatus
+  where?: AdminNoteContext
   onStatus: (st: CloudInstallStatus) => void
   onExit: () => void
 }) {
   const dismiss = useDismiss(status, onStatus, onExit)
   const failure = status.failure
   if (!failure) return null
+  // After the Hub approved, the guidance is written for an operator — inspect
+  // commands, keep this Hub cluster, don't rerun. Hand it over the same way a
+  // blocked card does, as a request to finish the connection.
+  const handoff = needsAdminHandoff(failure)
   return (
     <div className="px-8 pt-6 pb-5">
       <div className="flex items-start gap-2.5 mb-3">
@@ -666,13 +819,20 @@ function FailedCard({
           showSummary={failure.guidance.summary !== failure.message}
         />
       )}
-      <div className="mt-4 flex items-center gap-4">
+      <div className="relative mt-4 flex items-center gap-4">
         <button
           onClick={dismiss}
           className="px-4 py-1.5 rounded-[10px] bg-theme-elevated hover:bg-theme-hover border border-theme-border text-[12.5px] font-semibold text-theme-text-primary transition-colors"
         >
           {failure.retrySafe ? 'Start over' : 'Close'}
         </button>
+        {handoff && (
+          <CopyForAdmin
+            // The flow's own record of the cluster: a context switch after
+            // the install started must not relabel the note for another.
+            note={composeFailureNote(failure, { context: status.plan?.contextName ?? where?.context, cluster: where?.cluster })}
+          />
+        )}
       </div>
     </div>
   )

package/src/components/CloudFunnelButton.tsx

@@ -234,7 +234,8 @@ export function CloudFunnelButton() {
   // relabel the CTA (and the link) for cluster B, and a blocked view left
   // armed would reopen on B with A's refusal, feeding it back into the
   // outcome on Back.
-  const contextName = useClusterInfo().data?.context
+  const clusterInfo = useClusterInfo()
+  const contextName = clusterInfo.data?.context
   useEffect(() => {
     setHandoff(null)
     setBlocked(null)
@@ -306,7 +307,8 @@ export function CloudFunnelButton() {
             <CloudConnectFlow
               status={flowForView}
               blocked={blocked}
-              exit={exitFor(appUrl, 'driver-blocked-card-browser-link', outcomeOf(flowForView))}
+              exit={exitFor(appUrl, 'driver-blocked-card-browser-link', outcomeOf(flowForView), clusterInfo.data?.context)}
+              where={{ context: clusterInfo.data?.context, cluster: clusterInfo.data?.cluster }}
               onStatus={applyStatus}
               onExit={() => exitFlow(outcomeOf(flowForView))}
             />

package/src/components/ConnectionErrorView.tsx

@@ -1,4 +1,4 @@
-import { ServerOff, RefreshCw, Loader2, Copy, Check, TerminalSquare, ChevronRight } from 'lucide-react'
+import { ServerOff, RefreshCw, Loader2, Copy, Check, TerminalSquare } from 'lucide-react'
 import { useEffect, useState } from 'react'
 import type { ConnectionState } from '../context/ConnectionContext'
 import { ContextSwitcher } from './ContextSwitcher'
@@ -6,6 +6,7 @@ import { parseContextName } from '../utils/context-name'
 import { useOpenLocalTerminal, ClusterName } from '@skyhook-io/k8s-ui'
 import { useAuthMe, useContexts } from '../api/client'
 import { Tooltip } from './ui/Tooltip'
+import { Collapse, CollapseChevron } from '@skyhook-io/k8s-ui/components/ui/Collapse'
 import { allShellSafe, awsProfileFlag } from '../utils/shell-safe'
 import { apiUrl } from '../api/config'
 import { useCapabilitiesContext } from '../contexts/CapabilitiesContext'
@@ -459,18 +460,16 @@ export function ConnectionErrorView({ connection, onRetry, isRetrying }: Connect
                   onClick={() => setShowRawError((open) => !open)}
                   className="flex items-center gap-1 text-xs font-medium text-theme-text-tertiary hover:text-theme-text-secondary transition-colors"
                 >
-                  <ChevronRight className={`h-3.5 w-3.5 transition-transform duration-200 ${showRawError ? 'rotate-90' : ''}`} />
+                  <CollapseChevron open={showRawError} className="h-3.5 w-3.5" />
                   Raw error
                 </button>
-                <div className={`issue-details-motion ${showRawError ? 'issue-details-motion-open' : ''}`}>
-                  <div className="overflow-hidden">
-                    <div id="connection-raw-error" className="mt-2 bg-theme-elevated border border-theme-border rounded-md p-3 overflow-auto max-h-32">
-                      <code className="text-xs text-theme-text-tertiary font-mono whitespace-pre-wrap break-words">
-                        {connection.error}
-                      </code>
-                    </div>
+                <Collapse open={showRawError} id="connection-raw-error">
+                  <div className="mt-2 bg-theme-elevated border border-theme-border rounded-md p-3 overflow-auto max-h-32">
+                    <code className="text-xs text-theme-text-tertiary font-mono whitespace-pre-wrap break-words">
+                      {connection.error}
+                    </code>
                   </div>
-                </div>
+                </Collapse>
               </div>
             )}
           </div>

package/src/components/DebugOverlay.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react'
-import { Bug, X, ChevronDown, ChevronUp } from 'lucide-react'
+import { Bug, X } from 'lucide-react'
+import { Collapse, CollapseChevron, useDisclosure } from '@skyhook-io/k8s-ui/components/ui/Collapse'
 import { useRuntimeStats } from '../api/client'
 import { Tooltip } from './ui/Tooltip'
 
@@ -14,6 +15,7 @@ function formatUptime(seconds: number): string {
 export function DebugOverlay() {
   const [visible, setVisible] = useState(true)
   const [expanded, setExpanded] = useState(false)
+  const disclosure = useDisclosure(expanded)
   const { data } = useRuntimeStats(visible)
 
   if (!visible) {
@@ -40,9 +42,11 @@ export function DebugOverlay() {
         <div className="flex-1" />
         <button
           onClick={() => setExpanded(!expanded)}
+          {...disclosure.buttonProps}
+          aria-label={expanded ? 'Collapse debug stats' : 'Expand debug stats'}
           className="p-0.5 text-theme-text-tertiary hover:text-theme-text-secondary"
         >
-          {expanded ? <ChevronDown className="w-3 h-3" /> : <ChevronUp className="w-3 h-3" />}
+          <CollapseChevron open={expanded} className="w-3 h-3" />
         </button>
         <button
           onClick={() => setVisible(false)}
@@ -60,8 +64,8 @@ export function DebugOverlay() {
               <span className="text-theme-text-tertiary">Heap</span>
               <span className="text-theme-text-primary">{runtime.heapMB.toFixed(1)} MB</span>
             </div>
-            {expanded && (
-              <>
+            <Collapse open={expanded} id={disclosure.panelId}>
+              <div className="space-y-0.5">
                 <div className="flex justify-between gap-4">
                   <span className="text-theme-text-tertiary">Objects</span>
                   <span className="text-theme-text-primary">{runtime.heapObjectsK.toFixed(1)}K</span>
@@ -84,8 +88,8 @@ export function DebugOverlay() {
                   <span className="text-theme-text-tertiary">Resources</span>
                   <span className="text-theme-text-primary">{data?.resourceCount ?? '-'}</span>
                 </div>
-              </>
-            )}
+              </div>
+            </Collapse>
           </>
         ) : (
           <span className="text-theme-text-tertiary">Loading…</span>