nastechai-desktop 18.1.0

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

@@ -0,0 +1,276 @@
+import { useCallback, useEffect, useState } from 'react'
+
+import { Button } from '@/components/ui/button'
+import { Tip } from '@/components/ui/tooltip'
+import { deleteSession, listSessions, setSessionArchived } from '@/nastech'
+import { useI18n } from '@/i18n'
+import { sessionTitle } from '@/lib/chat-runtime'
+import { triggerHaptic } from '@/lib/haptics'
+import { Archive, ArchiveOff, FolderOpen, Loader2, Trash2 } from '@/lib/icons'
+import { notify, notifyError } from '@/store/notifications'
+import { setSessions } from '@/store/session'
+import type { SessionInfo } from '@/types/nastech'
+
+import { EmptyState, ListRow, LoadingState, SectionHeading, SettingsContent } from './primitives'
+import { useDeepLinkHighlight } from './use-deep-link-highlight'
+
+const ARCHIVED_FETCH_LIMIT = 200
+
+function workspaceLabel(cwd: null | string | undefined): string {
+  const path = cwd?.trim()
+
+  if (!path) {
+    return ''
+  }
+
+  return (
+    path
+      .replace(/[/\\]+$/, '')
+      .split(/[/\\]/)
+      .filter(Boolean)
+      .pop() ?? path
+  )
+}
+
+export function SessionsSettings() {
+  const { t } = useI18n()
+  const s = t.settings.sessions
+  const [sessions, setLocalSessions] = useState<SessionInfo[]>([])
+  const [loading, setLoading] = useState(true)
+  const [busyId, setBusyId] = useState<string | null>(null)
+
+  const load = useCallback(async () => {
+    setLoading(true)
+
+    try {
+      const result = await listSessions(ARCHIVED_FETCH_LIMIT, 0, 'only')
+      setLocalSessions(result.sessions)
+    } catch (err) {
+      notifyError(err, s.failedLoad)
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    void load()
+  }, [load])
+
+  const unarchive = useCallback(async (session: SessionInfo) => {
+    setBusyId(session.id)
+
+    try {
+      await setSessionArchived(session.id, false, session.profile)
+      setLocalSessions(prev => prev.filter(s => s.id !== session.id))
+      // Surface it again in the sidebar without waiting for a full refresh.
+      setSessions(prev => [{ ...session, archived: false }, ...prev.filter(s => s.id !== session.id)])
+      triggerHaptic('selection')
+      notify({ durationMs: 2_000, kind: 'success', message: s.restored })
+    } catch (err) {
+      notifyError(err, s.unarchiveFailed)
+    } finally {
+      setBusyId(null)
+    }
+  }, [s])
+
+  const remove = useCallback(async (session: SessionInfo) => {
+    if (!window.confirm(s.deleteConfirm(sessionTitle(session)))) {
+      return
+    }
+
+    setBusyId(session.id)
+
+    try {
+      await deleteSession(session.id, session.profile)
+      setLocalSessions(prev => prev.filter(s => s.id !== session.id))
+      triggerHaptic('warning')
+    } catch (err) {
+      notifyError(err, s.deleteFailed)
+    } finally {
+      setBusyId(null)
+    }
+  }, [s])
+
+  useDeepLinkHighlight({
+    elementId: id => `archived-session-${id}`,
+    param: 'session',
+    ready: id => !loading && sessions.some(session => session.id === id)
+  })
+
+  if (loading) {
+    return <LoadingState label={s.loading} />
+  }
+
+  return (
+    <SettingsContent>
+      <DefaultProjectDirSetting />
+
+      <SectionHeading
+        icon={Archive}
+        meta={sessions.length ? String(sessions.length) : undefined}
+        title={s.archivedTitle}
+      />
+      <p className="mb-2 text-[length:var(--conversation-caption-font-size)] text-(--ui-text-tertiary)">
+        {s.archivedIntro}
+      </p>
+
+      {sessions.length === 0 ? (
+        <EmptyState description={s.emptyArchivedDesc} title={s.emptyArchivedTitle} />
+      ) : (
+        <div className="grid gap-1">
+          {sessions.map(session => {
+            const label = workspaceLabel(session.cwd)
+            const busy = busyId === session.id
+
+            return (
+              <div className="scroll-mt-6 rounded-lg" id={`archived-session-${session.id}`} key={session.id}>
+                <ListRow
+                  action={
+                    <div className="flex items-center gap-1.5">
+                      <Button
+                        disabled={busy}
+                        onClick={() => void unarchive(session)}
+                        size="sm"
+                        type="button"
+                        variant="textStrong"
+                      >
+                        {busy ? <Loader2 className="size-3.5 animate-spin" /> : <ArchiveOff className="size-3.5" />}
+                        <span>{s.unarchive}</span>
+                      </Button>
+                      <Tip label={s.deletePermanently}>
+                        <Button
+                          aria-label={s.deletePermanently}
+                          className="text-muted-foreground hover:text-destructive"
+                          disabled={busy}
+                          onClick={() => void remove(session)}
+                          size="icon"
+                          type="button"
+                          variant="ghost"
+                        >
+                          <Trash2 className="size-3.5" />
+                        </Button>
+                      </Tip>
+                    </div>
+                  }
+                  description={session.preview || undefined}
+                  hint={label ? `${label} · ${s.messages(session.message_count)}` : s.messages(session.message_count)}
+                  title={sessionTitle(session)}
+                />
+              </div>
+            )
+          })}
+        </div>
+      )}
+    </SettingsContent>
+  )
+}
+
+// Lets the user pin the default cwd for new sessions. Without this, packaged
+// builds on Windows used to spawn sessions in the install dir (`win-unpacked`
+// / Program Files), which buried any files NasTech wrote there.
+function DefaultProjectDirSetting() {
+  const { t } = useI18n()
+  const s = t.settings.sessions
+  const [dir, setDir] = useState<null | string>(null)
+  const [fallback, setFallback] = useState<string>('')
+  const [busy, setBusy] = useState(false)
+
+  useEffect(() => {
+    // The bridge is only present when running inside Electron. In a Vitest
+    // / Storybook / non-Electron context `window.NASTECHDesktop` is
+    // undefined, so guard the WHOLE call chain rather than chaining
+    // `?.settings.getDefaultProjectDir().then(...)` (the latter would
+    // short-circuit to `undefined.then(...)` and throw at runtime).
+    const settings = window.NASTECHDesktop?.settings
+
+    if (!settings) {
+      return
+    }
+
+    let alive = true
+
+    void settings.getDefaultProjectDir().then(result => {
+      if (!alive) {
+        return
+      }
+
+      setDir(result.dir)
+      setFallback(result.defaultLabel)
+    })
+
+    return () => {
+      alive = false
+    }
+  }, [])
+
+  const choose = useCallback(async () => {
+    const settings = window.NASTECHDesktop?.settings
+
+    if (!settings) {
+      return
+    }
+
+    setBusy(true)
+
+    try {
+      const picked = await settings.pickDefaultProjectDir()
+
+      if (picked.canceled || !picked.dir) {
+        return
+      }
+
+      const result = await settings.setDefaultProjectDir(picked.dir)
+      setDir(result.dir)
+      notify({ durationMs: 2_000, kind: 'success', message: s.defaultDirUpdated })
+    } catch (err) {
+      notifyError(err, s.updateDirFailed)
+    } finally {
+      setBusy(false)
+    }
+  }, [s])
+
+  const clear = useCallback(async () => {
+    const settings = window.NASTECHDesktop?.settings
+
+    if (!settings) {
+      return
+    }
+
+    setBusy(true)
+
+    try {
+      await settings.setDefaultProjectDir(null)
+      setDir(null)
+    } catch (err) {
+      notifyError(err, s.clearDirFailed)
+    } finally {
+      setBusy(false)
+    }
+  }, [s])
+
+  return (
+    <div className="mb-6">
+      <SectionHeading icon={FolderOpen} title={s.defaultDirTitle} />
+      <p className="mb-2 text-[length:var(--conversation-caption-font-size)] text-(--ui-text-tertiary)">
+        {s.defaultDirDesc}
+      </p>
+      <ListRow
+        action={
+          <div className="flex items-center gap-3">
+            <Button disabled={busy} onClick={() => void choose()} size="sm" type="button" variant="textStrong">
+              <FolderOpen className="size-3.5" />
+              <span>{dir ? s.change : s.choose}</span>
+            </Button>
+            {dir && (
+              <Button disabled={busy} onClick={() => void clear()} size="sm" type="button" variant="text">
+                {s.clear}
+              </Button>
+            )}
+          </div>
+        }
+        description={dir || s.defaultsTo(fallback || '~/NASTECH-projects')}
+        title={dir ? dir : s.notSet}
+      />
+    </div>
+  )
+}

package/src/app/settings/toolset-config-panel.test.tsx

@@ -0,0 +1,289 @@
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import type { ToolsetConfig } from '@/types/nastech'
+
+const getToolsetConfig = vi.fn()
+const selectToolsetProvider = vi.fn()
+const setEnvVar = vi.fn()
+const deleteEnvVar = vi.fn()
+const revealEnvVar = vi.fn()
+const runToolsetPostSetup = vi.fn()
+const getActionStatus = vi.fn()
+
+vi.mock('@/nastech', () => ({
+  getToolsetConfig: (name: string) => getToolsetConfig(name),
+  selectToolsetProvider: (name: string, provider: string) => selectToolsetProvider(name, provider),
+  setEnvVar: (key: string, value: string) => setEnvVar(key, value),
+  deleteEnvVar: (key: string) => deleteEnvVar(key),
+  revealEnvVar: (key: string) => revealEnvVar(key),
+  runToolsetPostSetup: (name: string, key: string) => runToolsetPostSetup(name, key),
+  getActionStatus: (name: string, lines?: number) => getActionStatus(name, lines)
+}))
+
+vi.mock('@/store/notifications', () => ({
+  notify: vi.fn(),
+  notifyError: vi.fn()
+}))
+
+vi.mock('@/store/activity', () => ({
+  upsertDesktopActionTask: vi.fn()
+}))
+
+function config(overrides: Partial<ToolsetConfig> = {}): ToolsetConfig {
+  return {
+    name: 'tts',
+    has_category: true,
+    active_provider: null,
+    providers: [
+      {
+        name: 'Microsoft Edge TTS',
+        badge: 'free',
+        tag: 'No API key needed',
+        env_vars: [],
+        post_setup: null,
+        requires_nastech_auth: false,
+        is_active: false
+      },
+      {
+        name: 'ElevenLabs',
+        badge: 'paid',
+        tag: 'Most natural voices',
+        env_vars: [
+          { key: 'ELEVENLABS_API_KEY', prompt: 'ElevenLabs API key', url: 'https://x', default: null, is_set: false }
+        ],
+        post_setup: null,
+        requires_nastech_auth: false,
+        is_active: false
+      }
+    ],
+    ...overrides
+  }
+}
+
+beforeEach(() => {
+  getToolsetConfig.mockResolvedValue(config())
+  selectToolsetProvider.mockResolvedValue({ ok: true, name: 'tts', provider: 'ElevenLabs' })
+  setEnvVar.mockResolvedValue({ ok: true })
+  deleteEnvVar.mockResolvedValue({ ok: true })
+})
+
+afterEach(() => {
+  cleanup()
+  vi.clearAllMocks()
+})
+
+describe('ToolsetConfigPanel', () => {
+  it('lists providers from the config endpoint', async () => {
+    const { ToolsetConfigPanel } = await import('./toolset-config-panel')
+    render(<ToolsetConfigPanel onConfiguredChange={vi.fn()} toolset="tts" />)
+
+    expect(await screen.findByText('Microsoft Edge TTS')).toBeTruthy()
+    expect(screen.getByText('ElevenLabs')).toBeTruthy()
+    expect(getToolsetConfig).toHaveBeenCalledWith('tts')
+  })
+
+  it('selects a provider when clicked', async () => {
+    const { ToolsetConfigPanel } = await import('./toolset-config-panel')
+    render(<ToolsetConfigPanel onConfiguredChange={vi.fn()} toolset="tts" />)
+
+    const elevenlabs = await screen.findByRole('button', { name: /ElevenLabs/ })
+    fireEvent.click(elevenlabs)
+
+    await waitFor(() => expect(selectToolsetProvider).toHaveBeenCalledWith('tts', 'ElevenLabs'))
+  })
+
+  it('saves an API key for a provider env var', async () => {
+    const { ToolsetConfigPanel } = await import('./toolset-config-panel')
+    render(<ToolsetConfigPanel onConfiguredChange={vi.fn()} toolset="tts" />)
+
+    // Select the keyed provider so its env vars render.
+    const elevenlabs = await screen.findByRole('button', { name: /ElevenLabs/ })
+    fireEvent.click(elevenlabs)
+
+    // Click "Set" to reveal the input for the unset key.
+    fireEvent.click(await screen.findByRole('button', { name: 'Set' }))
+
+    const input = await screen.findByPlaceholderText('ElevenLabs API key')
+    fireEvent.change(input, { target: { value: 'sk-test-123' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Save' }))
+
+    await waitFor(() => expect(setEnvVar).toHaveBeenCalledWith('ELEVENLABS_API_KEY', 'sk-test-123'))
+  })
+
+  it('expands the active provider on load, not just the first configured one', async () => {
+    // ElevenLabs is the active provider per config, even though the keyless
+    // Edge TTS provider sorts first and is also "configured". The panel must
+    // honor is_active and expand ElevenLabs (so its API-key field renders)
+    // rather than defaulting to the first keyless provider. Regression test
+    // for the GUI showing the wrong provider selected after relaunch.
+    getToolsetConfig.mockResolvedValue(
+      config({
+        active_provider: 'ElevenLabs',
+        providers: [
+          {
+            name: 'Microsoft Edge TTS',
+            badge: 'free',
+            tag: 'No API key needed',
+            env_vars: [],
+            post_setup: null,
+            requires_nastech_auth: false,
+            is_active: false
+          },
+          {
+            name: 'ElevenLabs',
+            badge: 'paid',
+            tag: 'Most natural voices',
+            env_vars: [
+              {
+                key: 'ELEVENLABS_API_KEY',
+                prompt: 'ElevenLabs API key',
+                url: 'https://x',
+                default: null,
+                is_set: true
+              }
+            ],
+            post_setup: null,
+            requires_nastech_auth: false,
+            is_active: true
+          }
+        ]
+      })
+    )
+
+    const { ToolsetConfigPanel } = await import('./toolset-config-panel')
+    render(<ToolsetConfigPanel onConfiguredChange={vi.fn()} toolset="tts" />)
+
+    // The active provider's env-var field only renders when it's the expanded
+    // one — so finding it proves ElevenLabs (not Edge TTS) was auto-expanded.
+    expect(await screen.findByText('ELEVENLABS_API_KEY')).toBeTruthy()
+    // No provider selection was triggered — this is purely reflecting state.
+    expect(selectToolsetProvider).not.toHaveBeenCalled()
+  })
+
+  it('runs a provider post-setup install hook and tails its log', async () => {
+    // A browser-style toolset whose active provider declares a post_setup hook.
+    getToolsetConfig.mockResolvedValue(
+      config({
+        name: 'browser',
+        active_provider: 'Camofox',
+        providers: [
+          {
+            name: 'Camofox',
+            badge: 'local',
+            tag: 'Stealth local browser',
+            env_vars: [],
+            post_setup: 'camofox',
+            requires_nastech_auth: false,
+            is_active: true
+          }
+        ]
+      })
+    )
+    runToolsetPostSetup.mockResolvedValue({ ok: true, pid: 4321, name: 'tools-post-setup', key: 'camofox' })
+    // First poll: still running; second poll: finished cleanly.
+    getActionStatus
+      .mockResolvedValueOnce({
+        exit_code: null,
+        lines: ['Installing Camofox browser server...'],
+        name: 'tools-post-setup',
+        pid: 4321,
+        running: true
+      })
+      .mockResolvedValue({
+        exit_code: 0,
+        lines: ['Installing Camofox browser server...', "Post-setup 'camofox' complete"],
+        name: 'tools-post-setup',
+        pid: 4321,
+        running: false
+      })
+
+    const { ToolsetConfigPanel } = await import('./toolset-config-panel')
+    render(<ToolsetConfigPanel onConfiguredChange={vi.fn()} toolset="browser" />)
+
+    fireEvent.click(await screen.findByRole('button', { name: /Run setup/ }))
+
+    await waitFor(() => expect(runToolsetPostSetup).toHaveBeenCalledWith('browser', 'camofox'))
+    // The install log is tailed inline. The first poll fires after a 1200ms
+    // delay (mirrors command-center's poll cadence), so allow >1200ms here.
+    await waitFor(() => expect(getActionStatus).toHaveBeenCalledWith('tools-post-setup', 300), {
+      timeout: 4000
+    })
+  })
+
+  it('does not poll when the spawn endpoint reports ok:false', async () => {
+    getToolsetConfig.mockResolvedValue(
+      config({
+        name: 'browser',
+        active_provider: 'Camofox',
+        providers: [
+          {
+            name: 'Camofox',
+            badge: 'local',
+            tag: 'Stealth local browser',
+            env_vars: [],
+            post_setup: 'camofox',
+            requires_nastech_auth: false,
+            is_active: true
+          }
+        ]
+      })
+    )
+    // Spawn failed server-side — must NOT proceed to poll a non-existent action.
+    runToolsetPostSetup.mockResolvedValue({ ok: false, pid: 0, name: 'tools-post-setup' })
+
+    const { ToolsetConfigPanel } = await import('./toolset-config-panel')
+    render(<ToolsetConfigPanel onConfiguredChange={vi.fn()} toolset="browser" />)
+
+    fireEvent.click(await screen.findByRole('button', { name: /Run setup/ }))
+
+    await waitFor(() => expect(runToolsetPostSetup).toHaveBeenCalledWith('browser', 'camofox'))
+    // Give the would-be first poll delay (1200ms) time to NOT fire.
+    await new Promise(resolve => setTimeout(resolve, 1500))
+    expect(getActionStatus).not.toHaveBeenCalled()
+  })
+
+  it('surfaces a non-zero exit code from the setup process', async () => {
+    getToolsetConfig.mockResolvedValue(
+      config({
+        name: 'browser',
+        active_provider: 'Camofox',
+        providers: [
+          {
+            name: 'Camofox',
+            badge: 'local',
+            tag: 'Stealth local browser',
+            env_vars: [],
+            post_setup: 'camofox',
+            requires_nastech_auth: false,
+            is_active: true
+          }
+        ]
+      })
+    )
+    runToolsetPostSetup.mockResolvedValue({ ok: true, pid: 4321, name: 'tools-post-setup', key: 'camofox' })
+    // Action finished but failed (non-zero exit).
+    getActionStatus.mockResolvedValue({
+      exit_code: 1,
+      lines: ['Installing...', 'npm ERR! install failed'],
+      name: 'tools-post-setup',
+      pid: 4321,
+      running: false
+    })
+
+    const { ToolsetConfigPanel } = await import('./toolset-config-panel')
+    render(<ToolsetConfigPanel onConfiguredChange={vi.fn()} toolset="browser" />)
+
+    fireEvent.click(await screen.findByRole('button', { name: /Run setup/ }))
+
+    // The failing install log is still tailed and shown; exit_code:1 routes to
+    // the error notify branch (asserted via the poll completing on a non-zero
+    // status without throwing).
+    await waitFor(() => expect(getActionStatus).toHaveBeenCalledWith('tools-post-setup', 300), {
+      timeout: 4000
+    })
+    await waitFor(() => expect(screen.getByText(/npm ERR! install failed/)).toBeTruthy(), {
+      timeout: 4000
+    })
+  })
+})