nastechai-desktop 18.1.0

package/src/app/session/hooks/use-session-state-cache.test.tsx

@@ -0,0 +1,118 @@
+import { act, cleanup, render } from '@testing-library/react'
+import type { MutableRefObject } from 'react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { $turnStartedAt, setTurnStartedAt } from '@/store/session'
+
+import { useSessionStateCache } from './use-session-state-cache'
+
+type Cache = ReturnType<typeof useSessionStateCache>
+
+interface HarnessProps {
+  activeSessionId: string | null
+  onReady: (cache: Cache) => void
+  selectedStoredSessionId: string | null
+}
+
+function Harness({ activeSessionId, onReady, selectedStoredSessionId }: HarnessProps) {
+  const busyRef: MutableRefObject<boolean> = { current: false }
+  const cache = useSessionStateCache({
+    activeSessionId,
+    busyRef,
+    selectedStoredSessionId,
+    setAwaitingResponse: () => undefined,
+    setBusy: () => undefined,
+    setMessages: () => undefined
+  })
+
+  onReady(cache)
+
+  return null
+}
+
+describe('useSessionStateCache — per-session turn timer', () => {
+  beforeEach(() => {
+    // The view-sync flush runs on a real rAF in the browser path; in jsdom we
+    // want it synchronous so the global mirror is observable immediately. The
+    // hook closes over `window.requestAnimationFrame`, so stub that exact ref.
+    // Return null (not a handle) so the hook's `viewSyncRafRef.current = rAF(...)`
+    // assignment doesn't overwrite the null the synchronous callback just set —
+    // otherwise the ref reads truthy and the NEXT sync is suppressed (a real
+    // browser returns a handle but runs the callback async, so this race is a
+    // test-only artifact of firing synchronously).
+    vi.spyOn(window, 'requestAnimationFrame').mockImplementation((cb: FrameRequestCallback) => {
+      cb(0)
+
+      return null as unknown as number
+    })
+    setTurnStartedAt(null)
+  })
+
+  afterEach(() => {
+    cleanup()
+    vi.restoreAllMocks()
+    setTurnStartedAt(null)
+  })
+
+  it("keeps a background session's running turn clock and never mirrors it to the view", () => {
+    let cache!: Cache
+    // Active session is "fg-runtime"; the turn starts on the BACKGROUND session.
+    render(
+      <Harness activeSessionId="fg-runtime" onReady={c => (cache = c)} selectedStoredSessionId="fg-stored" />
+    )
+
+    const startedAt = 1_700_000_000_000
+
+    act(() => {
+      cache.updateSessionState(
+        'bg-runtime',
+        state => ({ ...state, busy: true, turnStartedAt: startedAt }),
+        'bg-stored'
+      )
+    })
+
+    // The background session's own cache entry holds the clock...
+    expect(cache.sessionStateByRuntimeIdRef.current.get('bg-runtime')?.turnStartedAt).toBe(startedAt)
+    // ...but the global atom (statusbar timer) is untouched — a background turn
+    // must not drive the foreground timer.
+    expect($turnStartedAt.get()).toBeNull()
+  })
+
+  it("mirrors the focused session's turn clock into the global atom on view-sync", () => {
+    let cache!: Cache
+    render(<Harness activeSessionId="fg-runtime" onReady={c => (cache = c)} selectedStoredSessionId="fg-stored" />)
+
+    const startedAt = 1_700_000_111_000
+
+    // A turn on the ACTIVE session stages into the view; the flush mirrors its
+    // turnStartedAt into the global atom the statusbar reads.
+    act(() => {
+      cache.updateSessionState(
+        'fg-runtime',
+        state => ({ ...state, busy: true, turnStartedAt: startedAt }),
+        'fg-stored'
+      )
+    })
+
+    expect($turnStartedAt.get()).toBe(startedAt)
+  })
+
+  it('clears the global clock when the focused turn ends', () => {
+    let cache!: Cache
+    render(<Harness activeSessionId="fg-runtime" onReady={c => (cache = c)} selectedStoredSessionId="fg-stored" />)
+
+    act(() => {
+      cache.updateSessionState(
+        'fg-runtime',
+        state => ({ ...state, busy: true, turnStartedAt: 1_700_000_222_000 }),
+        'fg-stored'
+      )
+    })
+    expect($turnStartedAt.get()).toBe(1_700_000_222_000)
+
+    act(() => {
+      cache.updateSessionState('fg-runtime', state => ({ ...state, busy: false, turnStartedAt: null }))
+    })
+    expect($turnStartedAt.get()).toBeNull()
+  })
+})

package/src/app/session/hooks/use-session-state-cache.ts

@@ -0,0 +1,191 @@
+import { useStore } from '@nanostores/react'
+import { type MutableRefObject, useCallback, useEffect, useRef } from 'react'
+
+import type { ChatMessage } from '@/lib/chat-messages'
+import { preserveLocalAssistantErrors } from '@/lib/chat-messages'
+import { createClientSessionState } from '@/lib/chat-runtime'
+import { setMutableRef } from '@/lib/mutable-ref'
+import { $busy, $messages, noteSessionActivity, setSessionAttention, setSessionWorking, setTurnStartedAt } from '@/store/session'
+
+import type { ClientSessionState } from '../../types'
+
+interface SessionStateCacheOptions {
+  activeSessionId: string | null
+  busyRef: MutableRefObject<boolean>
+  selectedStoredSessionId: string | null
+  setAwaitingResponse: (awaiting: boolean) => void
+  setBusy: (busy: boolean) => void
+  setMessages: (messages: ChatMessage[]) => void
+}
+
+export function useSessionStateCache({
+  activeSessionId,
+  busyRef,
+  selectedStoredSessionId,
+  setAwaitingResponse,
+  setBusy,
+  setMessages
+}: SessionStateCacheOptions) {
+  const busy = useStore($busy)
+  const activeSessionIdRef = useRef<string | null>(null)
+  const selectedStoredSessionIdRef = useRef<string | null>(null)
+  const sessionStateByRuntimeIdRef = useRef(new Map<string, ClientSessionState>())
+  const runtimeIdByStoredSessionIdRef = useRef(new Map<string, string>())
+  const pendingViewStateRef = useRef<{ sessionId: string; state: ClientSessionState } | null>(null)
+  const viewSyncRafRef = useRef<number | null>(null)
+
+  useEffect(() => {
+    activeSessionIdRef.current = activeSessionId
+  }, [activeSessionId])
+
+  useEffect(() => {
+    setMutableRef(busyRef, busy)
+  }, [busy, busyRef])
+
+  useEffect(() => {
+    selectedStoredSessionIdRef.current = selectedStoredSessionId
+  }, [selectedStoredSessionId])
+
+  const ensureSessionState = useCallback((sessionId: string, storedSessionId?: string | null) => {
+    const existing = sessionStateByRuntimeIdRef.current.get(sessionId)
+
+    if (existing) {
+      if (storedSessionId !== undefined) {
+        const previousStoredSessionId = existing.storedSessionId
+        existing.storedSessionId = storedSessionId
+
+        if (storedSessionId) {
+          runtimeIdByStoredSessionIdRef.current.set(storedSessionId, sessionId)
+
+          if (existing.busy) {
+            setSessionWorking(storedSessionId, true)
+          }
+        }
+
+        if (previousStoredSessionId && previousStoredSessionId !== storedSessionId) {
+          setSessionWorking(previousStoredSessionId, false)
+        }
+      }
+
+      return existing
+    }
+
+    const created = createClientSessionState(storedSessionId ?? null)
+    sessionStateByRuntimeIdRef.current.set(sessionId, created)
+
+    if (storedSessionId) {
+      runtimeIdByStoredSessionIdRef.current.set(storedSessionId, sessionId)
+    }
+
+    return created
+  }, [])
+
+  const flushPendingViewState = useCallback(() => {
+    const pending = pendingViewStateRef.current
+    pendingViewStateRef.current = null
+
+    if (!pending || pending.sessionId !== activeSessionIdRef.current) {
+      return
+    }
+
+    setMessages(preserveLocalAssistantErrors(pending.state.messages, $messages.get()))
+    setBusy(pending.state.busy)
+    setMutableRef(busyRef, pending.state.busy)
+    setAwaitingResponse(pending.state.awaitingResponse)
+    // Mirror the focused session's per-session turn clock into the global
+    // atom the statusbar timer reads. Keeps a backgrounded turn's elapsed
+    // time intact on focus instead of zeroing it (the "timer restarts" bug).
+    setTurnStartedAt(pending.state.turnStartedAt)
+  }, [busyRef, setAwaitingResponse, setBusy, setMessages])
+
+  const syncSessionStateToView = useCallback(
+    (sessionId: string, state: ClientSessionState) => {
+      // Only the currently-viewed session may stage into the shared `$messages`
+      // view. A background session (e.g. one still busy and emitting stream /
+      // error updates after the user toggled away) must update its own cache
+      // entry but never the view — otherwise its messages clobber the
+      // foreground transcript and appear to "bleed" into every other session.
+      // The flush below also re-checks the active id, but staging here is what
+      // prevents a background write from overwriting an already-pending
+      // foreground write within the same animation frame (only one RAF is
+      // scheduled, so the last `pendingViewStateRef` writer would otherwise win).
+      if (sessionId !== activeSessionIdRef.current) {
+        return
+      }
+
+      pendingViewStateRef.current = { sessionId, state }
+
+      if (viewSyncRafRef.current !== null) {
+        return
+      }
+
+      if (typeof window === 'undefined') {
+        flushPendingViewState()
+
+        return
+      }
+
+      viewSyncRafRef.current = window.requestAnimationFrame(() => {
+        viewSyncRafRef.current = null
+        flushPendingViewState()
+      })
+    },
+    [flushPendingViewState]
+  )
+
+  useEffect(
+    () => () => {
+      if (viewSyncRafRef.current !== null && typeof window !== 'undefined') {
+        window.cancelAnimationFrame(viewSyncRafRef.current)
+        viewSyncRafRef.current = null
+      }
+    },
+    []
+  )
+
+  const updateSessionState = useCallback(
+    (
+      sessionId: string,
+      updater: (state: ClientSessionState) => ClientSessionState,
+      storedSessionId?: string | null
+    ) => {
+      const previous = ensureSessionState(sessionId, storedSessionId)
+      const next = updater({ ...previous, messages: previous.messages })
+      sessionStateByRuntimeIdRef.current.set(sessionId, next)
+
+      if (previous.storedSessionId !== next.storedSessionId || !next.busy) {
+        setSessionWorking(previous.storedSessionId, false)
+      }
+
+      if (previous.storedSessionId !== next.storedSessionId || !next.needsInput) {
+        setSessionAttention(previous.storedSessionId, false)
+      }
+
+      setSessionWorking(next.storedSessionId, next.busy)
+      setSessionAttention(next.storedSessionId, next.needsInput)
+
+      // Every state update is effectively a "still alive" heartbeat for
+      // streaming events. The session-store watchdog uses this to keep the
+      // working flag alive during long-running turns and to clear it once
+      // the stream goes silent.
+      if (next.busy) {
+        noteSessionActivity(next.storedSessionId)
+      }
+
+      syncSessionStateToView(sessionId, next)
+
+      return next
+    },
+    [ensureSessionState, syncSessionStateToView]
+  )
+
+  return {
+    activeSessionIdRef,
+    ensureSessionState,
+    runtimeIdByStoredSessionIdRef,
+    selectedStoredSessionIdRef,
+    sessionStateByRuntimeIdRef,
+    syncSessionStateToView,
+    updateSessionState
+  }
+}

package/src/app/session-picker-overlay.tsx

@@ -0,0 +1,32 @@
+import { useStore } from '@nanostores/react'
+
+import { SessionPickerDialog } from '@/components/session-picker'
+import { $gatewayState, $selectedStoredSessionId, $sessionPickerOpen, setSessionPickerOpen } from '@/store/session'
+
+interface SessionPickerOverlayProps {
+  onResume: (storedSessionId: string) => void
+}
+
+/**
+ * Mounts the session picker that `/resume` (and `/sessions`, `/switch`) opens —
+ * the desktop equivalent of the TUI's sessions overlay. Resuming runs through
+ * the same `resumeSession` path the sidebar uses.
+ */
+export function SessionPickerOverlay({ onResume }: SessionPickerOverlayProps) {
+  const open = useStore($sessionPickerOpen)
+  const gatewayOpen = useStore($gatewayState) === 'open'
+  const activeStoredSessionId = useStore($selectedStoredSessionId)
+
+  if (!gatewayOpen) {
+    return null
+  }
+
+  return (
+    <SessionPickerDialog
+      activeStoredSessionId={activeStoredSessionId}
+      onOpenChange={setSessionPickerOpen}
+      onResume={onResume}
+      open={open}
+    />
+  )
+}

package/src/app/session-switcher.tsx

@@ -0,0 +1,107 @@
+import { useStore } from '@nanostores/react'
+import { useEffect, useRef } from 'react'
+import { createPortal } from 'react-dom'
+import { useNavigate } from 'react-router-dom'
+
+import { sessionTitle } from '@/lib/chat-runtime'
+import { cn } from '@/lib/utils'
+import { $attentionSessionIds, $workingSessionIds } from '@/store/session'
+import { $switcherIndex, $switcherOpen, $switcherSessions, closeSwitcher } from '@/store/session-switcher'
+
+import { HUD_ITEM, HUD_POSITION, HUD_SURFACE, HUD_TEXT } from './floating-hud'
+import { sessionRoute } from './routes'
+
+// Compact session-switcher HUD — keyboard-driven from `use-keybinds`, rows
+// clickable via mousedown (Ctrl+click on macOS). No Dialog: Tab stays global.
+export function SessionSwitcher() {
+  const open = useStore($switcherOpen)
+  const sessions = useStore($switcherSessions)
+  const index = useStore($switcherIndex)
+  const working = useStore($workingSessionIds)
+  const attention = useStore($attentionSessionIds)
+  const navigate = useNavigate()
+
+  const activeRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    activeRef.current?.scrollIntoView({ block: 'nearest' })
+  }, [index, open])
+
+  if (!open || sessions.length === 0) {
+    return null
+  }
+
+  const workingIds = new Set(working)
+  const attentionIds = new Set(attention)
+
+  const pick = (sessionId: string) => {
+    closeSwitcher()
+    navigate(sessionRoute(sessionId))
+  }
+
+  return createPortal(
+    <>
+      {/* Transparent click-catcher: click-away closes, but no dim/blur. */}
+      <div
+        className="fixed inset-0 z-[219]"
+        onMouseDown={e => {
+          e.preventDefault()
+          closeSwitcher()
+        }}
+      />
+      <div
+        className={cn(
+          HUD_POSITION,
+          HUD_SURFACE,
+          'dt-portal-scrollbar z-[220] max-h-[min(22rem,64vh)] w-[min(19rem,calc(100vw-2rem))] select-none overflow-y-auto p-1'
+        )}
+      >
+        {sessions.map((session, i) => {
+          const selected = i === index
+
+          return (
+            <div
+              className={cn(
+                'flex cursor-pointer items-center rounded leading-tight',
+                HUD_ITEM,
+                HUD_TEXT,
+                selected ? 'bg-accent text-accent-foreground' : 'text-(--ui-text-secondary) hover:bg-(--ui-row-hover-background)'
+              )}
+              key={session.id}
+              onMouseDown={e => {
+                e.preventDefault()
+                pick(session.id)
+              }}
+              ref={selected ? activeRef : undefined}
+            >
+              <SwitcherDot attention={attentionIds.has(session.id)} working={workingIds.has(session.id)} />
+              <span className="min-w-0 flex-1 truncate">{sessionTitle(session)}</span>
+              {i < 9 && (
+                <span
+                  className={cn(
+                    'shrink-0 font-mono text-[0.625rem] tabular-nums',
+                    selected ? 'text-accent-foreground/70' : 'text-(--ui-text-quaternary)'
+                  )}
+                >
+                  ⌃{i + 1}
+                </span>
+              )}
+            </div>
+          )
+        })}
+      </div>
+    </>,
+    document.body
+  )
+}
+
+function SwitcherDot({ attention, working }: { attention: boolean; working: boolean }) {
+  return (
+    <span
+      className={cn(
+        'size-1 shrink-0 rounded-full',
+        attention ? 'bg-amber-400' : working ? 'animate-pulse bg-(--ui-accent)' : 'bg-(--ui-text-quaternary)/50'
+      )}
+    />
+  )
+}

package/src/app/settings/about-settings.tsx

@@ -0,0 +1,173 @@
+import { useStore } from '@nanostores/react'
+import { useEffect, useState } from 'react'
+
+import { BrandMark } from '@/components/brand-mark'
+import { Button } from '@/components/ui/button'
+import { type Translations, useI18n } from '@/i18n'
+import { CheckCircle2, ExternalLink, Loader2, RefreshCw, Sparkles } from '@/lib/icons'
+import { cn } from '@/lib/utils'
+import {
+  $desktopVersion,
+  $updateApply,
+  $updateChecking,
+  $updateStatus,
+  checkUpdates,
+  openUpdatesWindow,
+  refreshDesktopVersion
+} from '@/store/updates'
+
+import { ListRow, SectionHeading, SettingsContent } from './primitives'
+
+const RELEASE_NOTES_URL = 'https://github.com/nastech-ai/NasTech-Agent/releases'
+
+function relativeTime(ms: number | undefined, a: Translations['settings']['about']) {
+  if (!ms) {
+    return a.never
+  }
+
+  const diff = Date.now() - ms
+
+  if (diff < 60_000) {
+    return a.justNow
+  }
+
+  if (diff < 3_600_000) {
+    return a.minAgo(Math.round(diff / 60_000))
+  }
+
+  if (diff < 86_400_000) {
+    return a.hoursAgo(Math.round(diff / 3_600_000))
+  }
+
+  return a.daysAgo(Math.round(diff / 86_400_000))
+}
+
+export function AboutSettings() {
+  const { t } = useI18n()
+  const a = t.settings.about
+  const version = useStore($desktopVersion)
+  const status = useStore($updateStatus)
+  const apply = useStore($updateApply)
+  const checking = useStore($updateChecking)
+  const [justChecked, setJustChecked] = useState(false)
+
+  // The version atom is loaded once at app boot, which makes About show a
+  // stale number after a self-update (the running binary is current, the
+  // displayed string is not). Re-read on mount so opening About always
+  // reflects the running build.
+  useEffect(() => {
+    void refreshDesktopVersion()
+  }, [])
+
+  const behind = status?.behind ?? 0
+  const supported = status?.supported !== false
+  const applying = apply.applying || apply.stage === 'restart'
+
+  const handleCheck = async () => {
+    setJustChecked(false)
+    const next = await checkUpdates()
+    setJustChecked(Boolean(next))
+  }
+
+  let statusLine: string
+  let statusTone: 'idle' | 'available' | 'error' = 'idle'
+
+  if (!supported) {
+    statusLine = status?.message ?? a.cantUpdate
+    statusTone = 'error'
+  } else if (status?.error) {
+    statusLine = a.cantReach
+    statusTone = 'error'
+  } else if (applying) {
+    statusLine = a.installing
+    statusTone = 'available'
+  } else if (behind > 0) {
+    statusLine = a.updateReady(behind)
+    statusTone = 'available'
+  } else if (status) {
+    statusLine = a.onLatest
+  } else {
+    statusLine = a.tapCheck
+  }
+
+  return (
+    <SettingsContent>
+      <div className="flex flex-col items-center gap-3 pt-6 pb-2 text-center">
+        <BrandMark className="size-16" />
+        <div>
+          <h2 className="text-lg font-semibold tracking-tight">{a.heading}</h2>
+          <p className="mt-1 text-xs text-muted-foreground">
+            {version?.appVersion ? a.version(version.appVersion) : a.versionUnavailable}
+          </p>
+        </div>
+      </div>
+
+      <div className="mx-auto mt-4 w-full max-w-2xl">
+        <SectionHeading icon={RefreshCw} title={a.updates} />
+
+        <div
+          className={cn(
+            'rounded-xl border px-4 py-3 text-sm',
+            statusTone === 'available' && 'border-primary/30 bg-primary/5 text-foreground',
+            statusTone === 'error' && 'border-destructive/35 bg-destructive/5 text-destructive',
+            statusTone === 'idle' && 'border-border/70 bg-muted/20 text-foreground'
+          )}
+        >
+          <div className="flex items-start gap-2">
+            {statusTone === 'available' ? (
+              <Sparkles className="mt-0.5 size-4 shrink-0 text-primary" />
+            ) : statusTone === 'error' ? null : (
+              <CheckCircle2 className="mt-0.5 size-4 shrink-0 text-emerald-600 dark:text-emerald-400" />
+            )}
+            <div className="min-w-0">
+              <p className="font-medium">{statusLine}</p>
+              <p className="mt-1 text-xs text-muted-foreground">
+                {a.lastChecked(relativeTime(status?.fetchedAt, a))}
+                {justChecked && !checking ? a.justNowSuffix : ''}
+              </p>
+            </div>
+          </div>
+
+          <div className="mt-3 flex flex-wrap items-center gap-4">
+            <Button
+              disabled={checking || applying || !supported}
+              onClick={() => void handleCheck()}
+              size="sm"
+              variant="textStrong"
+            >
+              {checking ? <Loader2 className="size-3 animate-spin" /> : <RefreshCw className="size-3" />}
+              {checking ? a.checking : a.checkNow}
+            </Button>
+
+            {behind > 0 && supported && !applying && (
+              <Button onClick={() => openUpdatesWindow()} size="sm">
+                {a.seeWhatsNew}
+              </Button>
+            )}
+
+            <Button asChild className="ml-auto" size="sm" variant="text">
+              <a
+                href={RELEASE_NOTES_URL}
+                onClick={event => {
+                  event.preventDefault()
+                  void window.NASTECHDesktop?.openExternal?.(RELEASE_NOTES_URL)
+                }}
+                rel="noreferrer"
+                target="_blank"
+              >
+                <ExternalLink className="size-3" />
+                {a.releaseNotes}
+              </a>
+            </Button>
+          </div>
+        </div>
+
+        <ListRow
+          description={a.automaticUpdatesDesc}
+          hint={a.branchCommit(status?.branch ?? 'unknown', status?.currentSha?.slice(0, 7) ?? 'unknown')}
+          title={a.automaticUpdates}
+        />
+      </div>
+    </SettingsContent>
+  )
+}