@xp266/dshtui 0.1.0

package/src/ui/dialog/list-dialog.tsx

@@ -0,0 +1,63 @@
+import type { Ref } from 'react'
+import { errorLine, loadingLine } from './status-lines.ts'
+import { useAsyncList } from '../hooks/use-async-list.ts'
+import { Dialog } from './dialog.tsx'
+import type { DialogFooterLine, DialogHandle, DialogItem, DialogRow } from './dialog.tsx'
+
+export interface ListDialogProps<T> {
+  ref?: Ref<DialogHandle>
+  title: string
+  width: number
+  maxHeight: number
+  load: () => Promise<T[]>
+  search?: boolean
+  searchRight?: boolean
+  labelOf(item: T): string
+  rightOf?(item: T): string | undefined
+  onSelect(item: T): void
+  onClose(): void
+  footerLines?: DialogFooterLine[]
+  errors?: DialogFooterLine[]
+}
+
+export function ListDialog<T>({
+  ref,
+  title,
+  width,
+  maxHeight,
+  load,
+  search = false,
+  searchRight = false,
+  labelOf,
+  rightOf,
+  onSelect,
+  onClose,
+  footerLines,
+  errors,
+}: ListDialogProps<T>) {
+  const { items, loading, error } = useAsyncList(load)
+  const itemRows: DialogRow[] = items.map(item => {
+    const button: DialogItem = { type: 'button', label: labelOf(item), right: rightOf?.(item), onPress: () => onSelect(item) }
+    return { items: [button] }
+  })
+  const footer: DialogFooterLine[] = loading ? [loadingLine()] : footerLines ?? []
+  const errorLines: DialogFooterLine[] = [
+    ...(error !== null ? [errorLine(error)] : []),
+    ...(errors ?? []),
+  ]
+  return (
+    <Dialog
+      ref={ref}
+      width={width}
+      maxHeight={maxHeight}
+      title={title}
+      rows={itemRows}
+      footer={footer}
+      errors={errorLines}
+      onClose={onClose}
+      search={search}
+      searchRight={searchRight}
+      centerScroll
+    />
+  )
+}

package/src/ui/dialog/models-dialog.tsx

@@ -0,0 +1,203 @@
+import { useLayoutEffect, useRef, useState } from 'react'
+import type { Ref } from 'react'
+import type { LlmDiscoveredModel } from '@deepseek-ai/dsh-llm'
+import type { ConfiguredModel, CustomProviderForm, DescribedModel, ModelEntryConfig, OfficialProvider } from '../../chat/models.ts'
+import { PI_AI_SETTINGS_NS } from '../../chat/models.ts'
+import { COLORS } from '../../theme.ts'
+import { glyphs } from '../../terminal/glyphs.ts'
+import { errorLine, loadingLine } from './status-lines.ts'
+import { useAsyncAction } from '../hooks/use-async-action.ts'
+import { useAsyncList } from '../hooks/use-async-list.ts'
+import { Dialog } from './dialog.tsx'
+import type { DialogFooterLine, DialogHandle, DialogItem, DialogRow } from './dialog.tsx'
+import { DIALOG_MAX_HEIGHT, DIALOG_WIDTH_MEDIUM } from './sizes.ts'
+
+export interface ModelApi {
+  listModels(): Promise<ConfiguredModel[]>
+  selectModel(provider: string, model: string): Promise<void>
+  fetchCustomModels(form: CustomProviderForm): Promise<LlmDiscoveredModel[]>
+  saveCustomProvider(form: CustomProviderForm, models: LlmDiscoveredModel[]): Promise<void>
+  listProviderDirectory(): Promise<OfficialProvider[]>
+  fetchProviderModels(provider: OfficialProvider, apiKey: string): Promise<LlmDiscoveredModel[] | undefined>
+  saveProviderKey(provider: OfficialProvider, apiKey: string): Promise<void>
+  saveProviderModels(provider: OfficialProvider, models: LlmDiscoveredModel[]): Promise<void>
+  deleteProvider(provider: OfficialProvider): Promise<void>
+  readModelEntries(ns: string, provider: string): ModelEntryConfig[]
+  describeModel(provider: string, model: string): Promise<DescribedModel>
+  saveModelEntry(ns: string, provider: string, entry: ModelEntryConfig): Promise<void>
+  deleteModelEntry(ns: string, provider: string, modelId: string): Promise<void>
+}
+
+export interface ModelsDialogProps {
+  api: ModelApi
+  onClose: () => void
+  onModelSelected: (provider: string, model: string) => void
+  onAddProvider: () => void
+  ref?: Ref<DialogHandle>
+}
+
+type Window =
+  | { kind: 'list' }
+  | { kind: 'configure-model' }
+
+
+export function ModelsDialog({ api, onClose, onModelSelected, onAddProvider, ref }: ModelsDialogProps) {
+  const [window, setWindow] = useState<Window>({ kind: 'list' })
+  const { error, clearError, run } = useAsyncAction()
+  const { items: models, loading, error: loadError, reload } = useAsyncList(api.listModels)
+  const modelItemRefs = useRef(new Map<DialogItem, ConfiguredModel>())
+  const modelItemMap = new Map<DialogItem, ConfiguredModel>()
+  useLayoutEffect(() => {
+    modelItemRefs.current = modelItemMap
+  })
+  const [configTarget, setConfigTarget] = useState<ConfiguredModel | null>(null)
+  const [configDraft, setConfigDraft] = useState<{ name: string; contextWindow: string; image: string }>({
+    name: '',
+    contextWindow: '',
+    image: '',
+  })
+  const configureRequestRef = useRef(0)
+  const selectModel = async (model: ConfiguredModel) => {
+    await run(async () => {
+      await api.selectModel(model.provider, model.id)
+      onModelSelected(model.provider, model.id)
+      onClose()
+    })
+  }
+  const openConfigure = (model: ConfiguredModel) => {
+    const settings = api.readModelEntries(PI_AI_SETTINGS_NS, model.provider).find(entry => entry.id === model.id)
+    setConfigTarget(model)
+    setConfigDraft({
+      name: settings?.name ?? '',
+      contextWindow: settings?.contextWindow === undefined ? '' : String(settings.contextWindow),
+      image: settings?.input === undefined ? '' : String(settings.input.includes('image')),
+    })
+    clearError()
+    setWindow({ kind: 'configure-model' })
+    const request = ++configureRequestRef.current
+    void api.describeModel(model.provider, model.id).then(info => {
+      if (configureRequestRef.current !== request) return
+      setConfigDraft(current => ({
+        name: current.name === '' ? info.name : current.name,
+        contextWindow: current.contextWindow === '' && info.contextWindow !== undefined ? String(info.contextWindow) : current.contextWindow,
+        image: current.image === '' ? String(info.image) : current.image,
+      }))
+    }).catch(() => {})
+  }
+  const submitConfigure = async () => {
+    if (configTarget === null) return
+    await run(async () => {
+      const name = configDraft.name.trim()
+      const contextWindow = configDraft.contextWindow.trim() === '' ? undefined : Number(configDraft.contextWindow)
+      if (contextWindow !== undefined && (!Number.isInteger(contextWindow) || contextWindow <= 0)) {
+        throw new Error('Context window must be a positive integer')
+      }
+      const image = configDraft.image.trim().toLowerCase()
+      let input: string[] | undefined
+      if (image !== '') {
+        if (image !== 'true' && image !== 'false') throw new Error('imageModality must be true or false')
+        input = image === 'true' ? ['text', 'image'] : ['text']
+      }
+      const existing = api.readModelEntries(PI_AI_SETTINGS_NS, configTarget.provider).find(entry => entry.id === configTarget.id)
+      const entry: ModelEntryConfig = { ...existing, id: configTarget.id }
+      if (name === '') delete entry.name
+      else entry.name = name
+      if (contextWindow === undefined) delete entry.contextWindow
+      else entry.contextWindow = contextWindow
+      if (input === undefined) delete entry.input
+      else entry.input = input
+      await api.saveModelEntry(PI_AI_SETTINGS_NS, configTarget.provider, entry)
+      setConfigTarget(null)
+      clearError()
+      setWindow({ kind: 'list' })
+      reload()
+    })
+  }
+  const handleCtrlE = (model: ConfiguredModel): boolean => {
+    openConfigure(model)
+    return true
+  }
+  const configureRows: DialogRow[] = configTarget === null ? [] : [
+    {
+      items: [
+        { type: 'input', label: 'name', value: configDraft.name, onChange: value => setConfigDraft(current => ({ ...current, name: value })) },
+      ],
+    },
+    {
+      items: [
+        { type: 'input', label: 'contextWindow', value: configDraft.contextWindow, onChange: value => setConfigDraft(current => ({ ...current, contextWindow: value })) },
+      ],
+    },
+    {
+      items: [
+        { type: 'input', label: 'imageModality', value: configDraft.image, onChange: value => setConfigDraft(current => ({ ...current, image: value })) },
+      ],
+    },
+    {
+      items: [
+        { type: 'actions', confirmLabel: 'Submit', cancelLabel: 'Cancel', onConfirm: () => void submitConfigure(), onCancel: () => setWindow({ kind: 'list' }) },
+      ],
+    },
+  ]
+  const footerLines: DialogFooterLine[] = error !== null ? [errorLine(error)] : []
+  if (window.kind === 'configure-model') {
+    return (
+      <Dialog
+        ref={ref}
+        key="configure-model"
+        width={DIALOG_WIDTH_MEDIUM}
+        maxHeight={DIALOG_MAX_HEIGHT}
+        title="Configure Model"
+        rows={configureRows}
+        errors={footerLines}
+        onClose={onClose}
+      />
+    )
+  }
+  const listRows: DialogRow[] = models.map(model => {
+    const item: DialogItem = {
+      type: 'button',
+      label: model.name,
+      right: model.providerName,
+      onPress: () => void selectModel(model),
+    }
+    modelItemMap.set(item, model)
+    return { items: [item] }
+  })
+  const listFooter: DialogFooterLine[] = [
+    {
+      text: `Ctrl+A add providers ${glyphs.separator} Ctrl+E configure`,
+      color: COLORS.dialogHintText,
+    },
+    ...(loading ? [loadingLine()] : []),
+  ]
+  const listErrors: DialogFooterLine[] = [
+    ...(loadError !== null ? [errorLine(loadError)] : []),
+    ...footerLines,
+  ]
+  const handleCtrlEItem = (focused: DialogItem | undefined): boolean => {
+    const model = focused === undefined ? undefined : modelItemRefs.current.get(focused)
+    return model === undefined ? false : handleCtrlE(model)
+  }
+  return (
+    <Dialog
+      key="list"
+      ref={ref}
+      width={DIALOG_WIDTH_MEDIUM}
+      maxHeight={DIALOG_MAX_HEIGHT}
+      title="models"
+      rows={listRows}
+      footer={listFooter}
+      errors={listErrors}
+      onClose={onClose}
+      search
+      searchRight
+      centerScroll
+      onCtrlA={(_focused) => {
+        onAddProvider()
+        return true
+      }}
+      onCtrlE={handleCtrlEItem}
+    />
+  )
+}

package/src/ui/dialog/presets-dialog.tsx

@@ -0,0 +1,46 @@
+import type { Ref } from 'react'
+import { errorLine } from './status-lines.ts'
+import type { PresetSummary } from '../../chat/presets.ts'
+import { useAsyncAction } from '../hooks/use-async-action.ts'
+import { ListDialog } from './list-dialog.tsx'
+import { DIALOG_WIDTH_MEDIUM, DIALOG_MAX_HEIGHT } from './sizes.ts'
+import type { DialogHandle, DialogFooterLine } from './dialog.tsx'
+
+export interface PresetsApi {
+  listPresets(): Promise<PresetSummary[]>
+  currentPreset(): string
+  selectPreset(id: string): Promise<void>
+}
+
+export interface PresetsDialogProps {
+  api: PresetsApi
+  onClose: () => void
+  ref?: Ref<DialogHandle>
+}
+
+
+export function PresetsDialog({ api, onClose, ref }: PresetsDialogProps) {
+  const { error, run } = useAsyncAction()
+  const current = api.currentPreset()
+  const selectPreset = async (id: string) => {
+    const result = await run(() => api.selectPreset(id))
+    if (!result.ok) return
+    onClose()
+  }
+  const footerLines: DialogFooterLine[] = error === null ? [] : [errorLine(error)]
+  return (
+    <ListDialog
+      ref={ref}
+      title="preset"
+      width={DIALOG_WIDTH_MEDIUM}
+      maxHeight={DIALOG_MAX_HEIGHT}
+      load={api.listPresets}
+      search
+      labelOf={preset => preset.name}
+      rightOf={preset => (preset.id === current ? 'current' : undefined)}
+      onSelect={preset => void selectPreset(preset.id)}
+      onClose={onClose}
+      errors={footerLines}
+    />
+  )
+}

package/src/ui/dialog/providers-dialog.tsx

@@ -0,0 +1,313 @@
+import { useEffect, useLayoutEffect, useRef, useState } from 'react'
+import type { Ref } from 'react'
+import type { LlmDiscoveredModel } from '@deepseek-ai/dsh-llm'
+import type { CustomProviderForm, OfficialProvider } from '../../chat/models.ts'
+import { API_PROTOCOLS, isProviderIdValid } from '../../chat/models.ts'
+import { COLORS } from '../../theme.ts'
+import { errorLine, loadingLine } from './status-lines.ts'
+import { useAsyncAction } from '../hooks/use-async-action.ts'
+import { useAsyncList } from '../hooks/use-async-list.ts'
+import { Dialog } from './dialog.tsx'
+import type { DialogFooterLine, DialogHandle, DialogItem, DialogRow } from './dialog.tsx'
+import { DIALOG_MAX_HEIGHT, DIALOG_WIDTH_MEDIUM } from './sizes.ts'
+import type { ModelApi } from './models-dialog.tsx'
+
+export interface ProvidersDialogProps {
+  api: ModelApi
+  onClose: () => void
+  onModelSelected: (provider: string, model: string) => void
+  ref?: Ref<DialogHandle>
+}
+
+type Window =
+  | { kind: 'providers' }
+  | { kind: 'add-provider-key' }
+  | { kind: 'add-custom' }
+  | { kind: 'select-models' }
+
+const ARM_TIMEOUT_MS = 3000
+
+const DELETE_HINT: DialogFooterLine[] = [
+  { text: 'Ctrl+D to delete the custom provider', color: COLORS.dialogHintText },
+]
+
+
+const EMPTY_FORM: CustomProviderForm = {
+  providerId: '',
+  displayName: '',
+  apiUrl: '',
+  apiProtocol: API_PROTOCOLS[0],
+  apiKey: '',
+}
+
+function sourceOf(entry: OfficialProvider): string {
+  return entry.declared === true ? 'custom' : entry.settingsNs
+}
+
+export function ProvidersDialog({ api, onClose, onModelSelected, ref }: ProvidersDialogProps) {
+  const [window, setWindow] = useState<Window>({ kind: 'providers' })
+  const { error, setError, clearError, run } = useAsyncAction()
+  const [form, setForm] = useState<CustomProviderForm>(EMPTY_FORM)
+  const [provider, setProvider] = useState<OfficialProvider | null>(null)
+  const [providerKey, setProviderKey] = useState('')
+  const [discovered, setDiscovered] = useState<LlmDiscoveredModel[]>([])
+  const [picked, setPicked] = useState<ReadonlySet<string>>(new Set())
+  const [fetching, setFetching] = useState(false)
+  const fetchingRef = useRef(false)
+  const [armedKey, setArmedKey] = useState<string | null>(null)
+  const armedRef = useRef<string | null>(null)
+  const armTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
+  const providerItemRefs = useRef(new Map<DialogItem, OfficialProvider>())
+  const providerItemMap = new Map<DialogItem, OfficialProvider>()
+  useLayoutEffect(() => {
+    providerItemRefs.current = providerItemMap
+  })
+  const { items: directory, loading, error: loadError, reload } = useAsyncList(api.listProviderDirectory)
+  const disarm = () => {
+    clearTimeout(armTimer.current)
+    if (armedRef.current !== null) {
+      armedRef.current = null
+      setArmedKey(null)
+    }
+  }
+  useEffect(() => () => clearTimeout(armTimer.current), [])
+  const deleteProvider = async (entry: OfficialProvider) => {
+    const result = await run(() => api.deleteProvider(entry))
+    if (!result.ok) return
+    clearError()
+    reload()
+  }
+  const handleCtrlD = (focused: DialogItem | undefined): boolean => {
+    if (focused?.type !== 'button') return false
+    const entry = providerItemRefs.current.get(focused)
+    if (entry === undefined || entry.declared !== true) return false
+    if (armedRef.current === entry.provider) {
+      disarm()
+      void deleteProvider(entry)
+      return true
+    }
+    clearTimeout(armTimer.current)
+    armedRef.current = entry.provider
+    setArmedKey(entry.provider)
+    armTimer.current = setTimeout(disarm, ARM_TIMEOUT_MS)
+    return true
+  }
+  const openCustom = () => {
+    clearError()
+    setWindow({ kind: 'add-custom' })
+  }
+  const selectDirectoryProvider = (entry: OfficialProvider) => {
+    clearError()
+    setProvider(entry)
+    setProviderKey('')
+    setWindow({ kind: 'add-provider-key' })
+  }
+  const resetProvider = () => {
+    setProvider(null)
+    setProviderKey('')
+  }
+  const setField = <K extends keyof CustomProviderForm>(key: K, value: CustomProviderForm[K]) => {
+    setForm(current => ({ ...current, [key]: value }))
+  }
+  const fetchIntoSelection = async (fetchModels: () => Promise<LlmDiscoveredModel[]>) => {
+    const found = await fetchModels()
+    if (found.length === 0) throw new Error('Failed to fetch models')
+    setDiscovered(found)
+    setPicked(new Set())
+    clearError()
+    setWindow({ kind: 'select-models' })
+  }
+  const submitCustom = async () => {
+    if (fetchingRef.current) return
+    clearError()
+    if (!isProviderIdValid(form.providerId.trim())) {
+      setError('Provider ID must start with a letter and use only letters, digits, _ and -')
+      return
+    }
+    fetchingRef.current = true
+    setFetching(true)
+    await run(() => fetchIntoSelection(() => api.fetchCustomModels({ ...form, providerId: form.providerId.trim() })))
+    fetchingRef.current = false
+    setFetching(false)
+  }
+  const submitProviderKey = async () => {
+    if (provider === null || fetchingRef.current) return
+    fetchingRef.current = true
+    setFetching(true)
+    await run(async () => {
+      if (providerKey.trim() !== '') await api.saveProviderKey(provider, providerKey)
+      const found = await api.fetchProviderModels(provider, providerKey)
+      if (found === undefined) {
+        resetProvider()
+        clearError()
+        setWindow({ kind: 'providers' })
+        reload()
+        return
+      }
+      if (found.length === 0) throw new Error('Failed to fetch models')
+      setDiscovered(found)
+      setPicked(new Set())
+      clearError()
+      setWindow({ kind: 'select-models' })
+    })
+    fetchingRef.current = false
+    setFetching(false)
+  }
+  const toggleModel = (id: string) => {
+    setPicked(current => {
+      const next = new Set(current)
+      if (next.has(id)) next.delete(id)
+      else next.add(id)
+      return next
+    })
+  }
+  const submitModels = async () => {
+    await run(async () => {
+      if (picked.size === 0) throw new Error('Select at least one model')
+      const chosen = discovered.filter(model => picked.has(model.id))
+      if (provider !== null) {
+        await api.saveProviderModels(provider, chosen)
+        resetProvider()
+      } else {
+        await api.saveCustomProvider(form, chosen)
+        setForm(EMPTY_FORM)
+      }
+      clearError()
+      setWindow({ kind: 'providers' })
+      reload()
+    })
+  }
+  const providerKeyRows: DialogRow[] = [
+    {
+      items: [
+        { type: 'input', label: 'API Key', value: providerKey, onChange: setProviderKey },
+      ],
+    },
+    {
+      items: [
+        { type: 'actions', confirmLabel: 'Submit', cancelLabel: 'Cancel', onConfirm: () => void submitProviderKey(), onCancel: onClose },
+      ],
+    },
+  ]
+  const customRows: DialogRow[] = [
+    { items: [{ type: 'input', label: 'Provider ID', value: form.providerId, onChange: value => setField('providerId', value) }] },
+    { items: [{ type: 'input', label: 'Display Name', value: form.displayName, onChange: value => setField('displayName', value) }] },
+    { items: [{ type: 'input', label: 'API URL', value: form.apiUrl, onChange: value => setField('apiUrl', value) }] },
+    {
+      items: [
+        {
+          type: 'input',
+          label: 'API Key',
+          value: form.apiKey,
+          onChange: value => setField('apiKey', value),
+        },
+      ],
+    },
+    {
+      items: [
+        {
+          type: 'select',
+          label: 'API Protocol',
+          value: form.apiProtocol,
+          options: API_PROTOCOLS,
+          onChange: value => setField('apiProtocol', value),
+          spaced: true,
+        },
+      ],
+    },
+    {
+      items: [
+        { type: 'actions', confirmLabel: 'Submit', cancelLabel: 'Cancel', onConfirm: () => void submitCustom(), onCancel: onClose },
+      ],
+    },
+  ]
+  const selectRows: DialogRow[] = discovered.map(model => ({
+    items: [
+      {
+        type: 'checkbox',
+        label: model.name ?? model.id,
+        checked: picked.has(model.id),
+        onToggle: () => toggleModel(model.id),
+        onConfirm: () => void submitModels(),
+      },
+    ],
+  }))
+  const statusLines: DialogFooterLine[] = [
+    ...(window.kind === 'select-models' ? [{ text: 'Press Space to toggle, Enter to confirm', color: COLORS.dialogHintText }] : []),
+    ...(fetching && (window.kind === 'add-provider-key' || window.kind === 'add-custom') ? [{ text: 'Fetching models...' }] : []),
+  ]
+  const errorLines: DialogFooterLine[] = error !== null ? [errorLine(error)] : []
+  if (window.kind !== 'providers') {
+    const title =
+      window.kind === 'add-provider-key'
+        ? `Add ${provider?.displayName ?? provider?.provider ?? ''}`
+        : window.kind === 'add-custom'
+          ? 'Add Custom Provider'
+          : 'Select Models'
+    const rows = window.kind === 'add-provider-key'
+      ? providerKeyRows
+      : window.kind === 'add-custom'
+        ? customRows
+        : selectRows
+    return (
+      <Dialog
+        ref={ref}
+        key={window.kind}
+        width={DIALOG_WIDTH_MEDIUM}
+        maxHeight={DIALOG_MAX_HEIGHT}
+        title={title}
+        rows={rows}
+        footer={statusLines}
+        errors={errorLines}
+        onClose={onClose}
+        search={window.kind === 'select-models'}
+        centerScroll={window.kind === 'select-models'}
+      />
+    )
+  }
+  const providerRows: DialogRow[] = [
+    ...directory.map(entry => {
+      const armed = armedKey === entry.provider
+      const item: DialogItem = {
+        type: 'button',
+        label: entry.displayName || entry.provider,
+        right: armed ? 'Press Ctrl+D again to delete' : sourceOf(entry),
+        onPress: () => selectDirectoryProvider(entry),
+        ...(armed ? { rightColor: COLORS.errorText } : {}),
+      }
+      providerItemMap.set(item, entry)
+      return { items: [item] }
+    }),
+    {
+      items: [
+        { type: 'button', label: 'Custom Provider', right: 'add manually', onPress: openCustom },
+      ],
+    },
+  ]
+  const providerFooter: DialogFooterLine[] = [
+    ...(loading ? [loadingLine()] : []),
+    ...DELETE_HINT,
+    ...statusLines,
+  ]
+  const providerErrors: DialogFooterLine[] = [
+    ...(loadError !== null ? [errorLine(loadError)] : []),
+    ...errorLines,
+  ]
+  return (
+    <Dialog
+      key="providers"
+      ref={ref}
+      width={DIALOG_WIDTH_MEDIUM}
+      maxHeight={DIALOG_MAX_HEIGHT}
+      title="providers"
+      rows={providerRows}
+      footer={providerFooter}
+      errors={providerErrors}
+      onClose={onClose}
+      search
+      centerScroll
+      onCtrlD={handleCtrlD}
+      onActivity={disarm}
+    />
+  )
+}