nastechai-desktop 18.1.0

package/src/components/error-boundary.tsx

@@ -0,0 +1,77 @@
+import { Component, type ErrorInfo, type ReactNode } from 'react'
+
+import { Button } from '@/components/ui/button'
+import { ErrorState } from '@/components/ui/error-state'
+import { useI18n } from '@/i18n'
+
+export interface ErrorBoundaryFallbackProps {
+  error: Error
+  reset: () => void
+}
+
+interface ErrorBoundaryProps {
+  children: ReactNode
+  fallback?: (props: ErrorBoundaryFallbackProps) => ReactNode
+  label?: string
+  onError?: (error: Error, info: ErrorInfo) => void
+}
+
+interface ErrorBoundaryState {
+  error: Error | null
+}
+
+export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  state: ErrorBoundaryState = { error: null }
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { error }
+  }
+
+  componentDidCatch(error: Error, info: ErrorInfo) {
+    const tag = this.props.label ? `[error-boundary:${this.props.label}]` : '[error-boundary]'
+    console.error(tag, error, info.componentStack)
+    this.props.onError?.(error, info)
+  }
+
+  reset = () => {
+    this.setState({ error: null })
+  }
+
+  render() {
+    const { error } = this.state
+
+    if (!error) {
+      return this.props.children
+    }
+
+    if (this.props.fallback) {
+      return this.props.fallback({ error, reset: this.reset })
+    }
+
+    return <RootErrorFallback error={error} reset={this.reset} />
+  }
+}
+
+function RootErrorFallback({ error, reset }: ErrorBoundaryFallbackProps) {
+  const { t } = useI18n()
+
+  return (
+    <div className="fixed inset-0 z-[1500] grid place-items-center bg-(--ui-chat-surface-background) p-6">
+      <ErrorState
+        className="w-full max-w-[28rem]"
+        description={error.message || t.errors.boundaryDesc}
+        title={t.errors.boundaryTitle}
+      >
+        <Button className="font-semibold" onClick={reset} size="lg">
+          {t.common.retry}
+        </Button>
+        <Button onClick={() => window.location.reload()} variant="text">
+          {t.errors.reloadWindow}
+        </Button>
+        <Button onClick={() => void window.NASTECHDesktop?.revealLogs()?.catch(() => undefined)} variant="text">
+          {t.errors.openLogs}
+        </Button>
+      </ErrorState>
+    </div>
+  )
+}

package/src/components/gateway-connecting-overlay.test.tsx

@@ -0,0 +1,143 @@
+import { cleanup, render, screen } from '@testing-library/react'
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+
+import { $desktopBoot } from '@/store/boot'
+import { $desktopOnboarding } from '@/store/onboarding'
+import { $gatewayState, setGatewayState } from '@/store/session'
+
+import { BootFailureOverlay } from './boot-failure-overlay'
+import { GatewayConnectingOverlay } from './gateway-connecting-overlay'
+
+// Repro for the "remote gateway → stuck on CONNECTING, no way to settings"
+// report. The connecting overlay (z-1200, full-screen, pointer-events on) is
+// shown whenever `gatewayState !== 'open' && !boot.error`. The ONLY escape
+// hatch — BootFailureOverlay, which has "Use local gateway" / "Sign in" /
+// "Retry" — only renders when `boot.error` is set.
+//
+// useGatewayBoot only calls failDesktopBoot() (which sets boot.error) when the
+// INITIAL boot() throws. After the first successful connect (bootCompleted),
+// any later socket drop goes through scheduleReconnect(), which loops FOREVER
+// against the dead remote and never sets boot.error. So gatewayState sits at
+// 'closed'/'error' with boot.error null → CONNECTING forever, recovery overlay
+// never appears, settings unreachable.
+
+function resetStores() {
+  setGatewayState('idle')
+  $desktopBoot.set({
+    error: null,
+    fakeMode: false,
+    message: 'ready',
+    phase: 'renderer.ready',
+    progress: 100,
+    running: false,
+    timestamp: Date.now(),
+    visible: false
+  })
+  $desktopOnboarding.set({
+    configured: true,
+    flow: { status: 'idle' },
+    mode: 'oauth',
+    providers: null,
+    reason: null,
+    requested: false,
+    firstRunSkipped: false,
+    manual: false
+  })
+}
+
+beforeEach(resetStores)
+afterEach(cleanup)
+
+// The connecting overlay renders "CONN" + a scrambled tail inside one
+// uppercase span; match that node specifically so the recovery overlay's
+// "Lost connection…" copy doesn't read as a false positive.
+const isConnectingShown = () =>
+  screen.queryAllByText((_, el) => /^CONN[/\\|\-_=+<>~:*A-Z]*$/.test(el?.textContent?.trim() ?? '')).length > 0
+const isRecoveryShown = () =>
+  Boolean(screen.queryByText(/use local gateway/i) || screen.queryByText(/retry/i) || screen.queryByText(/sign in/i))
+
+describe('connecting overlay vs recovery surface', () => {
+  it('hard initial-boot failure surfaces the recovery overlay (the working path)', () => {
+    // failDesktopBoot() ran: error set, gateway never opened.
+    $desktopBoot.set({ ...$desktopBoot.get(), error: 'NasTech backend did not become ready', running: false, visible: true })
+    setGatewayState('error')
+
+    render(
+      <>
+        <GatewayConnectingOverlay />
+        <BootFailureOverlay />
+      </>
+    )
+
+    expect(isRecoveryShown()).toBe(true)
+    // Connecting overlay bows out when boot.error is set.
+    expect(isConnectingShown()).toBe(false)
+  })
+
+  it('REPRO: remote socket drops AFTER a successful boot → stuck on CONNECTING, no recovery, no settings', () => {
+    // 1. Initial boot succeeded: gateway opened, boot completed (no error).
+    setGatewayState('open')
+    const { rerender } = render(
+      <>
+        <GatewayConnectingOverlay />
+        <BootFailureOverlay />
+      </>
+    )
+    expect(isConnectingShown()).toBe(false)
+
+    // 2. The remote VPS socket drops (sleep/wake, remote restart, network).
+    //    bootCompleted is true, so useGatewayBoot routes this through
+    //    scheduleReconnect() — boot.error stays NULL.
+    setGatewayState('closed')
+    rerender(
+      <>
+        <GatewayConnectingOverlay />
+        <BootFailureOverlay />
+      </>
+    )
+
+    // The connecting overlay reappears and latches...
+    expect(isConnectingShown()).toBe(true)
+    // ...with NO recovery surface, because boot.error was never set.
+    expect(isRecoveryShown()).toBe(false)
+
+    // 3. Reconnect loops forever against the dead remote: gatewayState bounces
+    //    closed → error → closed, boot.error never gets set. The user is
+    //    pinned on CONNECTING with no path to Settings indefinitely.
+    setGatewayState('error')
+    rerender(
+      <>
+        <GatewayConnectingOverlay />
+        <BootFailureOverlay />
+      </>
+    )
+    expect($desktopBoot.get().error).toBeNull()
+    expect(isConnectingShown()).toBe(true)
+    expect(isRecoveryShown()).toBe(false)
+  })
+
+  it('FIX: once the prolonged reconnect raises a recoverable boot error, the recovery overlay takes over', () => {
+    // Mirrors what useGatewayBoot.scheduleReconnect() now does after ~45s of
+    // failed post-boot reconnects: it calls failDesktopBoot(), flipping the UI
+    // from the dead-end CONNECTING overlay to the recovery surface.
+    setGatewayState('error')
+    $desktopBoot.set({
+      ...$desktopBoot.get(),
+      error: 'Lost connection to the NasTech gateway and could not reconnect.',
+      running: false,
+      visible: true
+    })
+
+    render(
+      <>
+        <GatewayConnectingOverlay />
+        <BootFailureOverlay />
+      </>
+    )
+
+    // Escape hatch is now reachable; the connecting overlay bows out.
+    expect(isRecoveryShown()).toBe(true)
+    expect(screen.getByText(/use local gateway/i)).toBeTruthy()
+    expect(isConnectingShown()).toBe(false)
+  })
+})

package/src/components/gateway-connecting-overlay.tsx

@@ -0,0 +1,183 @@
+import { useStore } from '@nanostores/react'
+import { useEffect, useRef, useState } from 'react'
+
+import { cn } from '@/lib/utils'
+import { $desktopBoot } from '@/store/boot'
+import { $gatewayState } from '@/store/session'
+
+// Static, always-legible prefix; only TAIL ever scrambles. Splitting them at
+// the render level means no timer logic (even a stale HMR one) can ever
+// scramble "CONN".
+const PREFIX = 'CONN'
+const TAIL = 'ECTING'
+// Even-weight mono ascii so cycling glyphs don't jump width (matches the
+// nousnet-web download-button decode effect).
+const SCRAMBLE_CHARS = '/\\|-_=+<>~:*'
+const TICK_MS = 45
+
+// Exit choreography (ms): text fades down + out, hold, then the overlay fades.
+const TEXT_OUT_MS = 360
+const POST_TEXT_HOLD_MS = 300
+const OVERLAY_OUT_MS = 520
+// Preview-only: how long to "connect" for, and the pause before replaying.
+const PREVIEW_CONNECT_MS = 2600
+const PREVIEW_REPLAY_MS = 1100
+
+type Phase = 'live' | 'text-out' | 'overlay-out' | 'gone'
+
+// Dev affordance: a warm Cmd+R reconnects almost instantly, so the overlay
+// only flashes. Load with `?connecting=1` to force a looping preview.
+function forcedPreview(): boolean {
+  if (!import.meta.env.DEV || typeof window === 'undefined') {
+    return false
+  }
+
+  try {
+    return new URLSearchParams(window.location.search).get('connecting') === '1'
+  } catch {
+    return false
+  }
+}
+
+function scrambledTail(resolvedCount: number): string {
+  return Array.from(TAIL, (ch, i) =>
+    i < resolvedCount ? ch : SCRAMBLE_CHARS[(Math.random() * SCRAMBLE_CHARS.length) | 0]
+  ).join('')
+}
+
+export function GatewayConnectingOverlay() {
+  const gatewayState = useStore($gatewayState)
+  const boot = useStore($desktopBoot)
+  const [previewing] = useState(forcedPreview)
+  const [tail, setTail] = useState(TAIL)
+  const [phase, setPhase] = useState<Phase>('live')
+
+  const connecting = gatewayState !== 'open' && !boot.error
+  // Latches once we've actually shown the overlay, so the brief frame where
+  // gatewayState flips to "open" (connecting -> false) before the exit phase
+  // kicks in doesn't unmount us and cause a flash.
+  const shownRef = useRef(false)
+
+  if (previewing || connecting) {
+    shownRef.current = true
+  }
+
+  // Decode loop — only while live (freeze the resolved word during the exit).
+  useEffect(() => {
+    if (phase !== 'live' || (!previewing && !connecting)) {
+      return
+    }
+
+    let resolved = 0
+    let hold = 0
+
+    const id = window.setInterval(() => {
+      if (resolved >= TAIL.length) {
+        hold += 1
+
+        if (hold > 16) {
+          resolved = 0
+          hold = 0
+        }
+
+        setTail(TAIL)
+
+        return
+      }
+
+      resolved += 0.5
+      setTail(scrambledTail(Math.floor(resolved)))
+    }, TICK_MS)
+
+    return () => window.clearInterval(id)
+  }, [phase, previewing, connecting])
+
+  // Kick off the exit when connected: real connect, or a faked timer in preview.
+  useEffect(() => {
+    if (phase !== 'live') {
+      return
+    }
+
+    if (previewing) {
+      const id = window.setTimeout(() => {
+        setTail(TAIL)
+        setPhase('text-out')
+      }, PREVIEW_CONNECT_MS)
+
+      return () => window.clearTimeout(id)
+    }
+
+    if (gatewayState === 'open' && shownRef.current) {
+      setTail(TAIL)
+      setPhase('text-out')
+    }
+  }, [phase, previewing, gatewayState])
+
+  // Advance the exit choreography: text-out -> overlay-out -> gone.
+  useEffect(() => {
+    if (phase === 'text-out') {
+      const id = window.setTimeout(() => setPhase('overlay-out'), TEXT_OUT_MS + POST_TEXT_HOLD_MS)
+
+      return () => window.clearTimeout(id)
+    }
+
+    if (phase === 'overlay-out') {
+      const id = window.setTimeout(() => setPhase('gone'), OVERLAY_OUT_MS)
+
+      return () => window.clearTimeout(id)
+    }
+
+    // Preview replays so we can keep watching the transition.
+    if (phase === 'gone' && previewing) {
+      const id = window.setTimeout(() => {
+        setTail(TAIL)
+        setPhase('live')
+      }, PREVIEW_REPLAY_MS)
+
+      return () => window.clearTimeout(id)
+    }
+  }, [phase, previewing])
+
+  // Boot failed — BootFailureOverlay owns the screen; don't linger behind it.
+  if (boot.error && !previewing) {
+    return null
+  }
+
+  // Real connect: once the fade finishes, get out of the way for good.
+  if (phase === 'gone' && !previewing) {
+    return null
+  }
+
+  // Never showed (e.g. gateway already up on a warm reload) — stay out.
+  if (!previewing && !connecting && !shownRef.current) {
+    return null
+  }
+
+  const leaving = phase !== 'live'
+  const overlayHidden = phase === 'overlay-out' || phase === 'gone'
+
+  return (
+    <div
+      className={cn(
+        'fixed inset-0 z-[1200] grid place-items-center bg-(--ui-chat-surface-background) transition-opacity duration-500 ease-out',
+        overlayHidden ? 'pointer-events-none opacity-0' : 'opacity-100'
+      )}
+    >
+      <style>{'@keyframes gco-cursor { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }'}</style>
+      <span
+        className={cn(
+          'inline-flex items-center pl-[0.4em] font-mono text-[0.64rem] font-semibold uppercase tracking-[0.4em] tabular-nums text-(--theme-primary) transition duration-300 ease-out',
+          leaving ? 'translate-y-2 opacity-0 saturate-0' : 'translate-y-0 opacity-100 saturate-100'
+        )}
+      >
+        {PREFIX}
+        {tail}
+        <span
+          aria-hidden="true"
+          className="dither ml-0.5 inline-block size-2 shrink-0 -translate-y-px rounded-[1px]"
+          style={{ animation: 'gco-cursor 1s step-end infinite' }}
+        />
+      </span>
+    </div>
+  )
+}

package/src/components/haptics-provider.tsx

@@ -0,0 +1,19 @@
+import { useStore } from '@nanostores/react'
+import { type ReactNode, useEffect } from 'react'
+import { useWebHaptics } from 'web-haptics/react'
+
+import { registerHapticTrigger } from '@/lib/haptics'
+import { $hapticsMuted } from '@/store/haptics'
+
+export function HapticsProvider({ children }: { children: ReactNode }) {
+  const muted = useStore($hapticsMuted)
+  const { trigger } = useWebHaptics({ debug: true, showSwitch: false })
+
+  useEffect(() => {
+    registerHapticTrigger(muted ? null : trigger)
+
+    return () => registerHapticTrigger(null)
+  }, [muted, trigger])
+
+  return <>{children}</>
+}

package/src/components/language-switcher.test.tsx

@@ -0,0 +1,53 @@
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+import type { NasTechConfigRecord } from '@/nastech'
+import { type I18nConfigClient, I18nProvider } from '@/i18n'
+
+import { LanguageSwitcher } from './language-switcher'
+
+// cmdk (the searchable list) wires a ResizeObserver and scrolls the active
+// item into view — neither exists in jsdom. Stub them, matching the polyfill
+// idiom in tool-approval-group.test.tsx.
+class TestResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
+
+vi.stubGlobal('ResizeObserver', TestResizeObserver)
+
+Element.prototype.scrollIntoView = function scrollIntoView() {}
+
+describe('LanguageSwitcher', () => {
+  afterEach(() => {
+    cleanup()
+    vi.restoreAllMocks()
+  })
+
+  it('persists language changes through display.language config', async () => {
+    const saveConfig = vi.fn().mockResolvedValue({ ok: true })
+    const latestConfig: NasTechConfigRecord = { display: { language: 'en', skin: 'slate' } }
+
+    const configClient: I18nConfigClient = {
+      getConfig: vi.fn().mockResolvedValue(latestConfig),
+      saveConfig
+    }
+
+    render(
+      <I18nProvider configClient={configClient}>
+        <LanguageSwitcher />
+      </I18nProvider>
+    )
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: 'Switch language' }).hasAttribute('disabled')).toBe(false)
+    })
+
+    fireEvent.click(screen.getByRole('button', { name: 'Switch language' }))
+    fireEvent.click(screen.getByRole('option', { name: /日本語/i }))
+
+    await waitFor(() => expect(saveConfig).toHaveBeenCalledTimes(1))
+    expect(saveConfig).toHaveBeenCalledWith({ display: { language: 'ja', skin: 'slate' } })
+  })
+})

package/src/components/language-switcher.tsx

@@ -0,0 +1,175 @@
+import { useState } from 'react'
+
+import { Button } from '@/components/ui/button'
+import { Command, CommandInput, CommandItem, CommandList } from '@/components/ui/command'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet'
+import { useIsMobile } from '@/hooks/use-mobile'
+import { type Locale, LOCALE_META, useI18n } from '@/i18n'
+import { triggerHaptic } from '@/lib/haptics'
+import { Check, ChevronDown, Globe } from '@/lib/icons'
+import { cn } from '@/lib/utils'
+import { notifyError } from '@/store/notifications'
+
+export interface LanguageSwitcherProps {
+  className?: string
+  collapsed?: boolean
+  dropUp?: boolean
+}
+
+interface LanguageCommandProps {
+  allLocales: Array<[Locale, (typeof LOCALE_META)[Locale]]>
+  autoFocus?: boolean
+  disabled?: boolean
+  locale: Locale
+  noResults: string
+  onSelect: (code: Locale) => void
+  searchPlaceholder: string
+}
+
+export function LanguageSwitcher({ className, collapsed = false, dropUp = false }: LanguageSwitcherProps) {
+  const { isSavingLocale, locale, setLocale, t } = useI18n()
+  const [open, setOpen] = useState(false)
+  const isMobile = useIsMobile()
+  const useMobileSheet = Boolean(dropUp && isMobile)
+  const current = LOCALE_META[locale]
+  const allLocales = Object.entries(LOCALE_META) as Array<[Locale, typeof current]>
+  const title = t.language.switchTo
+
+  const selectLocale = async (code: Locale) => {
+    if (code === locale || isSavingLocale) {
+      setOpen(false)
+
+      return
+    }
+
+    triggerHaptic('selection')
+
+    try {
+      await setLocale(code)
+      setOpen(false)
+      triggerHaptic('success')
+    } catch (error) {
+      notifyError(error, t.language.saveError)
+    }
+  }
+
+  const trigger = (
+    <Button
+      aria-expanded={open}
+      aria-label={title}
+      className={cn(
+        'min-w-32 justify-between gap-2 border-(--ui-stroke-tertiary) bg-(--ui-bg-quinary) px-2.5 text-left text-muted-foreground hover:text-foreground',
+        collapsed && 'min-w-0 px-2',
+        className
+      )}
+      disabled={isSavingLocale}
+      size="sm"
+      title={title}
+      type="button"
+      variant="outline"
+    >
+      <span className="inline-flex min-w-0 items-center gap-2">
+        <Globe className="size-3.5 shrink-0" />
+        {!collapsed && <span className="truncate">{current.name}</span>}
+      </span>
+      {!collapsed && <ChevronDown className="size-3 shrink-0 opacity-70" />}
+    </Button>
+  )
+
+  if (useMobileSheet) {
+    return (
+      <Sheet onOpenChange={setOpen} open={open}>
+        <SheetTrigger asChild>{trigger}</SheetTrigger>
+        <SheetContent className="max-h-[min(28rem,80vh)] rounded-t-xl" side="bottom">
+          <SheetHeader>
+            <SheetTitle>{title}</SheetTitle>
+            <SheetDescription>{t.language.description}</SheetDescription>
+          </SheetHeader>
+          <LanguageCommand
+            allLocales={allLocales}
+            disabled={isSavingLocale}
+            locale={locale}
+            noResults={t.language.noResults}
+            onSelect={code => void selectLocale(code)}
+            searchPlaceholder={t.language.searchPlaceholder}
+          />
+        </SheetContent>
+      </Sheet>
+    )
+  }
+
+  return (
+    <Popover onOpenChange={setOpen} open={open}>
+      <PopoverTrigger asChild>{trigger}</PopoverTrigger>
+      <PopoverContent align="end" className="w-56 p-0" side={dropUp ? 'top' : 'bottom'}>
+        <LanguageCommand
+          allLocales={allLocales}
+          autoFocus
+          disabled={isSavingLocale}
+          locale={locale}
+          noResults={t.language.noResults}
+          onSelect={code => void selectLocale(code)}
+          searchPlaceholder={t.language.searchPlaceholder}
+        />
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+function LanguageCommand({
+  allLocales,
+  autoFocus,
+  disabled,
+  locale,
+  noResults,
+  onSelect,
+  searchPlaceholder
+}: LanguageCommandProps) {
+  const [search, setSearch] = useState('')
+
+  // Own the search term and filter manually. cmdk's built-in shouldFilter
+  // reorders items by its fuzzy-match score (≈alphabetical with an empty
+  // query), which destroys the curated en→zh→zh-hant→ja order. We disable it
+  // and do a plain substring filter that preserves array order — matching
+  // model-picker.tsx. Match against the endonym, the (hidden) English name,
+  // and the locale code so "日本"/"japanese"/"ja" all find Japanese.
+  const q = search.trim().toLowerCase()
+
+  const filtered = allLocales.filter(
+    ([code, meta]) =>
+      !q ||
+      meta.name.toLowerCase().includes(q) ||
+      meta.englishName.toLowerCase().includes(q) ||
+      code.toLowerCase().includes(q)
+  )
+
+  return (
+    <Command className="bg-transparent" shouldFilter={false}>
+      <CommandInput autoFocus={autoFocus} onValueChange={setSearch} placeholder={searchPlaceholder} value={search} />
+      <CommandList className="max-h-80 p-1">
+        {filtered.length === 0 ? (
+          <div className="py-6 text-center text-sm text-muted-foreground">{noResults}</div>
+        ) : (
+          filtered.map(([code, meta]) => {
+            const selected = code === locale
+
+            return (
+              <CommandItem
+                className={cn(selected ? 'font-medium text-foreground' : 'text-muted-foreground')}
+                disabled={disabled}
+                key={code}
+                onSelect={() => onSelect(code)}
+                value={code}
+              >
+                <Check className={cn('size-3.5 shrink-0 text-primary', !selected && 'invisible')} />
+                <span className="min-w-0 flex-1 truncate">{meta.name}</span>
+                <span className="font-mono text-[0.65rem] uppercase text-(--ui-text-tertiary)">{code}</span>
+              </CommandItem>
+            )
+          })
+        )}
+      </CommandList>
+    </Command>
+  )
+}