@skyhook-io/radar-app 1.5.0 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/radar-app",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "Radar's full web UI as a reusable React component. Used by Radar's own binary and by external consumers like Radar Cloud.",
   "repository": {
     "type": "git",
@@ -54,9 +54,9 @@
     "@playwright/test": "^1.59.1",
     "@skyhook-io/k8s-ui": "*",
     "@tailwindcss/typography": "^0.5.20",
-    "@tailwindcss/vite": "^4.3.0",
+    "@tailwindcss/vite": "^4.3.1",
     "@tanstack/react-query": "^5.100.14",
-    "@types/node": "^25.7.0",
+    "@types/node": "^25.9.3",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.2",
@@ -70,7 +70,7 @@
     "react-dom": "^19.2.7",
     "react-router-dom": "^7.17.0",
     "tailwind-merge": "^3.6.0",
-    "tailwindcss": "^4.2.4",
+    "tailwindcss": "^4.3.1",
     "typescript": "^6.0.2",
     "vite": "^8.0.12"
   },

package/src/App.tsx

@@ -7,6 +7,8 @@ import { useNavigate, useLocation, useSearchParams, useNavigationType, Navigatio
 import { HomeView } from './components/home/HomeView'
 import { DebugOverlay } from './components/DebugOverlay'
 import { TopologyGraph, TopologySearch, TopologyFilterSidebar, TopologyControls, gitOpsRouteForKind, gitOpsRouteForResource } from '@skyhook-io/k8s-ui'
+import { initNavigationMap } from '@skyhook-io/k8s-ui/utils/navigation'
+import { useAPIResources } from './api/apiResources'
 import { TimelineView } from './components/timeline/TimelineView'
 import { ResourcesView } from './components/resources/ResourcesView'
 import { serializeColumnFilters } from './components/resources/resource-utils'
@@ -27,6 +29,9 @@ import { DURATION_DOCK } from '@skyhook-io/k8s-ui/utils/animation'
 import { ContextSwitcher } from './components/ContextSwitcher'
 import { NamespaceSwitcher, type NamespaceSwitcherHandle } from './components/NamespaceSwitcher'
 import { useNavCustomization } from './context/NavCustomization'
+import { PrimaryNavRail } from './components/nav/PrimaryNavRail'
+import { useNavRailPinned } from './hooks/useNavRailPinned'
+import { useMediaQuery } from './hooks/useMediaQuery'
 import { ContextSwitchProvider, useContextSwitch } from './context/ContextSwitchContext'
 import { ConnectionProvider, useConnection } from './context/ConnectionContext'
 import { ConnectionErrorView } from './components/ConnectionErrorView'
@@ -43,14 +48,15 @@ import { routePath, apiUrl, getAuthHeaders, getCredentialsMode } from './api/con
 import { KeyboardShortcutProvider, useRegisterShortcut, useRegisterShortcuts } from './hooks/useKeyboardShortcuts'
 import { useAnimatedUnmount } from './hooks/useAnimatedUnmount'
 import radarLoadingIcon from '@skyhook-io/k8s-ui/assets/radar/radar-icon-loading.svg'
-import { RefreshCw, Network, List, Clock, Package, Sun, Moon, Activity, Home, Star, Search, Bug, Settings, SquareTerminal, ShieldCheck, GitBranch } from 'lucide-react'
+import { RefreshCw, Network, List, Clock, Package, Sun, Moon, Activity, Home, Star, Search, Bug, SquareTerminal, ShieldCheck, GitBranch, HelpCircle } from 'lucide-react'
 import { useTheme } from './context/ThemeContext'
 import { Tooltip } from './components/ui/Tooltip'
 import { LargeClusterNamespacePicker } from './components/shared/LargeClusterNamespacePicker'
 import { SettingsDialog } from './components/settings/SettingsDialog'
 import { MyPermissionsDialog } from './components/settings/MyPermissionsDialog'
 import type { TopologyNode, GroupingMode, MainView, SelectedResource, SelectedHelmRelease, NodeKind, TopologyMode, Topology, K8sEvent } from './types'
-import { kindToPlural, openExternal, apiVersionToGroup, buildWorkloadPath } from './utils/navigation'
+import { kindToPlural, openExternal, apiVersionToGroup, buildWorkloadPath, searchHitToSelectedResource } from './utils/navigation'
+import { Omnibar, type OmnibarHandle } from './components/ui/Omnibar'
 import type { ContextSwitcherHandle } from './components/ContextSwitcher'
 
 // All possible node kinds (core + GitOps)
@@ -94,7 +100,7 @@ const FLEET_MODE_KINDS = new Set<NodeKind>([
 
 // Convert API resource name back to topology node ID prefix
 // Extended MainView type that includes traffic and cost
-type ExtendedMainView = MainView | 'traffic' | 'cost' | 'workload' | 'audit' | 'gitops' | 'compare' | 'issues' | 'applications'
+type ExtendedMainView = MainView | 'traffic' | 'cost' | 'workload' | 'checks' | 'gitops' | 'compare' | 'issues' | 'applications'
 
 // Extract view from URL path
 function getViewFromPath(pathname: string): ExtendedMainView {
@@ -107,7 +113,7 @@ function getViewFromPath(pathname: string): ExtendedMainView {
   if (path === 'traffic') return 'traffic'
   if (path === 'cost') return 'cost'
   if (path === 'workload') return 'workload'
-  if (path === 'audit') return 'audit'
+  if (path === 'checks' || path === 'audit') return 'checks'  // /audit = legacy → checks
   if (path === 'gitops') return 'gitops'
   if (path === 'applications') return 'applications'
   if (path === 'compare') return 'compare'
@@ -171,6 +177,24 @@ function AppInner() {
   const capabilities = useCapabilitiesContext()
   const openLocalTerminal = useOpenLocalTerminal()
   const navCustomization = useNavCustomization()
+  const { pinned: navRailPinned, togglePinned: toggleNavRailPinned } = useNavRailPinned()
+  // Standalone Radar gets the left nav rail; embedded hosts (Radar Hub) own
+  // the left chrome via their own fleet rail and keep Radar's top-bar pills.
+  const showNavRail = !navCustomization.embedded
+  // Chromeless embed: the host (Radar Hub) owns ALL chrome and drives view
+  // navigation + scope from its own UI, so Radar renders just the active view's
+  // content — no top bar, no view-switcher. Used for per-cluster views surfaced
+  // as native cloud destinations behind a cluster picker.
+  const chromeless = navCustomization.embedded === true && navCustomization.chrome === 'none'
+  // Force the slim rail on narrow windows: a pinned 176px rail needs viewport
+  // ≥976 to keep content above its ~800px floor (collapsed needs only ≥856).
+  // Below 976 we render collapsed regardless of the pin preference — a
+  // temporary responsive override that does NOT touch the persisted value, so
+  // the user's pinned state returns when they widen again. Fly-out labels cover
+  // the collapsed state, so the manual toggle is hidden here rather than left
+  // inert (expanding would just re-breach the floor).
+  const railForcedSlim = useMediaQuery('(max-width: 975px)')
+  const navRailEffectivePinned = navRailPinned && !railForcedSlim
 
   // Auth check — detect if auth is enabled but user is not authenticated
   const { data: authMe, isPending: authMePending } = useAuthMe()
@@ -262,7 +286,7 @@ function AppInner() {
   // unaffected and renders the in-app audit view as before.
   const clusterChecksHref = navCustomization.clusterChecksHref
   useEffect(() => {
-    if (clusterChecksHref && mainView === 'audit') {
+    if (clusterChecksHref && mainView === 'checks') {
       window.location.replace(clusterChecksHref())
     }
   }, [clusterChecksHref, mainView])
@@ -450,14 +474,38 @@ function AppInner() {
 
   // Refs for dropdown components to trigger them via shortcuts
   const namespaceSwitcherRef = useRef<NamespaceSwitcherHandle>(null)
+  const omnibarRef = useRef<OmnibarHandle>(null)
+
+  // Initialize the kind→plural discovery map app-wide (not just on ResourcesView
+  // mount) so the omnibar can open a CRD hit with an irregular plural from any
+  // view — kindToPlural would otherwise English-guess the route before a
+  // resources view has run n().
+  const { data: navApiResources } = useAPIResources()
+  useEffect(() => { if (navApiResources) initNavigationMap(navApiResources) }, [navApiResources])
   const contextSwitcherRef = useRef<ContextSwitcherHandle>(null)
 
   // View switching keyboard shortcuts
-  const views: ExtendedMainView[] = ['home', 'topology', 'resources', 'timeline', 'helm', 'gitops', 'applications', 'traffic', 'cost', 'audit']
+  // `g`+mnemonic sequences cover every view. Numeric 1–N can't: there are 11
+  // views and only 9 single digits, so `10`/`11` never match a keypress (a
+  // KeyboardEvent.key is one character). `g`-prefixed mnemonics scale, are the
+  // GitHub/Linear convention, and their second keys are all distinct (no clash
+  // with the scoped `g g` table shortcut). The letters are fixed regardless of
+  // position, so reordering the rail never changes a shortcut.
+  const VIEW_SHORTCUT_KEYS: Record<ExtendedMainView, string> = {
+    home: 'g h', resources: 'g r', issues: 'g i', topology: 'g t',
+    applications: 'g a', timeline: 'g l', traffic: 'g f', helm: 'g m',
+    gitops: 'g o', checks: 'g u', cost: 'g c',
+    // Non-rail views (reachable via deep links / actions, not the rail) get no
+    // dedicated mnemonic — listed for exhaustiveness so the type stays total.
+    workload: '', compare: '',
+  }
+  const views = Object.keys(VIEW_SHORTCUT_KEYS).filter(
+    (v): v is ExtendedMainView => VIEW_SHORTCUT_KEYS[v as ExtendedMainView] !== '',
+  )
   useRegisterShortcuts([
-    ...views.map((view, i) => ({
+    ...views.map((view) => ({
       id: `view-${view}`,
-      keys: String(i + 1),
+      keys: VIEW_SHORTCUT_KEYS[view],
       description: `Go to ${view.charAt(0).toUpperCase() + view.slice(1)}`,
       category: 'Navigation' as const,
       scope: 'global' as const,
@@ -498,11 +546,12 @@ function AppInner() {
     {
       id: 'command-palette',
       keys: 'Cmd+k',
-      description: 'Open command palette',
+      description: 'Search resources & commands',
       category: 'General' as const,
       scope: 'global' as const,
       allowInInputs: true,
-      handler: () => setShowCommandPalette(true),
+      // Standalone focuses the top-center omnibar; embedded opens the modal.
+      handler: () => { if (showNavRail) omnibarRef.current?.focus(); else setShowCommandPalette(true) },
     },
     {
       id: 'diagnostics',
@@ -513,6 +562,20 @@ function AppInner() {
       allowInInputs: true,
       handler: () => setShowDiagnostics(prev => !prev),
     },
+    // Settings exposes local-binary controls that don't apply to embedded hosts.
+    // Register the shortcut only when standalone (matching the gear button) —
+    // `enabled: false` would still list it in the `?` help overlay, which shows
+    // all registered shortcuts regardless of enabled state.
+    ...(showNavRail
+      ? [{
+          id: 'open-settings',
+          keys: 'g s',
+          description: 'Open settings',
+          category: 'General' as const,
+          scope: 'global' as const,
+          handler: () => setShowSettings(true),
+        }]
+      : []),
   ])
 
   // Separate registration for help-close — its `enabled` changes with showHelp,
@@ -1141,12 +1204,38 @@ function AppInner() {
 
   return (
     <PortForwardProvider>
-    <div className="relative flex flex-col h-screen bg-theme-base min-w-[800px]">
-      {/* Header */}
+    {/* Preserve the ~800px content floor: the rail is a fixed-width sibling, so
+        the outer minimum must include it (176px pinned / 56px collapsed) or the
+        content column (min-w-0, shrinkable) would fall below the old desktop
+        floor at small windows. Embedded mode has no rail → plain 800. */}
+    <div
+      className="relative flex h-screen bg-theme-base"
+      style={{ minWidth: 800 + (showNavRail ? (navRailEffectivePinned ? 176 : 56) : 0) }}
+    >
+      {showNavRail && (
+        <PrimaryNavRail
+          activeView={mainView}
+          onNavigate={setMainView}
+          pinned={navRailEffectivePinned}
+          onTogglePinned={toggleNavRailPinned}
+          showPinToggle={!railForcedSlim}
+          onOpenSettings={() => setShowSettings(true)}
+          accountSlot={<UserMenu variant="rail" pinned={navRailEffectivePinned} />}
+        />
+      )}
+      {/* `relative` makes this column the containing block for the absolute
+          overlays it hosts (BottomDock, expanded ResourceDetailDrawer) so they
+          span the content area AFTER the rail rather than the full viewport
+          under it. `fixed` splashes (connecting/switching) are unaffected. */}
+      <div className="relative flex flex-col flex-1 min-w-0 h-full">
+      {/* Header — suppressed in chromeless embed; the host owns the chrome. */}
+      {!chromeless && (
       <header className="relative z-50 flex items-center justify-between px-4 py-2 bg-theme-base/90 backdrop-blur-sm border-b border-theme-border/50">
         {/* Left: Logo + Cluster info */}
         <div className="flex items-center gap-4 shrink-0">
-          {navCustomization.brandSlot ?? <Logo />}
+          {/* Standalone rail owns the brand; only the embedded/pill layout
+              shows it in the header (host may override via brandSlot). */}
+          {navCustomization.brandSlot ?? (showNavRail ? null : <Logo />)}
 
           <div className="flex items-center gap-2">
             {navCustomization.contextSlot ?? <ContextSwitcher ref={contextSwitcherRef} />}
@@ -1200,7 +1289,10 @@ function AppInner() {
           </div>
         </div>
 
-        {/* Center: View tabs — absolute centered on wide, flows after left section on narrow */}
+        {/* Center: View tabs — embedded/pill layout only. Standalone Radar
+            navigates via the left rail (showNavRail), so the pill bar is
+            suppressed there to avoid a duplicate primary nav. */}
+        {!showNavRail && (
         <div className="md:absolute md:left-1/2 md:-translate-x-1/2 flex items-center gap-0.5 bg-theme-elevated/50 rounded-full p-1 ml-2 md:ml-0">
           {([
             { view: 'home' as const, icon: Home, label: 'Home' },
@@ -1217,7 +1309,7 @@ function AppInner() {
             // Cost is intentionally hidden from the pill bar for now — the view still
             // exists and is reachable via /cost, the Home dashboard card, and the
             // command palette (⌘K). Remove this comment to restore it.
-            { view: 'audit' as const, icon: ShieldCheck, label: 'Audit' },
+            { view: 'checks' as const, icon: ShieldCheck, label: 'Checks' },
           ] as const)
             // In Cloud, Checks is a fleet-scoped feature owned by the host's
             // left rail; the per-cluster view is just that fleet queue filtered
@@ -1227,7 +1319,7 @@ function AppInner() {
             // via the Home "Cluster Audit" card (→ /audit, redirected to the
             // scoped fleet Checks by the clusterChecksHref effect above), ⌘K,
             // and bookmarks. Standalone OSS keeps the Audit tab.
-            .filter(({ view }) => !(view === 'audit' && clusterChecksHref))
+            .filter(({ view }) => !(view === 'checks' && clusterChecksHref))
             .map(({ view, icon: Icon, label }) => (
             <Tooltip key={view} content={label} delay={100} position="bottom">
               <button
@@ -1254,6 +1346,30 @@ function AppInner() {
             </Tooltip>
           ))}
         </div>
+        )}
+
+        {/* Center: omnibar — standalone search + command surface (the ⌘K entry).
+            Fills the space the pill bar left; embedded keeps the pills + modal. */}
+        {showNavRail && (
+          <div className="hidden sm:flex flex-1 justify-center min-w-0 px-3">
+            <Omnibar
+              ref={omnibarRef}
+              onNavigateView={(view) => setMainView(view)}
+              onNavigateKind={(kind, group) => {
+                const params = new URLSearchParams(searchParams)
+                params.delete('kind')
+                if (group) params.set('apiGroup', group); else params.delete('apiGroup')
+                params.delete('resource')
+                navigate({ pathname: `/resources/${kind}`, search: params.toString() })
+              }}
+              onSwitchContext={(name) => switchContext.mutate({ name }, { onSettled: () => setNamespaces([]) })}
+              onSetNamespaces={(ns) => { setNamespaces(ns); setActiveNamespace.mutate({ namespaces: ns }) }}
+              onToggleTheme={toggleTheme}
+              onShowDiagnostics={() => setShowDiagnostics(true)}
+              onOpenResource={(hit) => navigateToResourceList(searchHitToSelectedResource(hit))}
+            />
+          </div>
+        )}
 
         {/* Right: Controls */}
         <div className="flex items-center gap-3 shrink-0">
@@ -1264,7 +1380,9 @@ function AppInner() {
           />
 
 
-          {/* Command palette trigger */}
+          {/* Command palette trigger — embedded only; standalone has the
+              top-center omnibar (which is the ⌘K surface). */}
+          {!showNavRail && (
           <button
             onClick={() => setShowCommandPalette(true)}
             className="hidden lg:flex items-center gap-2 h-7 px-2.5 rounded-md bg-theme-elevated hover:bg-theme-hover text-theme-text-secondary hover:text-theme-text-primary transition-colors"
@@ -1274,6 +1392,7 @@ function AppInner() {
               {typeof navigator !== 'undefined' && navigator.platform.includes('Mac') ? '⌘' : 'Ctrl+'}K
             </kbd>
           </button>
+          )}
 
           {/* GitHub star — hidden in embedded mode (not OSS-distribution chrome). */}
           {!navCustomization.embedded && (
@@ -1305,33 +1424,37 @@ function AppInner() {
             </div>
           )}
 
-          {/* Settings — hidden in embedded mode. The standalone dialog
-              exposes local-binary controls (kubeconfig paths, server port,
-              "open browser on start", "Stop and restart the radar command
-              to apply") that don't apply to a hosted user who doesn't SSH
-              into the cluster. The audit view still opens the dialog via
-              its "N namespaces hidden" link for the narrow audit-ignores
-              setting — that's a deliberate escape hatch, not a general
-              surface. */}
-          {!navCustomization.embedded && (
-            <button
-              onClick={() => setShowSettings(true)}
-              className="p-1.5 rounded-md bg-theme-elevated hover:bg-theme-hover text-theme-text-secondary hover:text-theme-text-primary transition-colors"
-              title="Settings"
-            >
-              <Settings className="w-4 h-4" />
-            </button>
+          {/* Help + Report-a-bug — standalone only (the left rail owns chrome;
+              embedded hosts provide their own help/support). These replace the
+              old floating bottom-right pair. Settings moved to the rail bottom. */}
+          {showNavRail && (
+            <>
+              <button
+                onClick={() => setShowHelp(true)}
+                className="p-1.5 rounded-md bg-theme-elevated hover:bg-theme-hover text-theme-text-secondary hover:text-theme-text-primary transition-colors"
+                title="Keyboard shortcuts (?)"
+              >
+                <HelpCircle className="w-4 h-4" />
+              </button>
+              <button
+                onClick={() => setShowDiagnostics(true)}
+                className="p-1.5 rounded-md bg-theme-elevated hover:bg-theme-hover text-theme-text-secondary hover:text-theme-text-primary transition-colors"
+                title="Report a bug / Diagnostics"
+              >
+                <Bug className="w-4 h-4" />
+              </button>
+            </>
           )}
 
-          {/* User menu (when auth enabled) — hidden in embedded mode;
-              host app typically provides its own via rightExtras. */}
-          {!navCustomization.embedded && <UserMenu />}
+          {/* Account moved to the rail bottom (standalone). Embedded never showed
+              Radar's UserMenu — the host provides its own via rightExtras. */}
 
           {/* Consumer-provided extras (e.g. Radar Hub's Install button +
               avatar menu) appended to the right of the action bar. */}
           {navCustomization.rightExtras}
         </div>
       </header>
+      )}
 
       {/* Auth barrier - show when auth is enabled but user is not authenticated */}
       {authMe?.authEnabled && !authMe?.username && authMe.authMode === 'proxy' && (
@@ -1684,16 +1807,15 @@ function AppInner() {
             fleet Checks queue (clusterChecksHref effect above) — render a brief
             splash instead of the single-cluster view while the cross-document
             nav lands. */}
-        {mainView === 'audit' && clusterChecksHref && (
+        {mainView === 'checks' && clusterChecksHref && (
           <div className="flex-1 flex flex-col items-center justify-center gap-3 bg-theme-base">
             <img src={radarLoadingIcon} alt="" aria-hidden className="w-11 h-11" />
             <p className="text-sm text-theme-text-secondary">Opening Checks…</p>
           </div>
         )}
-        {mainView === 'audit' && !clusterChecksHref && (
+        {mainView === 'checks' && !clusterChecksHref && (
           <AuditView
             namespaces={namespaces}
-            onBack={() => setMainView('home')}
             onNavigateToResource={navigateToResourceList}
           />
         )}
@@ -1705,7 +1827,6 @@ function AppInner() {
         {mainView === 'issues' && (
           <IssuesPane
             namespaces={namespaces}
-            onBack={() => setMainView('home')}
             onNavigateToResource={navigateFromIssue}
           />
         )}
@@ -1783,8 +1904,12 @@ function AppInner() {
       {/* Spacer for dock */}
       <DockSpacer />
 
-      {/* Floating action buttons — bottom-right, above dock */}
-      <FloatingButtons showHelp={showHelp} showCommandPalette={showCommandPalette} showDiagnostics={showDiagnostics} onHelp={() => setShowHelp(true)} onBugReport={() => setShowDiagnostics(true)} />
+      {/* Floating action buttons — embedded only, and not in chromeless (the
+          host owns help/diagnostics chrome). Standalone moved help + bug to
+          visible top-bar icons (the rail owns chrome). */}
+      {!showNavRail && !chromeless && (
+        <FloatingButtons showHelp={showHelp} showCommandPalette={showCommandPalette} showDiagnostics={showDiagnostics} onHelp={() => setShowHelp(true)} onBugReport={() => setShowDiagnostics(true)} />
+      )}
 
       {/* Keyboard shortcut help overlay */}
       {helpOverlay.shouldRender && <ShortcutHelpOverlay isOpen={helpOverlay.isOpen} onClose={() => setShowHelp(false)} currentView={mainView} />}
@@ -1841,6 +1966,7 @@ function AppInner() {
 
       {/* Debug overlay - only in dev mode */}
       {import.meta.env.DEV && <DebugOverlay />}
+      </div>
     </div>
     </PortForwardProvider>
   )

package/src/RadarApp.tsx

@@ -70,6 +70,13 @@ export interface RadarAppProps {
    * See ./context/NavCustomization for the slot shape.
    */
   navSlots?: NavCustomization;
+  /**
+   * Initial route for `router: 'memory'` (ignored for 'browser'). Lets a host
+   * deep-link a specific view (e.g. '/topology') without owning the URL bar —
+   * used with `navSlots.chrome: 'none'` to render a single per-cluster view
+   * chromeless under the host's own chrome (Radar Hub's per-cluster destinations).
+   */
+  initialPath?: string;
 }
 
 // Default QueryClient with the same shape Radar's standalone binary uses.
@@ -109,6 +116,7 @@ export function RadarApp({
   router = 'browser',
   queryClient,
   navSlots,
+  initialPath,
 }: RadarAppProps): React.ReactElement {
   // Apply runtime config during render so module-level singletons are set
   // before children construct URLs. getApiBase() / getAuthHeaders() /
@@ -136,7 +144,7 @@ export function RadarApp({
   );
 
   if (router === 'memory') {
-    return <MemoryRouter initialEntries={['/']}>{inner}</MemoryRouter>;
+    return <MemoryRouter initialEntries={[initialPath || '/']}>{inner}</MemoryRouter>;
   }
 
   return <BrowserRouter basename={basename || undefined}>{inner}</BrowserRouter>;

package/src/api/client.ts

@@ -90,8 +90,8 @@ export function isForbiddenError(error: unknown): boolean {
   return error instanceof ApiError && error.status === 403
 }
 
-export async function fetchJSON<T>(path: string): Promise<T> {
-  const response = await apiFetch(`${getApiBase()}${path}`)
+export async function fetchJSON<T>(path: string, signal?: AbortSignal): Promise<T> {
+  const response = await apiFetch(`${getApiBase()}${path}`, signal ? { signal } : undefined)
   if (!response.ok) {
     const errorData = await response.json().catch(() => ({ error: 'Unknown error' }))
     throw new ApiError(errorData.error || `HTTP ${response.status}`, response.status, errorData)
@@ -691,6 +691,68 @@ export interface RuntimeStats {
   dynamicInformers?: number
 }
 
+// ============================================================================
+// Resource search (GET /api/search) — the existing search engine, RBAC-filtered
+// and ranked server-side. Mirrors internal/search.Hit / .Result.
+// ============================================================================
+
+export interface SearchMatchedField {
+  token: string
+  /** "name" | "namespace" | "label:k" | "annotation:k" | "image" | "kind" | "content:path" */
+  site: string
+  score: number
+}
+
+export interface SearchSummaryContext {
+  health?: string
+  issueCount?: number
+  managedBy?: { kind?: string; name?: string } | null
+}
+
+export interface SearchHit {
+  score: number
+  kind: string
+  group?: string
+  namespace?: string
+  name: string
+  matched?: SearchMatchedField[]
+  summaryContext?: SearchSummaryContext
+}
+
+export interface SearchResult {
+  hits: SearchHit[]
+  total: number
+  searched: number
+  total_matched: number
+}
+
+const SEARCH_MIN_QUERY = 2
+
+// useSearch hits the resource-search engine. The caller supplies the (already
+// debounced) query; the hook is enabled only past the min length. include=none
+// keeps the per-hit payload identity-only; context=summary attaches
+// health/issueCount per hit (rich rows). React Query's AbortSignal cancels
+// overlapping scans on a new query. keepPreviousData avoids flicker while the
+// next query resolves.
+export function useSearch(query: string, opts?: { limit?: number; context?: 'summary' | 'none'; enabled?: boolean; globalNs?: boolean }) {
+  const trimmed = query.trim()
+  const enabled = (opts?.enabled ?? true) && trimmed.length >= SEARCH_MIN_QUERY
+  const limit = opts?.limit ?? 20
+  const context = opts?.context ?? 'summary'
+  // globalNs makes search ignore the per-user namespace-switcher pick and scan
+  // the user's full RBAC ceiling (scope then comes only from the query's `ns:`
+  // tokens). The omnibar opts in so ⌘K is a genuinely global lookup.
+  const globalNs = opts?.globalNs ?? false
+  return useQuery<SearchResult>({
+    queryKey: ['search', trimmed, limit, context, globalNs],
+    queryFn: ({ signal }) =>
+      fetchJSON<SearchResult>(`/search?q=${encodeURIComponent(trimmed)}&limit=${limit}&include=none&context=${context}${globalNs ? '&globalNs=1' : ''}`, signal),
+    enabled,
+    staleTime: 2000,
+    placeholderData: (prev) => prev, // keepPreviousData
+  })
+}
+
 export interface HealthResponse {
   status: string
   resourceCount: number
@@ -927,6 +989,7 @@ export function useResource<T>(kind: string, namespace: string, name: string, gr
     data: query.data?.resource,
     relationships: query.data?.relationships,
     certificateInfo: query.data?.certificateInfo,
+    hpaDiagnosis: query.data?.hpaDiagnosis,
   }
 }
 

package/src/components/UserMenu.tsx

@@ -1,9 +1,19 @@
 import { useState, useRef, useEffect, useCallback } from 'react'
 import { User, LogOut } from 'lucide-react'
+import { clsx } from 'clsx'
 import { useAuthMe } from '../api/client'
 import { useQueryClient } from '@tanstack/react-query'
 
-export function UserMenu() {
+interface UserMenuProps {
+  // 'topbar' (default): 27px avatar, dropdown opens downward.
+  // 'rail': a rail-bottom row (avatar + username, fly-out when slim), dropdown
+  // opens UPWARD + escapes the narrow column to the right.
+  variant?: 'topbar' | 'rail'
+  /** Rail variant only: expanded (labels) vs slim (icon + fly-out). */
+  pinned?: boolean
+}
+
+export function UserMenu({ variant = 'topbar', pinned = true }: UserMenuProps = {}) {
   const { data: authMe } = useAuthMe()
   const [isOpen, setIsOpen] = useState(false)
   const menuRef = useRef<HTMLDivElement>(null)
@@ -47,18 +57,54 @@ export function UserMenu() {
     .map(s => s[0]?.toUpperCase() || '')
     .join('')
 
+  const isRail = variant === 'rail'
+  const avatar = (
+    <span className="w-7 h-7 rounded-full bg-blue-500/15 text-blue-500 flex items-center justify-center text-xs font-medium shrink-0">
+      {initials || <User className="w-3.5 h-3.5" />}
+    </span>
+  )
+
   return (
-    <div ref={menuRef} className="relative">
-      <button
-        onClick={() => setIsOpen(!isOpen)}
-        className="w-7 h-7 rounded-full bg-blue-500/15 text-blue-500 flex items-center justify-center text-xs font-medium hover:bg-blue-500/25 transition-colors"
-        title={authMe.username}
-      >
-        {initials || <User className="w-3.5 h-3.5" />}
-      </button>
+    <div ref={menuRef} className={clsx('relative', isRail && 'group/item', isRail && !pinned && 'w-10')}>
+      {isRail ? (
+        <button
+          onClick={() => setIsOpen(!isOpen)}
+          title={authMe.username}
+          className={clsx(
+            'relative flex h-9 w-full items-center rounded-md text-sm font-medium text-theme-text-secondary hover:bg-theme-hover hover:text-theme-text-primary transition-colors',
+            !pinned && 'max-w-10 overflow-hidden',
+          )}
+        >
+          <span className="flex w-10 shrink-0 items-center justify-center">{avatar}</span>
+          <span className={clsx('pr-3 truncate', !pinned && 'opacity-0')}>{authMe.username.split('@')[0]}</span>
+        </button>
+      ) : (
+        <button
+          onClick={() => setIsOpen(!isOpen)}
+          className="w-7 h-7 rounded-full bg-blue-500/15 text-blue-500 flex items-center justify-center text-xs font-medium hover:bg-blue-500/25 transition-colors"
+          title={authMe.username}
+        >
+          {initials || <User className="w-3.5 h-3.5" />}
+        </button>
+      )}
+
+      {/* Slim-rail fly-out label (account row, collapsed) */}
+      {isRail && !pinned && !isOpen && (
+        <span
+          aria-hidden
+          className="pointer-events-none absolute left-full top-1/2 z-50 ml-1 hidden -translate-y-1/2 whitespace-nowrap rounded-md border border-theme-border bg-theme-hover px-2.5 py-1 text-[13px] font-medium text-theme-text-primary opacity-0 shadow-lg shadow-black/30 transition-opacity duration-75 group-hover/item:block group-hover/item:opacity-100"
+        >
+          Account
+        </span>
+      )}
 
       {isOpen && (
-        <div className="absolute right-0 top-full mt-1.5 w-56 bg-theme-surface border border-theme-border rounded-lg shadow-lg z-50 py-1">
+        <div className={clsx(
+          'absolute w-56 bg-theme-surface border border-theme-border rounded-lg shadow-lg z-50 py-1',
+          // Rail: open UP (it sits at the viewport bottom) and align to the rail's
+          // left edge so a 56px slim column doesn't clip it (it extends right).
+          isRail ? 'bottom-full left-2 mb-1.5' : 'right-0 top-full mt-1.5',
+        )}>
           <div className="px-3 py-2 border-b border-theme-border">
             <p className="text-sm font-medium text-theme-text-primary truncate">{authMe.username}</p>
             {authMe.groups && authMe.groups.length > 0 && (