@skyhook-io/radar-app 0.1.1

package/src/components/ui/ShortcutHelpOverlay.tsx

@@ -0,0 +1,301 @@
+import { useEffect, useRef } from 'react'
+import { X } from 'lucide-react'
+import { clsx } from 'clsx'
+import { TRANSITION_BACKDROP, TRANSITION_PANEL } from '../../utils/animation'
+import { useActiveShortcuts, type ShortcutCategory } from '../../hooks/useKeyboardShortcuts'
+
+interface ShortcutHelpOverlayProps {
+  onClose: () => void
+  currentView?: string
+  /** Controls fade-in/out animation (driven by useAnimatedUnmount) */
+  isOpen?: boolean
+}
+
+// Categories that always appear at the top
+const GLOBAL_CATEGORIES: ShortcutCategory[] = ['Navigation', 'General']
+
+// Categories tied to contextual UI (not a specific view)
+const CONTEXT_CATEGORIES: ShortcutCategory[] = ['Drawer', 'Dock']
+
+// Preferred ordering within the view section
+const VIEW_CATEGORY_ORDER: ShortcutCategory[] = [
+  'Search', 'Table', 'Resource Actions', 'Topology', 'Timeline', 'Helm',
+]
+
+const VIEW_LABELS: Record<string, string> = {
+  home: 'Home',
+  topology: 'Topology',
+  resources: 'Resources',
+  timeline: 'Timeline',
+  helm: 'Helm',
+  traffic: 'Traffic',
+}
+
+type ShortcutEntry = { description: string; keys: string[] }
+
+function KbdKey({ children }: { children: string }) {
+  return (
+    <kbd className="inline-flex items-center justify-center min-w-[1.5rem] h-6 px-1.5 text-xs font-mono font-medium bg-theme-elevated border border-theme-border-light rounded text-theme-text-primary shadow-sm">
+      {children}
+    </kbd>
+  )
+}
+
+function ShortcutKeys({ keys }: { keys: string }) {
+  // Handle multi-key sequences like "g g"
+  if (keys.includes(' ') && !keys.includes('+')) {
+    const parts = keys.split(' ')
+    return (
+      <span className="flex items-center gap-1">
+        {parts.map((part, i) => (
+          <span key={i} className="flex items-center gap-0.5">
+            {i > 0 && <span className="text-theme-text-tertiary text-xs mx-0.5"></span>}
+            <KbdKey>{part}</KbdKey>
+          </span>
+        ))}
+      </span>
+    )
+  }
+
+  // Handle modifier combos like "Cmd+K", "Ctrl+D", "Shift+N"
+  // But not the literal "+" key itself
+  if (keys.includes('+') && keys !== '+') {
+    const parts = keys.split('+')
+    return (
+      <span className="flex items-center gap-0.5">
+        {parts.map((part, i) => (
+          <span key={i} className="flex items-center gap-0.5">
+            {i > 0 && <span className="text-theme-text-tertiary text-[10px]">+</span>}
+            <KbdKey>{formatKeyLabel(part)}</KbdKey>
+          </span>
+        ))}
+      </span>
+    )
+  }
+
+  // Single key
+  return <KbdKey>{formatKeyLabel(keys)}</KbdKey>
+}
+
+function formatKeyLabel(key: string): string {
+  const isMac = typeof navigator !== 'undefined' && navigator.platform.includes('Mac')
+  switch (key.toLowerCase()) {
+    case 'cmd':
+    case 'meta': return isMac ? '⌘' : 'Ctrl'
+    case 'ctrl': return 'Ctrl'
+    case 'shift': return isMac ? '⇧' : 'Shift'
+    case 'alt': return isMac ? '⌥' : 'Alt'
+    case 'escape': return 'Esc'
+    case 'enter': return '↵'
+    case 'arrowup': return '↑'
+    case 'arrowdown': return '↓'
+    case 'arrowleft': return '←'
+    case 'arrowright': return '→'
+    case '`': return '`'
+    default: return key
+  }
+}
+
+function CategoryBlock({ category, entries }: { category: string; entries: ShortcutEntry[] }) {
+  return (
+    <div>
+      <h3 className="text-xs font-semibold text-theme-text-tertiary uppercase tracking-wider mb-2.5">
+        {category}
+      </h3>
+      <div className="space-y-1.5">
+        {entries.map(entry => (
+          <div key={entry.description} className="flex items-center justify-between py-1">
+            <span className="text-sm text-theme-text-secondary">{entry.description}</span>
+            <span className="flex items-center gap-1.5 ml-4 shrink-0">
+              {entry.keys.map((k, i) => (
+                <span key={k} className="flex items-center gap-1.5">
+                  {i > 0 && <span className="text-theme-text-tertiary text-[10px]">/</span>}
+                  <ShortcutKeys keys={k} />
+                </span>
+              ))}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+// Balance categories into two columns by item count (descending-greedy for best packing)
+function balanceColumns(categories: ShortcutCategory[], grouped: Map<ShortcutCategory, ShortcutEntry[]>): [ShortcutCategory[], ShortcutCategory[]] {
+  const sorted = [...categories].sort((a, b) =>
+    (grouped.get(b)?.length || 0) - (grouped.get(a)?.length || 0)
+  )
+  const leftSet = new Set<ShortcutCategory>()
+  const rightSet = new Set<ShortcutCategory>()
+  let leftCount = 0, rightCount = 0
+
+  for (const cat of sorted) {
+    const count = grouped.get(cat)!.length
+    if (leftCount <= rightCount) {
+      leftSet.add(cat)
+      leftCount += count
+    } else {
+      rightSet.add(cat)
+      rightCount += count
+    }
+  }
+
+  // Preserve original ordering within each column
+  const left = categories.filter(c => leftSet.has(c))
+  const right = categories.filter(c => rightSet.has(c))
+  return [left, right]
+}
+
+function TwoColumnSection({ categories, grouped }: { categories: ShortcutCategory[]; grouped: Map<ShortcutCategory, ShortcutEntry[]> }) {
+  if (categories.length === 0) return null
+
+  if (categories.length <= 2) {
+    // Sort larger category to the left for visual balance
+    const sorted = [...categories].sort((a, b) =>
+      (grouped.get(b)?.length || 0) - (grouped.get(a)?.length || 0)
+    )
+    return (
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-4">
+        {sorted.map(cat => (
+          <CategoryBlock key={cat} category={cat} entries={grouped.get(cat)!} />
+        ))}
+      </div>
+    )
+  }
+
+  const [left, right] = balanceColumns(categories, grouped)
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-x-8">
+      <div className="space-y-4">
+        {left.map(cat => <CategoryBlock key={cat} category={cat} entries={grouped.get(cat)!} />)}
+      </div>
+      <div className="space-y-4">
+        {right.map(cat => <CategoryBlock key={cat} category={cat} entries={grouped.get(cat)!} />)}
+      </div>
+    </div>
+  )
+}
+
+export function ShortcutHelpOverlay({ onClose, currentView, isOpen = true }: ShortcutHelpOverlayProps) {
+  const shortcuts = useActiveShortcuts()
+  const overlayRef = useRef<HTMLDivElement>(null)
+
+  // Close on Escape
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.preventDefault()
+        e.stopPropagation()
+        onClose()
+      }
+    }
+    // Use capture to intercept before the shortcut system
+    document.addEventListener('keydown', handler, true)
+    return () => document.removeEventListener('keydown', handler, true)
+  }, [onClose])
+
+  // Group shortcuts by category, merging duplicates with same description
+  // (e.g., "Zoom in" registered for both + and = shows as one row)
+  const grouped = new Map<ShortcutCategory, ShortcutEntry[]>()
+  for (const s of shortcuts) {
+    if (s.id === 'help-toggle') continue
+    const list = grouped.get(s.category) || []
+    const existing = list.find(item => item.description === s.description)
+    if (existing) {
+      existing.keys.push(s.keys)
+    } else {
+      list.push({ description: s.description, keys: [s.keys] })
+    }
+    grouped.set(s.category, list)
+  }
+
+  // Split categories into sections
+  const globalCategories = GLOBAL_CATEGORIES.filter(c => grouped.has(c))
+  const viewCategories = VIEW_CATEGORY_ORDER.filter(
+    c => grouped.has(c) && !GLOBAL_CATEGORIES.includes(c) && !CONTEXT_CATEGORIES.includes(c)
+  )
+  const contextCategories = CONTEXT_CATEGORIES.filter(c => grouped.has(c))
+
+  const viewLabel = currentView ? VIEW_LABELS[currentView] : null
+  const hasViewSection = viewCategories.length > 0
+  const hasContextSection = contextCategories.length > 0
+  const isEmpty = globalCategories.length === 0 && !hasViewSection && !hasContextSection
+
+  return (
+    <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
+      {/* Backdrop */}
+      <div
+        className={clsx(
+          'absolute inset-0 bg-theme-base/70 backdrop-blur-sm',
+          TRANSITION_BACKDROP,
+          isOpen ? 'opacity-100' : 'opacity-0'
+        )}
+        onClick={onClose}
+      />
+
+      {/* Panel */}
+      <div
+        ref={overlayRef}
+        className={clsx(
+          'relative w-full max-w-2xl max-h-[80vh] dialog overflow-hidden flex flex-col',
+          TRANSITION_PANEL,
+          isOpen ? 'opacity-100 scale-100' : 'opacity-0 scale-[0.97]'
+        )}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between px-5 py-3.5 border-b border-theme-border">
+          <h2 className="text-base font-semibold text-theme-text-primary">Keyboard Shortcuts</h2>
+          <button
+            onClick={onClose}
+            className="p-1.5 rounded-md text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-hover transition-colors"
+          >
+            <X className="w-4 h-4" />
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="overflow-y-auto px-5 py-4 space-y-5">
+          {/* Global section — Navigation + General */}
+          <TwoColumnSection categories={globalCategories} grouped={grouped} />
+
+          {/* View-specific section */}
+          {hasViewSection && (
+            <>
+              {viewLabel && (
+                <div className="flex items-center gap-3">
+                  <div className="h-px flex-1 bg-theme-border-light" />
+                  <span className="text-[10px] font-semibold text-theme-text-tertiary uppercase tracking-wider">
+                    {viewLabel}
+                  </span>
+                  <div className="h-px flex-1 bg-theme-border-light" />
+                </div>
+              )}
+              <TwoColumnSection categories={viewCategories} grouped={grouped} />
+            </>
+          )}
+
+          {/* Contextual section (Drawer, Dock) */}
+          {hasContextSection && (
+            <TwoColumnSection categories={contextCategories} grouped={grouped} />
+          )}
+
+          {/* Empty state */}
+          {isEmpty && (
+            <p className="text-sm text-theme-text-tertiary text-center py-8">
+              No keyboard shortcuts registered.
+            </p>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="px-5 py-2.5 border-t border-theme-border bg-theme-surface/50">
+          <div className="flex items-center justify-between text-xs text-theme-text-tertiary">
+            <span>Press <KbdKey>?</KbdKey> to toggle this overlay</span>
+            <span>Press <KbdKey>Esc</KbdKey> to close</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/ui/Toast.tsx

@@ -0,0 +1 @@
+export { ToastProvider, useToast, showApiError, showApiSuccess } from '@skyhook-io/k8s-ui'

package/src/components/ui/Tooltip.tsx

@@ -0,0 +1 @@
+export { Tooltip, WithTooltip } from '@skyhook-io/k8s-ui/components/ui/Tooltip'

package/src/components/ui/UpdateNotification.tsx

@@ -0,0 +1,299 @@
+import { useState, useEffect } from 'react'
+import { Download, X, Copy, Check, RotateCw, ArrowDownToLine, Loader2 } from 'lucide-react'
+import { useQueryClient } from '@tanstack/react-query'
+import {
+  useVersionCheck,
+  useStartDesktopUpdate,
+  useDesktopUpdateStatus,
+  useApplyDesktopUpdate,
+} from '../../api/client'
+import type { DesktopUpdateState } from '../../api/client'
+
+const DISMISSED_KEY = 'radar-update-dismissed'
+
+export function UpdateNotification() {
+  const queryClient = useQueryClient()
+  const { data: versionInfo } = useVersionCheck()
+  const [dismissed, setDismissed] = useState(false)
+  const [copied, setCopied] = useState(false)
+  const [copyFailed, setCopyFailed] = useState(false)
+
+  // Desktop update state
+  const [desktopUpdating, setDesktopUpdating] = useState(false)
+  const startUpdate = useStartDesktopUpdate()
+  const applyUpdate = useApplyDesktopUpdate()
+  const { data: updateStatus } = useDesktopUpdateStatus(desktopUpdating)
+
+  const isDesktop = versionInfo?.installMethod === 'desktop'
+
+  // Listen for "Check for Updates" menu item in desktop app (Wails runtime event).
+  // Un-dismisses the notification and invalidates the version check cache.
+  useEffect(() => {
+    const wailsRuntime = (window as unknown as Record<string, unknown>).runtime as
+      | { EventsOn?: (event: string, callback: () => void) => () => void }
+      | undefined
+    if (!wailsRuntime?.EventsOn) return
+
+    const cleanup = wailsRuntime.EventsOn('check-for-updates', () => {
+      setDismissed(false)
+      try { localStorage.removeItem(DISMISSED_KEY) } catch { /* ignore */ }
+      queryClient.invalidateQueries({ queryKey: ['version-check'] })
+    })
+
+    return cleanup
+  }, [queryClient])
+
+  // Log version check errors for debugging
+  useEffect(() => {
+    if (versionInfo?.error) {
+      console.debug('[radar] Version check failed:', versionInfo.error)
+    }
+  }, [versionInfo?.error])
+
+  // Check if this version was already dismissed
+  useEffect(() => {
+    if (versionInfo?.latestVersion) {
+      try {
+        const dismissedVersion = localStorage.getItem(DISMISSED_KEY)
+        if (dismissedVersion === versionInfo.latestVersion) {
+          setDismissed(true)
+        }
+      } catch {
+        // localStorage unavailable (e.g. Safari private mode)
+      }
+    }
+  }, [versionInfo?.latestVersion])
+
+  // Stop polling when update reaches a terminal state
+  useEffect(() => {
+    if (updateStatus?.state === 'error' || updateStatus?.state === 'idle') {
+      setDesktopUpdating(false)
+    }
+  }, [updateStatus?.state])
+
+  const handleDismiss = () => {
+    try {
+      if (versionInfo?.latestVersion) {
+        localStorage.setItem(DISMISSED_KEY, versionInfo.latestVersion)
+      }
+    } catch {
+      // localStorage unavailable — dismiss in-memory only
+    }
+    setDismissed(true)
+  }
+
+  const handleCopyCommand = async () => {
+    if (versionInfo?.updateCommand) {
+      try {
+        await navigator.clipboard.writeText(versionInfo.updateCommand)
+        setCopied(true)
+        setTimeout(() => setCopied(false), 2000)
+      } catch (err) {
+        console.debug('[radar] Clipboard write failed:', err)
+        setCopyFailed(true)
+        setTimeout(() => setCopyFailed(false), 2000)
+      }
+    }
+  }
+
+  const handleStartDesktopUpdate = () => {
+    startUpdate.mutate(undefined, {
+      onSuccess: () => setDesktopUpdating(true),
+    })
+  }
+
+  // Don't show if no update available, dismissed, or error
+  if (!versionInfo?.updateAvailable || dismissed) {
+    return null
+  }
+
+  // Determine what the current effective state is
+  const effectiveState: DesktopUpdateState = updateStatus?.state ?? 'idle'
+
+  return (
+    <div className="fixed bottom-4 right-4 z-50 max-w-sm bg-theme-surface border border-blue-500/50 rounded-lg shadow-xl p-4 animate-in slide-in-from-right">
+      <div className="flex items-start gap-3">
+        <div className="flex items-center justify-center w-8 h-8 bg-blue-500/20 rounded-full shrink-0">
+          <UpdateIcon state={effectiveState} />
+        </div>
+        <div className="flex-1 min-w-0">
+          <h4 className="text-sm font-medium text-theme-text-primary">
+            <UpdateTitle state={effectiveState} />
+          </h4>
+          <p className="text-xs text-theme-text-secondary mt-1">
+            Radar {versionInfo.latestVersion} is available.{' '}
+            You're on {versionInfo.currentVersion}.
+          </p>
+
+          {/* Desktop: in-app update flow */}
+          {isDesktop && (
+            <DesktopUpdateControls
+              state={effectiveState}
+              progress={updateStatus?.progress}
+              error={updateStatus?.error}
+              starting={startUpdate.isPending}
+              onStart={handleStartDesktopUpdate}
+              onApply={() => applyUpdate.mutate()}
+              onRetry={handleStartDesktopUpdate}
+            />
+          )}
+
+          {/* CLI: show update command with copy button for package managers */}
+          {!isDesktop && versionInfo.updateCommand ? (
+            <button
+              onClick={handleCopyCommand}
+              className="flex items-center gap-2 mt-2 px-2 py-1.5 bg-theme-elevated rounded text-xs font-mono text-theme-text-primary hover:bg-theme-surface-hover transition-colors w-full"
+            >
+              <code className="flex-1 text-left truncate">{versionInfo.updateCommand}</code>
+              <CopyIcon copied={copied} failed={copyFailed} />
+            </button>
+          ) : (
+            /* Direct download - show release link */
+            !isDesktop && versionInfo.releaseUrl && (
+              <a
+                href={versionInfo.releaseUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center gap-1 mt-2 text-xs font-medium text-blue-400 hover:text-blue-300"
+              >
+                Download from GitHub →
+              </a>
+            )
+          )}
+        </div>
+        {/* Don't show dismiss during active update */}
+        {effectiveState !== 'downloading' && effectiveState !== 'applying' && (
+          <button
+            onClick={handleDismiss}
+            className="p-1 text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded shrink-0"
+            aria-label="Dismiss"
+          >
+            <X className="w-4 h-4" />
+          </button>
+        )}
+      </div>
+    </div>
+  )
+}
+
+function CopyIcon({ copied, failed }: { copied: boolean; failed: boolean }) {
+  if (copied) return <Check className="w-3.5 h-3.5 text-green-400 shrink-0" />
+  if (failed) return <X className="w-3.5 h-3.5 text-red-400 shrink-0" />
+  return <Copy className="w-3.5 h-3.5 text-theme-text-tertiary shrink-0" />
+}
+
+function UpdateIcon({ state }: { state: DesktopUpdateState }) {
+  switch (state) {
+    case 'downloading':
+    case 'applying':
+      return <Loader2 className="w-4 h-4 text-blue-400 animate-spin" />
+    case 'ready':
+      return <ArrowDownToLine className="w-4 h-4 text-green-400" />
+    default:
+      return <Download className="w-4 h-4 text-blue-400" />
+  }
+}
+
+function UpdateTitle({ state }: { state: DesktopUpdateState }) {
+  switch (state) {
+    case 'ready':
+      return <>Update Ready</>
+    case 'applying':
+      return <>Applying Update...</>
+    default:
+      return <>Update Available</>
+  }
+}
+
+// DesktopUpdateControls renders the update action area for desktop installs.
+function DesktopUpdateControls({
+  state,
+  progress,
+  error,
+  starting,
+  onStart,
+  onApply,
+  onRetry,
+}: {
+  state: DesktopUpdateState
+  progress?: number
+  error?: string
+  starting?: boolean
+  onStart: () => void
+  onApply: () => void
+  onRetry: () => void
+}) {
+  switch (state) {
+    case 'idle':
+      return (
+        <button
+          onClick={onStart}
+          disabled={starting}
+          className="mt-2 px-3 py-1.5 btn-brand text-xs font-medium rounded"
+        >
+          {starting ? (
+            <span className="inline-flex items-center gap-1.5">
+              <Loader2 className="w-3 h-3 animate-spin" />
+              Starting...
+            </span>
+          ) : (
+            'Update Now'
+          )}
+        </button>
+      )
+
+    case 'downloading':
+      return (
+        <div className="mt-2 space-y-1">
+          <div className="w-full bg-theme-elevated rounded-full h-1.5 overflow-hidden">
+            <div
+              className="bg-blue-500 h-full rounded-full transition-all duration-300"
+              style={{ width: `${Math.round((progress ?? 0) * 100)}%` }}
+            />
+          </div>
+          <p className="text-xs text-theme-text-tertiary">
+            Downloading... {Math.round((progress ?? 0) * 100)}%
+          </p>
+        </div>
+      )
+
+    case 'ready':
+      return (
+        <div className="mt-2 flex gap-2">
+          <button
+            onClick={onApply}
+            className="px-3 py-1.5 bg-green-600 hover:bg-green-500 text-white text-xs font-medium rounded transition-colors"
+          >
+            Restart Now
+          </button>
+        </div>
+      )
+
+    case 'applying':
+      return (
+        <div className="mt-2 flex items-center gap-2">
+          <Loader2 className="w-3.5 h-3.5 text-blue-400 animate-spin" />
+          <p className="text-xs text-theme-text-secondary">Applying update...</p>
+        </div>
+      )
+
+    case 'error':
+      return (
+        <div className="mt-2 space-y-1.5">
+          {!starting && <p className="text-xs text-red-400">{error || 'Update failed'}</p>}
+          <button
+            onClick={onRetry}
+            disabled={starting}
+            className="inline-flex items-center gap-1 px-3 py-1.5 bg-theme-elevated hover:bg-theme-surface-hover text-xs font-medium text-theme-text-primary rounded transition-colors disabled:opacity-50"
+          >
+            {starting ? (
+              <Loader2 className="w-3 h-3 animate-spin" />
+            ) : (
+              <RotateCw className="w-3 h-3" />
+            )}
+            {starting ? 'Starting...' : 'Retry'}
+          </button>
+        </div>
+      )
+  }
+}

package/src/components/ui/YamlEditor.tsx

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