@skyhook-io/radar-app 0.1.1

package/src/context/ContextSwitchContext.tsx

@@ -0,0 +1,56 @@
+import { createContext, useContext, useState, useCallback, ReactNode } from 'react'
+
+export interface ParsedContextInfo {
+  raw: string
+  provider: string | null
+  account: string | null
+  region: string | null
+  clusterName: string
+}
+
+interface ContextSwitchState {
+  isSwitching: boolean
+  targetContext: ParsedContextInfo | null
+  progressMessage: string | null
+  startSwitch: (context: ParsedContextInfo) => void
+  updateProgress: (message: string) => void
+  endSwitch: () => void
+}
+
+const ContextSwitchContext = createContext<ContextSwitchState | null>(null)
+
+export function ContextSwitchProvider({ children }: { children: ReactNode }) {
+  const [isSwitching, setIsSwitching] = useState(false)
+  const [targetContext, setTargetContext] = useState<ParsedContextInfo | null>(null)
+  const [progressMessage, setProgressMessage] = useState<string | null>(null)
+
+  const startSwitch = useCallback((context: ParsedContextInfo) => {
+    setIsSwitching(true)
+    setTargetContext(context)
+    setProgressMessage(null)
+  }, [])
+
+  const updateProgress = useCallback((message: string) => {
+    setProgressMessage(message)
+  }, [])
+
+  const endSwitch = useCallback(() => {
+    setIsSwitching(false)
+    setTargetContext(null)
+    setProgressMessage(null)
+  }, [])
+
+  return (
+    <ContextSwitchContext.Provider value={{ isSwitching, targetContext, progressMessage, startSwitch, updateProgress, endSwitch }}>
+      {children}
+    </ContextSwitchContext.Provider>
+  )
+}
+
+export function useContextSwitch() {
+  const context = useContext(ContextSwitchContext)
+  if (!context) {
+    throw new Error('useContextSwitch must be used within ContextSwitchProvider')
+  }
+  return context
+}

package/src/context/NavCustomization.tsx

@@ -0,0 +1,62 @@
+// Slot-based customization of Radar's top nav.
+//
+// Lets library consumers (e.g. Radar Hub) swap out the brand area, the
+// context picker, and append items on the right of the action bar —
+// without forking App.tsx or building a parallel nav.
+//
+// The `embedded` flag hides chrome that only makes sense for Radar's
+// standalone OSS binary: GitHub star link, update-from-GitHub notifier,
+// Radar's own OIDC/proxy-mode UserMenu. Consumers typically provide
+// their own auth UI via `rightExtras`.
+//
+// Default (no provider): Radar renders its standalone nav unchanged.
+import { createContext, useContext } from 'react';
+import type { ReactNode } from 'react';
+
+interface NavCustomizationBase {
+  /** Replaces Radar's Skyhook/radar logo + wordmark. */
+  brandSlot?: ReactNode;
+  /** Replaces the ContextSwitcher (kubeconfig-context picker). */
+  contextSlot?: ReactNode;
+}
+
+/**
+ * Slot-based customization of Radar's top nav.
+ *
+ * Standalone-mode consumers pass `embedded: false` (or omit it) and may
+ * optionally append items via `rightExtras`. Embedded-mode consumers must
+ * supply `rightExtras` — Radar's OSS chrome (GitHub star, update notifier,
+ * built-in UserMenu) is hidden, so the host app owns the right side of the
+ * nav and must render its own user/auth UI there.
+ */
+export type NavCustomization =
+  | (NavCustomizationBase & {
+      embedded?: false;
+      /** Appended to the right of the action bar (before the UserMenu). */
+      rightExtras?: ReactNode;
+    })
+  | (NavCustomizationBase & {
+      embedded: true;
+      /** Required in embedded mode: Radar's own UserMenu is hidden. */
+      rightExtras: ReactNode;
+    });
+
+const NavCustomizationContext = createContext<NavCustomization>({});
+
+export function NavCustomizationProvider({
+  value,
+  children,
+}: {
+  value: NavCustomization | undefined;
+  children: ReactNode;
+}) {
+  return (
+    <NavCustomizationContext.Provider value={value ?? {}}>
+      {children}
+    </NavCustomizationContext.Provider>
+  );
+}
+
+export function useNavCustomization(): NavCustomization {
+  return useContext(NavCustomizationContext);
+}

package/src/context/ThemeContext.tsx

@@ -0,0 +1,97 @@
+import { createContext, useContext, useEffect, useState, ReactNode } from 'react'
+import { apiUrl, getAuthHeaders, getCredentialsMode } from '../api/config'
+
+type Theme = 'dark' | 'light'
+
+interface ThemeContextType {
+  theme: Theme
+  setTheme: (theme: Theme) => void
+  toggleTheme: () => void
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined)
+
+const THEME_STORAGE_KEY = 'radar-theme'
+
+function getInitialTheme(): Theme {
+  // Check localStorage first
+  if (typeof window !== 'undefined') {
+    const stored = localStorage.getItem(THEME_STORAGE_KEY)
+    if (stored === 'light' || stored === 'dark') {
+      return stored
+    }
+    // Check system preference
+    if (window.matchMedia('(prefers-color-scheme: light)').matches) {
+      return 'light'
+    }
+  }
+  return 'dark' // Default to dark
+}
+
+export function ThemeProvider({ children }: { children: ReactNode }) {
+  const [theme, setThemeState] = useState<Theme>(getInitialTheme)
+
+  const setTheme = (newTheme: Theme) => {
+    setThemeState(newTheme)
+    localStorage.setItem(THEME_STORAGE_KEY, newTheme)
+    fetch(apiUrl('/settings'), {
+      method: 'PUT',
+      credentials: getCredentialsMode(),
+      headers: { 'Content-Type': 'application/json', ...getAuthHeaders() },
+      body: JSON.stringify({ theme: newTheme }),
+    }).then((res) => {
+      if (!res.ok) console.warn('[settings] Failed to persist theme:', res.status)
+    }).catch((err) => console.warn('[settings] Failed to persist theme:', err))
+  }
+
+  const toggleTheme = () => {
+    setTheme(theme === 'dark' ? 'light' : 'dark')
+  }
+
+  // Apply theme to document
+  useEffect(() => {
+    document.documentElement.classList.toggle('dark', theme === 'dark')
+    document.documentElement.style.colorScheme = theme
+  }, [theme])
+
+  // Sync theme from server (persisted settings survive port changes in desktop app)
+  useEffect(() => {
+    fetch(apiUrl('/settings'), { credentials: getCredentialsMode(), headers: getAuthHeaders() })
+      .then((res) => res.ok ? res.json() : null)
+      .then((data) => {
+        if (data?.theme && (data.theme === 'dark' || data.theme === 'light') && data.theme !== theme) {
+          setThemeState(data.theme)
+          localStorage.setItem(THEME_STORAGE_KEY, data.theme)
+        }
+      })
+      .catch((err) => console.warn('[settings] Failed to load theme from server:', err))
+  }, []) // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Listen for system theme changes
+  useEffect(() => {
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: light)')
+    const handleChange = (e: MediaQueryListEvent) => {
+      // Only auto-switch if user hasn't explicitly set a preference
+      const stored = localStorage.getItem(THEME_STORAGE_KEY)
+      if (!stored) {
+        setThemeState(e.matches ? 'light' : 'dark')
+      }
+    }
+    mediaQuery.addEventListener('change', handleChange)
+    return () => mediaQuery.removeEventListener('change', handleChange)
+  }, [])
+
+  return (
+    <ThemeContext.Provider value={{ theme, setTheme, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  )
+}
+
+export function useTheme() {
+  const context = useContext(ThemeContext)
+  if (context === undefined) {
+    throw new Error('useTheme must be used within a ThemeProvider')
+  }
+  return context
+}

package/src/contexts/CapabilitiesContext.tsx

@@ -0,0 +1,130 @@
+import { createContext, useContext, useMemo, ReactNode } from 'react'
+import { useCapabilities, useNamespaceCapabilities } from '../api/client'
+import type { Capabilities, ResourcePermissions } from '../types'
+
+// Default capabilities for local development (when running locally, all features work)
+const defaultCapabilities: Capabilities = {
+  exec: true,
+  localTerminal: true,
+  logs: true,
+  portForward: true,
+  secrets: true,
+  secretsUpdate: true,
+  helmWrite: true,
+  nodeWrite: true,
+  mcpEnabled: true,
+}
+
+// Restricted capabilities for error/failure cases (fail-closed)
+const restrictedCapabilities: Capabilities = {
+  exec: false,
+  localTerminal: false,
+  logs: false,
+  portForward: false,
+  secrets: false,
+  secretsUpdate: false,
+  helmWrite: false,
+  nodeWrite: false,
+  mcpEnabled: false,
+}
+
+const CapabilitiesContext = createContext<Capabilities>(defaultCapabilities)
+
+export function CapabilitiesProvider({ children }: { children: ReactNode }) {
+  const { data: capabilities, error } = useCapabilities()
+
+  // Determine which capabilities to use:
+  // 1. If we have fetched capabilities, use them
+  // 2. If there's an error, use restricted (fail-closed)
+  // 3. If still loading, use defaults (assumes local dev where everything works)
+  let value: Capabilities
+  if (capabilities) {
+    value = capabilities
+  } else if (error) {
+    // Log error for debugging and use restricted capabilities
+    console.error('Failed to fetch capabilities, using restricted mode:', error)
+    value = restrictedCapabilities
+  } else {
+    // Still loading - use defaults for smooth UX
+    value = defaultCapabilities
+  }
+
+  return (
+    <CapabilitiesContext.Provider value={value}>
+      {children}
+    </CapabilitiesContext.Provider>
+  )
+}
+
+export function useCapabilitiesContext(): Capabilities {
+  return useContext(CapabilitiesContext)
+}
+
+// Convenience hooks for specific capabilities
+export function useCanExec(): boolean {
+  return useContext(CapabilitiesContext).exec
+}
+
+export function useCanViewLogs(): boolean {
+  return useContext(CapabilitiesContext).logs
+}
+
+export function useCanPortForward(): boolean {
+  return useContext(CapabilitiesContext).portForward
+}
+
+export function useCanViewSecrets(): boolean {
+  return useContext(CapabilitiesContext).secrets
+}
+
+export function useCanUpdateSecrets(): boolean {
+  return useContext(CapabilitiesContext).secretsUpdate
+}
+
+export function useCanHelmWrite(): boolean {
+  return useContext(CapabilitiesContext).helmWrite
+}
+
+export function useCanNodeWrite(): boolean {
+  return useContext(CapabilitiesContext).nodeWrite
+}
+
+// RBAC resource permission hooks
+export function useResourcePermissions(): ResourcePermissions | undefined {
+  return useContext(CapabilitiesContext).resources
+}
+
+export function useRestrictedResources(): string[] {
+  const resources = useContext(CapabilitiesContext).resources
+  return useMemo(() => {
+    if (!resources) return []
+    return Object.entries(resources)
+      .filter(([, allowed]) => !allowed)
+      .map(([kind]) => kind)
+  }, [resources])
+}
+
+export function useHasLimitedAccess(): boolean {
+  const resources = useContext(CapabilitiesContext).resources
+  if (!resources) return false
+  return Object.values(resources).some(allowed => !allowed)
+}
+
+// Namespace-scoped capability hooks: lazily re-check exec/logs/portForward
+// scoped to a specific namespace when global RBAC checks denied them.
+// Falls back to global capability values while the namespace check is loading
+// or when all capabilities are already granted.
+export function useNamespacedCapabilities(namespace: string | undefined) {
+  const globalCaps = useContext(CapabilitiesContext)
+  const { data: nsCaps, error } = useNamespaceCapabilities(namespace, globalCaps)
+
+  if (error) {
+    console.warn(`Failed to fetch namespace capabilities for ${namespace}, using global:`, error)
+  }
+
+  return useMemo(() => ({
+    canExec: nsCaps?.exec ?? globalCaps.exec,
+    canViewLogs: nsCaps?.logs ?? globalCaps.logs,
+    canPortForward: nsCaps?.portForward ?? globalCaps.portForward,
+  }), [globalCaps.exec, globalCaps.logs, globalCaps.portForward, nsCaps])
+}

package/src/hooks/useAnimatedUnmount.ts

@@ -0,0 +1 @@
+export { useAnimatedUnmount } from '@skyhook-io/k8s-ui/hooks/useAnimatedUnmount'

package/src/hooks/useDesktopDownload.ts

@@ -0,0 +1,41 @@
+import { createElement, useState, useEffect, useCallback } from 'react'
+import { FolderOpen } from 'lucide-react'
+import { useToast } from '../components/ui/Toast'
+import { isDesktopApp, desktopSaveFile } from '../utils/desktop-download'
+import { openFile, openFolder } from '../utils/desktop-open-folder'
+
+/**
+ * Returns a download override function when running in the desktop app,
+ * or undefined when running in a browser (so the default blob URL approach is used).
+ * The returned function shows toast notifications for success/failure and silently handles user cancellation.
+ */
+export function useDesktopDownload(): ((content: string, mime: string, filename: string) => void) | undefined {
+  const [isDesktop, setIsDesktop] = useState(false)
+  const { showSuccess, showError } = useToast()
+
+  useEffect(() => {
+    isDesktopApp().then(setIsDesktop)
+  }, [])
+
+  const download = useCallback((content: string, _mime: string, filename: string) => {
+    desktopSaveFile(content, filename)
+      .then((path) => showSuccess(
+        'File saved',
+        path,
+        {
+          label: 'Show in Finder',
+          icon: createElement(FolderOpen, { className: 'w-3.5 h-3.5' }),
+          onClick: () => openFolder(path),
+        },
+        () => openFile(path),
+      ))
+      .catch((err: Error) => {
+        if (err.message !== 'cancelled') {
+          showError('Save failed', err.message)
+        }
+      })
+  }, [showSuccess, showError])
+
+  if (!isDesktop) return undefined
+  return download
+}

package/src/hooks/useEventSource.ts

@@ -0,0 +1,262 @@
+import { useState, useEffect, useCallback, useRef } from 'react'
+import type { Topology, K8sEvent, ViewMode } from '../types'
+import type { ConnectionState } from '../context/ConnectionContext'
+import { getApiBase, getCredentialsMode } from '../api/config'
+
+interface UseEventSourceReturn {
+  topology: Topology | null
+  events: K8sEvent[]
+  connected: boolean
+  reconnect: () => void
+}
+
+interface UseEventSourceOptions {
+  onContextSwitchComplete?: () => void
+  onContextSwitchProgress?: (message: string) => void
+  onContextChanged?: (context: string) => void
+  onConnectionStateChange?: (status: ConnectionState) => void
+  onDeferredReady?: () => void
+  onK8sEvent?: (event: K8sEvent) => void
+}
+
+const MAX_EVENTS = 100 // Keep last 100 events
+
+// Dynamic throttle based on cluster size - fast for small, protective for large
+function getTopologyThrottleMs(nodeCount: number): number {
+  if (nodeCount < 100) return 500    // Small clusters: 0.5s
+  if (nodeCount < 300) return 1000   // Medium clusters: 1s
+  if (nodeCount < 500) return 2000   // Large clusters: 2s
+  return 3000                         // Very large clusters: 3s
+}
+const INITIAL_RECONNECT_DELAY_MS = 3000
+const MAX_RECONNECT_DELAY_MS = 30000 // Cap at 30 seconds
+
+export function useEventSource(
+  namespaces: string[],
+  viewMode: ViewMode = 'resources',
+  options?: UseEventSourceOptions,
+  /** When set, SSE reconnects with this namespace filter (for large clusters that require server-side filtering) */
+  forceNamespaceFilter?: string[],
+  /** When true, evaluates NetworkPolicies and annotates edges with allow/block/unprotected */
+  showPolicyEffect?: boolean,
+): UseEventSourceReturn {
+  const [topology, setTopology] = useState<Topology | null>(null)
+  const [events, setEvents] = useState<K8sEvent[]>([])
+  const [connected, setConnected] = useState(false)
+  const eventSourceRef = useRef<EventSource | null>(null)
+  const reconnectTimeoutRef = useRef<number | null>(null)
+  const waitingForTopologyAfterSwitch = useRef(false)
+  const reconnectDelayRef = useRef(INITIAL_RECONNECT_DELAY_MS) // Exponential backoff
+
+  // Throttling state for topology updates
+  const lastTopologyUpdateRef = useRef<number>(0)
+  const pendingTopologyRef = useRef<Topology | null>(null)
+  const throttleTimeoutRef = useRef<number | null>(null)
+  const currentNodeCountRef = useRef<number>(0) // Track node count for dynamic throttle
+
+  // Serialize namespaces for stable dependency (used for events clearing)
+  const namespacesKey = namespaces.join(',')
+
+  // SSE namespace filter: only used for large clusters that require server-side filtering.
+  // Small/medium clusters get all-namespace data and filter on the frontend.
+  const sseNamespaceFilter = forceNamespaceFilter?.join(',') || ''
+
+  // Use ref to avoid stale closures while not triggering reconnection on callback changes
+  const optionsRef = useRef(options)
+  optionsRef.current = options
+
+  const connect = useCallback(() => {
+    // Clean up existing connection
+    if (eventSourceRef.current) {
+      eventSourceRef.current.close()
+      // Clear stale topology so consumers show loading state instead of old data
+      setTopology(null)
+    }
+    if (reconnectTimeoutRef.current) {
+      clearTimeout(reconnectTimeoutRef.current)
+    }
+
+    // Build URL — only pass namespace filter for large clusters (forceNamespaceFilter)
+    const params = new URLSearchParams()
+    if (sseNamespaceFilter) {
+      params.set('namespaces', sseNamespaceFilter)
+    }
+    if (viewMode && viewMode !== 'resources') {
+      params.set('view', viewMode)
+    }
+    if (showPolicyEffect) {
+      params.set('policyEffect', 'true')
+    }
+    const url = `${getApiBase()}/events/stream${params.toString() ? `?${params}` : ''}`
+
+    // Mirror the fetch credentials mode: 'include' sets withCredentials so
+    // cookies flow cross-origin (embedded in Radar Hub); 'omit' turns them
+    // off (pure-bearer auth). Default same-origin standalone behaves as
+    // before.
+    const es = new EventSource(url, { withCredentials: getCredentialsMode() === 'include' })
+    eventSourceRef.current = es
+
+    es.onopen = () => {
+      console.log('SSE connected')
+      setConnected(true)
+      // Reset backoff on successful connection
+      reconnectDelayRef.current = INITIAL_RECONNECT_DELAY_MS
+    }
+
+    es.onerror = (error) => {
+      console.error('SSE error:', error)
+      setConnected(false)
+      es.close()
+
+      // Reconnect with exponential backoff
+      const delay = reconnectDelayRef.current
+      reconnectTimeoutRef.current = window.setTimeout(() => {
+        console.log(`SSE reconnecting after ${delay}ms...`)
+        connect()
+      }, delay)
+      // Increase delay for next attempt (exponential backoff with cap)
+      reconnectDelayRef.current = Math.min(delay * 1.5, MAX_RECONNECT_DELAY_MS)
+    }
+
+    // Handle topology updates with dynamic throttling based on cluster size
+    es.addEventListener('topology', (event) => {
+      try {
+        const data = JSON.parse(event.data) as Topology
+        const now = Date.now()
+        const timeSinceLastUpdate = now - lastTopologyUpdateRef.current
+
+        // Update node count for dynamic throttle calculation
+        currentNodeCountRef.current = data.nodes?.length || 0
+        const throttleMs = getTopologyThrottleMs(currentNodeCountRef.current)
+
+        // If waiting for topology after context switch, update immediately
+        if (waitingForTopologyAfterSwitch.current) {
+          waitingForTopologyAfterSwitch.current = false
+          lastTopologyUpdateRef.current = now
+          setTopology(data)
+          optionsRef.current?.onContextSwitchComplete?.()
+          return
+        }
+
+        // Throttle updates: if we updated recently, queue this update
+        if (timeSinceLastUpdate < throttleMs) {
+          pendingTopologyRef.current = data
+
+          // Schedule update for when throttle period ends (if not already scheduled)
+          if (!throttleTimeoutRef.current) {
+            const delay = throttleMs - timeSinceLastUpdate
+            throttleTimeoutRef.current = window.setTimeout(() => {
+              throttleTimeoutRef.current = null
+              if (pendingTopologyRef.current) {
+                lastTopologyUpdateRef.current = Date.now()
+                currentNodeCountRef.current = pendingTopologyRef.current.nodes?.length || 0
+                setTopology(pendingTopologyRef.current)
+                pendingTopologyRef.current = null
+              }
+            }, delay)
+          }
+        } else {
+          // Enough time has passed, update immediately
+          lastTopologyUpdateRef.current = now
+          pendingTopologyRef.current = null
+          setTopology(data)
+        }
+      } catch (e) {
+        console.error('Failed to parse topology:', e)
+      }
+    })
+
+    // Handle K8s events
+    es.addEventListener('k8s_event', (event) => {
+      try {
+        const data = JSON.parse(event.data) as K8sEvent
+        data.timestamp = Date.now()
+        setEvents((prev) => [data, ...prev].slice(0, MAX_EVENTS))
+        optionsRef.current?.onK8sEvent?.(data)
+      } catch (e) {
+        console.error('Failed to parse event:', e)
+      }
+    })
+
+    // Handle heartbeat (just log, keeps connection alive)
+    es.addEventListener('heartbeat', () => {
+      // Connection is alive
+    })
+
+    // Handle context switch progress events
+    es.addEventListener('context_switch_progress', (event) => {
+      try {
+        const data = JSON.parse(event.data) as { message: string }
+        optionsRef.current?.onContextSwitchProgress?.(data.message)
+      } catch (e) {
+        console.error('Failed to parse context_switch_progress event:', e)
+      }
+    })
+
+    // Handle context changed event - clear state while new data loads
+    es.addEventListener('context_changed', (event) => {
+      try {
+        const data = JSON.parse(event.data) as { context: string }
+        console.log('Context changed to:', data.context)
+        // Clear topology and events - new data will come via topology event
+        setTopology(null)
+        setEvents([])
+        // Mark that we're waiting for new topology data
+        waitingForTopologyAfterSwitch.current = true
+        // Notify caller to invalidate caches (e.g., helm releases, resources)
+        optionsRef.current?.onContextChanged?.(data.context)
+      } catch (e) {
+        console.error('Failed to parse context_changed event:', e)
+      }
+    })
+
+    // Handle deferred informer sync completion — refetch dashboard data
+    es.addEventListener('deferred_ready', () => {
+      optionsRef.current?.onDeferredReady?.()
+    })
+
+    // Handle connection state events (for graceful startup)
+    es.addEventListener('connection_state', (event) => {
+      try {
+        const data = JSON.parse(event.data) as ConnectionState
+        optionsRef.current?.onConnectionStateChange?.(data)
+      } catch (e) {
+        console.error('Failed to parse connection_state event:', e)
+      }
+    })
+  }, [sseNamespaceFilter, viewMode, showPolicyEffect])
+
+  // Reconnect function for manual reconnection
+  const reconnect = useCallback(() => {
+    connect()
+  }, [connect])
+
+  // Connect on mount and when namespaces/viewMode changes
+  useEffect(() => {
+    connect()
+
+    return () => {
+      if (eventSourceRef.current) {
+        eventSourceRef.current.close()
+      }
+      if (reconnectTimeoutRef.current) {
+        clearTimeout(reconnectTimeoutRef.current)
+      }
+      if (throttleTimeoutRef.current) {
+        clearTimeout(throttleTimeoutRef.current)
+      }
+    }
+  }, [connect])
+
+  // Clear events when namespaces change
+  useEffect(() => {
+    setEvents([])
+  }, [namespacesKey])
+
+  return {
+    topology,
+    events,
+    connected,
+    reconnect,
+  }
+}