nastechai-desktop 18.1.0

package/src/app/command-palette/index.tsx

@@ -0,0 +1,513 @@
+import { useStore } from '@nanostores/react'
+import { useQuery } from '@tanstack/react-query'
+import { Dialog as DialogPrimitive } from 'radix-ui'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command'
+import { getNasTechConfigRecord, listSessions } from '@/nastech'
+import { useI18n } from '@/i18n'
+import { sessionTitle } from '@/lib/chat-runtime'
+import {
+  Activity,
+  Archive,
+  BarChart3,
+  Check,
+  ChevronLeft,
+  ChevronRight,
+  Clock,
+  Cpu,
+  Globe,
+  type IconComponent,
+  Info,
+  KeyRound,
+  MessageCircle,
+  Monitor,
+  Moon,
+  Package,
+  Palette,
+  Plus,
+  Settings,
+  Settings2,
+  Sun,
+  Users,
+  Wrench,
+  Zap
+} from '@/lib/icons'
+import { cn } from '@/lib/utils'
+import { $commandPaletteOpen, closeCommandPalette, setCommandPaletteOpen } from '@/store/command-palette'
+import { type ThemeMode, useTheme } from '@/themes/context'
+
+import {
+  AGENTS_ROUTE,
+  ARTIFACTS_ROUTE,
+  COMMAND_CENTER_ROUTE,
+  CRON_ROUTE,
+  MESSAGING_ROUTE,
+  NEW_CHAT_ROUTE,
+  PROFILES_ROUTE,
+  sessionRoute,
+  SETTINGS_ROUTE,
+  SKILLS_ROUTE
+} from '../routes'
+import { FIELD_LABELS, SECTIONS } from '../settings/constants'
+import { fieldCopyForSchemaKey } from '../settings/field-copy'
+import { prettyName } from '../settings/helpers'
+
+interface PaletteItem {
+  active?: boolean
+  icon: IconComponent
+  id: string
+  /** Keep the palette open after running (live-preview pickers like theme/mode). */
+  keepOpen?: boolean
+  keywords?: string[]
+  label: string
+  /** Action to run when selected. Mutually exclusive with `to`. */
+  run?: () => void
+  /** Open a nested palette page (VS Code-style "choose X → options"). */
+  to?: string
+}
+
+interface PaletteGroup {
+  heading: string
+  items: PaletteItem[]
+}
+
+/** A nested page reachable from a root item via `to`. */
+interface PalettePage {
+  groups: PaletteGroup[]
+  placeholder: string
+  title: string
+}
+
+interface SessionEntry {
+  id: string
+  preview?: string
+  title: string
+}
+
+type SessionRow = Awaited<ReturnType<typeof listSessions>>['sessions'][number]
+
+const toSessionEntry = (session: SessionRow): SessionEntry => ({
+  id: session.id,
+  preview: session.preview ?? undefined,
+  title: sessionTitle(session)
+})
+
+type NonConfigSettingsLabel =
+  | 'about'
+  | 'archivedChats'
+  | 'gateway'
+  | 'keysSettings'
+  | 'keysTools'
+  | 'mcp'
+  | 'providerAccounts'
+  | 'providerApiKeys'
+
+const NON_CONFIG_SETTINGS: ReadonlyArray<{
+  icon: IconComponent
+  keywords?: string[]
+  labelKey: NonConfigSettingsLabel
+  tab: string
+}> = [
+  {
+    icon: Zap,
+    keywords: ['accounts', 'sign in', 'oauth', 'login', 'subscription', 'models', 'anthropic', 'openai'],
+    labelKey: 'providerAccounts',
+    tab: 'providers&pview=accounts'
+  },
+  {
+    icon: KeyRound,
+    keywords: ['providers', 'api key', 'keys', 'secrets', 'tokens'],
+    labelKey: 'providerApiKeys',
+    tab: 'providers&pview=keys'
+  },
+  { icon: Globe, keywords: ['connection', 'messaging'], labelKey: 'gateway', tab: 'gateway' },
+  {
+    icon: KeyRound,
+    keywords: ['api', 'secrets', 'tokens', 'credentials', 'browser', 'search'],
+    labelKey: 'keysTools',
+    tab: 'keys&kview=tools'
+  },
+  {
+    icon: Settings2,
+    keywords: ['gateway', 'proxy', 'server', 'webhook', 'env'],
+    labelKey: 'keysSettings',
+    tab: 'keys&kview=settings'
+  },
+  { icon: Wrench, keywords: ['servers', 'tools'], labelKey: 'mcp', tab: 'mcp' },
+  { icon: Archive, keywords: ['history', 'archived'], labelKey: 'archivedChats', tab: 'sessions' },
+  { icon: Info, keywords: ['version', 'about'], labelKey: 'about', tab: 'about' }
+]
+
+const THEME_MODES: ReadonlyArray<{ icon: IconComponent; mode: ThemeMode }> = [
+  { icon: Sun, mode: 'light' },
+  { icon: Moon, mode: 'dark' },
+  { icon: Monitor, mode: 'system' }
+]
+
+export function CommandPalette() {
+  const { t } = useI18n()
+  const open = useStore($commandPaletteOpen)
+  const navigate = useNavigate()
+  const { availableThemes, mode, resolvedMode, setMode, setTheme, themeName } = useTheme()
+  const [search, setSearch] = useState('')
+  const [page, setPage] = useState<string | null>(null)
+
+  // Server-backed sources for the type-to-search groups, fetched lazily while
+  // the palette is open. react-query handles caching/dedup/staleness.
+  const configQuery = useQuery({
+    queryKey: ['command-palette', 'config'],
+    queryFn: getNasTechConfigRecord,
+    enabled: open
+  })
+
+  const sessionsQuery = useQuery({
+    queryKey: ['command-palette', 'sessions'],
+    queryFn: () => listSessions(200, 1, 'exclude'),
+    enabled: open
+  })
+
+  const archivedQuery = useQuery({
+    queryKey: ['command-palette', 'archived'],
+    queryFn: () => listSessions(200, 0, 'only'),
+    enabled: open
+  })
+
+  const mcpServers = useMemo(() => {
+    const raw = configQuery.data?.mcp_servers
+
+    return raw && typeof raw === 'object' && !Array.isArray(raw)
+      ? Object.keys(raw as Record<string, unknown>).sort()
+      : []
+  }, [configQuery.data])
+
+  const sessions = useMemo(() => (sessionsQuery.data?.sessions ?? []).map(toSessionEntry), [sessionsQuery.data])
+  const archivedSessions = useMemo(() => (archivedQuery.data?.sessions ?? []).map(toSessionEntry), [archivedQuery.data])
+
+  // Reset the query/sub-page on close so it reopens clean.
+  useEffect(() => {
+    if (!open) {
+      setSearch('')
+      setPage(null)
+    }
+  }, [open])
+
+  const go = useCallback((path: string) => () => navigate(path), [navigate])
+  const settingsSectionLabel = useCallback(
+    (section: (typeof SECTIONS)[number]) => t.settings.sections[section.id] ?? section.label,
+    [t.settings.sections]
+  )
+  const configFieldLabel = useCallback(
+    (key: string) =>
+      fieldCopyForSchemaKey(t.settings.fieldLabels, key) ??
+      fieldCopyForSchemaKey(FIELD_LABELS, key) ??
+      prettyName(key.split('.').pop() ?? key),
+    [t.settings.fieldLabels]
+  )
+
+  const baseGroups = useMemo<PaletteGroup[]>(() => {
+    const settingsTab = (tab: string) => `${SETTINGS_ROUTE}?tab=${tab}`
+    const cc = t.commandCenter
+
+    return [
+      {
+        heading: cc.goTo,
+        items: [
+          { icon: Plus, id: 'nav-new', keywords: ['chat', 'create'], label: cc.nav.newChat.title, run: go(NEW_CHAT_ROUTE) },
+          { icon: Settings, id: 'nav-settings', label: cc.nav.settings.title, run: go(SETTINGS_ROUTE) },
+          {
+            icon: Wrench,
+            id: 'nav-skills',
+            keywords: ['tools', 'toolsets'],
+            label: cc.nav.skills.title,
+            run: go(SKILLS_ROUTE)
+          },
+          { icon: MessageCircle, id: 'nav-messaging', label: cc.nav.messaging.title, run: go(MESSAGING_ROUTE) },
+          { icon: Package, id: 'nav-artifacts', label: cc.nav.artifacts.title, run: go(ARTIFACTS_ROUTE) },
+          { icon: Clock, id: 'nav-cron', keywords: ['schedule', 'jobs'], label: t.shell.statusbar.cron, run: go(CRON_ROUTE) },
+          { icon: Users, id: 'nav-profiles', label: t.profiles.title, run: go(PROFILES_ROUTE) },
+          { icon: Cpu, id: 'nav-agents', label: t.agents.title, run: go(AGENTS_ROUTE) }
+        ]
+      },
+      {
+        heading: cc.commandCenter,
+        items: [
+          {
+            icon: Archive,
+            id: 'cc-sessions',
+            keywords: ['command center', 'sessions', 'pin'],
+            label: cc.sections.sessions,
+            run: go(`${COMMAND_CENTER_ROUTE}?section=sessions`)
+          },
+          {
+            icon: Activity,
+            id: 'cc-system',
+            keywords: ['command center', 'system', 'status', 'logs'],
+            label: cc.sections.system,
+            run: go(`${COMMAND_CENTER_ROUTE}?section=system`)
+          },
+          {
+            icon: BarChart3,
+            id: 'cc-usage',
+            keywords: ['command center', 'usage', 'tokens', 'cost'],
+            label: cc.sections.usage,
+            run: go(`${COMMAND_CENTER_ROUTE}?section=usage`)
+          }
+        ]
+      },
+      {
+        // Declared before Settings: cmdk keeps group order, so this keeps the
+        // theme/mode pickers on top for "theme"/"color" queries instead of
+        // buried under a fuzzy Settings match.
+        heading: cc.appearance,
+        items: [
+          {
+            icon: Palette,
+            id: 'appearance-theme',
+            keywords: ['theme', 'appearance', 'color', 'palette', 'skin', 'dark', 'light', 'look'],
+            label: cc.changeTheme,
+            to: 'theme'
+          },
+          {
+            icon: Sun,
+            id: 'appearance-mode',
+            keywords: ['appearance', 'color mode', 'brightness', 'dark', 'light', 'system'],
+            label: cc.changeColorMode,
+            to: 'color-mode'
+          }
+        ]
+      },
+      {
+        heading: cc.settings,
+        items: [
+          ...SECTIONS.map(section => ({
+            icon: section.icon,
+            id: `set-config-${section.id}`,
+            keywords: ['settings', section.label, settingsSectionLabel(section)],
+            label: settingsSectionLabel(section),
+            run: go(settingsTab(`config:${section.id}`))
+          })),
+          ...NON_CONFIG_SETTINGS.map(entry => ({
+            icon: entry.icon,
+            id: `set-${entry.tab}`,
+            keywords: ['settings', ...(entry.keywords ?? [])],
+            label: t.settings.nav[entry.labelKey],
+            run: go(settingsTab(entry.tab))
+          }))
+        ]
+      }
+    ]
+  }, [go, settingsSectionLabel, t])
+
+  // The long, granular lists (settings fields, API keys, MCP servers, archived
+  // chats) only surface once the user types — otherwise they'd bury the
+  // navigation entries on an empty palette.
+  const searchGroups = useMemo<PaletteGroup[]>(() => {
+    if (!search.trim()) {
+      return []
+    }
+
+    const result: PaletteGroup[] = []
+
+    if (sessions.length > 0) {
+      result.push({
+        heading: t.commandCenter.sections.sessions,
+        items: sessions.map(session => ({
+          icon: MessageCircle,
+          id: `session-${session.id}`,
+          keywords: ['chat', 'session', ...(session.preview ? [session.preview] : [])],
+          label: session.title,
+          run: go(sessionRoute(session.id))
+        }))
+      })
+    }
+
+    const fieldItems = SECTIONS.flatMap(section =>
+      section.keys.map(key => ({
+        icon: section.icon,
+        id: `field-${key}`,
+        keywords: ['settings', key, section.label, settingsSectionLabel(section)],
+        label: `${settingsSectionLabel(section)}: ${configFieldLabel(key)}`,
+        run: go(`${SETTINGS_ROUTE}?tab=config:${section.id}&field=${encodeURIComponent(key)}`)
+      }))
+    )
+
+    result.push({ heading: t.commandCenter.settingsFields, items: fieldItems })
+
+    if (mcpServers.length > 0) {
+      result.push({
+        heading: t.commandCenter.mcpServers,
+        items: mcpServers.map(name => ({
+          icon: Wrench,
+          id: `mcp-${name}`,
+          keywords: ['mcp', 'server', 'tool'],
+          label: name,
+          run: go(`${SETTINGS_ROUTE}?tab=mcp&server=${encodeURIComponent(name)}`)
+        }))
+      })
+    }
+
+    if (archivedSessions.length > 0) {
+      result.push({
+        heading: t.commandCenter.archivedChats,
+        items: archivedSessions.map(session => ({
+          icon: Archive,
+          id: `archived-${session.id}`,
+          keywords: ['archived', 'chat', 'session', ...(session.preview ? [session.preview] : [])],
+          label: session.title,
+          run: go(`${SETTINGS_ROUTE}?tab=sessions&session=${encodeURIComponent(session.id)}`)
+        }))
+      })
+    }
+
+    return result
+  }, [archivedSessions, configFieldLabel, go, mcpServers, search, sessions, settingsSectionLabel, t])
+
+  const groups = useMemo(() => [...baseGroups, ...searchGroups], [baseGroups, searchGroups])
+
+  // Nested palette pages (VS Code-style submenus). Reusable: add an entry here
+  // and point a root item at it via `to`.
+  const subPages = useMemo<Record<string, PalettePage>>(
+    () => ({
+      theme: {
+        title: t.settings.appearance.themeTitle,
+        placeholder: t.settings.appearance.themeDesc,
+        // Skins aren't inherently light/dark — the same skin renders in either
+        // mode. Group by appearance so picking an entry sets skin + mode at
+        // once, and keep the palette open so each pick previews live.
+        groups: (['light', 'dark'] as const).map(groupMode => ({
+          heading: groupMode === 'light' ? t.settings.modeOptions.light.label : t.settings.modeOptions.dark.label,
+          items: availableThemes.map(theme => ({
+            active: themeName === theme.name && resolvedMode === groupMode,
+            icon: groupMode === 'light' ? Sun : Moon,
+            id: `theme-${theme.name}-${groupMode}`,
+            keepOpen: true,
+            keywords: ['theme', 'appearance', 'palette', groupMode, theme.label, theme.description ?? ''],
+            label: theme.label,
+            run: () => {
+              setTheme(theme.name)
+              setMode(groupMode)
+            }
+          }))
+        }))
+      },
+      'color-mode': {
+        title: t.settings.appearance.colorMode,
+        placeholder: t.settings.appearance.colorModeDesc,
+        groups: [
+          {
+            heading: t.settings.appearance.colorMode,
+            items: THEME_MODES.map(entry => ({
+              active: mode === entry.mode,
+              icon: entry.icon,
+              id: `mode-${entry.mode}`,
+              keepOpen: true,
+              keywords: ['appearance', 'brightness', t.settings.modeOptions[entry.mode].label],
+              label: t.settings.modeOptions[entry.mode].label,
+              run: () => setMode(entry.mode)
+            }))
+          }
+        ]
+      }
+    }),
+    [availableThemes, mode, resolvedMode, setMode, setTheme, t, themeName]
+  )
+
+  const activePage = page ? subPages[page] : null
+  const visibleGroups = activePage ? activePage.groups : groups
+  const placeholder = activePage ? activePage.placeholder : t.commandCenter.searchPlaceholder
+
+  const handleSelect = (item: PaletteItem) => {
+    if (item.to) {
+      setPage(item.to)
+      setSearch('')
+
+      return
+    }
+
+    item.run?.()
+
+    if (!item.keepOpen) {
+      closeCommandPalette()
+    }
+  }
+
+  return (
+    <DialogPrimitive.Root onOpenChange={setCommandPaletteOpen} open={open}>
+      <DialogPrimitive.Portal>
+        <DialogPrimitive.Overlay className="fixed inset-0 z-[200] bg-black/15 backdrop-blur-[1px] data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0" />
+        <DialogPrimitive.Content
+          aria-describedby={undefined}
+          className="fixed left-1/2 top-[14vh] z-[210] w-[min(40rem,calc(100vw-2rem))] -translate-x-1/2 overflow-hidden rounded-xl border border-(--ui-stroke-secondary) bg-(--ui-chat-bubble-background) shadow-lg duration-150 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-top-2 data-[state=open]:zoom-in-95"
+        >
+          <DialogPrimitive.Title className="sr-only">{t.commandCenter.paletteTitle}</DialogPrimitive.Title>
+          <Command className="bg-transparent" loop>
+            {activePage && (
+              <button
+                className="flex w-full items-center gap-1.5 border-b border-border px-3 py-1.5 text-left text-xs text-muted-foreground transition-colors hover:text-foreground"
+                onClick={() => setPage(null)}
+                type="button"
+              >
+                <ChevronLeft className="size-3.5" />
+                <span>{t.commandCenter.back}</span>
+                <span className="text-muted-foreground/50">/</span>
+                <span className="font-medium text-foreground">{activePage.title}</span>
+              </button>
+            )}
+            <CommandInput
+              onKeyDown={event => {
+                if (!activePage) {
+                  return
+                }
+
+                // In a submenu: Esc and empty-input Backspace step back out
+                // instead of closing the whole palette.
+                if (event.key === 'Escape' || (event.key === 'Backspace' && search === '')) {
+                  event.preventDefault()
+                  event.stopPropagation()
+                  setPage(null)
+                }
+              }}
+              onValueChange={setSearch}
+              placeholder={placeholder}
+              value={search}
+            />
+            <CommandList className="max-h-[min(24rem,60vh)]">
+              <CommandEmpty>{t.commandCenter.noResults}</CommandEmpty>
+              {visibleGroups.map(group => (
+                <CommandGroup
+                  className="**:[[cmdk-group-heading]]:uppercase **:[[cmdk-group-heading]]:tracking-wider **:[[cmdk-group-heading]]:text-[0.6875rem] **:[[cmdk-group-heading]]:text-muted-foreground/70"
+                  heading={group.heading}
+                  key={group.heading}
+                >
+                  {group.items.map(item => {
+                    const Icon = item.icon
+
+                    return (
+                      <CommandItem
+                        className="gap-2.5"
+                        key={item.id}
+                        keywords={item.keywords}
+                        onSelect={() => handleSelect(item)}
+                        value={`${item.label} ${item.keywords?.join(' ') ?? ''} ${item.id}`}
+                      >
+                        <Icon className="size-4 shrink-0 text-muted-foreground" />
+                        <span className="truncate">{item.label}</span>
+                        {item.to ? (
+                          <ChevronRight className="ml-auto size-4 shrink-0 text-muted-foreground/70" />
+                        ) : (
+                          <Check className={cn('ml-auto size-4 text-foreground', !item.active && 'invisible')} />
+                        )}
+                      </CommandItem>
+                    )
+                  })}
+                </CommandGroup>
+              ))}
+            </CommandList>
+          </Command>
+        </DialogPrimitive.Content>
+      </DialogPrimitive.Portal>
+    </DialogPrimitive.Root>
+  )
+}

package/src/app/command-palette/marketplace-theme-page.tsx

@@ -0,0 +1,157 @@
+/**
+ * Cmd-K "Install theme…" page.
+ *
+ * Browses the VS Code Marketplace for color themes: an empty query shows the
+ * most-installed themes, typing runs a live (debounced) search against the
+ * Marketplace. Selecting a row downloads + converts + installs it via the same
+ * pipeline as the settings importer, then activates it — and stays open so the
+ * user can grab several.
+ */
+
+import { useQuery } from '@tanstack/react-query'
+import { useEffect, useState } from 'react'
+
+import { HUD_ITEM, HUD_TEXT } from '@/app/floating-hud'
+import type { DesktopMarketplaceSearchItem } from '@/global'
+import { useI18n } from '@/i18n'
+import { triggerHaptic } from '@/lib/haptics'
+import { Check, Download, Loader2, Palette } from '@/lib/icons'
+import { cn } from '@/lib/utils'
+import { installVscodeThemeFromMarketplace } from '@/themes/install'
+
+const compactNumber = new Intl.NumberFormat(undefined, { notation: 'compact', maximumFractionDigits: 1 })
+
+function useDebounced<T>(value: T, delayMs: number): T {
+  const [debounced, setDebounced] = useState(value)
+
+  useEffect(() => {
+    const handle = setTimeout(() => setDebounced(value), delayMs)
+
+    return () => clearTimeout(handle)
+  }, [value, delayMs])
+
+  return debounced
+}
+
+interface MarketplaceThemePageProps {
+  search: string
+  /** Activate a freshly installed theme by slug. */
+  onPickTheme: (name: string) => void
+}
+
+export function MarketplaceThemePage({ search, onPickTheme }: MarketplaceThemePageProps) {
+  const { t } = useI18n()
+  const copy = t.commandCenter.installTheme
+  const debouncedSearch = useDebounced(search.trim(), 300)
+  const [installingId, setInstallingId] = useState<string | null>(null)
+  const [installed, setInstalled] = useState<Record<string, true>>({})
+  const [installError, setInstallError] = useState<string | null>(null)
+
+  const query = useQuery({
+    queryKey: ['marketplace-themes', debouncedSearch],
+    queryFn: () => window.NASTECHDesktop?.themes?.searchMarketplace(debouncedSearch) ?? Promise.resolve([]),
+    staleTime: 5 * 60 * 1000
+  })
+
+  const install = async (item: DesktopMarketplaceSearchItem) => {
+    if (installingId) {
+      return
+    }
+
+    setInstallingId(item.extensionId)
+    setInstallError(null)
+
+    try {
+      const theme = await installVscodeThemeFromMarketplace(item.extensionId)
+
+      triggerHaptic('crisp')
+      setInstalled(prev => ({ ...prev, [item.extensionId]: true }))
+      onPickTheme(theme.name)
+    } catch (error) {
+      setInstallError(error instanceof Error ? error.message : copy.error)
+    } finally {
+      setInstallingId(null)
+    }
+  }
+
+  if (query.isLoading) {
+    return <Status icon={<Loader2 className="size-3.5 animate-spin" />} text={copy.loading} />
+  }
+
+  if (query.isError) {
+    return <Status text={copy.error} tone="error" />
+  }
+
+  const results = query.data ?? []
+
+  if (results.length === 0) {
+    return <Status text={copy.empty} />
+  }
+
+  return (
+    <div role="listbox">
+      {installError && <p className="px-2 pb-1 pt-1.5 text-[0.6875rem] text-(--ui-red)">{installError}</p>}
+      {results.map(item => {
+        const busy = installingId === item.extensionId
+        const done = installed[item.extensionId]
+
+        return (
+          <button
+            className={cn(
+              'flex w-full items-start rounded-md text-left transition-colors hover:bg-(--chrome-action-hover) disabled:opacity-60 aria-disabled:opacity-60',
+              HUD_ITEM,
+              HUD_TEXT
+            )}
+            disabled={Boolean(installingId) && !busy}
+            key={item.extensionId}
+            onClick={() => void install(item)}
+            onMouseDown={event => event.preventDefault()}
+            role="option"
+            type="button"
+          >
+            <Palette className="mt-0.5 size-3.5 shrink-0 text-muted-foreground" />
+            <span className="flex min-w-0 flex-col">
+              <span className="truncate font-medium">{item.displayName}</span>
+              <span className="truncate text-[0.6875rem] text-muted-foreground/80">
+                {item.publisher}
+                {item.installs > 0 ? ` · ${copy.installs(compactNumber.format(item.installs))}` : ''}
+              </span>
+            </span>
+            <span className="ml-auto mt-0.5 flex shrink-0 items-center gap-1 text-[0.6875rem] text-muted-foreground">
+              {busy ? (
+                <>
+                  <Loader2 className="size-3 animate-spin" />
+                  {copy.installing}
+                </>
+              ) : done ? (
+                <>
+                  <Check className="size-3 text-(--ui-green)" />
+                  {copy.installed}
+                </>
+              ) : (
+                <>
+                  <Download className="size-3" />
+                  {copy.install}
+                </>
+              )}
+            </span>
+          </button>
+        )
+      })}
+    </div>
+  )
+}
+
+function Status({ icon, text, tone }: { icon?: React.ReactNode; text: string; tone?: 'error' }) {
+  return (
+    <div
+      className={cn(
+        'flex items-center justify-center gap-2 px-2 py-6 text-xs',
+        tone === 'error' ? 'text-(--ui-red)' : 'text-muted-foreground'
+      )}
+    >
+      {icon}
+      {text}
+    </div>
+  )
+}