@dsh-plus/llm-pi 0.1.0

package/src/client/fields.tsx

@@ -0,0 +1,272 @@
+/**
+ * 配置卡片基础控件：文本/数字输入、勾选行、下拉、键值对编辑、JSON 文本框。
+ * 视觉对齐官方卡片字段（label + hint + 控件纵列），样式类前缀 lpc-。
+ * @module llm-pi/client/fields
+ */
+import { useEffect, useState, type ReactElement } from 'react'
+
+import type { HeaderPair } from './draft.ts'
+
+/**
+ * 可折叠小节：复杂项（compat/retryPolicy 等）默认折叠，避免卡片过长；
+ * 基础项（baseURL 等）保持展开。标题按钮切换展开态。
+ */
+export interface CollapseSectionProps {
+  id: string
+  title: string
+  /** 默认展开态；复杂项传 false（默认折叠）。 */
+  defaultOpen: boolean
+  disabled?: boolean
+  children: ReactElement | ReactElement[] | null
+}
+
+export function CollapseSection(props: CollapseSectionProps): ReactElement {
+  const [open, setOpen] = useState(props.defaultOpen)
+  return (
+    <div className="lpc-collapse">
+      <button
+        type="button"
+        className="lpc-collapseHead"
+        id={props.id}
+        aria-expanded={open}
+        onClick={() => setOpen(!open)}
+      >
+        <span className={`lpc-chevron${open ? ' lpc-chevronOpen' : ''}`}>▾</span>
+        <span className="lpc-collapseTitle">{props.title}</span>
+      </button>
+      {open ? <div className="lpc-collapseBody">{props.children}</div> : null}
+    </div>
+  )
+}
+
+export interface TextFieldProps {
+  id: string
+  label: string
+  hint?: string
+  value: string
+  disabled?: boolean
+  invalid?: boolean
+  invalidLabel?: string
+  numeric?: boolean
+  /** datalist 的 id（extends 候选）。 */
+  list?: string
+  wide?: boolean
+  onEdit(text: string): void
+}
+
+export function TextField(props: TextFieldProps): ReactElement {
+  const invalid = props.invalid === true
+  return (
+    <div className={`lpc-field${props.wide === true ? ' lpc-wide' : ''}`}>
+      <div className="lpc-head">
+        <label className="lpc-label" htmlFor={props.id}>
+          {props.label}
+        </label>
+      </div>
+      <input
+        id={props.id}
+        className={`lpc-input${invalid ? ' lpc-inputInvalid' : ''}`}
+        type="text"
+        inputMode={props.numeric === true ? 'numeric' : undefined}
+        list={props.list}
+        aria-invalid={invalid || undefined}
+        value={props.value}
+        disabled={props.disabled === true}
+        onChange={(event) => props.onEdit(event.target.value)}
+      />
+      <p className={invalid ? 'lpc-invalid' : 'lpc-hint'}>
+        {invalid ? (props.invalidLabel ?? '') : (props.hint ?? '')}
+      </p>
+    </div>
+  )
+}
+
+export interface CheckRowProps {
+  id: string
+  label: string
+  checked: boolean
+  disabled?: boolean
+  onEdit(checked: boolean): void
+}
+
+export function CheckRow(props: CheckRowProps): ReactElement {
+  return (
+    <div className="lpc-checkRow">
+      <input
+        id={props.id}
+        type="checkbox"
+        checked={props.checked}
+        disabled={props.disabled === true}
+        onChange={(event) => props.onEdit(event.target.checked)}
+      />
+      <label htmlFor={props.id}>{props.label}</label>
+    </div>
+  )
+}
+
+export interface SelectFieldProps {
+  id: string
+  label: string
+  value: string
+  options: readonly string[]
+  /** 是否渲染"未设置"（value=''）项，及其中文文案。 */
+  unsetLabel?: string
+  disabled?: boolean
+  wide?: boolean
+  onEdit(value: string): void
+}
+
+export function SelectField(props: SelectFieldProps): ReactElement {
+  return (
+    <div className={`lpc-field${props.wide === true ? ' lpc-wide' : ''}`}>
+      <div className="lpc-head">
+        <label className="lpc-label" htmlFor={props.id}>
+          {props.label}
+        </label>
+      </div>
+      <select
+        id={props.id}
+        className="lpc-input lpc-select"
+        value={props.value}
+        disabled={props.disabled === true}
+        onChange={(event) => props.onEdit(event.target.value)}
+      >
+        {props.unsetLabel !== undefined ? <option value="">{props.unsetLabel}</option> : null}
+        {props.options.map((option) => (
+          <option key={option} value={option}>
+            {option}
+          </option>
+        ))}
+      </select>
+    </div>
+  )
+}
+
+export interface KeyValueEditorProps {
+  id: string
+  label: string
+  hint?: string
+  pairs: HeaderPair[]
+  disabled?: boolean
+  keyPlaceholder: string
+  valuePlaceholder: string
+  addLabel: string
+  removeLabel: string
+  onEdit(pairs: HeaderPair[]): void
+}
+
+export function KeyValueEditor(props: KeyValueEditorProps): ReactElement {
+  const update = (index: number, patch: Partial<HeaderPair>): void => {
+    props.onEdit(props.pairs.map((pair, i) => (i === index ? { ...pair, ...patch } : pair)))
+  }
+  const remove = (index: number): void => {
+    props.onEdit(props.pairs.filter((_, i) => i !== index))
+  }
+  return (
+    <div className="lpc-field lpc-wide">
+      <div className="lpc-head">
+        <label className="lpc-label" htmlFor={props.id}>
+          {props.label}
+        </label>
+      </div>
+      {props.pairs.map((pair, index) => (
+        <div className="lpc-kvRow" key={index}>
+          <input
+            id={index === 0 ? props.id : undefined}
+            className="lpc-input"
+            value={pair.key}
+            placeholder={props.keyPlaceholder}
+            disabled={props.disabled === true}
+            onChange={(event) => update(index, { key: event.target.value })}
+          />
+          <input
+            className="lpc-input"
+            value={pair.value}
+            placeholder={props.valuePlaceholder}
+            disabled={props.disabled === true}
+            onChange={(event) => update(index, { value: event.target.value })}
+          />
+          <button
+            type="button"
+            className="lpc-btn lpc-btnGhost lpc-btnSmall"
+            disabled={props.disabled === true}
+            onClick={() => remove(index)}
+          >
+            {props.removeLabel}
+          </button>
+        </div>
+      ))}
+      <div className="lpc-kvAdd">
+        <button
+          type="button"
+          className="lpc-btn lpc-btnGhost lpc-btnSmall"
+          disabled={props.disabled === true}
+          onClick={() => props.onEdit([...props.pairs, { key: '', value: '' }])}
+        >
+          {props.addLabel}
+        </button>
+      </div>
+      {props.hint !== undefined ? <p className="lpc-hint">{props.hint}</p> : null}
+    </div>
+  )
+}
+
+function toJsonText(value: unknown): string {
+  return value === undefined ? '' : JSON.stringify(value, null, 2)
+}
+
+function parseJsonText(text: string): { ok: true; value: unknown } | { ok: false } {
+  if (text.trim() === '') return { ok: true, value: undefined }
+  try {
+    return { ok: true, value: JSON.parse(text) }
+  } catch {
+    return { ok: false }
+  }
+}
+
+export interface JsonFieldProps {
+  id: string
+  label: string
+  hint?: string
+  invalidText: string
+  value: unknown
+  /** 放弃/保存后外部重置草稿时自增，驱动本地文本重新播种。 */
+  epoch: number
+  disabled?: boolean
+  wide?: boolean
+  onEdit(value: unknown): void
+}
+
+export function JsonField(props: JsonFieldProps): ReactElement {
+  const [text, setText] = useState(() => toJsonText(props.value))
+  useEffect(() => {
+    setText(toJsonText(props.value))
+  }, [props.epoch])
+  const parsed = parseJsonText(text)
+  return (
+    <div className={`lpc-field${props.wide === true ? ' lpc-wide' : ''}`}>
+      <div className="lpc-head">
+        <label className="lpc-label" htmlFor={props.id}>
+          {props.label}
+        </label>
+      </div>
+      <textarea
+        id={props.id}
+        className={`lpc-input lpc-textarea${parsed.ok ? '' : ' lpc-inputInvalid'}`}
+        rows={4}
+        spellCheck={false}
+        aria-invalid={parsed.ok ? undefined : true}
+        value={text}
+        disabled={props.disabled === true}
+        onChange={(event) => {
+          setText(event.target.value)
+          const result = parseJsonText(event.target.value)
+          props.onEdit(result.ok ? result.value : undefined)
+        }}
+      />
+      <p className={parsed.ok ? 'lpc-hint' : 'lpc-invalid'}>
+        {parsed.ok ? (props.hint ?? '') : props.invalidText}
+      </p>
+    </div>
+  )
+}

package/src/client/i18n.ts

@@ -0,0 +1,184 @@
+/**
+ * 配置卡片文案（zh/en）。经 ctx.locale.register 注册、bind 取用，与官方卡片同机制。
+ * @module llm-pi/client/i18n
+ */
+
+export const NS = 'dsh-plus-llm-pi'
+
+export const zh: Record<string, string> = {
+  title: 'LLM 路由（llm-pi）',
+  description: '自定义 LLM 路由：协议、compat、模型目录与 models.dev 目录兜底。',
+  enabled: '启用插件',
+  catalogUrl: 'models.dev 目录数据端点',
+  catalogUrlHint: '快照数据源；一般无需修改。',
+  catalogRefreshHours: '目录刷新间隔（小时）',
+  catalogRefreshHoursHint: '0 = 不自动拉取（可手动拉取或读已有缓存）；>0 = 每 N 小时自动拉取。',
+  catalogProxy: '拉取代理地址',
+  catalogProxyHint: 'HTTP 代理（如 http://127.0.0.1:7890）；留空直连。',
+  kitSource: '模块来源',
+  modelsDevStatus: 'models.dev 快照',
+  modelsDevEmpty: '未拉取（无缓存数据；可手动拉取）',
+  modelsDevStatusLine: '已加载',
+  modelsDevError: '加载失败：',
+  refreshCatalog: '手动拉取',
+  refreshingCatalog: '拉取中…',
+  refreshOk: '目录已拉取。',
+  refreshFailed: '拉取失败：',
+  advancedGroup: '高级设置（retryPolicy / compat）',
+  providersGroup: 'Provider 路由',
+  addRoute: '新增 route',
+  addRoutePlaceholder: '新 route 键名（如 my-llm）',
+  routeEmpty: 'route 键名不能为空。',
+  routeDuplicate: '该 route 已存在。',
+  deleteRoute: '删除 route',
+  providerFields: '基础字段',
+  extends: '继承内置 provider',
+  extendsHint: '如 openai、anthropic；提供 api/baseURL 默认值与模型查找源。',
+  displayName: '显示名',
+  api: '线协议',
+  baseURL: '端点 URL',
+  baseURLHint: '缺省继承 extends 源的端点。',
+  apiKeyEnv: '凭据引用名',
+  apiKeyEnvHint: '如 NEWAPI_API_KEY（凭据服务或环境变量）。',
+  defaultContextWindow: '默认上下文容量',
+  defaultMaxTokens: '默认输出上限',
+  defaultInput: '默认输入模态',
+  reasoning: '默认 reasoning 档位',
+  thinkingBudgets: 'thinking 档位预算',
+  cacheRetention: '提示缓存保留',
+  transport: '流式传输',
+  timeoutMs: 'HTTP 超时（毫秒）',
+  websocketConnectTimeoutMs: 'WebSocket 连接超时（毫秒）',
+  streamIdleTimeoutMs: '流空闲超时（毫秒）',
+  headers: '请求头',
+  headersHint: '键值对；键为空的整行会被忽略。',
+  key: '键',
+  value: '值',
+  add: '添加',
+  remove: '删除',
+  retryPolicy: '重试策略（JSON）',
+  retryPolicyHint: 'dsh-llm RetryPolicy 形状；非法 JSON 不会提交。',
+  invalidJson: 'JSON 格式错误（该字段不会提交）。',
+  compatGroup: 'Compat 覆盖',
+  compatApiHint: 'api 未设置时暂按 openai-completions 字段组渲染；保存时后端按实际协议校验。',
+  compatUnset: '未设置',
+  modelsGroup: '模型目录',
+  addModel: '添加模型',
+  deleteModel: '删除',
+  modelRow: '模型',
+  modelId: '模型 id',
+  modelIdHint: '发送给 provider 的标识，必填。',
+  modelIdRequired: '模型 id 必填。',
+  modelExtends: '继承源',
+  modelExtendsHint: '"provider/model" 或裸 model id（候选来自下方目录）。',
+  modelName: '显示名',
+  contextWindow: '上下文容量',
+  maxTokens: '输出上限',
+  input: '输入模态',
+  reasoningEfforts: 'reasoningEfforts',
+  nonReasoning: '非推理模型',
+  catalogSource: '候选来源',
+  catalogProvider: '候选 provider',
+  catalogLoading: '目录加载中…',
+  catalogFailed: '目录加载失败。',
+  save: '保存',
+  saving: '保存中…',
+  discard: '放弃',
+  unsaved: '未保存',
+  saveOk: '已保存。',
+  saveFailed: '保存失败：',
+  loading: '加载中…',
+  readOnly: '当前部署无 settings provider，配置为只读；请编辑 settings.yaml。',
+  expand: '展开',
+  collapse: '收起',
+  invalidNumber: '请输入有效数字',
+}
+
+export const en: Record<string, string> = {
+  title: 'LLM routes (llm-pi)',
+  description: 'Custom LLM routes: protocol, compat, model catalog and models.dev fallback.',
+  enabled: 'Enable plugin',
+  catalogUrl: 'models.dev catalog endpoint',
+  catalogUrlHint: 'Snapshot data source; usually no change needed.',
+  catalogRefreshHours: 'Catalog refresh (hours)',
+  catalogRefreshHoursHint: '0 = no auto refresh (manual refresh or existing cache); >0 = refresh every N hours.',
+  catalogProxy: 'Fetch proxy',
+  catalogProxyHint: 'HTTP proxy (e.g. http://127.0.0.1:7890); leave empty for direct.',
+  kitSource: 'Module source',
+  modelsDevStatus: 'models.dev snapshot',
+  modelsDevEmpty: 'Not fetched (no cached data; use manual refresh)',
+  modelsDevStatusLine: 'Loaded',
+  modelsDevError: 'Load failed: ',
+  refreshCatalog: 'Refresh now',
+  refreshingCatalog: 'Refreshing…',
+  refreshOk: 'Catalog refreshed.',
+  refreshFailed: 'Refresh failed: ',
+  advancedGroup: 'Advanced (retryPolicy / compat)',
+  providersGroup: 'Provider routes',
+  addRoute: 'Add route',
+  addRoutePlaceholder: 'New route key (e.g. my-llm)',
+  routeEmpty: 'Route key must not be empty.',
+  routeDuplicate: 'This route already exists.',
+  deleteRoute: 'Delete route',
+  providerFields: 'Basic fields',
+  extends: 'Inherit built-in provider',
+  extendsHint: 'e.g. openai, anthropic; provides api/baseURL defaults and the model lookup source.',
+  displayName: 'Display name',
+  api: 'Wire protocol',
+  baseURL: 'Base URL',
+  baseURLHint: 'Defaults to the extends source endpoint.',
+  apiKeyEnv: 'Credential reference',
+  apiKeyEnvHint: 'e.g. NEWAPI_API_KEY (credential service or environment variable).',
+  defaultContextWindow: 'Default context window',
+  defaultMaxTokens: 'Default max tokens',
+  defaultInput: 'Default input modalities',
+  reasoning: 'Default reasoning level',
+  thinkingBudgets: 'Thinking budgets',
+  cacheRetention: 'Cache retention',
+  transport: 'Streaming transport',
+  timeoutMs: 'HTTP timeout (ms)',
+  websocketConnectTimeoutMs: 'WebSocket connect timeout (ms)',
+  streamIdleTimeoutMs: 'Stream idle timeout (ms)',
+  headers: 'Request headers',
+  headersHint: 'Key/value pairs; rows with an empty key are ignored.',
+  key: 'Key',
+  value: 'Value',
+  add: 'Add',
+  remove: 'Remove',
+  retryPolicy: 'Retry policy (JSON)',
+  retryPolicyHint: 'dsh-llm RetryPolicy shape; invalid JSON is not submitted.',
+  invalidJson: 'Invalid JSON (this field will not be submitted).',
+  compatGroup: 'Compat overrides',
+  compatApiHint: 'When api is unset, fields render per openai-completions; the backend validates per the effective protocol.',
+  compatUnset: 'Unset',
+  modelsGroup: 'Model catalog',
+  addModel: 'Add model',
+  deleteModel: 'Delete',
+  modelRow: 'Model',
+  modelId: 'Model id',
+  modelIdHint: 'The identifier sent to the provider; required.',
+  modelIdRequired: 'Model id is required.',
+  modelExtends: 'Inherits from',
+  modelExtendsHint: '"provider/model" or a bare model id (candidates from the catalog below).',
+  modelName: 'Display name',
+  contextWindow: 'Context window',
+  maxTokens: 'Max tokens',
+  input: 'Input modalities',
+  reasoningEfforts: 'reasoningEfforts',
+  nonReasoning: 'Non-reasoning model',
+  catalogSource: 'Candidate source',
+  catalogProvider: 'Candidate provider',
+  catalogLoading: 'Loading catalog…',
+  catalogFailed: 'Failed to load catalog.',
+  save: 'Save',
+  saving: 'Saving…',
+  discard: 'Discard',
+  unsaved: 'Unsaved',
+  saveOk: 'Saved.',
+  saveFailed: 'Save failed: ',
+  loading: 'Loading…',
+  readOnly: 'No settings provider in this deployment; edit settings.yaml instead.',
+  expand: 'Expand',
+  collapse: 'Collapse',
+  invalidNumber: 'Enter a valid number',
+}

package/src/client/styles.ts

@@ -0,0 +1,92 @@
+/**
+ * 配置卡片样式：沿用官方 data-plugin / data-plugin-css 约定（HMR 据此卸载），
+ * 视觉对齐官方卡片（--dsw-alias-* 变量），不覆盖上游任何选择器。
+ * @module llm-pi/client/styles
+ */
+
+export const PLUGIN_ID = '@dsh-plus/llm-pi'
+export const STYLE_TAG_ID = `${PLUGIN_ID}/card.css`
+
+export const cardCss = `
+.lpc-card{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-3);border-radius:12px;list-style:none;transition:border-color .16s,background .16s}
+.lpc-card:hover{border-color:var(--dsw-alias-label-dimmed)}
+.lpc-cardOpen{background:var(--dsw-alias-bg-layer-2);border-color:var(--dsw-alias-label-dimmed)}
+.lpc-header{appearance:none;width:100%;font:inherit;color:inherit;text-align:left;cursor:pointer;background:0 0;border:0;border-radius:12px;align-items:center;gap:12px;padding:14px 16px;display:flex}
+.lpc-header:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:-2px}
+.lpc-headText{flex-direction:column;flex:1;gap:4px;min-width:0;display:flex}
+.lpc-name{color:var(--dsw-alias-label-primary);font-size:15px;font-weight:600;line-height:1.4}
+.lpc-description{color:var(--dsw-alias-label-tertiary);font-size:13px;line-height:1.5}
+.lpc-chevron{color:var(--dsw-alias-label-tertiary);flex:none;transition:transform .16s;font-size:12px}
+.lpc-chevronOpen{transform:rotate(180deg)}
+.lpc-pending{white-space:nowrap;background:var(--dsw-alias-bg-module-platform);color:var(--dsw-alias-label-secondary);border-radius:999px;flex:none;padding:1px 8px;font-size:11px;font-weight:500;line-height:17px}
+.lpc-body{border-top:1px solid var(--dsw-alias-border-l2);margin:0 16px;padding-bottom:8px}
+.lpc-field{flex-direction:column;gap:6px;padding:12px 0;display:flex;min-width:0}
+.lpc-field+.lpc-field{border-top:1px solid var(--dsw-alias-border-l2)}
+.lpc-head{align-items:center;gap:8px;display:flex}
+.lpc-label{min-width:0;color:var(--dsw-alias-label-primary);flex:1;font-size:13px;font-weight:500;line-height:1.5}
+.lpc-input{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-3);height:34px;width:100%;box-sizing:border-box;font:inherit;color:var(--dsw-alias-label-primary);border-radius:8px;padding:0 12px;font-size:13px}
+.lpc-input:focus-visible{border-color:var(--dsw-alias-brand-primary);outline:none}
+.lpc-input:disabled{color:var(--dsw-alias-label-tertiary);cursor:default}
+.lpc-inputInvalid{border-color:var(--dsw-alias-label-error)}
+.lpc-select{appearance:none}
+.lpc-textarea{height:auto;min-height:72px;padding:8px 12px;line-height:1.5;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;resize:vertical}
+.lpc-hint{color:var(--dsw-alias-label-tertiary);margin:0;font-size:12px;line-height:1.5}
+.lpc-invalid{color:var(--dsw-alias-label-error);margin:0;font-size:12px;line-height:1.5}
+.lpc-checkRow{align-items:center;gap:8px;display:flex;padding:3px 0}
+.lpc-checkRow input{accent-color:var(--dsw-alias-brand-primary)}
+.lpc-checkRow label{color:var(--dsw-alias-label-primary);font-size:13px;line-height:1.5;cursor:pointer}
+.lpc-groupLabel{color:var(--dsw-alias-label-secondary);font-size:12px;font-weight:600;padding:14px 0 2px;margin:0}
+.lpc-readOnly{color:var(--dsw-alias-label-tertiary);margin:12px 0 0;font-size:12px;line-height:1.5}
+.lpc-statusRow{color:var(--dsw-alias-label-tertiary);margin:6px 0 0;font-size:12px;line-height:1.6;word-break:break-all}
+.lpc-footer{border-top:1px solid var(--dsw-alias-border-l2);justify-content:flex-end;align-items:center;gap:8px;padding:12px 0 4px;display:flex;flex-wrap:wrap}
+.lpc-status{min-width:0;color:var(--dsw-alias-label-secondary);flex:1;margin:0;font-size:12px;line-height:1.5}
+.lpc-statusError{color:var(--dsw-alias-label-error)}
+.lpc-btn{appearance:none;font:inherit;cursor:pointer;border:1px solid #0000;border-radius:8px;padding:5px 14px;font-size:13px;line-height:1.5;flex:none}
+.lpc-btnGhost{border-color:var(--dsw-alias-border-l2);color:var(--dsw-alias-label-secondary);background:0 0}
+.lpc-btnGhost:hover:not(:disabled){color:var(--dsw-alias-label-primary);border-color:var(--dsw-alias-label-dimmed)}
+.lpc-btnPrimary{background:var(--dsw-alias-label-primary);color:var(--dsw-alias-bg-layer-3)}
+.lpc-btn:disabled{opacity:.4;cursor:default}
+.lpc-btn:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:1px}
+.lpc-btnSmall{padding:2px 10px;font-size:12px}
+.lpc-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
+.lpc-gridNested{margin-top:2px}
+.lpc-wide{grid-column:1 / -1}
+.lpc-addRoute{display:flex;gap:8px;align-items:center;padding:10px 0}
+.lpc-addRoute .lpc-input{flex:1;min-width:0}
+.lpc-route{border:1px solid var(--dsw-alias-border-l2);border-radius:10px;margin:10px 0;background:var(--dsw-alias-bg-layer-3)}
+.lpc-routeHead{display:flex;align-items:center;gap:8px;padding:6px 10px}
+.lpc-routeToggle{appearance:none;background:0 0;border:0;font:inherit;color:inherit;cursor:pointer;display:flex;align-items:center;gap:8px;flex:1;min-width:0;text-align:left;padding:4px 0;border-radius:6px}
+.lpc-routeToggle:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:-2px}
+.lpc-routeKey{color:var(--dsw-alias-label-primary);font-size:13px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.lpc-routeApi{color:var(--dsw-alias-label-tertiary);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.lpc-routeBody{border-top:1px solid var(--dsw-alias-border-l2);margin:0 14px;padding-bottom:6px}
+.lpc-kvRow{display:flex;gap:8px;align-items:center}
+.lpc-kvRow .lpc-input{flex:1;min-width:0}
+.lpc-kvAdd{padding-top:8px}
+.lpc-modelRow{border:1px dashed var(--dsw-alias-border-l2);border-radius:10px;margin:10px 0;padding:0 14px;background:var(--dsw-alias-bg-layer-3)}
+.lpc-modelHead{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 0}
+.lpc-modelTitle{color:var(--dsw-alias-label-secondary);font-size:12px;font-weight:600}
+.lpc-catalogBar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:4px 0}
+.lpc-catalogLabel{color:var(--dsw-alias-label-tertiary);font-size:12px}
+.lpc-catalogSelect{width:auto;height:30px}
+.lpc-collapse{border-top:1px solid var(--dsw-alias-border-l2);margin:2px 0}
+.lpc-collapseHead{appearance:none;background:0 0;border:0;font:inherit;color:inherit;cursor:pointer;display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:10px 0;border-radius:6px}
+.lpc-collapseHead:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:-2px}
+.lpc-collapseTitle{color:var(--dsw-alias-label-secondary);font-size:12px;font-weight:600}
+.lpc-collapseBody{border-top:1px dashed var(--dsw-alias-border-l2);padding-bottom:6px}
+.lpc-refreshBtn{margin-left:8px;vertical-align:middle}
+`
+
+/** 幂等注入样式标签；返回标签（已存在或环境无 document 时为 null）。 */
+export function injectStyle(): HTMLStyleElement | null {
+  if (typeof document === 'undefined') return null
+  if (document.querySelector(`style[data-plugin-css=${JSON.stringify(STYLE_TAG_ID)}]`) !== null) {
+    return null
+  }
+  const tag = document.createElement('style')
+  tag.dataset.plugin = PLUGIN_ID
+  tag.dataset.pluginCss = STYLE_TAG_ID
+  tag.textContent = cardCss
+  document.head.appendChild(tag)
+  return tag
+}

package/src/client/views/compat.tsx

@@ -0,0 +1,104 @@
+/**
+ * compat 覆盖编辑器：按当前 api 渲染字段组（与服务端 compat.ts 字段表一致）。
+ * boolean → 三态下拉（未设置/true/false），枚举 → 下拉（含未设置），
+ * object → JSON 文本框（本地文本状态，合法时写入草稿，非法仅提示）。
+ * 未知/非法值由后端校验兜底（PUT 失败会返回校验明细）。
+ * @module llm-pi/client/views/compat
+ */
+import type { ReactElement } from 'react'
+
+import { COMPAT_FALLBACK_API, compatFieldSpec, compatFieldsOf } from '../constants.ts'
+import { CollapseSection, JsonField, SelectField } from '../fields.tsx'
+
+/** api 变更后裁剪 compat：只保留新渲染组的字段，避免保存时被后端拒绝。 */
+export function pruneCompatForApi(compat: Record<string, unknown>, api: string): Record<string, unknown> {
+  const group = api !== '' && compatFieldsOf(api).length > 0 ? api : COMPAT_FALLBACK_API
+  const fields = new Set(compatFieldsOf(group))
+  const next: Record<string, unknown> = {}
+  for (const [key, value] of Object.entries(compat)) {
+    if (fields.has(key)) next[key] = value
+  }
+  return next
+}
+
+export interface CompatEditorProps {
+  idPrefix: string
+  api: string
+  compat: Record<string, unknown>
+  epoch: number
+  disabled?: boolean
+  wide?: boolean
+  t(key: string): string
+  onEdit(next: Record<string, unknown>): void
+}
+
+export function CompatEditor(props: CompatEditorProps): ReactElement {
+  const effective = props.api !== '' && compatFieldsOf(props.api).length > 0 ? props.api : COMPAT_FALLBACK_API
+  const fields = compatFieldsOf(effective)
+  const setField = (field: string, value: unknown): void => {
+    const next = { ...props.compat }
+    if (value === undefined) delete next[field]
+    else next[field] = value
+    props.onEdit(next)
+  }
+  return (
+    <div className={`lpc-field lpc-wide`}>
+      <CollapseSection id={`${props.idPrefix}-collapse`} title={props.t('compatGroup')} defaultOpen={false}>
+        <>
+          {props.api === '' ? <p className="lpc-hint">{props.t('compatApiHint')}</p> : null}
+          <div className="lpc-grid">
+            {fields.map((field) => {
+              const spec = compatFieldSpec(effective, field)
+              if (spec === 'boolean') {
+                return (
+                  <SelectField
+                    key={field}
+                    id={`${props.idPrefix}-${field}`}
+                    label={field}
+                    value={props.compat[field] === undefined ? '' : String(props.compat[field])}
+                    options={['true', 'false']}
+                    unsetLabel={props.t('compatUnset')}
+                    disabled={props.disabled === true}
+                    onEdit={(value) => {
+                      if (value === '') setField(field, undefined)
+                      else setField(field, value === 'true')
+                    }}
+                  />
+                )
+              }
+              if (spec === 'object') {
+                return (
+                  <JsonField
+                    key={field}
+                    id={`${props.idPrefix}-${field}`}
+                    label={field}
+                    value={props.compat[field]}
+                    epoch={props.epoch}
+                    disabled={props.disabled === true}
+                    invalidText={props.t('invalidJson')}
+                    onEdit={(value) => setField(field, value)}
+                  />
+                )
+              }
+              return (
+                <SelectField
+                  key={field}
+                  id={`${props.idPrefix}-${field}`}
+                  label={field}
+                  value={props.compat[field] === undefined ? '' : String(props.compat[field])}
+                  options={spec}
+                  unsetLabel={props.t('compatUnset')}
+                  disabled={props.disabled === true}
+                  onEdit={(value) => {
+                    if (value === '') setField(field, undefined)
+                    else setField(field, value)
+                  }}
+                />
+              )
+            })}
+          </div>
+        </>
+      </CollapseSection>
+    </div>
+  )
+}