nastechai-desktop 18.1.0

package/src/app/shell/hooks/use-statusbar-items.tsx

@@ -0,0 +1,403 @@
+import { useStore } from '@nanostores/react'
+import type { ReactNode } from 'react'
+import { useCallback, useMemo } from 'react'
+
+import type { CommandCenterSection } from '@/app/command-center'
+import { GatewayMenuPanel } from '@/app/shell/gateway-menu-panel'
+import {
+  Activity,
+  AlertCircle,
+  ChevronDown,
+  Clock,
+  Command,
+  Hash,
+  Loader2,
+  Sparkles,
+  Zap,
+  ZapFilled
+} from '@/lib/icons'
+import { useI18n } from '@/i18n'
+import { formatModelStatusLabel } from '@/lib/model-status-label'
+import type { RuntimeReadinessResult } from '@/lib/runtime-readiness'
+import { contextBarLabel, LiveDuration, usageContextLabel } from '@/lib/statusbar'
+import { cn } from '@/lib/utils'
+import { setSessionYolo } from '@/lib/yolo-session'
+import { $desktopActionTasks } from '@/store/activity'
+import { $previewServerRestartStatus } from '@/store/preview'
+import {
+  $activeSessionId,
+  $busy,
+  $currentFastMode,
+  $currentModel,
+  $currentProvider,
+  $currentReasoningEffort,
+  $currentUsage,
+  $sessionStartedAt,
+  $turnStartedAt,
+  $workingSessionIds,
+  $yoloActive,
+  setModelPickerOpen,
+  setYoloActive
+} from '@/store/session'
+import { $subagentsBySession, activeSubagentCount } from '@/store/subagents'
+import { $desktopVersion, $updateApply, $updateStatus, setUpdateOverlayOpen } from '@/store/updates'
+import type { StatusResponse } from '@/types/nastech'
+
+import { CRON_ROUTE } from '../../routes'
+import type { StatusbarItem } from '../statusbar-controls'
+
+interface StatusbarItemsOptions {
+  agentsOpen: boolean
+  commandCenterOpen: boolean
+  extraLeftItems: readonly StatusbarItem[]
+  extraRightItems: readonly StatusbarItem[]
+  gatewayLogLines: readonly string[]
+  gatewayState: string
+  inferenceStatus: RuntimeReadinessResult | null
+  modelMenuContent?: ReactNode
+  openAgents: () => void
+  openCommandCenterSection: (section: CommandCenterSection) => void
+  freshDraftReady: boolean
+  requestGateway: <T = unknown>(method: string, params?: Record<string, unknown>) => Promise<T>
+  statusSnapshot: StatusResponse | null
+  toggleCommandCenter: () => void
+}
+
+export function useStatusbarItems({
+  agentsOpen,
+  commandCenterOpen,
+  extraLeftItems,
+  extraRightItems,
+  gatewayLogLines,
+  gatewayState,
+  inferenceStatus,
+  modelMenuContent,
+  openAgents,
+  openCommandCenterSection,
+  freshDraftReady,
+  requestGateway,
+  statusSnapshot,
+  toggleCommandCenter
+}: StatusbarItemsOptions) {
+  const { t } = useI18n()
+  const copy = t.shell.statusbar
+  const activeSessionId = useStore($activeSessionId)
+  const yoloActive = useStore($yoloActive)
+  const busy = useStore($busy)
+  const currentFastMode = useStore($currentFastMode)
+  const currentModel = useStore($currentModel)
+  const currentProvider = useStore($currentProvider)
+  const currentReasoningEffort = useStore($currentReasoningEffort)
+  const currentUsage = useStore($currentUsage)
+  const desktopActionTasks = useStore($desktopActionTasks)
+  const previewServerRestartStatus = useStore($previewServerRestartStatus)
+  const sessionStartedAt = useStore($sessionStartedAt)
+  const turnStartedAt = useStore($turnStartedAt)
+  const workingSessionIds = useStore($workingSessionIds)
+  const subagentsBySession = useStore($subagentsBySession)
+  const updateStatus = useStore($updateStatus)
+  const updateApply = useStore($updateApply)
+  const desktopVersion = useStore($desktopVersion)
+
+  const contextUsage = useMemo(() => usageContextLabel(currentUsage), [currentUsage])
+  const contextBar = useMemo(() => contextBarLabel(currentUsage), [currentUsage])
+
+  // Per-session approval bypass (same scope as the TUI's Shift+Tab). On a
+  // new-chat draft (no runtime session yet) we arm locally; the session-create
+  // path applies it once the backend session exists.
+  const toggleYolo = useCallback(async () => {
+    const next = !$yoloActive.get()
+    const sid = $activeSessionId.get()
+
+    setYoloActive(next)
+
+    if (!sid) {
+      return
+    }
+
+    try {
+      await setSessionYolo(requestGateway, sid, next)
+    } catch {
+      setYoloActive(!next)
+    }
+  }, [requestGateway])
+
+  const showYoloToggle = gatewayState === 'open' && (!!activeSessionId || freshDraftReady)
+
+  const gatewayMenuContent = useMemo(
+    () => (
+      <GatewayMenuPanel
+        gatewayState={gatewayState}
+        inferenceStatus={inferenceStatus}
+        logLines={gatewayLogLines}
+        onOpenSystem={() => openCommandCenterSection('system')}
+        statusSnapshot={statusSnapshot}
+      />
+    ),
+    [gatewayLogLines, gatewayState, inferenceStatus, openCommandCenterSection, statusSnapshot]
+  )
+
+  const { bgFailed, bgRunning, subagentsRunning } = useMemo(() => {
+    const actions = Object.values(desktopActionTasks)
+    const running = actions.filter(t => t.status.running).length
+    const failed = actions.filter(t => !t.status.running && (t.status.exit_code ?? 0) !== 0).length
+    const previewRunning = previewServerRestartStatus === 'running' ? 1 : 0
+    const previewFailed = previewServerRestartStatus === 'error' ? 1 : 0
+
+    const subagentsRunning = Object.values(subagentsBySession).reduce(
+      (sum, items) => sum + activeSubagentCount(items),
+      0
+    )
+
+    return {
+      bgFailed: failed + previewFailed,
+      bgRunning: workingSessionIds.length + running + previewRunning,
+      subagentsRunning
+    }
+  }, [desktopActionTasks, previewServerRestartStatus, subagentsBySession, workingSessionIds])
+
+  const gatewayOpen = gatewayState === 'open'
+  const gatewayConnecting = gatewayState === 'connecting'
+  const inferenceReady = gatewayOpen && inferenceStatus?.ready === true
+  const gatewayDegraded = gatewayOpen || gatewayConnecting
+
+  const gatewayDetail = gatewayOpen
+    ? inferenceStatus?.ready
+      ? copy.gatewayReady
+      : inferenceStatus
+        ? copy.gatewayNeedsSetup
+        : copy.gatewayChecking
+    : gatewayConnecting
+      ? copy.gatewayConnecting
+      : copy.gatewayOffline
+
+  const gatewayClassName = inferenceReady
+    ? undefined
+    : gatewayDegraded
+      ? 'text-amber-600 hover:text-amber-600'
+      : 'text-destructive hover:text-destructive'
+
+  const versionItem = useMemo<StatusbarItem>(() => {
+    const appVersion = desktopVersion?.appVersion
+    const sha = updateStatus?.currentSha?.slice(0, 7) ?? null
+    const behind = updateStatus?.behind ?? 0
+    const applying = updateApply.applying || updateApply.stage === 'restart'
+    const base = appVersion ? `v${appVersion}` : (sha ?? copy.unknown)
+    const behindHint = !applying && behind > 0 ? ` (+${behind})` : ''
+
+    const label = applying
+      ? updateApply.stage === 'restart'
+        ? `${base} · ${copy.restart}`
+        : `${base} · ${copy.update}`
+      : `${base}${behindHint}`
+
+    const tooltip = [
+      applying ? updateApply.message || copy.updateInProgress : null,
+      !applying && behind > 0 && copy.commitsBehind(behind, updateStatus?.branch ?? '...'),
+      appVersion && copy.desktopVersion(appVersion),
+      sha && copy.commit(sha),
+      updateStatus?.branch && copy.branch(updateStatus.branch)
+    ]
+      .filter(Boolean)
+      .join(' · ')
+
+    return {
+      className: !applying && behind > 0 ? 'text-primary hover:text-primary' : undefined,
+      detail: appVersion && sha && !applying ? sha : undefined,
+      hidden: !appVersion && !sha,
+      icon: applying ? <Loader2 className="size-3 animate-spin" /> : <Hash className="size-3" />,
+      id: 'version',
+      label,
+      onSelect: () => setUpdateOverlayOpen(true),
+      title: tooltip || undefined,
+      variant: 'action'
+    }
+  }, [
+    desktopVersion?.appVersion,
+    copy,
+    updateApply.applying,
+    updateApply.message,
+    updateApply.stage,
+    updateStatus?.behind,
+    updateStatus?.branch,
+    updateStatus?.currentSha
+  ])
+
+  const coreLeftStatusbarItems = useMemo<readonly StatusbarItem[]>(
+    () => [
+      {
+        className: `w-7 justify-center px-0${commandCenterOpen ? ' bg-accent/55 text-foreground' : ''}`,
+        icon: <Command className="size-3.5" />,
+        id: 'command-center',
+        onSelect: toggleCommandCenter,
+        title: commandCenterOpen ? copy.closeCommandCenter : copy.openCommandCenter,
+        variant: 'action'
+      },
+      {
+        className: gatewayClassName,
+        detail: gatewayDetail,
+        icon: inferenceReady ? <Activity className="size-3" /> : <AlertCircle className="size-3" />,
+        id: 'gateway-health',
+        label: copy.gateway,
+        menuClassName: 'w-72',
+        menuContent: gatewayMenuContent,
+        title: inferenceStatus?.reason || copy.gatewayTitle,
+        variant: 'menu'
+      },
+      {
+        className: cn(
+          agentsOpen && 'bg-accent/55 text-foreground',
+          bgFailed > 0 && 'text-destructive hover:text-destructive'
+        ),
+        detail:
+          subagentsRunning > 0
+            ? copy.subagents(subagentsRunning)
+            : bgFailed > 0
+              ? copy.failed(bgFailed)
+              : bgRunning > 0
+                ? copy.running(bgRunning)
+                : undefined,
+        icon:
+          bgFailed > 0 ? (
+            <AlertCircle className="size-3" />
+          ) : bgRunning > 0 || subagentsRunning > 0 ? (
+            <Loader2 className="size-3 animate-spin" />
+          ) : (
+            <Sparkles className="size-3" />
+          ),
+        id: 'agents',
+        label: copy.agents,
+        onSelect: openAgents,
+        title: agentsOpen ? copy.closeAgents : copy.openAgents,
+        variant: 'action'
+      },
+      {
+        icon: <Clock className="size-3" />,
+        id: 'cron',
+        label: copy.cron,
+        title: copy.openCron,
+        to: CRON_ROUTE,
+        variant: 'action'
+      }
+    ],
+    [
+      agentsOpen,
+      bgFailed,
+      bgRunning,
+      commandCenterOpen,
+      copy,
+      gatewayMenuContent,
+      gatewayClassName,
+      gatewayDetail,
+      inferenceReady,
+      inferenceStatus?.reason,
+      openAgents,
+      subagentsRunning,
+      toggleCommandCenter
+    ]
+  )
+
+  const coreRightStatusbarItems = useMemo<readonly StatusbarItem[]>(
+    () => [
+      {
+        detail: <LiveDuration since={turnStartedAt} />,
+        hidden: !busy || !turnStartedAt,
+        icon: <Loader2 className="size-3 animate-spin" />,
+        id: 'running-timer',
+        label: copy.turnRunning,
+        title: copy.currentTurnElapsed,
+        variant: 'text'
+      },
+      {
+        detail: contextBar || undefined,
+        hidden: !contextUsage,
+        id: 'context-usage',
+        label: contextUsage,
+        title: copy.contextUsage,
+        variant: 'text'
+      },
+      {
+        detail: <LiveDuration since={sessionStartedAt} />,
+        hidden: !sessionStartedAt,
+        id: 'session-timer',
+        label: copy.session,
+        title: copy.runtimeSessionElapsed,
+        variant: 'text'
+      },
+      {
+        className: cn('px-1', yoloActive && 'bg-(--chrome-action-hover)'),
+        hidden: !showYoloToggle,
+        icon: yoloActive ? (
+          <ZapFilled className="size-3.5 shrink-0" />
+        ) : (
+          <Zap className="size-3.5 shrink-0 opacity-70" />
+        ),
+        id: 'yolo',
+        onSelect: () => void toggleYolo(),
+        title: yoloActive ? copy.yoloOn : copy.yoloOff,
+        variant: 'action'
+      },
+      {
+        id: 'model-summary',
+        label: (
+          <span className="inline-flex min-w-0 items-center gap-0.5">
+            <span className="truncate">
+              {formatModelStatusLabel(currentModel, {
+                fastMode: currentFastMode,
+                reasoningEffort: currentReasoningEffort
+              })}
+            </span>
+            <ChevronDown className="size-2.5 shrink-0 opacity-50" />
+          </span>
+        ),
+        ...(modelMenuContent
+          ? {
+              menuAlign: 'end' as const,
+              menuClassName: 'w-64',
+              menuContent: modelMenuContent,
+              title: currentProvider
+                ? copy.modelTitle(currentProvider, currentModel || copy.modelNone)
+                : copy.switchModel,
+              variant: 'menu' as const
+            }
+          : {
+              onSelect: () => setModelPickerOpen(true),
+              title: currentProvider
+                ? copy.providerModelTitle(currentProvider, currentModel || copy.noModel)
+                : copy.openModelPicker,
+              variant: 'action' as const
+            })
+      },
+      versionItem
+    ],
+    [
+      busy,
+      contextBar,
+      contextUsage,
+      copy,
+      currentFastMode,
+      currentModel,
+      currentProvider,
+      currentReasoningEffort,
+      modelMenuContent,
+      sessionStartedAt,
+      showYoloToggle,
+      toggleYolo,
+      turnStartedAt,
+      versionItem,
+      yoloActive
+    ]
+  )
+
+  const leftStatusbarItems = useMemo(
+    () => [...coreLeftStatusbarItems, ...extraLeftItems],
+    [coreLeftStatusbarItems, extraLeftItems]
+  )
+
+  const statusbarItems = useMemo(
+    () => [...extraRightItems, ...coreRightStatusbarItems],
+    [coreRightStatusbarItems, extraRightItems]
+  )
+
+  return { leftStatusbarItems, statusbarItems }
+}

package/src/app/shell/keybind-panel.tsx

@@ -0,0 +1,220 @@
+import { useStore } from '@nanostores/react'
+import { Dialog as DialogPrimitive } from 'radix-ui'
+import { useState } from 'react'
+
+import { Button } from '@/components/ui/button'
+import { Codicon } from '@/components/ui/codicon'
+import { DisclosureCaret } from '@/components/ui/disclosure-caret'
+import { useI18n } from '@/i18n'
+import {
+  KEYBIND_ACTIONS,
+  KEYBIND_CATEGORIES,
+  KEYBIND_PANEL_ACTION,
+  KEYBIND_READONLY,
+  type KeybindActionMeta,
+  type KeybindReadonly
+} from '@/lib/keybinds/actions'
+import { formatCombo } from '@/lib/keybinds/combo'
+import { arraysEqual } from '@/lib/storage'
+import {
+  $bindings,
+  $capture,
+  $keybindPanelOpen,
+  beginCapture,
+  closeKeybindPanel,
+  conflictsFor,
+  endCapture,
+  resetAllBindings,
+  resetBinding
+} from '@/store/keybinds'
+
+// The full hotkey map. Quiet popover, click a row's chip to rebind.
+export function KeybindPanel() {
+  const { t } = useI18n()
+  const open = useStore($keybindPanelOpen)
+  const bindings = useStore($bindings)
+  const k = t.keybinds
+  const [collapsed, setCollapsed] = useState<ReadonlySet<string>>(new Set())
+
+  const openCombo = bindings[KEYBIND_PANEL_ACTION]?.[0]
+
+  const toggleCategory = (category: string) =>
+    setCollapsed(prev => {
+      const next = new Set(prev)
+
+      if (next.has(category)) {
+        next.delete(category)
+      } else {
+        next.add(category)
+      }
+
+      return next
+    })
+
+  return (
+    <DialogPrimitive.Root onOpenChange={next => !next && closeKeybindPanel()} open={open}>
+      <DialogPrimitive.Portal>
+        <DialogPrimitive.Overlay className="fixed inset-0 z-[200] bg-black/25 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-[9vh] z-[210] flex max-h-[82vh] w-[min(38rem,calc(100vw-2rem))] -translate-x-1/2 flex-col overflow-hidden rounded-xl border border-(--stroke-nastech) bg-(--ui-chat-bubble-background) shadow-nastech 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]:zoom-in-95"
+        >
+          {/* Header */}
+          <div className="flex items-center justify-between gap-3 border-b border-(--ui-stroke-tertiary) px-4 py-3">
+            <div className="min-w-0">
+              <DialogPrimitive.Title className="text-sm font-semibold text-foreground">{k.title}</DialogPrimitive.Title>
+              <DialogPrimitive.Description className="mt-0.5 text-[0.72rem] text-muted-foreground">
+                {k.subtitle(openCombo ? formatCombo(openCombo) : '')}
+              </DialogPrimitive.Description>
+            </div>
+            <HeaderButton icon="discard" label={k.resetAll} onClick={resetAllBindings} />
+          </div>
+
+          {/* Body */}
+          <div className="min-h-0 flex-1 overflow-y-auto px-2 py-1.5">
+            {KEYBIND_CATEGORIES.map(category => {
+              const actions = KEYBIND_ACTIONS.filter(
+                action => action.category === category && action.id !== KEYBIND_PANEL_ACTION
+              )
+
+              const readonly = KEYBIND_READONLY.filter(shortcut => shortcut.category === category)
+
+              if (actions.length === 0 && readonly.length === 0) {
+                return null
+              }
+
+              const sectionOpen = !collapsed.has(category)
+
+              return (
+                <section key={category}>
+                  <CategoryHeader
+                    label={k.categories[category] ?? category}
+                    onToggle={() => toggleCategory(category)}
+                    open={sectionOpen}
+                  />
+                  {sectionOpen && actions.map(action => <KeybindRow action={action} key={action.id} />)}
+                  {sectionOpen && readonly.map(shortcut => <ReadonlyRow key={shortcut.id} shortcut={shortcut} />)}
+                </section>
+              )
+            })}
+          </div>
+        </DialogPrimitive.Content>
+      </DialogPrimitive.Portal>
+    </DialogPrimitive.Root>
+  )
+}
+
+// Collapsible category header — chevron fades in on hover, rotates when open
+// (matches the sessions sidebar section pattern).
+function CategoryHeader({ label, onToggle, open }: { label: string; onToggle: () => void; open: boolean }) {
+  return (
+    <button
+      className="group/kbd-cat flex w-fit items-center gap-1 px-2.5 pb-1 pt-3 text-left leading-none"
+      onClick={onToggle}
+      type="button"
+    >
+      <span className="text-[0.64rem] font-semibold uppercase tracking-[0.12em] text-muted-foreground/70">{label}</span>
+      <DisclosureCaret
+        className="text-(--ui-text-tertiary) opacity-0 transition group-hover/kbd-cat:opacity-100"
+        open={open}
+        size="0.6875rem"
+      />
+    </button>
+  )
+}
+
+function HeaderButton({ icon, label, onClick }: { icon: string; label: string; onClick: () => void }) {
+  return (
+    <Button className="shrink-0 text-[0.72rem]" onClick={onClick} size="xs" variant="text">
+      <Codicon name={icon} size="0.8125rem" />
+      {label}
+    </Button>
+  )
+}
+
+function KeybindRow({ action }: { action: KeybindActionMeta }) {
+  const { t } = useI18n()
+  const k = t.keybinds
+  const bindings = useStore($bindings)
+  const capture = useStore($capture)
+
+  const combos = bindings[action.id] ?? []
+  const capturing = capture === action.id
+  const label = k.actions[action.id] ?? action.id
+  const isDefault = arraysEqual(combos, [...action.defaults])
+
+  const conflict = combos
+    .flatMap(combo => conflictsFor(action.id, combo).map(other => k.actions[other] ?? other))
+    .find(Boolean)
+
+  return (
+    <div className="group flex items-center gap-2.5 rounded-lg px-2.5 py-1 transition-colors hover:bg-(--chrome-action-hover)">
+      <span className="min-w-0 flex-1 truncate text-[0.82rem] text-foreground/90">{label}</span>
+
+      {conflict && (
+        <span className="flex size-4 items-center justify-center text-amber-500/90" title={k.conflictWith(conflict)}>
+          <Codicon name="warning" size="0.8125rem" />
+        </span>
+      )}
+
+      {/* Click the caps to rebind — the on-screen editor does the same thing. */}
+      <button
+        aria-label={k.rebind}
+        className="flex shrink-0 items-center gap-1 rounded-lg outline-none"
+        onClick={() => (capturing ? endCapture() : beginCapture(action.id))}
+        title={k.rebind}
+        type="button"
+      >
+        {capturing ? (
+          <span className="kbd-cap kbd-capturing">{k.pressKey}</span>
+        ) : combos.length > 0 ? (
+          combos.map(combo => (
+            <span className="kbd-cap" key={combo}>
+              {formatCombo(combo)}
+            </span>
+          ))
+        ) : (
+          <span className="kbd-cap kbd-cap--ghost">{k.set}</span>
+        )}
+      </button>
+
+      {/* Reset only shows once a binding diverges from its default; the spacer
+          holds the column otherwise so rows stay aligned. */}
+      {isDefault ? (
+        <span aria-hidden className="size-6 shrink-0" />
+      ) : (
+        <button
+          aria-label={k.reset}
+          className="grid size-6 shrink-0 place-items-center rounded-md text-muted-foreground/70 opacity-0 transition-all hover:bg-(--ui-control-active-background) hover:text-foreground group-hover:opacity-100"
+          onClick={() => resetBinding(action.id)}
+          title={k.reset}
+          type="button"
+        >
+          <Codicon name="discard" size="0.8125rem" />
+        </button>
+      )}
+    </div>
+  )
+}
+
+// Fixed shortcut: same layout as KeybindRow but the caps aren't interactive and
+// the trailing reset slot stays empty (spacer keeps the columns aligned).
+function ReadonlyRow({ shortcut }: { shortcut: KeybindReadonly }) {
+  const { t } = useI18n()
+  const k = t.keybinds
+  const label = k.actions[shortcut.id] ?? shortcut.id
+
+  return (
+    <div className="flex items-center gap-2.5 rounded-lg px-2.5 py-1">
+      <span className="min-w-0 flex-1 truncate text-[0.82rem] text-foreground/75">{label}</span>
+      <div className="flex shrink-0 items-center gap-1">
+        {shortcut.keys.map(key => (
+          <span className="kbd-cap" key={key}>
+            {formatCombo(key)}
+          </span>
+        ))}
+      </div>
+      <span aria-hidden className="size-6 shrink-0" />
+    </div>
+  )
+}