@skyhook-io/radar-app 1.9.0 → 1.9.2

package/src/components/settings/SettingsDialog.tsx

@@ -60,6 +60,7 @@ interface ConfigResponse {
 interface SettingsDialogProps {
   open: boolean
   onClose: () => void
+  initialSection?: SettingsSectionId
 }
 
 // The settings surface splits into three honest apply buckets:
@@ -68,7 +69,7 @@ interface SettingsDialogProps {
 //   • Live integrations (Prometheus, Argo CD) — their own Apply/Connect endpoints
 //     re-point the running server; effect immediately, NOT part of footer dirty.
 //   • AI diagnose — client-side prefs, self-saving, editable by everyone.
-type SectionId =
+export type SettingsSectionId =
   | 'overview' | 'perms' | 'connection' | 'prometheus' | 'argocd' | 'ai' | 'advanced'
 
 // Only STARTUP fields count toward footer dirty. Integration fields (prometheusUrl,
@@ -89,7 +90,11 @@ function normalizeStartup(c: Config) {
   }
 }
 
-export function SettingsDialog({ open, onClose }: SettingsDialogProps) {
+export function SettingsDialog({
+  open,
+  onClose,
+  initialSection = 'overview',
+}: SettingsDialogProps) {
   const dialogRef = useRef<HTMLDivElement>(null)
   const { shouldRender, isOpen } = useAnimatedUnmount(open, 200)
   const { data: versionInfo } = useVersionCheck()
@@ -107,7 +112,7 @@ export function SettingsDialog({ open, onClose }: SettingsDialogProps) {
   const [saving, setSaving] = useState(false)
   const [saveMessage, setSaveMessage] = useState<string | null>(null)
   const [loadError, setLoadError] = useState<string | null>(null)
-  const [section, setSection] = useState<SectionId>('overview')
+  const [section, setSection] = useState<SettingsSectionId>('overview')
   const [confirmingClose, setConfirmingClose] = useState(false)
 
   // AI Diagnosis prefs are client-side (localStorage) and now SELF-SAVING: the
@@ -117,14 +122,14 @@ export function SettingsDialog({ open, onClose }: SettingsDialogProps) {
   const aiAvailable = diag.available && diag.agents.length > 0
   const [aiDraft, setAiDraft] = useState<AIDraft>({
     agent: diag.selectedAgent,
-    isolated: diag.isolated,
+    profile: diag.profile,
     model: diag.model,
     effort: diag.effort,
   })
   const [aiSaved, setAiSaved] = useState(false)
   const aiDirty =
     aiDraft.agent !== diag.selectedAgent ||
-    aiDraft.isolated !== diag.isolated ||
+    aiDraft.profile !== diag.profile ||
     aiDraft.model !== diag.model ||
     aiDraft.effort !== diag.effort
 
@@ -158,16 +163,10 @@ export function SettingsDialog({ open, onClose }: SettingsDialogProps) {
     setAiSaved(false)
     setAiDraft({
       agent: diag.selectedAgent,
-      isolated: diag.isolated,
+      profile: diag.profile,
       model: diag.model,
       effort: diag.effort,
     })
-    // Overview is the landing section — a status-at-a-glance of what Radar is
-    // connected to (cluster, integrations, MCP, AI), useful to owners and
-    // viewers alike, rather than dropping owners on a config form or everyone
-    // on a permissions dump.
-    setSection('overview')
-
     fetch(apiUrl('/config'), { credentials: getCredentialsMode(), headers: getAuthHeaders() })
       .then((res) => {
         if (!res.ok) throw new Error(`HTTP ${res.status}`)
@@ -185,6 +184,19 @@ export function SettingsDialog({ open, onClose }: SettingsDialogProps) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open])
 
+  useEffect(() => {
+    if (open) setSection(initialSection)
+  }, [open, initialSection])
+
+  useEffect(() => {
+    if (!open || diag.agents.length === 0) return
+    setAiDraft((current) => {
+      const profiles = diag.agents.find((agent) => agent.name === current.agent)?.profiles ?? []
+      if (profiles.length === 0 || profiles.includes(current.profile)) return current
+      return { ...current, profile: profiles[0] }
+    })
+  }, [open, diag.agents])
+
   const updateConfigField = useCallback(<K extends keyof Config>(field: K, value: Config[K]) => {
     setEditedConfig((prev) => ({ ...prev, [field]: value }))
     setSaveMessage(null)
@@ -234,7 +246,7 @@ export function SettingsDialog({ open, onClose }: SettingsDialogProps) {
   // agent first, then restore the draft's model/effort.
   const saveAi = useCallback(() => {
     diag.setSelectedAgent(aiDraft.agent)
-    diag.setIsolated(aiDraft.isolated)
+    diag.setProfile(aiDraft.profile)
     diag.setModel(aiDraft.model)
     diag.setEffort(aiDraft.effort)
     setAiSaved(true)
@@ -335,7 +347,7 @@ export function SettingsDialog({ open, onClose }: SettingsDialogProps) {
           // Fixed height so the dialog doesn't jump when switching tabs — short
           // tabs leave breathing room, tall ones scroll inside the content pane.
           // max-h keeps it on-screen on short viewports.
-          'sm:rounded-xl sm:max-w-4xl sm:mx-4 sm:h-[620px] sm:max-h-[85vh]',
+          'sm:rounded-xl sm:max-w-4xl sm:mx-4 sm:h-[660px] sm:max-h-[85vh]',
           TRANSITION_PANEL,
           isOpen ? 'opacity-100 scale-100' : 'opacity-0 scale-95'
         )}
@@ -667,7 +679,7 @@ export function SettingsDialog({ open, onClose }: SettingsDialogProps) {
 // -- Sidebar primitives -------------------------------------------------------
 
 interface NavItemDef {
-  id: SectionId
+  id: SettingsSectionId
   label: string
   icon: LucideIcon
   ownerOnly: boolean
@@ -748,8 +760,8 @@ function SectionPane({
   locked,
   children,
 }: {
-  id: SectionId
-  active: SectionId
+  id: SettingsSectionId
+  active: SettingsSectionId
   title: string
   caption?: string
   live?: boolean
@@ -802,7 +814,7 @@ function LockWall() {
 type OverviewTone = 'ok' | 'warn' | 'off' | 'unknown'
 
 interface OverviewRow {
-  id: SectionId
+  id: SettingsSectionId
   icon: LucideIcon
   label: string
   tone: OverviewTone
@@ -817,7 +829,7 @@ interface OverviewRow {
 // probe, so we don't want it firing when Settings opens on another section);
 // cluster and Prometheus status are shared app-wide caches, so they're read
 // unconditionally.
-function OverviewPanel({ active, onNavigate }: { active: boolean; onNavigate: (s: SectionId) => void }) {
+function OverviewPanel({ active, onNavigate }: { active: boolean; onNavigate: (s: SettingsSectionId) => void }) {
   const { data: cluster } = useClusterInfo()
   const { data: prom } = usePrometheusStatus()
   const { data: argo } = useArgoStatus(active)

package/src/components/timeline/TimelineView.tsx

@@ -17,6 +17,7 @@ import {
   type TimelineGrouping,
   type TimelineSort,
   type PinnedLaneRef,
+  useDebouncedValue,
 } from '@skyhook-io/k8s-ui'
 import { TimelineList } from './TimelineList'
 import type { ActivityFilterKey } from './TimelineList'
@@ -308,6 +309,17 @@ export function TimelineView({ namespaces, onResourceClick, initialViewMode, ini
   // Search / activity-type / kind lifted here too, so they survive the view
   // switch and drive both views through one source of truth.
   const [search, setSearch] = useState(() => searchParams.get('q') ?? '')
+  // The `q` URL write is debounced so typing doesn't navigate per keystroke
+  // (clearing applies immediately — a delayed clear makes the × feel broken).
+  // The URL therefore lags the input while typing, so the URL→state read below
+  // must not sync a `q` that is merely the echo of our own write — it would
+  // revert in-flight keystrokes. Echoes are recognized by value: they carry
+  // exactly the debounced search we wrote. Ref instead of a dep: the read
+  // effect keys on searchParams alone (see its comment) and only needs the
+  // written value at fire time.
+  const debouncedSearch = useDebouncedValue(search, 300, (v) => v === '')
+  const writtenSearchRef = useRef(debouncedSearch)
+  writtenSearchRef.current = debouncedSearch
   // Seed the multi-select from the URL `activity` csv, else the home-page
   // deep-link preset: 'all'/undefined means no chips selected (everything).
   const [activityFilter, setActivityFilter] = useState<ActivityFilterKey[]>(
@@ -621,7 +633,9 @@ export function TimelineView({ namespaces, onResourceClick, initialViewMode, ini
     const nextPinnedOnly = sp.get('pinnedOnly') === '1' && pinnedLanes.length > 0
     setPinnedOnly((prev) => (prev === nextPinnedOnly ? prev : nextPinnedOnly))
     const nextSearch = sp.get('q') ?? ''
-    setSearch((prev) => (prev === nextSearch ? prev : nextSearch))
+    if (nextSearch !== writtenSearchRef.current) {
+      setSearch((prev) => (prev === nextSearch ? prev : nextSearch))
+    }
     const nextActivity = parseActivity(sp) ?? []
     setActivityFilter((prev) => (arraysEqual(prev, nextActivity) ? prev : nextActivity))
     const nextKinds = parseKinds(sp)
@@ -638,7 +652,7 @@ export function TimelineView({ namespaces, onResourceClick, initialViewMode, ini
     const current = searchParamsRef.current
     const target = writeTimelineParams(
       current,
-      { viewMode, mode, showDeleted, pinnedOnly, search, activityFilter, kindFilter, grouping, sort, selectedEventId },
+      { viewMode, mode, showDeleted, pinnedOnly, search: debouncedSearch, activityFilter, kindFilter, grouping, sort, selectedEventId },
       { isRetained: isRetained || isLocal, requiresNamespaceFilter: scopeRequiresNamespaceFilter },
     )
     const targetStr = target.toString()
@@ -652,7 +666,7 @@ export function TimelineView({ namespaces, onResourceClick, initialViewMode, ini
     const replace = !didMountUrlSyncRef.current || onlyHighFreqDiffer(currentStr, targetStr)
     didMountUrlSyncRef.current = true
     setSearchParamsRef.current(target, { replace })
-  }, [viewMode, mode, showDeleted, pinnedOnly, search, activityFilter, kindFilter, grouping, sort, selectedEventId, isRetained, isLocal, scopeRequiresNamespaceFilter])
+  }, [viewMode, mode, showDeleted, pinnedOnly, debouncedSearch, activityFilter, kindFilter, grouping, sort, selectedEventId, isRetained, isLocal, scopeRequiresNamespaceFilter])
 
   // Fetch all activity - zoom controls what's visible in the UI. This ring feeds
   // the swimlanes and the local strip's histogram, so it also runs in list mode

package/src/components/ui/command-items.ts

@@ -1,130 +1,200 @@
-import { useMemo } from 'react'
-import { Home, Network, List, Clock, Package, Activity, Sun, Stethoscope, DollarSign, ShieldCheck, GitBranch, AlertTriangle, Boxes, Server } from 'lucide-react'
-import { useNamespaces, useContexts } from '../../api/client'
-import { CORE_RESOURCES, useAPIResources } from '../../api/apiResources'
-import { getResourceIcon } from '../../utils/resource-icons'
-import { parseContextName } from '../../utils/context-name'
+import { useMemo } from "react";
+import {
+  Home,
+  Network,
+  List,
+  Clock,
+  Package,
+  Activity,
+  Sun,
+  Stethoscope,
+  DollarSign,
+  Gauge,
+  ShieldCheck,
+  GitBranch,
+  AlertTriangle,
+  Boxes,
+  Server,
+} from "lucide-react";
+import { useNamespaces, useContexts } from "../../api/client";
+import { CORE_RESOURCES, useAPIResources } from "../../api/apiResources";
+import { getResourceIcon } from "../../utils/resource-icons";
+import { parseContextName } from "../../utils/context-name";
 
 // Drop the disambiguating " (source)" suffix the context list appends, so the
 // GKE/EKS/AKS parser sees the bare context name (mirrors the cluster picker).
 function stripSourceSuffix(name: string, source?: string): string {
-  if (!source) return name
-  const escaped = source.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
-  return name.replace(new RegExp(`\\s+\\(${escaped}(?:\\s+#\\d+)?\\)$`), '')
+  if (!source) return name;
+  const escaped = source.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  return name.replace(new RegExp(`\\s+\\(${escaped}(?:\\s+#\\d+)?\\)$`), "");
 }
 
-export type MainView = 'home' | 'topology' | 'resources' | 'timeline' | 'issues' | 'helm' | 'traffic' | 'cost' | 'checks' | 'gitops' | 'applications'
+export type MainView =
+  | "home"
+  | "topology"
+  | "resources"
+  | "timeline"
+  | "issues"
+  | "helm"
+  | "traffic"
+  | "cost"
+  | "capacity"
+  | "checks"
+  | "gitops"
+  | "applications";
 
 export interface CommandItem {
-  id: string
-  label: string
-  sublabel?: string
-  category: string
-  icon?: React.ComponentType<{ className?: string }>
-  shortcut?: string
-  action: () => void
+  id: string;
+  label: string;
+  sublabel?: string;
+  category: string;
+  icon?: React.ComponentType<{ className?: string }>;
+  shortcut?: string;
+  action: () => void;
   /** Extra terms to match against during search (not displayed). */
-  searchTerms?: string[]
+  searchTerms?: string[];
   /** Small priority bonus added to the final score (only if the item matched). */
-  priorityBonus?: number
+  priorityBonus?: number;
 }
 
 // Built-in k8s API groups. Used to nudge these above CRDs on tied matches.
-const CORE_GROUP_BONUS = 10
-const WELL_KNOWN_GROUP_BONUS = 5
+const CORE_GROUP_BONUS = 10;
+const WELL_KNOWN_GROUP_BONUS = 5;
 const WELL_KNOWN_GROUPS = new Set([
-  'apps', 'batch', 'autoscaling', 'policy', 'networking.k8s.io', 'rbac.authorization.k8s.io',
-  'storage.k8s.io', 'scheduling.k8s.io', 'coordination.k8s.io', 'apiextensions.k8s.io',
-  'admissionregistration.k8s.io', 'apiregistration.k8s.io', 'certificates.k8s.io',
-  'events.k8s.io', 'discovery.k8s.io', 'flowcontrol.apiserver.k8s.io', 'node.k8s.io',
-  'authentication.k8s.io', 'authorization.k8s.io',
-])
+  "apps",
+  "batch",
+  "autoscaling",
+  "policy",
+  "networking.k8s.io",
+  "rbac.authorization.k8s.io",
+  "storage.k8s.io",
+  "scheduling.k8s.io",
+  "coordination.k8s.io",
+  "apiextensions.k8s.io",
+  "admissionregistration.k8s.io",
+  "apiregistration.k8s.io",
+  "certificates.k8s.io",
+  "events.k8s.io",
+  "discovery.k8s.io",
+  "flowcontrol.apiserver.k8s.io",
+  "node.k8s.io",
+  "authentication.k8s.io",
+  "authorization.k8s.io",
+]);
 
 function groupPriorityBonus(group: string): number {
-  if (!group) return CORE_GROUP_BONUS
-  if (WELL_KNOWN_GROUPS.has(group)) return WELL_KNOWN_GROUP_BONUS
-  return 0
+  if (!group) return CORE_GROUP_BONUS;
+  if (WELL_KNOWN_GROUPS.has(group)) return WELL_KNOWN_GROUP_BONUS;
+  return 0;
 }
 
 // Fuzzy match scoring: exact > prefix > word boundary > substring. Within a
 // tier, a coverage bonus (up to +20) breaks ties in favor of shorter labels.
 export function scoreMatch(text: string, query: string): number {
-  const lower = text.toLowerCase()
-  const q = query.toLowerCase()
-  if (!lower.includes(q)) return 0
-  let base: number
-  if (lower === q) base = 150
-  else if (lower.startsWith(q)) base = 100
+  const lower = text.toLowerCase();
+  const q = query.toLowerCase();
+  if (!lower.includes(q)) return 0;
+  let base: number;
+  if (lower === q) base = 150;
+  else if (lower.startsWith(q)) base = 100;
   else {
-    const wordStart = lower.indexOf(q)
-    const prev = lower[wordStart - 1]
-    base = wordStart > 0 && (prev === ' ' || prev === '/' || prev === '-' || prev === '.') ? 75 : 50
+    const wordStart = lower.indexOf(q);
+    const prev = lower[wordStart - 1];
+    base =
+      wordStart > 0 &&
+      (prev === " " || prev === "/" || prev === "-" || prev === ".")
+        ? 75
+        : 50;
   }
-  return base + (q.length / lower.length) * 20
+  return base + (q.length / lower.length) * 20;
 }
 
 export function bestScore(item: CommandItem, query: string): number {
-  let best = scoreMatch(item.label, query)
-  const secondary = Math.floor(Math.max(scoreMatch(item.sublabel || '', query), scoreMatch(item.category, query)) * 0.6)
-  best = Math.max(best, secondary)
+  let best = scoreMatch(item.label, query);
+  const secondary = Math.floor(
+    Math.max(
+      scoreMatch(item.sublabel || "", query),
+      scoreMatch(item.category, query),
+    ) * 0.6,
+  );
+  best = Math.max(best, secondary);
   if (item.searchTerms) {
-    for (const term of item.searchTerms) best = Math.max(best, scoreMatch(term, query))
+    for (const term of item.searchTerms)
+      best = Math.max(best, scoreMatch(term, query));
   }
-  return best > 0 ? best + (item.priorityBonus || 0) : 0
+  return best > 0 ? best + (item.priorityBonus || 0) : 0;
 }
 
 export interface CommandItemCallbacks {
-  onNavigateView: (view: MainView) => void
-  onNavigateKind: (kind: string, group: string) => void
-  onSwitchContext: (name: string) => void
-  onSetNamespaces: (ns: string[]) => void
-  onToggleTheme: () => void
-  onShowDiagnostics?: () => void
+  onNavigateView: (view: MainView) => void;
+  onNavigateKind: (kind: string, group: string) => void;
+  onSwitchContext: (name: string) => void;
+  onSetNamespaces: (ns: string[]) => void;
+  onToggleTheme: () => void;
+  onShowDiagnostics?: () => void;
 }
 
-const VIEW_ENTRIES: { view: MainView; label: string; icon: React.ComponentType<{ className?: string }>; shortcut: string }[] = [
-  { view: 'home', label: 'Home', icon: Home, shortcut: 'g h' },
-  { view: 'resources', label: 'Resources', icon: List, shortcut: 'g r' },
-  { view: 'issues', label: 'Issues', icon: AlertTriangle, shortcut: 'g i' },
-  { view: 'topology', label: 'Topology', icon: Network, shortcut: 'g t' },
-  { view: 'applications', label: 'Applications', icon: Boxes, shortcut: 'g a' },
-  { view: 'timeline', label: 'Timeline', icon: Clock, shortcut: 'g l' },
-  { view: 'helm', label: 'Helm', icon: Package, shortcut: 'g m' },
-  { view: 'gitops', label: 'GitOps', icon: GitBranch, shortcut: 'g o' },
-  { view: 'traffic', label: 'Live Traffic', icon: Activity, shortcut: 'g f' },
-  { view: 'checks', label: 'Checks', icon: ShieldCheck, shortcut: 'g u' },
-  { view: 'cost', label: 'Cost', icon: DollarSign, shortcut: 'g c' },
-]
+const VIEW_ENTRIES: {
+  view: MainView;
+  label: string;
+  icon: React.ComponentType<{ className?: string }>;
+  shortcut: string;
+}[] = [
+  { view: "home", label: "Home", icon: Home, shortcut: "g h" },
+  { view: "resources", label: "Resources", icon: List, shortcut: "g r" },
+  { view: "issues", label: "Issues", icon: AlertTriangle, shortcut: "g i" },
+  { view: "topology", label: "Topology", icon: Network, shortcut: "g t" },
+  { view: "applications", label: "Applications", icon: Boxes, shortcut: "g a" },
+  { view: "timeline", label: "Timeline", icon: Clock, shortcut: "g l" },
+  { view: "helm", label: "Helm", icon: Package, shortcut: "g m" },
+  { view: "gitops", label: "GitOps", icon: GitBranch, shortcut: "g o" },
+  { view: "traffic", label: "Live Traffic", icon: Activity, shortcut: "g f" },
+  { view: "checks", label: "Checks", icon: ShieldCheck, shortcut: "g u" },
+  { view: "capacity", label: "Capacity", icon: Gauge, shortcut: "g p" },
+  { view: "cost", label: "Cost", icon: DollarSign, shortcut: "g c" },
+];
 
 // The static command-palette items (Views, Resource Kinds, Contexts,
 // Namespaces, Actions) — shared by the centered modal (embedded) and the
 // standalone omnibar so the two never drift.
 export function useCommandItems(cb: CommandItemCallbacks): CommandItem[] {
-  const { data: namespacesData } = useNamespaces()
-  const { data: contexts } = useContexts()
-  const { data: apiResources } = useAPIResources()
+  const { data: namespacesData } = useNamespaces();
+  const { data: contexts } = useContexts();
+  const { data: apiResources } = useAPIResources();
 
   return useMemo<CommandItem[]>(() => {
-    const result: CommandItem[] = []
+    const result: CommandItem[] = [];
 
     for (const v of VIEW_ENTRIES) {
-      result.push({ id: `view-${v.view}`, label: `Go to ${v.label}`, category: 'Views', icon: v.icon, shortcut: v.shortcut, action: () => cb.onNavigateView(v.view) })
+      result.push({
+        id: `view-${v.view}`,
+        label: `Go to ${v.label}`,
+        category: "Views",
+        icon: v.icon,
+        shortcut: v.shortcut,
+        action: () => cb.onNavigateView(v.view),
+      });
     }
 
-    const resources = apiResources || CORE_RESOURCES
-    const seenKinds = new Set<string>()
+    const resources = apiResources || CORE_RESOURCES;
+    const seenKinds = new Set<string>();
     for (const r of resources) {
-      if (!r.verbs?.includes('list')) continue
-      const kindKey = `${r.name}/${r.group}`
-      if (seenKinds.has(kindKey)) continue
-      seenKinds.add(kindKey)
+      if (!r.verbs?.includes("list")) continue;
+      const kindKey = `${r.name}/${r.group}`;
+      if (seenKinds.has(kindKey)) continue;
+      seenKinds.add(kindKey);
       result.push({
         // Group shown only when it disambiguates (CRDs) — "core" is noise on
         // built-in kinds. priorityBonus still nudges core/well-known above CRDs.
-        id: `kind-${r.name}-${r.group}`, label: r.kind, sublabel: r.group || undefined, category: 'Resource Kinds',
-        icon: getResourceIcon(r.kind), action: () => cb.onNavigateKind(r.name, r.group),
-        searchTerms: [r.name, r.kind], priorityBonus: groupPriorityBonus(r.group),
-      })
+        id: `kind-${r.name}-${r.group}`,
+        label: r.kind,
+        sublabel: r.group || undefined,
+        category: "Resource Kinds",
+        icon: getResourceIcon(r.kind),
+        action: () => cb.onNavigateKind(r.name, r.group),
+        searchTerms: [r.name, r.kind],
+        priorityBonus: groupPriorityBonus(r.group),
+      });
     }
 
     if (contexts) {
@@ -134,45 +204,99 @@ export function useCommandItems(cb: CommandItemCallbacks): CommandItem[] {
       // it. Count display names so genuine duplicates (same cluster name from
       // different kubeconfig sources) stay distinguishable; unique ones stay clean.
       const parsedCtx = contexts.map((ctx) => {
-        const parsed = parseContextName(stripSourceSuffix(ctx.name, ctx.source))
-        const fromCluster = ctx.cluster ? parseContextName(ctx.cluster) : null
-        const meta = [parsed.provider ?? fromCluster?.provider, parsed.region ?? fromCluster?.region].filter(Boolean).join(' · ')
-        return { ctx, clusterName: parsed.clusterName, account: parsed.account, base: ctx.isCurrent ? 'current' : meta }
-      })
+        const parsed = parseContextName(
+          stripSourceSuffix(ctx.name, ctx.source),
+        );
+        const fromCluster = ctx.cluster ? parseContextName(ctx.cluster) : null;
+        const meta = [
+          parsed.provider ?? fromCluster?.provider,
+          parsed.region ?? fromCluster?.region,
+        ]
+          .filter(Boolean)
+          .join(" · ");
+        return {
+          ctx,
+          clusterName: parsed.clusterName,
+          account: parsed.account,
+          base: ctx.isCurrent ? "current" : meta,
+        };
+      });
       // Disambiguate on the FINAL visible (label, sublabel) pair, not just the
       // cluster name — same name + same provider/region from the same kubeconfig
       // file would otherwise render identically while switching different
       // contexts. Collisions fall back to the raw context name (unique by id).
-      const pairCount = new Map<string, number>()
-      for (const p of parsedCtx) pairCount.set(`${p.clusterName}\x00${p.base}`, (pairCount.get(`${p.clusterName}\x00${p.base}`) ?? 0) + 1)
+      const pairCount = new Map<string, number>();
+      for (const p of parsedCtx)
+        pairCount.set(
+          `${p.clusterName}\x00${p.base}`,
+          (pairCount.get(`${p.clusterName}\x00${p.base}`) ?? 0) + 1,
+        );
       for (const { ctx, clusterName, account, base } of parsedCtx) {
-        const collides = (pairCount.get(`${clusterName}\x00${base}`) ?? 0) > 1
-        const sub = [base, collides ? ctx.name : ''].filter(Boolean).join(' · ')
+        const collides = (pairCount.get(`${clusterName}\x00${base}`) ?? 0) > 1;
+        const sub = [base, collides ? ctx.name : ""]
+          .filter(Boolean)
+          .join(" · ");
         result.push({
           id: `context-${ctx.name}`,
           label: clusterName,
           sublabel: sub || undefined,
-          category: 'Clusters',
+          category: "Clusters",
           icon: Server,
-          action: () => { if (!ctx.isCurrent) cb.onSwitchContext(ctx.name) },
-          searchTerms: [ctx.name, account || ''].filter(Boolean),
-        })
+          action: () => {
+            if (!ctx.isCurrent) cb.onSwitchContext(ctx.name);
+          },
+          searchTerms: [ctx.name, account || ""].filter(Boolean),
+        });
       }
     }
 
     if (namespacesData) {
       for (const ns of namespacesData) {
-        result.push({ id: `ns-${ns.name}`, label: ns.name, category: 'Namespaces', action: () => cb.onSetNamespaces([ns.name]) })
+        result.push({
+          id: `ns-${ns.name}`,
+          label: ns.name,
+          category: "Namespaces",
+          action: () => cb.onSetNamespaces([ns.name]),
+        });
       }
-      result.push({ id: 'ns-all', label: 'All Namespaces', category: 'Namespaces', action: () => cb.onSetNamespaces([]) })
+      result.push({
+        id: "ns-all",
+        label: "All Namespaces",
+        category: "Namespaces",
+        action: () => cb.onSetNamespaces([]),
+      });
     }
 
-    result.push({ id: 'action-theme', label: 'Toggle Theme', category: 'Actions', icon: Sun, shortcut: 't', action: () => cb.onToggleTheme() })
+    result.push({
+      id: "action-theme",
+      label: "Toggle Theme",
+      category: "Actions",
+      icon: Sun,
+      shortcut: "t",
+      action: () => cb.onToggleTheme(),
+    });
     if (cb.onShowDiagnostics) {
-      result.push({ id: 'action-diagnostics', label: 'Diagnostics', category: 'Actions', icon: Stethoscope, action: () => cb.onShowDiagnostics?.(), searchTerms: ['debug', 'health', 'status', 'snapshot'] })
+      result.push({
+        id: "action-diagnostics",
+        label: "Diagnostics",
+        category: "Actions",
+        icon: Stethoscope,
+        action: () => cb.onShowDiagnostics?.(),
+        searchTerms: ["debug", "health", "status", "snapshot"],
+      });
     }
 
-    return result
+    return result;
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [apiResources, contexts, namespacesData, cb.onNavigateView, cb.onNavigateKind, cb.onSwitchContext, cb.onSetNamespaces, cb.onToggleTheme, cb.onShowDiagnostics])
+  }, [
+    apiResources,
+    contexts,
+    namespacesData,
+    cb.onNavigateView,
+    cb.onNavigateKind,
+    cb.onSwitchContext,
+    cb.onSetNamespaces,
+    cb.onToggleTheme,
+    cb.onShowDiagnostics,
+  ]);
 }