@skyhook-io/radar-app 1.14.2 → 1.14.4

package/src/components/diagnose/target.ts

@@ -1,6 +1,9 @@
 import { resourceKey } from "@skyhook-io/k8s-ui";
 
-import { kindToPluralWithGroup, knownKindForPluralWithGroup } from "../../utils/navigation";
+import {
+  kindToPluralWithGroup,
+  knownKindForPluralWithGroup,
+} from "../../utils/navigation";
 
 export interface InvestigationTargetIdentity {
   kind: string;
@@ -31,7 +34,10 @@ export function runTargetKey(
 export function formatInvestigationTarget(
   target: InvestigationTargetIdentity,
 ): string {
-  const canonicalKind = knownKindForPluralWithGroup(target.kind, target.group) ?? target.kind;
-  const kind = target.group ? `${canonicalKind}.${target.group}` : canonicalKind;
+  const canonicalKind =
+    knownKindForPluralWithGroup(target.kind, target.group) ?? target.kind;
+  const kind = target.group
+    ? `${canonicalKind}.${target.group}`
+    : canonicalKind;
   return `${kind} ${target.namespace ? `${target.namespace}/` : ""}${target.name}`;
 }

package/src/components/diagnose/toolCallLabel.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from "vitest";
-import { describeToolCall } from "./toolCallLabel";
+import { describeToolCall, investigationRunningLabel } from "./toolCallLabel";
 
 describe("describeToolCall", () => {
   it("never invents a singular from a kind", () => {
@@ -49,3 +49,49 @@ describe("describeToolCall", () => {
     expect(describeToolCall("some_new_tool", undefined)).toBe("Some New Tool");
   });
 });
+
+describe("investigationRunningLabel", () => {
+  const read = {
+    tool: "get_resource",
+    status: "done",
+    summary: JSON.stringify({
+      kind: "deployment",
+      namespace: "shop",
+      name: "api",
+    }),
+  };
+  it("names the call in flight, keeps a finished one briefly, then thinks", () => {
+    expect(
+      investigationRunningLabel({
+        lastTool: { ...read, status: "running" },
+        reads: 1,
+        quietFor: 20000,
+        elapsedSeconds: 9,
+      }),
+    ).toEqual({
+      current: "Reading Deployment shop/api…",
+      meta: "1 read · 9 s",
+    });
+    expect(
+      investigationRunningLabel({
+        lastTool: read,
+        reads: 3,
+        quietFor: 7999,
+        elapsedSeconds: 30,
+      }).current,
+    ).toBe("Reading Deployment shop/api…");
+    expect(
+      investigationRunningLabel({
+        lastTool: read,
+        reads: 3,
+        quietFor: 8000,
+        elapsedSeconds: 30,
+      }),
+    ).toEqual({ current: "Thinking…", meta: "3 reads · 30 s" });
+  });
+  it("says Investigating with nothing read yet and omits a timer under two seconds", () => {
+    expect(
+      investigationRunningLabel({ reads: 0, quietFor: 0, elapsedSeconds: 1 }),
+    ).toEqual({ current: "Investigating…", meta: "" });
+  });
+});

package/src/components/diagnose/toolCallLabel.ts

@@ -1,5 +1,3 @@
-import { prettyTool } from "./parts";
-
 // One readable sentence for a tool call in flight, from the call's arguments:
 // "Reading logs for pod shop/api-7d4 / api" tells the reader what the agent
 // is looking at; "Get Pod Logs" tells them which tool ran.
@@ -133,3 +131,44 @@ function pluralLabel(kind: string): string {
   const base = kindLabel(kind) ?? kind;
   return base.endsWith("s") ? base : `${base}s`;
 }
+
+export function prettyTool(tool: string): string {
+  return tool.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+}
+
+const THINKING_AFTER_MS = 8000;
+
+/**
+ * The Assessment card's running row: the call in flight or just finished on
+ * the left, the read count and the timer on the right. A finished call keeps
+ * its name for a few quiet seconds, then the label admits the agent is
+ * thinking rather than showing a stale read.
+ */
+export function investigationRunningLabel({
+  lastTool,
+  reads,
+  quietFor,
+  elapsedSeconds,
+}: {
+  lastTool?: { tool?: string; status?: string; summary?: string };
+  reads: number;
+  quietFor: number;
+  elapsedSeconds: number;
+}): { current: string; meta: string } {
+  let current = "Investigating";
+  if (lastTool?.tool) {
+    current =
+      lastTool.status === "running" || quietFor < THINKING_AFTER_MS
+        ? describeToolCall(lastTool.tool, lastTool.summary)
+        : "Thinking";
+  }
+  return {
+    current: `${current}…`,
+    meta: [
+      reads > 0 ? `${reads} ${reads === 1 ? "read" : "reads"}` : undefined,
+      elapsedSeconds >= 2 ? `${elapsedSeconds} s` : undefined,
+    ]
+      .filter(Boolean)
+      .join(" · "),
+  };
+}

package/src/components/helm/HelmReleaseDrawer.tsx

@@ -26,7 +26,7 @@ import { ValuesViewer } from './ValuesViewer'
 import { OwnedResources } from './OwnedResources'
 import { TrackChartSourceDialog } from './TrackChartSourceDialog'
 import { Collapse, CollapseChevron } from '@skyhook-io/k8s-ui/components/ui/Collapse'
-import { Disclosure } from '../ui/Disclosure'
+import { Disclosure } from '@skyhook-io/k8s-ui/components/ui/Disclosure'
 
 interface HelmReleaseDrawerProps {
   release: SelectedHelmRelease

package/src/components/home/MCPSetupDialog.tsx

@@ -3,7 +3,7 @@ import { X, Copy, Check, Radio, Terminal, MessageSquare, Code2, Pin } from 'luci
 import { apiUrl, getAuthHeaders, getCredentialsMode } from '../../api/config'
 import { MCP_TOOL_CATALOG } from './mcpToolCatalog'
 import { Tooltip } from '../ui/Tooltip'
-import { Disclosure } from '../ui/Disclosure'
+import { Disclosure } from '@skyhook-io/k8s-ui/components/ui/Disclosure'
 
 interface MCPSetupDialogProps {
   open: boolean

package/src/components/home/mcpToolCatalog.ts

@@ -256,6 +256,33 @@ export const MCP_TOOL_CATALOG: MCPToolInfo[] = [
       { arg: 'limit', desc: 'max rules returned (default 50, max 200)' },
     ],
   },
+  {
+    name: 'get_cost',
+    desc: 'Cluster spend from OpenCost or Kubecost — cluster and per-namespace totals, per-workload and per-node breakdowns, and spend over time. Hourly rates plus the same monthly projection the Costs page shows.',
+    params: [
+      { arg: 'view', desc: 'summary (default), workloads, nodes (cluster-wide), or trend' },
+      { arg: 'namespace', desc: 'required for view=workloads; filters summary and trend' },
+      { arg: 'kind', desc: 'view=workloads: target one workload instead of the top spenders; needs name' },
+      { arg: 'name', desc: 'workloads: exact workload name (needs kind); nodes: exact node name' },
+      { arg: 'range', desc: 'trend only: 6h, 24h (default), or 7d' },
+      { arg: 'include_points', desc: 'trend only: include raw points (default false); summaries are always returned' },
+      { arg: 'limit', desc: 'max rows (default 20, max 100)' },
+    ],
+  },
+  {
+    name: 'get_rightsizing',
+    desc: 'CPU/memory request recommendations, with current limits as context, from 7 days of observed usage, with a fit verdict and confidence tier per container. Scans can take 45 seconds; inspect confidence and missing evidence. Request reductions do not directly imply bill savings.',
+    params: [
+      { arg: 'scope', required: true, desc: 'workload (needs kind/name/namespace), namespace, or cluster' },
+      { arg: 'kind', desc: 'scope=workload: Deployment, StatefulSet, or DaemonSet' },
+      { arg: 'name', desc: 'scope=workload: the workload name' },
+      { arg: 'namespace', desc: 'required for scope=workload; for scope=namespace unless namespaces is set' },
+      { arg: 'namespaces', desc: 'scope=namespace: scan several namespaces in one call' },
+      { arg: 'include_all', desc: 'include balanced and unevidenced rows (default false); workload scope always returns all rows' },
+      { arg: 'classification', desc: 'scan only: reduction, increase, review, need_data, or in_range; returns all rows of matching workloads' },
+      { arg: 'limit', desc: 'max workloads returned by a namespace or cluster scan (default 20, max 100)' },
+    ],
+  },
   {
     name: 'get_workload_logs',
     desc: 'Aggregated logs across all pods of a workload. Without grep, filters for diagnostic relevance; grep returns only matching timestamp-prefixed lines instead.',

package/src/components/resource/PrometheusChartsGrid.tsx

@@ -1,7 +1,7 @@
 import { useMemo } from "react";
 import { useSearchParams } from "react-router-dom";
 import { Loader2, Wifi, WifiOff } from "lucide-react";
-import { Disclosure } from "../ui/Disclosure";
+import { Disclosure } from "@skyhook-io/k8s-ui/components/ui/Disclosure";
 import {
   AreaChart,
   SeriesLegend,

package/src/components/resource/WorkloadMetricsHelpDialog.tsx

@@ -1,7 +1,7 @@
 import { useLayoutEffect, useId, useRef } from 'react'
 import { createPortal } from 'react-dom'
 import { ExternalLink, X } from 'lucide-react'
-import { Disclosure } from '../ui/Disclosure'
+import { Disclosure } from '@skyhook-io/k8s-ui/components/ui/Disclosure'
 import type { WorkloadMetrics } from '../../api/workloadMetrics'
 import type { PrometheusTimeRange } from '../../api/client'
 

package/src/components/resource/WorkloadMetricsSection.tsx

@@ -18,7 +18,7 @@ import {
 } from "../../api/workloadMetrics";
 import { latestWorkloadValue, workloadPodValues } from "./workloadMetricValues";
 import { WorkloadMetricsHelpDialog } from './WorkloadMetricsHelpDialog';
-import { Disclosure } from '../ui/Disclosure';
+import { Disclosure } from '@skyhook-io/k8s-ui/components/ui/Disclosure';
 
 interface Props {
   kind: string;

package/src/components/resources/PodFilePreview.tsx

@@ -3,7 +3,7 @@ import Editor from '@monaco-editor/react'
 import { AlertTriangle, Download, FileText, RotateCw } from 'lucide-react'
 import { PaneLoader, ensureMonacoRuntime } from '@skyhook-io/k8s-ui'
 import { formatBytes } from '../../utils/format'
-import { Disclosure } from '../ui/Disclosure'
+import { Disclosure } from '@skyhook-io/k8s-ui/components/ui/Disclosure'
 import { apiUrl, getAuthHeaders, getCredentialsMode } from '../../api/config'
 
 // A curated inline viewer for text files inside a pod container, rendered in

package/src/components/rightsizing/RightsizingScanView.tsx

@@ -8,6 +8,7 @@ import {
   PageHeader,
   SearchBox,
   SelectMenu,
+  pluralize,
 } from '@skyhook-io/k8s-ui'
 import { Badge } from '@skyhook-io/k8s-ui/components/ui/Badge'
 import {
@@ -335,7 +336,13 @@ export function RightsizingScanView({ namespaces }: RightsizingScanViewProps) {
               onSelect={(value) => setFilter('rfClass', value === 'actions' ? undefined : value)}
             />
             <ScanNotices result={result} rows={rows} />
-            {result.coverage.workloadsDiscovered === 0 || rows.length === 0 ? (
+            {result.reason === 'only_daemonsets_without_nodes' ? (
+              <EmptyState
+                variant="card"
+                headline="Only DaemonSets with no nodes in this scope"
+                body="Every workload here is a DaemonSet that runs on no node right now, so none was scanned. Open one from Resources to see recommendations from its retained history."
+              />
+            ) : result.coverage.workloadsDiscovered === 0 || rows.length === 0 ? (
               <EmptyState
                 variant="card"
                 headline="No supported workloads in this scope"
@@ -537,6 +544,18 @@ function ScanNotices({ result, rows }: { result: ScanResult; rows: RightsizingSc
     notices.push('Some workload kinds or namespaces were excluded by your Kubernetes access.')
   if ((result.coverage.unavailableKinds?.length ?? 0) > 0)
     notices.push('Some workload kinds could not be evaluated with the available ownership data.')
+  // Distinct from the partial notice above: these workloads were analyzed
+  // completely, the cache simply never held the other namespaces.
+  if ((result.coverage.partiallyCachedKinds?.length ?? 0) > 0)
+    notices.push(
+      'Radar is caching only some namespaces, so this scan covered a narrower scope than the whole cluster.',
+    )
+  const daemonSetsWithoutNodes = result.coverage.daemonSetsWithoutNodes ?? 0
+  // The DaemonSet-only empty state already says this.
+  if (daemonSetsWithoutNodes > 0 && result.reason !== 'only_daemonsets_without_nodes')
+    notices.push(
+      `${pluralize(daemonSetsWithoutNodes, 'DaemonSet')} run on no node right now and ${daemonSetsWithoutNodes === 1 ? 'is' : 'are'} not listed. Open one from Resources to see recommendations from its retained history.`,
+    )
   for (const warning of result.warnings ?? []) notices.push(warningMessage(warning.code))
   if (rows.length > 0 && rows.every((row) => row.classification === 'need_data'))
     notices.push('There is not enough recent history to recommend request changes yet.')

package/src/components/ui/CommandPalette.tsx

@@ -23,13 +23,17 @@ export function CommandPalette({ onClose, isOpen = true, ...callbacks }: Command
   // with the standalone omnibar via useCommandItems so the two never drift.
   const items = useCommandItems(callbacks)
 
-  // Focus input on mount
+  // Focus the input once logically open. Not on mount: the presence hook
+  // mounts the palette two frames before `isOpen` flips, and the root is
+  // `inert` until then, so a mount-time focus would be refused.
   useEffect(() => {
-    inputRef.current?.focus()
-  }, [])
+    if (isOpen) inputRef.current?.focus()
+  }, [isOpen])
 
-  // Close on Escape (capture phase to beat the shortcut system)
+  // Close on Escape (capture phase to beat the shortcut system) — only while
+  // logically open: the palette stays mounted through its exit.
   useEffect(() => {
+    if (!isOpen) return
     const handler = (e: KeyboardEvent) => {
       if (e.key === 'Escape') {
         e.preventDefault()
@@ -39,7 +43,7 @@ export function CommandPalette({ onClose, isOpen = true, ...callbacks }: Command
     }
     document.addEventListener('keydown', handler, true)
     return () => document.removeEventListener('keydown', handler, true)
-  }, [onClose])
+  }, [isOpen, onClose])
 
   // Filter and rank results
   const filteredItems = useMemo(() => {
@@ -122,16 +126,16 @@ export function CommandPalette({ onClose, isOpen = true, ...callbacks }: Command
   let flatIndex = 0
 
   return (
-    <div className="fixed inset-0 z-[100] flex items-start justify-center pt-[15vh]">
+    <div className="fixed inset-0 z-[100] flex items-start justify-center pt-[15vh]" inert={!isOpen || undefined}>
       {/* Backdrop */}
       <div
         className={clsx(
           'absolute inset-0 bg-theme-base/60 backdrop-blur-sm',
           TRANSITION_BACKDROP,
-          isOpen ? 'opacity-100' : 'opacity-0'
+          isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'
         )}
         style={overlayTransitionStyle(isOpen, 'dialog')}
-        onClick={onClose}
+        onClick={isOpen ? onClose : undefined}
       />
 
       {/* Panel */}

package/src/components/ui/DiagnosticsOverlay.tsx

@@ -17,8 +17,10 @@ export function DiagnosticsOverlay({ onClose, isOpen = true }: DiagnosticsOverla
   const [copied, setCopied] = useState<'json' | 'formatted' | null>(null)
   const [reportOpened, setReportOpened] = useState(false)
 
-  // Close on Escape (capture phase)
+  // Close on Escape (capture phase) — only while logically open: the overlay
+  // stays mounted through its exit.
   useEffect(() => {
+    if (!isOpen) return
     const handler = (e: KeyboardEvent) => {
       if (e.key === 'Escape') {
         e.preventDefault()
@@ -28,7 +30,7 @@ export function DiagnosticsOverlay({ onClose, isOpen = true }: DiagnosticsOverla
     }
     document.addEventListener('keydown', handler, true)
     return () => document.removeEventListener('keydown', handler, true)
-  }, [onClose])
+  }, [isOpen, onClose])
 
   const copyToClipboard = useCallback(async (type: 'json' | 'formatted') => {
     if (!data) return
@@ -64,16 +66,16 @@ export function DiagnosticsOverlay({ onClose, isOpen = true }: DiagnosticsOverla
   }, [data])
 
   return (
-    <div className="fixed inset-0 z-[100] flex items-start justify-center pt-[8vh]">
+    <div className="fixed inset-0 z-[100] flex items-start justify-center pt-[8vh]" inert={!isOpen || undefined}>
       {/* Backdrop */}
       <div
         className={clsx(
           'absolute inset-0 bg-theme-base/60 backdrop-blur-sm',
           TRANSITION_BACKDROP,
-          isOpen ? 'opacity-100' : 'opacity-0'
+          isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'
         )}
         style={overlayTransitionStyle(isOpen, 'dialog')}
-        onClick={onClose}
+        onClick={isOpen ? onClose : undefined}
       />
 
       {/* Panel */}

package/src/components/ui/Omnibar.tsx

@@ -1,7 +1,9 @@
-import { useState, useMemo, useRef, useEffect, useCallback, forwardRef, useImperativeHandle } from 'react'
+import { useState, useMemo, useRef, useEffect, useCallback, forwardRef, useImperativeHandle, type ReactNode } from 'react'
 import { createPortal } from 'react-dom'
 import { Search, CornerDownLeft, Loader2, AlertTriangle } from 'lucide-react'
 import { clsx } from 'clsx'
+import { useAnimatedUnmount } from '../../hooks/useAnimatedUnmount'
+import { TRANSITION_BACKDROP, TRANSITION_MENU, TW_EASE_UI, overlayExitMs, overlayTransitionStyle } from '../../utils/animation'
 import { SearchPillInput, type SearchModifier } from '@skyhook-io/k8s-ui'
 import { getResourceIcon } from '../../utils/resource-icons'
 import type { SearchHit, SearchMatchedField } from '../../api/client'
@@ -386,8 +388,10 @@ export const Omnibar = forwardRef<OmnibarHandle, OmnibarProps>(function Omnibar(
   }, [open])
 
   // Track the input's position so the portaled panel stays anchored under it.
+  // The anchor is kept through the exit (clearing it at logical close would
+  // unmount the fading panel) and re-measured on the next open.
   useEffect(() => {
-    if (!open) { setAnchor(null); return }
+    if (!open) return
     const update = () => {
       const el = containerRef.current
       if (!el) return
@@ -406,69 +410,26 @@ export const Omnibar = forwardRef<OmnibarHandle, OmnibarProps>(function Omnibar(
   const totalMatched = searchData?.total_matched ?? 0
   const hasNsPill = pills.some((p) => p.key === 'ns')
   const dropdownOpen = open && !suggesting && (rows.length > 0 || searchActive)
+  // Presence: the scrim and the results panel are menu-kind overlays (140ms
+  // in / 100ms out) and stay mounted through their exit. What the panel was
+  // showing at logical close is what fades out — `dropdownOpen` drops with
+  // `open`, so the last open-frame value is retained for the exit.
+  const portalShown = open && (dropdownOpen || suggesting)
+  const portal = useAnimatedUnmount(portalShown, overlayExitMs('menu'))
+  const panelWasOpen = useRef(dropdownOpen)
+  if (open) panelWasOpen.current = dropdownOpen
+  const showPanel = open ? dropdownOpen : panelWasOpen.current
 
   const clearNsPills = () => { setPills((prev) => prev.filter((p) => p.key !== 'ns')); inputRef.current?.focus() }
 
   const hero = size === 'hero'
 
-  return (
-    <div
-      ref={containerRef}
-      className={clsx('relative w-full', hero ? 'max-w-3xl' : 'max-w-lg', open && hero && 'z-[16]')}
-      // Open on click even when the field is already focused — onFocus alone
-      // never fires again, so an autofocused hero (Home) wouldn't reveal the
-      // launcher on a click.
-      onMouseDown={() => setOpen(true)}
-    >
-      <SearchPillInput
-        className={hero
-          ? 'min-h-14 px-5 rounded-2xl bg-theme-surface border border-theme-border shadow-theme-sm transition-colors focus-within:border-[var(--color-brand-500)] focus-within:shadow-[0_0_0_4px_color-mix(in_srgb,var(--color-brand-500)_15%,transparent)]'
-          : 'min-h-8 px-2.5 rounded-md bg-theme-elevated border border-transparent focus-within:border-theme-border focus-within:bg-theme-surface transition-colors'}
-        inputClassName={hero ? 'text-lg py-4' : undefined}
-        text={text}
-        pills={pills}
-        onChange={({ text: t, pills: p }) => { setText(t); setPills(p); setOpen(true) }}
-        onKeyDown={handleKeyDown}
-        onFocus={() => { if (skipFocusOpen.current) { skipFocusOpen.current = false; return } setOpen(true) }}
-        onSuggestingChange={setSuggesting}
-        modifierOptions={modifierOptions}
-        placeholder={placeholder}
-        aria-label="Search resources and commands"
-        inputRef={inputRef}
-        leftSlot={<Search className={hero ? 'w-5 h-5 shrink-0 text-theme-text-tertiary' : 'w-3.5 h-3.5 shrink-0 text-theme-text-tertiary'} />}
-        rightSlot={
-          <div className="flex items-center gap-1.5 shrink-0">
-            <SearchSyntaxHelp />
-            {!hero && !text && pills.length === 0 && (
-              <kbd className="text-[10px] text-theme-text-tertiary bg-theme-surface px-1 py-0.5 rounded border border-theme-border-light">
-                {mac ? '⌘' : 'Ctrl+'}K
-              </kbd>
-            )}
-          </div>
-        }
-      />
-
-      {open && anchor && (dropdownOpen || suggesting) && createPortal(
-        <>
-          {/* Scrim — separates the dropdown from the page, consistently in both
-              modes. At z-[15] it sits BELOW the rail/top bar (z-20/30), so the
-              nav chrome stays lit while the content behind the panel dims+blurs:
-              a "spotlight on search", not a full-screen modal dim (which fits a
-              centered command palette, not an anchored omnibar). The hero covers
-              from the top (its box is in the content, lifted to z-[16]); the
-              top-bar launcher covers from below the field (its box is already in
-              the z-20 chrome). Click closes. */}
-          <div
-            className="fixed left-0 right-0 bottom-0 z-[15] bg-black/15 dark:bg-black/50 backdrop-blur-[3px]"
-            style={{ top: hero ? 0 : anchor.top }}
-            onClick={() => { setOpen(false); inputRef.current?.blur() }}
-          />
-          {dropdownOpen && (
-          <div
-            ref={panelRef}
-            style={{ position: 'fixed', top: anchor.top + 8, left: anchor.centerX, transform: 'translateX(-50%)', width: hero ? Math.round(anchor.width) : 640, maxWidth: 'calc(100vw - 2rem)' }}
-            className="z-[121] dialog shadow-theme-lg ring-1 ring-black/5 dark:ring-white/10 overflow-hidden"
-          >
+  // The results panel keeps showing what it showed at logical close while it
+  // fades: picking a result clears the query (and recents re-key off `open`)
+  // on the same render, and a panel that swaps to a different list mid-exit
+  // reads as a glitch. The last open-frame content is frozen for the exit.
+  const panelContent = (
+    <>
           <div ref={listRef} className="max-h-[60vh] overflow-y-auto py-1">
             {recentRows.length > 0 && (
               <div>
@@ -549,6 +510,81 @@ export const Omnibar = forwardRef<OmnibarHandle, OmnibarProps>(function Omnibar(
             <span>⇞⇟ page</span>
             <span>esc close</span>
           </div>
+    </>
+  )
+  const frozenPanel = useRef<ReactNode>(null)
+  if (open) frozenPanel.current = panelContent
+  const shownPanel = open ? panelContent : frozenPanel.current
+
+  return (
+    <div
+      ref={containerRef}
+      className={clsx('relative w-full', hero ? 'max-w-3xl' : 'max-w-lg', portal.shouldRender && hero && 'z-[16]')}
+      // Open on click even when the field is already focused — onFocus alone
+      // never fires again, so an autofocused hero (Home) wouldn't reveal the
+      // launcher on a click.
+      onMouseDown={() => setOpen(true)}
+    >
+      <SearchPillInput
+        className={hero
+          ? `min-h-14 px-5 rounded-2xl bg-theme-surface border border-theme-border shadow-theme-sm transition-[color,background-color,border-color,box-shadow] duration-[140ms] ${TW_EASE_UI} focus-within:border-[var(--color-brand-500)] focus-within:shadow-[0_0_0_4px_color-mix(in_srgb,var(--color-brand-500)_15%,transparent)]`
+          : `min-h-8 px-2.5 rounded-md bg-theme-elevated border border-transparent focus-within:border-theme-border focus-within:bg-theme-surface transition-[color,background-color,border-color] duration-[140ms] ${TW_EASE_UI}`}
+        inputClassName={hero ? 'text-lg py-4' : undefined}
+        text={text}
+        pills={pills}
+        onChange={({ text: t, pills: p }) => { setText(t); setPills(p); setOpen(true) }}
+        onKeyDown={handleKeyDown}
+        onFocus={() => { if (skipFocusOpen.current) { skipFocusOpen.current = false; return } setOpen(true) }}
+        onSuggestingChange={setSuggesting}
+        modifierOptions={modifierOptions}
+        placeholder={placeholder}
+        aria-label="Search resources and commands"
+        inputRef={inputRef}
+        leftSlot={<Search className={hero ? 'w-5 h-5 shrink-0 text-theme-text-tertiary' : 'w-3.5 h-3.5 shrink-0 text-theme-text-tertiary'} />}
+        rightSlot={
+          <div className="flex items-center gap-1.5 shrink-0">
+            <SearchSyntaxHelp />
+            {!hero && !text && pills.length === 0 && (
+              <kbd className="text-[10px] text-theme-text-tertiary bg-theme-surface px-1 py-0.5 rounded border border-theme-border-light">
+                {mac ? '⌘' : 'Ctrl+'}K
+              </kbd>
+            )}
+          </div>
+        }
+      />
+
+      {portal.shouldRender && anchor && createPortal(
+        <>
+          {/* Scrim — separates the dropdown from the page, consistently in both
+              modes. At z-[15] it sits BELOW the rail/top bar (z-20/30), so the
+              nav chrome stays lit while the content behind the panel dims+blurs:
+              a "spotlight on search", not a full-screen modal dim (which fits a
+              centered command palette, not an anchored omnibar). The hero covers
+              from the top (its box is in the content, lifted to z-[16]); the
+              top-bar launcher covers from below the field (its box is already in
+              the z-20 chrome). Click closes. */}
+          <div
+            className={clsx(
+              'fixed left-0 right-0 bottom-0 z-[15] bg-black/15 dark:bg-black/50 backdrop-blur-[3px]',
+              TRANSITION_BACKDROP,
+              portal.isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none',
+            )}
+            style={{ top: hero ? 0 : anchor.top, ...overlayTransitionStyle(portal.isOpen, 'menu') }}
+            onClick={open ? () => { setOpen(false); inputRef.current?.blur() } : undefined}
+          />
+          {showPanel && (
+          <div
+            ref={panelRef}
+            inert={!open || undefined}
+            style={{ position: 'fixed', top: anchor.top + 8, left: anchor.centerX, transform: 'translateX(-50%)', width: hero ? Math.round(anchor.width) : 640, maxWidth: 'calc(100vw - 2rem)', ...overlayTransitionStyle(portal.isOpen, 'menu') }}
+            className={clsx(
+              'z-[121] dialog shadow-theme-lg ring-1 ring-black/5 dark:ring-white/10 overflow-hidden origin-top',
+              TRANSITION_MENU,
+              portal.isOpen ? 'opacity-100 translate-y-0 scale-100' : 'opacity-0 -translate-y-1 scale-[0.97]',
+              !open && 'pointer-events-none',
+            )}
+          >
+          {shownPanel}
           </div>
           )}
         </>,

package/src/components/ui/ShortcutHelpOverlay.tsx

@@ -182,8 +182,11 @@ export function ShortcutHelpOverlay({ onClose, currentView, isOpen = true }: Sho
   const shortcuts = useActiveShortcuts()
   const overlayRef = useRef<HTMLDivElement>(null)
 
-  // Close on Escape
+  // Close on Escape — only while logically open: the overlay stays mounted
+  // through its exit and must not keep swallowing Escape (or blocking
+  // clicks) while it fades.
   useEffect(() => {
+    if (!isOpen) return
     const handler = (e: KeyboardEvent) => {
       if (e.key === 'Escape') {
         e.preventDefault()
@@ -194,7 +197,7 @@ export function ShortcutHelpOverlay({ onClose, currentView, isOpen = true }: Sho
     // Use capture to intercept before the shortcut system
     document.addEventListener('keydown', handler, true)
     return () => document.removeEventListener('keydown', handler, true)
-  }, [onClose])
+  }, [isOpen, onClose])
 
   // Group shortcuts by category, merging duplicates with same description
   // (e.g., "Zoom in" registered for both + and = shows as one row)
@@ -224,16 +227,16 @@ export function ShortcutHelpOverlay({ onClose, currentView, isOpen = true }: Sho
   const isEmpty = globalCategories.length === 0 && !hasViewSection && !hasContextSection
 
   return (
-    <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
+    <div className="fixed inset-0 z-[100] flex items-center justify-center p-4" inert={!isOpen || undefined}>
       {/* Backdrop */}
       <div
         className={clsx(
           'absolute inset-0 bg-theme-base/70 backdrop-blur-sm',
           TRANSITION_BACKDROP,
-          isOpen ? 'opacity-100' : 'opacity-0'
+          isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'
         )}
         style={overlayTransitionStyle(isOpen, 'dialog')}
-        onClick={onClose}
+        onClick={isOpen ? onClose : undefined}
       />
 
       {/* Panel */}

package/src/components/workload/WorkloadView.tsx

@@ -742,9 +742,15 @@ export function WorkloadView({
     [helmOwner, helmSourceResource],
   )
 
-  // Fetch topology for hierarchy building (only when expanded)
+  // Fetch topology for hierarchy building (only when expanded). Polled like
+  // useTrace's "drawer feeling live" pattern — without this, a resource
+  // whose status/labels/edges change without its node/edge identity changing
+  // (a canary weight step, a Pod's traffic role flipping to stable, an
+  // AnalysisRun finishing) never refreshes until something else forces a
+  // remount; a genuinely stuck-looking Topology tab, not just a stale one.
   const { data: topology } = useTopology([namespace], 'resources', {
     enabled: expanded,
+    refetchInterval: expanded ? 5000 : false,
   })
 
   // Always fetched so Recent Events populates on drawer open; allEvents below is