@skyhook-io/radar-app 1.4.2 → 1.6.0

package/src/components/settings/SettingsDialog.tsx

@@ -5,7 +5,9 @@ import { clsx } from 'clsx'
 import { useAnimatedUnmount } from '../../hooks/useAnimatedUnmount'
 import { TRANSITION_BACKDROP, TRANSITION_PANEL } from '../../utils/animation'
 import { apiUrl, getAuthHeaders, getCredentialsMode } from '../../api/config'
-import { useCloudRole } from '../../api/client'
+import { useCloudRole, useVersionCheck } from '../../api/client'
+import { useCapabilitiesContext } from '../../contexts/CapabilitiesContext'
+import type { DeploymentMode } from '../../types'
 
 interface Config {
   kubeconfig?: string
@@ -13,6 +15,7 @@ interface Config {
   namespace?: string
   port?: number
   noBrowser?: boolean
+  browser?: string
   timelineStorage?: 'memory' | 'sqlite'
   timelineDbPath?: string
   historyLimit?: number
@@ -35,12 +38,14 @@ interface SettingsDialogProps {
 export function SettingsDialog({ open, onClose, onShowMyPermissions }: SettingsDialogProps) {
   const dialogRef = useRef<HTMLDivElement>(null)
   const { shouldRender, isOpen } = useAnimatedUnmount(open, 200)
+  const { data: versionInfo } = useVersionCheck()
   // Radar configuration (kubeconfig, port, integrations…) is host-level and
   // affects every user of this instance, so it's gated to owners. Personal
   // sections (My permissions) stay visible to everyone. Non-Cloud callers
   // (OSS, OIDC, kubectl plugin) have no role and pass — single-user laptops
   // are never locked out of their own config. Backend enforces this too.
   const { canAtLeast } = useCloudRole()
+  const capabilities = useCapabilitiesContext()
   const canEditConfig = canAtLeast('owner')
   const [configData, setConfigData] = useState<ConfigResponse | null>(null)
   const [editedConfig, setEditedConfig] = useState<Config>({})
@@ -130,6 +135,7 @@ export function SettingsDialog({ open, onClose, onShowMyPermissions }: SettingsD
   if (!shouldRender) return null
 
   const isDesktop = configData?.isDesktop ?? false
+  const deploymentMode = capabilities.deployment?.mode ?? 'local'
 
   return createPortal(
     <div className="fixed inset-0 z-50 flex items-center justify-center">
@@ -205,6 +211,7 @@ export function SettingsDialog({ open, onClose, onShowMyPermissions }: SettingsD
               config={editedConfig}
               effectiveConfig={configData?.effective}
               isDesktop={isDesktop}
+              deploymentMode={deploymentMode}
               onChange={updateConfigField}
             />
           ) : (
@@ -256,6 +263,22 @@ export function SettingsDialog({ open, onClose, onShowMyPermissions }: SettingsD
             </button>
           </div>
         )}
+
+        {/* About — muted version footer (canonical "Settings → About"). */}
+        <div className="flex items-center justify-between gap-2 px-4 py-2 border-t border-theme-border/60 text-[11px] text-theme-text-tertiary shrink-0">
+          <span>
+            Radar{versionInfo?.currentVersion ? ` v${versionInfo.currentVersion}` : ''}
+            <span className="text-theme-text-disabled"> · by Skyhook</span>
+          </span>
+          <a
+            href="https://github.com/skyhook-io/radar"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-accent-text hover:underline"
+          >
+            GitHub
+          </a>
+        </div>
       </div>
     </div>,
     document.body
@@ -278,13 +301,16 @@ function StartupConfigTab({
   config,
   effectiveConfig,
   isDesktop,
+  deploymentMode,
   onChange,
 }: {
   config: Config
   effectiveConfig?: Config
   isDesktop: boolean
+  deploymentMode: DeploymentMode
   onChange: <K extends keyof Config>(field: K, value: Config[K]) => void
 }) {
+  const showBrowserLaunchControls = !isDesktop && deploymentMode === 'local'
   return (
     <div className="space-y-4">
       <p className="text-xs text-theme-text-tertiary">
@@ -332,12 +358,23 @@ function StartupConfigTab({
         onChange={(v) => onChange('port', v)}
       />
 
-      {!isDesktop && (
-        <ConfigToggle
-          label="Open browser on start"
-          value={!(config.noBrowser ?? false)}
-          onChange={(v) => onChange('noBrowser', !v ? true : undefined)}
-        />
+      {showBrowserLaunchControls && (
+        <>
+          <ConfigToggle
+            label="Open browser on start"
+            value={!(config.noBrowser ?? false)}
+            onChange={(v) => onChange('noBrowser', !v ? true : undefined)}
+          />
+
+          <ConfigField
+            label="Browser"
+            help="Browser for automatic launch; macOS app names are supported"
+            value={config.browser ?? ''}
+            effectiveValue={effectiveConfig?.browser}
+            placeholder="System default"
+            onChange={(v) => onChange('browser', v || undefined)}
+          />
+        </>
       )}
 
       <div className="border-t border-theme-border pt-4 mt-4">

package/src/components/ui/CommandPalette.tsx

@@ -1,130 +1,26 @@
 import { useState, useMemo, useRef, useEffect, useCallback } from 'react'
 import { TRANSITION_BACKDROP, TRANSITION_PANEL } from '../../utils/animation'
 import { Search, X, ChevronRight } from 'lucide-react'
-import { Home, Network, List, Clock, Package, Activity, Sun, Stethoscope, DollarSign, ShieldCheck } from 'lucide-react'
-import { GitBranch } from 'lucide-react'
 import { clsx } from 'clsx'
-import { useNamespaces, useContexts } from '../../api/client'
-import { CORE_RESOURCES, useAPIResources } from '../../api/apiResources'
-import { getResourceIcon } from '../../utils/resource-icons'
-type MainView = 'home' | 'topology' | 'resources' | 'timeline' | 'helm' | 'traffic' | 'cost' | 'audit' | 'gitops'
+import { useCommandItems, bestScore, type CommandItem, type CommandItemCallbacks } from './command-items'
 
-interface CommandPaletteProps {
+interface CommandPaletteProps extends CommandItemCallbacks {
   onClose: () => void
-  onNavigateView: (view: MainView) => void
-  onNavigateKind: (kind: string, group: string) => void
-  onSwitchContext: (name: string) => void
-  onSetNamespaces: (ns: string[]) => void
-  onToggleTheme: () => void
-  onShowDiagnostics?: () => void
   /** Controls fade-in/out animation (driven by useAnimatedUnmount) */
   isOpen?: boolean
 }
 
-interface CommandItem {
-  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[]
-  /** Small priority bonus added to the final score (only if the item matched). Used to nudge built-in k8s kinds above CRDs on tied queries like "policy" or "event". */
-  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 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',
-])
-
-function groupPriorityBonus(group: string): number {
-  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 — so "serv" picks Service over ServiceAccount, and
-// "service" picks Service (exact) decisively. Bonus is capped below the
-// 25-point tier gap, so tier ordering is preserved.
-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
-  else {
-    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
-}
-
-function bestScore(item: CommandItem, query: string): number {
-  // Primary label gets full score; secondary fields are discounted
-  // so that e.g. "node" matching the label "Node" ranks above
-  // "UpdateInfo" where "node" only matches the group "nodemanagement.gke.io"
-  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))
-    }
-  }
-  // Only apply the priority bonus to items that actually matched, so we don't
-  // surface unrelated built-ins ahead of a relevant CRD.
-  return best > 0 ? best + (item.priorityBonus || 0) : 0
-}
-
-export function CommandPalette({
-  onClose,
-  onNavigateView,
-  onNavigateKind,
-  onSwitchContext,
-  onSetNamespaces,
-  onToggleTheme,
-  onShowDiagnostics,
-  isOpen = true,
-}: CommandPaletteProps) {
+export function CommandPalette({ onClose, isOpen = true, ...callbacks }: CommandPaletteProps) {
   const [query, setQuery] = useState('')
   const [selectedIndex, setSelectedIndex] = useState(0)
   const inputRef = useRef<HTMLInputElement>(null)
   const resultsRef = useRef<HTMLDivElement>(null)
   const isKeyboardNav = useRef(false)
 
-  const { data: namespacesData } = useNamespaces()
-  const { data: contexts } = useContexts()
-  const { data: apiResources } = useAPIResources()
+  // The static command items (Views / Kinds / Namespaces / Actions) — shared
+  // with the standalone omnibar via useCommandItems so the two never drift.
+  const items = useCommandItems(callbacks)
 
   // Focus input on mount
   useEffect(() => {
@@ -144,111 +40,6 @@ export function CommandPalette({
     return () => document.removeEventListener('keydown', handler, true)
   }, [onClose])
 
-  // Build command items
-  const items = useMemo<CommandItem[]>(() => {
-    const result: CommandItem[] = []
-
-    // Views
-    const viewEntries: { view: MainView; label: string; icon: React.ComponentType<{ className?: string }>; shortcut: string }[] = [
-      { view: 'home', label: 'Home', icon: Home, shortcut: '1' },
-      { view: 'topology', label: 'Topology', icon: Network, shortcut: '2' },
-      { view: 'resources', label: 'Resources', icon: List, shortcut: '3' },
-      { view: 'timeline', label: 'Timeline', icon: Clock, shortcut: '4' },
-      { view: 'helm', label: 'Helm', icon: Package, shortcut: '5' },
-      { view: 'gitops', label: 'GitOps', icon: GitBranch, shortcut: '6' },
-      { view: 'traffic', label: 'Traffic', icon: Activity, shortcut: '7' },
-      { view: 'cost', label: 'Cost', icon: DollarSign, shortcut: '8' },
-      { view: 'audit', label: 'Audit', icon: ShieldCheck, shortcut: '9' },
-    ]
-    for (const v of viewEntries) {
-      result.push({
-        id: `view-${v.view}`,
-        label: `Go to ${v.label}`,
-        category: 'Views',
-        icon: v.icon,
-        shortcut: v.shortcut,
-        action: () => { onNavigateView(v.view) },
-      })
-    }
-
-    // Resource kinds (deduplicate by name+group — backend may return multiple API versions)
-    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)
-      result.push({
-        id: `kind-${r.name}-${r.group}`,
-        label: r.kind,
-        sublabel: r.group || 'core',
-        category: 'Resource Kinds',
-        icon: getResourceIcon(r.kind),
-        action: () => { onNavigateKind(r.name, r.group) },
-        searchTerms: [r.name, r.kind],
-        priorityBonus: groupPriorityBonus(r.group),
-      })
-    }
-
-    // Contexts
-    if (contexts) {
-      for (const ctx of contexts) {
-        result.push({
-          id: `context-${ctx.name}`,
-          label: ctx.name,
-          sublabel: ctx.isCurrent ? 'current' : ctx.cluster,
-          category: 'Contexts',
-          action: () => { if (!ctx.isCurrent) onSwitchContext(ctx.name) },
-        })
-      }
-    }
-
-    // Namespaces
-    if (namespacesData) {
-      for (const ns of namespacesData) {
-        result.push({
-          id: `ns-${ns.name}`,
-          label: ns.name,
-          category: 'Namespaces',
-          action: () => { onSetNamespaces([ns.name]) },
-        })
-      }
-      // "All namespaces" option
-      result.push({
-        id: 'ns-all',
-        label: 'All Namespaces',
-        category: 'Namespaces',
-        action: () => { onSetNamespaces([]) },
-      })
-    }
-
-    // Actions
-    result.push({
-      id: 'action-theme',
-      label: 'Toggle Theme',
-      category: 'Actions',
-      icon: Sun,
-      shortcut: 't',
-      action: () => { onToggleTheme() },
-    })
-
-    if (onShowDiagnostics) {
-      result.push({
-        id: 'action-diagnostics',
-        label: 'Diagnostics',
-        category: 'Actions',
-        icon: Stethoscope,
-        shortcut: 'Ctrl+Shift+D',
-        action: () => { onShowDiagnostics() },
-        searchTerms: ['debug', 'health', 'status', 'snapshot'],
-      })
-    }
-
-    return result
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [apiResources, contexts, namespacesData, onNavigateView, onNavigateKind, onSwitchContext, onSetNamespaces, onToggleTheme, onShowDiagnostics])
-
   // Filter and rank results
   const filteredItems = useMemo(() => {
     if (!query.trim()) {