nastechai-desktop 18.1.0

package/src/app/settings/helpers.test.ts

@@ -0,0 +1,138 @@
+import { describe, expect, it } from 'vitest'
+
+import type { NasTechConfigRecord } from '@/types/nastech'
+
+import { defineFieldCopy, fieldCopyForSchemaKey, schemaKeyToFieldCopyKey } from './field-copy'
+import { getNested, providerGroup, setNested, stripToolsetLabel, toolsetDisplayLabel } from './helpers'
+
+describe('settings helpers', () => {
+  describe('defineFieldCopy', () => {
+    it('flattens nested field copy paths', () => {
+      const copy = defineFieldCopy({
+        display: {
+          personality: 'Personality'
+        },
+        stt: {
+          elevenlabs: {
+            language_code: 'Language'
+          }
+        }
+      })
+
+      expect(copy[['display', 'personality'].join('.')]).toBe('Personality')
+      expect(copy[['stt', 'elevenlabs', 'language_code'].join('.')]).toBe('Language')
+    })
+
+    it('keeps top-level flat field keys', () => {
+      expect(
+        defineFieldCopy({
+          model_context_length: 'Context Window',
+          file_read_max_chars: 'File Read Limit'
+        })
+      ).toEqual({
+        model_context_length: 'Context Window',
+        file_read_max_chars: 'File Read Limit'
+      })
+    })
+
+    it('maps schema keys to camelCase translation keys', () => {
+      expect(schemaKeyToFieldCopyKey('model_context_length')).toBe('modelContextLength')
+      expect(schemaKeyToFieldCopyKey('display.show_reasoning')).toBe('display.showReasoning')
+      expect(schemaKeyToFieldCopyKey('tool_output.max_line_length')).toBe('toolOutput.maxLineLength')
+      expect(schemaKeyToFieldCopyKey('updates.non_interactive_local_changes')).toBe(
+        'updates.nonInteractiveLocalChanges'
+      )
+    })
+
+    it('looks up camelCase field copy by schema key with legacy fallback', () => {
+      const copy = defineFieldCopy({
+        display: {
+          showReasoning: 'Reasoning Blocks'
+        },
+        file_read_max_chars: 'Legacy File Read Limit',
+        modelContextLength: 'Context Window',
+        toolOutput: {
+          maxLineLength: 'Line Length Limit'
+        }
+      })
+
+      expect(fieldCopyForSchemaKey(copy, 'model_context_length')).toBe('Context Window')
+      expect(fieldCopyForSchemaKey(copy, 'display.show_reasoning')).toBe('Reasoning Blocks')
+      expect(fieldCopyForSchemaKey(copy, 'tool_output.max_line_length')).toBe('Line Length Limit')
+      expect(fieldCopyForSchemaKey(copy, 'file_read_max_chars')).toBe('Legacy File Read Limit')
+    })
+
+    it('rejects duplicate flattened paths', () => {
+      const duplicateKey = ['display', 'personality'].join('.')
+
+      expect(() =>
+        defineFieldCopy({
+          display: {
+            personality: 'Personality'
+          },
+          [duplicateKey]: 'Duplicate'
+        })
+      ).toThrow('Duplicate field copy key: display.personality')
+    })
+  })
+
+  it('reads and writes nested config paths', () => {
+    const config: NasTechConfigRecord = { display: { theme: 'mono' } }
+    const next = setNested(config, 'display.theme', 'slate')
+
+    expect(getNested(next, 'display.theme')).toBe('slate')
+    expect(getNested(config, 'display.theme')).toBe('mono')
+  })
+
+  it('rejects prototype-polluting config paths', () => {
+    const config: NasTechConfigRecord = {}
+
+    expect(() => setNested(config, '__proto__.polluted', true)).toThrow('Unsafe config path')
+    expect(() => setNested(config, 'constructor.prototype.polluted', true)).toThrow('Unsafe config path')
+    expect(({} as Record<string, unknown>).polluted).toBeUndefined()
+  })
+
+  describe('stripToolsetLabel', () => {
+    it('removes leading emoji prefixes from registry labels', () => {
+      expect(stripToolsetLabel('⏰ Cron Jobs')).toBe('Cron Jobs')
+      expect(stripToolsetLabel('⚡ Code Execution')).toBe('Code Execution')
+      expect(stripToolsetLabel('❓ Clarifying Questions')).toBe('Clarifying Questions')
+      expect(stripToolsetLabel('🌐 Browser Automation')).toBe('Browser Automation')
+      expect(stripToolsetLabel('🎨 Image Generation')).toBe('Image Generation')
+    })
+
+    it('leaves plain titles unchanged', () => {
+      expect(stripToolsetLabel('Terminal & Processes')).toBe('Terminal & Processes')
+    })
+  })
+
+  describe('toolsetDisplayLabel', () => {
+    it('strips emoji from toolset rows', () => {
+      expect(toolsetDisplayLabel({ name: 'cronjob', label: '⏰ Cron Jobs' })).toBe('Cron Jobs')
+    })
+  })
+
+  describe('providerGroup', () => {
+    it('maps a provider env var to its labeled group', () => {
+      expect(providerGroup('XAI_API_KEY')).toBe('xAI')
+      expect(providerGroup('NASTECH_API_KEY')).toBe('NasTech Portal')
+      expect(providerGroup('OPENROUTER_API_KEY')).toBe('OpenRouter')
+    })
+
+    it('prefers the longest matching prefix so CN/regional buckets win', () => {
+      // MINIMAX_CN_ must beat the generic MINIMAX_ prefix.
+      expect(providerGroup('MINIMAX_CN_API_KEY')).toBe('MiniMax (China)')
+      expect(providerGroup('MINIMAX_API_KEY')).toBe('MiniMax')
+      // KIMI_CN_ likewise must beat KIMI_.
+      expect(providerGroup('KIMI_CN_API_KEY')).toBe('Kimi (China)')
+      expect(providerGroup('KIMI_API_KEY')).toBe('Kimi / Moonshot')
+      // NASTECH_QWEN_ and NASTECH_GEMINI_ both share the NASTECH_ stem.
+      expect(providerGroup('NASTECH_QWEN_BASE_URL')).toBe('DashScope (Qwen)')
+      expect(providerGroup('NASTECH_GEMINI_CLIENT_ID')).toBe('Gemini')
+    })
+
+    it('falls back to "Other" for un-grouped env vars', () => {
+      expect(providerGroup('SOMETHING_RANDOM')).toBe('Other')
+    })
+  })
+})

package/src/app/settings/helpers.ts

@@ -0,0 +1,151 @@
+import type { NasTechConfigRecord, ToolsetInfo } from '@/types/nastech'
+
+import { BUILTIN_PERSONALITIES, ENUM_OPTIONS, PROVIDER_GROUPS } from './constants'
+
+export const asText = (v: unknown): string => (typeof v === 'string' ? v : v == null ? '' : String(v))
+
+export const includesQuery = (v: unknown, q: string) => asText(v).toLowerCase().includes(q)
+
+export const prettyName = (v: string) => v.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase())
+
+/** Strip leading emoji from toolset titles (CLI registry prefixes labels with icons). */
+export const stripToolsetLabel = (label: string): string =>
+  label.replace(/^[\p{Emoji}\p{Extended_Pictographic}\s]+/u, '').trim() || label
+
+export const toolsetDisplayLabel = (toolset: Pick<ToolsetInfo, 'label' | 'name'>): string =>
+  stripToolsetLabel(asText(toolset.label || toolset.name))
+
+export const toolNames = (t: ToolsetInfo) => (Array.isArray(t.tools) ? t.tools.map(asText).filter(Boolean) : [])
+
+export const withoutKey = <T>(record: Record<string, T>, key: string) => {
+  const next = { ...record }
+  delete next[key]
+
+  return next
+}
+
+export const redactedValue = (v: string) => (v.length <= 8 ? '••••' : `${v.slice(0, 4)}...${v.slice(-4)}`)
+
+// Longest-prefix match so a more specific group like ``MINIMAX_CN_`` is
+// chosen over its shorter parent ``MINIMAX_``. Falls back to the bucket
+// "Other" used by the Keys settings view for un-grouped env vars.
+export const providerGroup = (key: string) => {
+  let best: (typeof PROVIDER_GROUPS)[number] | undefined
+
+  for (const candidate of PROVIDER_GROUPS) {
+    if (!key.startsWith(candidate.prefix)) {
+      continue
+    }
+
+    if (!best || candidate.prefix.length > best.prefix.length) {
+      best = candidate
+    }
+  }
+
+  return best?.name ?? 'Other'
+}
+
+export const providerMeta = (name: string) =>
+  PROVIDER_GROUPS.find(g => g.name === name && (g.description || g.docsUrl)) ??
+  PROVIDER_GROUPS.find(g => g.name === name)
+
+export const providerPriority = (name: string) => providerMeta(name)?.priority ?? 99
+
+const POLLUTING_PATH_PARTS = new Set(['__proto__', 'constructor', 'prototype'])
+
+function isSafePart(part: string): boolean {
+  return part.length > 0 && !POLLUTING_PATH_PARTS.has(part)
+}
+
+function configPathParts(path: string): string[] {
+  const parts = path.split('.')
+
+  if (!parts.every(isSafePart)) {
+    throw new Error(`Unsafe config path: ${path}`)
+  }
+
+  return parts
+}
+
+function safeSet(target: Record<string, unknown>, key: string, value: unknown): void {
+  if (key === '__proto__' || key === 'constructor' || key === 'prototype' || !key) {
+    throw new Error(`Unsafe config key: ${key}`)
+  }
+
+  Object.defineProperty(target, key, {
+    value,
+    writable: true,
+    enumerable: true,
+    configurable: true
+  })
+}
+
+export function getNested(obj: NasTechConfigRecord, path: string): unknown {
+  let cur: unknown = obj
+
+  for (const part of configPathParts(path)) {
+    if (cur == null || typeof cur !== 'object') {
+      return undefined
+    }
+
+    if (!Object.prototype.hasOwnProperty.call(cur, part)) {
+      return undefined
+    }
+
+    cur = (cur as Record<string, unknown>)[part]
+  }
+
+  return cur
+}
+
+export function setNested(obj: NasTechConfigRecord, path: string, value: unknown): NasTechConfigRecord {
+  const clone = structuredClone(obj)
+  const parts = configPathParts(path)
+  let cur: Record<string, unknown> = clone
+
+  for (let i = 0; i < parts.length - 1; i += 1) {
+    const part = parts[i]
+
+    if (!isSafePart(part)) {
+      throw new Error(`Unsafe config path part: ${part}`)
+    }
+
+    const existing = Object.prototype.hasOwnProperty.call(cur, part) ? cur[part] : undefined
+
+    if (existing == null || typeof existing !== 'object') {
+      safeSet(cur, part, {})
+    }
+
+    cur = cur[part] as Record<string, unknown>
+  }
+
+  safeSet(cur, parts[parts.length - 1], value)
+
+  return clone
+}
+
+function personalityOptions(config: NasTechConfigRecord): string[] {
+  const custom = getNested(config, 'agent.personalities')
+
+  const customNames =
+    custom && typeof custom === 'object' && !Array.isArray(custom) ? Object.keys(custom as Record<string, unknown>) : []
+
+  return [...new Set(['', ...BUILTIN_PERSONALITIES, ...customNames])]
+}
+
+export function enumOptionsFor(
+  key: string,
+  value: unknown,
+  config: NasTechConfigRecord,
+  dynamicOptions?: string[]
+): string[] | undefined {
+  const opts = dynamicOptions ?? (key === 'display.personality' ? personalityOptions(config) : ENUM_OPTIONS[key])
+
+  if (!opts) {
+    return undefined
+  }
+
+  const current = asText(value)
+
+  return current && !opts.includes(current) ? [...opts, current] : opts
+}

package/src/app/settings/index.tsx

@@ -0,0 +1,237 @@
+import { IconDownload, IconRefresh, IconUpload } from '@tabler/icons-react'
+import { useRef } from 'react'
+
+import { Tip } from '@/components/ui/tooltip'
+import { getNasTechConfigDefaults, getNasTechConfigRecord, saveNasTechConfig } from '@/nastech'
+import { useI18n } from '@/i18n'
+import { triggerHaptic } from '@/lib/haptics'
+import { Archive, Globe, Info, KeyRound, Settings2, Sparkles, Wrench, Zap } from '@/lib/icons'
+import { notifyError } from '@/store/notifications'
+
+import { useRouteEnumParam } from '../hooks/use-route-enum-param'
+import { OverlayIconButton } from '../overlays/overlay-chrome'
+import { OverlayMain, OverlayNavItem, OverlaySidebar, OverlaySplitLayout } from '../overlays/overlay-split-layout'
+import { OverlayView } from '../overlays/overlay-view'
+
+import { AboutSettings } from './about-settings'
+import { AppearanceSettings } from './appearance-settings'
+import { ConfigSettings } from './config-settings'
+import { SECTIONS } from './constants'
+import { GatewaySettings } from './gateway-settings'
+import { KEYS_VIEWS, KeysSettings, type KeysView } from './keys-settings'
+import { McpSettings } from './mcp-settings'
+import { PROVIDER_VIEWS, ProvidersSettings, type ProviderView } from './providers-settings'
+import { SessionsSettings } from './sessions-settings'
+import type { SettingsPageProps, SettingsView as SettingsViewId } from './types'
+
+const SETTINGS_VIEWS: readonly SettingsViewId[] = [
+  ...SECTIONS.map(s => `config:${s.id}` as SettingsViewId),
+  'providers',
+  'gateway',
+  'keys',
+  'mcp',
+  'sessions',
+  'about'
+]
+
+export function SettingsView({ gateway, onClose, onConfigSaved, onMainModelChanged }: SettingsPageProps) {
+  const { t } = useI18n()
+  const [activeView, setActiveView] = useRouteEnumParam('tab', SETTINGS_VIEWS, 'config:model' as SettingsViewId)
+  // Providers subnav (Accounts vs API keys) lives in its own param so each
+  // sub-view is deep-linkable and survives a refresh.
+  const [providerView, setProviderView] = useRouteEnumParam<ProviderView>('pview', PROVIDER_VIEWS, 'accounts')
+  const [keysView, setKeysView] = useRouteEnumParam<KeysView>('kview', KEYS_VIEWS, 'tools')
+
+  const openProviderView = (view: ProviderView) => {
+    setActiveView('providers')
+    setProviderView(view)
+  }
+
+  const openKeysView = (view: KeysView) => {
+    setActiveView('keys')
+    setKeysView(view)
+  }
+
+  const importInputRef = useRef<HTMLInputElement | null>(null)
+
+  const exportConfig = async () => {
+    try {
+      const cfg = await getNasTechConfigRecord()
+      const blob = new Blob([JSON.stringify(cfg, null, 2)], { type: 'application/json' })
+      const url = URL.createObjectURL(blob)
+      const a = document.createElement('a')
+      a.href = url
+      a.download = 'NASTECH-config.json'
+      a.click()
+      URL.revokeObjectURL(url)
+      triggerHaptic('success')
+    } catch (err) {
+      notifyError(err, t.settings.exportFailed)
+    }
+  }
+
+  const resetConfig = async () => {
+    if (!window.confirm(t.settings.resetConfirm)) {
+      return
+    }
+
+    try {
+      await saveNasTechConfig(await getNasTechConfigDefaults())
+      triggerHaptic('success')
+      onConfigSaved?.()
+    } catch (err) {
+      notifyError(err, t.settings.resetFailed)
+    }
+  }
+
+  return (
+    <OverlayView closeLabel={t.settings.closeSettings} onClose={onClose}>
+      <OverlaySplitLayout>
+        <OverlaySidebar>
+          {SECTIONS.map(s => {
+            const view = `config:${s.id}` as SettingsViewId
+
+            return (
+              <OverlayNavItem
+                active={activeView === view}
+                icon={s.icon}
+                key={s.id}
+                label={t.settings.sections[s.id] ?? s.label}
+                onClick={() => setActiveView(view)}
+              />
+            )
+          })}
+          <div className="my-2 h-px bg-border/30" />
+          <OverlayNavItem
+            active={activeView === 'providers'}
+            icon={Zap}
+            label={t.settings.nav.providers}
+            onClick={() => setActiveView('providers')}
+          />
+          {activeView === 'providers' && (
+            <div className="ml-3.5 flex flex-col gap-0.5 pl-1.5">
+              <OverlayNavItem
+                active={providerView === 'accounts'}
+                icon={Sparkles}
+                label={t.settings.nav.providerAccounts}
+                nested
+                onClick={() => openProviderView('accounts')}
+              />
+              <OverlayNavItem
+                active={providerView === 'keys'}
+                icon={KeyRound}
+                label={t.settings.nav.providerApiKeys}
+                nested
+                onClick={() => openProviderView('keys')}
+              />
+            </div>
+          )}
+          <OverlayNavItem
+            active={activeView === 'gateway'}
+            icon={Globe}
+            label={t.settings.nav.gateway}
+            onClick={() => setActiveView('gateway')}
+          />
+          <OverlayNavItem
+            active={activeView === 'keys'}
+            icon={KeyRound}
+            label={t.settings.nav.apiKeys}
+            onClick={() => setActiveView('keys')}
+          />
+          {activeView === 'keys' && (
+            <div className="ml-3.5 flex flex-col gap-0.5 pl-1.5">
+              <OverlayNavItem
+                active={keysView === 'tools'}
+                icon={Wrench}
+                label={t.settings.nav.keysTools}
+                nested
+                onClick={() => openKeysView('tools')}
+              />
+              <OverlayNavItem
+                active={keysView === 'settings'}
+                icon={Settings2}
+                label={t.settings.nav.keysSettings}
+                nested
+                onClick={() => openKeysView('settings')}
+              />
+            </div>
+          )}
+          <OverlayNavItem
+            active={activeView === 'mcp'}
+            icon={Wrench}
+            label={t.settings.nav.mcp}
+            onClick={() => setActiveView('mcp')}
+          />
+          <OverlayNavItem
+            active={activeView === 'sessions'}
+            icon={Archive}
+            label={t.settings.nav.archivedChats}
+            onClick={() => setActiveView('sessions')}
+          />
+          <div className="my-2 h-px bg-border/30" />
+          <OverlayNavItem
+            active={activeView === 'about'}
+            icon={Info}
+            label={t.settings.nav.about}
+            onClick={() => setActiveView('about')}
+          />
+          <div className="mt-auto flex items-center gap-1 pt-2">
+            <Tip label={t.settings.exportConfig}>
+              <OverlayIconButton onClick={() => void exportConfig()}>
+                <IconDownload className="size-3.5" />
+              </OverlayIconButton>
+            </Tip>
+            <Tip label={t.settings.importConfig}>
+              <OverlayIconButton
+                onClick={() => {
+                  triggerHaptic('open')
+                  importInputRef.current?.click()
+                }}
+              >
+                <IconUpload className="size-3.5" />
+              </OverlayIconButton>
+            </Tip>
+            <Tip label={t.settings.resetToDefaults}>
+              <OverlayIconButton
+                className="hover:text-destructive"
+                onClick={() => {
+                  triggerHaptic('warning')
+                  void resetConfig()
+                }}
+              >
+                <IconRefresh className="size-3.5" />
+              </OverlayIconButton>
+            </Tip>
+          </div>
+        </OverlaySidebar>
+
+        <OverlayMain className="px-0 pb-0 pt-[calc(var(--titlebar-height)+1rem)]">
+          {activeView === 'config:appearance' ? (
+            <AppearanceSettings />
+          ) : activeView === 'about' ? (
+            <AboutSettings />
+          ) : activeView === 'gateway' ? (
+            <GatewaySettings />
+          ) : activeView.startsWith('config:') ? (
+            <ConfigSettings
+              activeSectionId={activeView.slice('config:'.length)}
+              importInputRef={importInputRef}
+              onConfigSaved={onConfigSaved}
+              onMainModelChanged={onMainModelChanged}
+            />
+          ) : activeView === 'providers' ? (
+            <ProvidersSettings onViewChange={setProviderView} view={providerView} />
+          ) : activeView === 'keys' ? (
+            <KeysSettings view={keysView} />
+          ) : activeView === 'mcp' ? (
+            <McpSettings gateway={gateway} onConfigSaved={onConfigSaved} />
+          ) : (
+            <SessionsSettings />
+          )}
+        </OverlayMain>
+      </OverlaySplitLayout>
+    </OverlayView>
+  )
+}
+
+export { SettingsView as SettingsPage }

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

@@ -0,0 +1,96 @@
+import { useEffect, useMemo, useState } from 'react'
+
+import { useI18n } from '@/i18n'
+import type { EnvVarInfo } from '@/types/nastech'
+
+import { CredentialKeyCard, credentialPlaceholder, credentialRowLabel } from './credential-key-ui'
+import { useEnvCredentials } from './env-credentials'
+import { asText } from './helpers'
+import { LoadingState, SettingsContent } from './primitives'
+
+// Sub-views surfaced as sidebar subnav under Tools & Keys (see settings/index.tsx).
+export const KEYS_VIEWS = ['tools', 'settings'] as const
+
+export type KeysView = (typeof KEYS_VIEWS)[number]
+
+// Providers live on their own page; messaging-platform credentials live on the
+// dedicated Messaging page (and are hidden here via `channel_managed`). This
+// view covers tool API keys plus server/setting env vars (API server, webhook,
+// gateway), which fold into the Settings subnav.
+
+// Backend categories that surface under each subnav. Platform credentials use the
+// `messaging` category but are flagged ``channel_managed`` and configured on
+// the Messaging page; only gateway-wide ``messaging`` rows (e.g. GATEWAY_PROXY)
+// appear here alongside ``setting``.
+const VIEW_CATEGORIES: Record<KeysView, readonly string[]> = {
+  settings: ['setting', 'messaging'],
+  tools: ['tool']
+}
+
+export function KeysSettings({ view }: KeysSettingsProps) {
+  const { t } = useI18n()
+  const { rowProps, vars } = useEnvCredentials()
+  const [openKey, setOpenKey] = useState<null | string>(null)
+
+  useEffect(() => {
+    setOpenKey(null)
+  }, [view])
+
+  const groups = useMemo(() => {
+    if (!vars) {
+      return []
+    }
+
+    return KEYS_VIEWS.flatMap(v => {
+      const cats = VIEW_CATEGORIES[v]
+
+      const entries = Object.entries(vars)
+        .filter(([, info]) => !info.channel_managed && cats.includes(asText(info.category)))
+        .sort(([a], [b]) => a.localeCompare(b))
+
+      return entries.length === 0 ? [] : [{ category: v, entries }]
+    })
+  }, [vars])
+
+  if (!vars) {
+    return <LoadingState label={t.settings.keys.loading} />
+  }
+
+  const visible = groups.filter(g => g.category === view)
+
+  return (
+    <SettingsContent>
+      {visible.map(group => (
+        <div className="grid gap-2" key={group.category}>
+          {group.entries.map(([key, info]: [string, EnvVarInfo]) => {
+            const label = credentialRowLabel(key, info)
+
+            return (
+              <CredentialKeyCard
+                expanded={openKey === key}
+                info={info}
+                key={key}
+                label={label}
+                onExpand={() => setOpenKey(key)}
+                onToggle={() => setOpenKey(prev => (prev === key ? null : key))}
+                placeholder={credentialPlaceholder(key, info, label)}
+                rowProps={rowProps}
+                varKey={key}
+              />
+            )
+          })}
+        </div>
+      ))}
+
+      {visible.length === 0 && (
+        <div className="rounded-lg border border-dashed border-(--ui-stroke-tertiary) px-4 py-8 text-center text-[length:var(--conversation-caption-font-size)] text-muted-foreground">
+          {t.settings.keys.empty}
+        </div>
+      )}
+    </SettingsContent>
+  )
+}
+
+interface KeysSettingsProps {
+  view: KeysView
+}