nastechai-desktop 18.1.0

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

@@ -0,0 +1,150 @@
+import { useStore } from '@nanostores/react'
+import type { ReactNode } from 'react'
+
+import { Button } from '@/components/ui/button'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { Switch } from '@/components/ui/switch'
+import { useI18n } from '@/i18n'
+import { COMPLETION_SOUND_VARIANTS, previewCompletionSound } from '@/lib/completion-sound'
+import { triggerHaptic } from '@/lib/haptics'
+import { Bell, Play } from '@/lib/icons'
+import { cn } from '@/lib/utils'
+import { $completionSoundVariantId, setCompletionSoundVariantId } from '@/store/completion-sound'
+import {
+  $nativeNotifyPrefs,
+  NATIVE_NOTIFICATION_KINDS,
+  sendTestNativeNotification,
+  setNativeNotifyEnabled,
+  setNativeNotifyKind
+} from '@/store/native-notifications'
+import { notify } from '@/store/notifications'
+
+import { CONTROL_TEXT } from './constants'
+import { ListRow, SectionHeading, SettingsContent } from './primitives'
+
+const CAPTION = 'text-[length:var(--conversation-caption-font-size)] text-(--ui-text-tertiary)'
+
+function Caption({ children, className }: { children: ReactNode; className?: string }) {
+  return <p className={cn(CAPTION, className)}>{children}</p>
+}
+
+function ToggleRow(props: {
+  checked: boolean
+  description: string
+  disabled?: boolean
+  label: string
+  onChange: (on: boolean) => void
+}) {
+  return (
+    <ListRow
+      action={
+        <Switch
+          aria-label={props.label}
+          checked={props.checked}
+          disabled={props.disabled}
+          onCheckedChange={on => {
+            triggerHaptic('selection')
+            props.onChange(on)
+          }}
+        />
+      }
+      description={props.description}
+      title={props.label}
+    />
+  )
+}
+
+export function NotificationsSettings() {
+  const { t } = useI18n()
+  const prefs = useStore($nativeNotifyPrefs)
+  const completionSoundVariantId = useStore($completionSoundVariantId)
+  const copy = t.settings.notifications
+
+  const runTest = async () => {
+    triggerHaptic('open')
+    const ok = await sendTestNativeNotification(copy.testTitle, copy.testBody)
+    notify({ kind: ok ? 'info' : 'error', message: ok ? copy.testSent : copy.testUnsupported })
+  }
+
+  return (
+    <SettingsContent>
+      <SectionHeading icon={Bell} title={copy.title} />
+      <Caption className="mb-2 leading-(--conversation-caption-line-height)">{copy.intro}</Caption>
+
+      <ToggleRow
+        checked={prefs.enabled}
+        description={copy.enableAllDesc}
+        label={copy.enableAll}
+        onChange={setNativeNotifyEnabled}
+      />
+
+      <div className="my-1 h-px bg-border/30" />
+
+      {NATIVE_NOTIFICATION_KINDS.map(kind => (
+        <ToggleRow
+          checked={prefs.enabled && prefs.kinds[kind]}
+          description={copy.kinds[kind].description}
+          disabled={!prefs.enabled}
+          key={kind}
+          label={copy.kinds[kind].label}
+          onChange={on => setNativeNotifyKind(kind, on)}
+        />
+      ))}
+
+      <div className="my-1 h-px bg-border/30" />
+
+      <ListRow
+        action={
+          <div className="flex flex-wrap items-center justify-end gap-2">
+            <Select
+              onValueChange={value => {
+                const variantId = Number.parseInt(value, 10)
+
+                setCompletionSoundVariantId(variantId)
+                previewCompletionSound(variantId)
+                triggerHaptic('selection')
+              }}
+              value={String(completionSoundVariantId)}
+            >
+              <SelectTrigger className={cn('min-w-56', CONTROL_TEXT)}>
+                <SelectValue />
+              </SelectTrigger>
+
+              <SelectContent>
+                {COMPLETION_SOUND_VARIANTS.map(variant => (
+                  <SelectItem key={variant.id} value={String(variant.id)}>
+                    {variant.name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+
+            <Button
+              className="gap-1.5"
+              onClick={() => {
+                previewCompletionSound()
+                triggerHaptic('crisp')
+              }}
+              size="sm"
+              type="button"
+              variant="outline"
+            >
+              <Play className="size-3.5" />
+              {copy.completionSoundPreview}
+            </Button>
+          </div>
+        }
+        description={copy.completionSoundDesc}
+        title={copy.completionSoundTitle}
+      />
+
+      <div className="mt-4 flex flex-col gap-2">
+        <Button className="self-start" onClick={() => void runTest()} size="sm" type="button" variant="outline">
+          <Bell />
+          {copy.test}
+        </Button>
+        <Caption>{copy.focusedHint}</Caption>
+      </div>
+    </SettingsContent>
+  )
+}

package/src/app/settings/primitives.tsx

@@ -0,0 +1,115 @@
+import type { ReactNode } from 'react'
+
+import { PageLoader } from '@/components/page-loader'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import type { IconComponent } from '@/lib/icons'
+import { cn } from '@/lib/utils'
+
+import { PAGE_INSET_X } from '../layout-constants'
+
+export function SettingsContent({ children }: { children: ReactNode }) {
+  return (
+    <section className="min-h-0 overflow-hidden">
+      <div className={cn('h-full min-h-0 overflow-y-auto pb-20', PAGE_INSET_X)}>
+        <div className="mx-auto w-full max-w-4xl">{children}</div>
+      </div>
+    </section>
+  )
+}
+
+export function Pill({ tone = 'muted', children }: { tone?: 'muted' | 'primary'; children: ReactNode }) {
+  return <Badge variant={tone === 'primary' ? 'default' : 'muted'}>{children}</Badge>
+}
+
+export function SectionHeading({ icon: Icon, title, meta }: { icon: IconComponent; title: string; meta?: string }) {
+  return (
+    <div className="mb-2.5 flex items-center gap-2 pt-2 text-[length:var(--conversation-text-font-size)] font-medium">
+      <Icon className="size-4 text-muted-foreground" />
+      <span>{title}</span>
+      {meta && <Pill>{meta}</Pill>}
+    </div>
+  )
+}
+
+export function NavLink({
+  icon: Icon,
+  label,
+  active,
+  onClick
+}: {
+  icon: IconComponent
+  label: string
+  active: boolean
+  onClick: () => void
+}) {
+  return (
+    <Button
+      className={cn(
+        'flex min-h-7 w-full justify-start gap-2 rounded-md px-2 text-left text-[length:var(--conversation-text-font-size)] transition',
+        active
+          ? 'bg-(--ui-bg-tertiary) text-foreground'
+          : 'text-(--ui-text-secondary) hover:bg-(--chrome-action-hover) hover:text-foreground'
+      )}
+      onClick={onClick}
+      size="sm"
+      type="button"
+      variant="ghost"
+    >
+      <Icon className="size-4 shrink-0" />
+      <span className="min-w-0 flex-1 truncate">{label}</span>
+    </Button>
+  )
+}
+
+export function ListRow({
+  title,
+  description,
+  hint,
+  action,
+  below,
+  wide = false
+}: {
+  title: ReactNode
+  description?: ReactNode
+  hint?: ReactNode
+  action?: ReactNode
+  below?: ReactNode
+  wide?: boolean
+}) {
+  return (
+    <div
+      className={cn(
+        'grid gap-3 py-3 sm:grid-cols-[minmax(0,1fr)_minmax(15rem,22rem)] sm:items-center',
+        wide && 'sm:grid-cols-1 sm:items-start'
+      )}
+    >
+      <div className="min-w-0">
+        <div className="text-[length:var(--conversation-text-font-size)] font-medium text-foreground">{title}</div>
+        {description && (
+          <div className="mt-1 text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) text-(--ui-text-tertiary)">
+            {description}
+          </div>
+        )}
+        {hint && <div className="mt-1 block font-mono text-[0.68rem] text-muted-foreground/45">{hint}</div>}
+        {below}
+      </div>
+      {action && <div className={cn('min-w-0', !wide && 'sm:justify-self-end')}>{action}</div>}
+    </div>
+  )
+}
+
+export function LoadingState({ label }: { label: string }) {
+  return <PageLoader label={label} />
+}
+
+export function EmptyState({ title, description }: { title: string; description: string }) {
+  return (
+    <div className="grid min-h-48 place-items-center text-center">
+      <div>
+        <div className="text-sm font-medium">{title}</div>
+        <div className="mt-1 text-xs text-muted-foreground">{description}</div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,100 @@
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { atom } from 'nanostores'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import type { OAuthProvider } from '@/types/nastech'
+
+const listOAuthProviders = vi.fn()
+const disconnectOAuthProvider = vi.fn()
+const getEnvVars = vi.fn()
+const startManualProviderOAuth = vi.fn()
+const onboarding = atom({ manual: false })
+
+vi.mock('@/nastech', () => ({
+  disconnectOAuthProvider: (providerId: string) => disconnectOAuthProvider(providerId),
+  getEnvVars: () => getEnvVars(),
+  listOAuthProviders: () => listOAuthProviders()
+}))
+
+vi.mock('@/store/onboarding', () => ({
+  $desktopOnboarding: onboarding,
+  startManualProviderOAuth: (providerId: string) => startManualProviderOAuth(providerId)
+}))
+
+function provider(id: string, loggedIn: boolean, patch: Partial<OAuthProvider> = {}): OAuthProvider {
+  return {
+    cli_command: `nastech auth add ${id}`,
+    disconnectable: true,
+    docs_url: '',
+    flow: 'device_code',
+    id,
+    name: id === 'nastech' ? 'NasTech Portal' : 'MiniMax',
+    status: {
+      logged_in: loggedIn
+    },
+    ...patch
+  }
+}
+
+beforeEach(() => {
+  onboarding.set({ manual: false })
+  getEnvVars.mockResolvedValue({})
+  disconnectOAuthProvider.mockResolvedValue({ ok: true, provider: 'nastech' })
+  listOAuthProviders.mockResolvedValue({
+    providers: [provider('nastech', true), provider('minimax-oauth', false)]
+  })
+  vi.spyOn(window, 'confirm').mockReturnValue(true)
+})
+
+afterEach(() => {
+  cleanup()
+  vi.restoreAllMocks()
+  vi.clearAllMocks()
+})
+
+async function renderProvidersSettings() {
+  const { ProvidersSettings } = await import('./providers-settings')
+
+  return render(<ProvidersSettings onClose={vi.fn()} onViewChange={vi.fn()} view="accounts" />)
+}
+
+describe('ProvidersSettings', () => {
+  it('disconnects a connected provider account and refreshes the accounts list', async () => {
+    await renderProvidersSettings()
+
+    const remove = await screen.findByRole('button', { name: 'Remove NasTech Portal' })
+    fireEvent.click(remove)
+
+    await waitFor(() => expect(disconnectOAuthProvider).toHaveBeenCalledWith('nastech'))
+    expect(listOAuthProviders).toHaveBeenCalledTimes(2)
+  })
+
+  it('keeps provider selection separate from account removal', async () => {
+    await renderProvidersSettings()
+
+    fireEvent.click(await screen.findByText('NasTech Portal'))
+
+    expect(startManualProviderOAuth).toHaveBeenCalledWith('nastech')
+    expect(disconnectOAuthProvider).not.toHaveBeenCalled()
+  })
+
+  it('does not offer removal for externally managed providers', async () => {
+    listOAuthProviders.mockResolvedValue({
+      providers: [
+        provider('qwen-oauth', true, {
+          cli_command: 'nastech auth add qwen-oauth',
+          disconnect_hint: 'Use `nastech auth add qwen-oauth` or that provider\'s CLI to remove it.',
+          disconnectable: false,
+          flow: 'external',
+          name: 'Qwen (via Qwen CLI)'
+        })
+      ]
+    })
+
+    await renderProvidersSettings()
+
+    expect(await screen.findByText('Qwen Code')).toBeTruthy()
+    expect(screen.queryByRole('button', { name: 'Remove Qwen Code' })).toBeNull()
+    expect(screen.getByText(/managed by its own CLI/)).toBeTruthy()
+  })
+})

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

@@ -0,0 +1,258 @@
+import { useStore } from '@nanostores/react'
+import { useEffect, useMemo, useState } from 'react'
+
+import {
+  FEATURED_ID,
+  FeaturedProviderRow,
+  KeyProviderRow,
+  ProviderRow,
+  sortProviders
+} from '@/components/desktop-onboarding-overlay'
+import { Button } from '@/components/ui/button'
+import { listOAuthProviders } from '@/nastech'
+import { useI18n } from '@/i18n'
+import { ChevronDown, KeyRound } from '@/lib/icons'
+import { cn } from '@/lib/utils'
+import { $desktopOnboarding, startManualProviderOAuth } from '@/store/onboarding'
+import type { EnvVarInfo, OAuthProvider } from '@/types/nastech'
+
+import { isKeyVar, ProviderKeyRows } from './credential-key-ui'
+import { SettingsCategoryHeading, useEnvCredentials } from './env-credentials'
+import { providerGroup, providerMeta, providerPriority } from './helpers'
+import { LoadingState, SettingsContent } from './primitives'
+
+// Sub-views surfaced as a sidebar subnav: account sign-in vs raw API keys.
+export const PROVIDER_VIEWS = ['accounts', 'keys'] as const
+
+export type ProviderView = (typeof PROVIDER_VIEWS)[number]
+
+// Group the env catalog by provider — one ListRow per vendor plus optional
+// advanced overrides (base URL, region, etc.). Groups without a key field and
+// the "Other" bucket are skipped.
+function buildProviderKeyGroups(vars: Record<string, EnvVarInfo>): ProviderKeyGroup[] {
+  const buckets = new Map<string, [string, EnvVarInfo][]>()
+
+  for (const [key, info] of Object.entries(vars)) {
+    if (info.category !== 'provider') {
+      continue
+    }
+
+    const name = providerGroup(key)
+
+    if (name === 'Other') {
+      continue
+    }
+
+    buckets.set(name, [...(buckets.get(name) ?? []), [key, info]])
+  }
+
+  const groups: ProviderKeyGroup[] = []
+
+  for (const [name, entries] of buckets) {
+    const primary = entries.find(([k, i]) => !i.advanced && isKeyVar(k, i)) ?? entries.find(([k, i]) => isKeyVar(k, i))
+
+    if (!primary) {
+      continue
+    }
+
+    const meta = providerMeta(name)
+
+    groups.push({
+      // Advanced = the provider's non-key knobs (base URL, region, deployment).
+      // Skip redundant alias key vars (e.g. ANTHROPIC_TOKEN vs ANTHROPIC_API_KEY)
+      // so we never render a second "Paste key" input — unless one is already
+      // set, in which case keep it visible so it stays clearable.
+      advanced: entries
+        .filter(([k, i]) => k !== primary[0] && (!isKeyVar(k, i) || i.is_set))
+        .sort(([a], [b]) => a.localeCompare(b)),
+      description: meta?.description ?? primary[1].description,
+      docsUrl: meta?.docsUrl ?? primary[1].url ?? undefined,
+      hasAnySet: entries.some(([, i]) => i.is_set),
+      name,
+      primary,
+      priority: providerPriority(name)
+    })
+  }
+
+  return groups.sort((a, b) => a.priority - b.priority || a.name.localeCompare(b.name))
+}
+
+// Deliberately a near-1:1 replica of the first-run onboarding picker
+// (`Picker` in desktop-onboarding-overlay): same recommended card, same
+// provider rows, same "Other providers" disclosure, same OpenRouter quick-key
+// row, and the same bottom-right "I have an API key" affordance. The leaf cards
+// are the exact shared components, so the two surfaces stay visually identical.
+// Selecting a provider hands off to the shared onboarding overlay, which runs
+// that provider's real sign-in flow; the key affordances open the API-key
+// catalog below.
+function OAuthPicker({ onWantApiKey, providers }: { onWantApiKey: () => void; providers: OAuthProvider[] }) {
+  const { t } = useI18n()
+  const p = t.settings.providers
+  const [showAll, setShowAll] = useState(false)
+  const ordered = useMemo(() => sortProviders(providers), [providers])
+
+  if (ordered.length === 0) {
+    return null
+  }
+
+  const select = (p: OAuthProvider) => startManualProviderOAuth(p.id)
+
+  const featured = ordered.find(p => p.id === FEATURED_ID) ?? null
+  const rest = featured ? ordered.filter(p => p.id !== FEATURED_ID) : ordered
+  // Keep connected accounts grouped and always visible; only the unconnected
+  // providers hide behind the disclosure, so the page leads with what's set up.
+  const connected = rest.filter(p => p.status?.logged_in)
+  const others = rest.filter(p => !p.status?.logged_in)
+  const collapsible = others.length > 0
+  const showOthers = !collapsible || showAll
+
+  return (
+    <section className="mb-5 grid gap-2">
+      <div className="flex flex-wrap items-baseline justify-between gap-x-3">
+        <SettingsCategoryHeading icon={KeyRound} title={p.connectAccount} />
+        <Button
+          className="text-[length:var(--conversation-caption-font-size)]"
+          onClick={onWantApiKey}
+          size="inline"
+          type="button"
+          variant="textStrong"
+        >
+          {p.haveApiKey}
+        </Button>
+      </div>
+      <p className="-mt-2 mb-1 text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) text-(--ui-text-tertiary)">
+        {p.intro}
+      </p>
+      {featured && <FeaturedProviderRow onSelect={select} provider={featured} />}
+      {connected.length > 0 && (
+        <>
+          <p className="mt-1 px-0.5 text-[length:var(--conversation-caption-font-size)] font-medium text-(--ui-text-tertiary)">
+            {p.connected}
+          </p>
+          {connected.map(p => (
+            <ProviderRow key={p.id} onSelect={select} provider={p} />
+          ))}
+        </>
+      )}
+      {showOthers && (
+        <>
+          {others.map(p => (
+            <ProviderRow key={p.id} onSelect={select} provider={p} />
+          ))}
+          <KeyProviderRow onClick={onWantApiKey} />
+        </>
+      )}
+      {collapsible && (
+        <Button
+          className="py-1 text-[length:var(--conversation-caption-font-size)]"
+          onClick={() => setShowAll(v => !v)}
+          size="inline"
+          type="button"
+          variant="text"
+        >
+          {showAll ? p.collapse : connected.length > 0 ? p.connectAnother : p.otherProviders}
+          <ChevronDown className={cn('size-3.5 transition', showAll && 'rotate-180')} />
+        </Button>
+      )}
+    </section>
+  )
+}
+
+function NoProviderKeys() {
+  const { t } = useI18n()
+
+  return (
+    <div className="grid min-h-32 place-items-center px-4 py-8 text-center text-[length:var(--conversation-caption-font-size)] text-muted-foreground">
+      {t.settings.providers.noProviderKeys}
+    </div>
+  )
+}
+
+export function ProvidersSettings({ onViewChange, view }: ProvidersSettingsProps) {
+  const { t } = useI18n()
+  const { rowProps, vars } = useEnvCredentials()
+  const [oauthProviders, setOauthProviders] = useState<OAuthProvider[]>([])
+  const [openProvider, setOpenProvider] = useState<null | string>(null)
+  // The onboarding overlay owns the OAuth flow. Watch its `manual` flag so we
+  // re-read connection state when the user finishes (or dismisses) a sign-in
+  // they launched from this page — otherwise the cards keep their stale status.
+  const onboardingActive = useStore($desktopOnboarding).manual
+
+  useEffect(() => {
+    if (onboardingActive) {
+      return
+    }
+
+    let cancelled = false
+
+    // OAuth providers are best-effort — a failure here just hides the panel.
+    void (async () => {
+      try {
+        const { providers } = await listOAuthProviders()
+
+        if (!cancelled) {
+          setOauthProviders(providers)
+        }
+      } catch {
+        // Ignore — the OAuth panel just won't render.
+      }
+    })()
+
+    return () => void (cancelled = true)
+  }, [onboardingActive])
+
+  if (!vars) {
+    return <LoadingState label={t.settings.providers.loading} />
+  }
+
+  const hasOauth = oauthProviders.length > 0
+  // The sidebar subnav owns the Accounts/API-keys split now; with no OAuth
+  // providers there's nothing for the "Accounts" view to show, so fall to keys.
+  const showApiKeys = view === 'keys' || !hasOauth
+
+  const keyGroups = buildProviderKeyGroups(vars)
+
+  if (showApiKeys) {
+    return (
+      <SettingsContent>
+        {keyGroups.length > 0 ? (
+          <div className="grid gap-2">
+            {keyGroups.map(group => (
+              <ProviderKeyRows
+                expanded={openProvider === group.name}
+                group={group}
+                key={group.name}
+                onExpand={() => setOpenProvider(group.name)}
+                onToggle={() => setOpenProvider(prev => (prev === group.name ? null : group.name))}
+                rowProps={rowProps}
+              />
+            ))}
+          </div>
+        ) : (
+          <NoProviderKeys />
+        )}
+      </SettingsContent>
+    )
+  }
+
+  return (
+    <SettingsContent>
+      <OAuthPicker onWantApiKey={() => onViewChange('keys')} providers={oauthProviders} />
+    </SettingsContent>
+  )
+}
+
+interface ProviderKeyGroup {
+  advanced: [string, EnvVarInfo][]
+  description?: string
+  docsUrl?: string
+  hasAnySet: boolean
+  name: string
+  primary: [string, EnvVarInfo]
+  priority: number
+}
+
+interface ProvidersSettingsProps {
+  onViewChange: (view: ProviderView) => void
+  view: ProviderView
+}