@dsh-plus/llm-pi 0.1.0

package/src/client/views/models.tsx

@@ -0,0 +1,292 @@
+/**
+ * 模型目录编辑：每行一个模型（id/extends/name/容量/模态/reasoningEfforts/compat），
+ * extends 输入框带 datalist 候选——候选来自 /catalog 端点：选定 source
+ * （builtin / models-dev）与 provider 后拉取其 models 列表。
+ * @module llm-pi/client/views/models
+ */
+import { useEffect, useState, type ReactElement } from 'react'
+
+import { fetchCatalog, type WireModelsDevStatus } from '../api.ts'
+import { MODALITIES, THINKING_LEVELS } from '../constants.ts'
+import { emptyModelDraft, type ModelDraft, type ReasoningDraft } from '../draft.ts'
+import { CheckRow, TextField } from '../fields.tsx'
+import { CompatEditor } from './compat.tsx'
+
+type CatalogSource = 'builtin' | 'models-dev'
+
+function catalogNote(status: WireModelsDevStatus | undefined, t: (key: string) => string): string {
+  if (status === undefined) return ''
+  if (status.error !== null) return `${t('modelsDevError')}${status.error}`
+  return `${t('modelsDevStatusLine')}：${status.providers} 个 provider，快照 ${status.fetchedAt ?? '-'}`
+}
+
+export interface ModelsTableProps {
+  route: string
+  api: string
+  /** 默认候选 provider（route 级 extends）。 */
+  defaultProvider: string
+  models: ModelDraft[]
+  epoch: number
+  disabled?: boolean
+  t(key: string): string
+  onModels(next: ModelDraft[]): void
+}
+
+export function ModelsTable(props: ModelsTableProps): ReactElement {
+  const { t } = props
+  const [source, setSource] = useState<CatalogSource>('builtin')
+  const [providerIds, setProviderIds] = useState<string[]>([])
+  const [provider, setProvider] = useState('')
+  const [candidateModels, setCandidateModels] = useState<string[]>([])
+  const [note, setNote] = useState('')
+  const listId = `lpc-models-${props.route.replace(/[^a-zA-Z0-9_-]/g, '_')}`
+
+  useEffect(() => {
+    let alive = true
+    setNote(t('catalogLoading'))
+    void (async () => {
+      try {
+        const list = await fetchCatalog('', source)
+        if (!alive) return
+        setProviderIds(list.providers)
+        const preferred = list.providers.includes(props.defaultProvider)
+          ? props.defaultProvider
+          : (list.providers[0] ?? '')
+        setProvider(preferred)
+        setNote(catalogNote(list.status, t))
+        if (preferred === '') return
+        const result = await fetchCatalog(preferred, source)
+        if (alive) setCandidateModels(result.models)
+      } catch {
+        if (alive) setNote(t('catalogFailed'))
+      }
+    })()
+    return () => {
+      alive = false
+    }
+  }, [source])
+
+  const onProviderChange = (value: string): void => {
+    setProvider(value)
+    if (value === '') {
+      setCandidateModels([])
+      return
+    }
+    void fetchCatalog(value, source)
+      .then((result) => setCandidateModels(result.models))
+      .catch(() => setNote(t('catalogFailed')))
+  }
+
+  return (
+    <div className="lpc-models">
+      <div className="lpc-modelHead">
+        <span className="lpc-modelTitle">{t('modelsGroup')}</span>
+        <button
+          type="button"
+          className="lpc-btn lpc-btnGhost lpc-btnSmall"
+          disabled={props.disabled === true}
+          onClick={() => props.onModels([...props.models, emptyModelDraft()])}
+        >
+          {t('addModel')}
+        </button>
+      </div>
+      <div className="lpc-catalogBar">
+        <label className="lpc-catalogLabel" htmlFor={`${listId}-source`}>{t('catalogSource')}</label>
+        <select
+          id={`${listId}-source`}
+          className="lpc-input lpc-select lpc-catalogSelect"
+          value={source}
+          disabled={props.disabled === true}
+          onChange={(event) => setSource(event.target.value as CatalogSource)}
+        >
+          <option value="builtin">builtin</option>
+          <option value="models-dev">models-dev</option>
+        </select>
+        <label className="lpc-catalogLabel" htmlFor={`${listId}-provider`}>{t('catalogProvider')}</label>
+        <select
+          id={`${listId}-provider`}
+          className="lpc-input lpc-select lpc-catalogSelect"
+          value={provider}
+          disabled={props.disabled === true || providerIds.length === 0}
+          onChange={(event) => onProviderChange(event.target.value)}
+        >
+          <option value="">-</option>
+          {providerIds.map((id) => (
+            <option key={id} value={id}>{id}</option>
+          ))}
+        </select>
+      </div>
+      {note !== '' ? <p className="lpc-hint">{note}</p> : null}
+      <datalist id={listId}>
+        {candidateModels.map((id) => (
+          <option key={id} value={id} />
+        ))}
+      </datalist>
+      {props.models.map((model, index) => (
+        <ModelRow
+          key={`${index}:${model.id}`}
+          index={index}
+          model={model}
+          api={props.api}
+          listId={listId}
+          epoch={props.epoch}
+          disabled={props.disabled === true}
+          t={t}
+          onPatch={(patch) =>
+            props.onModels(props.models.map((m, i) => (i === index ? { ...m, ...patch } : m)))
+          }
+          onRemove={() => props.onModels(props.models.filter((_, i) => i !== index))}
+        />
+      ))}
+    </div>
+  )
+}
+
+export interface ModelRowProps {
+  index: number
+  model: ModelDraft
+  api: string
+  listId: string
+  epoch: number
+  disabled?: boolean
+  t(key: string): string
+  onPatch(patch: Partial<ModelDraft>): void
+  onRemove(): void
+}
+
+export function ModelRow(props: ModelRowProps): ReactElement {
+  const { model, t } = props
+  const id = `${props.listId}-m${props.index}`
+  return (
+    <div className="lpc-modelRow">
+      <div className="lpc-modelHead">
+        <span className="lpc-modelTitle">{t('modelRow')} {props.index + 1}</span>
+        <button
+          type="button"
+          className="lpc-btn lpc-btnGhost lpc-btnSmall"
+          disabled={props.disabled === true}
+          onClick={props.onRemove}
+        >
+          {t('deleteModel')}
+        </button>
+      </div>
+      <div className="lpc-grid">
+        <TextField
+          id={`${id}-id`}
+          label={t('modelId')}
+          hint={t('modelIdHint')}
+          value={model.id}
+          disabled={props.disabled === true}
+          invalid={model.id.trim() === ''}
+          invalidLabel={t('modelIdRequired')}
+          onEdit={(value) => props.onPatch({ id: value })}
+        />
+        <TextField
+          id={`${id}-extends`}
+          label={t('modelExtends')}
+          hint={t('modelExtendsHint')}
+          value={model.extends}
+          list={props.listId}
+          disabled={props.disabled === true}
+          onEdit={(value) => props.onPatch({ extends: value })}
+        />
+        <TextField
+          id={`${id}-name`}
+          label={t('modelName')}
+          value={model.name}
+          disabled={props.disabled === true}
+          onEdit={(value) => props.onPatch({ name: value })}
+        />
+        <TextField
+          id={`${id}-ctx`}
+          label={t('contextWindow')}
+          numeric
+          value={model.contextWindow}
+          disabled={props.disabled === true}
+          onEdit={(value) => props.onPatch({ contextWindow: value })}
+        />
+        <TextField
+          id={`${id}-max`}
+          label={t('maxTokens')}
+          numeric
+          value={model.maxTokens}
+          disabled={props.disabled === true}
+          onEdit={(value) => props.onPatch({ maxTokens: value })}
+        />
+        <div className="lpc-field">
+          <span className="lpc-label">{t('input')}</span>
+          {MODALITIES.map((modality) => (
+            <CheckRow
+              key={modality}
+              id={`${id}-input-${modality}`}
+              label={modality}
+              checked={model.input[modality]}
+              disabled={props.disabled === true}
+              onEdit={(checked) => props.onPatch({ input: { ...model.input, [modality]: checked } })}
+            />
+          ))}
+        </div>
+      </div>
+      <ReasoningEditor
+        idPrefix={`${id}-re`}
+        value={model.reasoningEfforts}
+        disabled={props.disabled === true}
+        t={t}
+        onEdit={(reasoningEfforts) => props.onPatch({ reasoningEfforts })}
+      />
+      <CompatEditor
+        idPrefix={`${id}-compat`}
+        api={props.api}
+        compat={model.compat}
+        epoch={props.epoch}
+        disabled={props.disabled === true}
+        wide
+        t={t}
+        onEdit={(compat) => props.onPatch({ compat })}
+      />
+    </div>
+  )
+}
+
+export interface ReasoningEditorProps {
+  idPrefix: string
+  value: ReasoningDraft
+  disabled?: boolean
+  t(key: string): string
+  onEdit(next: ReasoningDraft): void
+}
+
+export function ReasoningEditor(props: ReasoningEditorProps): ReactElement {
+  const { value } = props
+  return (
+    <div className="lpc-field lpc-wide">
+      <div className="lpc-head">
+        <span className="lpc-label">{props.t('reasoningEfforts')}</span>
+      </div>
+      <div className="lpc-checkRow">
+        <input
+          id={`${props.idPrefix}-nonreasoning`}
+          type="checkbox"
+          checked={value.nonReasoning}
+          disabled={props.disabled === true}
+          onChange={(event) => props.onEdit({ ...value, nonReasoning: event.target.checked })}
+        />
+        <label htmlFor={`${props.idPrefix}-nonreasoning`}>{props.t('nonReasoning')}</label>
+      </div>
+      {value.nonReasoning ? null : (
+        <div className="lpc-grid">
+          {THINKING_LEVELS.map((level) => (
+            <TextField
+              key={level}
+              id={`${props.idPrefix}-${level}`}
+              label={level}
+              value={value.levels[level] ?? ''}
+              disabled={props.disabled === true}
+              onEdit={(text) => props.onEdit({ ...value, levels: { ...value.levels, [level]: text } })}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/client/views/provider-fields.tsx

@@ -0,0 +1,177 @@
+/**
+ * Provider route 的标量字段组：基础字段网格（继承/显示名/端点/凭据/默认容量/
+ * 超时/默认模态/预算）与协议/档位/缓存/传输下拉组。compat、headers、
+ * retryPolicy 与模型目录在 views/providers.tsx 的 route 小节内另行渲染。
+ * @module llm-pi/client/views/provider-fields
+ */
+import type { ReactElement } from 'react'
+
+import {
+  BUDGET_KEYS, CACHE_RETENTION_OPTIONS, MODALITIES, PROTOCOL_IDS, THINKING_LEVELS, TRANSPORT_OPTIONS,
+} from '../constants.ts'
+import type { ProviderDraft } from '../draft.ts'
+import { CheckRow, SelectField, TextField } from '../fields.tsx'
+import { pruneCompatForApi } from './compat.tsx'
+
+export interface ProviderScalarFieldsProps {
+  id: string
+  draft: ProviderDraft
+  disabled?: boolean
+  t(key: string): string
+  onPatch(patch: Partial<ProviderDraft>): void
+}
+
+export function ProviderScalarFields(props: ProviderScalarFieldsProps): ReactElement {
+  const { draft, t } = props
+  return (
+    <div className="lpc-grid">
+      <TextField
+        id={`${props.id}-extends`}
+        label={t('extends')}
+        hint={t('extendsHint')}
+        value={draft.extends}
+        disabled={props.disabled === true}
+        onEdit={(value) => props.onPatch({ extends: value })}
+      />
+      <TextField
+        id={`${props.id}-displayName`}
+        label={t('displayName')}
+        value={draft.displayName}
+        disabled={props.disabled === true}
+        onEdit={(value) => props.onPatch({ displayName: value })}
+      />
+      <TextField
+        id={`${props.id}-baseURL`}
+        label={t('baseURL')}
+        hint={t('baseURLHint')}
+        value={draft.baseURL}
+        disabled={props.disabled === true}
+        onEdit={(value) => props.onPatch({ baseURL: value })}
+      />
+      <TextField
+        id={`${props.id}-apiKeyEnv`}
+        label={t('apiKeyEnv')}
+        hint={t('apiKeyEnvHint')}
+        value={draft.apiKeyEnv}
+        disabled={props.disabled === true}
+        onEdit={(value) => props.onPatch({ apiKeyEnv: value })}
+      />
+      <TextField
+        id={`${props.id}-defaultCtx`}
+        label={t('defaultContextWindow')}
+        numeric
+        value={draft.defaultContextWindow}
+        disabled={props.disabled === true}
+        onEdit={(value) => props.onPatch({ defaultContextWindow: value })}
+      />
+      <TextField
+        id={`${props.id}-defaultMax`}
+        label={t('defaultMaxTokens')}
+        numeric
+        value={draft.defaultMaxTokens}
+        disabled={props.disabled === true}
+        onEdit={(value) => props.onPatch({ defaultMaxTokens: value })}
+      />
+      <TextField
+        id={`${props.id}-timeout`}
+        label={t('timeoutMs')}
+        numeric
+        value={draft.timeoutMs}
+        disabled={props.disabled === true}
+        onEdit={(value) => props.onPatch({ timeoutMs: value })}
+      />
+      <TextField
+        id={`${props.id}-wsTimeout`}
+        label={t('websocketConnectTimeoutMs')}
+        numeric
+        value={draft.websocketConnectTimeoutMs}
+        disabled={props.disabled === true}
+        onEdit={(value) => props.onPatch({ websocketConnectTimeoutMs: value })}
+      />
+      <TextField
+        id={`${props.id}-streamIdle`}
+        label={t('streamIdleTimeoutMs')}
+        numeric
+        value={draft.streamIdleTimeoutMs}
+        disabled={props.disabled === true}
+        onEdit={(value) => props.onPatch({ streamIdleTimeoutMs: value })}
+      />
+      <div className="lpc-field">
+        <span className="lpc-label">{t('defaultInput')}</span>
+        {MODALITIES.map((modality) => (
+          <CheckRow
+            key={modality}
+            id={`${props.id}-input-${modality}`}
+            label={modality}
+            checked={draft.input[modality]}
+            disabled={props.disabled === true}
+            onEdit={(checked) => props.onPatch({ input: { ...draft.input, [modality]: checked } })}
+          />
+        ))}
+      </div>
+      <div className="lpc-field">
+        <span className="lpc-label">{t('thinkingBudgets')}</span>
+        <div className="lpc-grid lpc-gridNested">
+          {BUDGET_KEYS.map((key) => (
+            <TextField
+              key={key}
+              id={`${props.id}-budget-${key}`}
+              label={key}
+              numeric
+              value={draft.thinkingBudgets[key]}
+              disabled={props.disabled === true}
+              onEdit={(value) =>
+                props.onPatch({ thinkingBudgets: { ...draft.thinkingBudgets, [key]: value } })
+              }
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+/** 协议/档位/缓存/传输四个下拉组。 */
+export function ProviderSelectFields(props: ProviderScalarFieldsProps): ReactElement {
+  const { draft, t } = props
+  return (
+    <div className="lpc-grid">
+      <SelectField
+        id={`${props.id}-api`}
+        label={t('api')}
+        value={draft.api}
+        options={PROTOCOL_IDS}
+        unsetLabel={t('compatUnset')}
+        disabled={props.disabled === true}
+        onEdit={(value) => props.onPatch({ api: value, compat: pruneCompatForApi(draft.compat, value) })}
+      />
+      <SelectField
+        id={`${props.id}-reasoning`}
+        label={t('reasoning')}
+        value={draft.reasoning}
+        options={THINKING_LEVELS}
+        unsetLabel={t('compatUnset')}
+        disabled={props.disabled === true}
+        onEdit={(value) => props.onPatch({ reasoning: value })}
+      />
+      <SelectField
+        id={`${props.id}-cache`}
+        label={t('cacheRetention')}
+        value={draft.cacheRetention}
+        options={CACHE_RETENTION_OPTIONS}
+        unsetLabel={t('compatUnset')}
+        disabled={props.disabled === true}
+        onEdit={(value) => props.onPatch({ cacheRetention: value })}
+      />
+      <SelectField
+        id={`${props.id}-transport`}
+        label={t('transport')}
+        value={draft.transport}
+        options={TRANSPORT_OPTIONS}
+        unsetLabel={t('compatUnset')}
+        disabled={props.disabled === true}
+        onEdit={(value) => props.onPatch({ transport: value })}
+      />
+    </div>
+  )
+}

package/src/client/views/providers.tsx

@@ -0,0 +1,176 @@
+/**
+ * Provider 路由编辑：每个 route 一张可折叠小节（键名 + 标量字段 +
+ * headers 键值对 + retryPolicy JSON + compat + 模型目录）。
+ * 支持新增 route（输入键名）与删除 route。
+ * @module llm-pi/client/views/providers
+ */
+import { useState, type ReactElement } from 'react'
+
+import type { ProviderDraft } from '../draft.ts'
+import { CollapseSection, JsonField, KeyValueEditor } from '../fields.tsx'
+import { CompatEditor } from './compat.tsx'
+import { ModelsTable } from './models.tsx'
+import { ProviderScalarFields, ProviderSelectFields } from './provider-fields.tsx'
+
+export interface ProvidersSectionProps {
+  providers: Record<string, ProviderDraft>
+  epoch: number
+  disabled?: boolean
+  t(key: string): string
+  onAddRoute(key: string): void
+  onRemoveRoute(route: string): void
+  onPatchProvider(route: string, patch: Partial<ProviderDraft>): void
+}
+
+export function ProvidersSection(props: ProvidersSectionProps): ReactElement {
+  const [newRoute, setNewRoute] = useState('')
+  const [routeError, setRouteError] = useState('')
+  const submitAdd = (): void => {
+    const key = newRoute.trim()
+    if (key === '') {
+      setRouteError(props.t('routeEmpty'))
+      return
+    }
+    if (props.providers[key] !== undefined) {
+      setRouteError(props.t('routeDuplicate'))
+      return
+    }
+    props.onAddRoute(key)
+    setNewRoute('')
+    setRouteError('')
+  }
+  return (
+    <div className="lpc-section">
+      <p className="lpc-groupLabel">{props.t('providersGroup')}</p>
+      <div className="lpc-addRoute">
+        <input
+          className={`lpc-input${routeError !== '' ? ' lpc-inputInvalid' : ''}`}
+          value={newRoute}
+          disabled={props.disabled === true}
+          placeholder={props.t('addRoutePlaceholder')}
+          onChange={(event) => {
+            setNewRoute(event.target.value)
+            setRouteError('')
+          }}
+        />
+        <button
+          type="button"
+          className="lpc-btn lpc-btnGhost"
+          disabled={props.disabled === true}
+          onClick={submitAdd}
+        >
+          {props.t('addRoute')}
+        </button>
+      </div>
+      {routeError !== '' ? <p className="lpc-invalid">{routeError}</p> : null}
+      {Object.entries(props.providers).map(([route, draft]) => (
+        <ProviderSection
+          key={route}
+          route={route}
+          draft={draft}
+          epoch={props.epoch}
+          disabled={props.disabled === true}
+          t={props.t}
+          onRemove={() => props.onRemoveRoute(route)}
+          onPatch={(patch) => props.onPatchProvider(route, patch)}
+        />
+      ))}
+    </div>
+  )
+}
+
+export interface ProviderSectionProps {
+  route: string
+  draft: ProviderDraft
+  epoch: number
+  disabled?: boolean
+  t(key: string): string
+  onRemove(): void
+  onPatch(patch: Partial<ProviderDraft>): void
+}
+
+export function ProviderSection(props: ProviderSectionProps): ReactElement {
+  const [open, setOpen] = useState(false)
+  const { route, draft, t } = props
+  const id = route.replace(/[^a-zA-Z0-9_-]/g, '_')
+  const summary = draft.api !== '' ? draft.api : draft.extends !== '' ? `extends ${draft.extends}` : ''
+  const fieldProps = { id, draft, disabled: props.disabled === true, t, onPatch: props.onPatch }
+  return (
+    <div className="lpc-route">
+      <div className="lpc-routeHead">
+        <button
+          type="button"
+          className="lpc-routeToggle"
+          aria-expanded={open}
+          onClick={() => setOpen(!open)}
+        >
+          <span className={`lpc-chevron${open ? ' lpc-chevronOpen' : ''}`}>▾</span>
+          <span className="lpc-routeKey">{route}</span>
+          {summary !== '' ? <span className="lpc-routeApi">{summary}</span> : null}
+        </button>
+        <button
+          type="button"
+          className="lpc-btn lpc-btnGhost lpc-btnSmall"
+          disabled={props.disabled === true}
+          onClick={props.onRemove}
+        >
+          {t('deleteRoute')}
+        </button>
+      </div>
+      {open ? (
+        <div className="lpc-routeBody">
+          <p className="lpc-groupLabel">{t('providerFields')}</p>
+          <ProviderScalarFields {...fieldProps} />
+          <ProviderSelectFields {...fieldProps} />
+          <KeyValueEditor
+            id={`${id}-headers`}
+            label={t('headers')}
+            hint={t('headersHint')}
+            pairs={draft.headers}
+            disabled={props.disabled === true}
+            keyPlaceholder={t('key')}
+            valuePlaceholder={t('value')}
+            addLabel={t('add')}
+            removeLabel={t('remove')}
+            onEdit={(headers) => props.onPatch({ headers })}
+          />
+          <CollapseSection id={`${id}-advanced`} title={t('advancedGroup')} defaultOpen={false}>
+            <>
+              <JsonField
+                id={`${id}-retry`}
+                label={t('retryPolicy')}
+                hint={t('retryPolicyHint')}
+                invalidText={t('invalidJson')}
+                value={draft.retryPolicy}
+                epoch={props.epoch}
+                disabled={props.disabled === true}
+                wide
+                onEdit={(retryPolicy) => props.onPatch({ retryPolicy })}
+              />
+              <CompatEditor
+                idPrefix={`${id}-compat`}
+                api={draft.api}
+                compat={draft.compat}
+                epoch={props.epoch}
+                disabled={props.disabled === true}
+                wide
+                t={t}
+                onEdit={(compat) => props.onPatch({ compat })}
+              />
+            </>
+          </CollapseSection>
+          <ModelsTable
+            route={route}
+            api={draft.api}
+            defaultProvider={draft.extends}
+            models={draft.models}
+            epoch={props.epoch}
+            disabled={props.disabled === true}
+            t={t}
+            onModels={(models) => props.onPatch({ models })}
+          />
+        </div>
+      ) : null}
+    </div>
+  )
+}