nastechai-desktop 18.1.0

package/src/app/settings/use-deep-link-highlight.ts

@@ -0,0 +1,60 @@
+import { useEffect } from 'react'
+import { useSearchParams } from 'react-router-dom'
+
+interface DeepLinkHighlightOptions {
+  param: string
+  ready: (target: string) => boolean
+  elementId: (target: string) => string
+  onResolve?: (target: string) => void
+  block?: ScrollLogicalPosition
+}
+
+// Deep-link from the command palette (?<param>=<id>): once the target row is
+// renderable, scroll it into view and flash it, then drop the param so it
+// doesn't re-fire. Returns the pending target (null once consumed) so callers
+// can force the row open before it mounts.
+export function useDeepLinkHighlight({
+  param,
+  ready,
+  elementId,
+  onResolve,
+  block = 'center'
+}: DeepLinkHighlightOptions): null | string {
+  const [searchParams, setSearchParams] = useSearchParams()
+  const target = searchParams.get(param)
+
+  useEffect(() => {
+    if (!target || !ready(target)) {
+      return
+    }
+
+    onResolve?.(target)
+
+    // Defer a frame so async state (expansion, selection) mounts the row first.
+    const scrollTimeout = window.setTimeout(() => {
+      const element = document.getElementById(elementId(target))
+
+      if (!element) {
+        return
+      }
+
+      element.scrollIntoView({ behavior: 'smooth', block })
+      element.classList.add('setting-field-highlight')
+      window.setTimeout(() => element.classList.remove('setting-field-highlight'), 1600)
+    }, 80)
+
+    setSearchParams(
+      previous => {
+        const next = new URLSearchParams(previous)
+        next.delete(param)
+
+        return next
+      },
+      { replace: true }
+    )
+
+    return () => window.clearTimeout(scrollTimeout)
+  }, [block, elementId, onResolve, param, ready, setSearchParams, target])
+
+  return target
+}

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

@@ -0,0 +1,167 @@
+import { useStore } from '@nanostores/react'
+import type { CSSProperties, ReactNode } from 'react'
+import { useSyncExternalStore } from 'react'
+
+import { NotificationStack } from '@/components/notifications'
+import { PaneShell } from '@/components/pane-shell'
+import { SidebarProvider } from '@/components/ui/sidebar'
+import {
+  $fileBrowserOpen,
+  $panesFlipped,
+  $sidebarOpen,
+  FILE_BROWSER_DEFAULT_WIDTH,
+  FILE_BROWSER_PANE_ID,
+  setSidebarOpen
+} from '@/store/layout'
+import { $paneWidthOverride } from '@/store/panes'
+import { $connection } from '@/store/session'
+
+import { KeybindPanel } from './keybind-panel'
+import { StatusbarControls, type StatusbarItem } from './statusbar-controls'
+import { TITLEBAR_HEIGHT, titlebarControlsPosition } from './titlebar'
+import { TitlebarControls, type TitlebarTool } from './titlebar-controls'
+
+interface AppShellProps {
+  children: ReactNode
+  leftStatusbarItems?: readonly StatusbarItem[]
+  leftTitlebarTools?: readonly TitlebarTool[]
+  onOpenSettings: () => void
+  overlays?: ReactNode
+  statusbarItems?: readonly StatusbarItem[]
+  titlebarTools?: readonly TitlebarTool[]
+}
+
+// Renderer-side fallback so layout snaps even when the main-process fullscreen event
+// hasn't landed yet (e.g. dev reloads, before the IPC bridge is wired).
+function subscribeWindowSize(cb: () => void) {
+  window.addEventListener('resize', cb)
+  window.addEventListener('fullscreenchange', cb)
+
+  return () => {
+    window.removeEventListener('resize', cb)
+    window.removeEventListener('fullscreenchange', cb)
+  }
+}
+
+const viewportIsFullscreen = () =>
+  window.innerWidth >= window.screen.width && window.innerHeight >= window.screen.height
+
+export function AppShell({
+  children,
+  leftStatusbarItems,
+  leftTitlebarTools,
+  onOpenSettings,
+  overlays,
+  statusbarItems,
+  titlebarTools
+}: AppShellProps) {
+  const sidebarOpen = useStore($sidebarOpen)
+  const fileBrowserOpen = useStore($fileBrowserOpen)
+  const panesFlipped = useStore($panesFlipped)
+  const fileBrowserWidthOverride = useStore($paneWidthOverride(FILE_BROWSER_PANE_ID))
+  const connection = useStore($connection)
+  const viewportFullscreen = useSyncExternalStore(subscribeWindowSize, viewportIsFullscreen, () => false)
+  const isFullscreen = Boolean(connection?.isFullscreen) || viewportFullscreen
+  const titlebarControls = titlebarControlsPosition(connection?.windowButtonPosition, isFullscreen)
+  // Width Windows/Linux reserve for the OS-painted min/max/close overlay (zero
+  // on macOS, where window controls sit on the left and are reported via
+  // windowButtonPosition instead). The right tool cluster has to clear them.
+  const nativeOverlayWidth = connection?.nativeOverlayWidth ?? 0
+  const titlebarToolsRight = nativeOverlayWidth > 0 ? `${nativeOverlayWidth}px` : '0.75rem'
+
+  // The inset clears the top-left titlebar buttons when nothing covers the
+  // window's left edge. Default layout: the sessions sidebar sits there.
+  // Flipped layout: the file browser does instead.
+  const leftEdgePaneOpen = panesFlipped ? fileBrowserOpen : sidebarOpen
+
+  const titlebarContentInset = leftEdgePaneOpen
+    ? 0
+    : titlebarControls.left + TITLEBAR_HEIGHT + Math.round(TITLEBAR_HEIGHT / 2)
+
+  // The static system cluster (haptics, profiles, settings, right-sidebar) is
+  // hardcoded in TitlebarControls. Pane-supplied tools (preview's group) render
+  // in a separate cluster anchored further left.
+  //
+  // Width math has to include the `gap-x-1` (0.25rem) between buttons:
+  // N buttons + (N - 1) inner gaps, plus one extra 0.25rem of breathing room
+  // between the pane-tool cluster and the system cluster so they don't sit
+  // flush against each other. Modeled as N gaps (N - 1 inner + 1 trailing)
+  // to keep the formula generic for any pane-tool count.
+  const SYSTEM_TOOL_COUNT = 4
+  const paneToolCount = titlebarTools?.filter(tool => !tool.hidden).length ?? 0
+  const systemToolsWidth = `calc(${SYSTEM_TOOL_COUNT} * (var(--titlebar-control-size) + 0.25rem))`
+
+  const fileBrowserWidth =
+    fileBrowserWidthOverride !== undefined ? `${fileBrowserWidthOverride}px` : FILE_BROWSER_DEFAULT_WIDTH
+
+  // Where the pane-tool cluster's right edge sits, measured from the inner
+  // titlebar padding (--titlebar-tools-right). Two anchors:
+  //   - file-browser closed → flush against static cluster's left edge
+  //   - file-browser open   → flush against the file-browser pane's left edge
+  //                           (= preview pane's right edge)
+  const previewToolbarGap = fileBrowserOpen ? fileBrowserWidth : systemToolsWidth
+
+  // Used by the drag region to know where the rightmost interactive element
+  // ends. When pane tools are present, that's `gap + paneCount * controlSize
+  // + paneCount * 0.25rem` (the leftmost button is at `tools-right + gap +
+  // paneCount * (size + gap-x-1)`). Otherwise the static cluster's footprint
+  // is enough.
+  const titlebarToolsWidth =
+    paneToolCount > 0
+      ? `calc(${previewToolbarGap} + ${paneToolCount} * (var(--titlebar-control-size) + 0.25rem))`
+      : systemToolsWidth
+
+  return (
+    <SidebarProvider
+      className="h-screen min-h-0 flex-col bg-background"
+      onOpenChange={setSidebarOpen}
+      open={sidebarOpen}
+      style={
+        {
+          // Alias for shadcn <Sidebar> descendants. Resolves to the chat-sidebar
+          // pane track via PaneShell's emitted --pane-chat-sidebar-width.
+          '--sidebar-width': 'var(--pane-chat-sidebar-width)',
+          '--titlebar-height': `${TITLEBAR_HEIGHT}px`,
+          '--titlebar-content-inset': `${titlebarContentInset}px`,
+          '--titlebar-controls-left': `${titlebarControls.left}px`,
+          '--titlebar-controls-top': `${titlebarControls.top}px`,
+          '--titlebar-tools-right': titlebarToolsRight,
+          '--titlebar-tools-width': titlebarToolsWidth,
+          // Anchor for the pane-tool cluster's right edge in TitlebarControls.
+          // Sourced from the layout store rather than the PaneShell-emitted
+          // --pane-*-width vars because the titlebar is a sibling of PaneShell
+          // and CSS variables resolve at the consumer's scope.
+          '--shell-preview-toolbar-gap': previewToolbarGap
+        } as CSSProperties
+      }
+    >
+      <TitlebarControls leftTools={leftTitlebarTools} onOpenSettings={onOpenSettings} tools={titlebarTools} />
+
+      <main className="relative z-3 flex min-h-0 w-full flex-1 flex-col overflow-hidden transition-none">
+        <PaneShell className="min-h-0 flex-1">
+          <div
+            aria-hidden="true"
+            className="pointer-events-none absolute left-0 top-0 z-1 h-(--titlebar-height) w-(--titlebar-controls-left) [-webkit-app-region:drag]"
+          />
+          <div
+            aria-hidden="true"
+            className="pointer-events-none absolute top-0 z-1 h-(--titlebar-height) left-[calc(var(--titlebar-controls-left)+(var(--titlebar-control-size)*2)+0.75rem)] right-[calc(var(--titlebar-tools-right)+var(--titlebar-tools-width)+0.75rem)] [-webkit-app-region:drag]"
+          />
+
+          {children}
+        </PaneShell>
+
+        <StatusbarControls items={statusbarItems} leftItems={leftStatusbarItems} />
+      </main>
+
+      {overlays}
+
+      {/* Keybind map dialog (titlebar ⌨ button / ⌘/). */}
+      <KeybindPanel />
+
+      {/* Mounted at the shell root (after overlays) so success/error toasts
+          surface above every route and overlay — not just the chat view. */}
+      <NotificationStack />
+    </SidebarProvider>
+  )
+}

package/src/app/shell/gateway-menu-panel.tsx

@@ -0,0 +1,150 @@
+import { IconLayoutDashboard } from '@tabler/icons-react'
+
+import { StatusDot, type StatusTone } from '@/components/status-dot'
+import { Button } from '@/components/ui/button'
+import { Tip } from '@/components/ui/tooltip'
+import { useI18n } from '@/i18n'
+import { Activity, AlertCircle } from '@/lib/icons'
+import type { RuntimeReadinessResult } from '@/lib/runtime-readiness'
+import { cn } from '@/lib/utils'
+import type { StatusResponse } from '@/types/nastech'
+
+interface GatewayMenuPanelProps {
+  gatewayState: string
+  inferenceStatus: RuntimeReadinessResult | null
+  logLines: readonly string[]
+  onOpenSystem: () => void
+  statusSnapshot: StatusResponse | null
+}
+
+const PLATFORM_TONE: Record<string, StatusTone> = {
+  connected: 'good',
+  connecting: 'warn',
+  retrying: 'warn',
+  pending_restart: 'warn',
+  startup_failed: 'bad',
+  fatal: 'bad'
+}
+
+const prettyState = (state: string) => state.replace(/_/g, ' ').replace(/^./, c => c.toUpperCase())
+
+// Strip leading "YYYY-MM-DD HH:MM:SS,mmm " and "[runtime_id] " prefixes from
+// log lines so they don't dominate the display. Full text preserved on hover.
+const TIMESTAMP_RE = /^\d{4}-\d{2}-\d{2}[ T]\d{2}:\d{2}:\d{2}[,.\d]*\s+/
+const RUNTIME_BRACKET_RE = /^\[[^\]]+]\s+/
+const trimLogLine = (raw: string) => raw.trim().replace(TIMESTAMP_RE, '').replace(RUNTIME_BRACKET_RE, '')
+
+export function GatewayMenuPanel({
+  gatewayState,
+  inferenceStatus,
+  logLines,
+  onOpenSystem,
+  statusSnapshot
+}: GatewayMenuPanelProps) {
+  const { t } = useI18n()
+  const copy = t.shell.gatewayMenu
+  const gatewayOpen = gatewayState === 'open'
+  const gatewayConnecting = gatewayState === 'connecting'
+  const inferenceReady = gatewayOpen && inferenceStatus?.ready === true
+
+  const connectionLabel = gatewayOpen
+    ? copy.connected
+    : gatewayConnecting
+      ? copy.connecting
+      : prettyState(gatewayState || copy.offline)
+
+  const inferenceLabel = gatewayOpen
+    ? inferenceStatus?.ready
+      ? copy.inferenceReady
+      : inferenceStatus
+        ? copy.inferenceNotReady
+        : copy.checkingInference
+    : copy.disconnected
+
+  const platforms = Object.entries(statusSnapshot?.gateway_platforms || {}).sort(([l], [r]) => l.localeCompare(r))
+  const recentLogs = logLines.slice(-5)
+
+  return (
+    <div className="text-sm">
+      <div className="flex items-center justify-between gap-2 px-3 py-2.5">
+        <div className="flex min-w-0 items-center gap-2">
+          {inferenceReady ? (
+            <Activity className="size-3.5 text-primary" />
+          ) : (
+            <AlertCircle className={cn('size-3.5', gatewayOpen ? 'text-amber-600' : 'text-destructive')} />
+          )}
+          <span className="font-medium">{copy.gateway}</span>
+          <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
+            <StatusDot tone={inferenceReady ? 'good' : gatewayOpen ? 'warn' : 'bad'} />
+            {inferenceLabel}
+          </span>
+        </div>
+        <div className="flex items-center">
+          <Tip label={copy.openSystem}>
+            <Button
+              aria-label={copy.openSystem}
+              className="text-muted-foreground hover:text-foreground"
+              onClick={onOpenSystem}
+              size="icon-sm"
+              variant="ghost"
+            >
+              <IconLayoutDashboard />
+            </Button>
+          </Tip>
+        </div>
+      </div>
+
+      <div className="border-t border-border/50 px-3 py-2 text-xs text-muted-foreground">
+        <div>{copy.connection(connectionLabel)}</div>
+        {inferenceStatus?.reason && <div className="mt-1 line-clamp-3">{inferenceStatus.reason}</div>}
+      </div>
+
+      {recentLogs.length > 0 && (
+        <div className="border-t border-border/50 px-3 py-2">
+          <SectionLabel>{copy.recentActivity}</SectionLabel>
+          <ul className="mt-1.5 space-y-0.5">
+            {recentLogs.map((line, index) => (
+              <Tip key={`${index}:${line}`} label={line.trim()}>
+                <li className="truncate font-mono text-[0.68rem] text-muted-foreground/85">
+                  {trimLogLine(line) || '\u00A0'}
+                </li>
+              </Tip>
+            ))}
+          </ul>
+          <Button
+            className="-ml-2 mt-1.5 font-medium text-muted-foreground"
+            onClick={onOpenSystem}
+            size="xs"
+            type="button"
+            variant="text"
+          >
+            {copy.viewAllLogs}
+          </Button>
+        </div>
+      )}
+
+      {platforms.length > 0 && (
+        <div className="border-t border-border/50 px-3 py-2">
+          <SectionLabel>{copy.messagingPlatforms}</SectionLabel>
+          <ul className="mt-1.5 space-y-1">
+            {platforms.map(([name, platform]) => (
+              <li className="flex items-center justify-between gap-2 text-xs" key={name}>
+                <span className="truncate capitalize">{name}</span>
+                <span className="flex items-center gap-1.5 text-[0.66rem] text-muted-foreground">
+                  <StatusDot tone={PLATFORM_TONE[platform.state] || 'muted'} />
+                  {prettyState(platform.state)}
+                </span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  )
+}
+
+function SectionLabel({ children }: { children: string }) {
+  return (
+    <div className="text-[0.62rem] font-semibold uppercase tracking-[0.14em] text-muted-foreground/80">{children}</div>
+  )
+}

package/src/app/shell/hooks/use-overlay-routing.ts

@@ -0,0 +1,71 @@
+import { useCallback, useEffect, useMemo, useRef } from 'react'
+import { useLocation, useNavigate } from 'react-router-dom'
+
+import { type CommandCenterSection } from '@/app/command-center'
+import { AGENTS_ROUTE, appViewForPath, COMMAND_CENTER_ROUTE, isOverlayView, NEW_CHAT_ROUTE } from '@/app/routes'
+
+const SECTIONS = ['sessions', 'system', 'usage'] as const
+
+export function useOverlayRouting() {
+  const location = useLocation()
+  const navigate = useNavigate()
+
+  const currentView = appViewForPath(location.pathname)
+  const settingsOpen = currentView === 'settings'
+  const commandCenterOpen = currentView === 'command-center'
+  const agentsOpen = currentView === 'agents'
+  const cronOpen = currentView === 'cron'
+  const profilesOpen = currentView === 'profiles'
+  const chatOpen = currentView === 'chat'
+  const overlayOpen = isOverlayView(currentView)
+
+  // Overlay routes (settings/command-center/agents) stash the underlying path
+  // so closing them returns there instead of bouncing to /.
+  const returnPathRef = useRef(NEW_CHAT_ROUTE)
+
+  useEffect(() => {
+    if (!overlayOpen) {
+      returnPathRef.current = `${location.pathname}${location.search}${location.hash}`
+    }
+  }, [location.hash, location.pathname, location.search, overlayOpen])
+
+  const commandCenterInitialSection = useMemo<CommandCenterSection | undefined>(
+    () => SECTIONS.find(value => value === new URLSearchParams(location.search).get('section')),
+    [location.search]
+  )
+
+  const openCommandCenterSection = useCallback(
+    (section: CommandCenterSection) => navigate(`${COMMAND_CENTER_ROUTE}?section=${section}`),
+    [navigate]
+  )
+
+  const closeOverlayToPreviousRoute = useCallback(
+    () => navigate(returnPathRef.current || NEW_CHAT_ROUTE, { replace: true }),
+    [navigate]
+  )
+
+  const toggleCommandCenter = useCallback(() => {
+    if (commandCenterOpen) {
+      closeOverlayToPreviousRoute()
+    } else {
+      navigate(COMMAND_CENTER_ROUTE)
+    }
+  }, [closeOverlayToPreviousRoute, commandCenterOpen, navigate])
+
+  const openAgents = useCallback(() => navigate(AGENTS_ROUTE), [navigate])
+
+  return {
+    agentsOpen,
+    chatOpen,
+    closeOverlayToPreviousRoute,
+    commandCenterInitialSection,
+    commandCenterOpen,
+    cronOpen,
+    currentView,
+    openAgents,
+    openCommandCenterSection,
+    profilesOpen,
+    settingsOpen,
+    toggleCommandCenter
+  }
+}

package/src/app/shell/hooks/use-status-snapshot.ts

@@ -0,0 +1,57 @@
+import { useEffect, useState } from 'react'
+
+import { getLogs, getStatus } from '@/nastech'
+import { evaluateRuntimeReadiness, type RuntimeReadinessResult } from '@/lib/runtime-readiness'
+import type { StatusResponse } from '@/types/nastech'
+
+const REFRESH_MS = 15_000
+const LOG_TAIL = 12
+
+type GatewayRequester = <T = unknown>(method: string, params?: Record<string, unknown>) => Promise<T>
+
+export function useStatusSnapshot(gatewayState: string | undefined, requestGateway: GatewayRequester) {
+  const [statusSnapshot, setStatusSnapshot] = useState<StatusResponse | null>(null)
+  const [gatewayLogLines, setGatewayLogLines] = useState<string[]>([])
+  const [inferenceStatus, setInferenceStatus] = useState<RuntimeReadinessResult | null>(null)
+
+  useEffect(() => {
+    let cancelled = false
+
+    const refresh = async () => {
+      try {
+        const [next, logs, inference] = await Promise.all([
+          getStatus(),
+          getLogs({ file: 'gui', lines: LOG_TAIL }).catch(() => ({ lines: [] })),
+          gatewayState === 'open'
+            ? evaluateRuntimeReadiness(requestGateway).catch(error => ({
+                checksDisagree: false,
+                ready: false,
+                reason: error instanceof Error ? error.message : String(error),
+                source: 'fallback' as const
+              }))
+            : Promise.resolve(null)
+        ])
+
+        if (cancelled) {
+          return
+        }
+
+        setStatusSnapshot(next)
+        setGatewayLogLines(logs.lines.map(line => line.trim()).filter(Boolean))
+        setInferenceStatus(inference)
+      } catch {
+        // Keep last snapshot through transient gateway flaps.
+      }
+    }
+
+    void refresh()
+    const timer = window.setInterval(() => void refresh(), REFRESH_MS)
+
+    return () => {
+      cancelled = true
+      window.clearInterval(timer)
+    }
+  }, [gatewayState, requestGateway])
+
+  return { gatewayLogLines, inferenceStatus, statusSnapshot }
+}