nastechai-desktop 18.1.0

package/src/app/shell/model-edit-submenu.test.tsx

@@ -0,0 +1,84 @@
+import { cleanup, fireEvent, render, screen } from '@testing-library/react'
+import { afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { DropdownMenu, DropdownMenuContent, DropdownMenuSub, DropdownMenuSubTrigger } from '@/components/ui/dropdown-menu'
+import { $modelPresets, getModelPreset } from '@/store/model-presets'
+import { $activeSessionId } from '@/store/session'
+
+import { type FastControl, ModelEditSubmenu } from './model-edit-submenu'
+
+// Radix calls these on open; jsdom doesn't implement them.
+beforeAll(() => {
+  Element.prototype.scrollIntoView = vi.fn()
+  Element.prototype.hasPointerCapture = vi.fn(() => false)
+  Element.prototype.releasePointerCapture = vi.fn()
+})
+
+beforeEach(() => {
+  $modelPresets.set({})
+  $activeSessionId.set(null)
+})
+
+afterEach(() => {
+  cleanup()
+  vi.clearAllMocks()
+})
+
+// Render the submenu inside an open menu/sub so its content (switches) mounts.
+function renderSubmenu(opts: { fastControl: FastControl; reasoning: boolean; requestGateway: () => Promise<unknown> }) {
+  return render(
+    <DropdownMenu open>
+      <DropdownMenuContent>
+        <DropdownMenuSub open>
+          <DropdownMenuSubTrigger>edit</DropdownMenuSubTrigger>
+          <ModelEditSubmenu
+            effort="medium"
+            fastControl={opts.fastControl}
+            isActive
+            model="m1"
+            onSelectModel={vi.fn()}
+            provider="p1"
+            reasoning={opts.reasoning}
+            requestGateway={opts.requestGateway as never}
+          />
+        </DropdownMenuSub>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+// Regression: editing the active row before a live session exists must stay
+// preset-only — the gateway's config.set falls back to global config when no
+// session matches, so it must not be called. (Caught in the second review.)
+describe('ModelEditSubmenu no-session guard', () => {
+  it('param fast: records the preset but skips the gateway without a session', () => {
+    const requestGateway = vi.fn().mockResolvedValue({})
+    renderSubmenu({ fastControl: { kind: 'param', on: false }, reasoning: false, requestGateway })
+
+    fireEvent.click(screen.getByRole('switch'))
+
+    expect(getModelPreset('p1', 'm1').fast).toBe(true)
+    expect(requestGateway).not.toHaveBeenCalled()
+  })
+
+  it('reasoning: records the preset but skips the gateway without a session', () => {
+    const requestGateway = vi.fn().mockResolvedValue({})
+    renderSubmenu({ fastControl: { kind: 'none' }, reasoning: true, requestGateway })
+
+    // Thinking starts on (medium); toggling it off routes through patchReasoning.
+    fireEvent.click(screen.getByRole('switch'))
+
+    expect(getModelPreset('p1', 'm1').effort).toBe('none')
+    expect(requestGateway).not.toHaveBeenCalled()
+  })
+
+  it('param fast: pushes to the gateway once a session is active', async () => {
+    const requestGateway = vi.fn().mockResolvedValue({})
+    $activeSessionId.set('sess1')
+    renderSubmenu({ fastControl: { kind: 'param', on: false }, reasoning: false, requestGateway })
+
+    fireEvent.click(screen.getByRole('switch'))
+
+    expect(requestGateway).toHaveBeenCalledWith('config.set', { key: 'fast', session_id: 'sess1', value: 'fast' })
+  })
+})

package/src/app/shell/model-edit-submenu.tsx

@@ -0,0 +1,245 @@
+import { useStore } from '@nanostores/react'
+
+import {
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  dropdownMenuRow,
+  dropdownMenuSectionLabel,
+  DropdownMenuSeparator,
+  DropdownMenuSubContent
+} from '@/components/ui/dropdown-menu'
+import { Switch } from '@/components/ui/switch'
+import { useI18n } from '@/i18n'
+import { notifyError } from '@/store/notifications'
+import {
+  $activeSessionId,
+  $currentReasoningEffort,
+  setCurrentFastMode,
+  setCurrentReasoningEffort
+} from '@/store/session'
+
+// NasTech' real reasoning levels (see VALID_REASONING_EFFORTS); `none` is owned
+// by the Thinking toggle, not the radio.
+const EFFORT_OPTIONS = [
+  { value: 'minimal', labelKey: 'minimal' },
+  { value: 'low', labelKey: 'low' },
+  { value: 'medium', labelKey: 'medium' },
+  { value: 'high', labelKey: 'high' },
+  { value: 'xhigh', labelKey: 'max' }
+] as const
+
+/** How "fast" is achieved for a given model — two different mechanisms:
+ *  - `param`: the Anthropic/OpenAI `speed=fast` request parameter.
+ *  - `variant`: a separate `…-fast` sibling model selected via the model field.
+ */
+export type FastControl =
+  | { kind: 'none' }
+  | { kind: 'param'; on: boolean }
+  | { kind: 'variant'; baseId: string; fastId: string; on: boolean }
+
+/** Resolve the fast mechanism for a model: prefer the speed=fast parameter
+ *  when the backend supports it, else fall back to a `…-fast` sibling model. */
+export function resolveFastControl(
+  model: string,
+  providerModels: readonly string[],
+  paramSupported: boolean,
+  currentFastMode: boolean
+): FastControl {
+  if (paramSupported) {
+    return { kind: 'param', on: currentFastMode }
+  }
+
+  if (/-fast$/i.test(model)) {
+    const baseId = model.replace(/-fast$/i, '')
+
+    // Only a toggle if there's a base to switch back to; otherwise it's a
+    // standalone fast model with no "off" state.
+    return providerModels.includes(baseId) ? { kind: 'variant', baseId, fastId: model, on: true } : { kind: 'none' }
+  }
+
+  const fastId = `${model}-fast`
+
+  if (providerModels.includes(fastId)) {
+    return { kind: 'variant', baseId: model, fastId, on: false }
+  }
+
+  // Fast isn't natively offered here, but if the session still has the speed
+  // param on (carried over from a previous model), expose the toggle so it can
+  // be turned off rather than stranded.
+  if (currentFastMode) {
+    return { kind: 'param', on: true }
+  }
+
+  return { kind: 'none' }
+}
+
+interface ModelEditSubmenuProps {
+  /** How fast mode is offered for this model (param toggle vs. variant swap). */
+  fastControl: FastControl
+  /** Whether this row's model is the active one. */
+  isActive: boolean
+  /** Switch to this model (resolves false on failure). Awaited before applying
+   *  edits when not active so a failed switch doesn't write to the old model. */
+  onActivate: () => Promise<boolean> | void
+  /** Switch to a specific model id (used to swap base ⇄ -fast variant). */
+  onSelectModel: (model: string) => Promise<boolean> | void
+  /** Whether this model supports reasoning effort. */
+  reasoning: boolean
+  requestGateway: <T>(method: string, params?: Record<string, unknown>) => Promise<T>
+}
+
+export function ModelEditSubmenu({
+  fastControl,
+  isActive,
+  onActivate,
+  onSelectModel,
+  reasoning,
+  requestGateway
+}: ModelEditSubmenuProps) {
+  const { t } = useI18n()
+  const copy = t.shell.modelOptions
+  // Reactive session state comes straight from the stores rather than being
+  // drilled through the panel, so editing it re-renders only this submenu.
+  const activeSessionId = useStore($activeSessionId)
+  const currentReasoningEffort = useStore($currentReasoningEffort)
+
+  const effort = normalizeEffort(currentReasoningEffort)
+  const thinkingOn = isThinkingEnabled(currentReasoningEffort)
+
+  // Reasoning/fast are session-scoped (they apply to the active model), so
+  // editing a non-active model first switches to it. Returns false if the
+  // switch failed, so callers skip applying to the wrong (previous) model.
+  const ensureActive = async (): Promise<boolean> => {
+    if (isActive) {
+      return true
+    }
+
+    return (await onActivate()) !== false
+  }
+
+  const patchReasoning = async (next: string, rollback: string) => {
+    setCurrentReasoningEffort(next)
+
+    try {
+      if (!(await ensureActive())) {
+        setCurrentReasoningEffort(rollback)
+
+        return
+      }
+
+      await requestGateway('config.set', {
+        key: 'reasoning',
+        session_id: activeSessionId ?? '',
+        value: next
+      })
+    } catch (err) {
+      setCurrentReasoningEffort(rollback)
+      notifyError(err, copy.updateFailed)
+    }
+  }
+
+  const toggleFast = (enabled: boolean) => {
+    if (fastControl.kind === 'variant') {
+      // Fast is a separate model id — swap to it (or back to the base).
+      void onSelectModel(enabled ? fastControl.fastId : fastControl.baseId)
+
+      return
+    }
+
+    if (fastControl.kind === 'param') {
+      setCurrentFastMode(enabled)
+
+      void (async () => {
+        try {
+          if (!(await ensureActive())) {
+            setCurrentFastMode(!enabled)
+
+            return
+          }
+
+          await requestGateway('config.set', {
+            key: 'fast',
+            session_id: activeSessionId ?? '',
+            value: enabled ? 'fast' : 'normal'
+          })
+        } catch (err) {
+          setCurrentFastMode(!enabled)
+          notifyError(err, copy.fastFailed)
+        }
+      })()
+    }
+  }
+
+  const hasFast = fastControl.kind !== 'none'
+  const fastOn = fastControl.kind === 'none' ? false : fastControl.on
+
+  return (
+    <DropdownMenuSubContent className="w-52 p-0" sideOffset={4}>
+      {!hasFast && !reasoning ? (
+        <div className="px-2.5 py-3 text-xs text-(--ui-text-tertiary)">{copy.noOptions}</div>
+      ) : (
+        <>
+          <DropdownMenuLabel className={dropdownMenuSectionLabel}>{copy.options}</DropdownMenuLabel>
+          {reasoning ? (
+            <DropdownMenuItem className={dropdownMenuRow} onSelect={event => event.preventDefault()}>
+              {copy.thinking}
+              <Switch
+                checked={thinkingOn}
+                className="ml-auto"
+                onCheckedChange={checked =>
+                  void patchReasoning(checked ? effort || 'medium' : 'none', currentReasoningEffort)
+                }
+                size="xs"
+              />
+            </DropdownMenuItem>
+          ) : null}
+          {hasFast ? (
+            <DropdownMenuItem className={dropdownMenuRow} onSelect={event => event.preventDefault()}>
+              {copy.fast}
+              <Switch checked={fastOn} className="ml-auto" onCheckedChange={toggleFast} size="xs" />
+            </DropdownMenuItem>
+          ) : null}
+          {reasoning ? (
+            <>
+              <DropdownMenuSeparator className="mx-0" />
+              <DropdownMenuLabel className={dropdownMenuSectionLabel}>{copy.effort}</DropdownMenuLabel>
+              <DropdownMenuRadioGroup
+                onValueChange={value => void patchReasoning(value, currentReasoningEffort)}
+                value={effort}
+              >
+                {EFFORT_OPTIONS.map(option => (
+                  <DropdownMenuRadioItem
+                    className={dropdownMenuRow}
+                    key={option.value}
+                    onSelect={event => event.preventDefault()}
+                    value={option.value}
+                  >
+                    {copy[option.labelKey]}
+                  </DropdownMenuRadioItem>
+                ))}
+              </DropdownMenuRadioGroup>
+            </>
+          ) : null}
+        </>
+      )}
+    </DropdownMenuSubContent>
+  )
+}
+
+function isThinkingEnabled(effort: string): boolean {
+  // Empty = NasTech default (medium) = on; only an explicit "none" is off.
+  return (effort || 'medium').trim().toLowerCase() !== 'none'
+}
+
+function normalizeEffort(effort: string): string {
+  const value = (effort || 'medium').trim().toLowerCase()
+
+  // Thinking off → no effort selected in the radio group.
+  if (value === 'none') {
+    return ''
+  }
+
+  return EFFORT_OPTIONS.some(option => option.value === value) ? value : 'medium'
+}

package/src/app/shell/model-menu-panel.tsx

@@ -0,0 +1,295 @@
+import { useStore } from '@nanostores/react'
+import { useQuery } from '@tanstack/react-query'
+import { useMemo, useState } from 'react'
+
+import { Codicon } from '@/components/ui/codicon'
+import {
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  dropdownMenuRow,
+  DropdownMenuSearch,
+  dropdownMenuSectionLabel,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger
+} from '@/components/ui/dropdown-menu'
+import { Skeleton } from '@/components/ui/skeleton'
+import type { NasTechGateway } from '@/nastech'
+import { getGlobalModelOptions } from '@/nastech'
+import { useI18n } from '@/i18n'
+import { displayModelName, modelDisplayParts, reasoningEffortLabel } from '@/lib/model-status-label'
+import { cn } from '@/lib/utils'
+import {
+  $visibleModels,
+  collapseModelFamilies,
+  DEFAULT_VISIBLE_PER_PROVIDER,
+  type ModelFamily,
+  modelVisibilityKey,
+  setModelVisibilityOpen
+} from '@/store/model-visibility'
+import {
+  $activeSessionId,
+  $currentFastMode,
+  $currentModel,
+  $currentProvider,
+  $currentReasoningEffort
+} from '@/store/session'
+import type { ModelOptionProvider, ModelOptionsResponse } from '@/types/nastech'
+
+import { ModelEditSubmenu, resolveFastControl } from './model-edit-submenu'
+
+interface ModelMenuPanelProps {
+  gateway?: NasTechGateway
+  onSelectModel: (selection: { model: string; persistGlobal: boolean; provider: string }) => Promise<boolean> | void
+  requestGateway: <T>(method: string, params?: Record<string, unknown>) => Promise<T>
+}
+
+interface ProviderGroup {
+  families: ModelFamily[]
+  provider: ModelOptionProvider
+}
+
+export function ModelMenuPanel({ gateway, onSelectModel, requestGateway }: ModelMenuPanelProps) {
+  const { t } = useI18n()
+  const copy = t.shell.modelMenu
+  const [search, setSearch] = useState('')
+  // Reactive session state is read from the stores here (not drilled in), so
+  // toggling effort/fast/model re-renders this panel in place without forcing
+  // the parent to rebuild the menu content (which would close the dropdown).
+  const activeSessionId = useStore($activeSessionId)
+  const currentFastMode = useStore($currentFastMode)
+  const currentModel = useStore($currentModel)
+  const currentProvider = useStore($currentProvider)
+  const currentReasoningEffort = useStore($currentReasoningEffort)
+  const visibleModels = useStore($visibleModels)
+
+  const modelOptions = useQuery({
+    queryKey: ['model-options', activeSessionId || 'global'],
+    queryFn: (): Promise<ModelOptionsResponse> => {
+      if (gateway && activeSessionId) {
+        return gateway.request<ModelOptionsResponse>('model.options', { session_id: activeSessionId })
+      }
+
+      return getGlobalModelOptions()
+    }
+  })
+
+  const optionsModel = String(modelOptions.data?.model ?? currentModel ?? '')
+  const optionsProvider = String(modelOptions.data?.provider ?? currentProvider ?? '')
+  const loading = modelOptions.isPending && !modelOptions.data
+
+  const error = modelOptions.error
+    ? modelOptions.error instanceof Error
+      ? modelOptions.error.message
+      : String(modelOptions.error)
+    : null
+
+  const providers = modelOptions.data?.providers
+
+  const switchTo = (model: string, provider: string) =>
+    onSelectModel({ model, persistGlobal: !activeSessionId, provider })
+
+  const groups = useMemo(
+    () => groupModels(providers ?? [], search, { model: optionsModel, provider: optionsProvider }, visibleModels),
+    [providers, search, optionsModel, optionsProvider, visibleModels]
+  )
+
+  return (
+    <>
+      <DropdownMenuSearch
+        aria-label={copy.search}
+        onValueChange={setSearch}
+        placeholder={copy.search}
+        value={search}
+      />
+
+      <DropdownMenuSeparator className="mx-0" />
+
+      {loading ? (
+        <DropdownMenuGroup className="py-1">
+          {Array.from({ length: 4 }, (_, index) => (
+            <DropdownMenuItem
+              className={dropdownMenuRow}
+              disabled
+              key={index}
+              onSelect={event => event.preventDefault()}
+            >
+              <Skeleton className="h-4 w-full" />
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuGroup>
+      ) : error ? (
+        <DropdownMenuItem className={dropdownMenuRow} disabled>
+          {error}
+        </DropdownMenuItem>
+      ) : groups.length === 0 ? (
+        <DropdownMenuItem className={dropdownMenuRow} disabled>
+          {copy.noModels}
+        </DropdownMenuItem>
+      ) : (
+        <div className="max-h-80 overflow-y-auto py-0.5">
+          {groups.map(group => (
+            <DropdownMenuGroup className="py-0.5" key={group.provider.slug}>
+              <DropdownMenuLabel className={dropdownMenuSectionLabel}>{group.provider.name}</DropdownMenuLabel>
+              {group.families.map(family => {
+                // The active id may be the base or its -fast sibling; either
+                // way this one family row represents both.
+                const activeId =
+                  group.provider.slug === optionsProvider &&
+                  (optionsModel === family.id || optionsModel === family.fastId)
+                    ? optionsModel
+                    : null
+
+                const isCurrent = activeId !== null
+                const name = modelDisplayParts(family.id).name
+                // Capabilities are looked up against the active/base id; the
+                // -fast variant carries the same param support as its base.
+                const caps = group.provider.capabilities?.[family.id]
+
+                // Single source of truth for the active row's fast state — keeps
+                // the row label in lock-step with the submenu's Fast toggle and
+                // handles the standalone `-fast` id case.
+                const fastControl = resolveFastControl(
+                  activeId ?? family.id,
+                  group.provider.models ?? [],
+                  caps?.fast ?? false,
+                  currentFastMode
+                )
+
+                // Grayed text: active row shows live state (Fast + effort);
+                // others show a fast-capability hint.
+                const meta = isCurrent
+                  ? [
+                      fastControl.kind !== 'none' && fastControl.on ? copy.fast : null,
+                      reasoningEffortLabel(currentReasoningEffort) || copy.medium
+                    ]
+                      .filter(Boolean)
+                      .join(' ')
+                  : caps?.fast || family.fastId
+                    ? copy.fast
+                    : ''
+
+                // Every row is a hover-Edit submenu trigger. Activating it
+                // (pointer or keyboard) switches to the family's base model;
+                // the Fast toggle inside swaps to the -fast sibling (or flips
+                // the speed param). The sub-trigger has no `onSelect`, so wire
+                // both click and Enter/Space for keyboard parity.
+                const activate = () => {
+                  if (!isCurrent) {
+                    void switchTo(family.id, group.provider.slug)
+                  }
+                }
+
+                return (
+                  <DropdownMenuSub key={`${group.provider.slug}:${family.id}`}>
+                    <DropdownMenuSubTrigger
+                      className={dropdownMenuRow}
+                      hideChevron
+                      onClick={activate}
+                      onKeyDown={event => {
+                        if (event.key === 'Enter' || event.key === ' ') {
+                          activate()
+                        }
+                      }}
+                    >
+                      <span className="min-w-0 flex-1 truncate">
+                        {name}
+                        {meta ? <span className="text-(--ui-text-tertiary)"> {meta}</span> : null}
+                      </span>
+                      {isCurrent ? <Codicon className="ml-auto text-foreground" name="check" size="0.75rem" /> : null}
+                    </DropdownMenuSubTrigger>
+                    <ModelEditSubmenu
+                      fastControl={fastControl}
+                      isActive={isCurrent}
+                      onActivate={() => switchTo(family.id, group.provider.slug)}
+                      onSelectModel={nextModel => switchTo(nextModel, group.provider.slug)}
+                      reasoning={caps?.reasoning ?? true}
+                      requestGateway={requestGateway}
+                    />
+                  </DropdownMenuSub>
+                )
+              })}
+            </DropdownMenuGroup>
+          ))}
+        </div>
+      )}
+
+      <DropdownMenuSeparator className="mx-0" />
+
+      <DropdownMenuItem
+        className={cn(dropdownMenuRow, 'text-(--ui-text-tertiary)')}
+        onSelect={() => setModelVisibilityOpen(true)}
+      >
+        {copy.editModels}
+      </DropdownMenuItem>
+    </>
+  )
+}
+
+// Collapsed we show the user's chosen models (or the curated default); typing
+// spans every available model so anything is reachable past the cut.
+const PER_PROVIDER_SEARCH = 12
+
+function groupModels(
+  providers: ModelOptionProvider[],
+  search: string,
+  current: { model: string; provider: string },
+  visible: Set<string> | null
+): ProviderGroup[] {
+  const q = search.trim().toLowerCase()
+  const groups: ProviderGroup[] = []
+
+  for (const provider of providers) {
+    const allFamilies = collapseModelFamilies(provider.models ?? [])
+
+    if (allFamilies.length === 0) {
+      continue
+    }
+
+    const matches = (family: ModelFamily) =>
+      `${family.id} ${family.fastId ?? ''} ${provider.name} ${provider.slug} ${displayModelName(family.id)}`
+        .toLowerCase()
+        .includes(q)
+
+    // Which model ids to show (the active one is always added on top of this).
+    let shown: Set<string>
+
+    if (q) {
+      // Search spans every family, regardless of visibility.
+      shown = new Set(allFamilies.filter(matches).map(family => family.id))
+    } else if (visible) {
+      // User has customized which models show — honor their selection exactly.
+      shown = new Set(
+        allFamilies.filter(family => visible.has(modelVisibilityKey(provider.slug, family.id))).map(family => family.id)
+      )
+    } else {
+      // Default: curated top-N families per provider.
+      shown = new Set(allFamilies.slice(0, DEFAULT_VISIBLE_PER_PROVIDER).map(family => family.id))
+    }
+
+    // Always include the active model — but keep every row in the provider's
+    // stable curated order (filter `allFamilies`, never reorder), so selecting
+    // a model can't shuffle the list.
+    const activeId =
+      provider.slug === current.provider && current.model
+        ? allFamilies.find(family => family.id === current.model || family.fastId === current.model)?.id
+        : undefined
+
+    let families = allFamilies.filter(family => shown.has(family.id) || family.id === activeId)
+
+    if (q) {
+      families = families.slice(0, PER_PROVIDER_SEARCH)
+    }
+
+    if (families.length > 0) {
+      groups.push({ families, provider })
+    }
+  }
+
+  // Stable, logical group order: alphabetical by provider name. (The backend
+  // floats the current provider first, which would reshuffle on every switch.)
+  groups.sort((a, b) => a.provider.name.localeCompare(b.provider.name))
+
+  return groups
+}

package/src/app/shell/sidebar-label.tsx

@@ -0,0 +1,22 @@
+import type * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+interface SidebarPanelLabelProps extends React.ComponentProps<'span'> {
+  dotClassName?: string
+}
+
+export function SidebarPanelLabel({ children, className, dotClassName, ...props }: SidebarPanelLabelProps) {
+  return (
+    <span
+      className={cn(
+        'flex min-w-0 items-center gap-2 pl-2 text-[0.64rem] font-semibold uppercase tracking-[0.16em] text-(--theme-primary)',
+        className
+      )}
+      {...props}
+    >
+      <span aria-hidden="true" className={cn('dither inline-block size-2 shrink-0 rounded-[1px]', dotClassName)} />
+      <span className="min-w-0 truncate leading-none">{children}</span>
+    </span>
+  )
+}