@skyhook-io/radar-app 1.14.2 → 1.14.3

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/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/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

@@ -2,6 +2,8 @@ import { useState, useMemo, useRef, useEffect, useCallback, forwardRef, useImper
 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,6 +410,15 @@ 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() }
 
@@ -422,8 +435,8 @@ export const Omnibar = forwardRef<OmnibarHandle, OmnibarProps>(function Omnibar(
     >
       <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'}
+          ? `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}
@@ -448,7 +461,7 @@ export const Omnibar = forwardRef<OmnibarHandle, OmnibarProps>(function Omnibar(
         }
       />
 
-      {open && anchor && (dropdownOpen || suggesting) && createPortal(
+      {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
@@ -459,15 +472,25 @@ export const Omnibar = forwardRef<OmnibarHandle, OmnibarProps>(function Omnibar(
               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() }}
+            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}
           />
-          {dropdownOpen && (
+          {showPanel && (
           <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"
+            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',
+            )}
           >
           <div ref={listRef} className="max-h-[60vh] overflow-y-auto py-1">
             {recentRows.length > 0 && (

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/ui/Disclosure.tsx

@@ -1,47 +0,0 @@
-import { useState, type ReactNode } from 'react'
-import { clsx } from 'clsx'
-import { Collapse, CollapseChevron, useDisclosure } from '@skyhook-io/k8s-ui/components/ui/Collapse'
-
-// In-flow disclosure with the app-standard motion — the replacement for native
-// <details>/<summary> on primary paths. Native details snaps open with no
-// transition and its marker ignores the caret language; this pairs a button
-// header (aria-expanded / aria-controls via useDisclosure) with CollapseChevron
-// and an animated Collapse panel. Content stays mounted while closed, exactly
-// like native details, so server-rendered markup and in-page search still see
-// the collapsed copy.
-export function Disclosure({
-  summary,
-  children,
-  className,
-  summaryClassName,
-  chevronClassName = 'h-3.5 w-3.5',
-  defaultOpen = false,
-}: {
-  summary: ReactNode
-  children: ReactNode
-  /** Wrapper (what the old <details> carried). */
-  className?: string
-  /** Header button (what the old <summary> carried). */
-  summaryClassName?: string
-  chevronClassName?: string
-  defaultOpen?: boolean
-}) {
-  const [open, setOpen] = useState(defaultOpen)
-  const disclosure = useDisclosure(open)
-  return (
-    <div className={className}>
-      <button
-        type="button"
-        {...disclosure.buttonProps}
-        onClick={() => setOpen((value) => !value)}
-        className={clsx('flex w-full cursor-pointer items-center gap-1.5 text-left', summaryClassName)}
-      >
-        <CollapseChevron open={open} className={chevronClassName} />
-        {summary}
-      </button>
-      <Collapse open={open} id={disclosure.panelId}>
-        {children}
-      </Collapse>
-    </div>
-  )
-}