diff --git a/apps/web/tests/models-settings.e2e.ts b/apps/web/tests/models-settings.e2e.ts index d32bf21afc..28c423b0a0 100644 --- a/apps/web/tests/models-settings.e2e.ts +++ b/apps/web/tests/models-settings.e2e.ts @@ -1,10 +1,14 @@ // Web e2e scenario: the Models settings page end to end through the real -// wire — the dormant pi-ai directory renders as the add vocabulary, adding a -// provider writes the settings document and registers the route live (the -// row's 已启用 badge is the topology invalidation landing), and the key input -// stores a credential write-only into the harness home's .env. Zero model -// calls: configuration is pure settings/credentials/llm-domain traffic, so -// there is no fixture and a stray stream would fail loud on the open seam. +// wire — the add card offers the dormant pi-ai catalog, typing an API key +// stores it write-only under the derived reference (`MINIMAX_CN_API_KEY`) +// while the settings document records only that reference, and the saved +// route registers live (the row's 已启用 badge is the topology invalidation +// landing). The customized-settings fold writes the curated reasoning field +// as a merge patch. Zero model calls: configuration is pure +// settings/credentials/llm-domain traffic, so there is no fixture and a +// stray stream would fail loud on the open seam. The provider under test is +// minimax-cn so a developer's real ANTHROPIC/OPENAI environment keys can +// never shadow the derived reference. import { readFile } from 'node:fs/promises' import { fileURLToPath } from 'node:url' import { join } from 'node:path' @@ -42,7 +46,7 @@ describe('web e2e: Models settings page configures a dormant provider', () => { await scaffold?.close() }) - it('renders the dormant directory as the add vocabulary', async () => { + it('opens the add card over the dormant directory vocabulary', async () => { onTestFailed(() => saveFailureShot(page, 'web-e2e-models-empty')) await page.getByRole('button', { name: '设置', exact: true }).click() const dialog = page.getByRole('dialog', { name: '设置' }) @@ -50,60 +54,59 @@ describe('web e2e: Models settings page configures a dormant provider', () => { await dialog.getByRole('button', { name: '模型' }).click() await dialog.getByText('填入各提供方的 API 密钥即可使用其模型。').waitFor({ timeout: 10_000 }) // The dormant pi-ai adapter contributes its whole installed catalog; no - // provider is configured yet, so the page is one add-select. - const add = dialog.getByLabel('添加提供方') + // provider is configured yet, so the page is one add button. + const add = dialog.getByRole('button', { name: '+ 添加提供方' }) await add.waitFor({ timeout: 10_000 }) - // The select renders before the directory join settles; poll until the - // dormant catalog landed. - await expect.poll(async () => add.locator('option').count(), { timeout: 10_000 }).toBeGreaterThan(30) - const options = await add.locator('option').allTextContents() + // The button enables once the dormant catalog lands in the join. + await expect.poll(async () => add.isEnabled(), { timeout: 10_000 }).toBe(true) + await add.click() + const pick = dialog.getByLabel('提供方') + await pick.waitFor({ timeout: 10_000 }) + await expect.poll(async () => pick.locator('option').count(), { timeout: 10_000 }).toBeGreaterThan(30) + const options = await pick.locator('option').allTextContents() expect(options).toContain('anthropic') - expect(options).toContain('openai') + expect(options).toContain('minimax-cn') + await pick.selectOption('minimax-cn') + await dialog.getByLabel('API 密钥').waitFor({ timeout: 10_000 }) const snapshot = await captureStableAria(page, '[role="dialog"]', scaffold.workspaceCwd) await compareOrRefreshGolden(EMPTY_EXPECTED, snapshot, MODE) }, 60_000) - it('adds a provider through the schema-driven editor and the route registers live', async () => { + it('stores the key under the derived reference and the route registers live', async () => { onTestFailed(() => saveFailureShot(page, 'web-e2e-models-add')) const dialog = page.getByRole('dialog', { name: '设置' }) - await dialog.getByLabel('添加提供方').selectOption('anthropic') - // The editor is the real pi-ai profile schema rendered field by field; - // the credential-reference control is the role-tagged override. - const ref = dialog.getByLabel('API 密钥环境变量') - await ref.waitFor({ timeout: 10_000 }) - // A test-owned reference name keeps this hermetic: a developer's real - // ANTHROPIC_API_KEY in the process environment must not flip the badge. - await ref.fill('E2E_ANTHROPIC_KEY') + await dialog.getByLabel('API 密钥').fill('sk-e2e-minimax') await dialog.getByRole('button', { name: '保存', exact: true }).click() - // The write lands in settings.yaml, the dormant route registers, the - // topology frame invalidates the page, and the reloaded join shows the - // row live with its credential still missing. - const row = dialog.getByText('anthropic', { exact: true }).first() + // The profile lands in settings.yaml with only the derived reference, the + // key value lands in the harness home's .env, the dormant route + // registers, and the topology frame invalidates the page into the row. + const row = dialog.getByText('minimax-cn', { exact: true }).first() await row.waitFor({ timeout: 10_000 }) await dialog.getByText('已启用').waitFor({ timeout: 10_000 }) - await dialog.getByText('缺少密钥').waitFor({ timeout: 10_000 }) const document = await readFile(join(scaffold.harnessHome, 'settings.yaml'), 'utf8') - expect(document).toContain('llm-pi-ai:') - expect(document).toContain('anthropic:') - expect(document).toContain('apiKeyEnv: E2E_ANTHROPIC_KEY') + expect(document).toContain('minimax-cn:') + expect(document).toContain('apiKeyEnv: MINIMAX_CN_API_KEY') + expect(document).not.toContain('sk-e2e-minimax') + const stored = await readFile(join(scaffold.harnessHome, '.env'), 'utf8') + expect(stored).toContain('MINIMAX_CN_API_KEY=sk-e2e-minimax') + expect(await page.content()).not.toContain('sk-e2e-minimax') }, 60_000) - it('stores the API key write-only and the badge flips configured', async () => { - onTestFailed(() => saveFailureShot(page, 'web-e2e-models-key')) + it('applies a customized-settings field as a merge patch', async () => { + onTestFailed(() => saveFailureShot(page, 'web-e2e-models-customized')) const dialog = page.getByRole('dialog', { name: '设置' }) await dialog.getByRole('button', { name: '编辑' }).click() - const key = dialog.getByLabel('API 密钥', { exact: true }) - await key.waitFor({ timeout: 10_000 }) - await key.fill('sk-ant-e2e-test') - await dialog.getByRole('button', { name: '保存密钥' }).click() - await dialog.getByText('已配置', { exact: true }).waitFor({ timeout: 10_000 }) - // The value went to the harness home's .env — and nowhere in the DOM. - const stored = await readFile(join(scaffold.harnessHome, '.env'), 'utf8') - expect(stored).toContain('E2E_ANTHROPIC_KEY=sk-ant-e2e-test') - expect(await page.content()).not.toContain('sk-ant-e2e-test') - await dialog.getByRole('button', { name: '取消' }).click() - // The row badge converges from the credentials invalidation. - await expect.poll(async () => dialog.getByText('缺少密钥').count(), { timeout: 10_000 }).toBe(0) + await dialog.getByText('自定义设置').click() + const effort = dialog.getByLabel('推理强度') + await effort.waitFor({ timeout: 10_000 }) + await effort.selectOption('high') + await dialog.getByRole('button', { name: '保存', exact: true }).click() + // The editor closes back to the row; the fold's write merged into the + // stored profile beside the reference. + await expect.poll(async () => dialog.getByLabel('推理强度').count(), { timeout: 10_000 }).toBe(0) + const document = await readFile(join(scaffold.harnessHome, 'settings.yaml'), 'utf8') + expect(document).toContain('reasoning: high') + expect(document).toContain('apiKeyEnv: MINIMAX_CN_API_KEY') const snapshot = await captureStableAria(page, '[role="dialog"]', scaffold.workspaceCwd) await compareOrRefreshGolden(CONFIGURED_EXPECTED, snapshot, MODE) await page.keyboard.press('Escape') diff --git a/apps/web/tests/snapshots/models-settings/configured.expected.md b/apps/web/tests/snapshots/models-settings/configured.expected.md index 6aa642a428..8b9c4ad6e1 100644 --- a/apps/web/tests/snapshots/models-settings/configured.expected.md +++ b/apps/web/tests/snapshots/models-settings/configured.expected.md @@ -14,44 +14,7 @@ - paragraph: 填入各提供方的 API 密钥即可使用其模型。 - list: - listitem: - - text: anthropic 已启用 + - text: minimax-cn 已启用 - button "编辑" - button "删除" - - combobox "添加提供方": - - option "+ 添加提供方" [selected] - - option "amazon-bedrock" - - option "ant-ling" - - option "azure-openai-responses" - - option "cerebras" - - option "cloudflare-ai-gateway" - - option "cloudflare-workers-ai" - - option "deepseek" - - option "fireworks" - - option "github-copilot" - - option "google" - - option "google-vertex" - - option "groq" - - option "huggingface" - - option "kimi-coding" - - option "minimax" - - option "minimax-cn" - - option "mistral" - - option "moonshotai" - - option "moonshotai-cn" - - option "nvidia" - - option "openai" - - option "openai-codex" - - option "opencode" - - option "opencode-go" - - option "openrouter" - - option "qwen-token-plan" - - option "qwen-token-plan-cn" - - option "together" - - option "vercel-ai-gateway" - - option "xai" - - option "xiaomi" - - option "xiaomi-token-plan-ams" - - option "xiaomi-token-plan-cn" - - option "xiaomi-token-plan-sgp" - - option "zai" - - option "zai-coding-cn" + - button "+ 添加提供方" diff --git a/apps/web/tests/snapshots/models-settings/empty.expected.md b/apps/web/tests/snapshots/models-settings/empty.expected.md index da66c40743..ffea707bd0 100644 --- a/apps/web/tests/snapshots/models-settings/empty.expected.md +++ b/apps/web/tests/snapshots/models-settings/empty.expected.md @@ -13,8 +13,8 @@ - heading "模型" [level=2] - paragraph: 填入各提供方的 API 密钥即可使用其模型。 - list - - combobox "添加提供方": - - option "+ 添加提供方" [selected] + - text: 提供方 + - combobox "提供方": - option "amazon-bedrock" - option "ant-ling" - option "anthropic" @@ -31,7 +31,7 @@ - option "huggingface" - option "kimi-coding" - option "minimax" - - option "minimax-cn" + - option "minimax-cn" [selected] - option "mistral" - option "moonshotai" - option "moonshotai-cn" @@ -52,3 +52,9 @@ - option "xiaomi-token-plan-sgp" - option "zai" - option "zai-coding-cn" + - text: API 密钥 + - textbox "API 密钥": + - /placeholder: 输入 API 密钥 + - group: 自定义设置 + - button "取消" + - button "保存" diff --git a/packages/client/schema-form/README.i18n.yaml b/packages/client/schema-form/README.i18n.yaml index 06f3f5f6f1..522b7a8ddf 100644 --- a/packages/client/schema-form/README.i18n.yaml +++ b/packages/client/schema-form/README.i18n.yaml @@ -2,5 +2,5 @@ # side as of the last confirmed-consistent state. Both languages carry equal authority; # after editing either side, bring the other along and re-record with: # pnpm run verify-translation-pairing --write packages/client/schema-form/README.md -README.md: d6819ccf29cf58667d518c43c43b875eb20e02e9 -README.zh.md: 2f2e07d41db2af5f0afc3352072e7d49129ce6f2 +README.md: 23e69f80914b400a77c036192f564d32bc148310 +README.zh.md: b26593d971d0c53d1fd8d0778200914a90b9b891 diff --git a/packages/client/schema-form/README.md b/packages/client/schema-form/README.md index d6819ccf29..23e69f8091 100644 --- a/packages/client/schema-form/README.md +++ b/packages/client/schema-form/README.md @@ -2,21 +2,15 @@ English | [中文](README.zh.md) -Schema-driven React form renderer for settings sections. The wire's `settings.describe` carries each namespace's serialized schemastery schema (`schema.toJSON()` ref envelope); `SchemaForm` rehydrates it with `new Schema(json)` and renders every declared field as an editable control — the same schema object that validates a section on the host validates and drives the form in the browser, so there is no second form definition to drift. +Schema/draft model layer for settings editors. The wire's `settings.describe` carries each namespace's serialized schemastery schema (`schema.toJSON()` ref envelope); `rehydrateSchema` turns it back into a live validator with `new Schema(json)` — the same schema object that validates a section on the host validates drafts in the browser, so client-side validation never drifts from the seam's. Editors render their own controls (the Models page hand-writes its card around the fields it probes here); this package owns no React and no rendering. ## Contract -`SchemaForm` is a controlled component over a **draft user section**: `draft` is the object being edited (never mutated; every edit calls `onChange` with a new root), and `fallback` is the resolved value (schema defaults → composition base → user layer) used for inherited display. A field's presence in the draft marks it **overridden** and shows a per-field Reset that deletes the key, falling back to the inherited layer — presence semantics, not value comparison, exactly mirroring the settings seam's layering. - -Controls by schema node: `object` → labeled field groups (JSDoc `description` rendered, `required` starred), `string`/`number`/`boolean` → inputs with the inherited value as placeholder, `union` of literals → select whose empty option means "inherit", `array` → positional rows with add/remove (arrays replace wholesale on write), `dict` → keyed rows where a union-typed `sKey` becomes the add-select's vocabulary. `role('secret')` renders a **write-only** password input: the stored value never arrives (the wire strips it), and the `secrets` slot list (`{path, set}`) supplies the placeholder state. A node the renderer cannot faithfully edit (non-literal unions, transforms) renders a read-only JSON view with a notice instead of disappearing — a schema field is never silently dropped. - -`renderField(context)` is the role-aware override hook: return a node to replace the default control for one leaf. The Models settings page uses it to mount the credential-reference control (`role('credential-ref')`) that talks to `credentials.*` — this package stays wire-free and side-effect-free. - -`validateDraft(schema, draft)` runs the rehydrated validator and returns its failure message, letting pages validate before writing; the path helpers (`getPath`/`hasPath`/`setPath`/`deletePath`) expose the same immutable draft editing the controls use. +The unit of editing is a **draft user section**: a plain object edited immutably (`setPath` materializes intermediates, `deletePath` is the per-field reset — dropping the key falls the resolved value back to the composition base and schema defaults). A field's presence in the draft marks it **overridden** (`hasPath`) — presence semantics, not value comparison, exactly mirroring the settings seam's layering. `nodeAtPath` resolves the schema node addressed by a configurable-provider directory `settingsPath` (object properties by name, dict entries through `inner`), so an editor can probe which fields a provider's profile carries (and their `meta.role`) before deciding what to render; an unresolvable path returns `undefined` so the caller degrades loudly instead of rendering a wrong subtree. `validateDraft(schema, draft)` runs the rehydrated validator and returns its failure message, letting pages reject an invalid draft before writing. ## Model Experience -None, as this package renders browser configuration forms; nothing here reaches a model request. +None, as this package backs browser configuration editors; nothing here reaches a model request. #### KV Cache effect @@ -24,7 +18,5 @@ None; this package neither assembles nor sends a provider request. ## Known Limitations and Deferred Work -- **Validation is form-level, not per-field** — `validateDraft` reports schemastery's first failure message (which names the `$.path`); inline per-field error placement is deferred until a second consumer needs it. -- **Strings are built-in English** — the `labels` prop overrides every user-visible string, but there is no locale-dictionary wiring inside this package; the embedding page owns localization. -- **Non-literal unions and transforms render read-only** — faithful editing of those shapes needs per-shape controls; today they fall back to the JSON view with a notice. -- **Array editing replaces wholesale** — element-level merge does not exist at the settings seam either; the form mirrors that contract rather than hiding it. +- **Validation is draft-level, not per-field** — `validateDraft` reports schemastery's first failure message (which names the `$.path`); per-field error mapping is deferred until a consumer needs it. +- **No generic renderer** — a schema-driven form component was built and then replaced by the hand-written Models editor ([Agent Note](../../../.agents/notes/implemented/architecture/2026-07-30-web-config-plane.md)); if a future page needs to edit arbitrary sections, it starts from these helpers, not from a resurrected generic renderer, unless the note's trade-off changes. diff --git a/packages/client/schema-form/README.zh.md b/packages/client/schema-form/README.zh.md index 2f2e07d41d..b26593d971 100644 --- a/packages/client/schema-form/README.zh.md +++ b/packages/client/schema-form/README.zh.md @@ -2,21 +2,15 @@ [English](README.md) | 中文 -面向 settings 分节的 schema 驱动 React 表单渲染器。wire 侧的 `settings.describe` 携带每个 namespace 的序列化 schemastery schema（`schema.toJSON()` 的 ref 信封）；`SchemaForm` 用 `new Schema(json)` 将其还原（rehydrate），并把每个已声明的字段渲染为可编辑控件——在宿主上校验分节的那份 schema 对象，就是在浏览器里校验并驱动表单的那份对象，因此不存在第二份会漂移的表单定义。 +面向 settings 编辑器的 schema／草稿模型层。wire 侧的 `settings.describe` 携带每个 namespace 的序列化 schemastery schema（`schema.toJSON()` 的 ref 信封）；`rehydrateSchema` 用 `new Schema(json)` 将其还原（rehydrate）为活的校验器——在宿主上校验分节的那份 schema 对象，就是在浏览器里校验草稿的那份对象，因此客户端校验绝不会偏离 seam 侧的校验。编辑器各自渲染自己的控件（Models 页围绕它在此探测到的字段手写自己的卡片）；该包（package）不含任何 React，也不做任何渲染。 ## 契约 -`SchemaForm` 是围绕**用户分节草稿**的受控组件：`draft` 是正在编辑的对象（绝不被原地修改；每次编辑都以新的根对象调用 `onChange`），`fallback` 则是用于展示继承值的解析值（schema 默认值 → 组合 base → 用户层）。字段只要出现在草稿中就被标记为**已覆盖**，并显示一个删除该键、回退到继承层的逐字段 Reset——判定采用存在性语义而非值比较，与 settings seam 的分层方式严格对应。 - -控件按 schema 节点分派：`object` → 带标签的字段组（渲染 JSDoc `description`，`required` 字段加星标）；`string`/`number`/`boolean` → 以继承值为占位符的输入框；字面量 `union` → 下拉框，空选项表示「继承」；`array` → 按位置排列、可增删的行（数组在写入时整体替换）；`dict` → 按键排列的行，其中联合类型的 `sKey` 成为「新增」下拉框的词汇。`role('secret')` 渲染为**只写**的密码输入框：已存储的值永远不会送达（wire 会剥除它），占位状态由 `secrets` 槽位列表（`{path, set}`）提供。渲染器无法忠实编辑的节点（非字面量联合、转换（transform）节点）渲染为带提示的只读 JSON 视图，而不是直接消失——schema 字段绝不会被静默丢弃。 - -`renderField(context)` 是感知角色的覆盖钩子：返回一个节点，即可替换单个叶子字段的默认控件。Models 设置页用它挂载与 `credentials.*` 通信的凭据引用控件（`role('credential-ref')`）——该包（package）自身始终不接触 wire，也没有副作用。 - -`validateDraft(schema, draft)` 运行还原出的校验器并返回其失败消息，页面因此可以先校验再写入；路径辅助函数（`getPath`/`hasPath`/`setPath`/`deletePath`）对外暴露的不可变草稿编辑，与控件内部使用的是同一套。 +编辑的单元是**用户分节草稿**：一个以不可变方式编辑的普通对象（`setPath` 会物化中间对象，`deletePath` 即逐字段重置——去掉该键，解析值便回退到组合 base 与 schema 默认值）。字段只要出现在草稿中就被标记为**已覆盖**（`hasPath`）——判定采用存在性语义而非值比较，与 settings seam 的分层方式严格对应。`nodeAtPath` 解析可配置提供方目录 `settingsPath` 所寻址的 schema 节点（object 属性按名称解析，dict 条目经由 `inner`），编辑器因此可以在决定渲染什么之前，先探测某提供方的 profile 携带哪些字段（及其 `meta.role`）；无法解析的路径返回 `undefined`，调用方因此会大声降级，而不是渲染出错误的子树。`validateDraft(schema, draft)` 运行还原出的校验器并返回其失败消息，页面因此可以在写入前拒绝无效草稿。 ## Model Experience -无。该包渲染的是浏览器配置表单；这里没有任何内容进入模型请求。 +无。该包支撑的是浏览器配置编辑器；这里没有任何内容进入模型请求。 #### KV Cache effect @@ -24,7 +18,5 @@ ## Known Limitations and Deferred Work -- **校验是表单级的，而非逐字段**——`validateDraft` 报告 schemastery 的第一条失败消息（其中会点名 `$.path`）；逐字段的内联报错展示延后到出现需要它的第二个消费方再做。 -- **字符串内置为英文**——`labels` prop 可以覆盖每一条用户可见字符串，但包内没有接入语言环境词典的接线；本地化归嵌入它的页面所有。 -- **非字面量联合与转换节点只读渲染**——忠实编辑这些形状需要逐形状的控件；目前它们回退为带提示的 JSON 视图。 -- **数组编辑整体替换**——settings seam 同样不存在元素级合并；表单如实呈现该契约，而不是把它藏起来。 +- **校验是草稿级的，而非逐字段**——`validateDraft` 报告 schemastery 的第一条失败消息（其中会点名 `$.path`）；逐字段的报错映射延后到出现需要它的消费方再做。 +- **没有通用渲染器**——一个 schema 驱动的表单组件曾被构建出来，随后被手写的 Models 编辑器取代（[Agent Note（agent 决策记录）](../../../.agents/notes/implemented/architecture/2026-07-30-web-config-plane.md)）；若未来有页面需要编辑任意分节，起点是这些辅助函数，而不是复活后的通用渲染器——除非该 note 的权衡发生变化。 diff --git a/packages/client/schema-form/package.json b/packages/client/schema-form/package.json index af03b9c8b0..175133894a 100644 --- a/packages/client/schema-form/package.json +++ b/packages/client/schema-form/package.json @@ -1,6 +1,6 @@ { "name": "@deepseek-ai/dsh-client-schema-form", - "description": "Schema-driven React form renderer: rehydrates a serialized schemastery schema and renders/edits a settings draft against it", + "description": "Schema/draft model layer for settings editors: rehydrates a serialized schemastery schema, validates drafts, and edits them immutably by path", "version": "0.0.1", "private": true, "type": "module", @@ -20,7 +20,6 @@ }, "license": "BSD-3-Clause", "dependencies": { - "react": "^18.2.0", "schemastery": "^3.18.0" }, "peerDependencies": { @@ -29,7 +28,6 @@ }, "devDependencies": { "@deepseek-ai/dsh-invariants": "workspace:^", - "@types/react": "~18.3.1", "cordis": "^4.0.0-rc.7" }, "files": [ diff --git a/packages/client/schema-form/src/SchemaForm.module.css b/packages/client/schema-form/src/SchemaForm.module.css deleted file mode 100644 index 42c2a4c22e..0000000000 --- a/packages/client/schema-form/src/SchemaForm.module.css +++ /dev/null @@ -1,99 +0,0 @@ -.fields { - display: flex; - flex-direction: column; - gap: 14px; -} - -.field { - display: flex; - flex-direction: column; - gap: 4px; -} - -.field.group { - border: 1px solid var(--border, #e2e2e2); - border-radius: 10px; - padding: 12px; -} - -.labelRow { - display: flex; - align-items: center; - justify-content: space-between; - gap: 8px; -} - -.label { - font-size: 13px; - font-weight: 500; - color: var(--text-secondary, #555); -} - -.description { - margin: 0; - font-size: 12px; - color: var(--text-tertiary, #888); -} - -.control { - width: 100%; - box-sizing: border-box; - padding: 8px 10px; - border: 1px solid var(--border, #d9d9d9); - border-radius: 8px; - font: inherit; - background: var(--surface, #fff); - color: inherit; -} - -.control:focus { - outline: 2px solid var(--accent, #3964fe); - outline-offset: -1px; -} - -.resetButton { - border: none; - background: none; - color: var(--accent, #3964fe); - font-size: 12px; - cursor: pointer; - padding: 0; -} - -.stack { - display: flex; - flex-direction: column; - gap: 8px; -} - -.row { - display: flex; - align-items: center; - gap: 8px; -} - -.row > :first-child { - flex: 1; -} - -.dictKey { - min-width: 96px; - font-size: 13px; - font-weight: 500; -} - -.unsupported { - display: flex; - flex-direction: column; - gap: 4px; - font-size: 12px; - color: var(--text-tertiary, #888); -} - -.unsupported pre { - margin: 0; - padding: 8px; - border-radius: 8px; - background: var(--surface-sunken, #f5f5f5); - overflow-x: auto; -} diff --git a/packages/client/schema-form/src/SchemaForm.tsx b/packages/client/schema-form/src/SchemaForm.tsx deleted file mode 100644 index 45bd62f506..0000000000 Binary files a/packages/client/schema-form/src/SchemaForm.tsx and /dev/null differ diff --git a/packages/client/schema-form/src/css-modules.d.ts b/packages/client/schema-form/src/css-modules.d.ts deleted file mode 100644 index bc5e482353..0000000000 --- a/packages/client/schema-form/src/css-modules.d.ts +++ /dev/null @@ -1,6 +0,0 @@ -declare module '*.module.css' { - const classes: Record - export default classes -} - -declare module '*.css' diff --git a/packages/client/schema-form/src/index.ts b/packages/client/schema-form/src/index.ts index d01b55f872..3a8c35edcb 100644 --- a/packages/client/schema-form/src/index.ts +++ b/packages/client/schema-form/src/index.ts @@ -1,16 +1,12 @@ /** - * Schema-driven React form renderer for settings sections. `SchemaForm` - * rehydrates the wire's serialized schemastery envelope and edits a draft - * user section against it; the model helpers expose the same introspection - * and immutable path editing for page-level composition. + * Schema/draft model layer for settings editors: rehydrate the wire's + * serialized schemastery envelope, resolve nodes by settings path, validate + * drafts, and edit them immutably by path. Editors render their own controls + * (the Models page hand-writes its layout) on top of these helpers. * @module @deepseek-ai/dsh-client-schema-form */ -export { SchemaForm } from './SchemaForm.tsx' -export type { - SchemaFieldContext, SchemaFormLabels, SchemaFormProps, SchemaFormSecret, -} from './SchemaForm.tsx' export { - deletePath, getPath, hasPath, nodeAtPath, nodeKind, rehydrateSchema, setPath, unionChoices, validateDraft, + deletePath, getPath, hasPath, nodeAtPath, rehydrateSchema, setPath, validateDraft, } from './model.ts' -export type { NodeKind, SchemaNode } from './model.ts' +export type { SchemaNode } from './model.ts' diff --git a/packages/client/schema-form/src/invariant.ts b/packages/client/schema-form/src/invariant.ts index ffb435b4cf..f60f951fb5 100644 --- a/packages/client/schema-form/src/invariant.ts +++ b/packages/client/schema-form/src/invariant.ts @@ -15,10 +15,10 @@ export const name = 'client-schema-form-invariant' export const inject = ['invariants'] /** - * No runtime invariant: a pure React rendering library — it emits no cordis - * events and owns no cross-plugin mutable relation; draft immutability, - * schema rehydration, and control/edit round trips are asserted directly by - * this package's component and model specs. + * No runtime invariant: a pure schema/draft helper library — it emits no + * cordis events and owns no cross-plugin mutable relation; draft + * immutability, schema rehydration, and path-edit round trips are asserted + * directly by this package's model specs. */ const install: InvariantInstaller = () => {} diff --git a/packages/client/schema-form/src/model.ts b/packages/client/schema-form/src/model.ts index 4c695d0b67..5377012141 100644 --- a/packages/client/schema-form/src/model.ts +++ b/packages/client/schema-form/src/model.ts @@ -1,8 +1,8 @@ /** - * Schema introspection and draft-editing helpers behind the form renderer. + * Schema introspection and draft-editing helpers behind settings editors. * The serialized schemastery envelope (`schema.toJSON()`) rehydrates into a - * live validator whose node relations (`dict`/`inner`/`list`) the renderer - * walks; drafts are edited immutably by path. + * live validator whose node relations (`dict`/`inner`) editors probe for + * field presence and roles; drafts are edited immutably by path. * @module @deepseek-ai/dsh-client-schema-form/model */ @@ -35,49 +35,6 @@ export function validateDraft(schema: SchemaNode, draft: unknown): string | unde } } -/** The renderable classification of one schema node. */ -export type NodeKind = - | 'object' - | 'dict' - | 'array' - | 'string' - | 'number' - | 'boolean' - | 'union-const' - | 'unsupported' - -/** - * Classify one node into the renderer's vocabulary. A union renders as a - * select only when every branch is a literal; everything else the renderer - * cannot faithfully edit is `unsupported` and falls back to a read-only view - * (never silently dropped). - * @param node - live schema node. - * @returns the control family for this node. - */ -export function nodeKind(node: SchemaNode): NodeKind { - switch (node.type) { - case 'object': return 'object' - case 'dict': return 'dict' - case 'array': return 'array' - case 'string': return 'string' - case 'number': return 'number' - case 'boolean': return 'boolean' - case 'union': - return (node.list ?? []).every(branch => branch.type === 'const') ? 'union-const' : 'unsupported' - default: - return 'unsupported' - } -} - -/** - * Literal choices of a `union-const` node, in declaration order. - * @param node - a node classified `union-const`. - * @returns each branch's literal value. - */ -export function unionChoices(node: SchemaNode): unknown[] { - return (node.list ?? []).map(branch => (branch as { value?: unknown }).value) -} - /** * Resolve the schema node at a settings path (the configurable-provider * directory's `settingsPath` vocabulary): object properties by name, dict diff --git a/packages/client/schema-form/tests/model.spec.ts b/packages/client/schema-form/tests/model.spec.ts index 2b2eb5aeba..81e81e1992 100644 --- a/packages/client/schema-form/tests/model.spec.ts +++ b/packages/client/schema-form/tests/model.spec.ts @@ -1,7 +1,7 @@ import { describe, expect, it } from 'vitest' import Schema from 'schemastery' import { - deletePath, getPath, hasPath, nodeAtPath, nodeKind, rehydrateSchema, setPath, unionChoices, validateDraft, + deletePath, getPath, hasPath, nodeAtPath, rehydrateSchema, setPath, validateDraft, } from '../src/model.ts' const Wire = (schema: Schema): unknown => JSON.parse(JSON.stringify(schema.toJSON())) @@ -21,33 +21,6 @@ describe('rehydration and validation', () => { }) }) -describe('nodeKind', () => { - it.each([ - [Schema.object({}), 'object'], - [Schema.dict(Schema.string()), 'dict'], - [Schema.array(Schema.string()), 'array'], - [Schema.string(), 'string'], - [Schema.number(), 'number'], - [Schema.natural(), 'number'], - [Schema.boolean(), 'boolean'], - [Schema.union(['a', 'b']), 'union-const'], - [Schema.union([Schema.string(), Schema.number()]), 'unsupported'], - [Schema.transform(Schema.string(), value => value), 'unsupported'], - ])('classifies %#', (schema, expected) => { - expect(nodeKind(rehydrateSchema(Wire(schema as Schema)))).toBe(expected) - }) - - it('lists union choices in declaration order', () => { - const node = rehydrateSchema(Wire(Schema.union(['off', 'high', 'max']))) - expect(unionChoices(node)).toEqual(['off', 'high', 'max']) - }) - - it('tolerates structural union nodes missing their branch list', () => { - expect(nodeKind({ type: 'union', meta: {} } as never)).toBe('union-const') - expect(unionChoices({ type: 'union', meta: {} } as never)).toEqual([]) - }) -}) - describe('path helpers', () => { const root = { providers: { openai: { baseURL: 'https://x' } }, models: [{ id: 'a' }] } diff --git a/packages/client/schema-form/tests/schema-form.spec.tsx b/packages/client/schema-form/tests/schema-form.spec.tsx deleted file mode 100644 index b836daf4b3..0000000000 --- a/packages/client/schema-form/tests/schema-form.spec.tsx +++ /dev/null @@ -1,346 +0,0 @@ -// @vitest-environment jsdom -import { cleanup, fireEvent, render, screen } from '@testing-library/react' -import { afterEach, describe, expect, it, vi } from 'vitest' -import Schema from 'schemastery' -import { SchemaForm } from '../src/index.ts' - -afterEach(cleanup) - -const Wire = (schema: Schema): unknown => JSON.parse(JSON.stringify(schema.toJSON())) - -const Profile = Schema.object({ - apiKey: Schema.string().role('secret'), - apiKeyEnv: Schema.string().role('credential-ref'), - baseURL: Schema.string().description('Endpoint override'), - reasoning: Schema.union(['off', 'high', 'max']), - timeoutMs: Schema.number().min(0).max(1000).step(1), - verbose: Schema.boolean(), - name: Schema.string().required(), -}) - -function lastDraft(onChange: ReturnType): Record { - return onChange.mock.calls.at(-1)?.[0] as Record -} - -describe('leaf controls', () => { - it('renders strings with inherited placeholders, writes on input, clears on empty', () => { - const onChange = vi.fn() - render() - const input = screen.getByDisplayValue('https://mine') - fireEvent.change(input, { target: { value: 'https://next' } }) - expect(lastDraft(onChange)).toEqual({ baseURL: 'https://next' }) - fireEvent.change(input, { target: { value: '' } }) - expect(lastDraft(onChange)).toEqual({}) - const inherited = screen.getByPlaceholderText('Default: https://base') - expect(inherited).toBeTruthy() - }) - - it('renders numbers with bounds and parses edits', () => { - const onChange = vi.fn() - const { container } = render() - const input = container.querySelector('input[type="number"]') as HTMLInputElement - expect(input.placeholder).toBe('Default: 500') - expect(input.min).toBe('0') - expect(input.max).toBe('1000') - fireEvent.change(input, { target: { value: '250' } }) - expect(lastDraft(onChange)).toEqual({ timeoutMs: 250 }) - }) - - it('clears a number override back to inherited on empty input', () => { - const onChange = vi.fn() - const { container } = render() - const input = container.querySelector('input[type="number"]') as HTMLInputElement - expect(input.value).toBe('250') - fireEvent.change(input, { target: { value: '' } }) - expect(lastDraft(onChange)).toEqual({}) - }) - - it('prefers an overridden boolean over the fallback', () => { - const { container } = render() - const box = container.querySelector('input[type="checkbox"]') as HTMLInputElement - expect(box.checked).toBe(false) - }) - - it('reflects booleans from the fallback until overridden', () => { - const onChange = vi.fn() - const { container } = render() - const box = container.querySelector('input[type="checkbox"]') as HTMLInputElement - expect(box.checked).toBe(true) - fireEvent.click(box) - expect(lastDraft(onChange)).toEqual({ verbose: false }) - }) - - it('renders literal unions as selects with an inherit option', () => { - const onChange = vi.fn() - const { container } = render() - const select = container.querySelector('select') as HTMLSelectElement - expect([...select.options].map(option => option.text)).toEqual(['Default: high', 'off', 'high', 'max']) - fireEvent.change(select, { target: { value: 'max' } }) - expect(lastDraft(onChange)).toEqual({ reasoning: 'max' }) - }) - - it('clears a union override back to inherit', () => { - const onChange = vi.fn() - const { container } = render() - const select = container.querySelector('select') as HTMLSelectElement - expect(select.value).toBe('max') - fireEvent.change(select, { target: { value: '' } }) - expect(lastDraft(onChange)).toEqual({}) - }) - - it('marks required fields and surfaces descriptions', () => { - render() - expect(screen.getByText('Endpoint override')).toBeTruthy() - expect(screen.getByText('name').textContent).toContain('name') - expect(screen.getByText('*')).toBeTruthy() - }) - - it('shows the per-field reset only for overridden fields and deletes on click', () => { - const onChange = vi.fn() - render() - const resets = screen.getAllByText('Reset') - expect(resets).toHaveLength(1) - fireEvent.click(resets[0] as HTMLElement) - expect(lastDraft(onChange)).toEqual({}) - }) -}) - -describe('secrets and custom renderers', () => { - it('renders secrets write-only with the stored-state placeholder', () => { - const onChange = vi.fn() - const { container } = render() - const input = container.querySelector('input[type="password"]') as HTMLInputElement - expect(input.placeholder).toBe('Configured — enter a new value to replace') - expect(input.value).toBe('') - fireEvent.change(input, { target: { value: 'sk-new' } }) - expect(lastDraft(onChange)).toEqual({ apiKey: 'sk-new' }) - }) - - it('clears a typed-but-unsaved secret back to unset', () => { - const onChange = vi.fn() - const { container } = render() - const input = container.querySelector('input[type="password"]') as HTMLInputElement - expect(input.value).toBe('sk-draft') - fireEvent.change(input, { target: { value: '' } }) - expect(lastDraft(onChange)).toEqual({}) - }) - - it('reports an unset secret slot', () => { - const { container } = render() - const input = container.querySelector('input[type="password"]') as HTMLInputElement - expect(input.placeholder).toBe('Not configured') - }) - - it('lets renderField replace a role-tagged control', () => { - render( { - if (context.role !== 'credential-ref') return undefined - return
{String(context.draftValue)}
- }} - />) - expect(screen.getByTestId('credential-control').textContent).toBe('OPENAI_API_KEY') - }) - - it('disables every control under disabled', () => { - const { container } = render() - for (const input of container.querySelectorAll('input, select, button')) { - expect((input as HTMLInputElement).disabled).toBe(true) - } - }) -}) - -describe('containers', () => { - const Catalog = Schema.object({ - models: Schema.array(Schema.object({ id: Schema.string().required() })), - retryPolicy: Schema.object({ maxRetries: Schema.number() }), - }) - - it('renders nested object groups', () => { - render() - expect(screen.getByText('retryPolicy')).toBeTruthy() - expect(screen.getByText('maxRetries')).toBeTruthy() - }) - - it('materializes fallback rows into the draft on add and edit', () => { - const onChange = vi.fn() - render() - fireEvent.click(screen.getByText('Add')) - expect(lastDraft(onChange)).toEqual({ models: [{ id: 'flash' }, {}] }) - fireEvent.change(screen.getByPlaceholderText('Default: flash'), { target: { value: 'pro' } }) - expect(lastDraft(onChange)).toEqual({ models: [{ id: 'pro' }] }) - }) - - it('removes draft array rows wholesale', () => { - const onChange = vi.fn() - render() - fireEvent.click(screen.getAllByText('Remove')[0] as HTMLElement) - expect(lastDraft(onChange)).toEqual({ models: [{ id: 'pro' }] }) - }) - - it('renders dict rows from both layers with removal only for draft keys', () => { - const Providers = Schema.object({ providers: Schema.dict(Schema.object({ baseURL: Schema.string() })) }) - const onChange = vi.fn() - render() - expect(screen.getByText('anthropic')).toBeTruthy() - expect(screen.getByText('openai')).toBeTruthy() - const removes = screen.getAllByText('Remove') - expect(removes.map(button => button.disabled)).toEqual([true, false]) - fireEvent.click(removes[1] as HTMLElement) - expect(lastDraft(onChange)).toEqual({ providers: {} }) - }) - - it('adds dict entries through a free-text key input', () => { - const Providers = Schema.object({ providers: Schema.dict(Schema.object({ baseURL: Schema.string() })) }) - const onChange = vi.fn() - render() - const add = screen.getByLabelText('Add') - fireEvent.keyDown(add, { key: 'a' }) - expect(onChange).not.toHaveBeenCalled() - add.value = 'openai' - fireEvent.keyDown(add, { key: 'Enter' }) - expect(lastDraft(onChange)).toEqual({ providers: { openai: {} } }) - add.value = '' - fireEvent.keyDown(add, { key: 'Enter' }) - expect(onChange).toHaveBeenCalledTimes(1) - }) - - it('offers remaining sKey vocabulary as the add select', () => { - const Providers = Schema.object({ - providers: Schema.dict(Schema.object({ baseURL: Schema.string() }), Schema.union(['openai', 'anthropic'])), - }) - const onChange = vi.fn() - render() - const add = screen.getByLabelText('Add') - expect([...add.options].map(option => option.value)).toEqual(['', 'anthropic']) - fireEvent.change(add, { target: { value: 'anthropic' } }) - expect(lastDraft(onChange)).toEqual({ providers: { openai: {}, anthropic: {} } }) - }) - - it('materializes type-shaped empty values for every array inner kind', () => { - const Kinds = Schema.object({ - tags: Schema.array(Schema.string()), - nums: Schema.array(Schema.number()), - flags: Schema.array(Schema.boolean()), - lists: Schema.array(Schema.array(Schema.string())), - dicts: Schema.array(Schema.dict(Schema.string())), - }) - const onChange = vi.fn() - render() - const adds = screen.getAllByText('Add') - const expected: Record = { - tags: [''], nums: [0], flags: [false], lists: [[]], dicts: [{}], - } - Object.entries(expected).forEach(([key, value], index) => { - fireEvent.click(adds[index] as HTMLElement) - expect(lastDraft(onChange)).toEqual({ [key]: value }) - }) - }) - - it('falls back to a read-only view for unsupported nodes instead of dropping them', () => { - const Mixed = Schema.object({ weird: Schema.union([Schema.string(), Schema.number()]) }) - render() - expect(screen.getByText('42')).toBeTruthy() - expect(screen.getByText(/no form control/)).toBeTruthy() - }) - - it('shows the draft value in the read-only fallback view, and nothing when both layers are empty', () => { - const Mixed = Schema.object({ weird: Schema.union([Schema.string(), Schema.number()]) }) - const { container } = render() - expect(screen.getByText('"overridden"')).toBeTruthy() - cleanup() - const empty = render().container - expect((empty.querySelector('pre') as HTMLElement).textContent).toBe('') - expect(container).toBeTruthy() - }) - - it('renders a structural object node without declared properties as an empty group', () => { - const { container } = render() - expect(container.querySelectorAll('input')).toHaveLength(0) - }) -}) diff --git a/packages/client/schema-form/tsdown.config.ts b/packages/client/schema-form/tsdown.config.ts deleted file mode 100644 index c6d22ad7e6..0000000000 --- a/packages/client/schema-form/tsdown.config.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { defineConfig } from 'tsdown' - -/** - * schema-form is browser-only, but its lib bundle is imported under plain - * Node through consumer lib chains (same posture as ui-primitives). CSS - * imports are stubbed to empty modules: the hashed class maps only matter in - * bundler contexts, which compile src directly and never read lib. - */ -export default defineConfig({ - entry: ['lib/types/index.js', 'lib/types/invariant.js'], - outDir: 'lib', - format: ['esm'], - platform: 'neutral', - target: 'es2024', - fixedExtension: false, - dts: false, - clean: false, - plugins: [{ - name: 'dsh-css-stub', - resolveId(source: string) { - if (!source.endsWith('.css')) return null - return `\0dsh-css-stub:${source}.mjs` - }, - load(id: string) { - if (!id.startsWith('\0dsh-css-stub:')) return null - return 'export default {};' - }, - }], -}) diff --git a/packages/client/ui-models/src/client/CredentialControl.tsx b/packages/client/ui-models/src/client/CredentialControl.tsx deleted file mode 100644 index bdd7f79d19..0000000000 --- a/packages/client/ui-models/src/client/CredentialControl.tsx +++ /dev/null @@ -1,127 +0,0 @@ -/** - * Credential-reference control: renders the reference NAME as the editable - * settings field, its configured state as a badge, and an inline write-only - * key input that stores the value through `credentials.set`. The value never - * renders back — the wire has no read path for it. - */ - -import { useEffect, useState } from 'react' -import type { ReactNode } from 'react' -import type { CredentialView, IApiClient } from '@deepseek-ai/dsh-client-connection/client' -import type { SchemaFieldContext } from '@deepseek-ai/dsh-client-schema-form' -import type { en } from './locales.ts' -import styles from './ModelsSection.module.css' - -/** Props of {@link CredentialControl}. */ -export interface CredentialControlProps { - /** The `apiKeyEnv` leaf position inside the provider editor's form. */ - context: SchemaFieldContext - /** Credentials wire face. */ - credentials: IApiClient['credentials'] - /** Section copy. */ - t: (key: keyof typeof en) => string -} - -/** The effective reference name this control addresses. */ -function refOf(context: SchemaFieldContext): string | undefined { - const value = context.draftValue ?? context.fallbackValue - return typeof value === 'string' && value.length > 0 ? value : undefined -} - -/** - * Render the credential-reference field with its live state and key input. - * @param props - field context, wire face, and copy. - * @returns the control column. - */ -export function CredentialControl(props: CredentialControlProps): ReactNode { - const { context, credentials, t } = props - const ref = refOf(context) - const [state, setState] = useState(undefined) - const [keyDraft, setKeyDraft] = useState('') - const [busy, setBusy] = useState(false) - const [failure, setFailure] = useState(undefined) - - useEffect(() => { - let stale = false - setState(undefined) - if (ref === undefined) return undefined - void credentials.describe({ refs: [ref] }).then((response) => { - if (stale || !response.result.ok) return - setState(response.result.value.credentials[ref]) - }) - return () => { stale = true } - }, [credentials, ref]) - - const badge = state === undefined - ? null - : state.configured - ? ( - - {t('credentialConfigured')} - {state.source === 'env' ? ` · ${t('credentialFromEnv')}` : ''} - - ) - : {t('credentialMissing')} - - const storeKey = async (): Promise => { - /* v8 ignore next -- the save button is disabled while no reference or draft exists */ - if (ref === undefined || keyDraft.length === 0) return - setBusy(true) - setFailure(undefined) - const response = await credentials.set({ ref, value: keyDraft }) - setBusy(false) - if (!response.result.ok) { - setFailure(response.result.error.message) - return - } - setKeyDraft('') - const described = await credentials.describe({ refs: [ref] }) - if (described.result.ok) setState(described.result.value.credentials[ref]) - } - - return ( -
-
- { - const next = event.target.value - if (next === '') context.clearValue() - else context.setValue(next) - }} - /> - {badge} -
- {ref !== undefined && state?.writable !== false - ? ( -
- { setKeyDraft(event.target.value) }} - /> - -
- ) - : null} - {failure !== undefined ?

{failure}

: null} -
- ) -} diff --git a/packages/client/ui-models/src/client/ModelsSection.module.css b/packages/client/ui-models/src/client/ModelsSection.module.css index 7b7d9fa1bf..a2be484a63 100644 --- a/packages/client/ui-models/src/client/ModelsSection.module.css +++ b/packages/client/ui-models/src/client/ModelsSection.module.css @@ -60,10 +60,21 @@ } .badgeOk { + display: inline-flex; + align-items: center; + gap: 5px; color: var(--text-success, #0a7d33); font-size: 12px; } +.badgeOk::before { + content: ''; + width: 6px; + height: 6px; + border-radius: 999px; + background: currentcolor; +} + .badgeMuted { color: var(--text-tertiary, #999); font-size: 12px; @@ -115,16 +126,19 @@ } .editor { - border-top: 1px solid var(--border, #eee); - padding-top: 12px; + border: 1px solid var(--border, #e6e6e6); + border-radius: 12px; + background: var(--surface-secondary, #f7f7f8); + padding: 14px 16px; display: flex; flex-direction: column; - gap: 12px; + gap: 14px; } .editorHeader { display: flex; - align-items: center; + align-items: baseline; + gap: 8px; } .editorTitle { @@ -132,6 +146,48 @@ font-weight: 600; } +.editorRoute { + font-size: 12px; + color: var(--text-tertiary, #999); +} + +.field { + display: flex; + flex-direction: column; + gap: 6px; +} + +.fieldLabel { + display: inline-flex; + align-items: center; + gap: 10px; + font-size: 12px; + font-weight: 500; + color: var(--text-secondary, #555); +} + +.linkButton { + border: none; + background: none; + padding: 0; + color: var(--text-tertiary, #888); + font: inherit; + font-size: 12px; + text-decoration: underline; + cursor: pointer; +} + +.linkButton:disabled { + opacity: 0.5; + cursor: default; +} + +.advancedHint { + margin: 0; + font-size: 12px; + color: var(--text-tertiary, #999); +} + .editorActions { display: flex; justify-content: flex-end; @@ -144,43 +200,82 @@ gap: 12px; } -.addSelect { +.addButton { align-self: flex-start; border: 1px solid var(--border, #d9d9d9); border-radius: 999px; - padding: 8px 14px; + padding: 8px 16px; font: inherit; + font-size: 13px; background: var(--surface, #fff); + color: inherit; + cursor: pointer; } -.credential { +.addButton:disabled { + opacity: 0.5; + cursor: default; +} + +.addCard, +.setupCard { + border: 1px solid var(--border, #e6e6e6); + border-radius: 12px; + background: var(--surface-secondary, #f7f7f8); + padding: 14px 16px; display: flex; flex-direction: column; - gap: 6px; + gap: 14px; + list-style: none; } -.credentialRefRow, -.credentialKeyRow { +.addCard .editor, +.setupCard .editor { + border: none; + background: none; + padding: 0; +} + +.customized { + border-top: 1px solid var(--border, #ececec); + padding-top: 10px; +} + +.customizedSummary { + cursor: pointer; + font-size: 12px; + font-weight: 500; + color: var(--text-secondary, #555); + list-style: revert; +} + +.customizedBody { display: flex; - align-items: center; - gap: 8px; -} - -.credentialRefRow > input, -.credentialKeyRow > input { - flex: 1; + flex-direction: column; + gap: 12px; + padding-top: 12px; } .input { box-sizing: border-box; - padding: 8px 10px; + padding: 9px 12px; border: 1px solid var(--border, #d9d9d9); - border-radius: 8px; + border-radius: 10px; font: inherit; + font-size: 13px; background: var(--surface, #fff); color: inherit; } +.input:focus { + outline: none; + border-color: var(--accent-strong, #111); +} + +.input::placeholder { + color: var(--text-tertiary, #aaa); +} + .error { margin: 0; font-size: 12px; diff --git a/packages/client/ui-models/src/client/ModelsSection.tsx b/packages/client/ui-models/src/client/ModelsSection.tsx index 7a08441ea9..d4f485b5cf 100644 --- a/packages/client/ui-models/src/client/ModelsSection.tsx +++ b/packages/client/ui-models/src/client/ModelsSection.tsx @@ -1,7 +1,9 @@ /** * Models settings section: the provider rows joined from the configurable * directory, settings namespaces, and credential states, with one editor - * card at a time (edit an existing provider or add a dormant one). Every + * card at a time. A whole-section provider without a configured key (the + * unconfigured DeepSeek posture) renders as its open setup card instead of a + * row; the add flow is a card carrying the dormant-provider select. Every * mutation writes through the wire; the page re-renders from the pushed * invalidations or the post-apply reload. */ @@ -22,7 +24,7 @@ export interface ModelsSectionInjected { controller: ModelsSettingsStore /** uSES subscription hook bound to the store. */ useSnapshot: SnapshotSelectorHook - /** Wire faces the editor and credential control write through. */ + /** Wire faces the editor writes through. */ api: Pick /** Section copy. */ t: (key: keyof typeof en) => string @@ -37,6 +39,7 @@ export type ModelsSectionProps = Partial /** The editor target: an existing row or a dormant directory entry. */ interface EditorTarget { provider: string + displayName: string settingsNs: string settingsPath: readonly string[] } @@ -62,17 +65,28 @@ export async function removeProviderProfile( if (response.result.ok) await controller.load() } -function StatusBadges({ row, t }: { row: ProviderRow; t: ModelsSectionInjected['t'] }): ReactNode { - return ( - - {row.entry.active - ? {t('active')} - : {t('dormant')}} - {row.credential !== undefined && !row.credential.configured - ? {t('keyMissing')} - : null} - - ) +/** + * Whether a whole-section provider still needs its first key: nothing marks + * the credential configured and no literal `apiKey` is stored, so the page + * opens the setup card instead of showing a row. + * @param row - the joined provider row. + * @param namespace - the owning namespace view. + * @returns whether to render the setup card. + */ +export function needsSetup(row: ProviderRow, namespace: SettingsNamespaceView): boolean { + if (row.entry.settingsPath.length > 0) return false + if (row.credential?.configured === true) return false + return !namespace.secrets.some(secret => + secret.set && secret.path.length === 1 && secret.path[0] === 'apiKey') +} + +function targetOf(row: ProviderRow): EditorTarget { + return { + provider: row.entry.provider, + displayName: row.entry.displayName, + settingsNs: row.entry.settingsNs, + settingsPath: row.entry.settingsPath, + } } /** @@ -124,20 +138,38 @@ function Loaded({ injected }: { injected: ModelsSectionInjected }): ReactNode { {!state.writable && state.status === 'ready' ?

{t('readOnly')}

: null}
    {configured.map((row) => { - const target: EditorTarget = { - provider: row.entry.provider, - settingsNs: row.entry.settingsNs, - settingsPath: row.entry.settingsPath, - } - const open = !adding && editing?.provider === row.entry.provider + const target = targetOf(row) const namespace = state.namespaces.get(target.settingsNs) /* v8 ignore next -- the join marks a row configured only when its namespace resolved */ if (namespace === undefined) return null + if (needsSetup(row, namespace)) { + // First-run posture: the provider exists but has no key — the + // setup card IS its presence on the page. + return ( +
  • + +
    • + ) + } + const open = !adding && editing?.provider === row.entry.provider return (
  • {row.entry.displayName} - + + {row.entry.active + ? {t('active')} + : {t('dormant')}} + )}
    diff --git a/packages/client/ui-models/src/client/ProviderEditor.tsx b/packages/client/ui-models/src/client/ProviderEditor.tsx index 109d1429c4..530868c49f 100644 --- a/packages/client/ui-models/src/client/ProviderEditor.tsx +++ b/packages/client/ui-models/src/client/ProviderEditor.tsx @@ -1,26 +1,50 @@ /** - * One provider's editor card: the schema-driven form over its profile - * subtree, the credential-reference control, and the Apply/Cancel pair. - * Apply without removals merges (`settings.update`, preserving stored keys - * outside the patch); apply after a field reset replaces the user section so - * the reset actually lands. + * One provider's editor card, hand-written per adapter family: the primary + * field is a single write-only **API key** input (the page never asks for an + * environment-variable name — a typed key stores through `credentials.set` + * under the profile's reference, deriving `_API_KEY` when the profile + * has none, and the pi-ai profile records that derivation as `apiKeyEnv`); + * the collapsed 自定义设置 area carries the per-family extras (deepseek: + * `baseURL` + `reasoningEffort`; pi-ai: `reasoning`). Everything else stays + * owned by `settings.yaml` — the folded hint says so. Profile edits land as a + * minimal `settings.update` merge patch; clearing a field back to inherited + * removes its key, so that apply replaces the user section (safe: the section + * stores references, never key values). */ -import { useMemo, useState } from 'react' +import { useEffect, useMemo, useState } from 'react' import type { ReactNode } from 'react' -import type { IApiClient, SettingsNamespaceView } from '@deepseek-ai/dsh-client-connection/client' +import type { CredentialView, IApiClient, SettingsNamespaceView } from '@deepseek-ai/dsh-client-connection/client' import { - getPath, nodeAtPath, rehydrateSchema, SchemaForm, setPath, validateDraft, + deletePath, getPath, nodeAtPath, rehydrateSchema, setPath, validateDraft, } from '@deepseek-ai/dsh-client-schema-form' -import type { SchemaFormSecret } from '@deepseek-ai/dsh-client-schema-form' -import { CredentialControl } from './CredentialControl.tsx' +import { deriveKeyRef } from './store.ts' import type { en } from './locales.ts' import styles from './ModelsSection.module.css' +/** Per-adapter-family curated field sets (unknown namespaces get the hint alone). */ +type EditorLayout = 'deepseek' | 'pi-ai' | 'unknown' + +/** Reasoning vocabularies per layout; the empty option means "inherit". */ +const EFFORT_CHOICES: Record<'deepseek' | 'pi-ai', readonly string[]> = { + deepseek: ['off', 'high', 'max'], + 'pi-ai': ['off', 'minimal', 'low', 'medium', 'high', 'xhigh', 'max'], +} + +/** The draft key the effort select edits, per layout. */ +const EFFORT_FIELD: Record<'deepseek' | 'pi-ai', string> = { + deepseek: 'reasoningEffort', + 'pi-ai': 'reasoning', +} + /** Props of {@link ProviderEditor}. */ export interface ProviderEditorProps { - /** Provider route id (card title). */ + /** Provider route id. */ provider: string + /** Display name for the card title. */ + displayName: string + /** Hide the title row (the add card renders its own provider select). */ + hideTitle?: boolean /** The owning namespace view (schema, layers, secrets). */ namespace: SettingsNamespaceView /** Path from the section root to this provider's profile. */ @@ -35,15 +59,6 @@ export interface ProviderEditorProps { onClose: (changed: boolean) => void } -/** Secrets re-rooted at the profile subtree (paths relative to the editor's form). */ -function secretsUnder(namespace: SettingsNamespaceView, path: readonly string[]): SchemaFormSecret[] { - return namespace.secrets.flatMap((secret) => { - if (secret.path.length < path.length) return [] - if (!path.every((key, index) => secret.path[index] === key)) return [] - return [{ path: secret.path.slice(path.length), set: secret.set }] - }) -} - /** A user-section subtree as a plain draft object (absent → empty). */ function draftAt(namespace: SettingsNamespaceView, path: readonly string[]): Record { const subtree = getPath(namespace.user, path) @@ -51,10 +66,16 @@ function draftAt(namespace: SettingsNamespaceView, path: readonly string[]): Rec return structuredClone(subtree) as Record } -/** Whether any key present in `before` is absent from `after` (a reset happened). */ -function removedAny(before: unknown, after: unknown): boolean { +/** + * Whether any key present in `before` is absent from `after` (a reset + * happened somewhere in the draft, so the apply must replace, not merge). + * @param before - the user-layer subtree the draft started from. + * @param after - the edited draft. + * @returns whether a removal exists at any depth. + */ +export function removedAny(before: unknown, after: unknown): boolean { if (typeof before !== 'object' || before === null) return false - /* v8 ignore next -- the form edits containers in place; a container cannot become a primitive */ + /* v8 ignore next -- the editor edits containers in place; a container cannot become a primitive */ if (typeof after !== 'object' || after === null) return true for (const [key, value] of Object.entries(before)) { if (!(key in (after as Record))) return true @@ -63,6 +84,22 @@ function removedAny(before: unknown, after: unknown): boolean { return false } +/** The editor layout the owning namespace selects. */ +function layoutOf(ns: string): EditorLayout { + if (ns === 'llm-deepseek') return 'deepseek' + if (ns === 'llm-pi-ai') return 'pi-ai' + return 'unknown' +} + +/** The credential reference this profile resolves keys through. */ +function refFor(namespace: SettingsNamespaceView, path: readonly string[], provider: string): string { + const profile = getPath(namespace.value, path) + const named = typeof profile === 'object' && profile !== null + ? (profile as { apiKeyEnv?: unknown }).apiKeyEnv + : undefined + return typeof named === 'string' && named.length > 0 ? named : deriveKeyRef(provider) +} + /** * Render one provider's editing card. * @param props - the addressed profile plus wire faces and copy. @@ -71,79 +108,175 @@ function removedAny(before: unknown, after: unknown): boolean { export function ProviderEditor(props: ProviderEditorProps): ReactNode { const { namespace, settingsPath, api, t } = props const [draft, setDraft] = useState>(() => draftAt(namespace, settingsPath)) + const [keyDraft, setKeyDraft] = useState('') + const [keyState, setKeyState] = useState(undefined) const [busy, setBusy] = useState(false) const [failure, setFailure] = useState(undefined) const root = useMemo(() => rehydrateSchema(namespace.schema), [namespace.schema]) const node = useMemo(() => nodeAtPath(root, settingsPath), [root, settingsPath]) - const subtreeSchema = useMemo(() => node?.toJSON(), [node]) const fallback = getPath(namespace.value, settingsPath) - const secrets = useMemo(() => secretsUnder(namespace, settingsPath), [namespace, settingsPath]) + const disabled = props.readOnly || busy + const layout = layoutOf(namespace.ns) + const keyRef = refFor(namespace, settingsPath, props.provider) + + useEffect(() => { + let stale = false + setKeyState(undefined) + void api.credentials.describe({ refs: [keyRef] }).then((response) => { + if (stale || !response.result.ok) return + setKeyState(response.result.value.credentials[keyRef]) + }) + return () => { stale = true } + }, [api.credentials, keyRef]) + + const stringAt = (source: unknown, key: string): string | undefined => { + const value = getPath(source, [key]) + return typeof value === 'string' && value.length > 0 ? value : undefined + } + const setField = (key: string, next: string | undefined): void => { + setDraft(current => next === undefined ? deletePath(current, [key]) : setPath(current, [key], next)) + } const apply = async (): Promise => { setBusy(true) setFailure(undefined) const ns = namespace.ns const original = getPath(namespace.user, settingsPath) - const needsReplace = removedAny(original, draft) - // Merge patches stay minimal (just this profile); a replace must carry - // the complete next user section because it lands wholesale. - const patch = settingsPath.length === 0 ? draft : setPath({}, [...settingsPath], draft) - /* v8 ignore next 3 -- a subtree apply implies the join served this namespace's user layer */ - const nextSection = settingsPath.length === 0 - ? draft - : setPath(structuredClone((namespace.user ?? {}) as Record), [...settingsPath], draft) - /* v8 ignore next -- apply is only reachable from the rendered card, which required a resolved node */ - if (node !== undefined) { - const sectionError = settingsPath.length === 0 ? validateDraft(node, draft) : undefined - if (sectionError !== undefined) { + // The pi-ai profile must name the reference the key stores under, so a + // dormant add (or a legacy profile without one) records the derivation. + const next = layout === 'pi-ai' && stringAt(draft, 'apiKeyEnv') === undefined + && stringAt(fallback, 'apiKeyEnv') === undefined + ? setPath(draft, ['apiKeyEnv'], keyRef) + : draft + const settingsChanged = JSON.stringify(next) !== JSON.stringify(original ?? {}) + if (settingsChanged) { + const needsReplace = removedAny(original, next) + // Merge patches stay minimal (just this profile); a replace must carry + // the complete next user section because it lands wholesale. + const patch = settingsPath.length === 0 ? next : setPath({}, [...settingsPath], next) + /* v8 ignore next 3 -- a subtree apply implies the join served this namespace's user layer */ + const nextSection = settingsPath.length === 0 + ? next + : setPath(structuredClone((namespace.user ?? {}) as Record), [...settingsPath], next) + /* v8 ignore next -- apply is only reachable from the rendered card, which required a resolved node */ + if (node !== undefined) { + const sectionError = settingsPath.length === 0 ? validateDraft(node, next) : undefined + if (sectionError !== undefined) { + setBusy(false) + setFailure(sectionError) + return + } + } + const response = needsReplace + ? await api.settings.replace({ ns, section: nextSection }) + : await api.settings.update({ ns, patch }) + if (!response.result.ok) { setBusy(false) - setFailure(sectionError) + setFailure(response.result.error.message) return } } - const response = needsReplace - ? await api.settings.replace({ ns, section: nextSection }) - : await api.settings.update({ ns, patch }) - setBusy(false) - if (!response.result.ok) { - setFailure(response.result.error.message) - return + if (keyDraft.length > 0) { + const stored = await api.credentials.set({ ref: keyRef, value: keyDraft }) + if (!stored.result.ok) { + setBusy(false) + setFailure(stored.result.error.message) + return + } + setKeyDraft('') } + setBusy(false) props.onClose(true) } - if (node === undefined || subtreeSchema === undefined) { + if (node === undefined) { // A directory entry addressing a position its schema cannot resolve is a // host-side inconsistency; showing it beats a blank card. return

    {`${props.provider}: unresolvable settings path`}

    } + const keyLocked = keyState?.writable === false + const effortField = layout === 'unknown' ? undefined : EFFORT_FIELD[layout] + return (
    -
    - {props.provider} -
    - { - if (context.role !== 'credential-ref') return undefined - return - }} - /> + {props.hideTitle === true + ? null + : ( +
    + {props.displayName} + {props.provider !== props.displayName + ? {props.provider} + : null} +
    + )} + {layout === 'unknown' + ?

    {`${t('advancedHint')} (${namespace.ns})`}

    + : ( + <> +
    + {t('keyInput')} + { setKeyDraft(event.target.value) }} + /> +
    +
    + {t('customized')} +
    + {layout === 'deepseek' + ? ( +
    + {t('baseUrl')} + { + setField('baseURL', event.target.value === '' ? undefined : event.target.value) + }} + /> +
    + ) + : null} + {/* v8 ignore next -- EFFORT_FIELD is total over non-unknown layouts; the check only narrows the type */} + {effortField !== undefined + ? ( +
    + {t('effort')} + +
    + ) + : null} +

    {`${t('advancedHint')} (${namespace.ns})`}

    +
    +
    + + )} {failure !== undefined ?

    {failure}

    : null}