ethagent 3.3.3 → 4.0.0

package/src/models/ModelPicker.tsx

@@ -1,1009 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react'
-import { Box, Text } from 'ink'
-import { Select, type SelectOption } from '../ui/Select.js'
-import { Spinner } from '../ui/Spinner.js'
-import { TextInput } from '../ui/TextInput.js'
-import { Surface } from '../ui/Surface.js'
-import { ProgressBar } from '../ui/ProgressBar.js'
-import { theme } from '../ui/theme.js'
-import {
-  DEFAULT_LLAMA_HOST,
-  detectLlamaCpp,
-  killRogueLlamaProcesses,
-  stopLlamaCppServer,
-  type LlamaCppInstallResult,
-  type LlamaCppStartResult,
-} from './llamacpp.js'
-import { detectSpec, type SpecSnapshot } from './runtimeDetection.js'
-import {
-  estimateGgufMachineFit,
-  orderGgufFilesForSpec,
-  recommendGgufFile,
-  type GgufMachineFit,
-} from './modelRecommendation.js'
-import { hasKey, rmKey, setKey } from '../storage/secrets.js'
-import { OpenAIOAuthService } from '../auth/openaiOAuth/index.js'
-import { hasOpenAIOAuthCredentials, rmOpenAIOAuthCredentials } from '../auth/openaiOAuth/credentials.js'
-import { openExternalUrl } from '../utils/openExternal.js'
-import { defaultModelFor, type EthagentConfig, type ProviderId } from '../storage/config.js'
-import { clearModelCatalogCache, discoverProviderModels, isOpenAIOAuthAllowedModel, OPENAI_OAUTH_DEFAULT_MODEL, type ModelCatalogResult } from './catalog.js'
-import {
-  createHfDownloadPlan,
-  findLocalHfModel,
-  ggufFiles,
-  loadLocalHfModels,
-  localModelId,
-  type HfCredibility,
-  type HfRisk,
-  type HuggingFaceRepoInfo,
-  type HuggingFaceSibling,
-  type LocalHfModel,
-} from './huggingface.js'
-import {
-  buildLocalModelCatalogOptions,
-  buildModelPickerOptions,
-  catalogOptionValue,
-  cloudProviderDisplayName,
-  LOCAL_MODEL_LINK_EXAMPLE,
-  LOCAL_MODEL_LINK_HINT,
-  MODEL_PICKER_CLOUD_PROVIDERS,
-  orderModelsForContextFit,
-  type CloudCredentialKind,
-  type CloudProviderId,
-  type ModelPickerContextFit,
-  type ModelPickerOptionsData,
-} from './modelPickerOptions.js'
-import { formatLocalHfModelDisplayName, formatModelDisplayName } from './modelDisplay.js'
-import { fetchUncensoredGgufCatalog, type UncensoredCatalogEntry } from './uncensoredCatalog.js'
-import type {
-  LoadedModelPickerData as LoadedData,
-  LocalUninstallTarget,
-  ModelPickerProps,
-  ModelPickerSelection,
-  ModelPickerState as State,
-} from './modelPickerTypes.js'
-import {
-  ElapsedSpinner,
-  contextFitLabel,
-  contextFitSubtitle,
-  credibilityLabel,
-  fitColor,
-  fitLabel,
-  formatBytes,
-  formatSignals,
-  friendlyFileName,
-  friendlyReasons,
-  isCloudProvider,
-  modelMetadataSubtext,
-  providerKeyPlaceholder,
-  riskColor,
-  runnerPathPlaceholder,
-  safetyLabel,
-} from './modelPickerDisplay.js'
-import {
-  buildCatalogOptions,
-  buildHfFileOptions,
-  buildRunnerRecoveryOptions,
-  configForProvider,
-  localModelOptionIndex,
-  localOrCloudOptionIndex,
-  parseCloudValue,
-  parseFullCatalogValue,
-  parseKeyValue,
-  pickFallbackSelection,
-} from './modelPickerViewHelpers.js'
-import { openLocalCatalog, reviewCatalogModel } from './modelPickerCatalogFlow.js'
-import { loadHfPickerModels, probeLlamaCpp } from './modelPickerData.js'
-import {
-  chooseInstalledHfModelForRepo,
-  downloadMmprojAndContinue,
-  findInstalledHfModelForInput,
-  inspectHfInput,
-  reviewHfFile,
-  startHfDownload,
-} from './modelPickerHfFlow.js'
-import {
-  installRunnerAndStart,
-  localRunnerStartFailureSubtitle,
-  runRunnerSetup,
-  saveRunnerPathAndStart,
-  startAndPickHfModel,
-} from './modelPickerLocalRunnerFlow.js'
-import {
-  isCurrentLocalUninstallTarget,
-  localUninstallBoundaryCopy,
-  localUninstallTargets,
-  uninstallLocalModel,
-} from './modelPickerUninstallFlow.js'
-import {
-  deleteKey,
-  signOutOAuth,
-  startOpenAIOAuthFlow,
-  submitKey,
-} from './modelPickerCredentials.js'
-
-export type { ModelPickerSelection } from './modelPickerTypes.js'
-export { chooseInstalledHfModelForRepo } from './modelPickerHfFlow.js'
-
-export const ModelPicker: React.FC<ModelPickerProps> = ({
-  currentConfig,
-  currentProvider,
-  currentModel,
-  contextFit,
-  featuredHfRepo,
-  localOnly = false,
-  onPick,
-  onCancel,
-}) => {
-  const [state, setState] = useState<State>({ kind: 'loading' })
-  const hfAbortRef = useRef<AbortController | null>(null)
-  const oauthServiceRef = useRef<OpenAIOAuthService | null>(null)
-  const dismissToList = (data: LoadedData) => () => {
-    if (localOnly) {
-      onCancel()
-    } else {
-      setState({ kind: 'list', data })
-    }
-  }
-
-  useEffect(() => {
-    let cancelled = false
-    void (async () => {
-      const [llamaCpp, hfModels, machineSpec, keyEntries, openaiOauth] = await Promise.all([
-        probeLlamaCpp(),
-        loadHfPickerModels(),
-        detectSpec(),
-        Promise.all(MODEL_PICKER_CLOUD_PROVIDERS.map(async p => [p, await hasKey(p)] as const)),
-        hasOpenAIOAuthCredentials(),
-      ])
-      if (cancelled) return
-      const rawCloudKeys = Object.fromEntries(keyEntries) as Partial<Record<ProviderId, boolean>>
-      const cloudKeys: Partial<Record<ProviderId, boolean>> = {
-        ...rawCloudKeys,
-        openai: rawCloudKeys.openai === true || openaiOauth,
-      }
-      const cloudCredentialKinds: Partial<Record<ProviderId, CloudCredentialKind>> = {}
-      if (openaiOauth) cloudCredentialKinds.openai = 'oauth'
-      else if (rawCloudKeys.openai === true) cloudCredentialKinds.openai = 'apikey'
-      if (rawCloudKeys.anthropic === true) cloudCredentialKinds.anthropic = 'apikey'
-      if (rawCloudKeys.gemini === true) cloudCredentialKinds.gemini = 'apikey'
-      const catalogEntries = await Promise.all(
-        MODEL_PICKER_CLOUD_PROVIDERS
-          .filter(provider => cloudKeys[provider])
-          .map(async provider => [provider, await discoverProviderModels(configForProvider(currentConfig, provider))] as const),
-      )
-      if (cancelled) return
-      const cloudCatalogs = Object.fromEntries(catalogEntries) as Partial<Record<ProviderId, ModelCatalogResult>>
-      const data: LoadedData = {
-        llamaCpp,
-        hfModels,
-        machineSpec,
-        cloudKeys,
-        cloudCatalogs,
-        cloudCredentialKinds,
-      }
-      if (featuredHfRepo) {
-        const installedFeatured = await findInstalledHfModelForInput(featuredHfRepo)
-        if (cancelled) return
-        if (installedFeatured) {
-          setState({ kind: 'hfDone', data, model: installedFeatured, alreadyInstalled: true })
-          return
-        }
-      }
-      setState({ kind: 'list', data })
-      if (featuredHfRepo) {
-        await inspectHfInput({ kind: 'hfInput', data }, featuredHfRepo, setState)
-      }
-    })()
-    return () => { cancelled = true }
-  }, [currentConfig, featuredHfRepo])
-
-  useEffect(() => () => {
-    hfAbortRef.current?.abort()
-    oauthServiceRef.current?.cleanup()
-    oauthServiceRef.current = null
-  }, [])
-
-  if (state.kind === 'loading') {
-    return (
-      <Surface
-        title={localOnly ? 'Local Model' : (contextFit ? 'Switch to Larger-Context Model' : 'Switch Provider · Model')}
-        subtitle="Loading providers and models."
-        footer="esc back"
-      >
-        <Spinner label={localOnly ? 'loading local models...' : 'loading providers...'} />
-        <Box marginTop={1}>
-          <Select<'cancel'>
-            options={[{ value: 'cancel', label: 'Back', hint: 'Return to the previous screen', role: 'utility' }]}
-            hintLayout="inline"
-            onSubmit={() => onCancel()}
-            onCancel={() => onCancel()}
-          />
-        </Box>
-      </Surface>
-    )
-  }
-
-  if (state.kind === 'hfInput') {
-    return (
-      <Surface
-        title="Add Local Model"
-        subtitle={LOCAL_MODEL_LINK_EXAMPLE}
-        footer="enter check link · esc back"
-      >
-        <TextInput
-          label="Model Link"
-          placeholder={LOCAL_MODEL_LINK_HINT}
-          onSubmit={value => void inspectHfInput(state, value, setState)}
-          onCancel={dismissToList(state.data)}
-        />
-        {state.error ? <Text color={theme.accentError}>{state.error}</Text> : null}
-      </Surface>
-    )
-  }
-
-  if (state.kind === 'hfLoading') {
-    return (
-      <Surface title="Checking Model Link" subtitle={state.input}>
-        <Spinner label="reading model page..." />
-      </Surface>
-    )
-  }
-
-  if (state.kind === 'hfFilePick') {
-    const options = buildHfFileOptions(state.repo, state.files, state.data.machineSpec, state.data.hfModels.map(model => model.id))
-    const recommendedIndex = Math.max(0, options.findIndex(option => option.subtext?.includes('Recommended')))
-    return (
-      <Surface
-        title="Choose a Compatible File"
-        subtitle={`${state.repo.repoId} has ${state.files.length} compatible local model file${state.files.length === 1 ? '' : 's'}.`}
-        footer="enter select · esc back"
-      >
-        <Select
-          options={options}
-          initialIndex={recommendedIndex}
-          maxVisible={10}
-          onSubmit={filename => void reviewHfFile(state, filename, setState)}
-          onCancel={() => setState({ kind: 'hfInput', data: state.data })}
-        />
-      </Surface>
-    )
-  }
-
-  if (state.kind === 'hfReview') {
-    const { plan } = state
-    const canDownload = plan.review.risk !== 'high' && plan.review.runtime === 'llama.cpp runnable'
-    const fit = state.data.machineSpec ? estimateGgufMachineFit(plan.sizeBytes, state.data.machineSpec) : null
-    const recommended = state.data.machineSpec ? recommendGgufFile(plan.repo, ggufFiles(plan.repo), state.data.machineSpec) : null
-    const mmproj = plan.mmprojCandidate
-    return (
-      <Surface
-        title="Review Model Link"
-        subtitle="Only download models from creators you trust. Check the license and source before continuing."
-        footer="enter select · esc back"
-        tone={plan.review.risk === 'high' ? 'error' : plan.review.risk === 'medium' ? 'muted' : 'primary'}
-      >
-        <Box flexDirection="column" marginBottom={1}>
-          <Text color={theme.text}>{plan.displayName}</Text>
-          <Text color={theme.dim}>source: huggingface.co/{plan.repoId}</Text>
-          <Text color={theme.dim}>file: {friendlyFileName(plan.filename)}</Text>
-          <Text color={theme.dim}>license: {plan.repo.license ?? 'unknown'} · size: {formatBytes(plan.sizeBytes)}</Text>
-          {fit ? <Text color={fitColor(fit.fit)}>fit: {fitLabel(fit.fit, recommended?.file.filename === plan.filename)}</Text> : null}
-          <Text color={riskColor(plan.review.risk)}>safety: {safetyLabel(plan.review.risk)} · source: {credibilityLabel(plan.review.credibility)}</Text>
-          <Text color={theme.dim}>signals: {formatSignals(plan.repo.downloads, plan.repo.likes)}</Text>
-          <Text color={theme.dim}>notes: {friendlyReasons(plan.review.reasons).join('; ')}</Text>
-          {mmproj ? (
-            <Text color={theme.dim}>vision encoder available: {friendlyFileName(mmproj.filename)} (+{formatBytes(mmproj.sizeBytes)})</Text>
-          ) : null}
-        </Box>
-        <Select<'download' | 'downloadWithMmproj' | 'pick' | 'cancel'>
-          options={[
-            { value: 'download', role: 'section', label: 'Download' },
-            ...(mmproj ? [{ value: 'downloadWithMmproj' as const, label: `Download Model + Vision Encoder (+${formatBytes(mmproj.sizeBytes)}) · recommended`, disabled: !canDownload }] : []),
-            { value: 'download', label: mmproj ? 'Download Without Vision Encoder' : 'Download This Model', disabled: !canDownload },
-            { value: 'pick', role: 'section', label: 'Navigation' },
-            { value: 'pick', label: 'Pick Another File' },
-            { value: 'cancel', label: 'Cancel', role: 'utility' },
-          ]}
-          onSubmit={choice => {
-            if (choice === 'download') void startHfDownload(state, setState, hfAbortRef, onPick)
-            else if (choice === 'downloadWithMmproj') {
-              void startHfDownload({ ...state, plan: { ...plan, includeMmproj: true } }, setState, hfAbortRef, onPick)
-            }
-            else if (choice === 'pick') void inspectHfInput({ kind: 'hfInput', data: state.data }, plan.repoId, setState)
-            else dismissToList(state.data)()
-          }}
-          onCancel={dismissToList(state.data)}
-        />
-      </Surface>
-    )
-  }
-
-  if (state.kind === 'hfDownloading') {
-    const total = state.progress.total ?? state.plan.sizeBytes
-    const completed = state.progress.completed ?? 0
-    const progress = total > 0 ? completed / total : 0
-    const suffix = total > 0 ? `${formatBytes(completed)} / ${formatBytes(total)}` : formatBytes(completed)
-    return (
-      <Surface title="Downloading Model" subtitle={state.plan.displayName}>
-        <Text color={theme.dim}>{state.progress.status}</Text>
-        <ProgressBar progress={progress} suffix={suffix} />
-      </Surface>
-    )
-  }
-
-  if (state.kind === 'mmprojOffer') {
-    const sizeLabel = state.model.mmprojSizeBytes ? `+${formatBytes(state.model.mmprojSizeBytes)}` : 'additional download'
-    return (
-      <Surface
-        title="Add Image Support?"
-        subtitle={`${state.model.displayName} has a vision encoder available in its Hugging Face repo.`}
-        footer="enter select · esc back"
-      >
-        <Box flexDirection="column" marginBottom={1}>
-          <Text color={theme.dim}>Loading the vision encoder lets this model accept pasted images.</Text>
-          <Text color={theme.dim}>Without it, image paste is declined at submit time.</Text>
-        </Box>
-        <Select<'add' | 'skip' | 'cancel'>
-          options={[
-            { value: 'add', label: `Add Vision Encoder (${sizeLabel}) And Use` },
-            { value: 'skip', label: 'Use Without Image Support' },
-            { value: 'cancel', label: 'Cancel' },
-          ]}
-          onSubmit={choice => {
-            if (choice === 'add') void downloadMmprojAndContinue(state, setState, onPick)
-            else if (choice === 'skip') void startAndPickHfModel({ ...state.model, mmprojAvailable: false }, state, setState, onPick)
-            else dismissToList(state.data)()
-          }}
-          onCancel={dismissToList(state.data)}
-        />
-      </Surface>
-    )
-  }
-
-  if (state.kind === 'mmprojDownloading') {
-    const total = state.progress.total ?? state.model.mmprojSizeBytes ?? 0
-    const completed = state.progress.completed ?? 0
-    const progress = total > 0 ? completed / total : 0
-    const suffix = total > 0 ? `${formatBytes(completed)} / ${formatBytes(total)}` : formatBytes(completed)
-    return (
-      <Surface title="Downloading Vision Encoder" subtitle={state.model.displayName}>
-        <Text color={theme.dim}>{state.progress.status}</Text>
-        <ProgressBar progress={progress} suffix={suffix} />
-      </Surface>
-    )
-  }
-
-  if (state.kind === 'mmprojError') {
-    return (
-      <Surface title="Vision Encoder Download Failed" subtitle={state.message} tone="error" footer="enter select · esc back">
-        <Select<'retry' | 'skip' | 'back'>
-          options={[
-            { value: 'retry', label: 'Retry Download' },
-            { value: 'skip', label: 'Use Without Image Support' },
-            { value: 'back', label: 'Back To Picker' },
-          ]}
-          onSubmit={choice => {
-            if (choice === 'retry') setState({ kind: 'mmprojOffer', data: state.data, model: state.model })
-            else if (choice === 'skip') void startAndPickHfModel({ ...state.model, mmprojAvailable: false }, state, setState, onPick)
-            else dismissToList(state.data)()
-          }}
-          onCancel={dismissToList(state.data)}
-        />
-      </Surface>
-    )
-  }
-
-  if (state.kind === 'hfDone') {
-    return (
-      <Surface
-        title={state.alreadyInstalled ? 'Model Already Downloaded' : 'Model Ready'}
-        subtitle={state.model.displayName}
-        footer="enter select · esc back"
-      >
-        <Select<'use' | 'back'>
-          options={[
-            { value: 'use', label: 'Use This Model Now' },
-            { value: 'back', label: 'Back To Picker' },
-          ]}
-          onSubmit={choice => {
-            if (choice === 'use') void startAndPickHfModel(state.model, state, setState, onPick)
-            else dismissToList(state.data)()
-          }}
-          onCancel={dismissToList(state.data)}
-        />
-      </Surface>
-    )
-  }
-
-  if (state.kind === 'hfError') {
-    return (
-      <Surface title="Model Link Failed" subtitle={state.message} tone="error" footer="enter select · esc back">
-        <Select<'retry' | 'back'>
-          options={[
-            { value: 'retry', label: state.input ? 'Retry Link' : 'Download Another Model' },
-            { value: 'back', label: 'Back To Picker' },
-          ]}
-          onSubmit={choice => {
-            if (choice === 'retry') setState({ kind: 'hfInput', data: state.data, error: state.input ? undefined : state.message })
-            else dismissToList(state.data)()
-          }}
-          onCancel={dismissToList(state.data)}
-        />
-      </Surface>
-    )
-  }
-
-  if (state.kind === 'localUninstallPick') {
-    const targets = localUninstallTargets(state.data)
-    const options = targets.map(target => ({
-      value: `${target.kind}:${target.id}`,
-      label: target.displayName,
-      subtext: [
-        'downloaded GGUF file',
-        formatBytes(target.sizeBytes),
-        isCurrentLocalUninstallTarget(target, currentProvider, currentModel) ? 'currently selected' : '',
-      ].filter(Boolean).join(' · '),
-      role: 'option' as const,
-    }))
-    return (
-      <Surface title="Uninstall Downloaded GGUF" subtitle="Choose a downloaded model file to remove." footer="enter select · esc back">
-        {options.length === 0 ? (
-          <Text color={theme.dim}>No local models found.</Text>
-        ) : (
-          <Select
-            options={options}
-            maxVisible={10}
-            onSubmit={value => {
-              const target = targets.find(item => `${item.kind}:${item.id}` === value)
-              if (target) setState({ kind: 'localUninstallConfirm', data: state.data, target })
-            }}
-            onCancel={dismissToList(state.data)}
-          />
-        )}
-      </Surface>
-    )
-  }
-
-  if (state.kind === 'localUninstallConfirm') {
-    const modelName = state.target.displayName
-    return (
-      <Surface title="Confirm Uninstall" subtitle={modelName} footer="enter select · esc back">
-        <Box flexDirection="column" marginBottom={1}>
-          <Text color={theme.dim}>{localUninstallBoundaryCopy(state.target)}</Text>
-          <Text color={theme.dim}>Runner binaries are left unchanged.</Text>
-        </Box>
-        <Select<'confirm' | 'back'>
-          options={[
-            { value: 'confirm', label: 'Uninstall Local Model' },
-            { value: 'back', label: 'Back' },
-          ]}
-          onSubmit={choice => {
-            if (choice === 'confirm') void uninstallLocalModel(state, setState)
-            else setState({ kind: 'localUninstallPick', data: state.data })
-          }}
-          onCancel={() => setState({ kind: 'localUninstallPick', data: state.data })}
-        />
-      </Surface>
-    )
-  }
-
-  if (state.kind === 'localUninstalling') {
-    return (
-      <Surface
-        title="Uninstalling Local Model"
-        subtitle={state.target.displayName}
-      >
-        <Spinner label="removing local model..." />
-      </Surface>
-    )
-  }
-
-  if (state.kind === 'localUninstallDone') {
-    return (
-      <Surface title="Local Model Uninstalled" subtitle={state.modelName} footer="enter back to picker · esc close">
-        <Select<'back'>
-          options={[{ value: 'back', label: 'Back To Picker' }]}
-          onSubmit={dismissToList(state.data)}
-          onCancel={dismissToList(state.data)}
-        />
-      </Surface>
-    )
-  }
-
-  if (state.kind === 'localUninstallError') {
-    return (
-      <Surface title="Could Not Uninstall Local Model" subtitle={state.message} tone="error" footer="enter select · esc back">
-        <Select<'retry' | 'back'>
-          options={[
-            { value: 'retry', label: 'Try Again' },
-            { value: 'back', label: 'Back To Picker' },
-          ]}
-          onSubmit={choice => {
-            if (choice === 'retry') void uninstallLocalModel({ kind: 'localUninstallConfirm', data: state.data, target: state.target }, setState)
-            else dismissToList(state.data)()
-          }}
-          onCancel={dismissToList(state.data)}
-        />
-      </Surface>
-    )
-  }
-
-  if (state.kind === 'localRunnerSetup') {
-    return (
-      <Surface
-        title="Install Local Runner"
-        subtitle="This model is downloaded. Install the local runner once to start it here."
-        footer="enter select · esc back"
-      >
-        <Box flexDirection="column" marginBottom={1}>
-          <Text color={theme.dim}>Ethagent tried to start {friendlyFileName(state.model.filename)} automatically.</Text>
-          <Text color={theme.dim}>After this one-time install, downloaded local models start automatically.</Text>
-          <Text color={theme.dim}>Advanced: paste an existing llama-server path or run a compatible server at {DEFAULT_LLAMA_HOST}.</Text>
-        </Box>
-        <Select<'install' | 'path' | 'back' | 'download'>
-          options={[
-            { value: 'install', label: 'Install Local Runner' },
-            { value: 'path', label: 'Use Existing Runner Path' },
-            { value: 'back', label: 'Back To Picker' },
-            { value: 'download', label: 'Add Another Local Model' },
-          ]}
-          onSubmit={choice => {
-            if (choice === 'download') setState({ kind: 'hfInput', data: state.data })
-            else if (choice === 'install') void installRunnerAndStart(state, setState, onPick)
-            else if (choice === 'path') setState({ kind: 'localRunnerPathEntry', data: state.data, model: state.model, submitting: false })
-            else dismissToList(state.data)()
-          }}
-          onCancel={dismissToList(state.data)}
-        />
-      </Surface>
-    )
-  }
-
-  if (state.kind === 'localRunnerInstalling') {
-    return (
-      <Surface title="Installing Local Runner" subtitle="This may take a few minutes.">
-        <ElapsedSpinner startedAt={state.startedAt} label={state.progress.label} />
-        <ProgressBar progress={state.progress.progress} />
-      </Surface>
-    )
-  }
-
-  if (state.kind === 'localRunnerInstallFail') {
-    const options = buildRunnerRecoveryOptions(state.result)
-    return (
-      <Surface title="Runner Setup Needs Attention" subtitle={state.result.message} tone="error" footer="enter select · esc back">
-        <Select<'stop-and-retry' | 'path' | 'back'>
-          options={options}
-          hintLayout="inline"
-          onSubmit={choice => {
-            if (choice === 'stop-and-retry') {
-              void (async () => {
-                await killRogueLlamaProcesses()
-                await installRunnerAndStart({ kind: 'localRunnerSetup', data: state.data, model: state.model }, setState, onPick)
-              })()
-            }
-            else if (choice === 'path') setState({ kind: 'localRunnerPathEntry', data: state.data, model: state.model, submitting: false })
-            else dismissToList(state.data)()
-          }}
-          onCancel={dismissToList(state.data)}
-        />
-      </Surface>
-    )
-  }
-
-  if (state.kind === 'localRunnerPathEntry') {
-    return (
-      <Surface
-        title="Runner Path"
-        subtitle="Paste the full path to llama-server."
-        footer="enter save · esc back"
-      >
-        {state.submitting ? (
-          <Spinner label="checking runner path..." />
-        ) : (
-          <TextInput
-            label="llama-server"
-            placeholder={runnerPathPlaceholder()}
-            onSubmit={value => void saveRunnerPathAndStart(state, value, setState, onPick)}
-            onCancel={() => setState({ kind: 'localRunnerSetup', data: state.data, model: state.model })}
-          />
-        )}
-        {state.error ? <Text color={theme.accentError}>{state.error}</Text> : null}
-      </Surface>
-    )
-  }
-
-  if (state.kind === 'localRunnerStarting') {
-    return (
-      <Surface title="Starting Local Model" subtitle={state.model.displayName}>
-        <ElapsedSpinner startedAt={state.startedAt} label="starting local runner..." />
-      </Surface>
-    )
-  }
-
-  if (state.kind === 'localRunnerStartFail') {
-    return (
-      <Surface title="Local Model Failed to Start" subtitle={localRunnerStartFailureSubtitle(state.result)} tone="error" footer="enter select · esc back">
-        <Select<'retry' | 'path' | 'install' | 'back'>
-          options={[
-            { value: 'retry', label: 'Try Again' },
-            { value: 'path', label: 'Use Existing Runner Path' },
-            { value: 'install', label: 'Install Local Runner' },
-            { value: 'back', label: 'Back To Picker' },
-          ]}
-          onSubmit={choice => {
-            if (choice === 'retry') void startAndPickHfModel(state.model, { kind: 'hfDone', data: state.data, model: state.model }, setState, onPick)
-            else if (choice === 'path') setState({ kind: 'localRunnerPathEntry', data: state.data, model: state.model, submitting: false })
-            else if (choice === 'install') void installRunnerAndStart({ kind: 'localRunnerSetup', data: state.data, model: state.model }, setState, onPick)
-            else dismissToList(state.data)()
-          }}
-          onCancel={dismissToList(state.data)}
-        />
-      </Surface>
-    )
-  }
-
-  if (state.kind === 'keyEntry') {
-    const { provider, action, submitting, error } = state
-    const providerName = cloudProviderDisplayName(provider)
-    const actionLabel = action === 'set' ? 'Add' : 'Replace'
-    return (
-      <Surface
-        title={`${actionLabel} ${providerName} API Key`}
-        subtitle="Stored in your OS keyring when available; never written to config in plaintext."
-        footer="enter save · esc back"
-      >
-        {submitting ? (
-          <Spinner label={`saving ${providerName} key...`} />
-        ) : (
-          <TextInput
-            label={`${providerName} key`}
-            placeholder={providerKeyPlaceholder(provider)}
-            isSecret
-            onSubmit={(value) => void submitKey(state, value, currentConfig, setState)}
-            onCancel={dismissToList(state.data)}
-          />
-        )}
-        {error ? <Text color={theme.accentError}>{error}</Text> : null}
-      </Surface>
-    )
-  }
-
-  if (state.kind === 'keyManage') {
-    const { provider, submitting, error } = state
-    const providerName = cloudProviderDisplayName(provider)
-    return (
-      <Surface
-        title={`${providerName} API Key`}
-        subtitle="Manage the stored key for this provider."
-        footer="enter select · esc back"
-      >
-        {submitting ? (
-          <Spinner label={`removing ${providerName} key...`} />
-        ) : (
-          <Select
-            options={[
-              { value: 'edit', role: 'section', label: 'Credential' },
-              { value: 'edit', label: 'Replace Stored API Key' },
-              { value: 'delete', label: 'Remove Stored API Key' },
-              { value: 'cancel', role: 'section', label: 'Navigation' },
-              { value: 'cancel', label: 'Back', role: 'utility' },
-            ]}
-            onSubmit={(value) => {
-              if (value === 'edit') {
-                setState({ kind: 'keyEntry', provider, action: 'edit', data: state.data, submitting: false })
-                return
-              }
-              if (value === 'cancel') {
-                setState({ kind: 'list', data: state.data })
-                return
-              }
-              void deleteKey(state, currentConfig, setState, onPick, currentProvider)
-            }}
-            onCancel={dismissToList(state.data)}
-          />
-        )}
-        {error ? <Text color={theme.accentError}>{error}</Text> : null}
-      </Surface>
-    )
-  }
-
-  if (state.kind === 'oauthManage') {
-    const { submitting, error } = state
-    return (
-      <Surface
-        title="ChatGPT Sign-in"
-        subtitle="Manage your ChatGPT sign-in."
-        footer="enter select · esc back"
-      >
-        {submitting ? (
-          <Spinner label="signing out..." />
-        ) : (
-          <Select
-            options={[
-              { value: 'hdr:account', label: 'Account', disabled: true, role: 'section', bold: true },
-              { value: 'signin', label: 'Sign in Again', indent: 2 },
-              { value: 'signout', label: 'Sign Out', indent: 2 },
-              { value: 'hdr:nav', label: 'Navigation', disabled: true, role: 'section', bold: true },
-              { value: 'cancel', label: 'Back', indent: 2 },
-            ]}
-            onSubmit={(value) => {
-              if (value === 'signin') {
-                void startOpenAIOAuthFlow(state.data, currentConfig, setState, oauthServiceRef, onPick)
-                return
-              }
-              if (value === 'cancel') {
-                setState({ kind: 'list', data: state.data })
-                return
-              }
-              void signOutOAuth(state, currentConfig, setState, onPick, currentProvider)
-            }}
-            onCancel={dismissToList(state.data)}
-          />
-        )}
-        {error ? <Text color={theme.accentError}>{error}</Text> : null}
-      </Surface>
-    )
-  }
-
-  if (state.kind === 'oauthLogin') {
-    if (state.phase === 'error') {
-      return (
-        <Surface
-          title="OpenAI Sign-in Failed"
-          subtitle={state.message ?? 'Sign-in did not complete.'}
-          tone="error"
-          footer="enter select · esc back"
-        >
-          <Select<'retry' | 'apikey' | 'back'>
-            options={[
-              { value: 'retry', label: 'Try Again' },
-              { value: 'apikey', label: 'Add API Key Instead' },
-              { value: 'back', label: 'Back To Picker' },
-            ]}
-            onSubmit={choice => {
-              if (choice === 'retry') void startOpenAIOAuthFlow(state.data, currentConfig, setState, oauthServiceRef, onPick)
-              else if (choice === 'apikey') setState({ kind: 'keyEntry', provider: 'openai', action: 'set', data: state.data, submitting: false })
-              else dismissToList(state.data)()
-            }}
-            onCancel={dismissToList(state.data)}
-          />
-        </Surface>
-      )
-    }
-    if (state.phase === 'exchanging') {
-      return (
-        <Surface title="Finishing OpenAI Sign-in" subtitle="Exchanging credentials with auth.openai.com.">
-          <Spinner label="completing sign-in..." />
-        </Surface>
-      )
-    }
-    return (
-      <Surface
-        title="Sign in with ChatGPT"
-        subtitle="Opened your browser to auth.openai.com. Approve to continue."
-        footer="esc cancel"
-      >
-        <Spinner label="waiting for browser sign-in..." />
-        {state.url ? (
-          <Box flexDirection="column" marginTop={1}>
-            <Text color={theme.dim}>If the browser did not open, visit:</Text>
-            <Text color={theme.dim}>{state.url}</Text>
-          </Box>
-        ) : null}
-        <Box marginTop={1}>
-          <Select<'cancel'>
-            options={[{ value: 'cancel', label: 'Cancel Sign-in' }]}
-            onSubmit={() => {
-              oauthServiceRef.current?.cleanup()
-              oauthServiceRef.current = null
-              setState({ kind: 'list', data: state.data })
-            }}
-            onCancel={() => {
-              oauthServiceRef.current?.cleanup()
-              oauthServiceRef.current = null
-              setState({ kind: 'list', data: state.data })
-            }}
-          />
-        </Box>
-      </Surface>
-    )
-  }
-
-  if (state.kind === 'catalog') {
-    const catalog = state.data.cloudCatalogs[state.provider]
-    const options = buildCatalogOptions(state.provider, catalog, currentProvider, currentModel, contextFit)
-    const initialIndex = options.findIndex(opt => {
-      if (opt.disabled) return false
-      const parsed = parseFullCatalogValue(opt.value)
-      return parsed?.provider === currentProvider && parsed.model === currentModel
-    })
-    return (
-      <Surface
-        title={`${cloudProviderDisplayName(state.provider)} Full Catalog`}
-        subtitle={contextFit ? contextFitSubtitle(contextFit) : 'All discovered models for this provider'}
-        footer="enter select · esc back"
-      >
-        <Select
-          options={options}
-          initialIndex={initialIndex === -1 ? 0 : initialIndex}
-          maxVisible={12}
-          hintLayout="inline"
-          onSubmit={(value) => {
-            const parsed = parseFullCatalogValue(value)
-            if (parsed) onPick({ kind: 'cloud', provider: parsed.provider, model: parsed.model, keyJustSet: false })
-          }}
-          onCancel={dismissToList(state.data)}
-        />
-      </Surface>
-    )
-  }
-
-  if (state.kind === 'localCatalogLoading') {
-    return (
-      <Surface title="View Full Catalog" subtitle="Loading curated local GGUF files.">
-        <Spinner label="reading hugging face files..." />
-      </Surface>
-    )
-  }
-
-  if (state.kind === 'localCatalogError') {
-    return (
-      <Surface title="Catalog Failed" subtitle={state.message} tone="error" footer="enter select · esc back">
-        <Select<'retry' | 'paste' | 'back'>
-          options={[
-            { value: 'retry', label: 'Retry Catalog' },
-            { value: 'paste', label: 'Paste GGUF Link' },
-            { value: 'back', label: 'Back To Picker' },
-          ]}
-          onSubmit={choice => {
-            if (choice === 'retry') void openLocalCatalog(state.data, setState)
-            else if (choice === 'paste') setState({ kind: 'hfInput', data: state.data })
-            else dismissToList(state.data)()
-          }}
-          onCancel={dismissToList(state.data)}
-        />
-      </Surface>
-    )
-  }
-
-  if (state.kind === 'localCatalog') {
-    const options = buildLocalModelCatalogOptions(state.data, { currentProvider, currentModel, contextFit }, state.catalog)
-    const initialIndex = localModelOptionIndex(options, currentProvider, currentModel)
-    return (
-      <Surface
-        title="View Full Catalog"
-        subtitle="Curated local GGUF files with recommendation and install status."
-        footer="enter select · esc back"
-      >
-        <Select
-          options={options}
-          initialIndex={initialIndex === -1 ? 0 : initialIndex}
-          maxVisible={12}
-          hintLayout="inline"
-          onSubmit={(value) => handleSubmit(value, state, setState, onPick, onCancel, currentConfig, oauthServiceRef, localOnly)}
-          onCancel={dismissToList(state.data)}
-        />
-      </Surface>
-    )
-  }
-
-  const { data } = state
-  const options = buildModelPickerOptions(data, { currentProvider, currentModel, contextFit }, { localOnly })
-  const initialIndex = localOrCloudOptionIndex(options, currentProvider, currentModel)
-
-  return (
-    <Surface
-      title={localOnly ? 'Local Model' : (contextFit ? 'Switch to Larger-Context Model' : 'Switch Provider · Model')}
-      subtitle={localOnly ? 'Downloaded GGUF files and curated catalog' : (contextFit ? contextFitSubtitle(contextFit) : 'Downloaded GGUF files · cloud providers')}
-      footer={localOnly ? 'enter select · esc back' : 'enter select · esc close · /models lists installed models'}
-    >
-      <Select
-        options={options}
-        initialIndex={initialIndex === -1 ? 0 : initialIndex}
-        maxVisible={10}
-        hintLayout="inline"
-        onSubmit={(value) => handleSubmit(value, state, setState, onPick, onCancel, currentConfig, oauthServiceRef, localOnly)}
-        onCancel={onCancel}
-      />
-    </Surface>
-  )
-}
-
-function handleSubmit(
-  value: string,
-  state: Extract<State, { kind: 'list' | 'localCatalog' }>,
-  setState: (s: State) => void,
-  onPick: (sel: ModelPickerSelection) => void,
-  onCancel: () => void,
-  currentConfig: EthagentConfig,
-  oauthServiceRef: React.MutableRefObject<OpenAIOAuthService | null>,
-  localOnly: boolean = false,
-): void {
-  if (value.startsWith('hdr:')) return
-  if (value === 'cancel') {
-    onCancel()
-    return
-  }
-  if (value === 'back' && state.kind === 'localCatalog') {
-    if (localOnly) onCancel()
-    else setState({ kind: 'list', data: state.data })
-    return
-  }
-  if (value.startsWith('hf:')) {
-    const id = value.slice(3)
-    if (id === 'download') {
-      setState({ kind: 'hfInput', data: state.data })
-      return
-    }
-    const model = state.data.hfModels.find(item => item.id === id)
-    if (!model) return
-    void (async () => {
-      const local = await findLocalHfModel(id)
-      if (!local) {
-        setState({ kind: 'hfError', data: state.data, message: 'local model metadata was not found' })
-        return
-      }
-      await startAndPickHfModel(local, state, setState, onPick)
-    })()
-    return
-  }
-  if (value.startsWith('hfmmproj:') && state.kind === 'list') {
-    const id = value.slice('hfmmproj:'.length)
-    void (async () => {
-      const local = await findLocalHfModel(id)
-      if (!local) {
-        setState({ kind: 'hfError', data: state.data, message: 'local model metadata was not found' })
-        return
-      }
-      setState({ kind: 'mmprojOffer', data: state.data, model: local })
-    })()
-    return
-  }
-  if (value.startsWith('uc:') && state.kind === 'localCatalog') {
-    const entry = state.catalog.find(item => catalogOptionValue(item.repo.repoId, item.file.filename) === value)
-    if (entry) void reviewCatalogModel(state, entry, setState)
-    return
-  }
-  if (value === 'local:uninstall') {
-    setState({ kind: 'localUninstallPick', data: state.data })
-    return
-  }
-  if (value === 'local:catalog') {
-    void openLocalCatalog(state.data, setState)
-    return
-  }
-  if (value.startsWith('key:')) {
-    const parsed = parseKeyValue(value)
-    if (!parsed) return
-    if (parsed.action === 'manage') {
-      if (parsed.provider === 'openai' && state.data.cloudCredentialKinds?.openai === 'oauth') {
-        setState({ kind: 'oauthManage', data: state.data, submitting: false })
-        return
-      }
-      setState({ kind: 'keyManage', provider: parsed.provider, data: state.data, submitting: false })
-      return
-    }
-    setState({ kind: 'keyEntry', provider: parsed.provider, action: parsed.action, data: state.data, submitting: false })
-    return
-  }
-  if (value === 'oauth:openai') {
-    void startOpenAIOAuthFlow(state.data, currentConfig, setState, oauthServiceRef, onPick)
-    return
-  }
-  if (value.startsWith('catalog:')) {
-    const provider = value.slice('catalog:'.length)
-    if (isCloudProvider(provider)) setState({ kind: 'catalog', provider, data: state.data })
-    return
-  }
-  if (value.startsWith('c:')) {
-    const parsed = parseCloudValue(value)
-    if (parsed) {
-      onPick({ kind: 'cloud', provider: parsed.provider, model: parsed.model, keyJustSet: false })
-      return
-    }
-  }
-}
-
-export { buildHfFileOptions } from './modelPickerViewHelpers.js'