@skyhook-io/radar-app 1.6.0 → 1.6.2

package/src/components/ui/Omnibar.tsx

@@ -4,12 +4,29 @@ import { Search, CornerDownLeft, Loader2, AlertTriangle } from 'lucide-react'
 import { clsx } from 'clsx'
 import { SearchPillInput, type SearchModifier } from '@skyhook-io/k8s-ui'
 import { getResourceIcon } from '../../utils/resource-icons'
-import { useSearch, useNamespaceScope, useContexts, type SearchHit, type SearchMatchedField } from '../../api/client'
-import { useAPIResources } from '../../api/apiResources'
-import { loadRecentResources, recordRecentResource } from '../../hooks/useRecentResources'
-import { useCommandItems, bestScore, type CommandItem, type CommandItemCallbacks } from './command-items'
+import type { SearchHit, SearchMatchedField } from '../../api/client'
+import { bestScore, type CommandItem } from './command-items'
 import { SearchSyntaxHelp } from './SearchSyntaxHelp'
 
+// Minimal recent-resource shape the omnibar renders. Hosts own the storage +
+// per-cluster partitioning behind loadRecents/recordRecent.
+export interface OmnibarRecent {
+  kind: string
+  group?: string
+  namespace?: string
+  name: string
+  cluster?: string
+  clusterName?: string
+}
+
+// Search results the host feeds in (it runs its own search hook keyed on the
+// debounced query the omnibar emits via onQueryChange).
+export interface OmnibarSearchResult {
+  hits: SearchHit[]
+  total?: number
+  total_matched?: number
+}
+
 // Health → dot color (summaryContext.health is the same vocabulary as the rest
 // of Radar). Kept local + tiny to avoid pulling the full status-tone system.
 function healthDot(health?: string): string | null {
@@ -66,14 +83,50 @@ export interface OmnibarHandle {
   focus: () => void
 }
 
-interface OmnibarProps extends CommandItemCallbacks {
-  /** Open a resource hit (route-based — sets the URL + opens the drawer). */
+export interface OmnibarProps {
+  /** Open a resource hit (route-based — sets the URL + opens the drawer/page). */
   onOpenResource: (hit: SearchHit) => void
+  /** Command-palette items, already built by the host (Views/Actions/Clusters/…).
+   *  Scored + grouped internally; the host doesn't rank them. */
+  commandItems: CommandItem[]
+  /** The host runs its own search keyed on this debounced query; `open` lets it
+   *  gate the request. */
+  onQueryChange?: (query: string, open: boolean) => void
+  /** Live search results for the current query (host-provided). */
+  searchData?: OmnibarSearchResult
+  isFetching?: boolean
+  isError?: boolean
+  /** True while React Query serves a previous query's data — gates Enter/clicks. */
+  isPlaceholderData?: boolean
+  /** Bounded modifier value sets to autocomplete (e.g. { ns: [...], kind: [...] }). */
+  modifierOptions?: Record<string, string[]>
+  /** Namespaces to seed as removable `ns:` pills when the launcher opens empty
+   *  (reflects the current view scope). */
+  seedNamespaces?: string[]
+  /** Recently-viewed resources for the empty launcher (host owns storage). */
+  loadRecents?: () => OmnibarRecent[]
+  recordRecent?: (r: OmnibarRecent) => void
+  /** When set, a "See all N results" row appears below the resource hits while
+   *  searching, handing the full (uncapped) query off to the host's dedicated
+   *  search surface. Omit to keep the omnibar a pure launcher. */
+  onViewAllResults?: (query: string) => void
+  /** Empty-launcher content. `true` (default) lists Views + Actions — the
+   *  cmd-K menu. `false` shows only Actions so recents/search lead and views
+   *  surface on type (use when the views are already always-visible, e.g. a
+   *  persistent nav rail). */
+  launcherShowsViews?: boolean
+  placeholder?: string
+  /** `hero` renders a large, centered field for landing surfaces (Home);
+   *  `default` is the slim top-bar field. */
+  size?: 'default' | 'hero'
+  /** Focus the field on mount (Home hero — the primary action on the page). */
+  autoFocus?: boolean
 }
 
 type Row =
   | { id: string; kind: 'resource'; hit: SearchHit; recent?: boolean }
   | { id: string; kind: 'command'; command: CommandItem }
+  | { id: string; kind: 'viewAll'; query: string; count: number }
 
 const COMMAND_CATEGORY_ORDER = ['Views', 'Resource Kinds', 'Namespaces', 'Clusters', 'Actions']
 const PAGE = 8
@@ -83,12 +136,32 @@ function pillsToQuery(pills: SearchModifier[]): string {
   return pills.map((p) => `${p.key}:${p.value}`).join(' ')
 }
 
-// The standalone omnibar: a persistent top-center search box that IS the ⌘K
-// surface. Typing runs the live, GLOBAL resource search (/api/search) alongside
-// the command-palette items; modifiers (ns:, kind:, …) become removable pills.
-// Resources lead, commands follow. ⌘K focuses it.
+// The omnibar: a persistent search box that IS the ⌘K surface. Typing runs the
+// host's live resource search alongside its command-palette items; modifiers
+// (ns:, kind:, …) become removable pills. Resources lead, commands follow.
+//
+// Injectable: all data — search, commands, recents, modifier options — flows in
+// via props, so Radar standalone (cluster /api/search) and Radar Hub (fleet
+// search) share the same UX. ⌘K focus is wired by the host.
 export const Omnibar = forwardRef<OmnibarHandle, OmnibarProps>(function Omnibar(
-  { onOpenResource, ...callbacks },
+  {
+    onOpenResource,
+    commandItems,
+    onQueryChange,
+    searchData,
+    isFetching = false,
+    isError = false,
+    isPlaceholderData = false,
+    modifierOptions,
+    seedNamespaces,
+    loadRecents,
+    recordRecent,
+    onViewAllResults,
+    launcherShowsViews = true,
+    placeholder = 'Search resources & commands…',
+    size = 'default',
+    autoFocus = false,
+  },
   ref,
 ) {
   const [text, setText] = useState('')
@@ -102,67 +175,59 @@ export const Omnibar = forwardRef<OmnibarHandle, OmnibarProps>(function Omnibar(
   // The dropdown is portaled to <body> (so the header's stacking context can't
   // trap the dim overlay). `centerX` aligns the panel under the input; `top` is
   // the HEADER's bottom (not the input's) so the dim starts cleanly below the
-  // whole top bar — the input is shorter than the bar, so anchoring to it would
-  // slice the dim through the taller right-side controls.
-  const [anchor, setAnchor] = useState<{ centerX: number; top: number } | null>(null)
+  // whole top bar.
+  const [anchor, setAnchor] = useState<{ centerX: number; top: number; width: number } | null>(null)
 
   useImperativeHandle(ref, () => ({ focus: () => { inputRef.current?.focus(); inputRef.current?.select() } }), [])
 
-  const { data: nsScope } = useNamespaceScope()
-  const { data: apiResources } = useAPIResources()
-  const { data: contexts } = useContexts()
-  // Recents are partitioned by the current cluster so a context switch never
-  // surfaces (or opens) the previous cluster's resources.
-  const contextKey = useMemo(() => contexts?.find((c) => c.isCurrent)?.name ?? '', [contexts])
-  // ns + kind are the bounded, knowable modifier value sets worth autocompleting.
-  const modifierOptions = useMemo(() => ({
-    ns: nsScope?.accessibleNamespaces ?? [],
-    kind: apiResources ? [...new Set(apiResources.filter((r) => r.verbs?.includes('list')).map((r) => r.kind))].sort() : [],
-  }), [nsScope, apiResources])
+  // Hero autofocus parks the cursor in the field on mount (Home's primary
+  // action) but must NOT pop the dropdown — landing on the page shouldn't dim
+  // it behind a command palette. Suppress exactly the programmatic focus; a
+  // later user focus opens normally.
+  const skipFocusOpen = useRef(false)
+  useEffect(() => { if (autoFocus) { skipFocusOpen.current = true; inputRef.current?.focus() } }, [autoFocus])
 
   // Reflect the current view scope as an editable `ns:` pill on open, so a
   // deliberately broad ⌘K search shows (and lets you remove) the namespace it's
-  // narrowed to instead of silently scoping. Seeded once per open, only from a
-  // truly empty launcher state.
-  const actives = nsScope?.actives
+  // narrowed to. Seeded once per open, only from a truly empty launcher state.
   const seededRef = useRef(false)
   useEffect(() => {
     if (!open) { seededRef.current = false; return }
-    if (seededRef.current || actives === undefined) return
+    if (seededRef.current || seedNamespaces === undefined) return
     seededRef.current = true
-    if (pills.length === 0 && text === '' && actives.length > 0) {
-      setPills(actives.map((ns) => ({ key: 'ns', value: ns })))
+    if (pills.length === 0 && text === '' && seedNamespaces.length > 0) {
+      setPills(seedNamespaces.map((ns) => ({ key: 'ns', value: ns })))
     }
-  }, [open, actives, pills.length, text])
+  }, [open, seedNamespaces, pills.length, text])
 
   const freeText = text.trim()
   const queryString = useMemo(() => [pillsToQuery(pills), freeText].filter(Boolean).join(' '), [pills, freeText])
   const searchActive = queryString.length >= 2
-  // Small debounce: /api/search is a local in-memory index, so this exists only
-  // to coalesce fast keystrokes (less list reshuffle), not to cut network cost —
-  // kept under the ~100-150ms "feels instant" threshold. keepPreviousData +
-  // AbortSignal (see useSearch) handle the smoothness; commands aren't debounced.
+  // Small debounce: coalesce fast keystrokes (less list reshuffle). The host's
+  // search hook handles smoothness (keepPreviousData + AbortSignal).
   const debounced = useDebounced(queryString, 120)
-  // globalNs: ⌘K searches the user's full RBAC ceiling; scope comes only from
-  // `ns:` pills, never the silent view filter.
-  const { data: searchData, isFetching, isPlaceholderData, isError } = useSearch(debounced, { enabled: open, globalNs: true })
 
-  const commandItems = useCommandItems(callbacks)
+  // Tell the host which (debounced) query to search, and whether the surface is
+  // open (so it can gate the request).
+  useEffect(() => { onQueryChange?.(debounced, open) }, [debounced, open, onQueryChange])
 
   // Commands score against the FREE text only — modifiers live in pills, so the
-  // launcher never sees "ns:" polluting a "go to topology" match. Empty + no
-  // pills → Views + Actions (launcher default); with pills but no text the user
-  // is browsing a scope, so suppress the command default.
+  // launcher never sees "ns:" polluting a "go to topology" match. With pills but
+  // no text the user is browsing a scope, so suppress the command default. Empty
+  // + no pills → the launcher default: Views + Actions, or (when the host opts
+  // into a lean launcher) Actions only, so recents/search lead and the views
+  // surface on type instead of walling the dropdown.
   const scoredCommands = useMemo(() => {
     if (!freeText) {
-      return pills.length ? [] : commandItems.filter((i) => i.category === 'Views' || i.category === 'Actions').map((item) => ({ item, score: 1 }))
+      if (pills.length) return []
+      const cats = launcherShowsViews ? ['Views', 'Actions'] : ['Actions']
+      return commandItems.filter((i) => cats.includes(i.category)).map((item) => ({ item, score: 1 }))
     }
     return commandItems.map((item) => ({ item, score: bestScore(item, freeText) })).filter((x) => x.score > 0).sort((a, b) => b.score - a.score)
-  }, [commandItems, freeText, pills.length])
+  }, [commandItems, freeText, pills.length, launcherShowsViews])
 
   // Kinds whose NAME strongly matches (exact 150 / prefix 100) lead ABOVE the
-  // resource instances: "⌘K → deployment → Deployments list" is a navigation
-  // flow the instance hits otherwise bury.
+  // resource instances.
   const leadingKinds = useMemo<CommandItem[]>(
     () => (freeText.length < 2 ? [] : scoredCommands.filter((x) => x.item.category === 'Resource Kinds' && x.score >= STRONG_KIND).slice(0, 5).map((x) => x.item)),
     [scoredCommands, freeText],
@@ -171,56 +236,79 @@ export const Omnibar = forwardRef<OmnibarHandle, OmnibarProps>(function Omnibar(
 
   const resourceRows = useMemo<Row[]>(() => {
     const hits = searchData?.hits ?? []
-    return hits.map((hit) => ({ id: `res:${hit.kind}:${hit.group || ''}:${hit.namespace || ''}:${hit.name}`, kind: 'resource' as const, hit }))
+    return hits.map((hit) => ({ id: `res:${hit.cluster || ''}:${hit.kind}:${hit.group || ''}:${hit.namespace || ''}:${hit.name}`, kind: 'resource' as const, hit }))
   }, [searchData])
 
-  // Launcher recents: only in the truly-empty state (no text, no pills). Read
-  // fresh from localStorage each open.
+  // Launcher recents: only in the truly-empty state (no text, no pills).
   const recentRows = useMemo<Row[]>(() => {
-    if (!open || freeText || pills.length > 0) return []
-    return loadRecentResources(contextKey).map((r) => ({
-      id: `recent:${r.kind}:${r.group || ''}:${r.namespace || ''}:${r.name}`,
+    if (!open || freeText || pills.length > 0 || !loadRecents) return []
+    return loadRecents().map((r) => ({
+      id: `recent:${r.cluster || ''}:${r.kind}:${r.group || ''}:${r.namespace || ''}:${r.name}`,
       kind: 'resource' as const,
       recent: true,
-      hit: { score: 0, kind: r.kind, group: r.group, namespace: r.namespace, name: r.name } as SearchHit,
+      hit: { score: 0, kind: r.kind, group: r.group, namespace: r.namespace, name: r.name, cluster: r.cluster, clusterName: r.clusterName } as SearchHit,
     }))
-  }, [open, freeText, pills.length, contextKey])
+  }, [open, freeText, pills.length, loadRecents])
 
   // Remaining matched commands (leading kinds removed so they don't repeat),
-  // grouped by their real category in a fixed order.
+  // grouped by their real category in a fixed order. The empty launcher IS the
+  // command menu, so show it in full; while searching, cap so resource hits stay
+  // prominent.
   const commandGroups = useMemo(() => {
-    const rest = scoredCommands.filter((x) => !leadingIds.has(x.item.id)).slice(0, 8).map((x) => x.item)
+    const launcher = !freeText && pills.length === 0
+    const filtered = scoredCommands.filter((x) => !leadingIds.has(x.item.id))
+    const rest = (launcher ? filtered : filtered.slice(0, 8)).map((x) => x.item)
     const byCat = new Map<string, CommandItem[]>()
     for (const c of rest) { const l = byCat.get(c.category) ?? []; l.push(c); byCat.set(c.category, l) }
-    return COMMAND_CATEGORY_ORDER.filter((cat) => byCat.has(cat)).map((cat) => ({ category: cat, items: byCat.get(cat)! }))
-  }, [scoredCommands, leadingIds])
+    // `CommandItem.category` is an open string, so a host can use one we don't
+    // rank — render those AFTER the known order rather than silently dropping
+    // their commands.
+    const known = COMMAND_CATEGORY_ORDER.filter((cat) => byCat.has(cat))
+    const extra = [...byCat.keys()].filter((cat) => !COMMAND_CATEGORY_ORDER.includes(cat))
+    return [...known, ...extra].map((cat) => ({ category: cat, items: byCat.get(cat)! }))
+  }, [scoredCommands, leadingIds, freeText, pills.length])
 
   const toCmdRow = (c: CommandItem): Row => ({ id: `cmd:${c.id}`, kind: 'command', command: c })
 
-  // Free-text tokens for highlighting command labels (commands are scored
-  // client-side, so there's no server `matched`).
   const queryTokens = useMemo(() => freeText.split(/\s+/).filter(Boolean), [freeText])
 
-  // Ordered, id-stable list (render order == keyboard model): recents (launcher
-  // only), then leading kinds, then resources (when searchActive), then commands.
+  // Ordered, id-stable list (render order == keyboard model).
   const rows = useMemo<Row[]>(() => {
     const cmds: Row[] = commandGroups.flatMap((g) => g.items.map(toCmdRow))
     if (!freeText && pills.length === 0) return [...recentRows, ...cmds]
-    return [...leadingKinds.map(toCmdRow), ...(searchActive ? resourceRows : []), ...cmds]
+    const out: Row[] = [...leadingKinds.map(toCmdRow), ...(searchActive ? resourceRows : []), ...cmds]
+    // "See all results" tails the list when the host wired a full-search surface
+    // and there's something to expand to.
+    if (onViewAllResults && searchActive && resourceRows.length > 0) {
+      out.push({ id: 'view-all', kind: 'viewAll', query: queryString, count: searchData?.total_matched ?? resourceRows.length })
+    }
+    return out
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [recentRows, leadingKinds, resourceRows, commandGroups, freeText, pills.length, searchActive])
+  }, [recentRows, leadingKinds, resourceRows, commandGroups, freeText, pills.length, searchActive, onViewAllResults, queryString, searchData])
+  const viewAllRow = rows.find((r): r is Extract<Row, { kind: 'viewAll' }> => r.kind === 'viewAll')
 
   // Selection tracked by stable id (not array index) so Enter can never fire a
   // stale row when the set shifts. Auto-follows the TOP result until the user
   // arrow-keys; a new query re-enables auto-follow.
+  // When the host wires a search page (onViewAllResults), Enter on an
+  // un-touched query goes THERE with the query rather than firing the top hit —
+  // so we never pre-select a row (the user opts into a specific result by
+  // arrowing/hovering). Without a search page (OSS), keep auto-follow-top so
+  // Enter still opens the best match.
+  const submitToSearch = !!onViewAllResults
   const [selectedId, setSelectedId] = useState<string | null>(null)
   const userMovedRef = useRef(false)
   useEffect(() => { userMovedRef.current = false }, [queryString])
   const rowsKey = rows.map((r) => r.id).join('|')
   useEffect(() => {
+    // Only suppress the pre-selection while actively SEARCHING (so Enter goes to
+    // the search page, not a maybe-wrong top hit). In the empty launcher there's
+    // no search to defer to, so auto-select the first row — otherwise Enter is a
+    // no-op while the footer still reads "open".
+    const dflt = submitToSearch && searchActive ? null : (rows[0]?.id ?? null)
     setSelectedId((cur) => {
-      if (!userMovedRef.current) return rows[0]?.id ?? null
-      return cur && rows.some((r) => r.id === cur) ? cur : rows[0]?.id ?? null
+      if (!userMovedRef.current) return dflt
+      return cur && rows.some((r) => r.id === cur) ? cur : dflt
     })
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [rowsKey])
@@ -230,8 +318,7 @@ export const Omnibar = forwardRef<OmnibarHandle, OmnibarProps>(function Omnibar(
     setSelectedId(rows[Math.min(Math.max(selectedIndex + delta, 0), rows.length - 1)]?.id ?? null)
   }
   const selectRow = (id: string) => { userMovedRef.current = true; setSelectedId(id) }
-  // Page by a full screenful of visible rows (minus one for context overlap),
-  // measured from the scroll container — a fixed count feels short on tall lists.
+  // Page by a full screenful of visible rows (minus one for context overlap).
   const pageStep = () => {
     const list = listRef.current
     const rowH = (list?.querySelector('button') as HTMLElement | null)?.offsetHeight
@@ -242,51 +329,53 @@ export const Omnibar = forwardRef<OmnibarHandle, OmnibarProps>(function Omnibar(
   const execute = useCallback((row: Row) => {
     if (row.kind === 'command') {
       row.command.action()
+    } else if (row.kind === 'viewAll') {
+      onViewAllResults?.(row.query)
     } else {
       const h = row.hit
-      recordRecentResource({ kind: h.kind, group: h.group, namespace: h.namespace, name: h.name }, contextKey)
+      recordRecent?.({ kind: h.kind, group: h.group, namespace: h.namespace, name: h.name, cluster: h.cluster, clusterName: h.clusterName })
       onOpenResource(h)
     }
     setOpen(false)
     setText('')
     setPills([])
     inputRef.current?.blur()
-  }, [onOpenResource, contextKey])
+  }, [onOpenResource, recordRecent, onViewAllResults])
 
   // The resources shown don't (yet) belong to the current query: the debounce
-  // hasn't fired, the data is React Query placeholder from a prior query, or
-  // results for this query haven't landed. Swallow Enter so it can't open a
-  // stale hit or a command standing in for an imminent resource.
+  // hasn't fired, the data is React Query placeholder, or results haven't landed.
   const resourcesStale = searchActive && (debounced !== queryString || isPlaceholderData || (resourceRows.length === 0 && isFetching))
 
-  // Forwarded from SearchPillInput for keys it doesn't consume (it owns Space →
-  // pill, Backspace → pop pill, and suggestion nav).
   const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
     if (e.key === 'Escape') { e.preventDefault(); setOpen(false); inputRef.current?.blur(); return }
     if (e.key === 'ArrowDown') { e.preventDefault(); moveSelection(1) }
     else if (e.key === 'ArrowUp') { e.preventDefault(); moveSelection(-1) }
     else if (e.key === 'PageDown') { e.preventDefault(); moveSelection(pageStep()) }
     else if (e.key === 'PageUp') { e.preventDefault(); moveSelection(-pageStep()) }
-    // Home/End deliberately left native so they move the text caret, not the list.
     else if (e.key === 'Enter') {
       e.preventDefault()
       const row = rows[selectedIndex]
-      if (!row) return
-      // Block Enter only for a stale RESOURCE row (could open a hidden/stale
-      // hit); commands and ready resources fire immediately.
-      if (row.kind === 'resource' && resourcesStale) return
-      execute(row)
+      if (row) {
+        if (row.kind === 'resource' && resourcesStale) return
+        execute(row)
+        return
+      }
+      // No row chosen: submit the query to the full search page (the default
+      // for a host that wired one). viewAllRow carries the count when results
+      // are in; fall back to the raw query while they're still loading.
+      if (submitToSearch && searchActive) {
+        if (viewAllRow) execute(viewAllRow)
+        else { onViewAllResults?.(queryString); setOpen(false); setText(''); setPills([]); inputRef.current?.blur() }
+      }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [rows, selectedIndex, execute, resourcesStale])
+  }, [rows, selectedIndex, execute, resourcesStale, submitToSearch, searchActive, viewAllRow, onViewAllResults, queryString])
 
-  // Keep the selected row in view.
   useEffect(() => {
     listRef.current?.querySelector('[data-selected="true"]')?.scrollIntoView({ block: 'nearest' })
   }, [selectedId])
 
-  // Close on outside click — the panel is portaled out of the container, so it
-  // must be excluded explicitly or clicking a row would count as "outside".
+  // Close on outside click — the panel is portaled out of the container.
   useEffect(() => {
     if (!open) return
     const onDown = (e: MouseEvent) => {
@@ -297,8 +386,7 @@ export const Omnibar = forwardRef<OmnibarHandle, OmnibarProps>(function Omnibar(
     return () => document.removeEventListener('mousedown', onDown)
   }, [open])
 
-  // Track the input's position so the portaled panel stays anchored under it
-  // through scroll / resize / layout shifts.
+  // Track the input's position so the portaled panel stays anchored under it.
   useEffect(() => {
     if (!open) { setAnchor(null); return }
     const update = () => {
@@ -306,7 +394,7 @@ export const Omnibar = forwardRef<OmnibarHandle, OmnibarProps>(function Omnibar(
       if (!el) return
       const r = el.getBoundingClientRect()
       const header = el.closest('header')
-      setAnchor({ centerX: r.left + r.width / 2, top: header ? header.getBoundingClientRect().bottom : r.bottom })
+      setAnchor({ centerX: r.left + r.width / 2, top: header ? header.getBoundingClientRect().bottom : r.bottom, width: r.width })
     }
     update()
     window.addEventListener('resize', update)
@@ -322,25 +410,37 @@ export const Omnibar = forwardRef<OmnibarHandle, OmnibarProps>(function Omnibar(
 
   const clearNsPills = () => { setPills((prev) => prev.filter((p) => p.key !== 'ns')); inputRef.current?.focus() }
 
+  const hero = size === 'hero'
+
   return (
-    <div ref={containerRef} className="relative w-full max-w-xl">
+    <div
+      ref={containerRef}
+      className={clsx('relative w-full', hero ? 'max-w-3xl' : 'max-w-xl', 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="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"
+        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={() => setOpen(true)}
+        onFocus={() => { if (skipFocusOpen.current) { skipFocusOpen.current = false; return } setOpen(true) }}
         onSuggestingChange={setSuggesting}
         modifierOptions={modifierOptions}
-        placeholder="Search resources & commands…"
+        placeholder={placeholder}
         aria-label="Search resources and commands"
         inputRef={inputRef}
-        leftSlot={<Search className="w-3.5 h-3.5 shrink-0 text-theme-text-tertiary" />}
+        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 />
-            {!text && pills.length === 0 && (
+            {!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>
@@ -351,24 +451,26 @@ export const Omnibar = forwardRef<OmnibarHandle, OmnibarProps>(function Omnibar(
 
       {open && anchor && (dropdownOpen || suggesting) && createPortal(
         <>
-          {/* Dim + blur the busy dashboard behind so results read as a focused
-              search surface (Spotlight/Linear pattern), not a weak float. Starts
-              at the header's bottom edge so the search box + top bar stay crisp.
-              Tied to `open`, NOT the results panel, so completing a modifier (the
-              panel briefly yields to the autocomplete) doesn't strobe the dim. */}
+          {/* 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-[120] bg-black/25 dark:bg-black/55 backdrop-blur-[2px]"
-            style={{ top: anchor.top }}
+            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: 640, maxWidth: 'calc(100vw - 2rem)' }}
-            className="z-[121] dialog shadow-theme-lg overflow-hidden"
+            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"
           >
           <div ref={listRef} className="max-h-[60vh] overflow-y-auto py-1">
-            {/* Recently viewed — launcher state only. */}
             {recentRows.length > 0 && (
               <div>
                 <div className="px-3 py-1 text-[10px] font-semibold uppercase tracking-wider text-theme-text-tertiary">Recently viewed</div>
@@ -378,8 +480,6 @@ export const Omnibar = forwardRef<OmnibarHandle, OmnibarProps>(function Omnibar(
               </div>
             )}
 
-            {/* Leading kinds — strong kind-name matches lead so ⌘K navigation
-                to a kind isn't buried under instance hits. */}
             {leadingKinds.length > 0 && (
               <div>
                 <div className="px-3 py-1 text-[10px] font-semibold uppercase tracking-wider text-theme-text-tertiary">Resource Kinds</div>
@@ -390,7 +490,6 @@ export const Omnibar = forwardRef<OmnibarHandle, OmnibarProps>(function Omnibar(
               </div>
             )}
 
-            {/* Resources section */}
             {searchActive && (
               <>
                 <div className="flex items-center justify-between px-3 py-1 text-[10px] font-semibold uppercase tracking-wider text-theme-text-tertiary">
@@ -413,16 +512,12 @@ export const Omnibar = forwardRef<OmnibarHandle, OmnibarProps>(function Omnibar(
                   </div>
                 ) : (
                   resourceRows.map((row) => row.kind === 'resource' && (
-                    // Mirror the Enter guard: ignore clicks on stale rows (prior
-                    // query's results during debounce/placeholder) so a click can't
-                    // open/record the wrong resource. Dim them so it reads as pending.
                     <ResourceRow key={row.id} hit={row.hit} stale={resourcesStale} selected={row.id === selectedId} onSelect={() => selectRow(row.id)} onActivate={() => { if (!resourcesStale) execute(row) }} />
                   ))
                 )}
               </>
             )}
 
-            {/* Command groups, each under its real category header. */}
             {commandGroups.map((group) => (
               <div key={group.category}>
                 <div className="px-3 py-1 mt-1 text-[10px] font-semibold uppercase tracking-wider text-theme-text-tertiary">{group.category}</div>
@@ -432,9 +527,25 @@ export const Omnibar = forwardRef<OmnibarHandle, OmnibarProps>(function Omnibar(
                 })}
               </div>
             ))}
+
+            {viewAllRow && (
+              <button
+                type="button"
+                data-selected={viewAllRow.id === selectedId}
+                onMouseEnter={() => selectRow(viewAllRow.id)}
+                onMouseDown={(e) => { e.preventDefault(); execute(viewAllRow) }}
+                className={clsx('w-full flex items-center gap-2.5 px-3 py-1.5 mt-1 text-left border-t border-theme-border transition-colors', viewAllRow.id === selectedId ? 'selection' : 'hover:bg-theme-elevated/40')}
+              >
+                <Search className="w-4 h-4 shrink-0 text-theme-text-tertiary" />
+                <span className="text-sm text-[var(--color-brand)]">See all {viewAllRow.count} result{viewAllRow.count === 1 ? '' : 's'}</span>
+                <CornerDownLeft className="w-3 h-3 ml-auto shrink-0 text-theme-text-tertiary" />
+              </button>
+            )}
           </div>
           <div className="flex items-center gap-3 px-3 py-1.5 border-t border-theme-border text-[11px] text-theme-text-tertiary">
-            <span className="flex items-center gap-1"><CornerDownLeft className="w-3 h-3" /> open</span>
+            <span className="flex items-center gap-1">
+              <CornerDownLeft className="w-3 h-3" /> {submitToSearch && searchActive && selectedIndex < 0 ? 'search all' : 'open'}
+            </span>
             <span>↑↓ navigate</span>
             <span>⇞⇟ page</span>
             <span>esc close</span>
@@ -452,8 +563,6 @@ function ResourceRow({ hit, selected, stale, onSelect, onActivate }: { hit: Sear
   const Icon = getResourceIcon(hit.kind)
   const dot = healthDot(hit.summaryContext?.health)
   const issues = hit.summaryContext?.issueCount ?? 0
-  // Lead is a name match; flag content-only matches so a name search isn't
-  // silently padded with body hits.
   const contentOnly = !!hit.matched?.length && hit.matched.every((m) => m.site.startsWith('content:'))
   return (
     <button
@@ -468,6 +577,7 @@ function ResourceRow({ hit, selected, stale, onSelect, onActivate }: { hit: Sear
       <span className="shrink-0 max-w-[45%] truncate text-xs text-theme-text-tertiary">
         {highlight(hit.kind, tokensForSite(hit.matched, 'kind'))}
         {hit.namespace ? <> · {highlight(hit.namespace, tokensForSite(hit.matched, 'namespace'))}</> : ''}
+        {hit.clusterName ? <> · <span className="text-theme-text-secondary">{hit.clusterName}</span></> : ''}
       </span>
       {contentOnly && <span className="shrink-0 text-[10px] text-theme-text-tertiary italic">in spec</span>}
       {issues > 0 && <span className="ml-auto shrink-0 text-[10px] font-medium text-amber-600 dark:text-amber-400">{issues} issue{issues === 1 ? '' : 's'}</span>}

package/src/components/ui/RadarOmnibar.tsx

@@ -0,0 +1,52 @@
+import { forwardRef, useMemo, useState } from 'react'
+import { Omnibar, type OmnibarHandle } from './Omnibar'
+import { useSearch, useNamespaceScope, useContexts, type SearchHit } from '../../api/client'
+import { useAPIResources } from '../../api/apiResources'
+import { loadRecentResources, recordRecentResource } from '../../hooks/useRecentResources'
+import { useCommandItems, type CommandItemCallbacks } from './command-items'
+
+interface RadarOmnibarProps extends CommandItemCallbacks {
+  onOpenResource: (hit: SearchHit) => void
+}
+
+// Radar standalone's omnibar: wires the injectable Omnibar to Radar's own hooks
+// (cluster /api/search, kubeconfig contexts, API discovery, recents). Radar Hub
+// provides a parallel wrapper over fleet search.
+export const RadarOmnibar = forwardRef<OmnibarHandle, RadarOmnibarProps>(function RadarOmnibar(
+  { onOpenResource, ...callbacks },
+  ref,
+) {
+  // The omnibar debounces internally and emits the query to search here.
+  const [query, setQuery] = useState('')
+  const [open, setOpen] = useState(false)
+
+  const { data: searchData, isFetching, isPlaceholderData, isError } = useSearch(query, { enabled: open, globalNs: true })
+  const { data: nsScope } = useNamespaceScope()
+  const { data: apiResources } = useAPIResources()
+  const { data: contexts } = useContexts()
+  const contextKey = useMemo(() => contexts?.find((c) => c.isCurrent)?.name ?? '', [contexts])
+
+  const modifierOptions = useMemo(() => ({
+    ns: nsScope?.accessibleNamespaces ?? [],
+    kind: apiResources ? [...new Set(apiResources.filter((r) => r.verbs?.includes('list')).map((r) => r.kind))].sort() : [],
+  }), [nsScope, apiResources])
+
+  const commandItems = useCommandItems(callbacks)
+
+  return (
+    <Omnibar
+      ref={ref}
+      onOpenResource={onOpenResource}
+      commandItems={commandItems}
+      onQueryChange={(q, o) => { setQuery(q); setOpen(o) }}
+      searchData={searchData}
+      isFetching={isFetching}
+      isError={isError}
+      isPlaceholderData={isPlaceholderData}
+      modifierOptions={modifierOptions}
+      seedNamespaces={nsScope?.actives}
+      loadRecents={() => loadRecentResources(contextKey)}
+      recordRecent={(r) => recordRecentResource(r, contextKey)}
+    />
+  )
+})