Merge branch 'worktree/schedule-conversational-after' into worktree/schedule-explicit-at

# Conflicts: # packages/client/runtime/README.i18n.yaml # packages/client/runtime/README.md # packages/client/runtime/README.zh.md
2026-08-11 20:34:34 +08:00
parent 3e131befb5 9dc4af386d
commit 7583778fbd
133 changed files with 4907 additions and 207 deletions
--- a/packages/client/README.i18n.yaml
+++ b/packages/client/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/README.md
-README.md: a349b79783fae8fcfc9b3af7d3e96de779514d01
-README.zh.md: 342442001bd268048de901233fc1913027b6d70f
+README.md: 75abe408952ed66dcc237ce489e417f61159bcc3
+README.zh.md: 5432efcb0a5ebc410093da4c3ec6c2e07c4520ca
--- a/packages/client/README.md
+++ b/packages/client/README.md
@@ -35,6 +35,7 @@ The browser side of the dsh web GUI: shell boot, browser-host communication, sha
 | [`ui-model/`](ui-model/README.md) | Provides model selection in conversation surfaces. |
 | [`ui-permission/`](ui-permission/README.md) | Configures default permissions and switches the current session's access. |
 | [`ui-plan/`](ui-plan/README.md) | Presents active plan-mode status and its exit control. |
+| [`ui-plugin-config/`](ui-plugin-config/README.md) | The Plugins settings section: host-plane plugin configuration as expandable cards. |
 | [`ui-question/`](ui-question/README.md) | Presents interactive questions requested by the agent. |
 | [`ui-agent-preset/`](ui-agent-preset/README.md) | Selects a session's agent preset and authors preset compositions. |
 | [`ui-settings/`](ui-settings/README.md) | Hosts the settings interface and its extension areas. |
--- a/packages/client/README.zh.md
+++ b/packages/client/README.zh.md
@@ -35,6 +35,7 @@ dsh web GUI 的浏览器侧：shell 启动、浏览器与宿主通信、共享 U
 | [`ui-model/`](ui-model/README.md) | 在会话界面中提供模型选择。 |
 | [`ui-permission/`](ui-permission/README.md) | 配置默认权限并切换当前会话的访问模式。 |
 | [`ui-plan/`](ui-plan/README.md) | 展示生效中的 plan mode 状态及其退出控件。 |
+| [`ui-plugin-config/`](ui-plugin-config/README.md) | 插件设置分区：把宿主平面的插件配置呈现为可展开卡片。 |
 | [`ui-question/`](ui-question/README.md) | 展示 agent 请求的交互式问题。 |
 | [`ui-agent-preset/`](ui-agent-preset/README.md) | 选择会话的 agent 预设，并创作预设组装。 |
 | [`ui-settings/`](ui-settings/README.md) | 承载设置界面及其扩展区域。 |
--- a/packages/client/runtime/README.i18n.yaml
+++ b/packages/client/runtime/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/runtime/README.md
-README.md: f8b03e350606d286ab68e9e67a3f0bd3f698ae50
-README.zh.md: cbe94f8d24994f32ee6416b50893263f36806d09
+README.md: f4823f58ec79df0cbccfff0a08d9bb59b9a3ac8d
+README.zh.md: ce8117fc4c95071a6db8592302030a8a63b5478b
--- a/packages/client/runtime/README.md
+++ b/packages/client/runtime/README.md
@@ -6,7 +6,7 @@ Client cordis boot and React-free object services: SlotsService wraps SlotCore a

 For each prompt that can reach a local root or continuable child Agent, the runtime samples the browser's current `Intl.DateTimeFormat().resolvedOptions().timeZone` and attaches it to that one Session or subagent prompt RPC. It is neither cached nor included in Session creation or fork state, so travel and concurrent tabs keep message-local provenance. A browser that cannot provide a non-empty zone fails the prompt locally instead of silently substituting deployment state.

-`bindSettingsScope` is the browser mirror of the Host-side settings owner seam for one domain-owned namespace. It subscribes before starting a nonblocking initial read, publishes a uSES snapshot (status, section value, revision, writability, host/memory mode), serializes `set` writes with the latest known namespace revision, suppresses stale publications, recovers a rejected latest write from Host state, and reaches quiescence on plugin disposal. The default decoder validates each section against the namespace's own serialized wire schema (rehydrated through dsh-client-schema-form), so a domain adds a decoder only to narrow beyond that schema. Loopback pages use the Host settings API; remote pages stay in memory mode. Domain packages own the namespace schema, default, and live service rather than putting product policy in runtime.
+`bindSettingsScope` is the browser mirror of the Host-side settings owner seam for one domain-owned namespace. It subscribes before starting a nonblocking initial read, publishes a uSES snapshot (status, section value, the composition `base` and raw `user` layers, revision, writability, host/memory mode), serializes `set` and `unset` writes with the latest known namespace revision, suppresses stale publications, recovers a rejected latest write from Host state, and reaches quiescence on plugin disposal. The default decoder validates each section against the namespace's own serialized wire schema (rehydrated through dsh-client-schema-form), so a domain adds a decoder only to narrow beyond that schema. Loopback pages use the Host settings API; remote pages stay in memory mode. A field is overridden when it is PRESENT in `user` — an override equal to the composition default is still an override, which comparing values could not see — and `unset` is how a form clears one back to `base`. Domain packages own the namespace schema, default, and live service rather than putting product policy in runtime.

 ## Slot declaration injection

--- a/packages/client/runtime/README.zh.md
+++ b/packages/client/runtime/README.zh.md
@@ -6,7 +6,7 @@

 对于每条可到达本地根 Agent 或可继续子 Agent 的提示词，运行时都会采样浏览器当前的 `Intl.DateTimeFormat().resolvedOptions().timeZone`，并只把该值附加到这一次 Session 或 subagent 提示词 RPC。该值既不缓存，也不包含在 Session 创建或 fork 状态中，因此旅行与并发标签页都能保留消息本地的来源信息。浏览器若无法提供非空时区，会在本地拒绝该提示词，而不会悄然使用部署状态代替。

-`bindSettingsScope` 面向单个由领域持有的 namespace，是 Host 侧 settings owner seam 的浏览器镜像。它在开始非阻塞初始读取前建立订阅，发布 uSES 快照（状态、分节值、revision、可写性、host／内存模式），使用已知最新 namespace revision 串行执行 `set` 写入，抑制陈旧发布，并在最新写入被拒时从 Host 状态恢复；插件释放时，它会达到完全停稳。默认解码器会对照该 namespace 自身的序列化 wire schema（经 dsh-client-schema-form 还原）校验每个分节，因此领域只有在需要比该 schema 进一步收窄时才添加解码器。回环页面使用 Host settings API，远程页面则停留在内存模式。namespace schema、默认值与实时服务归领域包所有，而非把产品政策放入运行时。
+`bindSettingsScope` 面向单个由领域持有的 namespace，是 Host 侧 settings owner seam 的浏览器镜像。它在开始非阻塞初始读取前建立订阅，发布 uSES 快照（状态、分节值、组装 `base` 层与原始 `user` 层、revision、可写性、host／内存模式），使用已知最新 namespace revision 串行执行 `set` 与 `unset` 写入，抑制陈旧发布，并在最新写入被拒时从 Host 状态恢复；插件释放时，它会达到完全停稳。默认解码器会对照该 namespace 自身的序列化 wire schema（经 dsh-client-schema-form 还原）校验每个分节，因此领域只有在需要比该 schema 进一步收窄时才添加解码器。回环页面使用 Host settings API，远程页面则停留在内存模式。字段是否被覆盖，取决于它是否**出现**在 `user` 中——与组装默认值相同的覆盖仍然是覆盖，比较值是看不出来的——而 `unset` 就是表单把某个字段清回 `base` 的方式。namespace schema、默认值与实时服务归领域包所有，而非把产品政策放入运行时。

 ## Slot 声明注入

--- a/packages/client/runtime/src/client/contract/settings-scope.ts
+++ b/packages/client/runtime/src/client/contract/settings-scope.ts
@@ -17,6 +17,17 @@ export interface SettingsScopeSnapshot<T> {
  status: 'loading' | 'ready' | 'unavailable'
  /** Last accepted schema-resolved section; undefined before the first acceptance. */
  value: T | undefined
+  /**
+   * Composition layer the Host resolved {@link value} over, when the owning
+   * plugin declared one. What a field reverts to once cleared.
+   */
+  base: unknown
+  /**
+   * Raw user layer as stored, when one exists. A field's PRESENCE here is what
+   * marks it overridden — an override whose value equals the composition
+   * default is still an override, and comparing values could not see it.
+   */
+  user: unknown
  /** Namespace revision fencing the next write; undefined before the first Host view. */
  revision: number | undefined
  /** Whether the Host document accepts writes; memory mode never does. */
@@ -60,4 +71,11 @@ export interface SettingsScope<T> {
   * @returns settlement after the write and any latest-write recovery read.
   */
  set(field: string, value: unknown): Promise<void>
+  /**
+   * Queue one field clear, so the field re-inherits the composition layer.
+   * Shares {@link set}'s ordering, revision, and recovery contract.
+   * @param field - scalar field inside the namespace section.
+   * @returns settlement after the clear and any latest-write recovery read.
+   */
+  unset(field: string): Promise<void>
 }
--- a/packages/client/test-runtime/src/settings-scope.ts
+++ b/packages/client/test-runtime/src/settings-scope.ts
@@ -8,6 +8,8 @@ export interface StubSettingsScope<T> {
  scope: SettingsScope<T>
  /** Spy behind `scope.set`; resolves immediately. */
  set: ReturnType<typeof vi.fn>
+  /** Spy behind `scope.unset`; resolves immediately. */
+  unset: ReturnType<typeof vi.fn>
  /** @returns how many listeners are currently subscribed (disposal assertions). */
  listenerCount(): number
  /**
@@ -25,10 +27,12 @@ export interface StubSettingsScope<T> {
 */
 export function stubSettingsScope<T>(): StubSettingsScope<T> {
  let snapshot: SettingsScopeSnapshot<T> = {
-    status: 'loading', value: undefined, revision: undefined, writable: false, mode: 'host',
+    status: 'loading', value: undefined, base: undefined, user: undefined,
+    revision: undefined, writable: false, mode: 'host',
  }
  const listeners = new Set<() => void>()
  const set = vi.fn(() => Promise.resolve())
+  const unset = vi.fn(() => Promise.resolve())
  return {
    scope: {
      getSnapshot: () => snapshot,
@@ -37,8 +41,10 @@ export function stubSettingsScope<T>(): StubSettingsScope<T> {
        return () => { listeners.delete(listener) }
      },
      set,
+      unset,
    },
    set,
+    unset,
    listenerCount: () => listeners.size,
    publish: (next) => {
      snapshot = { ...snapshot, ...next }
--- a/packages/client/test-runtime/tests/runtime.spec.tsx
+++ b/packages/client/test-runtime/tests/runtime.spec.tsx
@@ -7,6 +7,7 @@
 * stack — this suite is the fixture the migrated feature specs rely on.
 */
 import { afterEach, describe, expect, it, vi } from 'vitest'
+import { stubSettingsScope } from '../src/settings-scope.ts'
 import { cleanup } from '@testing-library/react'
 import { defineStore } from '@deepseek-ai/dsh-client-runtime/client'
 import type { SessionId, WorkspaceId } from '@deepseek-ai/dsh-client-runtime/client'
@@ -635,3 +636,32 @@ describe('single-slot mounting edge arms', () => {
    await runtime.dispose()
  })
 })
+
+describe('stubbed settings scope', () => {
+  it('records both write kinds and publishes a Host acceptance to its listeners', async () => {
+    const host = stubSettingsScope<{ preference: string }>()
+    let notified = 0
+    const stop = host.scope.subscribe(() => { notified += 1 })
+    expect(host.listenerCount()).toBe(1)
+    expect(host.scope.getSnapshot()).toMatchObject({
+      status: 'loading', base: undefined, user: undefined,
+    })
+
+    await host.scope.set('preference', 'dark')
+    await host.scope.unset('preference')
+    host.publish({
+      status: 'ready',
+      value: { preference: 'system' },
+      base: { preference: 'system' },
+      revision: 2,
+      writable: true,
+    })
+
+    expect(host.set).toHaveBeenCalledWith('preference', 'dark')
+    expect(host.unset).toHaveBeenCalledWith('preference')
+    expect(notified).toBe(1)
+    expect(host.scope.getSnapshot()).toMatchObject({ status: 'ready', revision: 2, writable: true })
+    stop()
+    expect(host.listenerCount()).toBe(0)
+  })
+})
--- a/packages/client/ui-plugin-config/README.i18n.yaml
+++ b/packages/client/ui-plugin-config/README.i18n.yaml
@@ -0,0 +1,6 @@
+# Bilingual-pair consistency record (docs/i18n/README.md): the git blob hash of each
+# 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/ui-plugin-config/README.md
+README.md: 7e530d70f6573d619378e43b0245345b45d6db18
+README.zh.md: fd4f980fcf71c00c2357017fb40c76a9ca7a72cc
--- a/packages/client/ui-plugin-config/README.md
+++ b/packages/client/ui-plugin-config/README.md
@@ -0,0 +1,40 @@
+# dsh-client-ui-plugin-config
+
+English | [中文](README.zh.md)
+
+The **Plugins** settings section: one expandable card per Host plugin whose configuration a user owns. A card shows the plugin's name and what it governs; expanding it in place reveals hand-written controls bound to that plugin's settings namespace, each field marking whether the user overrode it and offering a reset back to the value the deployment composed.
+
+## What appears here
+
+A card renders only when its namespace is both registered by a live Host plugin and served to the browser. A deployment that does not compose the owning plugin — or serves the namespace to no client — renders nothing for it rather than an empty or disabled card, so the section reflects what this deployment actually runs.
+
+The first batch covers the shell executor (`bash`), the agent loop's tool-call parallelism (`agent-loop`), and the DeepSeek search provider (`web-search-deepseek`).
+
+## Extension point
+
+The section declares `settings.plugin.item`, a root list slot. A plugin that ships a browser half registers its own card into that slot and owns its controls; this package neither enumerates namespaces nor renders a form it was not given. Ordering follows the slot's `order`.
+
+## Writes
+
+A card stages what the user types and writes it only when they save. Each control renders staged text, so what is on screen is exactly what a save would store; **Discard** drops the drafts, and a card holding unsaved edits says so on its header even while collapsed. A reset stages the composed default rather than writing immediately, and a draft the field does not accept blocks the save instead of being dropped.
+
+Saving writes each staged field through the client settings scope, which fences every write with the namespace revision it read, so a form that has drifted from the document is refused rather than overwriting a concurrent change. The Host is the only authority on whether a value was accepted — its validators own the constraints no schema can express — so the card reads the section back afterwards and reports a save that did not land, keeping those drafts for the user to correct.
+
+A key can also be written from another surface — the Models page addresses the same reference — which changes no settings section, so the card re-reads on the forwarded `credentials/updated` event for the reference it watches.
+
+A field's presence in the raw user layer — not its value — is what marks it overridden; a reset clears that field so it re-inherits the composition layer. Secret-role fields never ride a response, so a key control starts blank, reports only whether one is configured, and writes through the credentials domain rather than the settings section; a blank draft writes nothing and keeps the stored key.
+
+## Model Experience
+
+None, as the section renders a browser configuration UI; the values it writes reach a model only through the plugins that own them, each documenting that effect itself.
+
+#### KV Cache effect
+
+None; this package neither assembles nor sends a provider request.
+
+## Known Limitations and Deferred Work
+
+- **Only host-plane plugins appear** — a plugin an agent preset mounts carries its configuration inline in that preset's `agent.cordis.yml` and cannot register a settings namespace at all (a second session mounting the same preset would fail on a duplicate registration), so this section lists nothing for it. Editing those values remains the preset editor's job.
+- **Exposure is a Host allowlist, not a plugin declaration** — a namespace absent from the api-proxy's allowlist answers `settings-not-exposed` even when its owner registered it, so a plugin distributed outside this repository cannot surface its own configuration here without a change in `packages/host/apiproxy`.
+- **The shell card follows the composed executor** — the POSIX and PowerShell executor families share the `bash` namespace because a host composes exactly one of them, so the served schema differs by platform (PowerShell adds `pwshPath`) even though the card edits the same two fields on both, and a deployment composing neither shows no card.
+- **The empty line counts registered cards, not visible ones** — a card whose namespace this deployment does not expose renders nothing, but still counts, so a deployment that exposes none shows an empty list rather than the empty line. The count is also read once, because the renderer caches a root entry's inject face; a card registered later does not raise it.
--- a/packages/client/ui-plugin-config/README.zh.md
+++ b/packages/client/ui-plugin-config/README.zh.md
@@ -0,0 +1,40 @@
+# dsh-client-ui-plugin-config
+
+[English](README.md) | 中文
+
+**插件**设置分区：每个配置由用户拥有的 Host 插件占一张可展开卡片。卡片展示插件名称及其管辖范围；就地展开后是绑定到该插件 settings 命名空间的手写控件，每个字段标注用户是否覆盖过它，并提供重置回部署组装值的入口。
+
+## 这里会出现什么
+
+只有当某个命名空间既被存活的 Host 插件注册、又被服务给浏览器时，它的卡片才会渲染。未组装该插件的部署——或未向任何客户端服务该命名空间的部署——不会渲染空卡片或禁用卡片，而是什么都不渲染，因此这一分区反映的是该部署实际运行的东西。
+
+第一批覆盖 shell 执行器（`bash`）、agent 循环的工具调用并行度（`agent-loop`）以及 DeepSeek 搜索提供方（`web-search-deepseek`）。
+
+## 扩展点
+
+本分区声明了根级列表 slot `settings.plugin.item`。带浏览器半侧的插件把自己的卡片注册进该 slot 并拥有其控件；本包既不枚举命名空间，也不渲染未被交给它的表单。排序遵循 slot 的 `order`。
+
+## 写入
+
+卡片暂存用户输入，只有用户保存时才写入。每个控件渲染的都是暂存文本，因此屏幕上所见即保存后所存；**放弃修改**丢弃这些草稿，持有未保存修改的卡片即使收起也会在标题上标明。重置暂存的是组装默认值而非立即写入；字段不接受的草稿会阻塞保存，而不是被丢弃。
+
+保存时，每个暂存字段都通过客户端 settings scope 写入，该 scope 用读取时的命名空间 revision 为每次写入设栅，因此已与文档脱节的表单会被拒绝，而不是覆盖并发变更。某个值是否被接受只有 Host 说了算——schema 表达不了的约束归它的校验器所有——因此卡片在写入后回读分节，报告没有落盘的保存，并保留这些草稿供用户修改。
+
+密钥也可能从别的表层写入——模型页寻址的是同一个引用——而那不改变任何 settings 分节，因此卡片会在转发来的 `credentials/updated` 事件报告它所关注的引用时重读。
+
+字段是否被覆盖，取决于它是否出现在原始用户层中，而非取决于它的值；重置会清除该字段，使其重新继承组装层。secret 角色的字段绝不搭乘响应，因此密钥控件初始为空、只报告是否已配置，并经由 credentials 领域而非 settings 分节写入；空草稿不写入任何东西，保留已存密钥。
+
+## 模型体验
+
+无。该分区渲染浏览器配置 UI；它写入的值只通过拥有这些值的插件到达模型，而这些效应各由其拥有方的包记录。
+
+#### KV Cache 影响
+
+无；该包既不组装也不发送提供方请求。
+
+## 已知限制与暂缓事项
+
+- **只有宿主平面的插件会出现**——由 agent preset 挂载的插件把配置内联在该 preset 的 `agent.cordis.yml` 中，且根本无法注册 settings 命名空间（同一 preset 挂载第二个会话时会因重复注册而失败），因此本分区不会列出它。编辑那些值仍是 preset 编辑器的职责。
+- **暴露是 Host 的白名单，而非插件的声明**——不在 api-proxy 白名单中的命名空间，即便其拥有方已注册，也只会得到 `settings-not-exposed`，因此在本仓库之外分发的插件无法在不改动 `packages/host/apiproxy` 的前提下让自己的配置出现在这里。
+- **shell 卡片跟随被组装的执行器**——POSIX 与 PowerShell 两个执行器家族共用 `bash` 命名空间，因为一个宿主只组装其中之一，所以被服务的 schema 随平台不同（PowerShell 多出 `pwshPath`），尽管卡片在两者下编辑的都是同样两个字段；而两者都不组装的部署不会显示这张卡片。
+- **空态数的是已注册卡片，不是可见卡片**——命名空间未被本部署暴露的卡片什么都不渲染，但仍计入数量，因此一个都不暴露的部署看到的是空列表而非那行空态文案。该计数还只读取一次，因为渲染器会缓存根级 entry 的 inject face；之后注册的卡片不会让它变大。
--- a/packages/client/ui-plugin-config/package.json
+++ b/packages/client/ui-plugin-config/package.json
@@ -0,0 +1,86 @@
+{
+  "name": "@deepseek-ai/dsh-client-ui-plugin-config",
+  "description": "Plugin configuration section: host-plane plugin settings as expandable cards",
+  "version": "0.0.1-rc.1",
+  "publishConfig": {
+    "access": "restricted"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/deepseek-ai/deepseek-harness.git",
+    "directory": "packages/client/ui-plugin-config"
+  },
+  "type": "module",
+  "main": "lib/index.js",
+  "types": "lib/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/types/index.d.ts",
+      "default": "./lib/index.js"
+    },
+    "./invariant": {
+      "types": "./lib/types/invariant.d.ts",
+      "default": "./lib/invariant.js"
+    },
+    "./client": {
+      "types": "./lib/types/client/index.d.ts",
+      "default": "./lib/client.js"
+    },
+    "./src/*": "./src/*",
+    "./package.json": "./package.json"
+  },
+  "dsh": {
+    "client": {
+      "inject": [
+        "@deepseek-ai/dsh-client-connection",
+        "@deepseek-ai/dsh-client-locale",
+        "@deepseek-ai/dsh-client-runtime",
+        "@deepseek-ai/dsh-client-ui-settings",
+        "@deepseek-ai/dsh-api-remotes"
+      ],
+      "platform": "web"
+    }
+  },
+  "scripts": {
+    "bundle": "tsdown",
+    "watch": "tsdown --watch"
+  },
+  "license": "BSD-3-Clause",
+  "peerDependencies": {
+    "@deepseek-ai/cordis": "workspace:^",
+    "@deepseek-ai/dsh-api-remotes": "workspace:^",
+    "@deepseek-ai/dsh-client-connection": "workspace:^",
+    "@deepseek-ai/dsh-client-locale": "workspace:^",
+    "@deepseek-ai/dsh-client-runtime": "workspace:^",
+    "@deepseek-ai/dsh-client-ui-primitives": "workspace:^",
+    "@deepseek-ai/dsh-client-ui-settings": "workspace:^",
+    "@deepseek-ai/dsh-client-ui-slots": "workspace:^",
+    "@deepseek-ai/dsh-client-web-react": "workspace:^",
+    "@deepseek-ai/dsh-invariants": "workspace:^",
+    "react": "^18.2.0"
+  },
+  "devDependencies": {
+    "@deepseek-ai/cordis": "workspace:^",
+    "@deepseek-ai/dsh-api-remotes": "workspace:^",
+    "@deepseek-ai/dsh-client-connection": "workspace:^",
+    "@deepseek-ai/dsh-client-locale": "workspace:^",
+    "@deepseek-ai/dsh-client-runtime": "workspace:^",
+    "@deepseek-ai/dsh-client-test-runtime": "workspace:^",
+    "@deepseek-ai/dsh-client-ui-primitives": "workspace:^",
+    "@deepseek-ai/dsh-client-ui-settings": "workspace:^",
+    "@deepseek-ai/dsh-client-ui-slots": "workspace:^",
+    "@deepseek-ai/dsh-client-web-react": "workspace:^",
+    "@deepseek-ai/dsh-invariants": "workspace:^",
+    "@types/react": "~18.3.1",
+    "react": "^18.2.0"
+  },
+  "files": [
+    "lib/index.js",
+    "lib/invariant.js",
+    "lib/client.js",
+    "lib/types/**/*.d.ts"
+  ],
+  "dependencies": {
+    "clsx": "^2.0.0"
+  }
+}
--- a/packages/client/ui-plugin-config/src/client/AgentLoopCard.tsx
+++ b/packages/client/ui-plugin-config/src/client/AgentLoopCard.tsx
@@ -0,0 +1,47 @@
+/** The agent loop's card: how many tool calls one step may run at once. */
+
+import type { InjectFace, PropsLocale, PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots'
+import { ValueField } from './fields.tsx'
+import { PluginCard } from './PluginCard.tsx'
+import type { AgentLoopCardFace } from './agent-loop-store.ts'
+import type {} from './slot-contract.ts'
+
+/** Props the renderer binds for the agent-loop card. */
+export type AgentLoopCardProps =
+  PropsRuntime<'settings.plugin.item'>
+  & PropsLocale<'settings.pluginConfig'>
+  & InjectFace<AgentLoopCardFace>
+
+/**
+ * Render the agent-loop card.
+ * @param props - locale copy, the card snapshot, and its form actions.
+ * @returns the card.
+ */
+export function AgentLoopCard(props: AgentLoopCardProps) {
+  const { t } = props
+  const state = props.useAgentLoopCard(snapshot => snapshot)
+  return (
+    <PluginCard
+      t={t}
+      titleKey="agentLoopTitle"
+      descriptionKey="agentLoopDescription"
+      state={state}
+      onSave={props.save}
+      onDiscard={props.discard}
+    >
+      <ValueField
+        id="plugin-config-agent-loop-parallel"
+        label={t('agentLoopMaxParallel')}
+        hint={t('agentLoopMaxParallelHint')}
+        overriddenLabel={t('overridden')}
+        resetLabel={t('reset')}
+        invalidLabel={t('invalidNumber')}
+        numeric
+        disabled={!state.writable}
+        {...state.maxParallelToolCalls}
+        onEdit={(text) => { props.edit('maxParallelToolCalls', text) }}
+        onReset={() => { props.resetField('maxParallelToolCalls') }}
+      />
+    </PluginCard>
+  )
+}
--- a/packages/client/ui-plugin-config/src/client/BashCard.tsx
+++ b/packages/client/ui-plugin-config/src/client/BashCard.tsx
@@ -0,0 +1,61 @@
+/** The shell plugin's card: the limits every command the agent runs is bound by. */
+
+import type { InjectFace, PropsLocale, PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots'
+import { ValueField } from './fields.tsx'
+import { PluginCard } from './PluginCard.tsx'
+import type { BashCardFace } from './bash-store.ts'
+import type {} from './slot-contract.ts'
+
+/** Props the renderer binds for the shell card. */
+export type BashCardProps =
+  PropsRuntime<'settings.plugin.item'>
+  & PropsLocale<'settings.pluginConfig'>
+  & InjectFace<BashCardFace>
+
+/**
+ * Render the shell card.
+ * @param props - locale copy, the card snapshot, and its form actions.
+ * @returns the card.
+ */
+export function BashCard(props: BashCardProps) {
+  const { t } = props
+  const state = props.useBashCard(snapshot => snapshot)
+  const disabled = !state.writable
+  return (
+    <PluginCard
+      t={t}
+      titleKey="bashTitle"
+      descriptionKey="bashDescription"
+      state={state}
+      onSave={props.save}
+      onDiscard={props.discard}
+    >
+      <ValueField
+        id="plugin-config-bash-timeout"
+        label={t('bashTimeoutMs')}
+        hint={t('bashTimeoutMsHint')}
+        overriddenLabel={t('overridden')}
+        resetLabel={t('reset')}
+        invalidLabel={t('invalidNumber')}
+        numeric
+        disabled={disabled}
+        {...state.timeoutMs}
+        onEdit={(text) => { props.edit('timeoutMs', text) }}
+        onReset={() => { props.resetField('timeoutMs') }}
+      />
+      <ValueField
+        id="plugin-config-bash-output"
+        label={t('bashMaxOutputBytes')}
+        hint={t('bashMaxOutputBytesHint')}
+        overriddenLabel={t('overridden')}
+        resetLabel={t('reset')}
+        invalidLabel={t('invalidNumber')}
+        numeric
+        disabled={disabled}
+        {...state.maxOutputBytes}
+        onEdit={(text) => { props.edit('maxOutputBytes', text) }}
+        onReset={() => { props.resetField('maxOutputBytes') }}
+      />
+    </PluginCard>
+  )
+}
--- a/packages/client/ui-plugin-config/src/client/PluginCard.module.css
+++ b/packages/client/ui-plugin-config/src/client/PluginCard.module.css
@@ -0,0 +1,157 @@
+/* Plugin card: a header that names the plugin, disclosing its controls in place. */
+
+.card {
+  list-style: none;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 12px;
+  background: var(--dsw-alias-bg-layer-3);
+  transition: border-color .16s, background .16s;
+}
+
+.card:hover {
+  border-color: var(--dsw-alias-label-dimmed);
+}
+
+/* An open card reads as the one being worked on, not merely taller. */
+.cardOpen {
+  background: var(--dsw-alias-bg-layer-2);
+  border-color: var(--dsw-alias-label-dimmed);
+}
+
+.header {
+  width: 100%;
+  appearance: none;
+  border: 0;
+  background: none;
+  font: inherit;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 16px;
+  border-radius: 12px;
+}
+
+.header:focus-visible {
+  outline: 2px solid var(--dsw-alias-brand-primary);
+  outline-offset: -2px;
+}
+
+/* Name over description: the description is what tells two plugins apart, so
+   it gets its own line rather than trailing the name. */
+.headText {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.name {
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 1.4;
+  color: var(--dsw-alias-label-primary);
+}
+
+.description {
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.chevron {
+  flex: none;
+  color: var(--dsw-alias-label-tertiary);
+  transition: transform .16s;
+}
+
+.chevronOpen {
+  transform: rotate(180deg);
+}
+
+.body {
+  border-top: 1px solid var(--dsw-alias-border-l2);
+  margin: 0 16px;
+  padding-bottom: 8px;
+}
+
+.readOnly {
+  margin: 12px 0 0;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+/* Carried on the header so a collapsed card still says it holds edits. */
+.pending {
+  flex: none;
+  border-radius: 999px;
+  padding: 1px 8px;
+  font-size: 11px;
+  line-height: 17px;
+  font-weight: 500;
+  white-space: nowrap;
+  background: var(--dsw-alias-bg-module-platform);
+  color: var(--dsw-alias-label-secondary);
+}
+
+.footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 12px 0 4px;
+  border-top: 1px solid var(--dsw-alias-border-l2);
+}
+
+.failed {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--dsw-alias-label-error);
+}
+
+.discard,
+.save {
+  appearance: none;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  padding: 5px 14px;
+  font: inherit;
+  font-size: 13px;
+  line-height: 1.5;
+  cursor: pointer;
+}
+
+.discard {
+  border-color: var(--dsw-alias-border-l2);
+  background: none;
+  color: var(--dsw-alias-label-secondary);
+}
+
+.discard:hover:not(:disabled) {
+  color: var(--dsw-alias-label-primary);
+  border-color: var(--dsw-alias-label-dimmed);
+}
+
+.save {
+  background: var(--dsw-alias-label-primary);
+  color: var(--dsw-alias-bg-layer-3);
+}
+
+.discard:disabled,
+.save:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
+.discard:focus-visible,
+.save:focus-visible {
+  outline: 2px solid var(--dsw-alias-brand-primary);
+  outline-offset: 1px;
+}
--- a/packages/client/ui-plugin-config/src/client/PluginCard.tsx
+++ b/packages/client/ui-plugin-config/src/client/PluginCard.tsx
@@ -0,0 +1,98 @@
+/**
+ * One plugin's card: a header naming the plugin and what its settings govern,
+ * disclosing that plugin's controls in place, with the save that writes them.
+ *
+ * The header is its own button rather than a shared disclosure row because a
+ * card stacks its name over its description, while that row lays the two side
+ * by side — the layout, not the behavior, is what differs. Disclosure is
+ * card-local state: which card a user has open is a reading gesture, not
+ * something the Host or the section has any stake in. Staged edits outlive
+ * collapsing, so the header marks a card holding unsaved edits.
+ *
+ * A card renders nothing while its namespace is unavailable: a deployment that
+ * does not compose the owning plugin should show no trace of it, rather than a
+ * disabled card the user cannot act on.
+ */
+
+import { useState, type ReactNode } from 'react'
+import clsx from 'clsx'
+import { IconChevronDownOutline14 } from '@deepseek-ai/dsh-client-ui-primitives'
+import type { CardShell } from './card-store.ts'
+import type { PluginConfigKey } from './locales.ts'
+import css from './PluginCard.module.css'
+
+/** Card chrome shared by every plugin section. */
+export interface PluginCardProps {
+  /** Locale reader for this section's copy. */
+  t: (key: PluginConfigKey) => string
+  /** Locale key of the plugin's name. */
+  titleKey: PluginConfigKey
+  /** Locale key of the line describing what this plugin's settings govern. */
+  descriptionKey: PluginConfigKey
+  /** The card's form state: availability, writability, and what a save would do. */
+  state: CardShell
+  /** Write every staged edit. */
+  onSave: () => void
+  /** Drop every staged edit. */
+  onDiscard: () => void
+  /** The plugin's controls. */
+  children: ReactNode
+}
+
+/**
+ * Render one plugin card.
+ * @param props - the plugin's copy keys, its form state, and its controls.
+ * @returns the card, or nothing when the namespace is unavailable.
+ */
+export function PluginCard(props: PluginCardProps) {
+  const [open, setOpen] = useState(false)
+  const { state } = props
+  if (!state.available) return null
+  const title = props.t(props.titleKey)
+  const blocked = !state.dirty || state.invalid || state.saving
+  return (
+    <li className={clsx(css.card, open && css.cardOpen)}>
+      <button
+        type="button"
+        className={css.header}
+        aria-expanded={open}
+        aria-label={`${props.t(open ? 'collapse' : 'expand')}: ${title}`}
+        onClick={() => { setOpen(!open) }}
+      >
+        <span className={css.headText}>
+          <span className={css.name}>{title}</span>
+          <span className={css.description}>{props.t(props.descriptionKey)}</span>
+        </span>
+        {state.dirty ? <span className={css.pending}>{props.t('unsaved')}</span> : null}
+        <IconChevronDownOutline14 className={clsx(css.chevron, open && css.chevronOpen)} />
+      </button>
+      {open
+        ? (
+          <div className={css.body}>
+            {!state.writable ? <p className={css.readOnly} role="status">{props.t('readOnly')}</p> : null}
+            {props.children}
+            <div className={css.footer}>
+              {state.failed ? <p className={css.failed} role="status">{props.t('saveFailed')}</p> : null}
+              <button
+                type="button"
+                className={css.discard}
+                disabled={!state.dirty || state.saving}
+                onClick={props.onDiscard}
+              >
+                {props.t('discard')}
+              </button>
+              <button
+                type="button"
+                className={css.save}
+                disabled={blocked}
+                onClick={props.onSave}
+              >
+                {props.t(state.saving ? 'saving' : 'save')}
+              </button>
+            </div>
+          </div>
+        )
+        : null}
+    </li>
+  )
+}
--- a/packages/client/ui-plugin-config/src/client/PluginConfigSection.module.css
+++ b/packages/client/ui-plugin-config/src/client/PluginConfigSection.module.css
@@ -0,0 +1,36 @@
+/* Plugin configuration section: heading, intro, and the card list. */
+
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  max-width: 720px;
+  color: var(--dsw-alias-label-primary);
+}
+
+.heading {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.intro {
+  margin: 0;
+  font-size: 13px;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.cards {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.empty {
+  margin: 0;
+  font-size: 13px;
+  color: var(--dsw-alias-label-tertiary);
+}
--- a/packages/client/ui-plugin-config/src/client/PluginConfigSection.tsx
+++ b/packages/client/ui-plugin-config/src/client/PluginConfigSection.tsx
@@ -0,0 +1,49 @@
+/**
+ * Plugin configuration section: the shell around the per-plugin cards. It
+ * enumerates nothing itself — cards arrive through the `settings.plugin.item`
+ * slot it declares, so a plugin that ships a browser half owns its own card
+ * and this section never learns what a namespace means.
+ */
+
+import type { InjectFace, PropsLocale, PropsRenderSlots, PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots'
+import type {} from './slot-contract.ts'
+import type { PluginConfigKey } from './locales.ts'
+import css from './PluginConfigSection.module.css'
+
+/** Registration-side business face for the section. */
+export interface PluginConfigSectionInjected {
+  /** How many cards the slot ledger currently holds; zero renders the empty line. */
+  cardCount: number
+}
+
+/** Props the renderer binds for the section. */
+export type PluginConfigSectionProps =
+  PropsRuntime<'settings.section'>
+  & PropsLocale<'settings.pluginConfig'>
+  & PropsRenderSlots<'settings.plugin.item'>
+  & InjectFace<PluginConfigSectionInjected>
+
+/**
+ * Render the plugin configuration section.
+ * @param props - runtime slot rendering, locale copy, and the card count.
+ * @returns the section.
+ */
+export function PluginConfigSection(props: PluginConfigSectionProps) {
+  const { t, renderSlot, cardCount } = props
+  return (
+    <div className={css.section}>
+      <h2 className={css.heading}>{t('title')}</h2>
+      <p className={css.intro}>{t('intro')}</p>
+      {cardCount === 0
+        ? <p className={css.empty}>{t('empty')}</p>
+        : <ul className={css.cards}>{renderSlot('settings.plugin.item', {})}</ul>}
+    </div>
+  )
+}
+
+declare module '@deepseek-ai/dsh-client-ui-slots' {
+  interface LocaleNamespaceMap {
+    /** Plugin configuration section and card copy. */
+    'settings.pluginConfig': PluginConfigKey
+  }
+}
--- a/packages/client/ui-plugin-config/src/client/WebSearchCard.tsx
+++ b/packages/client/ui-plugin-config/src/client/WebSearchCard.tsx
@@ -0,0 +1,78 @@
+/**
+ * The web-search provider's card: its endpoint, its per-request search budget,
+ * and the key — which is written through the credentials domain, never into
+ * the settings section, so the literal never rides a response.
+ */
+
+import type { InjectFace, PropsLocale, PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots'
+import { SecretField, ValueField } from './fields.tsx'
+import { PluginCard } from './PluginCard.tsx'
+import type { WebSearchCardFace } from './web-search-store.ts'
+import type {} from './slot-contract.ts'
+
+/** Props the renderer binds for the web-search card. */
+export type WebSearchCardProps =
+  PropsRuntime<'settings.plugin.item'>
+  & PropsLocale<'settings.pluginConfig'>
+  & InjectFace<WebSearchCardFace>
+
+/**
+ * Render the web-search card.
+ * @param props - locale copy, the card snapshot, and its form actions.
+ * @returns the card.
+ */
+export function WebSearchCard(props: WebSearchCardProps) {
+  const { t } = props
+  const state = props.useWebSearchCard(snapshot => snapshot)
+  const disabled = !state.writable
+  return (
+    <PluginCard
+      t={t}
+      titleKey="webSearchTitle"
+      descriptionKey="webSearchDescription"
+      state={state}
+      onSave={props.save}
+      onDiscard={props.discard}
+    >
+      <SecretField
+        id="plugin-config-web-search-key"
+        label={t('webSearchApiKey')}
+        hint={t('webSearchApiKeyHint')}
+        // The credentials domain accepts a key even when the settings document
+        // itself is read-only; they are separate stores with separate refusals.
+        // Its own writability is what disables this control — a key sourced
+        // from the process environment cannot be written from here.
+        disabled={!state.apiKeyWritable}
+        text={state.apiKey.text}
+        configured={state.apiKeyConfigured}
+        stateLabel={state.apiKeyConfigured ? t('webSearchApiKeySet') : t('webSearchApiKeyUnset')}
+        onEdit={(text) => { props.edit('apiKey', text) }}
+      />
+      <ValueField
+        id="plugin-config-web-search-endpoint"
+        label={t('webSearchBaseUrl')}
+        hint={t('webSearchBaseUrlHint')}
+        overriddenLabel={t('overridden')}
+        resetLabel={t('reset')}
+        invalidLabel={t('invalidNumber')}
+        disabled={disabled}
+        {...state.baseURL}
+        onEdit={(text) => { props.edit('baseURL', text) }}
+        onReset={() => { props.resetField('baseURL') }}
+      />
+      <ValueField
+        id="plugin-config-web-search-max-uses"
+        label={t('webSearchMaxUses')}
+        hint={t('webSearchMaxUsesHint')}
+        overriddenLabel={t('overridden')}
+        resetLabel={t('reset')}
+        invalidLabel={t('invalidNumber')}
+        numeric
+        disabled={disabled}
+        {...state.maxUses}
+        onEdit={(text) => { props.edit('maxUses', text) }}
+        onReset={() => { props.resetField('maxUses') }}
+      />
+    </PluginCard>
+  )
+}
--- a/packages/client/ui-plugin-config/src/client/agent-loop-store.ts
+++ b/packages/client/ui-plugin-config/src/client/agent-loop-store.ts
@@ -0,0 +1,57 @@
+/** The agent-loop card's staged form over the `agent-loop` settings namespace. */
+
+import type { SettingsScope, SnapshotStore } from '@deepseek-ai/dsh-client-runtime/client'
+import { CardForm, numberField, type CardActions, type CardFieldState, type CardShell } from './card-store.ts'
+
+/**
+ * Namespace of the agent loop's user-owned settings. Spelled here rather than
+ * imported: a client package must not depend on a Host package.
+ */
+export const AGENT_LOOP_NS = 'agent-loop'
+
+/**
+ * The agent-loop fields this card edits. The Host section carries only this
+ * field — the composed `agents` array is deliberately not part of it.
+ */
+export interface AgentLoopSettings {
+  /** Upper bound on parallel-safe tool calls in flight per step. */
+  maxParallelToolCalls?: number
+}
+
+/** What the agent-loop card renders. */
+export interface AgentLoopCardState extends CardShell {
+  /** Parallel tool-call cap. */
+  maxParallelToolCalls: CardFieldState
+}
+
+/** The registration-side face the agent-loop card's slot entry injects. */
+export interface AgentLoopCardFace extends CardActions {
+  hooks: {
+    /** Card snapshot bound by the renderer as useAgentLoopCard. */
+    agentLoopCard: SnapshotStore<AgentLoopCardState>
+  }
+}
+
+/** Bridges the `agent-loop` scope onto the card's staged form. */
+export class AgentLoopCardController {
+  private readonly form: CardForm<AgentLoopSettings>
+  private readonly store: SnapshotStore<AgentLoopCardState>
+
+  /** @param scope - the bound settings scope for the `agent-loop` namespace. */
+  constructor(scope: SettingsScope<AgentLoopSettings>) {
+    this.form = new CardForm(scope, [numberField('maxParallelToolCalls')])
+    this.store = this.form.bind(() => this.projection())
+  }
+
+  private projection(): AgentLoopCardState {
+    return { ...this.form.shell(), maxParallelToolCalls: this.form.field('maxParallelToolCalls') }
+  }
+
+  /**
+   * Build the face the card's slot registration injects.
+   * @returns the card's snapshot and its form actions.
+   */
+  inject(): AgentLoopCardFace {
+    return { hooks: { agentLoopCard: this.store }, ...this.form.actions() }
+  }
+}
--- a/packages/client/ui-plugin-config/src/client/bash-store.ts
+++ b/packages/client/ui-plugin-config/src/client/bash-store.ts
@@ -0,0 +1,63 @@
+/** The shell card's staged form over the `bash` settings namespace. */
+
+import type { SettingsScope, SnapshotStore } from '@deepseek-ai/dsh-client-runtime/client'
+import { CardForm, numberField, type CardActions, type CardFieldState, type CardShell } from './card-store.ts'
+
+/**
+ * Namespace of the shell capability. Spelled here rather than imported: a
+ * client package must not depend on a Host package, and the executor families
+ * that own it spell the same value.
+ */
+export const BASH_NS = 'bash'
+
+/** The shell fields this card edits — a subset of the served schema by design. */
+export interface BashSettings {
+  /** Foreground command timeout in milliseconds. */
+  timeoutMs?: number
+  /** Per-stream in-memory output cap in bytes. */
+  maxOutputBytes?: number
+}
+
+/** What the shell card renders. */
+export interface BashCardState extends CardShell {
+  /** Command timeout in milliseconds. */
+  timeoutMs: CardFieldState
+  /** Per-stream output cap in bytes. */
+  maxOutputBytes: CardFieldState
+}
+
+/** The registration-side face the shell card's slot entry injects. */
+export interface BashCardFace extends CardActions {
+  hooks: {
+    /** Card snapshot bound by the renderer as useBashCard. */
+    bashCard: SnapshotStore<BashCardState>
+  }
+}
+
+/** Bridges the `bash` scope onto the shell card's staged form. */
+export class BashCardController {
+  private readonly form: CardForm<BashSettings>
+  private readonly store: SnapshotStore<BashCardState>
+
+  /** @param scope - the bound settings scope for the `bash` namespace. */
+  constructor(scope: SettingsScope<BashSettings>) {
+    this.form = new CardForm(scope, [numberField('timeoutMs'), numberField('maxOutputBytes')])
+    this.store = this.form.bind(() => this.projection())
+  }
+
+  private projection(): BashCardState {
+    return {
+      ...this.form.shell(),
+      timeoutMs: this.form.field('timeoutMs'),
+      maxOutputBytes: this.form.field('maxOutputBytes'),
+    }
+  }
+
+  /**
+   * Build the face the card's slot registration injects.
+   * @returns the card's snapshot and its form actions.
+   */
+  inject(): BashCardFace {
+    return { hooks: { bashCard: this.store }, ...this.form.actions() }
+  }
+}
--- a/packages/client/ui-plugin-config/src/client/card-store.ts
+++ b/packages/client/ui-plugin-config/src/client/card-store.ts
@@ -0,0 +1,351 @@
+/**
+ * Shared form model behind every plugin card.
+ *
+ * A card stages what the user types and writes it only when they save. Each
+ * settings write is a durable, revision-fenced document mutation, so a control
+ * that committed as it settled turned one edit into a write the user never
+ * asked for and could not preview; staged text makes what is on screen exactly
+ * what a save would store.
+ *
+ * A field shows its effective value — the user layer over the composition
+ * layer over the schema default — and whether the user layer carries it. That
+ * presence, not a value comparison, is what marks a field overridden: an
+ * override equal to the composition default is still an override.
+ */
+
+import type { SettingsScope, SettingsScopeSnapshot } from '@deepseek-ai/dsh-client-runtime/client'
+import { createSnapshotStore, type SnapshotStore } from '@deepseek-ai/dsh-client-runtime/client'
+
+/** The write one field's staged text performs when the card is saved. */
+export type FieldWrite =
+  | { kind: 'set'; value: unknown }
+  | { kind: 'clear' }
+
+/** How one section field converts between its stored value and its draft text. */
+export interface CardFieldSpec {
+  /** Field name inside the namespace section. */
+  field: string
+  /** Render a stored value as draft text; the empty string when the section carries none. */
+  format: (value: unknown) => string
+  /**
+   * The write this draft text stages, or undefined when the text is not a
+   * value this field accepts — which blocks the save rather than discarding it.
+   */
+  parse: (text: string) => FieldWrite | undefined
+}
+
+/**
+ * A control whose value is written outside the settings section. A credential
+ * literal never rides a response, so its draft has nothing to seed from: it is
+ * blank until typed, and a blank draft writes nothing.
+ */
+export interface CardSecretSpec {
+  /** Field name addressing this control inside the card's form. */
+  field: string
+  /** Write the staged text; resolves to whether the Host accepted it. */
+  write: (text: string) => Promise<boolean>
+}
+
+/** One field as a card's control renders it. */
+export interface CardFieldState {
+  /** Draft text the control renders. */
+  text: string
+  /**
+   * Whether saving would leave a user-layer entry for this field. A staged
+   * edit answers for itself, so the badge previews the save rather than
+   * reporting a state the pending edit already contradicts.
+   */
+  overridden: boolean
+  /** Whether the draft is not a value this field accepts, which blocks saving. */
+  invalid: boolean
+}
+
+/** Form state every plugin card shares. */
+export interface CardShell {
+  /** False while the namespace is not served to this client; the card renders nothing. */
+  available: boolean
+  /** Whether the Host document accepts writes. */
+  writable: boolean
+  /** Whether the form holds edits that a save would write. */
+  dirty: boolean
+  /** Whether any staged draft is invalid, which blocks the save. */
+  invalid: boolean
+  /** Whether a save is crossing the wire. */
+  saving: boolean
+  /** Whether the last save did not land as staged; cleared by the next edit or save. */
+  failed: boolean
+}
+
+/** The write actions every plugin card's slot entry injects. */
+export interface CardActions {
+  /** Stage draft text for one field. */
+  edit: (field: string, text: string) => void
+  /** Stage a clear, so saving lets the field re-inherit the composition layer. */
+  resetField: (field: string) => void
+  /** Write every staged edit, then re-seed from what the Host accepted. */
+  save: () => void
+  /** Drop every staged edit. */
+  discard: () => void
+}
+
+/** One field's staged edit. */
+interface StagedEdit {
+  /** Draft text the control renders. */
+  text: string
+  /** True when this edit clears the field whatever text it shows. */
+  clear: boolean
+}
+
+/** One staged edit resolved into the write a save performs. */
+interface PlannedWrite {
+  /** Field this entry writes. */
+  field: string
+  /**
+   * Perform the write and report whether the Host holds the staged value
+   * afterwards; undefined when the draft is not a value the field accepts.
+   */
+  run: (() => Promise<boolean>) | undefined
+}
+
+/**
+ * A whole-number field. An empty draft clears the field; any other draft that
+ * is not a finite number blocks the save.
+ * @param field - field name inside the namespace section.
+ * @returns the field's conversion spec.
+ */
+export function numberField(field: string): CardFieldSpec {
+  return {
+    field,
+    // A section that carries no number for this field renders empty rather
+    // than as a value nobody chose.
+    format: value => typeof value === 'number' ? String(value) : '',
+    parse: (text) => {
+      const trimmed = text.trim()
+      if (trimmed === '') return { kind: 'clear' }
+      const parsed = Number(trimmed)
+      return Number.isFinite(parsed) ? { kind: 'set', value: parsed } : undefined
+    },
+  }
+}
+
+/**
+ * A free-text field. An empty draft clears the field, so emptying the control
+ * and saving is the same gesture as resetting it.
+ * @param field - field name inside the namespace section.
+ * @returns the field's conversion spec.
+ */
+export function textField(field: string): CardFieldSpec {
+  return {
+    field,
+    format: value => typeof value === 'string' ? value : '',
+    parse: (text) => {
+      const trimmed = text.trim()
+      return trimmed === '' ? { kind: 'clear' } : { kind: 'set', value: trimmed }
+    },
+  }
+}
+
+/**
+ * Stages one card's edits over one settings namespace and writes them on save.
+ *
+ * The form publishes through a snapshot store because slot components read
+ * through a snapshot selector, while both the scope and the local drafts
+ * change underneath; every projection is rebuilt from the two together.
+ */
+export class CardForm<T> {
+  private readonly specs: Map<string, CardFieldSpec>
+  private readonly secretSpecs: Map<string, CardSecretSpec>
+  private readonly staged = new Map<string, StagedEdit>()
+  private readonly listeners = new Set<() => void>()
+  private saving = false
+  private failed = false
+
+  /**
+   * @param scope - the bound settings scope for this card's namespace.
+   * @param specs - the section fields this card edits.
+   * @param secrets - the card's write-only controls, written outside the section.
+   */
+  constructor(
+    private readonly scope: SettingsScope<T>,
+    specs: CardFieldSpec[],
+    secrets: CardSecretSpec[] = [],
+  ) {
+    this.specs = new Map(specs.map(spec => [spec.field, spec]))
+    this.secretSpecs = new Map(secrets.map(spec => [spec.field, spec]))
+    scope.subscribe(() => { this.publish() })
+  }
+
+  /**
+   * Publish a projection of this form, rebuilt whenever the scope or a draft changes.
+   * @param project - build the card's state from the form's current reads.
+   * @returns the store the card's component reads through its bound selector.
+   */
+  bind<S>(project: () => S): SnapshotStore<S> {
+    const store = createSnapshotStore(project())
+    this.listeners.add(() => { store.set(project()) })
+    return store
+  }
+
+  /**
+   * Read the card-level state: what the Host serves, and what a save would do.
+   * @returns the form state every card shares.
+   */
+  shell(): CardShell {
+    const snapshot = this.scope.getSnapshot()
+    const plan = this.plan()
+    return {
+      available: snapshot.status === 'ready',
+      writable: snapshot.writable,
+      dirty: plan.length > 0,
+      invalid: plan.some(item => item.run === undefined),
+      saving: this.saving,
+      failed: this.failed,
+    }
+  }
+
+  /**
+   * Read one control's state.
+   * @param field - field name of a section field or of a write-only control.
+   * @returns the draft text, whether a save would leave an override, and whether it is invalid.
+   */
+  field(field: string): CardFieldState {
+    const staged = this.staged.get(field)
+    if (this.secretSpecs.has(field)) {
+      return { text: staged?.text ?? '', overridden: false, invalid: false }
+    }
+    const spec = this.spec(field)
+    if (staged === undefined) {
+      return { text: spec.format(this.sectionValue(field)), overridden: this.stored(field), invalid: false }
+    }
+    const write = staged.clear ? { kind: 'clear' as const } : spec.parse(staged.text)
+    return {
+      text: staged.text,
+      overridden: write?.kind === 'set',
+      invalid: write === undefined,
+    }
+  }
+
+  /**
+   * Build the edit, reset, save, and discard actions bound to this form.
+   * @returns the actions a card's slot entry injects.
+   */
+  actions(): CardActions {
+    return {
+      edit: (field, text) => { this.stage(field, { text, clear: false }) },
+      resetField: (field) => {
+        this.stage(field, { text: this.spec(field).format(this.baseValue(field)), clear: true })
+      },
+      save: () => { void this.save() },
+      discard: () => {
+        if (this.staged.size === 0 && !this.failed) return
+        this.staged.clear()
+        this.failed = false
+        this.publish()
+      },
+    }
+  }
+
+  /**
+   * Write every staged edit, then re-seed from what the Host accepted.
+   *
+   * The Host is the only authority on whether a value was accepted — its
+   * validators own the constraints no schema can express — so the outcome is
+   * read back from the section rather than predicted here. A save that did not
+   * land keeps its drafts, so the user can correct them instead of retyping.
+   * @returns settlement after every write and the read-back.
+   */
+  async save(): Promise<void> {
+    const plan = this.plan()
+    const writes = plan.flatMap(item => item.run === undefined ? [] : [item.run])
+    if (plan.length === 0 || this.saving || writes.length !== plan.length) return
+    this.saving = true
+    this.failed = false
+    this.publish()
+    let landed = true
+    for (const write of writes) {
+      landed = await write() && landed
+    }
+    if (landed) this.staged.clear()
+    this.saving = false
+    this.failed = !landed
+    this.publish()
+  }
+
+  /**
+   * Every staged edit a save would write. An entry whose draft is not a value
+   * its field accepts carries no write: the form is still dirty, and the save
+   * refuses rather than dropping the edit.
+   * @returns the planned writes, in the order the fields were staged.
+   */
+  private plan(): PlannedWrite[] {
+    const plan: PlannedWrite[] = []
+    for (const [field, staged] of this.staged) {
+      const secret = this.secretSpecs.get(field)
+      if (secret !== undefined) {
+        const value = staged.text.trim()
+        if (value !== '') plan.push({ field, run: () => secret.write(value) })
+        continue
+      }
+      const spec = this.spec(field)
+      if (staged.clear) {
+        if (this.stored(field)) plan.push({ field, run: () => this.clear(field) })
+        continue
+      }
+      if (staged.text === spec.format(this.sectionValue(field))) continue
+      const write = spec.parse(staged.text)
+      if (write === undefined) plan.push({ field, run: undefined })
+      else if (write.kind === 'clear') plan.push({ field, run: () => this.clear(field) })
+      else plan.push({ field, run: () => this.store(field, write.value) })
+    }
+    return plan
+  }
+
+  private async clear(field: string): Promise<boolean> {
+    await this.scope.unset(field)
+    return !this.stored(field)
+  }
+
+  private async store(field: string, value: unknown): Promise<boolean> {
+    await this.scope.set(field, value)
+    return this.userLayer()?.[field] === value
+  }
+
+  private stage(field: string, edit: StagedEdit): void {
+    this.staged.set(field, edit)
+    this.failed = false
+    this.publish()
+  }
+
+  private spec(field: string): CardFieldSpec {
+    const spec = this.specs.get(field)
+    // Every call site names a field this card declared; a missing one is a
+    // wiring mistake that must not degrade into a silently inert control.
+    if (spec === undefined) throw new Error(`plugin card has no field ${field}`)
+    return spec
+  }
+
+  private snapshotOf(): SettingsScopeSnapshot<T> {
+    return this.scope.getSnapshot()
+  }
+
+  private sectionValue(field: string): unknown {
+    return (this.snapshotOf().value as Record<string, unknown> | undefined)?.[field]
+  }
+
+  private baseValue(field: string): unknown {
+    return (this.snapshotOf().base as Record<string, unknown> | undefined)?.[field]
+  }
+
+  private userLayer(): Record<string, unknown> | undefined {
+    return this.snapshotOf().user as Record<string, unknown> | undefined
+  }
+
+  private stored(field: string): boolean {
+    const user = this.userLayer()
+    return user !== undefined && Object.hasOwn(user, field)
+  }
+
+  private publish(): void {
+    for (const listener of this.listeners) listener()
+  }
+}
--- a/packages/client/ui-plugin-config/src/client/fields.module.css
+++ b/packages/client/ui-plugin-config/src/client/fields.module.css
@@ -0,0 +1,113 @@
+/* Plugin configuration fields: label, control, override badge, and hint. */
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 12px 0;
+}
+
+.field + .field {
+  border-top: 1px solid var(--dsw-alias-border-l2);
+}
+
+.head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.label {
+  flex: 1;
+  min-width: 0;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.5;
+  color: var(--dsw-alias-label-primary);
+}
+
+.badges {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.badge {
+  border-radius: 999px;
+  padding: 1px 8px;
+  font-size: 11px;
+  line-height: 17px;
+  white-space: nowrap;
+  font-weight: 500;
+  background: var(--dsw-alias-bg-module-platform);
+  color: var(--dsw-alias-label-secondary);
+}
+
+.badgeMuted {
+  border-radius: 999px;
+  padding: 1px 8px;
+  font-size: 11px;
+  line-height: 17px;
+  white-space: nowrap;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.reset {
+  border: none;
+  background: none;
+  padding: 0;
+  font: inherit;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--dsw-alias-label-secondary);
+  cursor: pointer;
+}
+
+.reset:hover:not(:disabled) {
+  color: var(--dsw-alias-label-primary);
+}
+
+.reset:disabled {
+  cursor: default;
+}
+
+.input {
+  height: 34px;
+  padding: 0 12px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 8px;
+  background: var(--dsw-alias-bg-layer-3);
+  font: inherit;
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--dsw-alias-label-primary);
+}
+
+.input:focus-visible {
+  outline: none;
+  border-color: var(--dsw-alias-brand-primary);
+}
+
+.input:disabled {
+  color: var(--dsw-alias-label-tertiary);
+  cursor: default;
+}
+
+.inputInvalid {
+  composes: input;
+  border-color: var(--dsw-alias-label-error);
+}
+
+.invalid {
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--dsw-alias-label-error);
+}
+
+.hint {
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--dsw-alias-label-tertiary);
+}
--- a/packages/client/ui-plugin-config/src/client/fields.tsx
+++ b/packages/client/ui-plugin-config/src/client/fields.tsx
@@ -0,0 +1,123 @@
+/**
+ * Hand-written controls for the plugin configuration forms. Each renders one
+ * field's label, its staged text, whether saving would leave an override, and
+ * — when one stands — the reset that stages a clear back to the composition
+ * layer. Nothing here writes: a control reports what the user typed, and the
+ * card's save is the single point where a draft becomes a document mutation.
+ */
+
+import css from './fields.module.css'
+
+/** What every field control needs regardless of its value type. */
+export interface FieldProps {
+  /** Stable id associating the label with its control. */
+  id: string
+  /** Visible label. */
+  label: string
+  /** One-line explanation rendered under the control. */
+  hint: string
+  /** Draft text this control renders. */
+  text: string
+  /** True when saving would leave a user-layer entry for this field. */
+  overridden: boolean
+  /** True when the draft is not a value this field accepts. */
+  invalid: boolean
+  /** Copy for the overridden badge. */
+  overriddenLabel: string
+  /** Copy for the reset control. */
+  resetLabel: string
+  /** Copy shown in place of the hint while the draft is invalid. */
+  invalidLabel: string
+  /** Disables every control (read-only document, or an unavailable namespace). */
+  disabled: boolean
+  /** Stage draft text. */
+  onEdit: (text: string) => void
+  /** Stage a clear so the field re-inherits the composition layer. */
+  onReset: () => void
+}
+
+/**
+ * A staged value field. `numeric` only hints the keypad: which drafts a field
+ * accepts is decided by its spec, so the control never silently rewrites what
+ * the user typed.
+ * @param props - the field's copy, its staged text, and the edit actions.
+ * @returns the labelled control.
+ */
+export function ValueField(props: FieldProps & {
+  /** Hints a numeric keypad without narrowing what the control accepts. */
+  numeric?: boolean
+  /** Placeholder shown while the draft is empty. */
+  placeholder?: string
+}) {
+  return (
+    <div className={css.field}>
+      <div className={css.head}>
+        <label className={css.label} htmlFor={props.id}>{props.label}</label>
+        {props.overridden
+          ? (
+            <span className={css.badges}>
+              <span className={css.badge}>{props.overriddenLabel}</span>
+              <button
+                type="button"
+                className={css.reset}
+                disabled={props.disabled}
+                onClick={props.onReset}
+              >
+                {props.resetLabel}
+              </button>
+            </span>
+          )
+          : null}
+      </div>
+      <input
+        id={props.id}
+        className={props.invalid ? css.inputInvalid : css.input}
+        type="text"
+        {...props.numeric === true ? { inputMode: 'numeric' as const } : {}}
+        {...props.invalid ? { 'aria-invalid': true } : {}}
+        value={props.text}
+        placeholder={props.placeholder ?? ''}
+        disabled={props.disabled}
+        onChange={(event) => { props.onEdit(event.target.value) }}
+      />
+      <p className={props.invalid ? css.invalid : css.hint}>
+        {props.invalid ? props.invalidLabel : props.hint}
+      </p>
+    </div>
+  )
+}
+
+/**
+ * A write-only credential control. The value never rides a response, so the
+ * control reports only whether one is configured and starts blank; a blank
+ * draft writes nothing, which keeps the stored key rather than clearing it.
+ * @param props - the field's copy, its staged text, and the configured state.
+ * @returns the labelled control.
+ */
+export function SecretField(props: Pick<FieldProps, 'id' | 'label' | 'hint' | 'text' | 'disabled' | 'onEdit'> & {
+  /** Whether the Host reports a configured credential for this reference. */
+  configured: boolean
+  /** Copy describing the configured state. */
+  stateLabel: string
+}) {
+  return (
+    <div className={css.field}>
+      <div className={css.head}>
+        <label className={css.label} htmlFor={props.id}>{props.label}</label>
+        <span className={css.badges}>
+          <span className={props.configured ? css.badge : css.badgeMuted}>{props.stateLabel}</span>
+        </span>
+      </div>
+      <input
+        id={props.id}
+        className={css.input}
+        type="password"
+        autoComplete="off"
+        value={props.text}
+        disabled={props.disabled}
+        onChange={(event) => { props.onEdit(event.target.value) }}
+      />
+      <p className={css.hint}>{props.hint}</p>
+    </div>
+  )
+}
--- a/packages/client/ui-plugin-config/src/client/index.ts
+++ b/packages/client/ui-plugin-config/src/client/index.ts
@@ -0,0 +1,110 @@
+/**
+ * Plugin configuration surface, browser half — one settings section holding
+ * an expandable card per Host plugin whose configuration a user owns.
+ *
+ * The section owns no knowledge of any namespace: it declares the
+ * `settings.plugin.item` slot and renders whatever cards were registered into
+ * it, so a plugin that ships a browser half contributes its own card and its
+ * own controls. The three cards this package registers are the host-plane
+ * sections the deployment already exposes; each binds its namespace through
+ * the client settings scope, which keeps them unaware of one another.
+ */
+
+import type { ConnectionHandle } from '@deepseek-ai/dsh-client-connection/client'
+// Type-only: pulls the locale plugin's Context merge (ctx.locale).
+import type {} from '@deepseek-ai/dsh-client-locale/client'
+// Type-only: the settings shell's SlotMap merge (the 'settings.section' entry)
+// and the ctx.settingsScope Context merge. Cross-plugin collaboration goes
+// through the service, never a value import (client bundle purity gate).
+import type {} from '@deepseek-ai/dsh-client-ui-settings/client'
+import type { ClientContext } from '@deepseek-ai/dsh-client-runtime/client'
+// Type-only: the ctx.remote Context merge and the forwarded-event key face.
+import type {} from '@deepseek-ai/dsh-api-remotes/client'
+import { AgentLoopCard } from './AgentLoopCard.tsx'
+import { BashCard } from './BashCard.tsx'
+import { PluginConfigSection } from './PluginConfigSection.tsx'
+import { WebSearchCard } from './WebSearchCard.tsx'
+import { AGENT_LOOP_NS, AgentLoopCardController } from './agent-loop-store.ts'
+import { BASH_NS, BashCardController } from './bash-store.ts'
+import { WEB_SEARCH_NS, WebSearchCardController } from './web-search-store.ts'
+import { en, zh } from './locales.ts'
+
+export type { PluginConfigSectionInjected, PluginConfigSectionProps } from './PluginConfigSection.tsx'
+export type { PluginCardProps } from './PluginCard.tsx'
+export type { SettingsPluginItemOwnerProps } from './slot-contract.ts'
+export type { FieldProps } from './fields.tsx'
+export type {
+  CardActions, CardFieldSpec, CardFieldState, CardSecretSpec, CardShell,
+} from './card-store.ts'
+export type { AgentLoopCardFace, AgentLoopCardState } from './agent-loop-store.ts'
+export type { BashCardFace, BashCardState } from './bash-store.ts'
+export type { WebSearchCardFace, WebSearchCardState } from './web-search-store.ts'
+
+/** Dictionary namespace owned by this plugin. */
+const NS = 'settings.pluginConfig'
+
+/** Required services (cordis fiber inject). */
+export const inject = ['slots', 'locale', 'connection', 'remote', 'settingsScope']
+
+/**
+ * Mount the plugin configuration section and the cards this package ships.
+ * @param ctx - the browser plugin context.
+ */
+export function apply(ctx: ClientContext): void {
+  const { api } = ctx.get('connection') as ConnectionHandle
+  const t = ctx.locale.bind(NS)
+  ctx.effect(() => ctx.locale.register(NS, { zh, en }), 'ui-plugin-config: section dictionaries')
+
+  const bash = new BashCardController(ctx.settingsScope.bind({ namespace: BASH_NS }))
+  const agentLoop = new AgentLoopCardController(ctx.settingsScope.bind({ namespace: AGENT_LOOP_NS }))
+  const webSearch = new WebSearchCardController(ctx.settingsScope.bind({ namespace: WEB_SEARCH_NS }), api)
+
+  // The credential a card reports is not part of any settings section, so its
+  // scope publishes nothing when one is written. This is the only signal that
+  // a key written on another surface reached the Host.
+  ctx.effect(
+    () => ctx.remote.$on('credentials/updated', (ref) => { webSearch.refreshCredential(ref) }),
+    'ui-plugin-config: credential invalidations',
+  )
+
+  // The section renders the empty line rather than an empty list when no plugin
+  // contributed a card. The count is read once: the renderer caches a root
+  // entry's inject face per registration, so this reports what was registered
+  // when the section mounted, not what is visible now. Both gaps are bounded by
+  // this deployment always registering the three cards below — a card that
+  // arrives later would not raise the count, and a namespace this deployment
+  // does not expose leaves its card rendering nothing inside a non-empty list.
+  ctx.slots.inject('settings.section', () => ctx.slots.register({
+    name: 'settings.section',
+    id: 'plugins',
+    order: 30,
+    label: () => t('nav'),
+    locale: NS,
+    inject: () => ({ cardCount: ctx.slots.entries('settings.plugin.item').length }),
+    children: { 'settings.plugin.item': { kind: 'list', scope: 'root' } },
+  }, PluginConfigSection))
+
+  ctx.slots.inject('settings.plugin.item', function* () {
+    yield ctx.slots.register({
+      name: 'settings.plugin.item',
+      id: 'bash',
+      order: 0,
+      locale: NS,
+      inject: () => bash.inject(),
+    }, BashCard)
+    yield ctx.slots.register({
+      name: 'settings.plugin.item',
+      id: 'agent-loop',
+      order: 10,
+      locale: NS,
+      inject: () => agentLoop.inject(),
+    }, AgentLoopCard)
+    yield ctx.slots.register({
+      name: 'settings.plugin.item',
+      id: 'web-search',
+      order: 20,
+      locale: NS,
+      inject: () => webSearch.inject(),
+    }, WebSearchCard)
+  })
+}
--- a/packages/client/ui-plugin-config/src/client/locales.ts
+++ b/packages/client/ui-plugin-config/src/client/locales.ts
@@ -0,0 +1,91 @@
+/** Locale bundles for the plugin configuration section and its plugin cards. */
+
+/** Locale keys these surfaces render. */
+export type PluginConfigKey =
+  | 'nav' | 'title' | 'intro' | 'empty'
+  | 'overridden' | 'reset' | 'readOnly' | 'expand' | 'collapse'
+  | 'save' | 'saving' | 'discard' | 'unsaved' | 'saveFailed' | 'invalidNumber'
+  | 'bashTitle' | 'bashDescription' | 'bashTimeoutMs' | 'bashTimeoutMsHint'
+  | 'bashMaxOutputBytes' | 'bashMaxOutputBytesHint'
+  | 'agentLoopTitle' | 'agentLoopDescription' | 'agentLoopMaxParallel' | 'agentLoopMaxParallelHint'
+  | 'webSearchTitle' | 'webSearchDescription'
+  | 'webSearchApiKey' | 'webSearchApiKeyHint' | 'webSearchApiKeySet' | 'webSearchApiKeyUnset'
+  | 'webSearchBaseUrl' | 'webSearchBaseUrlHint' | 'webSearchMaxUses' | 'webSearchMaxUsesHint'
+
+/** English copy. */
+export const en: Record<PluginConfigKey, string> = {
+  nav: 'Plugin config',
+  title: 'Plugin configuration',
+  intro: 'Configure the plugins this deployment installed.',
+  empty: 'This deployment exposes no plugin settings.',
+  overridden: 'Overridden',
+  reset: 'Reset to default',
+  readOnly: 'This deployment stores settings read-only.',
+  expand: 'Show settings',
+  collapse: 'Hide settings',
+  save: 'Save',
+  saving: 'Saving…',
+  discard: 'Discard',
+  unsaved: 'Unsaved',
+  saveFailed: 'The deployment did not accept these values; they were left for you to correct.',
+  invalidNumber: 'Enter a number, or leave blank to use the default.',
+  bashTitle: 'Shell',
+  bashDescription: 'Limits every command the agent runs.',
+  bashTimeoutMs: 'Command timeout (ms)',
+  bashTimeoutMsHint: 'How long one command may run before it is terminated.',
+  bashMaxOutputBytes: 'Output cap per stream (bytes)',
+  bashMaxOutputBytesHint: 'Output beyond this spills to a temporary file rather than being lost.',
+  agentLoopTitle: 'Agent loop',
+  agentLoopDescription: 'How the agent dispatches tool calls.',
+  agentLoopMaxParallel: 'Parallel tool calls',
+  agentLoopMaxParallelHint: 'Upper bound on parallel-safe calls running at once within one step.',
+  webSearchTitle: 'Web search',
+  webSearchDescription: 'The DeepSeek search provider.',
+  webSearchApiKey: 'API key',
+  webSearchApiKeyHint: 'Stored outside the settings file. Leave blank to keep the current key.',
+  webSearchApiKeySet: 'A key is configured.',
+  webSearchApiKeyUnset: 'No key is configured; search is unavailable until one is.',
+  webSearchBaseUrl: 'Endpoint',
+  webSearchBaseUrlHint: 'Leave blank to use the provider default.',
+  webSearchMaxUses: 'Max searches per request',
+  webSearchMaxUsesHint: 'How many times one request may search before it must answer.',
+}
+
+/** Simplified Chinese copy. */
+export const zh: Record<PluginConfigKey, string> = {
+  nav: '插件配置',
+  title: '插件配置',
+  intro: '配置本部署已安装的插件。',
+  empty: '本部署没有开放任何插件设置。',
+  overridden: '已覆盖',
+  reset: '恢复默认',
+  readOnly: '本部署的设置为只读。',
+  expand: '展开设置',
+  collapse: '收起设置',
+  save: '保存',
+  saving: '保存中…',
+  discard: '放弃修改',
+  unsaved: '未保存',
+  saveFailed: '本部署没有接受这些值，已保留供你修改。',
+  invalidNumber: '请填数字；留空表示使用默认值。',
+  bashTitle: '终端',
+  bashDescription: '限制 agent 运行的每一条命令。',
+  bashTimeoutMs: '命令超时（毫秒）',
+  bashTimeoutMsHint: '单条命令允许运行多久，超时即终止。',
+  bashMaxOutputBytes: '单流输出上限（字节）',
+  bashMaxOutputBytesHint: '超出部分会转存到临时文件，而不是被丢弃。',
+  agentLoopTitle: 'Agent 循环',
+  agentLoopDescription: 'Agent 如何派发工具调用。',
+  agentLoopMaxParallel: '并行工具调用数',
+  agentLoopMaxParallelHint: '同一步内最多同时运行多少个可并行的调用。',
+  webSearchTitle: '网页搜索',
+  webSearchDescription: 'DeepSeek 搜索提供方。',
+  webSearchApiKey: 'API Key',
+  webSearchApiKeyHint: '不写入设置文件。留空表示保持当前密钥。',
+  webSearchApiKeySet: '已配置密钥。',
+  webSearchApiKeyUnset: '未配置密钥；配置之前搜索不可用。',
+  webSearchBaseUrl: '接口地址',
+  webSearchBaseUrlHint: '留空则使用提供方默认地址。',
+  webSearchMaxUses: '单次请求最多搜索次数',
+  webSearchMaxUsesHint: '一次请求在必须作答前最多可以搜索多少次。',
+}
--- a/packages/client/ui-plugin-config/src/client/slot-contract.ts
+++ b/packages/client/ui-plugin-config/src/client/slot-contract.ts
@@ -0,0 +1,24 @@
+/**
+ * The `settings.plugin.item` slot type — one plugin's card inside the plugin
+ * configuration section. Options: `id` (card key), `order` (card position).
+ * A card draws its own internals; the section only stacks them and reports
+ * how many there are.
+ *
+ * TYPE HOME RATIONALE: unlike `settings.general.item`, whose registrants span
+ * packages that cannot reference its declarer, every current registrant of
+ * this slot ships in this package, and a plugin registering its own card
+ * already depends on this package for the card chrome. The type therefore
+ * lives with the section that declares it at runtime.
+ */
+declare module '@deepseek-ai/dsh-client-ui-slots' {
+  interface SlotMap {
+    /** One plugin's card inside the plugin configuration section (see module JSDoc). */
+    'settings.plugin.item': { kind: 'list'; scope: 'root'; owner: SettingsPluginItemOwnerProps }
+  }
+}
+
+/** Owner share of a plugin card (the section supplies nothing). */
+export interface SettingsPluginItemOwnerProps {
+  /** Marker field: card owner props are intentionally empty. */
+  children?: never
+}
--- a/packages/client/ui-plugin-config/src/client/web-search-store.ts
+++ b/packages/client/ui-plugin-config/src/client/web-search-store.ts
@@ -0,0 +1,192 @@
+/**
+ * The web-search card's staged form over the `web-search-deepseek` settings
+ * namespace.
+ *
+ * The key is the one control that does not live in the section: its literal
+ * never rides a response, so the card learns only whether one is configured
+ * and writes it through the credentials domain, addressed by the reference the
+ * section names. It is still staged with the rest of the form, so one save
+ * covers everything the card shows.
+ */
+
+import type { IApiClient } from '@deepseek-ai/dsh-client-connection/client'
+import type { SettingsScope, SettingsScopeSnapshot, SnapshotStore } from '@deepseek-ai/dsh-client-runtime/client'
+import {
+  CardForm, numberField, textField,
+  type CardActions, type CardFieldState, type CardShell,
+} from './card-store.ts'
+
+/**
+ * Namespace of the DeepSeek search provider. Spelled here rather than
+ * imported: a client package must not depend on a Host package.
+ */
+export const WEB_SEARCH_NS = 'web-search-deepseek'
+
+/** Credential reference the provider resolves when the section names none. */
+const DEFAULT_API_KEY_REF = 'DEEPSEEK_API_KEY'
+
+/** Form field the credential control stages under. */
+const API_KEY_FIELD = 'apiKey'
+
+/** The search-provider fields this card edits. */
+export interface WebSearchSettings {
+  /** Credential reference naming the environment key. */
+  apiKeyEnv?: string
+  /** Provider endpoint; blank inherits the provider default. */
+  baseURL?: string
+  /** Maximum searches served within one request. */
+  maxUses?: number
+}
+
+/** What the credentials domain last reported, and for which reference. */
+interface CredentialState {
+  /** Reference this answer describes; a stale response for another one is dropped. */
+  ref: string
+  /** Whether any layer supplies a value for it. */
+  configured: boolean
+  /** Whether `credentials.set` can affect it; false disables the control. */
+  writable: boolean
+}
+
+/** What the web-search card renders. */
+export interface WebSearchCardState extends CardShell {
+  /** Provider endpoint. */
+  baseURL: CardFieldState
+  /** Searches allowed per request. */
+  maxUses: CardFieldState
+  /** The staged credential, which starts blank on every load. */
+  apiKey: CardFieldState
+  /** Whether the Host reports a credential configured for the referenced key. */
+  apiKeyConfigured: boolean
+  /** Whether the credentials domain accepts a write for it; false disables the control. */
+  apiKeyWritable: boolean
+}
+
+/** The registration-side face the web-search card's slot entry injects. */
+export interface WebSearchCardFace extends CardActions {
+  hooks: {
+    /** Card snapshot bound by the renderer as useWebSearchCard. */
+    webSearchCard: SnapshotStore<WebSearchCardState>
+  }
+}
+
+/** Bridges the `web-search-deepseek` scope and the credentials domain onto the card. */
+export class WebSearchCardController {
+  private readonly form: CardForm<WebSearchSettings>
+  private readonly store: SnapshotStore<WebSearchCardState>
+  private credential: CredentialState = { ref: '', configured: false, writable: true }
+
+  /**
+   * @param scope - the bound settings scope for the `web-search-deepseek` namespace.
+   * @param api - wire face used for the credential the section references.
+   */
+  constructor(
+    private readonly scope: SettingsScope<WebSearchSettings>,
+    private readonly api: Pick<IApiClient, 'credentials'>,
+  ) {
+    this.form = new CardForm(
+      scope,
+      [textField('baseURL'), numberField('maxUses')],
+      [{ field: API_KEY_FIELD, write: text => this.writeKey(text) }],
+    )
+    this.store = this.form.bind(() => this.projection())
+    scope.subscribe(() => { void this.readCredential() })
+    void this.readCredential()
+  }
+
+  private projection(): WebSearchCardState {
+    return {
+      ...this.form.shell(),
+      baseURL: this.form.field('baseURL'),
+      maxUses: this.form.field('maxUses'),
+      apiKey: this.form.field(API_KEY_FIELD),
+      apiKeyConfigured: this.credential.configured,
+      apiKeyWritable: this.credential.writable,
+    }
+  }
+
+  /**
+   * Ask the credentials domain about the reference the section currently names.
+   *
+   * The answer is stored with the reference it describes: `apiKeyEnv` can
+   * change between the request and its response, and two reads can settle out
+   * of order, so a response is published only while it still answers for the
+   * reference in force.
+   */
+  private async readCredential(): Promise<void> {
+    const ref = refOf(this.scope.getSnapshot())
+    if (ref !== this.credential.ref) {
+      // A new reference knows nothing yet; keeping the old answer would claim
+      // the key is configured under a name nobody has checked.
+      this.credential = { ref, configured: false, writable: true }
+      this.store.set(this.projection())
+    }
+    let response: Awaited<ReturnType<IApiClient['credentials']['describe']>>
+    try {
+      response = await this.api.credentials.describe({ refs: [ref] })
+    } catch (_credentialReadFailure) {
+      // The card stays usable without this: the key control simply reports the
+      // last state it knew, and a write still reaches the Host.
+      return
+    }
+    if (!response.result.ok || ref !== refOf(this.scope.getSnapshot())) return
+    const view = response.result.value.credentials[ref]
+    const next: CredentialState = {
+      ref,
+      configured: view?.configured ?? false,
+      // An unknown reference is treated as writable: the control stays usable
+      // and the Host is what refuses, rather than the card guessing a refusal.
+      writable: view?.writable ?? true,
+    }
+    if (next.configured === this.credential.configured && next.writable === this.credential.writable) return
+    this.credential = next
+    this.store.set(this.projection())
+  }
+
+  /**
+   * Re-read after the Host reports a change to the reference this card watches.
+   *
+   * A key can be written from somewhere else — the Models page addresses the
+   * same reference — and the settings section does not change when it is, so
+   * without this the badge keeps reporting a state the Host already replaced.
+   * @param ref - the reference the Host reports as changed.
+   */
+  refreshCredential(ref: string): void {
+    if (ref !== this.credential.ref) return
+    void this.readCredential()
+  }
+
+  /**
+   * Build the face the card's slot registration injects.
+   * @returns the card's snapshot and its form actions.
+   */
+  inject(): WebSearchCardFace {
+    return { hooks: { webSearchCard: this.store }, ...this.form.actions() }
+  }
+
+  /**
+   * Write the staged key, then re-read whether the Host now holds one.
+   * @param value - the staged credential literal.
+   * @returns whether the Host reports a configured credential afterwards.
+   */
+  private async writeKey(value: string): Promise<boolean> {
+    try {
+      await this.api.credentials.set({ ref: refOf(this.scope.getSnapshot()), value })
+    } catch (_credentialWriteFailure) {
+      // Refusals surface through the re-read below: the Host is the only
+      // authority on whether the key now exists.
+    }
+    await this.readCredential()
+    return this.credential.configured
+  }
+}
+
+/**
+ * The credential reference the section names, or the provider's default.
+ * @param snapshot - the current scope snapshot.
+ * @returns the reference to address.
+ */
+function refOf(snapshot: SettingsScopeSnapshot<WebSearchSettings>): string {
+  const declared = snapshot.value?.apiKeyEnv
+  return declared !== undefined && declared.length > 0 ? declared : DEFAULT_API_KEY_REF
+}
--- a/packages/client/ui-plugin-config/src/css-modules.d.ts
+++ b/packages/client/ui-plugin-config/src/css-modules.d.ts
@@ -0,0 +1,4 @@
+declare module '*.module.css' {
+  const classes: Record<string, string>
+  export default classes
+}
--- a/packages/client/ui-plugin-config/src/index.ts
+++ b/packages/client/ui-plugin-config/src/index.ts
@@ -0,0 +1,11 @@
+/**
+ * Plugin configuration surface, node half. The empty apply exists so the
+ * plugin appears in the host cordis.yml / Loader; the browser half ships the
+ * settings section through exports["./client"], discovered from the
+ * package.json dsh.client declaration. Every section this page edits is owned
+ * by the Host plugin that registered it, so this package registers no
+ * namespace of its own.
+ */
+
+/** Host plugin body — no host-side behavior for this surface plugin. */
+export function apply(): void {}
--- a/packages/client/ui-plugin-config/src/invariant.ts
+++ b/packages/client/ui-plugin-config/src/invariant.ts
@@ -0,0 +1,31 @@
+/**
+ * Package-owned invariant companion for `@deepseek-ai/dsh-client-ui-plugin-config`.
+ * @module @deepseek-ai/dsh-client-ui-plugin-config/invariant
+ */
+
+/* jscpd:ignore-start */
+import type { Context } from '@deepseek-ai/cordis'
+import type { InvariantInstaller } from '@deepseek-ai/dsh-invariants'
+
+const PACKAGE_NAME = '@deepseek-ai/dsh-client-ui-plugin-config'
+
+/** Cordis companion plugin name. */
+export const name = 'client-ui-plugin-config-invariant'
+/** Service required before the companion can reserve package ownership. */
+export const inject = ['invariants']
+
+/**
+ * No runtime invariant: this is a browser-side settings surface whose node half owns no event
+ * stream or mutable runtime data; the layering, write refusals, and exposure boundary are Host
+ * contracts covered by the owning plugins and the api-proxy.
+ */
+const install: InvariantInstaller = () => {}
+
+/**
+ * Register this package's invariant companion.
+ * @param ctx - Cordis context carrying the invariant service.
+ * @returns the installed registration's disposer after setup succeeds.
+ */
+export const apply = (ctx: Context): Promise<() => void> =>
+  Promise.resolve(ctx.invariants.register(PACKAGE_NAME, install))
+/* jscpd:ignore-end */
--- a/packages/client/ui-plugin-config/tests/apply.spec.ts
+++ b/packages/client/ui-plugin-config/tests/apply.spec.ts
@@ -0,0 +1,134 @@
+/** What the browser half registers, and that it all leaves with the fiber. */
+
+import { Context } from '@deepseek-ai/cordis'
+import { describe, expect, it, vi } from 'vitest'
+import { resolveSlotLabel } from '@deepseek-ai/dsh-client-ui-slots'
+import { SlotsService } from '@deepseek-ai/dsh-client-runtime/client'
+import { LocaleService } from '@deepseek-ai/dsh-client-locale/client'
+import { TestRemote, usePinnedBrowserLanguages } from '@deepseek-ai/dsh-client-test-runtime'
+import { SettingsScopeService } from '@deepseek-ai/dsh-client-ui-settings/client'
+import { apply, inject } from '@deepseek-ai/dsh-client-ui-plugin-config/client'
+
+// The service reads its initial locale from the browser; these specs assert
+// the shipped Chinese copy, so they state the browser they assume.
+usePinnedBrowserLanguages('zh-CN')
+
+async function bench() {
+  const ctx = new Context()
+  await ctx.plugin(SlotsService).await()
+  const locale = new LocaleService(ctx)
+  ctx.provide('locale', locale)
+  const describeCredentials = vi.fn(() => Promise.resolve({ rpcId: 'c', result: { ok: false, error: {} } }))
+  // The section binds its scopes through the Settings surface's service, and
+  // forwarded Host events reach it through the same `$dispatch` handoff the
+  // connection sink makes.
+  new TestRemote(ctx)
+  ctx.provide('connection', {
+    isLoopback: true,
+    api: {
+      settings: { describe: vi.fn(() => Promise.resolve({ rpcId: 's', result: { ok: false, error: {} } })) },
+      credentials: { describe: describeCredentials },
+    },
+  } as never)
+  await ctx.plugin(SettingsScopeService).await()
+  return { ctx, slots: ctx.get('slots') as SlotsService, describeCredentials }
+}
+
+function declareRoot(slots: SlotsService): () => void {
+  return slots.register({
+    name: 'root',
+    children: { 'settings.section': { kind: 'list', scope: 'root' } },
+  } as never, () => null)
+}
+
+describe('ui-plugin-config apply', () => {
+  it('declares the services it uses', () => {
+    expect(inject).toEqual(['slots', 'locale', 'connection', 'remote', 'settingsScope'])
+  })
+
+  it('registers the section and declares the per-plugin card slot', async () => {
+    const { ctx, slots } = await bench()
+    declareRoot(slots)
+
+    await ctx.plugin({ inject: [...inject], apply }).await()
+
+    const section = slots.entries('settings.section')[0]!
+    expect(section.options).toMatchObject({ id: 'plugins', order: 30 })
+    // The nav label is a locale-following thunk; owners resolve it at read time.
+    expect(resolveSlotLabel(section.options.label)).toBe('插件配置')
+    expect(slots.spec('settings.plugin.item')).toMatchObject({ kind: 'list', scope: 'root' })
+  })
+
+  it('registers one card per host-plane section it ships, in a stable order', async () => {
+    const { ctx, slots } = await bench()
+    declareRoot(slots)
+
+    await ctx.plugin({ inject: [...inject], apply }).await()
+
+    expect(slots.entries('settings.plugin.item').map(entry => entry.options.id))
+      .toEqual(['bash', 'agent-loop', 'web-search'])
+  })
+
+  it('injects a live card count and one business face per card', async () => {
+    const { ctx, slots } = await bench()
+    declareRoot(slots)
+    await ctx.plugin({ inject: [...inject], apply }).await()
+
+    const section = slots.entries('settings.section')[0]!
+    expect((section as { inject?: () => unknown }).inject?.()).toEqual({ cardCount: 3 })
+    for (const entry of slots.entries('settings.plugin.item')) {
+      const face = (entry as { inject?: () => unknown }).inject?.() as { hooks: Record<string, unknown> }
+      // Each card injects exactly one snapshot store plus its own actions.
+      expect(Object.keys(face.hooks)).toHaveLength(1)
+    }
+  })
+
+  it('re-reads the credential when the Host reports the watched reference changed', async () => {
+    const { ctx, slots, describeCredentials } = await bench()
+    declareRoot(slots)
+    await ctx.plugin({ inject: [...inject], apply }).await()
+    await vi.waitFor(() => { expect(describeCredentials).toHaveBeenCalled() })
+    describeCredentials.mockClear()
+
+    // A key written on another surface changes no settings section, so this
+    // event is the only thing that reaches the card.
+    ctx.remote.$dispatch('credentials/updated', ['DEEPSEEK_API_KEY'])
+
+    await vi.waitFor(() => { expect(describeCredentials).toHaveBeenCalledTimes(1) })
+  })
+
+  it('ignores a credential change for a reference no card watches', async () => {
+    const { ctx, slots, describeCredentials } = await bench()
+    declareRoot(slots)
+    await ctx.plugin({ inject: [...inject], apply }).await()
+    await vi.waitFor(() => { expect(describeCredentials).toHaveBeenCalled() })
+    describeCredentials.mockClear()
+
+    ctx.remote.$dispatch('credentials/updated', ['SOME_OTHER_KEY'])
+    await Promise.resolve()
+
+    expect(describeCredentials).not.toHaveBeenCalled()
+  })
+
+  it('registers into a declaration that arrives after apply', async () => {
+    const { ctx, slots } = await bench()
+    await ctx.plugin({ inject: [...inject], apply }).await()
+
+    declareRoot(slots)
+
+    await vi.waitFor(() => { expect(slots.entries('settings.section')).toHaveLength(1) })
+  })
+
+  it('collapses every contribution on teardown', async () => {
+    const { ctx, slots } = await bench()
+    declareRoot(slots)
+    const fiber = ctx.plugin({ inject: [...inject], apply })
+    await fiber.await()
+    expect(slots.entries('settings.plugin.item')).toHaveLength(3)
+
+    await fiber.dispose()
+
+    expect(slots.entries('settings.section')).toHaveLength(0)
+    expect(slots.spec('settings.plugin.item')).toBeUndefined()
+  })
+})
--- a/packages/client/ui-plugin-config/tests/fields.spec.tsx
+++ b/packages/client/ui-plugin-config/tests/fields.spec.tsx
@@ -0,0 +1,156 @@
+// @vitest-environment jsdom
+/**
+ * Field-control behavior: what a control renders for a staged draft, how an
+ * overridden field offers its reset, and that a control never writes on its own.
+ */
+
+import { cleanup, fireEvent, render, screen } from '@testing-library/react'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { SecretField, ValueField } from '../src/client/fields.tsx'
+
+afterEach(cleanup)
+
+const frame = {
+  id: 'field',
+  label: 'Command timeout',
+  hint: 'How long one command may run.',
+  overriddenLabel: 'Overridden',
+  resetLabel: 'Reset to default',
+  invalidLabel: 'Enter a number.',
+  disabled: false,
+  overridden: false,
+  invalid: false,
+}
+
+describe('ValueField', () => {
+  it('stages every keystroke without writing', () => {
+    const onEdit = vi.fn()
+    render(<ValueField {...frame} text="60000" onEdit={onEdit} onReset={vi.fn()} />)
+
+    fireEvent.change(screen.getByLabelText('Command timeout'), { target: { value: '9000' } })
+
+    expect(onEdit).toHaveBeenCalledWith('9000')
+  })
+
+  it('renders the staged text it is given rather than a draft of its own', () => {
+    const { rerender } = render(<ValueField {...frame} text="60000" onEdit={vi.fn()} onReset={vi.fn()} />)
+    expect(screen.getByLabelText('Command timeout')).toHaveProperty('value', '60000')
+
+    rerender(<ValueField {...frame} text="9000" onEdit={vi.fn()} onReset={vi.fn()} />)
+
+    expect(screen.getByLabelText('Command timeout')).toHaveProperty('value', '9000')
+  })
+
+  it('offers the reset only while an override would stand', () => {
+    const onReset = vi.fn()
+    const { rerender } = render(<ValueField {...frame} text="9000" onEdit={vi.fn()} onReset={onReset} />)
+    expect(screen.queryByRole('button', { name: 'Reset to default' })).toBeNull()
+
+    rerender(<ValueField {...frame} overridden text="9000" onEdit={vi.fn()} onReset={onReset} />)
+    fireEvent.click(screen.getByRole('button', { name: 'Reset to default' }))
+
+    expect(screen.getByText('Overridden')).toBeTruthy()
+    expect(onReset).toHaveBeenCalledOnce()
+  })
+
+  it('replaces the hint with the reason an invalid draft cannot be saved', () => {
+    render(<ValueField {...frame} invalid text="soon" onEdit={vi.fn()} onReset={vi.fn()} />)
+
+    expect(screen.getByText('Enter a number.')).toBeTruthy()
+    expect(screen.queryByText('How long one command may run.')).toBeNull()
+    expect(screen.getByLabelText('Command timeout').getAttribute('aria-invalid')).toBe('true')
+  })
+
+  it('hints a numeric keypad and renders a placeholder when asked', () => {
+    render(
+      <ValueField
+        {...frame}
+        numeric
+        placeholder="https://api.deepseek.com"
+        text=""
+        onEdit={vi.fn()}
+        onReset={vi.fn()}
+      />,
+    )
+    const input = screen.getByLabelText('Command timeout')
+
+    expect(input.getAttribute('inputmode')).toBe('numeric')
+    expect(input).toHaveProperty('placeholder', 'https://api.deepseek.com')
+  })
+
+  it('disables the control and its reset while the document is read-only', () => {
+    render(<ValueField {...frame} disabled overridden text="9000" onEdit={vi.fn()} onReset={vi.fn()} />)
+
+    expect(screen.getByLabelText('Command timeout')).toHaveProperty('disabled', true)
+    expect(screen.getByRole('button', { name: 'Reset to default' })).toHaveProperty('disabled', true)
+  })
+})
+
+describe('SecretField', () => {
+  const secret = {
+    id: 'key',
+    label: 'API key',
+    hint: 'Stored outside the settings file.',
+    disabled: false,
+  }
+
+  it('stages the draft and never renders it', () => {
+    const onEdit = vi.fn()
+    render(
+      <SecretField
+        {...secret}
+        text=""
+        configured={false}
+        stateLabel="No key is configured."
+        onEdit={onEdit}
+      />,
+    )
+    const input = screen.getByLabelText('API key')
+
+    fireEvent.change(input, { target: { value: 'ds-secret' } })
+
+    expect(onEdit).toHaveBeenCalledWith('ds-secret')
+    expect(input).toHaveProperty('type', 'password')
+  })
+
+  it('reports the configured state the Host holds', () => {
+    const { rerender } = render(
+      <SecretField
+        {...secret}
+        text=""
+        configured={false}
+        stateLabel="No key is configured."
+        onEdit={vi.fn()}
+      />,
+    )
+    expect(screen.getByText('No key is configured.')).toBeTruthy()
+
+    rerender(
+      <SecretField
+        {...secret}
+        text="ds-secret"
+        configured
+        stateLabel="A key is configured."
+        onEdit={vi.fn()}
+      />,
+    )
+
+    expect(screen.getByText('A key is configured.')).toBeTruthy()
+    expect(screen.getByLabelText('API key')).toHaveProperty('value', 'ds-secret')
+  })
+
+  it('disables the control when it is told to', () => {
+    render(
+      <SecretField
+        {...secret}
+        disabled
+        text=""
+        configured
+        stateLabel="A key is configured."
+        onEdit={vi.fn()}
+      />,
+    )
+
+    expect(screen.getByLabelText('API key')).toHaveProperty('disabled', true)
+  })
+})
--- a/packages/client/ui-plugin-config/tests/invariant.spec.ts
+++ b/packages/client/ui-plugin-config/tests/invariant.spec.ts
@@ -0,0 +1,25 @@
+/** The package's node half: an empty host body and an explained empty invariant companion. */
+
+import { describe, expect, it } from 'vitest'
+import { Context } from '@deepseek-ai/cordis'
+import InvariantService from '@deepseek-ai/dsh-invariants'
+import * as PluginConfigInvariant from '@deepseek-ai/dsh-client-ui-plugin-config/invariant'
+
+describe('invariant companion', () => {
+  it('reserves package ownership with an empty installer', async () => {
+    const ctx = new Context()
+    await ctx.plugin(InvariantService, { enabled: true })
+
+    await expect(ctx.plugin(PluginConfigInvariant).await()).resolves.toBeDefined()
+  })
+
+  it('has an empty node half', async () => {
+    const { apply } = await import('@deepseek-ai/dsh-client-ui-plugin-config')
+
+    // The host body exists only so the plugin appears in the host cordis.yml;
+    // every surface this package ships lives in the browser half.
+    apply()
+
+    expect(typeof apply).toBe('function')
+  })
+})
--- a/packages/client/ui-plugin-config/tests/section.spec.tsx
+++ b/packages/client/ui-plugin-config/tests/section.spec.tsx
@@ -0,0 +1,325 @@
+// @vitest-environment jsdom
+/**
+ * What the section and its cards show: the empty line when no plugin
+ * contributed one, a card that renders nothing while its namespace is
+ * unavailable, and the save footer that decides when staged edits are written.
+ */
+
+import { cleanup, fireEvent, render, screen } from '@testing-library/react'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { bindSnapshotSelector } from '@deepseek-ai/dsh-client-web-react'
+import { createSnapshotStore } from '@deepseek-ai/dsh-client-runtime/client'
+import { AgentLoopCard } from '../src/client/AgentLoopCard.tsx'
+import type { AgentLoopCardProps } from '../src/client/AgentLoopCard.tsx'
+import { BashCard } from '../src/client/BashCard.tsx'
+import type { BashCardProps } from '../src/client/BashCard.tsx'
+import { PluginConfigSection } from '../src/client/PluginConfigSection.tsx'
+import type { PluginConfigSectionProps } from '../src/client/PluginConfigSection.tsx'
+import { WebSearchCard } from '../src/client/WebSearchCard.tsx'
+import type { WebSearchCardProps } from '../src/client/WebSearchCard.tsx'
+import type { AgentLoopCardState } from '../src/client/agent-loop-store.ts'
+import type { BashCardState } from '../src/client/bash-store.ts'
+import type { CardFieldState, CardShell } from '../src/client/card-store.ts'
+import type { WebSearchCardState } from '../src/client/web-search-store.ts'
+import { en } from '../src/client/locales.ts'
+
+afterEach(cleanup)
+
+const t = (key: keyof typeof en) => en[key]
+
+/** A settled form: nothing staged, everything served. */
+const settled: CardShell = {
+  available: true,
+  writable: true,
+  dirty: false,
+  invalid: false,
+  saving: false,
+  failed: false,
+}
+
+/** One control's state, defaulting to an inherited value. */
+function field(text: string, rest: Partial<CardFieldState> = {}): CardFieldState {
+  return { text, overridden: false, invalid: false, ...rest }
+}
+
+function cardActions() {
+  return { edit: vi.fn(), resetField: vi.fn(), save: vi.fn(), discard: vi.fn() }
+}
+
+function renderSection(cardCount: number, cards = 'cards') {
+  const props = {
+    t,
+    cardCount,
+    renderSlot: () => <li>{cards}</li>,
+  } as unknown as PluginConfigSectionProps
+  render(<PluginConfigSection {...props} />)
+}
+
+function renderBash(state: Partial<BashCardState> = {}) {
+  const store = createSnapshotStore<BashCardState>({
+    ...settled,
+    timeoutMs: field('60000'),
+    maxOutputBytes: field('64000'),
+    ...state,
+  })
+  const actions = cardActions()
+  const props = { ...actions, t, useBashCard: bindSnapshotSelector(store) } as unknown as BashCardProps
+  render(<BashCard {...props} />)
+  return actions
+}
+
+describe('PluginConfigSection', () => {
+  it('says so when no plugin contributed a card', () => {
+    renderSection(0)
+
+    expect(screen.getByText(en.empty)).toBeTruthy()
+    expect(screen.queryByText('cards')).toBeNull()
+  })
+
+  it('renders the card list once a plugin contributed one', () => {
+    renderSection(1)
+
+    expect(screen.getByText('cards')).toBeTruthy()
+    expect(screen.queryByText(en.empty)).toBeNull()
+  })
+
+  it('leads with its own heading and intro', () => {
+    renderSection(1)
+
+    expect(screen.getByRole('heading', { name: en.title })).toBeTruthy()
+    expect(screen.getByText(en.intro)).toBeTruthy()
+  })
+})
+
+describe('BashCard', () => {
+  it('renders nothing while its namespace is unavailable', () => {
+    const { container } = render(<div />)
+    renderBash({ available: false })
+
+    expect(container.textContent).toBe('')
+    expect(screen.queryByText(en.bashTitle)).toBeNull()
+  })
+
+  it('shows the plugin and reveals its fields only once expanded', () => {
+    renderBash()
+    expect(screen.getByText(en.bashTitle)).toBeTruthy()
+    expect(screen.queryByLabelText(en.bashTimeoutMs)).toBeNull()
+
+    fireEvent.click(screen.getByText(en.bashTitle))
+
+    expect(screen.getByLabelText(en.bashTimeoutMs)).toBeTruthy()
+    expect(screen.getByLabelText(en.bashMaxOutputBytes)).toBeTruthy()
+  })
+
+  it('stages an edit instead of writing it', () => {
+    const actions = renderBash()
+    fireEvent.click(screen.getByText(en.bashTitle))
+
+    fireEvent.change(screen.getByLabelText(en.bashTimeoutMs), { target: { value: '9000' } })
+
+    expect(actions.edit).toHaveBeenCalledWith('timeoutMs', '9000')
+    expect(actions.save).not.toHaveBeenCalled()
+  })
+
+  it('offers the reset for an overridden field only', () => {
+    const actions = renderBash({ timeoutMs: field('9000', { overridden: true }) })
+    fireEvent.click(screen.getByText(en.bashTitle))
+
+    // One badge and one reset: the output cap is still inherited.
+    expect(screen.getAllByText(en.overridden)).toHaveLength(1)
+    fireEvent.click(screen.getByRole('button', { name: en.reset }))
+
+    expect(actions.resetField).toHaveBeenCalledWith('timeoutMs')
+  })
+
+  it('addresses each of its two fields separately', () => {
+    const actions = renderBash({ maxOutputBytes: field('64000', { overridden: true }) })
+    fireEvent.click(screen.getByText(en.bashTitle))
+
+    fireEvent.change(screen.getByLabelText(en.bashMaxOutputBytes), { target: { value: '1024' } })
+    fireEvent.click(screen.getByRole('button', { name: en.reset }))
+
+    expect(actions.edit).toHaveBeenCalledWith('maxOutputBytes', '1024')
+    expect(actions.resetField).toHaveBeenCalledWith('maxOutputBytes')
+  })
+
+  it('keeps save and discard inert until something is staged', () => {
+    renderBash()
+    fireEvent.click(screen.getByText(en.bashTitle))
+
+    expect(screen.getByRole('button', { name: en.save })).toHaveProperty('disabled', true)
+    expect(screen.getByRole('button', { name: en.discard })).toHaveProperty('disabled', true)
+    expect(screen.queryByText(en.unsaved)).toBeNull()
+  })
+
+  it('writes the staged edits when saved, and drops them when discarded', () => {
+    const actions = renderBash({ dirty: true, timeoutMs: field('9000', { overridden: true }) })
+    fireEvent.click(screen.getByText(en.bashTitle))
+
+    fireEvent.click(screen.getByRole('button', { name: en.save }))
+    fireEvent.click(screen.getByRole('button', { name: en.discard }))
+
+    expect(actions.save).toHaveBeenCalledOnce()
+    expect(actions.discard).toHaveBeenCalledOnce()
+  })
+
+  it('marks a card holding unsaved edits, collapsed or not', () => {
+    renderBash({ dirty: true })
+
+    expect(screen.getByText(en.unsaved)).toBeTruthy()
+  })
+
+  it('blocks the save while a draft is invalid, and says why', () => {
+    renderBash({ dirty: true, invalid: true, timeoutMs: field('soon', { invalid: true }) })
+    fireEvent.click(screen.getByText(en.bashTitle))
+
+    expect(screen.getByRole('button', { name: en.save })).toHaveProperty('disabled', true)
+    expect(screen.getByRole('button', { name: en.discard })).toHaveProperty('disabled', false)
+    expect(screen.getByText(en.invalidNumber)).toBeTruthy()
+  })
+
+  it('reports a save in flight and refuses another', () => {
+    renderBash({ dirty: true, saving: true })
+    fireEvent.click(screen.getByText(en.bashTitle))
+
+    expect(screen.getByRole('button', { name: en.saving })).toHaveProperty('disabled', true)
+    expect(screen.getByRole('button', { name: en.discard })).toHaveProperty('disabled', true)
+  })
+
+  it('reports a save the deployment did not accept', () => {
+    renderBash({ dirty: true, failed: true })
+    fireEvent.click(screen.getByText(en.bashTitle))
+
+    expect(screen.getByText(en.saveFailed)).toBeTruthy()
+  })
+
+  it('says the document is read-only and disables its controls', () => {
+    renderBash({ writable: false })
+    fireEvent.click(screen.getByText(en.bashTitle))
+
+    expect(screen.getByRole('status')).toHaveProperty('textContent', en.readOnly)
+    expect(screen.getByLabelText(en.bashTimeoutMs)).toHaveProperty('disabled', true)
+  })
+
+  it('collapses again on a second click', () => {
+    renderBash()
+    fireEvent.click(screen.getByText(en.bashTitle))
+    expect(screen.getByLabelText(en.bashTimeoutMs)).toBeTruthy()
+
+    fireEvent.click(screen.getByText(en.bashTitle))
+
+    expect(screen.queryByLabelText(en.bashTimeoutMs)).toBeNull()
+  })
+})
+
+describe('AgentLoopCard', () => {
+  it('stages and saves the only field it owns', () => {
+    const store = createSnapshotStore<AgentLoopCardState>({
+      ...settled,
+      dirty: true,
+      maxParallelToolCalls: field('10'),
+    })
+    const actions = cardActions()
+    const props = {
+      ...actions,
+      t,
+      useAgentLoopCard: bindSnapshotSelector(store),
+    } as unknown as AgentLoopCardProps
+    render(<AgentLoopCard {...props} />)
+
+    fireEvent.click(screen.getByText(en.agentLoopTitle))
+    fireEvent.change(screen.getByLabelText(en.agentLoopMaxParallel), { target: { value: '2' } })
+    fireEvent.click(screen.getByRole('button', { name: en.save }))
+
+    expect(actions.edit).toHaveBeenCalledWith('maxParallelToolCalls', '2')
+    expect(actions.save).toHaveBeenCalledOnce()
+  })
+
+  it('stages a reset for the field it owns', () => {
+    const store = createSnapshotStore<AgentLoopCardState>({
+      ...settled,
+      maxParallelToolCalls: field('2', { overridden: true }),
+    })
+    const actions = cardActions()
+    const props = {
+      ...actions,
+      t,
+      useAgentLoopCard: bindSnapshotSelector(store),
+    } as unknown as AgentLoopCardProps
+    render(<AgentLoopCard {...props} />)
+
+    fireEvent.click(screen.getByText(en.agentLoopTitle))
+    fireEvent.click(screen.getByRole('button', { name: en.reset }))
+
+    expect(actions.resetField).toHaveBeenCalledWith('maxParallelToolCalls')
+  })
+})
+
+describe('WebSearchCard', () => {
+  function renderWebSearch(state: Partial<WebSearchCardState> = {}) {
+    const store = createSnapshotStore<WebSearchCardState>({
+      ...settled,
+      baseURL: field(''),
+      maxUses: field('5'),
+      apiKey: field(''),
+      apiKeyConfigured: false,
+      apiKeyWritable: true,
+      ...state,
+    })
+    const actions = cardActions()
+    const props = { ...actions, t, useWebSearchCard: bindSnapshotSelector(store) } as unknown as WebSearchCardProps
+    render(<WebSearchCard {...props} />)
+    return actions
+  }
+
+  it('reports whether a key is configured without ever showing one', () => {
+    renderWebSearch({ apiKeyConfigured: true })
+    fireEvent.click(screen.getByText(en.webSearchTitle))
+
+    expect(screen.getByText(en.webSearchApiKeySet)).toBeTruthy()
+    expect(screen.getByLabelText(en.webSearchApiKey)).toHaveProperty('type', 'password')
+  })
+
+  it('keeps the key control usable while the settings document is read-only', () => {
+    const actions = renderWebSearch({ writable: false })
+    fireEvent.click(screen.getByText(en.webSearchTitle))
+
+    const key = screen.getByLabelText(en.webSearchApiKey)
+    expect(key).toHaveProperty('disabled', false)
+    expect(screen.getByLabelText(en.webSearchBaseUrl)).toHaveProperty('disabled', true)
+
+    fireEvent.change(key, { target: { value: 'ds-secret' } })
+
+    expect(actions.edit).toHaveBeenCalledWith('apiKey', 'ds-secret')
+  })
+
+  it('disables the key control when the reference itself is not writable', () => {
+    // A key coming from the process environment: the settings document is
+    // writable, the credential is not.
+    renderWebSearch({ apiKeyConfigured: true, apiKeyWritable: false })
+    fireEvent.click(screen.getByText(en.webSearchTitle))
+
+    expect(screen.getByLabelText(en.webSearchApiKey)).toHaveProperty('disabled', true)
+    expect(screen.getByLabelText(en.webSearchBaseUrl)).toHaveProperty('disabled', false)
+  })
+
+  it('stages the endpoint, the search budget, and their resets', () => {
+    const actions = renderWebSearch({
+      baseURL: field('https://search.test/v1', { overridden: true }),
+      maxUses: field('3', { overridden: true }),
+    })
+    fireEvent.click(screen.getByText(en.webSearchTitle))
+
+    fireEvent.change(screen.getByLabelText(en.webSearchBaseUrl), { target: { value: 'https://other.test' } })
+    fireEvent.change(screen.getByLabelText(en.webSearchMaxUses), { target: { value: '4' } })
+    const resets = screen.getAllByRole('button', { name: en.reset })
+    expect(resets).toHaveLength(2)
+    for (const reset of resets) fireEvent.click(reset)
+
+    expect(actions.edit.mock.calls).toEqual([
+      ['baseURL', 'https://other.test'],
+      ['maxUses', '4'],
+    ])
+    expect(actions.resetField.mock.calls).toEqual([['baseURL'], ['maxUses']])
+  })
+})
--- a/packages/client/ui-plugin-config/tests/stores.spec.ts
+++ b/packages/client/ui-plugin-config/tests/stores.spec.ts
@@ -0,0 +1,540 @@
+/**
+ * The staged card form: what a draft shows before it is written, which wire
+ * call a save reaches, and what happens to drafts the Host did not accept.
+ */
+
+import { describe, expect, it, vi } from 'vitest'
+import { stubSettingsScope, type StubSettingsScope } from '@deepseek-ai/dsh-client-test-runtime'
+import { CardForm, numberField, textField } from '../src/client/card-store.ts'
+import { AgentLoopCardController, type AgentLoopSettings } from '../src/client/agent-loop-store.ts'
+import { BashCardController, type BashSettings } from '../src/client/bash-store.ts'
+import { WebSearchCardController, type WebSearchSettings } from '../src/client/web-search-store.ts'
+
+/** Make the stub behave like a Host that accepts every write. */
+function acceptWrites<T>(host: StubSettingsScope<T>): void {
+  const section = (): Record<string, unknown> => ({ ...host.scope.getSnapshot().value as object })
+  const layer = (): Record<string, unknown> => ({ ...host.scope.getSnapshot().user as object })
+  host.set.mockImplementation((field: string, value: unknown) => {
+    host.publish({ value: { ...section(), [field]: value } as T, user: { ...layer(), [field]: value } })
+  })
+  host.unset.mockImplementation((field: string) => {
+    const user = Object.fromEntries(Object.entries(layer()).filter(([key]) => key !== field))
+    const base = host.scope.getSnapshot().base as Record<string, unknown> | undefined
+    host.publish({ value: { ...section(), [field]: base?.[field] } as T, user })
+  })
+}
+
+function credentialsApi(configured: boolean) {
+  const describe = vi.fn(() => Promise.resolve({
+    rpcId: 'c-1' as never,
+    result: { ok: true as const, value: { credentials: { DEEPSEEK_API_KEY: { configured, writable: true } } } },
+  }))
+  const set = vi.fn(() => Promise.resolve({ rpcId: 'c-2' as never, result: { ok: true as const, value: {} } }))
+  return { api: { credentials: { describe, set } } as never, describe, set }
+}
+
+describe('CardForm', () => {
+  function form() {
+    const host = stubSettingsScope<Record<string, unknown>>()
+    const subject = new CardForm(host.scope, [numberField('timeoutMs'), textField('baseURL')])
+    host.publish({
+      status: 'ready',
+      writable: true,
+      value: { timeoutMs: 60_000, baseURL: 'https://search.test/v1' },
+      base: { timeoutMs: 60_000, baseURL: 'https://search.test/v1' },
+      user: {},
+    })
+    return { host, subject }
+  }
+
+  it('shows the effective value and stays clean until something is staged', () => {
+    const { subject } = form()
+
+    expect(subject.field('timeoutMs')).toEqual({ text: '60000', overridden: false, invalid: false })
+    expect(subject.shell()).toMatchObject({ available: true, writable: true, dirty: false, invalid: false })
+  })
+
+  it('marks a field the user layer carries as overridden', () => {
+    const { host, subject } = form()
+
+    host.publish({ value: { timeoutMs: 60_000 }, user: { timeoutMs: 60_000 } })
+
+    // An override equal to the composition default is still an override.
+    expect(subject.field('timeoutMs').overridden).toBe(true)
+  })
+
+  it('writes nothing until the form is saved', async () => {
+    const { host, subject } = form()
+    acceptWrites(host)
+
+    subject.actions().edit('timeoutMs', '9000')
+
+    expect(subject.field('timeoutMs')).toEqual({ text: '9000', overridden: true, invalid: false })
+    expect(subject.shell().dirty).toBe(true)
+    expect(host.set).not.toHaveBeenCalled()
+
+    await subject.save()
+
+    expect(host.set.mock.calls).toEqual([['timeoutMs', 9_000]])
+    expect(subject.shell()).toMatchObject({ dirty: false, failed: false, saving: false })
+  })
+
+  it('drops a draft that settles back on the value already shown', async () => {
+    const { host, subject } = form()
+
+    subject.actions().edit('timeoutMs', '9000')
+    subject.actions().edit('timeoutMs', '60000')
+
+    expect(subject.shell().dirty).toBe(false)
+    await subject.save()
+
+    expect(host.set).not.toHaveBeenCalled()
+  })
+
+  it('refuses to save while a draft is not a value the field accepts', async () => {
+    const { host, subject } = form()
+
+    subject.actions().edit('timeoutMs', 'soon')
+
+    expect(subject.field('timeoutMs')).toEqual({ text: 'soon', overridden: false, invalid: true })
+    expect(subject.shell()).toMatchObject({ dirty: true, invalid: true })
+
+    await subject.save()
+
+    expect(host.set).not.toHaveBeenCalled()
+    expect(subject.field('timeoutMs').text).toBe('soon')
+  })
+
+  it('stages a reset that clears the field only once saved', async () => {
+    const { host, subject } = form()
+    acceptWrites(host)
+    host.publish({ value: { timeoutMs: 9_000 }, user: { timeoutMs: 9_000 } })
+
+    subject.actions().resetField('timeoutMs')
+
+    // The badge previews the save: the field will no longer be overridden.
+    expect(subject.field('timeoutMs')).toEqual({ text: '60000', overridden: false, invalid: false })
+    expect(host.unset).not.toHaveBeenCalled()
+
+    await subject.save()
+
+    expect(host.unset.mock.calls).toEqual([['timeoutMs']])
+    expect(subject.shell()).toMatchObject({ dirty: false, failed: false })
+  })
+
+  it('treats resetting an inherited field as no change at all', async () => {
+    const { host, subject } = form()
+
+    subject.actions().resetField('timeoutMs')
+
+    expect(subject.shell().dirty).toBe(false)
+    await subject.save()
+
+    expect(host.unset).not.toHaveBeenCalled()
+  })
+
+  it('clears a number field by emptying it', async () => {
+    const { host, subject } = form()
+    acceptWrites(host)
+    host.publish({ user: { timeoutMs: 9_000 } })
+
+    subject.actions().edit('timeoutMs', '')
+
+    expect(subject.field('timeoutMs')).toEqual({ text: '', overridden: false, invalid: false })
+    await subject.save()
+
+    expect(host.unset.mock.calls).toEqual([['timeoutMs']])
+  })
+
+  it('clears a text field by emptying it', async () => {
+    const { host, subject } = form()
+    acceptWrites(host)
+    host.publish({ user: { baseURL: 'https://search.test/v1' } })
+
+    subject.actions().edit('baseURL', '   ')
+    await subject.save()
+
+    expect(host.unset.mock.calls).toEqual([['baseURL']])
+  })
+
+  it('writes the trimmed text of a text field', async () => {
+    const { host, subject } = form()
+    acceptWrites(host)
+
+    subject.actions().edit('baseURL', '  https://other.test  ')
+    await subject.save()
+
+    expect(host.set.mock.calls).toEqual([['baseURL', 'https://other.test']])
+  })
+
+  it('keeps the drafts a save did not land, and reports the failure', async () => {
+    const { host, subject } = form()
+
+    subject.actions().edit('timeoutMs', '9000')
+    await subject.save()
+
+    // The stub Host accepted the call without storing it, exactly as a
+    // validator that refuses the value does.
+    expect(host.set).toHaveBeenCalledWith('timeoutMs', 9_000)
+    expect(subject.shell()).toMatchObject({ dirty: true, failed: true, saving: false })
+    expect(subject.field('timeoutMs').text).toBe('9000')
+  })
+
+  it('reports a reset the Host did not apply as a failure', async () => {
+    const { host, subject } = form()
+    host.publish({ user: { timeoutMs: 9_000 } })
+
+    subject.actions().resetField('timeoutMs')
+    await subject.save()
+
+    expect(host.unset).toHaveBeenCalledWith('timeoutMs')
+    expect(subject.shell().failed).toBe(true)
+  })
+
+  it('clears the failure as soon as the user edits again', async () => {
+    const { subject } = form()
+
+    subject.actions().edit('timeoutMs', '9000')
+    await subject.save()
+    expect(subject.shell().failed).toBe(true)
+
+    subject.actions().edit('timeoutMs', '9001')
+
+    expect(subject.shell().failed).toBe(false)
+  })
+
+  it('discards every staged edit', async () => {
+    const { host, subject } = form()
+
+    subject.actions().edit('timeoutMs', '9000')
+    subject.actions().discard()
+
+    expect(subject.field('timeoutMs').text).toBe('60000')
+    expect(subject.shell()).toMatchObject({ dirty: false, failed: false })
+
+    // A discard with nothing staged publishes nothing.
+    const before = subject.shell()
+    subject.actions().discard()
+    expect(subject.shell()).toEqual(before)
+
+    await subject.save()
+    expect(host.set).not.toHaveBeenCalled()
+  })
+
+  it('refuses a second save while one is in flight', async () => {
+    const { host, subject } = form()
+    acceptWrites(host)
+
+    subject.actions().edit('timeoutMs', '9000')
+    const first = subject.save()
+    expect(subject.shell().saving).toBe(true)
+    const second = subject.save()
+    await Promise.all([first, second])
+
+    expect(host.set).toHaveBeenCalledTimes(1)
+  })
+
+  it('publishes a projection whenever the scope or a draft changes', () => {
+    const { host, subject } = form()
+    const store = subject.bind(() => subject.field('timeoutMs').text)
+    expect(store.getSnapshot()).toBe('60000')
+
+    host.publish({ value: { timeoutMs: 1_000 } })
+    expect(store.getSnapshot()).toBe('1000')
+
+    subject.actions().edit('timeoutMs', '2000')
+    expect(store.getSnapshot()).toBe('2000')
+  })
+
+  it('refuses to address a field the card never declared', () => {
+    const { subject } = form()
+
+    expect(() => subject.field('nope')).toThrow('plugin card has no field nope')
+  })
+
+  it('renders an absent section value as an empty draft', () => {
+    const host = stubSettingsScope<Record<string, unknown>>()
+    const subject = new CardForm(host.scope, [numberField('timeoutMs'), textField('baseURL')])
+
+    host.publish({ status: 'ready', writable: true, value: {}, base: {}, user: undefined })
+
+    expect(subject.field('timeoutMs').text).toBe('')
+    expect(subject.field('baseURL').text).toBe('')
+    expect(subject.shell().available).toBe(true)
+  })
+
+  it('stays unavailable while the namespace is not served', () => {
+    const host = stubSettingsScope<Record<string, unknown>>()
+    const subject = new CardForm(host.scope, [numberField('timeoutMs')])
+
+    host.publish({ status: 'unavailable' })
+
+    expect(subject.shell()).toMatchObject({ available: false, writable: false })
+  })
+})
+
+describe('BashCardController', () => {
+  it('projects both fields and saves them in one write pass', async () => {
+    const host = stubSettingsScope<BashSettings>()
+    acceptWrites(host)
+    const controller = new BashCardController(host.scope)
+    host.publish({
+      status: 'ready',
+      writable: true,
+      value: { timeoutMs: 5_000, maxOutputBytes: 64_000 },
+      base: { timeoutMs: 60_000, maxOutputBytes: 64_000 },
+      user: { timeoutMs: 5_000 },
+    })
+    const face = controller.inject()
+
+    expect(face.hooks.bashCard.getSnapshot()).toMatchObject({
+      available: true,
+      writable: true,
+      dirty: false,
+      timeoutMs: { text: '5000', overridden: true },
+      maxOutputBytes: { text: '64000', overridden: false },
+    })
+
+    face.edit('timeoutMs', '9000')
+    face.edit('maxOutputBytes', '1024')
+    expect(face.hooks.bashCard.getSnapshot().dirty).toBe(true)
+
+    face.save()
+    await vi.waitFor(() => { expect(host.set).toHaveBeenCalledTimes(2) })
+
+    expect(host.set.mock.calls).toEqual([['timeoutMs', 9_000], ['maxOutputBytes', 1_024]])
+    expect(face.hooks.bashCard.getSnapshot().dirty).toBe(false)
+  })
+
+  it('stages a reset and applies it on save', async () => {
+    const host = stubSettingsScope<BashSettings>()
+    acceptWrites(host)
+    const controller = new BashCardController(host.scope)
+    host.publish({
+      status: 'ready',
+      writable: true,
+      value: { timeoutMs: 5_000 },
+      base: { timeoutMs: 60_000 },
+      user: { timeoutMs: 5_000 },
+    })
+    const face = controller.inject()
+
+    face.resetField('timeoutMs')
+    expect(face.hooks.bashCard.getSnapshot().timeoutMs.text).toBe('60000')
+
+    face.save()
+    await vi.waitFor(() => { expect(host.unset).toHaveBeenCalledWith('timeoutMs') })
+
+    expect(face.hooks.bashCard.getSnapshot()).toMatchObject({
+      dirty: false,
+      timeoutMs: { text: '60000', overridden: false },
+    })
+  })
+
+  it('discards staged edits without writing', () => {
+    const host = stubSettingsScope<BashSettings>()
+    const controller = new BashCardController(host.scope)
+    host.publish({ status: 'ready', writable: true, value: { timeoutMs: 5_000 }, user: {} })
+    const face = controller.inject()
+
+    face.edit('timeoutMs', '9000')
+    face.discard()
+
+    expect(face.hooks.bashCard.getSnapshot().timeoutMs.text).toBe('5000')
+    expect(host.set).not.toHaveBeenCalled()
+  })
+})
+
+describe('AgentLoopCardController', () => {
+  it('saves the only field it owns', async () => {
+    const host = stubSettingsScope<AgentLoopSettings>()
+    acceptWrites(host)
+    const controller = new AgentLoopCardController(host.scope)
+    host.publish({
+      status: 'ready',
+      writable: true,
+      value: { maxParallelToolCalls: 10 },
+      base: { maxParallelToolCalls: 10 },
+      user: {},
+    })
+    const face = controller.inject()
+
+    face.edit('maxParallelToolCalls', '4')
+    face.save()
+    await vi.waitFor(() => { expect(host.set).toHaveBeenCalledWith('maxParallelToolCalls', 4) })
+
+    expect(face.hooks.agentLoopCard.getSnapshot()).toMatchObject({
+      dirty: false,
+      maxParallelToolCalls: { text: '4', overridden: true },
+    })
+  })
+
+  it('reports a read-only document so the card can disable its controls', () => {
+    const host = stubSettingsScope<AgentLoopSettings>()
+    const controller = new AgentLoopCardController(host.scope)
+
+    host.publish({ status: 'ready', writable: false, value: { maxParallelToolCalls: 10 } })
+
+    expect(controller.inject().hooks.agentLoopCard.getSnapshot().writable).toBe(false)
+  })
+})
+
+describe('WebSearchCardController', () => {
+  it('reads the credential state for the reference the section names', async () => {
+    const host = stubSettingsScope<WebSearchSettings>()
+    const credentials = credentialsApi(true)
+    const controller = new WebSearchCardController(host.scope, credentials.api)
+    const state = () => controller.inject().hooks.webSearchCard.getSnapshot()
+    await vi.waitFor(() => { expect(credentials.describe).toHaveBeenCalled() })
+
+    host.publish({ status: 'ready', writable: true, value: { baseURL: 'https://search.test/v1' }, user: {} })
+    await vi.waitFor(() => { expect(state().apiKeyConfigured).toBe(true) })
+
+    expect(state()).toMatchObject({
+      baseURL: { text: 'https://search.test/v1', overridden: false },
+      apiKey: { text: '', overridden: false },
+    })
+  })
+
+  it('writes the staged key through the credentials domain, never the settings section', async () => {
+    const host = stubSettingsScope<WebSearchSettings>()
+    const credentials = credentialsApi(false)
+    const controller = new WebSearchCardController(host.scope, credentials.api)
+    host.publish({ status: 'ready', writable: true, value: {}, user: {} })
+    const face = controller.inject()
+
+    face.edit('apiKey', ' ds-secret ')
+    expect(face.hooks.webSearchCard.getSnapshot().dirty).toBe(true)
+    expect(credentials.set).not.toHaveBeenCalled()
+
+    credentials.describe.mockImplementation(() => Promise.resolve({
+      rpcId: 'c-1' as never,
+      result: { ok: true as const, value: { credentials: { DEEPSEEK_API_KEY: { configured: true, writable: true } } } },
+    }))
+    face.save()
+    await vi.waitFor(() => { expect(credentials.set).toHaveBeenCalled() })
+
+    expect(credentials.set).toHaveBeenCalledWith({ ref: 'DEEPSEEK_API_KEY', value: 'ds-secret' })
+    expect(host.set).not.toHaveBeenCalled()
+    await vi.waitFor(() => {
+      expect(face.hooks.webSearchCard.getSnapshot()).toMatchObject({ dirty: false, apiKeyConfigured: true })
+    })
+  })
+
+  it('keeps the stored key when the draft is left blank', () => {
+    const host = stubSettingsScope<WebSearchSettings>()
+    const credentials = credentialsApi(true)
+    const controller = new WebSearchCardController(host.scope, credentials.api)
+    host.publish({ status: 'ready', writable: true, value: {}, user: {} })
+    const face = controller.inject()
+
+    face.edit('apiKey', '   ')
+
+    expect(face.hooks.webSearchCard.getSnapshot().dirty).toBe(false)
+    face.save()
+
+    expect(credentials.set).not.toHaveBeenCalled()
+  })
+
+  it('re-reads when the Host reports the watched reference changed', async () => {
+    const host = stubSettingsScope<WebSearchSettings>()
+    const credentials = credentialsApi(false)
+    const controller = new WebSearchCardController(host.scope, credentials.api)
+    host.publish({ status: 'ready', writable: true, value: {}, user: {} })
+    await vi.waitFor(() => { expect(credentials.describe).toHaveBeenCalled() })
+    credentials.describe.mockClear()
+
+    // Another reference is not this card's business.
+    controller.refreshCredential('OTHER_KEY')
+    expect(credentials.describe).not.toHaveBeenCalled()
+
+    // A key written on another surface reaches this card only through this signal.
+    credentials.describe.mockImplementation(() => Promise.resolve({
+      rpcId: 'c-1' as never,
+      result: { ok: true as const, value: { credentials: { DEEPSEEK_API_KEY: { configured: true, writable: true } } } },
+    }))
+    controller.refreshCredential('DEEPSEEK_API_KEY')
+
+    await vi.waitFor(() => {
+      expect(controller.inject().hooks.webSearchCard.getSnapshot().apiKeyConfigured).toBe(true)
+    })
+  })
+
+  it('addresses the reference the section declares rather than the default', async () => {
+    const host = stubSettingsScope<WebSearchSettings>()
+    const credentials = credentialsApi(false)
+    const controller = new WebSearchCardController(host.scope, credentials.api)
+    host.publish({ status: 'ready', writable: true, value: { apiKeyEnv: 'SEARCH_KEY' }, user: {} })
+    const face = controller.inject()
+
+    face.edit('apiKey', 'ds-secret')
+    face.save()
+    await vi.waitFor(() => { expect(credentials.set).toHaveBeenCalled() })
+
+    expect(credentials.set).toHaveBeenCalledWith({ ref: 'SEARCH_KEY', value: 'ds-secret' })
+  })
+
+  it('reports a key the Host did not store as a failed save', async () => {
+    const host = stubSettingsScope<WebSearchSettings>()
+    const credentials = credentialsApi(false)
+    const controller = new WebSearchCardController(host.scope, credentials.api)
+    host.publish({ status: 'ready', writable: true, value: {}, user: {} })
+    const face = controller.inject()
+
+    face.edit('apiKey', 'ds-secret')
+    face.save()
+
+    await vi.waitFor(() => {
+      expect(face.hooks.webSearchCard.getSnapshot()).toMatchObject({ failed: true, dirty: true })
+    })
+  })
+
+  it('keeps the card usable when the credential read fails', async () => {
+    const host = stubSettingsScope<WebSearchSettings>()
+    const describe = vi.fn(() => Promise.reject(new Error('offline')))
+    const set = vi.fn(() => Promise.reject(new Error('offline')))
+    const controller = new WebSearchCardController(host.scope, { credentials: { describe, set } } as never)
+    const face = controller.inject()
+    await vi.waitFor(() => { expect(describe).toHaveBeenCalled() })
+
+    host.publish({ status: 'ready', writable: true, value: { baseURL: 'https://search.test/v1' }, user: {} })
+    face.edit('apiKey', 'ds-secret')
+    face.save()
+    await vi.waitFor(() => { expect(set).toHaveBeenCalled() })
+
+    expect(face.hooks.webSearchCard.getSnapshot()).toMatchObject({
+      available: true,
+      apiKeyConfigured: false,
+      baseURL: { text: 'https://search.test/v1' },
+    })
+  })
+
+  it('ignores a credential read the Host refused', async () => {
+    const host = stubSettingsScope<WebSearchSettings>()
+    const describe = vi.fn(() => Promise.resolve({
+      rpcId: 'c-1' as never,
+      result: { ok: false as const, error: { code: 'credentials-unavailable', message: 'no provider' } },
+    }))
+    const controller = new WebSearchCardController(host.scope, { credentials: { describe, set: vi.fn() } } as never)
+    await vi.waitFor(() => { expect(describe).toHaveBeenCalled() })
+
+    expect(controller.inject().hooks.webSearchCard.getSnapshot().apiKeyConfigured).toBe(false)
+  })
+
+  it('saves the endpoint and the search budget together', async () => {
+    const host = stubSettingsScope<WebSearchSettings>()
+    acceptWrites(host)
+    const credentials = credentialsApi(true)
+    const controller = new WebSearchCardController(host.scope, credentials.api)
+    host.publish({ status: 'ready', writable: true, value: {}, base: {}, user: {} })
+    const face = controller.inject()
+
+    face.edit('baseURL', 'https://other.test')
+    face.edit('maxUses', '3')
+    face.save()
+    await vi.waitFor(() => { expect(host.set).toHaveBeenCalledTimes(2) })
+
+    expect(host.set.mock.calls).toEqual([['baseURL', 'https://other.test'], ['maxUses', 3]])
+    expect(credentials.set).not.toHaveBeenCalled()
+  })
+})
--- a/packages/client/ui-plugin-config/tsconfig.json
+++ b/packages/client/ui-plugin-config/tsconfig.json
@@ -0,0 +1,45 @@
+{
+  "extends": "../../../tsconfig.base.client.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "lib/types"
+  },
+  "include": [
+    "src"
+  ],
+  "references": [
+    {
+      "path": "../connection"
+    },
+    {
+      "path": "../locale"
+    },
+    {
+      "path": "../../../vendor/cordis"
+    },
+    {
+      "path": "../runtime"
+    },
+    {
+      "path": "../test-runtime"
+    },
+    {
+      "path": "../ui-primitives"
+    },
+    {
+      "path": "../ui-settings"
+    },
+    {
+      "path": "../../api/remotes/tsconfig.client.json"
+    },
+    {
+      "path": "../ui-slots"
+    },
+    {
+      "path": "../web-react"
+    },
+    {
+      "path": "../../support/invariants"
+    }
+  ]
+}
--- a/packages/client/ui-plugin-config/tsdown.config.ts
+++ b/packages/client/ui-plugin-config/tsdown.config.ts
@@ -0,0 +1,3 @@
+import { clientBundle } from '../tsdown.client.ts'
+
+export default clientBundle('@deepseek-ai/dsh-client-ui-plugin-config', ['lib/types/index.js', 'lib/types/invariant.js'])
--- a/packages/client/ui-settings-general/src/client/SettingsRoot.tsx
+++ b/packages/client/ui-settings-general/src/client/SettingsRoot.tsx
@@ -14,7 +14,8 @@
 import { useCallback, useEffect, useId, useRef, useState } from 'react'
 import clsx from 'clsx'
 import {
-  IconAgentPresetOutline16, IconCloseOutline16, IconDataOutline16, IconSettingsOutline16,
+  IconAgentPresetOutline16, IconCloseOutline16, IconDataOutline16,
+  IconPersonalizationOutline16, IconSettingsOutline16,
 } from '@deepseek-ai/dsh-client-ui-primitives'
 import type { SettingsRootComponentProps, SettingsSectionRow } from './shell-contract.ts'
 import css from './SettingsRoot.module.css'
@@ -23,6 +24,7 @@ import css from './SettingsRoot.module.css'
 function navIcon(id: string) {
  if (id === 'models') return <IconDataOutline16 className={css.navIcon} size={16} />
  if (id === 'agent-presets') return <IconAgentPresetOutline16 className={css.navIcon} size={16} />
+  if (id === 'plugins') return <IconPersonalizationOutline16 className={css.navIcon} size={16} />
  return <IconSettingsOutline16 className={css.navIcon} size={16} />
 }

--- a/packages/client/ui-settings-general/tests/settings-root.spec.tsx
+++ b/packages/client/ui-settings-general/tests/settings-root.spec.tsx
@@ -170,6 +170,28 @@ describe('SettingsPanel navigation', () => {
    expect(screen.getByTestId('section-general')).toBeTruthy()
  })

+  it('gives every section a nav glyph, distinct for the ids the shell knows', () => {
+    mount({
+      rows: [
+        { id: 'general', order: 0, label: 'General' },
+        { id: 'models', order: 10, label: 'Models' },
+        { id: 'agent-presets', order: 20, label: 'Agent presets' },
+        { id: 'plugins', order: 30, label: 'Plugins' },
+        { id: 'contributed', order: 40, label: 'Contributed' },
+      ],
+    })
+    openPanel()
+    // Glyphs carry no id of their own, so the drawn paths are what tells them apart.
+    const glyphs = ['General', 'Models', 'Agent presets', 'Plugins', 'Contributed']
+      .map(name => screen.getByRole('button', { name }).querySelector('svg')?.innerHTML)
+
+    expect(glyphs.every(glyph => glyph !== undefined && glyph !== '')).toBe(true)
+    // The three ids the shell names get their own glyph; every other section —
+    // including one this package never heard of — shares the gear.
+    expect(new Set(glyphs.slice(0, 4)).size).toBe(4)
+    expect(glyphs[4]).toBe(glyphs[0])
+  })
+
  it('switches the rendered section on nav click', () => {
    mount()
    openPanel()
--- a/packages/client/ui-settings/src/client/settings-scope.ts
+++ b/packages/client/ui-settings/src/client/settings-scope.ts
@@ -8,7 +8,7 @@
 import { Service } from '@deepseek-ai/cordis'
 import type { Context } from '@deepseek-ai/cordis'
 import type {
-  ConnectionHandle, IApiClient, SettingsNamespaceView,
+  ConnectionHandle, IApiClient, SettingsNamespaceView, SettingsPathOpView,
 } from '@deepseek-ai/dsh-client-connection/client'
 import { rehydrateSchema, validateDraft } from '@deepseek-ai/dsh-client-schema-form'
 import {
@@ -59,6 +59,8 @@ export class SettingsScopeController<T> implements SettingsScope<T> {
    this.store = createSnapshotStore<SettingsScopeSnapshot<T>>({
      status: persistence === 'host' ? 'loading' : 'unavailable',
      value: undefined,
+      base: undefined,
+      user: undefined,
      revision: undefined,
      writable: false,
      mode: persistence,
@@ -96,6 +98,20 @@ export class SettingsScopeController<T> implements SettingsScope<T> {
   * @returns settlement after the write and any latest-write recovery read.
   */
  set(field: string, value: unknown): Promise<void> {
+    return this.write({ op: 'set', path: [field], value })
+  }
+
+  /**
+   * Queue one field clear; see {@link SettingsScope.unset} for the ordering,
+   * revision, and recovery contract.
+   * @param field - scalar field inside the namespace section.
+   * @returns settlement after the clear and any latest-write recovery read.
+   */
+  unset(field: string): Promise<void> {
+    return this.write({ op: 'unset', path: [field] })
+  }
+
+  private write(op: SettingsPathOpView): Promise<void> {
    this.readGeneration += 1
    const generation = ++this.writeGeneration
    return this.enqueue(async () => {
@@ -104,7 +120,7 @@ export class SettingsScopeController<T> implements SettingsScope<T> {
      try {
        response = await this.api.settings.mutate({
          ns: this.spec.namespace,
-          ops: [{ op: 'set', path: [field], value }],
+          ops: [op],
          ...(revision === undefined ? {} : { expectedRevision: revision }),
        })
      } catch (_settingsWriteFailure) {
@@ -169,6 +185,8 @@ export class SettingsScopeController<T> implements SettingsScope<T> {
    const decoded = publish ? this.decode(view) : undefined
    this.store.update((draft) => {
      draft.revision = view.revision
+      draft.base = view.base
+      draft.user = view.user
      if (writable !== undefined) draft.writable = writable
      if (decoded === undefined) return
      draft.status = 'ready'
--- a/packages/client/ui-settings/tests/settings-scope.spec.ts
+++ b/packages/client/ui-settings/tests/settings-scope.spec.ts
@@ -293,6 +293,77 @@ describe('SettingsScopeController', () => {
    expect(describeCall).not.toHaveBeenCalled()
    expect(mutate).not.toHaveBeenCalled()
  })
+
+  it('carries the composition base and the user layer into the snapshot', async () => {
+    const layered: SettingsNamespaceView = {
+      ...view({ preference: 'dark' }, 3),
+      base: { preference: 'system' },
+      user: { preference: 'dark' },
+    }
+    const describeCall = vi.fn()
+      .mockResolvedValueOnce(ok({ writable: true, hasDocument: true, namespaces: [layered] }))
+    const scope = new SettingsScopeController<UiTestSettings>(
+      { settings: { describe: describeCall } } as never,
+      { namespace: 'ui-test' },
+    )
+
+    await scope.load()
+
+    expect(scope.getSnapshot()).toMatchObject({
+      value: { preference: 'dark' },
+      base: { preference: 'system' },
+      user: { preference: 'dark' },
+    })
+  })
+
+  it('reports an inherited field as absent from the user layer', async () => {
+    const inherited: SettingsNamespaceView = { ...view({ preference: 'system' }, 1), base: { preference: 'system' } }
+    const describeCall = vi.fn()
+      .mockResolvedValueOnce(ok({ writable: true, hasDocument: true, namespaces: [inherited] }))
+    const scope = new SettingsScopeController<UiTestSettings>(
+      { settings: { describe: describeCall } } as never,
+      { namespace: 'ui-test' },
+    )
+
+    await scope.load()
+
+    expect(scope.getSnapshot().user).toBeUndefined()
+  })
+
+  it('clears one field through an unset op fenced by the held revision', async () => {
+    const mutate = vi.fn().mockResolvedValueOnce(ok(view({ preference: 'system' }, 4)))
+    const describeCall = vi.fn().mockResolvedValueOnce(described({ preference: 'dark' }, 3))
+    const scope = new SettingsScopeController<UiTestSettings>(
+      { settings: { describe: describeCall, mutate } } as never,
+      { namespace: 'ui-test' },
+    )
+    await scope.load()
+
+    await scope.unset('preference')
+
+    expect(mutate).toHaveBeenCalledWith({
+      ns: 'ui-test',
+      ops: [{ op: 'unset', path: ['preference'] }],
+      expectedRevision: 3,
+    })
+    expect(scope.getSnapshot()).toMatchObject({ value: { preference: 'system' }, revision: 4 })
+  })
+
+  it('recovers the Host state when the latest clear is refused', async () => {
+    const mutate = vi.fn().mockResolvedValueOnce(rejected())
+    const describeCall = vi.fn()
+      .mockResolvedValueOnce(described({ preference: 'dark' }, 3))
+      .mockResolvedValueOnce(described({ preference: 'light' }, 5))
+    const scope = new SettingsScopeController<UiTestSettings>(
+      { settings: { describe: describeCall, mutate } } as never,
+      { namespace: 'ui-test' },
+    )
+    await scope.load()
+
+    await scope.unset('preference')
+
+    expect(scope.getSnapshot()).toMatchObject({ value: { preference: 'light' }, revision: 5 })
+  })
 })
 describe('SettingsScopeService.bind', () => {
  it('subscribes before the initial read and converges to the latest queued invalidation', async () => {