nastechai-desktop 18.1.0

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

@@ -0,0 +1,271 @@
+import { useStore } from '@nanostores/react'
+import { useEffect, useMemo, useState } from 'react'
+
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Textarea } from '@/components/ui/textarea'
+import { getNasTechConfigRecord, type NasTechGateway, saveNasTechConfig } from '@/nastech'
+import { useI18n } from '@/i18n'
+import { Wrench } from '@/lib/icons'
+import { cn } from '@/lib/utils'
+import { notify, notifyError } from '@/store/notifications'
+import { $activeSessionId } from '@/store/session'
+import type { NasTechConfigRecord } from '@/types/nastech'
+
+import { EmptyState, LoadingState, Pill, SettingsContent } from './primitives'
+import { useDeepLinkHighlight } from './use-deep-link-highlight'
+
+interface McpSettingsProps {
+  gateway?: NasTechGateway | null
+  onConfigSaved?: () => void
+}
+
+type McpServers = Record<string, Record<string, unknown>>
+
+const EMPTY_SERVER = {
+  command: '',
+  args: [],
+  env: {}
+}
+
+function getServers(config: NasTechConfigRecord | null): McpServers {
+  const raw = config?.mcp_servers
+
+  return raw && typeof raw === 'object' && !Array.isArray(raw) ? (raw as McpServers) : {}
+}
+
+const transportLabel = (server: Record<string, unknown>) =>
+  typeof server.transport === 'string'
+    ? server.transport
+    : typeof server.url === 'string'
+      ? 'http'
+      : typeof server.command === 'string'
+        ? 'stdio'
+        : 'custom'
+
+export function McpSettings({ gateway, onConfigSaved }: McpSettingsProps) {
+  const { t } = useI18n()
+  const m = t.settings.mcp
+  const activeSessionId = useStore($activeSessionId)
+  const [config, setConfig] = useState<NasTechConfigRecord | null>(null)
+  const [selected, setSelected] = useState<string | null>(null)
+  const [name, setName] = useState('')
+  const [body, setBody] = useState('')
+  const [saving, setSaving] = useState(false)
+  const [reloading, setReloading] = useState(false)
+
+  useEffect(() => {
+    let cancelled = false
+
+    getNasTechConfigRecord()
+      .then(next => {
+        if (cancelled) {
+          return
+        }
+
+        setConfig(next)
+        const first = Object.keys(getServers(next)).sort()[0] ?? null
+        setSelected(first)
+      })
+      .catch(err => notifyError(err, m.failedLoad))
+
+    return () => void (cancelled = true)
+  }, [])
+
+  const servers = useMemo(() => getServers(config), [config])
+  const names = useMemo(() => Object.keys(servers).sort(), [servers])
+
+  useDeepLinkHighlight({
+    block: 'nearest',
+    elementId: serverName => `mcp-server-${serverName}`,
+    onResolve: setSelected,
+    param: 'server',
+    ready: serverName => Boolean(config) && serverName in servers
+  })
+
+  useEffect(() => {
+    const server = selected ? servers[selected] : null
+
+    setName(selected ?? '')
+    setBody(JSON.stringify(server ?? EMPTY_SERVER, null, 2))
+  }, [selected, servers])
+
+  if (!config) {
+    return <LoadingState label={m.loading} />
+  }
+
+  const saveServer = async () => {
+    const nextName = name.trim()
+
+    if (!nextName) {
+      notify({ kind: 'error', title: m.nameRequiredTitle, message: m.nameRequiredMessage })
+
+      return
+    }
+
+    let parsed: Record<string, unknown>
+
+    try {
+      const raw = JSON.parse(body)
+
+      if (!raw || typeof raw !== 'object' || Array.isArray(raw)) {
+        throw new Error(m.objectRequired)
+      }
+
+      parsed = raw as Record<string, unknown>
+    } catch (err) {
+      notifyError(err, m.invalidJson)
+
+      return
+    }
+
+    setSaving(true)
+
+    try {
+      const nextServers = { ...servers }
+
+      if (selected && selected !== nextName) {
+        delete nextServers[selected]
+      }
+
+      nextServers[nextName] = parsed
+
+      const nextConfig = { ...config, mcp_servers: nextServers }
+      await saveNasTechConfig(nextConfig)
+      setConfig(nextConfig)
+      setSelected(nextName)
+      onConfigSaved?.()
+      notify({ kind: 'success', title: m.savedTitle, message: m.savedMessage(nextName) })
+    } catch (err) {
+      notifyError(err, m.saveFailed)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const removeServer = async (serverName: string) => {
+    setSaving(true)
+
+    try {
+      const nextServers = { ...servers }
+      delete nextServers[serverName]
+
+      const nextConfig = { ...config, mcp_servers: nextServers }
+      await saveNasTechConfig(nextConfig)
+      setConfig(nextConfig)
+      setSelected(Object.keys(nextServers).sort()[0] ?? null)
+      onConfigSaved?.()
+    } catch (err) {
+      notifyError(err, m.removeFailed)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const reloadMcp = async () => {
+    if (!gateway) {
+      notify({ kind: 'warning', title: m.gatewayUnavailableTitle, message: m.gatewayUnavailableMessage })
+
+      return
+    }
+
+    setReloading(true)
+
+    try {
+      await gateway.request('reload.mcp', {
+        confirm: true,
+        session_id: activeSessionId ?? undefined
+      })
+      notify({ kind: 'success', title: m.reloadedTitle, message: m.reloadedMessage })
+    } catch (err) {
+      notifyError(err, m.reloadFailed)
+    } finally {
+      setReloading(false)
+    }
+  }
+
+  return (
+    <SettingsContent>
+      <div className="mb-4 flex items-center justify-end gap-4">
+        <Button onClick={() => setSelected(null)} size="xs" variant="text">
+          {m.newServer}
+        </Button>
+        <Button disabled={reloading} onClick={() => void reloadMcp()} size="xs" variant="text">
+          {reloading ? m.reloading : m.reload}
+        </Button>
+      </div>
+
+      <div className="grid min-h-0 gap-6 lg:grid-cols-[16rem_minmax(0,1fr)]">
+        <div className="min-h-64">
+          {names.length === 0 ? (
+            <EmptyState description={m.emptyDesc} title={m.emptyTitle} />
+          ) : (
+            <div className="grid gap-0.5">
+              {names.map(serverName => {
+                const server = servers[serverName]
+                const active = selected === serverName
+
+                return (
+                  <button
+                    className={cn(
+                      'scroll-mt-2 rounded-md px-2 py-2 text-left transition-colors hover:bg-(--chrome-action-hover)',
+                      active ? 'bg-(--ui-bg-tertiary) text-foreground' : 'text-muted-foreground'
+                    )}
+                    id={`mcp-server-${serverName}`}
+                    key={serverName}
+                    onClick={() => setSelected(serverName)}
+                    type="button"
+                  >
+                    <div className="truncate text-sm font-medium">{serverName}</div>
+                    <div className="mt-1 flex items-center gap-1.5">
+                      <Pill>{transportLabel(server)}</Pill>
+                      {server.disabled === true && <Pill>{m.disabled}</Pill>}
+                    </div>
+                  </button>
+                )
+              })}
+            </div>
+          )}
+        </div>
+
+        <div className="grid content-start gap-3">
+          <div className="flex items-center gap-2 text-sm font-medium">
+            <Wrench className="size-4 text-muted-foreground" />
+            {selected ? m.editServer : m.newServer}
+          </div>
+          <label className="grid gap-1.5">
+            <span className="text-xs text-muted-foreground">{m.name}</span>
+            <Input onChange={event => setName(event.currentTarget.value)} placeholder="filesystem" value={name} />
+          </label>
+          <label className="grid gap-1.5">
+            <span className="text-xs text-muted-foreground">{m.serverJson}</span>
+            <Textarea
+              className="min-h-80 font-mono text-xs"
+              onChange={event => setBody(event.currentTarget.value)}
+              spellCheck={false}
+              value={body}
+            />
+          </label>
+          <div className="flex items-center justify-between">
+            {selected ? (
+              <Button
+                className="text-destructive hover:text-destructive"
+                disabled={saving}
+                onClick={() => void removeServer(selected)}
+                size="xs"
+                variant="text"
+              >
+                {m.remove}
+              </Button>
+            ) : (
+              <span />
+            )}
+            <Button disabled={saving} onClick={() => void saveServer()} size="sm">
+              {saving ? t.common.saving : m.saveServer}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </SettingsContent>
+  )
+}

package/src/app/settings/model-settings.test.tsx

@@ -0,0 +1,157 @@
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest'
+
+// Radix Select calls scrollIntoView on its items when the content opens; jsdom
+// doesn't implement it (nor hasPointerCapture / releasePointerCapture), so stub
+// them to let the dropdown open in tests.
+beforeAll(() => {
+  Element.prototype.scrollIntoView = vi.fn()
+  Element.prototype.hasPointerCapture = vi.fn(() => false)
+  Element.prototype.releasePointerCapture = vi.fn()
+})
+
+const getGlobalModelInfo = vi.fn()
+const getGlobalModelOptions = vi.fn()
+const getAuxiliaryModels = vi.fn()
+const setModelAssignment = vi.fn()
+const getRecommendedDefaultModel = vi.fn()
+const setEnvVar = vi.fn()
+const startManualProviderOAuth = vi.fn()
+
+vi.mock('@/nastech', () => ({
+  getGlobalModelInfo: () => getGlobalModelInfo(),
+  getGlobalModelOptions: () => getGlobalModelOptions(),
+  getAuxiliaryModels: () => getAuxiliaryModels(),
+  setModelAssignment: (body: unknown) => setModelAssignment(body),
+  getRecommendedDefaultModel: (slug: string) => getRecommendedDefaultModel(slug),
+  setEnvVar: (key: string, value: string) => setEnvVar(key, value)
+}))
+
+vi.mock('@/store/onboarding', () => ({
+  startManualProviderOAuth: (slug: string) => startManualProviderOAuth(slug)
+}))
+
+beforeEach(() => {
+  getGlobalModelInfo.mockResolvedValue({ provider: 'nastech', model: 'NASTECH-4' })
+  getGlobalModelOptions.mockResolvedValue({
+    providers: [
+      { name: 'NasTech Portal', slug: 'nastech', models: ['NASTECH-4', 'NASTECH-4-mini'], authenticated: true },
+      // An unconfigured api_key provider — surfaced by the full-universe payload.
+      { name: 'DeepSeek', slug: 'deepseek', models: [], authenticated: false, auth_type: 'api_key', key_env: 'DEEPSEEK_API_KEY' }
+    ]
+  })
+  getAuxiliaryModels.mockResolvedValue({
+    main: { provider: 'nastech', model: 'NASTECH-4' },
+    tasks: [{ task: 'vision', provider: 'auto', model: '', base_url: '' }]
+  })
+  setModelAssignment.mockResolvedValue({ provider: 'nastech', model: 'NASTECH-4', gateway_tools: [] })
+  getRecommendedDefaultModel.mockResolvedValue({ provider: 'deepseek', model: 'deepseek-chat', free_tier: null })
+  setEnvVar.mockResolvedValue({ ok: true })
+})
+
+afterEach(() => {
+  cleanup()
+  vi.clearAllMocks()
+})
+
+async function renderModelSettings() {
+  const { ModelSettings } = await import('./model-settings')
+
+  return render(<ModelSettings />)
+}
+
+describe('ModelSettings', () => {
+  it('loads the current main model and lists the full provider universe', async () => {
+    await renderModelSettings()
+
+    await waitFor(() => expect(getGlobalModelInfo).toHaveBeenCalled())
+    await waitFor(() => expect(getGlobalModelOptions).toHaveBeenCalled())
+
+    // Open the provider Select — every provider from the full payload should be
+    // listed, including the unconfigured one with its "set up" hint.
+    const triggers = await screen.findAllByRole('combobox')
+    fireEvent.click(triggers[0])
+
+    // "NasTech Portal" shows in both the trigger and the open list; the unconfigured
+    // provider + its setup hint are the unique signal of the full universe.
+    expect((await screen.findAllByText('NasTech Portal')).length).toBeGreaterThan(0)
+    expect(await screen.findByText(/DeepSeek/)).toBeTruthy()
+    expect(await screen.findByText(/set up/)).toBeTruthy()
+  })
+
+  it('activates an unconfigured api_key provider inline by saving its key', async () => {
+    await renderModelSettings()
+
+    await waitFor(() => expect(getGlobalModelOptions).toHaveBeenCalled())
+
+    // Open the provider Select and pick the unconfigured provider.
+    const triggers = screen.getAllByRole('combobox')
+    fireEvent.click(triggers[0])
+    const deepseekOption = await screen.findByText(/DeepSeek/)
+    fireEvent.click(deepseekOption)
+
+    // The inline key input appears for an api_key provider that needs setup.
+    const keyInput = await screen.findByPlaceholderText(/Paste DEEPSEEK_API_KEY/)
+    fireEvent.change(keyInput, { target: { value: 'sk-test-123' } })
+
+    const activate = await screen.findByRole('button', { name: /Activate/ })
+    fireEvent.click(activate)
+
+    await waitFor(() => expect(setEnvVar).toHaveBeenCalledWith('DEEPSEEK_API_KEY', 'sk-test-123'))
+  })
+
+  it('renders the auxiliary task rows', async () => {
+    await renderModelSettings()
+
+    expect(await screen.findByText('Vision')).toBeTruthy()
+    expect(screen.getAllByText('auto · use main model').length).toBeGreaterThan(0)
+  })
+
+  it('assigns an auxiliary task to the main model via setModelAssignment', async () => {
+    await renderModelSettings()
+
+    // One "Set to main" button per task slot; the first is Vision.
+    const setToMainButtons = await screen.findAllByRole('button', { name: 'Set to main' })
+    fireEvent.click(setToMainButtons[0])
+
+    await waitFor(() =>
+      expect(setModelAssignment).toHaveBeenCalledWith({
+        model: 'NASTECH-4',
+        provider: 'nastech',
+        scope: 'auxiliary',
+        task: 'vision'
+      })
+    )
+  })
+
+  it('warns when a main switch leaves auxiliary tasks pinned to another provider', async () => {
+    setModelAssignment.mockResolvedValueOnce({
+      provider: 'openrouter',
+      model: 'anthropic/claude-opus-4.7',
+      gateway_tools: [],
+      stale_aux: [{ task: 'compression', provider: 'nastech', model: 'NASTECH-4' }]
+    })
+
+    await renderModelSettings()
+    await waitFor(() => expect(getGlobalModelInfo).toHaveBeenCalled())
+
+    const applyButton = await screen.findByRole('button', { name: 'Apply' })
+    fireEvent.click(applyButton)
+
+    // The switch-time notice names the pinned provider and offers a reset.
+    expect(await screen.findByText(/still run on/)).toBeTruthy()
+    expect(screen.getByText('nastech')).toBeTruthy()
+  })
+
+  it('shows a persistent banner when a loaded aux slot mismatches the main provider', async () => {
+    getAuxiliaryModels.mockResolvedValueOnce({
+      main: { provider: 'nastech', model: 'NASTECH-4' },
+      tasks: [{ task: 'curator', provider: 'openrouter', model: 'anthropic/claude-opus-4.7', base_url: '' }]
+    })
+
+    await renderModelSettings()
+
+    // Banner present on load, no switch required.
+    expect(await screen.findByText(/still run on/)).toBeTruthy()
+  })
+})