nastechai-desktop 18.1.0

package/src/app/chat/index.tsx

@@ -0,0 +1,390 @@
+import {
+  type AppendMessage,
+  AssistantRuntimeProvider,
+  ExportedMessageRepository,
+  type ThreadMessage
+} from '@assistant-ui/react'
+import { useStore } from '@nanostores/react'
+import { useQuery } from '@tanstack/react-query'
+import type * as React from 'react'
+import { Suspense, useCallback, useMemo, useRef } from 'react'
+import { useLocation } from 'react-router-dom'
+
+import { Thread } from '@/components/assistant-ui/thread'
+import { Backdrop } from '@/components/Backdrop'
+import { PromptOverlays } from '@/components/prompt-overlays'
+import { Button } from '@/components/ui/button'
+import { Codicon } from '@/components/ui/codicon'
+import { getGlobalModelOptions, type NasTechGateway } from '@/nastech'
+import type { ChatMessage } from '@/lib/chat-messages'
+import { quickModelOptions, sessionTitle, toRuntimeMessage } from '@/lib/chat-runtime'
+import { useIncrementalExternalStoreRuntime } from '@/lib/incremental-external-store-runtime'
+import { cn } from '@/lib/utils'
+import type { ComposerAttachment } from '@/store/composer'
+import { $pinnedSessionIds } from '@/store/layout'
+import { $gatewaySwapTarget } from '@/store/profile'
+import {
+  $activeSessionId,
+  $awaitingResponse,
+  $busy,
+  $contextSuggestions,
+  $currentCwd,
+  $currentModel,
+  $currentProvider,
+  $freshDraftReady,
+  $gatewayState,
+  $introPersonality,
+  $introSeed,
+  $messages,
+  $selectedStoredSessionId,
+  $sessions,
+  sessionPinId
+} from '@/store/session'
+import type { ModelOptionsResponse } from '@/types/nastech'
+
+import { routeSessionId } from '../routes'
+import { titlebarHeaderBaseClass, titlebarHeaderShadowClass } from '../shell/titlebar'
+
+import { ChatDropOverlay } from './chat-drop-overlay'
+import { ChatSwapOverlay } from './chat-swap-overlay'
+import { ChatBar, ChatBarFallback } from './composer'
+import { requestComposerInsert, requestComposerInsertRefs } from './composer/focus'
+import { droppedFileInlineRef, type SessionDragPayload, sessionInlineRef } from './composer/inline-refs'
+import type { ChatBarState } from './composer/types'
+import type { DroppedFile } from './hooks/use-composer-actions'
+import { useFileDropZone } from './hooks/use-file-drop-zone'
+import { SessionActionsMenu } from './sidebar/session-actions-menu'
+import { lastVisibleMessageIsUser, threadLoadingState } from './thread-loading'
+
+interface ChatViewProps extends Omit<React.ComponentProps<'div'>, 'onSubmit'> {
+  gateway: NasTechGateway | null
+  onToggleSelectedPin: () => void
+  onDeleteSelectedSession: () => void
+  onCancel: () => Promise<void> | void
+  onAddContextRef: (refText: string, label?: string, detail?: string) => void
+  onAddUrl: (url: string) => void
+  onBranchInNewChat: (messageId: string) => void
+  maxVoiceRecordingSeconds?: number
+  onAttachImageBlob: (blob: Blob) => Promise<boolean | void> | boolean | void
+  onAttachDroppedItems: (candidates: DroppedFile[]) => Promise<boolean | void> | boolean | void
+  onPasteClipboardImage: () => void
+  onPickFiles: () => void
+  onPickFolders: () => void
+  onPickImages: () => void
+  onRemoveAttachment: (id: string) => void
+  onSteer: (text: string) => Promise<boolean> | boolean
+  onSubmit: (
+    text: string,
+    options?: { attachments?: ComposerAttachment[]; fromQueue?: boolean }
+  ) => Promise<boolean> | boolean
+  onThreadMessagesChange: (messages: readonly ThreadMessage[]) => void
+  onEdit: (message: AppendMessage) => Promise<void>
+  onReload: (parentId: string | null) => Promise<void>
+  onTranscribeAudio?: (audio: Blob) => Promise<string>
+}
+
+interface ChatHeaderProps {
+  activeSessionId: null | string
+  isRoutedSessionView: boolean
+  onDeleteSelectedSession: () => void
+  onToggleSelectedPin: () => void
+  selectedSessionId: null | string
+}
+
+function ChatHeader({
+  activeSessionId,
+  isRoutedSessionView,
+  onDeleteSelectedSession,
+  onToggleSelectedPin,
+  selectedSessionId
+}: ChatHeaderProps) {
+  const sessions = useStore($sessions)
+  const pinnedSessionIds = useStore($pinnedSessionIds)
+
+  const activeStoredSession =
+    sessions.find(session => session.id === selectedSessionId || session._lineage_root_id === selectedSessionId) || null
+
+  const title = activeStoredSession ? sessionTitle(activeStoredSession) : 'New session'
+
+  // Pins live on the durable lineage-root id, but selectedSessionId is the live
+  // (tip) id — resolve through the loaded row so the menu reflects the pin
+  // state after auto-compression rotates the id.
+  const selectedIsPinned = activeStoredSession
+    ? pinnedSessionIds.includes(sessionPinId(activeStoredSession))
+    : selectedSessionId
+      ? pinnedSessionIds.includes(selectedSessionId)
+      : false
+
+  // A brand-new session has no session to pin/delete/rename, so the header is
+  // just a dead "New session" label + chevron. Drop it (and its border)
+  // entirely until there's a real session to act on.
+  if (!selectedSessionId && !activeSessionId && !isRoutedSessionView) {
+    return null
+  }
+
+  return (
+    <header className={cn(titlebarHeaderBaseClass, isRoutedSessionView && titlebarHeaderShadowClass)}>
+      <div className="min-w-0 flex-1">
+        <SessionActionsMenu
+          align="start"
+          onDelete={selectedSessionId ? onDeleteSelectedSession : undefined}
+          onPin={selectedSessionId ? onToggleSelectedPin : undefined}
+          pinned={selectedIsPinned}
+          sessionId={selectedSessionId || activeSessionId || ''}
+          sideOffset={8}
+          title={title}
+        >
+          <Button
+            className="pointer-events-auto h-6 min-w-0 gap-1 border border-transparent bg-transparent px-2 py-0 text-(--ui-text-secondary) hover:border-(--ui-stroke-tertiary) hover:bg-(--ui-control-hover-background) hover:text-foreground data-[state=open]:border-(--ui-stroke-tertiary) data-[state=open]:bg-(--ui-control-active-background) [-webkit-app-region:no-drag]"
+            type="button"
+            variant="ghost"
+          >
+            <h2 className="max-w-[52vw] truncate text-[0.75rem] font-medium leading-none">{title}</h2>
+            <Codicon className="shrink-0 text-(--ui-text-tertiary)" name="chevron-down" size="0.8125rem" />
+          </Button>
+        </SessionActionsMenu>
+      </div>
+    </header>
+  )
+}
+
+export function ChatView({
+  className,
+  gateway,
+  onToggleSelectedPin,
+  onDeleteSelectedSession,
+  onCancel,
+  onAddContextRef,
+  onAddUrl,
+  onAttachImageBlob,
+  onAttachDroppedItems,
+  onBranchInNewChat,
+  maxVoiceRecordingSeconds,
+  onPasteClipboardImage,
+  onPickFiles,
+  onPickFolders,
+  onPickImages,
+  onRemoveAttachment,
+  onSteer,
+  onSubmit,
+  onThreadMessagesChange,
+  onEdit,
+  onReload,
+  onTranscribeAudio
+}: ChatViewProps) {
+  const location = useLocation()
+  const activeSessionId = useStore($activeSessionId)
+  const awaitingResponse = useStore($awaitingResponse)
+  const busy = useStore($busy)
+  const contextSuggestions = useStore($contextSuggestions)
+  const currentCwd = useStore($currentCwd)
+  const currentModel = useStore($currentModel)
+  const currentProvider = useStore($currentProvider)
+  const freshDraftReady = useStore($freshDraftReady)
+  const gatewayState = useStore($gatewayState)
+  const gatewaySwapTarget = useStore($gatewaySwapTarget)
+  const gatewayOpen = gatewayState === 'open'
+  const introPersonality = useStore($introPersonality)
+  const introSeed = useStore($introSeed)
+  const messages = useStore($messages)
+  const selectedSessionId = useStore($selectedStoredSessionId)
+  const runtimeMessageCacheRef = useRef(new WeakMap<ChatMessage, ThreadMessage>())
+  const isRoutedSessionView = Boolean(routeSessionId(location.pathname))
+
+  const showIntro =
+    freshDraftReady && !isRoutedSessionView && !selectedSessionId && !activeSessionId && messages.length === 0
+
+  // Session is still loading if the route references a session we haven't
+  // resumed yet. Once `activeSessionId` is set (runtime has resumed), the
+  // session exists — even if it has zero messages (a brand-new routed
+  // session). The flicker where `busy` flips true briefly during hydrate
+  // is handled by `threadLoadingState`'s last-visible-user gate.
+  const loadingSession = isRoutedSessionView && messages.length === 0 && !activeSessionId
+  const threadLoading = threadLoadingState(loadingSession, busy, awaitingResponse, lastVisibleMessageIsUser(messages))
+  const showChatBar = !loadingSession
+  const threadKey = selectedSessionId || activeSessionId || (isRoutedSessionView ? location.pathname : 'new')
+
+  const modelOptionsQuery = useQuery<ModelOptionsResponse>({
+    queryKey: ['model-options', activeSessionId || 'global'],
+    queryFn: () => {
+      if (!activeSessionId) {
+        return getGlobalModelOptions()
+      }
+
+      if (!gateway) {
+        throw new Error('NasTech gateway unavailable')
+      }
+
+      return gateway.request<ModelOptionsResponse>('model.options', { session_id: activeSessionId })
+    },
+    enabled: gatewayOpen
+  })
+
+  const quickModels = useMemo(
+    () => quickModelOptions(modelOptionsQuery.data, currentProvider, currentModel),
+    [currentModel, currentProvider, modelOptionsQuery.data]
+  )
+
+  const chatBarState = useMemo<ChatBarState>(
+    () => ({
+      model: {
+        model: currentModel,
+        provider: currentProvider,
+        canSwitch: gatewayOpen,
+        loading: !gatewayOpen || (!currentModel && !currentProvider),
+        quickModels
+      },
+      tools: {
+        enabled: true,
+        label: 'Add context',
+        suggestions: contextSuggestions
+      },
+      voice: {
+        enabled: true,
+        active: false
+      }
+    }),
+    [contextSuggestions, currentModel, currentProvider, gatewayOpen, quickModels]
+  )
+
+  const runtimeMessageRepository = useMemo(() => {
+    const items: { message: ThreadMessage; parentId: string | null }[] = []
+    const branchParentByGroup = new Map<string, string | null>()
+    let visibleParentId: string | null = null
+    let headId: string | null = null
+
+    for (const message of messages) {
+      let parentId = visibleParentId
+
+      if (message.role === 'assistant' && message.branchGroupId) {
+        if (!branchParentByGroup.has(message.branchGroupId)) {
+          branchParentByGroup.set(message.branchGroupId, visibleParentId)
+        }
+
+        parentId = branchParentByGroup.get(message.branchGroupId) ?? null
+      }
+
+      const cachedMessage = runtimeMessageCacheRef.current.get(message)
+      const runtimeMessage = cachedMessage ?? toRuntimeMessage(message)
+
+      if (!cachedMessage) {
+        runtimeMessageCacheRef.current.set(message, runtimeMessage)
+      }
+
+      items.push({ message: runtimeMessage, parentId })
+
+      if (!message.hidden) {
+        visibleParentId = message.id
+        headId = message.id
+      }
+    }
+
+    return ExportedMessageRepository.fromBranchableArray(items, { headId })
+  }, [messages])
+
+  const runtime = useIncrementalExternalStoreRuntime<ThreadMessage>({
+    messageRepository: runtimeMessageRepository,
+    isRunning: busy,
+    setMessages: onThreadMessagesChange,
+    onNew: async () => {
+      // Submission is handled explicitly by ChatBar.
+      // Keeping this no-op avoids duplicate prompt.submit calls.
+    },
+    onEdit,
+    onCancel: async () => onCancel(),
+    onReload
+  })
+
+  // Drop files anywhere in the conversation area, not just on the composer
+  // input — appending the same inline `@file:` ref chips the composer drop
+  // produces (vs. attachment cards) so both surfaces behave identically.
+  const onDropFiles = useCallback(
+    (candidates: DroppedFile[]) => {
+      const refs = candidates
+        .map(candidate => droppedFileInlineRef(candidate, currentCwd))
+        .filter((ref): ref is string => Boolean(ref))
+
+      if (refs.length) {
+        requestComposerInsert(refs.join(' '), { mode: 'inline', target: 'main' })
+      }
+    },
+    [currentCwd]
+  )
+
+  // Dropping a sidebar session inserts an @session link the agent can resolve
+  // via session_search (carries the source profile, so cross-profile works).
+  const onDropSession = useCallback((session: SessionDragPayload) => {
+    requestComposerInsertRefs([sessionInlineRef(session)], { target: 'main' })
+  }, [])
+
+  const { dragKind, dropHandlers } = useFileDropZone({ enabled: showChatBar, onDropFiles, onDropSession })
+
+  return (
+    <div
+      className={cn(
+        'relative isolate flex h-full min-w-0 flex-col overflow-hidden bg-(--ui-chat-surface-background)',
+        className
+      )}
+    >
+      <Backdrop />
+      <ChatHeader
+        activeSessionId={activeSessionId}
+        isRoutedSessionView={isRoutedSessionView}
+        onDeleteSelectedSession={onDeleteSelectedSession}
+        onToggleSelectedPin={onToggleSelectedPin}
+        selectedSessionId={selectedSessionId}
+      />
+
+      <PromptOverlays />
+
+      <div
+        className="relative min-h-0 max-w-full flex-1 overflow-hidden bg-(--ui-chat-surface-background) contain-[layout_paint]"
+        {...dropHandlers}
+      >
+        <AssistantRuntimeProvider runtime={runtime}>
+          <Thread
+            clampToComposer={showChatBar}
+            cwd={currentCwd}
+            gateway={gateway}
+            intro={showIntro ? { personality: introPersonality, seed: introSeed } : undefined}
+            loading={threadLoading}
+            onBranchInNewChat={onBranchInNewChat}
+            onCancel={onCancel}
+            sessionId={activeSessionId}
+            sessionKey={threadKey}
+          />
+          {showChatBar && (
+            <Suspense fallback={<ChatBarFallback />}>
+              <ChatBar
+                busy={busy}
+                cwd={currentCwd}
+                disabled={!gatewayOpen}
+                focusKey={activeSessionId}
+                gateway={gateway}
+                maxRecordingSeconds={maxVoiceRecordingSeconds}
+                onAddContextRef={onAddContextRef}
+                onAddUrl={onAddUrl}
+                onAttachDroppedItems={onAttachDroppedItems}
+                onAttachImageBlob={onAttachImageBlob}
+                onCancel={onCancel}
+                onPasteClipboardImage={onPasteClipboardImage}
+                onPickFiles={onPickFiles}
+                onPickFolders={onPickFolders}
+                onPickImages={onPickImages}
+                onRemoveAttachment={onRemoveAttachment}
+                onSteer={onSteer}
+                onSubmit={onSubmit}
+                onTranscribeAudio={onTranscribeAudio}
+                queueSessionKey={selectedSessionId || activeSessionId}
+                sessionId={activeSessionId}
+                state={chatBarState}
+              />
+            </Suspense>
+          )}
+        </AssistantRuntimeProvider>
+        <ChatDropOverlay kind={dragKind} />
+        <ChatSwapOverlay profile={gatewaySwapTarget} />
+      </div>
+    </div>
+  )
+}

package/src/app/chat/perf-probe.tsx

@@ -0,0 +1,269 @@
+import { Profiler, type ProfilerOnRenderCallback, type ReactNode } from 'react'
+
+import { $messages, setBusy, setMessages } from '@/store/session'
+
+type Sample = {
+  id: string
+  phase: string
+  actualDuration: number
+  baseDuration: number
+  startTime: number
+  commitTime: number
+}
+
+type SyntheticDriverHandle = { stop: () => void }
+
+declare global {
+  interface Window {
+    __PERF_PROBE__?: {
+      samples: Sample[]
+      enabled: boolean
+      clear: () => void
+      summary: () => Record<string, { count: number; total: number; max: number; p50: number; p95: number }>
+    }
+    __PERF_DRIVE__?: {
+      /** Inject an assistant message and grow it by `chunk` every `intervalMs`. Returns a stop handle. */
+      stream: (opts?: { chunk?: string; intervalMs?: number; totalTokens?: number }) => SyntheticDriverHandle
+      reset: () => void
+      snapshotMsgs: () => number
+    }
+  }
+}
+
+if (typeof window !== 'undefined' && !window.__PERF_PROBE__) {
+  const samples: Sample[] = []
+  window.__PERF_PROBE__ = {
+    samples,
+    enabled: false,
+    clear: () => {
+      samples.length = 0
+    },
+    summary: () => {
+      const byId = new Map<string, number[]>()
+
+      for (const s of samples) {
+        const k = `${s.id}:${s.phase}`
+        const arr = byId.get(k) ?? []
+        arr.push(s.actualDuration)
+        byId.set(k, arr)
+      }
+
+      const out: Record<string, { count: number; total: number; max: number; p50: number; p95: number }> = {}
+
+      for (const [k, arr] of byId) {
+        arr.sort((a, b) => a - b)
+        const total = arr.reduce((a, b) => a + b, 0)
+        out[k] = {
+          count: arr.length,
+          total: Math.round(total * 100) / 100,
+          max: Math.round(arr[arr.length - 1] * 100) / 100,
+          p50: Math.round(arr[Math.floor(arr.length * 0.5)] * 100) / 100,
+          p95: Math.round(arr[Math.floor(arr.length * 0.95)] * 100) / 100
+        }
+      }
+
+      return out
+    }
+  }
+}
+
+const onRender: ProfilerOnRenderCallback = (id, phase, actualDuration, baseDuration, startTime, commitTime) => {
+  const probe = typeof window !== 'undefined' ? window.__PERF_PROBE__ : undefined
+
+  if (!probe || !probe.enabled) {
+    return
+  }
+
+  probe.samples.push({ id, phase, actualDuration, baseDuration, startTime, commitTime })
+
+  if (probe.samples.length > 5000) {
+    probe.samples.splice(0, probe.samples.length - 5000)
+  }
+}
+
+if (typeof window !== 'undefined' && !window.__PERF_DRIVE__) {
+  // Synthetic stream driver — pushes tokens through the live $messages atom so the
+  // assistant-ui runtime + react tree sees them exactly as a real LLM stream would.
+  // Used by scripts/measure-real-stream.mjs when no live LLM credit is available.
+  let baseline: ReturnType<typeof $messages.get> | null = null
+  let activeHandle: SyntheticDriverHandle | null = null
+
+  const stop = () => {
+    activeHandle = null
+    setBusy(false)
+  }
+
+  window.__PERF_DRIVE__ = {
+    snapshotMsgs: () => $messages.get().length,
+    reset: () => {
+      activeHandle?.stop()
+
+      if (baseline) {
+        setMessages(baseline)
+      }
+
+      baseline = null
+      setBusy(false)
+    },
+    stream: ({
+      chunk = 'word ',
+      intervalMs = 16,
+      totalTokens = 400,
+      // Mimic `use-message-stream.scheduleDeltaFlush` — batch token deltas
+      // into at-most one $messages update every `flushMinMs` ms, exactly as
+      // the real gateway path does. With this on, the synthetic harness's
+      // numbers actually reflect what a real LLM stream of the same token
+      // rate would feel like. Set to 0 to bypass and apply every token
+      // immediately (worst-case).
+      flushMinMs = 0
+    }: { chunk?: string; intervalMs?: number; totalTokens?: number; flushMinMs?: number } = {}) => {
+      activeHandle?.stop()
+      const current = $messages.get()
+
+      if (!baseline) {
+        baseline = current
+      }
+
+      const msgId = `synthetic-${Date.now()}`
+      // Seed an empty assistant message — assistant-ui will see it grow.
+      setMessages([
+        ...current,
+        {
+          id: msgId,
+          role: 'assistant',
+          parts: [{ type: 'text', text: '' }],
+          timestamp: Date.now(),
+          pending: true
+        }
+      ])
+      setBusy(true)
+
+      let pushed = 0
+      let pendingDelta = ''
+      let lastFlushAt = 0
+      let timer: ReturnType<typeof setTimeout> | null = null
+      let flushHandle: number | null = null
+
+      const applyDelta = (delta: string) => {
+        if (!delta) {
+          return
+        }
+
+        setMessages(prev =>
+          prev.map(m => {
+            if (m.id !== msgId) {
+              return m
+            }
+
+            const head = m.parts.slice(0, -1)
+            const last = m.parts.at(-1)
+            const lastText = last && last.type === 'text' ? last.text : ''
+
+            return {
+              ...m,
+              parts: [...head, { type: 'text', text: lastText + delta }]
+            }
+          })
+        )
+      }
+
+      const flushNow = () => {
+        flushHandle = null
+        lastFlushAt = performance.now()
+        const delta = pendingDelta
+        pendingDelta = ''
+        applyDelta(delta)
+      }
+
+      const scheduleFlush = () => {
+        if (flushHandle !== null) {
+          return
+        }
+
+        if (flushMinMs <= 0) {
+          flushNow()
+
+          return
+        }
+
+        const since = performance.now() - lastFlushAt
+        const wait = Math.max(0, flushMinMs - since)
+        flushHandle =
+          wait <= 0 && typeof requestAnimationFrame === 'function'
+            ? requestAnimationFrame(flushNow)
+            : (setTimeout(flushNow, wait) as unknown as number)
+      }
+
+      const handle: SyntheticDriverHandle = {
+        stop: () => {
+          if (timer) {
+            clearTimeout(timer)
+          }
+
+          timer = null
+
+          if (flushHandle !== null) {
+            clearTimeout(flushHandle)
+            cancelAnimationFrame?.(flushHandle)
+          }
+
+          flushHandle = null
+
+          if (pendingDelta) {
+            applyDelta(pendingDelta)
+            pendingDelta = ''
+          }
+
+          activeHandle = null
+          // Mark message finalized.
+          setMessages(prev => prev.map(m => (m.id === msgId ? { ...m, pending: false } : m)))
+          setBusy(false)
+        }
+      }
+
+      activeHandle = handle
+
+      const tick = () => {
+        if (activeHandle !== handle) {
+          return
+        }
+
+        if (pushed >= totalTokens) {
+          if (pendingDelta) {
+            flushNow()
+          }
+
+          handle.stop()
+
+          return
+        }
+
+        pushed += 1
+
+        if (flushMinMs > 0) {
+          pendingDelta += chunk
+          scheduleFlush()
+        } else {
+          applyDelta(chunk)
+        }
+
+        timer = setTimeout(tick, intervalMs)
+      }
+
+      timer = setTimeout(tick, intervalMs)
+
+      return handle
+    }
+  }
+
+  // Suppress dead-import warning.
+  void stop
+}
+
+export function PerfProbe({ id, children }: { id: string; children: ReactNode }) {
+  return (
+    <Profiler id={id} onRender={onRender}>
+      {children}
+    </Profiler>
+  )
+}

package/src/app/chat/right-rail/index.ts

@@ -0,0 +1 @@
+export { ChatPreviewRail, PREVIEW_RAIL_MAX_WIDTH, PREVIEW_RAIL_MIN_WIDTH, PREVIEW_RAIL_PANE_WIDTH } from './preview'