Merge origin/master into xjt/proofreading-active-docs-2-apply

2026-08-04 19:51:18 +08:00
parent edb3e82c35 6f10f9c01c
commit c522053cef
107 changed files with 2170 additions and 528 deletions
@@ -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 .agents/notes/implemented/architecture/2026-07-19-gui-layering-and-rpc-protocol.md
-2026-07-19-gui-layering-and-rpc-protocol.md: 7ad2a2403eb9962b369b016070e8ca378ed55c60
-2026-07-19-gui-layering-and-rpc-protocol.zh.md: f97852fc08c866251f1b96170efc4896ac4a4cab
+2026-07-19-gui-layering-and-rpc-protocol.md: 34077302c53081f6ee9171d64dce9af342710d71
+2026-07-19-gui-layering-and-rpc-protocol.zh.md: bc51542ac8159ee7cba234b4ee8b4db47a7f9b58
@@ -4,7 +4,7 @@ Status: implemented

 English | [中文](2026-07-19-gui-layering-and-rpc-protocol.zh.md)

-> Division of labor: this document = the layering model + the channel-independent RPC protocol; the protocol's Web implementation (HTTP+SSE) is in the [web client architecture RFC](2026-07-19-gui-web-client-architecture.md).
+> Division of labor: this document = the layering model + the channel-independent RPC protocol; the protocol's Web implementation combines HTTP uplink with the [WebSocket downlink carrier](2026-08-04-websocket-downlink-carrier.md), while the browser object layer is in the [web client architecture RFC](2026-07-19-gui-web-client-architecture.md).

 ## Problem

@@ -15,7 +15,7 @@ We need a UI integration layer. Beyond the existing ACP/stdio baseline, more pro

 That demands a stable layered responsibility model in the engineering codebase, so future client shapes plug in cleanly.

-At the same time the physical channels differ per consumer (HTTP/SSE, in-process direct calls, IPC later), so we also need a channel-independent message model and a single contract source of truth — "adding a method" and "swapping a carrier" must not entangle each other, and every message on the wire must be type-validatable, observable, and reconcilable.
+At the same time the physical channels differ per consumer (browser HTTP/WebSocket, in-process fetch/SSE, IPC later), so we also need a channel-independent message model and a single contract source of truth — "adding a method" and "swapping a carrier" must not entangle each other, and every message on the wire must be type-validatable, observable, and reconcilable.

 ## Decision

@@ -64,7 +64,7 @@ On the protocol side: TS interfaces (`packages/host/apiproxy/src/api/`, zero Nod
 |---|---|---|---|
 | Front layer | `dsh-host-apiproxy` | TS/zod definitions (api/) + the fetch abstraction (fetch/: handler + client base class) | Keep it simple — every consumer needs it; importable from Node and browser alike; protocol content in the "Message protocol" sections below; clients must not bypass api through ctx |
 | Assembly layer | `dsh-host-runtime` | Plugin composition + ApiProxy integration + the web UI plugin mount (in-memory Loader tree over the eight dshClient packages); home of host-level configuration (defaults/persistenceRoot, future user profile) | Which plugins mount and with what defaults is decided only here; shells must not alter the assembly |
-| Carrier layer | `dsh-host-webserver` | Web-shape HTTP: static serving + `/api/*`→handler forwarding + SSE write-out + close semantics; plugin bundle endpoint + `__DSH_BOOT__` manifest injection (fed by the web plugin registry) | Web (browser access) only; zero workspace dependencies (the registry arrives by structural injection); Electron does not reuse it |
+| Carrier layer | `dsh-host-webserver` | Web-shape HTTP and upgrade: static serving + `/api/*`→handler forwarding + WebSocket upgrade route + close semantics; plugin bundle endpoint + `__DSH_BOOT__` manifest injection (fed by the web plugin registry) | Web (browser access) only; zero workspace dependencies (the registry arrives by structural injection); Electron does not reuse it |
 | Client libraries | `dsh-client-ui-slots` / `dsh-client-web-react` / `dsh-client-ui-primitives` | Slot registry core / ctx↔React glue / pure React atoms | Zero cordis runtime dependency in components; seeded into the loader module table by the shell |
 | Client plugins | `dsh-client-connection` / `dsh-client-runtime` / `dsh-client-ui-theme` / `dsh-client-i18n` / `dsh-client-ui-layout` / `dsh-client-ui-sidebar` / `dsh-client-ui-conversation` / `dsh-client-ui-trajectory` | Browser-side cordis plugin tree (wire consumer, core services, theme, i18n, layout, sidebar, conversation, trajectory) — see the web client architecture RFC | Dual entry (node half = empty apply; implementation in `src/client/`); the consumption face goes exclusively through ApiProxy |
 | Application shape | `@deepseek-ai/dsh` (apps/cli) + `dsh-frontend` (apps/web, the vite application) | Coarse bin dispatch + one assembly module per shape (web.ts / headless.ts); the vite app is a thin main over the `dsh-client-web` shell surface | Shapes dynamic-import so they never load each other; workspace knowledge like dist location stays in the app |
@@ -88,7 +88,7 @@ The sections from here down are the protocol body carried by the front layer (`d
 ```
                 client 发起                      server 发起
  request   ① ClientRequest                 ③ ServerRequest
-            （POST /api/<method> body）      （SSE 帧：session 事件、审批/问答 requested）
+            （POST /api/<method> body）      （WebSocket message：session 事件、审批/问答 requested）
  response  ② ServerResponse                ④ ClientResponse
            （该 POST 的 HTTP 应答体）        （POST /api/respond body，回填 ③ 的 rpcId）
 ```
@@ -99,7 +99,7 @@ The sections from here down are the protocol body carried by the front layer (`d
 |---|---|---|---|---|
 | `ClientRequest` | `'client-request'` | `rpcId` `method` `payload` | client mints | `POST /api/<method>` body |
 | `ServerResponse` | `'server-response'` | `rpcId` `result` | echoes ① | that POST's response body (always HTTP 200) |
-| `ServerRequest` | `'server-request'` | `rpcId` `method` `payload` | server mints | SSE `data:` line |
+| `ServerRequest` | `'server-request'` | `rpcId` `method` `payload` | server mints | WebSocket text message |
 | `ClientResponse` | `'client-response'` | `rpcId` `result` | echoes ③ | `POST /api/respond` body |

 `RpcMessage = ClientRequest | ServerResponse | ServerRequest | ClientResponse`, narrowed via `switch (message.type)`.
@@ -169,7 +169,7 @@ The remaining methods (`session.create`/`session.history`/`session.rename`/`sess

 ### Frames (server→client, named unions)

-Two SSE streams: the mux stream (`GET /api/events.mux`, all-session aggregate) and the host stream (`GET /api/events.host`, host-level events). One example frame row:
+Two logical streams: the mux stream (`/api/events.mux`, all-session aggregate) and the host stream (`/api/events.host`, host-level events). The browser consumes one downlink WebSocket per stream, while the in-process fetch carrier retains SSE to preserve the same shape; see the [WebSocket downlink carrier](2026-08-04-websocket-downlink-carrier.md) for the physical boundary. One example frame row:

 | frame type | payload | when |
 |---|---|---|
@@ -216,7 +216,7 @@ All four quadrant full forms pass through `onEnvelope`; the base implementation
 | Subclass | Package | doFetch | Purpose |
 |---|---|---|---|
 | `InProcessApiClient` | apiproxy itself | the injected `{ fetch }` handler | **The isomorphic point**: `new InProcessApiClient(toFetchHandler(api))` never touches the network yet runs the real wire serialization/zod/SSE framing — `dsh -p` headless is the protocol's second real consumer |
-| `WebApiClient` | dsh-client-connection | `globalThis.fetch` (same-origin `/api/*`) | the browser shape; HTTP+SSE carriage details in the web client architecture RFC |
+| `WebApiClient` | dsh-client-connection | `globalThis.fetch` uplink + one same-origin WebSocket downlink per logical stream | the browser shape; physical boundary in the [WebSocket downlink carrier](2026-08-04-websocket-downlink-carrier.md) |
 | `FixtureApiClient` | dsh-client-connection | unused (protocol-layer override) | serverless UI development (`?fixture`): overrides the `callUnary`/`openMux`/`openHost`/`respond` virtuals and is itself the fake server (frame rpcIds minted by it, semantics self-consistent) |
 | (future) IPC bridge subclass | apps/electron | IPC serialization round trip | swaps only doFetch; contract and base class unchanged |

@@ -1,10 +1,10 @@
-# Agent Note: GUI 分层与 RPC 协议——host/client 按能力支持方分层、四象限消息模型与 fetch 载体
+# RFC: GUI 分层与 RPC 协议——host/client 按能力支持方分层、四象限消息模型与 fetch 载体

 Status: implemented

 [English](2026-07-19-gui-layering-and-rpc-protocol.md) | 中文

-> 分工线：本篇 = 分层模型 + 通道无关的 RPC 协议；协议的 Web 实现（HTTP+SSE）见 [Web 客户端架构 RFC](2026-07-19-gui-web-client-architecture.md)。
+> 分工线：本篇 = 分层模型 + 通道无关的 RPC 协议；协议的 Web 实现由 HTTP 上行加 [WebSocket 下行载体](2026-08-04-websocket-downlink-carrier.md)组成，浏览器对象层见 [Web 客户端架构 RFC](2026-07-19-gui-web-client-architecture.md)。

 ## Problem

@@ -14,7 +14,7 @@ Status: implemented

 那么当前的工程代码需要稳定的分层职责模型，便于以后接入各类 client 形态。

-同时各消费端的物理通道不同（HTTP/SSE、进程内直调、将来 IPC），还需要一个通道无关的消息模型和单一契约事实源，让「加一个方法」「换一种载体」互不牵连，且 wire 上的每条消息可类型校验、可观测、可对账。
+同时各消费端的物理通道不同（浏览器 HTTP／WebSocket、进程内 fetch/SSE、将来 IPC），还需要一个通道无关的消息模型和单一契约事实源，让「加一个方法」「换一种载体」互不牵连，且 wire 上的每条消息可类型校验、可观测、可对账。

 ## Decision

@@ -62,7 +62,7 @@ TypeScript 以 solution 根引用的**两个聚合 program** 检查（`tsconfig.
 |---|---|---|---|
 | 前置层 | `dsh-host-apiproxy` | TS/zod 定义 (api/)+ fetch 抽象 (fetch/：handler + 客户端基类) | 做简单、所有接入方都要；Node/浏览器皆可 import；协议内容见下文「消息协议」起各节；client 不得经 ctx 绕开 api |
 | 装配层 | `dsh-host-runtime` | 插件组合 + ApiProxy 集成 + web UI 插件挂载（覆盖八个 dshClient 包的内存 Loader 树）；host 级配置归属地（defaults/persistenceRoot，将来用户 profile） | 装什么插件、给什么默认值只在这里定；壳不得改装配 |
-| 承载层 | `dsh-host-webserver` | Web 形态 HTTP：静态服务 + `/api/*`→handler 转发 + SSE 写出 + close 语义；插件 bundle 端点 + `__DSH_BOOT__` manifest（元数据清单）注入（由 web 插件注册表供给） | Web（浏览器访问）专用；零 workspace 依赖（注册表经结构注入到达）；Electron 不复用它 |
+| 承载层 | `dsh-host-webserver` | Web 形态 HTTP 与 upgrade：静态服务 + `/api/*`→handler 转发 + WebSocket upgrade route + close 语义；插件 bundle 端点 + `__DSH_BOOT__` manifest（元数据清单）注入（由 web 插件注册表供给） | Web（浏览器访问）专用；零 workspace 依赖（注册表经结构注入到达）；Electron 不复用它 |
 | client 库 | `dsh-client-ui-slots` / `dsh-client-web-react` / `dsh-client-ui-primitives` | slot 注册表核心 / ctx↔React 胶合 / 纯 React 原子组件 | 组件零 cordis 运行时依赖；由壳播种进 loader 模块表 |
 | client 插件 | `dsh-client-connection` / `dsh-client-runtime` / `dsh-client-ui-theme` / `dsh-client-i18n` / `dsh-client-ui-layout` / `dsh-client-ui-sidebar` / `dsh-client-ui-conversation` / `dsh-client-ui-trajectory` | 浏览器侧 cordis 插件树（wire 消费者、核心服务、主题、i18n、布局、侧栏、对话、轨迹）——见 Web 客户端架构 RFC | 双入口（node 半边=空 apply；实现在 `src/client/`）；消费面唯一经 ApiProxy |
 | 应用态 | `@deepseek-ai/dsh`（apps/cli）+ `dsh-frontend`（apps/web，vite 应用） | bin 粗分发 + 每形态一个拼装模块（web.ts / headless.ts）；vite 应用是 `dsh-client-web` 壳表面之上的薄 main | 形态间动态 import 互不加载；dist 定位等 workspace 知识留在 app |
@@ -86,7 +86,7 @@ TypeScript 以 solution 根引用的**两个聚合 program** 检查（`tsconfig.
 ```
                 client 发起                      server 发起
  request   ① ClientRequest                 ③ ServerRequest
-            （POST /api/<method> body）      （SSE 帧：session 事件、审批/问答 requested）
+            （POST /api/<method> body）      （WebSocket message：session 事件、审批/问答 requested）
  response  ② ServerResponse                ④ ClientResponse
            （该 POST 的 HTTP 应答体）        （POST /api/respond body，回填 ③ 的 rpcId）
 ```
@@ -97,7 +97,7 @@ TypeScript 以 solution 根引用的**两个聚合 program** 检查（`tsconfig.
 |---|---|---|---|---|
 | `ClientRequest` | `'client-request'` | `rpcId` `method` `payload` | client mint | `POST /api/<method>` body |
 | `ServerResponse` | `'server-response'` | `rpcId` `result` | 回填 ① | 该 POST 的应答体（恒 HTTP 200） |
-| `ServerRequest` | `'server-request'` | `rpcId` `method` `payload` | server mint | SSE `data:` 行 |
+| `ServerRequest` | `'server-request'` | `rpcId` `method` `payload` | server mint | WebSocket text message |
 | `ClientResponse` | `'client-response'` | `rpcId` `result` | 回填 ③ | `POST /api/respond` body |

 `RpcMessage = ClientRequest | ServerResponse | ServerRequest | ClientResponse`，`switch (message.type)` 窄化。
@@ -167,7 +167,7 @@ export type ResponseValue<K> =

 ### 帧（server→client，具名 union）

-两条 SSE 流：mux 流（`GET /api/events.mux`，全 session 聚合）与 host 流（`GET /api/events.host`，host 级事件）。帧示例一行：
+两条逻辑流：mux 流（`/api/events.mux`，全 session 聚合）与 host 流（`/api/events.host`，host 级事件）。浏览器通过每流一条下行 WebSocket 消费，进程内 fetch 载体以 SSE 保持同构；物理边界见 [WebSocket 下行载体](2026-08-04-websocket-downlink-carrier.md)。帧示例一行：

 | 帧 type | 载荷 | 何时发 |
 |---|---|---|
@@ -185,7 +185,7 @@ export type ResponseValue<K> =
 - **冷会话处理遵循所有权**：`session.history` 与 `session.fork` 的源端读取会在不获取 Agent 的情况下检查持久化存储，而绑定到 Agent 的普通会话方法（如 `prompt`）则通过在途表去重后恢复会话。由会话支撑的 subagent 会拒绝这条通用恢复路径，且附加状态不对客户端暴露（`running` 已经覆盖）。
 - **审批/问答**：requested 帧受理时 mint 稳定 rpcId；先到先赢，host 内存 pending 表（keyed by rpcId）是唯一裁判；mux 重开后在 subscribed 帧后重放仍 pending 的 requested 帧（rpcId 原样复用，刷新恢复）。审计事件 `approval/asked`/`decided` 照旧走 durable 日志——帧=live 控制面，事件=durable 审计。**现状**：契约与帧类型已 shipped，host 侧 pending 表/wire answerer 未实现（`api-proxy.ts` 的 `respond` 是 stub，恒回 `not-pending`）；PendingCard v1 只展示。
 - **不设协议版本**：client 与 host 绑定发布，`host.describe` 无 protocolVersion 字段；出现独立发布的 client 时再引入。
- **预留 seam 纪律**：map 只含已实现方法，未知 method 在信封 parse 即 fail loud（`bad-request`），不设 not-implemented 兜底码。预留清单（实现时把签名抄进域接口+map 加行+schema 加对即升格）：`session.fork`、`prompt.mode` 加 `'inject'`、`task.list`、`host.listModels`、describe 加 `hostInstanceId`。（`session.rename` 已从本清单毕业：追加 user 来源的 `session/title` 事件。）
+- **预留接缝纪律**：map 只含已实现方法，未知 method 在信封 parse 即 fail loud（`bad-request`），不设 not-implemented 兜底码。预留清单（实现时把签名抄进域接口+map 加行+schema 加对即升格）：`session.fork`、`prompt.mode` 加 `'inject'`、`task.list`、`host.listModels`、describe 加 `hostInstanceId`。（`session.rename` 已从本清单毕业：追加 user 来源的 `session/title` 事件。）

 ## 客户端载体：AbstractApiClient 类体系（`fetch/client.ts`）

@@ -214,7 +214,7 @@ export type ResponseValue<K> =
 | 子类 | 所在包 | doFetch | 用途 |
 |---|---|---|---|
 | `InProcessApiClient` | apiproxy 本包 | 注入的 `{ fetch }` handler | **同构点**：`new InProcessApiClient(toFetchHandler(api))` 全程不过网络但真跑 wire 序列化/zod/SSE 帧——`dsh -p` headless 即协议第二真实消费者 |
-| `WebApiClient` | dsh-client-connection | `globalThis.fetch`（同源 `/api/*`） | 浏览器形态；HTTP+SSE 承载落地见 Web 客户端架构 RFC |
+| `WebApiClient` | dsh-client-connection | `globalThis.fetch` 上行 + 每逻辑流一条同源 WebSocket 下行 | 浏览器形态；物理边界见 [WebSocket 下行载体](2026-08-04-websocket-downlink-carrier.md) |
 | `FixtureApiClient` | dsh-client-connection | 不用（协议层覆写） | 无 server 的 UI 开发（`?fixture`）：覆写 `callUnary`/`openMux`/`openHost`/`respond` 虚方法，自己就是假 server（帧 rpcId 由它 mint，语义自洽） |
 | （将来）IPC 桥子类 | apps/electron | IPC 序列化往返 | 仅换 doFetch，契约/基类零改 |

@@ -228,11 +228,11 @@ export type ResponseValue<K> =

 **接一种新载体**：继承 `AbstractApiClient` 只实现 `doFetch`；需要拦截协议层（如 fixture）再覆写 `callUnary`/`openMux`/`openHost` 虚方法。契约与基类零改。

-**升格一个预留 seam**：把预留签名抄进域接口 → map 加行 → schema 加对 → UNARY_ROUTES 加行 → impl 实现。
+**升格一个预留接缝**：把预留签名抄进域接口 → map 加行 → schema 加对 → UNARY_ROUTES 加行 → impl 实现。

 ## Consequences

-所有 client 形态消费同一契约：加一个 unary 方法是从单一签名辐射的五步机械改动，换载体只动一个 `doFetch` 子类，wire 上每条消息可 zod 校验、可经 envelope tap 观测、可按 rpcId 对账。普通 unary 调用仍受时限约束，而 `host.pickDirectory` 与 `command.execute` 可保持挂起，直到操作完成或调用方／连接取消到来；若由用户掌控节奏的操作不自行结束，请求可能一直挂起，这是为避免把合理的操作时长视为传输失败而接受的代价。其余接受的代价：两组包需要显式 tsconfig paths 条目；预留 seam（fork/inject/task.list/listModels/hostInstanceId）在真实消费者出现前保持休眠。
+所有 client 形态消费同一契约：加一个 unary 方法是从单一签名辐射的五步机械改动，换载体只动一个 `doFetch` 子类，wire 上每条消息可 zod 校验、可经 envelope tap 观测、可按 rpcId 对账。普通 unary 调用仍受时限约束，而 `host.pickDirectory` 与 `command.execute` 可保持挂起，直到操作完成或调用方／连接取消到来；若由用户掌控节奏的操作不自行结束，请求可能一直挂起，这是为避免把合理的操作时长视为传输失败而接受的代价。其余接受的代价：两组包需要显式 tsconfig paths 条目；预留接缝（fork/inject/task.list/listModels/hostInstanceId）在真实消费者出现前保持休眠。

 ## Alternatives considered

@@ -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 .agents/notes/implemented/architecture/2026-07-19-gui-web-client-architecture.md
-2026-07-19-gui-web-client-architecture.md: b1f777172774f1cf8fef4d9494f15b38064d0c73
-2026-07-19-gui-web-client-architecture.zh.md: ffb9327d4fcee31ac1d189e34331ed6f82287769
+2026-07-19-gui-web-client-architecture.md: b306f3b155d9d9208066c3f25ad2c4fb4683b1ee
+2026-07-19-gui-web-client-architecture.zh.md: 28632667c45b360eb2bc5f0d06f10b9df910770d
@@ -73,7 +73,7 @@ Notifier 微任务合批 ──► ConversationSnapshot 缓存 ──uSES──
 - **SessionManager** (manager.ts): instance cluster + frame entry + the session list. sessionId-bearing frames go only to existing instances (a mux broadcast must not instantiate every session); approval/question `requested` frames are the exception — they never land in history, so they buffer in `pendingBuffers` and replay on instantiation.
 - **Notifier** (notifier.ts): two channels chosen by change source. `markDirty()` (default; frame-driven changes always) batches per microtask — N changes, one notification, one re-render; the flush rebuilds the snapshot cache before notifying. `notifyNow()` (only direct echoes of user gestures) rebuilds and notifies in the same tick — controlled inputs roll the DOM back and jump the caret if their echo defers to a microtask. Frame-driven code using notifyNow collapses batching back to per-frame renders; banned.
 - **TranscriptAdapter / PartialAccumulator**: the transcript is the append-origin surface projected in log order (`isAppendSurfaceEvent` from `@deepseek-ai/dsh-session/surface`) plus one marker per landed compaction checkpoint — never the model surface, which shadows replaced ranges and would erase conversation the reader already saw. Node order is seq-monotonic by construction, so there is no core `seq === index` assertion to satisfy and no degradation branch. Chunks contribute no node (O(1) skip): the accumulator folds StreamChunks into `AssistantBlock[]`, a delta swapping only that block's reference, and the finalizing message discards the accumulator in the same batch (no flicker on promotion). Cost model: one chunk = one string concatenation + a dirty mark; an unsubscribed Session under a frame storm costs only the mark.
- **ConnectionController** (in `packages/client/connection`): opens the mux/host streams, pumps with for-await, reconnects with exponential backoff (500ms doubling to 10s, jitter, unlimited) behind a generation fence; sinks are injected one-way (the Controller does not know Session). Reconnect = rebuild: `onConnected` → list refresh + per-open-session resync. The object layer faces only `IApiClient`; the Web carriage (HTTP POST for the two client→server quadrants, SSE for the two server→client) and the client class family are the layering RFC's territory.
+- **ConnectionController** (in `packages/client/connection`): opens the mux/host streams, pumps with for-await, reconnects with exponential backoff (500ms doubling to 10s, jitter, unlimited) behind a generation fence; sinks are injected one-way (the Controller does not know Session). Reconnect = rebuild: `onConnected` → list refresh + per-open-session resync. The object layer faces only `IApiClient`; Web carriage uses HTTP POST for the two client→server quadrants and [one WebSocket per logical stream](2026-08-04-websocket-downlink-carrier.md) for the two server→client quadrants, while the client class family remains the layering RFC's territory.

 ## The React face (`packages/client/web-react`)

@@ -1,4 +1,4 @@
-# Agent Note: Web 客户端架构——client cordis 插件树、slot 体系与 React-free 对象层
+# RFC: Web 客户端架构——client cordis 插件树、slot 体系与 React-free 对象层

 Status: implemented

@@ -36,15 +36,15 @@ Status: implemented

 ## slot 体系：页面怎么拼

-slot 体系有自己的 RFC——[slot 体系标准](2026-07-22-slot-type-chain-implementation.md)——本文整体移交给它。此处只留一段定位摘要：壳只渲染 `'root'`；插件用单独一次 `register` 调用组合 UI——占用 slot、声明并授权子 slot（`children` spec 对象）、声明 store、注入业务面；组件 props 分四份额自动推导到达（`PropsRuntime<K>` / `PropsRenderSlots<S>` / `PropsStore<H>` / inject），各有唯一真源。`SlotMap` 声明合并仍是类型权威，entry 只携带 owner 份额（「谁注入的，类型归谁」）；每个被渲染的注册项都在 per-entry 错误边界之内。
+slot 体系有自己的 RFC——[slot 体系标准](2026-07-22-slot-type-chain-implementation.md)——本文整体移交给它。此处只留一段定位摘要：壳只渲染 `'root'`；插件用单独一次 `register` 调用组合 UI——占坑、声明并授权子坑（`children` spec 对象）、声明 store、注入业务面；组件 props 分四份额自动推导到达（`PropsRuntime<K>` / `PropsRenderSlots<S>` / `PropsStore<H>` / inject），各有唯一真源。`SlotMap` 声明合并仍是类型权威，entry 只携带 owner 份额（「谁注入的，类型归谁」）；每个被渲染的注册项都在 per-entry 错误边界之内。

 实现的家：注册表核心与 props 份额类型在 `packages/client/ui-slots`，出口组件/渲染器/uSES 桥在 `packages/client/web-react`。

 ## 服务与 scope 寻址

-服务是插件对其他插件的唯一 API 面（UI 组件与注入面都不是 API；无人调用的插件不挂服务——ui-trajectory 即最小插件样板：无 ctx 服务，只做视图 slot 注册）。名册：`ctx.connection`（api client + 流句柄）、`ctx.slots`（注册表包装层，发 `slots/changed`，渲染入口，渲染器安装缝）、`ctx.sessions`（列表 store、当前会话状态、scope 树）、`ctx.loader`、`ctx.theme`、`ctx.i18n`、`ctx.layout`（跨插件视图导航）、`ctx.conversation`（send/cancel/startSession）。过去住在服务 store 里的观看态（面板宽、选中、草稿）现按 [slot 体系标准](2026-07-22-slot-type-chain-implementation.md) 住 entry 声明的 store。
+服务是插件对其他插件的唯一 API 面（UI 组件与注入面都不是 API；无人调用的插件不挂服务——ui-trajectory 即最小插件样板：无 ctx 服务，只做视图坑注册）。名册：`ctx.connection`（api client + 流句柄）、`ctx.slots`（注册表包装层，发 `slots/changed`，渲染入口，渲染器安装缝）、`ctx.sessions`（列表 store、当前会话状态、scope 树）、`ctx.loader`、`ctx.theme`、`ctx.i18n`、`ctx.layout`（跨插件视图导航）、`ctx.conversation`（send/cancel/startSession）。过去住在服务 store 里的观看态（面板宽、选中、草稿）现按 [slot 体系标准](2026-07-22-slot-type-chain-implementation.md) 住 entry 声明的 store。

-slot 之外不存在第二种注册模型——原视图环与工具环都已溶解进来。会话视图即 ui-conversation 声明的 `'conversation.view'` list slot 的 entry，tab 元数据随注册 options（`id`/`order`/`label`）走，per-view chrome 住视图组件自身。工具行是各视图自己声明的 keyed 子 slot——今天是 `'conversation.chat.toolview'`（keyed/session），由 chat 条目的 `children` 表声明；key 空间运行时开放（SlotMap 声明 slot、从不声明 key），这正是工具环「tool 名开放集」的原需求。渲染点逐行以 `entryKey: toolName` 分发、以 `GenericToolCard` 作调用点 `fallback`；owner 载荷是统一的 `ToolRowOwnerProps`（`callId`/`toolName`/`block`/`openDetails`），`ToolRowProps` 把它与 session 标配 kit 预组合供注册方组件取用。注册方就是普通插件、零专用设施：`ctx.slots.register({ name: 'conversation.chat.toolview', key: '<tool>', inject? }, Row)`，以 `inject: ['slots', 'conversation']` 作加载序缝（conversation 服务在场即保证 slot 已声明）。交互草稿等行内状态走普通 store 席位。trajectory/waterfall 得到同形 slot（slot 名按命名纪律 `<domain>.<entry>.<hole>` 已定死，共用一张 owner 类型），随各自的行渲染点落地——RendersCheck 拒绝无人渲染的声明，两种 slot 无法提前声明。
+slot 之外不存在第二种注册模型——原视图环与工具环都已溶解进来。会话视图即 ui-conversation 声明的 `'conversation.view'` list 坑的 entry，tab 元数据随注册 options（`id`/`order`/`label`）走，per-view chrome 住视图组件自身。工具行是各视图自己声明的 keyed 子槽——今天是 `'conversation.chat.toolview'`（keyed/session），由 chat 条目的 `children` 表声明；key 空间运行时开放（SlotMap 声明槽、从不声明 key），这正是工具环「tool 名开放集」的原需求。渲染点逐行以 `entryKey: toolName` 分发、以 `GenericToolCard` 作调用点 `fallback`；owner 载荷是统一的 `ToolRowOwnerProps`（`callId`/`toolName`/`block`/`openDetails`），`ToolRowProps` 把它与 session 标配 kit 预组合供注册方组件取用。注册方就是普通插件、零专用设施：`ctx.slots.register({ name: 'conversation.chat.toolview', key: '<tool>', inject? }, Row)`，以 `inject: ['slots', 'conversation']` 作加载序缝（conversation 服务在场即保证槽已声明）。交互草稿等行内状态走普通 store 席位。trajectory/waterfall 得同形槽（槽名按槽名纪律 `<域>.<条目>.<孔位>` 已定死，共用一张 owner 类型），随各自的行渲染点落地——RendersCheck 拒绝无人渲染的声明，两槽无法提前声明。

 **scope 寻址**与 host 侧 agent scope 惯例同构：服务是 root 单例，方法不收 sessionId——它们读调用方 ctx 上的 scope 标（`scopeOf(ctx)`）。在会话 scope 内，`ctx.conversation.send('hi', 'queue')` 自动打到该会话；跨会话调用换 ctx 定向（`ctx.sessions.scope(id)!.conversation.send(...)`）；从 root ctx 直接调 scoped 方法即 throw。client 会话 scope 的铸造方式与 host agent scope 相同（no-op 插件 fiber + scope 键 extend），首次观看时惰性建，只有会话被移除且无人观看才拆——仅 host 会话死亡不拆 scope（冻结为只读视窗）。

@@ -73,7 +73,7 @@ Notifier 微任务合批 ──► ConversationSnapshot 缓存 ──uSES──
 - **SessionManager**（manager.ts）：实例簇 + 帧总入口 + 会话列表。带 sessionId 的帧只投已存在实例（mux 广播不得把每个会话都实例化）；例外是审批/问答 `requested` 帧——它们不落 history、open 无法回补，故缓冲进 `pendingBuffers`，实例化时回放。
 - **Notifier**（notifier.ts）：两条通知通道，按变更来源取用。`markDirty()`（默认；帧驱动一律用它）按微任务合批——N 次变更、一次通知、一次重渲染；flush 先重建快照缓存再通知。`notifyNow()`（仅用户手势的直接回响）同 tick 重建并通知——受控输入的回响若延到微任务，DOM 会回滚、光标跳尾。帧驱动代码用 notifyNow 会让合批塌回逐帧渲染；禁。
 - **TranscriptAdapter / PartialAccumulator**：对话记录是按日志顺序投影的 append 来源 surface（`@deepseek-ai/dsh-session/surface` 的 `isAppendSurfaceEvent`），外加每次落地的压缩检查点一个标记——绝不用模型 surface，后者遮蔽被替换的范围，会抹掉读者已经看过的对话。节点顺序天然按 seq 单调，因此既无核心 `seq === index` 断言需要满足，也没有降级分支。分片不贡献任何节点（O(1) 跳过）：累积器把 StreamChunk 折叠成 `AssistantBlock[]`，一次增量只换该块引用；定稿消息到达即在同一批内弃掉累积器（提升无闪烁）。成本模型：一个分片 = 一次字符串拼接 + 一个脏标记；帧风暴下未订阅的 Session 只花那个标记。
- **ConnectionController**（在 `packages/client/connection`）：开 mux/host 双流、for-await 泵入，代际围栏之内指数退避重连（500ms 翻倍至 10s 封顶、抖动、无限重试）；sinks 单向注入（Controller 不认识 Session）。重连 = 重建：`onConnected` → 列表刷新 + 各已打开会话 resync。对象层只面向 `IApiClient`；Web 承载（HTTP POST 载两个 client→server 象限、SSE 载两个 server→client 象限）与客户端类族归分层 RFC 属地。
+- **ConnectionController**（在 `packages/client/connection`）：开 mux/host 双流、for-await 泵入，代际围栏之内指数退避重连（500ms 翻倍至 10s 封顶、抖动、无限重试）；sinks 单向注入（Controller 不认识 Session）。重连 = 重建：`onConnected` → 列表刷新 + 各已打开会话 resync。对象层只面向 `IApiClient`；Web 承载以 HTTP POST 载两个 client→server 象限、以[每逻辑流一条 WebSocket](2026-08-04-websocket-downlink-carrier.md)载两个 server→client 象限，客户端类族归分层 RFC 属地。

 ## React 面（`packages/client/web-react`）

@@ -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 .agents/notes/implemented/architecture/2026-08-04-websocket-downlink-carrier.md
+2026-08-04-websocket-downlink-carrier.md: b41ad687725c55acb8517fe7e93d645f007a0453
+2026-08-04-websocket-downlink-carrier.zh.md: 568240ec14592fba8444e5cc0a3bae2b35c45b94
@@ -0,0 +1,39 @@
+# Agent Note: WebSocket carrier for browser downlinks
+
+Status: implemented
+
+English | [中文](2026-08-04-websocket-downlink-carrier.zh.md)
+
+## Problem
+
+The browser Web GUI has long used two SSE responses for `events.mux` and `events.host`. HTTP/1.1 browsers typically allow only about six concurrent connections per origin; each page permanently occupying two makes same-origin tabs, plugin resources, and ordinary RPCs contend for connection slots, and reaching the limit causes requests to queue rather than merely slowing them down. The RPC protocol itself is channel-independent: a constraint of the browser's physical carrier must not leak into the session/runtime object layer.
+
+## Decision
+
+The real browser carrier opens one independent WebSocket for each downlink stream class: `/api/events.mux` sends only `MuxFrame`, and `/api/events.host` sends only `HostFrame`. Each text message is one complete `ServerRequest` JSON document; the client continues to validate the envelope first, then the concrete frame union for that path, and passes the narrow `RpcRequest<Frame>` form to the existing `ConnectionController`. The streams retain independent lifecycles and provide no cross-stream ordering guarantee; either one ending still fails the entire connection generation and rebuilds it under the existing backoff policy.
+
+WebSocket carries only the host→browser downlink. All client→host unary calls and `respond` operations for server requests continue to use the existing `POST /api/*`; the WebSocket accepts no client application messages. `WebApiClient` therefore holds HTTP `fetch` for uplink and WebSocket for downlink, while the fixture and `InProcessApiClient(toFetchHandler(api))` continue to implement the same two-stream `IApiClient` abstraction. The in-process fetch carrier retains SSE encoding and decoding to verify the channel-independent protocol's isomorphism, but network GET requests to `/api/events.*` answer only Upgrade Required and do not provide a browser compatibility fallback.
+
+## Upgrade and lifecycle boundaries
+
+`dsh-host-webserver` provides an exact upgrade-route registration seam alongside ordinary routes, dispatches Node upgrade sockets by pathname only, contains raw-socket errors, and waits for surviving upgraded connections to close during server teardown; it knows nothing about Harness frames or WebSocket messages. `dsh-client-connection` owns the WebSocket handshake, frame output, and stream cancellation, and reuses the `/api` Host/Origin trust fence before upgrade. An untrusted authority or cross-origin Origin is rejected before `ctx.apiProxy.events.*` starts.
+
+A browser abort or socket close cancels the corresponding host stream; plugin teardown also waits for that source iterator's cleanup. If a host stream throws midway, the carrier sends one existing `stream/error` frame and then closes the socket; the client treats that frame as connection loss rather than delivering it to a business sink. Each WebSocket reports open independently, and the existing readiness handshake still waits until mux and host are both open and the `host.describe` HTTP call has succeeded before publishing connected.
+
+## Verification
+
+Webserver contract tests pin upgrade-pathname dispatch, duplicate-registration rejection, disposal, and teardown; connection real-network tests pin each WebSocket's trust check, open, schema envelope, frame order, stream error, and close cancellation; client tests also prove that downlinks create `ws:`/`wss:` URLs while unary calls and `respond` still use HTTP `fetch`. The assembled keyless browser replay continues to cover Chromium, a real host, HTTP uplink, and the full WebSocket downlink chain.
+
+## Alternatives considered
+
+**Multiplex mux and host over one WebSocket.** This would add a channel tag, a multiplexing queue, and a single-connection backpressure policy, and would change the existing two-stream readiness semantics. Two WebSockets already avoid the HTTP/1.1 six-connection limit while keeping this change in the physical carrier layer.
+
+**Move unary calls and respond to a full-duplex WebSocket as well.** This would rewrite timeout, cancellation, HTTP-status, trust-fence, and request-correlation behavior without adding any benefit for the current downlink connection-slot problem. HTTP uplink is an explicitly retained boundary.
+
+**Keep a network SSE fallback.** Two carriers would let the production browser path silently fork because of proxy or handshake differences and would leave the connection-limit problem in a supported branch. During prerelease, only WebSocket downlink ships; the existing reconnect behavior and connection state expose failures explicitly.
+
+**Rely on HTTP/2 for greater connection concurrency.** The built-in development server uses plaintext Node HTTP/1.1, and a deployment's fronting proxy is not a product invariant. The physical downlink directly uses a browser primitive outside that connection pool.
+
+## Consequences
+
+Each Web page still has two long-lived downlink connections, but they no longer consume the browser's six-connection HTTP/1.1 quota. The runtime continues to consume the original two streams and retains all reconnect, seam-repair, and cross-stream unordered semantics. The cost is one more upgrade-registration surface in the webserver, a WebSocket implementation dependency in the connection package's host half, and separate maintenance of the browser WebSocket and in-process SSE physical codecs. They share the same `ServerRequest`/frame schemas and `IApiClient` semantics, avoiding a second application protocol.
@@ -0,0 +1,39 @@
+# Agent Note: 浏览器下行 WebSocket 载体
+
+Status: implemented
+
+[English](2026-08-04-websocket-downlink-carrier.md) | 中文
+
+## Problem
+
+浏览器 Web GUI 的 `events.mux` 与 `events.host` 长期使用两条 SSE（Server-Sent Events）响应。HTTP/1.1 浏览器通常只允许每个来源约六条并发连接；每个页面永久占住两条会让同源多标签页、插件资源和普通 RPC 争抢连接槽，达到上限后不是降速而是排队阻塞。RPC 协议本身是通道无关的，约束来自浏览器物理载体，不应渗入 session/runtime 对象层。
+
+## Decision
+
+浏览器真实载体为两类下行流各开一条独立 WebSocket：`/api/events.mux` 只发送 `MuxFrame`，`/api/events.host` 只发送 `HostFrame`。每条 text message 是一份完整的 `ServerRequest` JSON；客户端继续先校验信封，再按路径校验具体 frame union，并把窄形 `RpcRequest<Frame>` 交给既有 `ConnectionController`。两条流保持独立生命周期和无跨流顺序保证，任一条结束仍使整个 connection generation 失败并按既有退避策略重建。
+
+WebSocket 只承担 host→browser 下行。所有 client→host unary 调用和对 server request 的 `respond` 继续使用既有 `POST /api/*`；不在 WebSocket 上接收任何客户端业务 message。`WebApiClient` 因而同时持有 HTTP `fetch` 上行与 WebSocket 下行，而 fixture 和 `InProcessApiClient(toFetchHandler(api))` 继续实现同一 `IApiClient` 双流抽象。进程内 fetch 载体保留 SSE 编解码来检验通道无关的协议同构，但网络 `/api/events.*` GET 只回答 upgrade required，不作为浏览器兼容回退。
+
+## Upgrade 与生命周期边界
+
+`dsh-host-webserver` 提供与普通 route 并列的精确 upgrade-route 注册缝，只按 pathname 分发 Node upgrade socket，隔离原始 socket 错误，并在 server teardown 期间等待仍存活的升级连接关闭；它不认识 Harness 帧或 WebSocket message。`dsh-client-connection` 拥有 WebSocket handshake、frame 写出和 stream cancellation，并在 upgrade 前复用 `/api` 的 Host／Origin 信任栅栏。未受信任的 authority 或跨来源 Origin 在 `ctx.apiProxy.events.*` 启动前即被拒绝。
+
+浏览器 abort 或 socket close 会取消对应的 host stream；plugin teardown 还会等待该 source iterator 完成清理。host stream 中途抛错时，载体发送一份现有的 `stream/error` frame 后关闭 socket；客户端把该 frame 收敛为连接丢失，不投递给业务 sink。每条 WebSocket 独立报告 open，既有 readiness handshake 仍等待 mux、host 都 open 且 `host.describe` HTTP 调用成功后才发布 connected。
+
+## Verification
+
+webserver 契约测试钉住 upgrade pathname 分发、重复注册拒绝、disposer 与 teardown；connection 的真实网络测试钉住两条 WebSocket 各自的信任检查、open、schema 信封、frame 顺序、stream error 与 close cancellation；客户端测试同时证明下行创建 `ws:`／`wss:` URL，而 unary 与 `respond` 仍调用 HTTP `fetch`。组装后的 keyless browser replay 继续覆盖 Chromium、真实 host、HTTP 上行与 WebSocket 下行整链。
+
+## Alternatives considered
+
+**用一条 WebSocket 复用 mux 与 host。** 这会新增 channel tag、复用队列与单连接背压策略，并改变现有双流 readiness 语义；两条 WebSocket 已避开 HTTP/1.1 六连接上限，同时让本次变更保持在物理载体层。
+
+**把 unary 与 respond 一并迁入全双工 WebSocket。** 这会改写超时、取消、HTTP 状态、信任栅栏和请求关联面，却不能为当前的下行连接槽问题带来额外收益；上行 HTTP 是明确保留的边界。
+
+**保留网络 SSE 回退。** 双载体会让生产浏览器路径可因代理或握手差异静默分叉，并让连接上限问题继续存在于一个受支持分支；预发布阶段只交付 WebSocket 下行，失败由既有重连与连接状态显式呈现。
+
+**依赖 HTTP/2 扩大并发连接能力。** 内置开发服务器是明文 Node HTTP/1.1，部署前置代理也不是产品可依赖的不变式；物理下行应直接使用不受该连接池限制的浏览器原语。
+
+## Consequences
+
+每个 Web 页面仍有两条长期下行连接，但它们不再消耗浏览器的 HTTP/1.1 六连接配额；runtime 继续消费原有双流并保留所有重连、补缝和跨流无序语义。代价是 webserver 多一个 upgrade 注册面，connection host 半依赖 WebSocket 实现，并需分别维护浏览器 WebSocket 与进程内 SSE 两种物理编解码；它们共享同一 `ServerRequest`／frame schema 和 `IApiClient` 语义，避免形成第二套业务协议。
@@ -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 .agents/notes/implemented/feature/2026-08-04-web-composer-shared-width-axis.md
+2026-08-04-web-composer-shared-width-axis.md: 96cddda25bf79e9f2df7a0298039c27f316befca
+2026-08-04-web-composer-shared-width-axis.zh.md: 9a9f5a513bbce8f3e97698d58ab48b0abdefb142
@@ -0,0 +1,31 @@
+# Agent Note: Web composer shared width axis and control-row polish
+
+Status: implemented
+
+English | [中文](2026-08-04-web-composer-shared-width-axis.zh.md)
+
+## Problem
+
+The web conversation column sized each surface independently: the transcript column, the input card, the todo/goal/queue dock cards, and the ask-question/approval/plan-review takeover cards each carried their own hardcoded max-width (736/752/776/800px variants) and their own side paddings. The surfaces drifted a few pixels apart at full width and diverged further on narrow viewports, where some panels kept clearance from the screen edge and others went flush. Separately, the composer's control row had no adaptive behavior — on a narrow card the permission trigger's label squeezed the row — and the overlay menus anchored to the card could render wider than the card itself, painting past its right edge.
+
+## Decision
+
+One content width variable owns the whole column. `--dsh-chat-content-width` (748px) is declared on ConversationRoot's `.root` — the transcript and the composer seat are sibling subtrees, so the declaration must sit on their common ancestor for CSS custom-property inheritance to reach both. Every other geometry derives from it: the input card caps at `content + 32px` (`--dsh-composer-card-max-width`), the dock cards subtract four dock insets (4 × 8px) from the card and land back on the content width, and the takeover cards use the content width directly. The narrow-viewport invariant is expressed structurally, not numerically: content-width surfaces pad `calc(var(--dsh-composer-side-clearance) + 16px)` per side while the input card clears the bare clearance (16px), so "input card = content + 32px" holds at every viewport width, not just at the cap.
+
+The control row inside the card is a `container-type: inline-size` container, and the permission trigger drops its text label (keeping glyph + chevron) under a 460px container query. The query is anonymous on purpose: CSS modules hash `container-name` per module, so a name declared in InputBar's sheet can never match a query written in PermissionSelect's sheet — the two hashed names silently differ and the query never fires. Only triggers that carry a mode glyph collapse (`:has(.triggerIcon)`); a host-configured mode without one keeps its text as its sole identifier.
+
+Overlay menus anchored to the card (slash menu, command popupSelect) clamp to the anchor's width (`max-width: min(<design cap>, 100%)`), truncating long rows with ellipses instead of overflowing the card. Tooltip bubbles keep a 12px viewport-edge safety margin in the clamp (ui-primitives Tooltip).
+
+## Alternatives considered
+
+**Keep per-surface widths and align the numbers by hand.** Rejected: the drift this change removes was exactly the residue of hand-aligned constants; any future width change would need five coordinated edits with nothing enforcing the relation.
+
+**Declare the variables on `.composerStack`.** Rejected after trying it: the takeover panels are siblings of the stack in the composer seat and the transcript is a different subtree entirely, so the variables never reached them; the common ancestor (`.root`) is the only correct home.
+
+**A named container query for the label collapse.** Rejected by measurement: CSS modules scope `container-name` per module, so the cross-module name never matched and the query was dead. The anonymous query resolves against the nearest ancestor container, which is unambiguous here (the row is the only container).
+
+**JS ResizeObserver for the label collapse.** Rejected: a container query is declarative, needs no listener lifecycle, and the 460px threshold is a design choice either way.
+
+## Consequences
+
+Changing the column width is now a one-line edit with the ratio relations preserved by construction, which the 736 → 748 retune during review already exercised. The cost is indirection: the widths of five surfaces are no longer readable off their own stylesheets and require following the variable chain to ConversationRoot. The container-query collapse adds the constraint that InputBar's row stays a size container; removing that declaration silently disables the permission trigger's adaptive behavior. The anonymous query also means any future second container between the row and the trigger would capture it — if that happens, the query must move or the intermediate container must be avoided.
@@ -0,0 +1,31 @@
+# Agent Note: Web 输入区共享宽度轴与控制行打磨
+
+Status: implemented
+
+[English](2026-08-04-web-composer-shared-width-axis.md) | 中文
+
+## Problem
+
+Web 会话列的各个界面各自独立设定尺寸：转录列、输入卡片、todo/goal/queue 停靠卡片、ask-question/approval/plan-review 接管卡片各自硬编码 max-width（736/752/776/800px 等变体）与各自的侧边内边距。这些界面在全宽下彼此漂移几个像素，在窄视口下偏差更大——有的面板保留了到屏幕边缘的间隙，有的却贴边。另外，输入卡片的控制行没有自适应行为——窄卡片下权限触发器的文字标签会挤压整行；锚定在卡片上的浮层菜单也可能渲染得比卡片更宽，越过其右边缘。
+
+## Decision
+
+一个内容宽度变量拥有整列。`--dsh-chat-content-width`（748px）声明在 ConversationRoot 的 `.root` 上——转录与 composer 座位是兄弟子树，声明必须放在共同祖先上，CSS 自定义属性才能通过继承同时到达两者。其他几何全部由它推导：输入卡片上限为 `content + 32px`（`--dsh-composer-card-max-width`），停靠卡片从卡片宽度中减去四个停靠 inset（4 × 8px）正好回到内容宽度，接管卡片直接使用内容宽度。窄视口不变式以结构而非数值表达：内容宽度的界面每侧 pad `calc(var(--dsh-composer-side-clearance) + 16px)`，而输入卡片只留裸 clearance（16px），因此"输入卡片 = 内容 + 32px"在任意视口宽度下都成立，而不只是在上限处。
+
+卡片内的控制行是一个 `container-type: inline-size` 容器，权限触发器在 460px 容器查询下收起文字标签（保留图标 + 下拉箭头）。查询刻意匿名：CSS modules 按模块哈希 `container-name`，InputBar 样式表里声明的名字永远无法匹配 PermissionSelect 样式表里写的查询——两个哈希后的名字悄然不同，查询永不触发。只有带模式图标的触发器才收起（`:has(.triggerIcon)`）；没有图标的宿主自定义模式保留文字作为其唯一标识。
+
+锚定在卡片上的浮层菜单（slash 菜单、command popupSelect）钳制到锚点宽度（`max-width: min(<设计上限>, 100%)`），过长的行以省略号截断而不是溢出卡片。Tooltip 气泡在钳制中保留 12px 的视口边缘安全距离（ui-primitives Tooltip）。
+
+## Alternatives considered
+
+**保留各界面独立宽度，手工对齐数值。** 否决：本次改动消除的漂移正是手工对齐常量的残留；未来任何宽度调整都需要五处协同编辑，且没有任何机制强制这组关系。
+
+**把变量声明在 `.composerStack` 上。** 尝试后否决：接管面板在 composer 座位中是 stack 的兄弟节点，转录更是完全不同的子树，变量根本到不了它们；共同祖先（`.root`）是唯一正确的家。
+
+**用命名容器查询实现标签收起。** 经实测否决：CSS modules 按模块作用域化 `container-name`，跨模块名字永不匹配，查询是死的。匿名查询解析到最近的祖先容器，在这里没有歧义（该行是唯一的容器）。
+
+**用 JS ResizeObserver 实现标签收起。** 否决：容器查询是声明式的，无需监听器生命周期，而 460px 阈值无论哪种方案都是设计选择。
+
+## Consequences
+
+修改列宽现在是一行编辑，比例关系由构造保证——评审期间 736 → 748 的重调已经验证了这一点。代价是间接性：五个界面的宽度不再能从各自的样式表直接读出，需要沿变量链追到 ConversationRoot。容器查询收起增加了一个约束：InputBar 的行必须保持为尺寸容器；删掉那条声明会静默禁用权限触发器的自适应行为。匿名查询也意味着未来若在行与触发器之间出现第二个容器，它会截获该查询——届时查询必须迁移，或避免中间容器。
@@ -79,6 +79,7 @@ External packages that a workspace package resolves at runtime. `scripts/install
 | [`turndown`](https://github.com/mixmark-io/turndown) | MIT |
 | [`typescript`](https://github.com/microsoft/TypeScript) | Apache-2.0 |
 | [`use-sync-external-store`](https://github.com/facebook/react) | MIT |
+| [`ws`](https://github.com/websockets/ws) | MIT |
 | [`yaml`](https://github.com/eemeli/yaml) | ISC |
 | [`zod`](https://github.com/colinhacks/zod) | MIT |
 | [`zustand`](https://github.com/pmndrs/zustand) | MIT |
@@ -109,6 +110,7 @@ External packages **directly declared** only by repository tooling, test infrast
 | [`@types/react-dom`](https://github.com/DefinitelyTyped/DefinitelyTyped) | MIT |
 | [`@types/spdx-expression-parse`](https://github.com/DefinitelyTyped/DefinitelyTyped) | MIT |
 | [`@types/turndown`](https://github.com/DefinitelyTyped/DefinitelyTyped) | MIT |
+| [`@types/ws`](https://github.com/DefinitelyTyped/DefinitelyTyped) | MIT |
 | [`@typescript-eslint/parser`](https://github.com/typescript-eslint/typescript-eslint) | MIT |
 | [`@vitejs/plugin-react`](https://github.com/vitejs/vite-plugin-react) | MIT |
 | [`@vitest/coverage-v8`](https://github.com/vitest-dev/vitest) | MIT |
@@ -608,6 +608,9 @@ describe('web e2e: long Chat scroll contract', () => {
      await world.page.getByRole('tab', { name: 'Trajectory', exact: true }).click()
      await world.page.getByLabel('Trajectory timeline').waitFor({ timeout: 30_000 })
      await world.page.setViewportSize({ width: 700, height: 900 })
+      // The narrow breakpoint auto-collapses the sidebar. Re-open it because
+      // this scenario switches sessions while pinning the narrow Chat scroll owner.
+      await world.page.getByRole('button', { name: 'Open sidebar', exact: true }).click()
      await world.page.getByRole('tab', { name: 'Chat', exact: true }).click()
      await nextPaint(world.page)
      await expectSameFlowTop(world.page, sessionAnchor)
@@ -58,7 +58,7 @@ describe('web e2e: Models settings page configures a dormant provider', () => {
    await dialog.getByText('填入各提供方的 API 密钥即可使用其模型。').waitFor({ timeout: 10_000 })
    // The dormant pi-ai adapter contributes its whole installed catalog; no
    // provider is configured yet, so the page is one add button.
-    const add = dialog.getByRole('button', { name: '+ 添加提供方' })
+    const add = dialog.getByRole('button', { name: '添加提供方' })
    await add.waitFor({ timeout: 10_000 })
    // The button enables once the dormant catalog lands in the join.
    await expect.poll(async () => add.isEnabled(), { timeout: 10_000 }).toBe(true)
@@ -2,8 +2,8 @@
 // .agents/notes/implemented/testing/2026-07-24-web-gui-browser-e2e-lane.md).
 // Boots the REAL web composition — the shipped base plus web overlay through
 // the vendored Loader (the same include boot AppCLIEntry drives), patched the
-// snapshot way — so a real chromium exercises the real HTTP/SSE wire, the
-// api-gateway, agent loop, tools, and persistence. Modes ride $DSH_SNAPSHOT:
+// snapshot way — so a real chromium exercises the real HTTP uplink/WebSocket
+// downlink, api-gateway, agent loop, tools, and persistence. Modes ride $DSH_SNAPSHOT:
 // replay (default, keyless: normally disables the llm-deepseek row and
 // inserts dsh-llm-replay in providers mode), record (real adapter + key,
 // harvests fixtures from live session memory), refresh (keyless replay that
@@ -28,6 +28,7 @@
 - textbox "Describe what you want to build"
 - button "Commands":
  - img
+- tooltip "Commands"
 - 'button "Access mode, current: Workspace Write"': Workspace Write
 - button "Select model, current DeepSeek-V4-Flash":
  - text: DeepSeek-V4-Flash
@@ -17,4 +17,6 @@
      - text: minimax-cn
      - button "编辑"
      - button "删除"
-  - button "+ 添加提供方"
+  - button "添加提供方":
+    - img
+    - text: 添加提供方
@@ -30,6 +30,7 @@
    - textbox "Edit queued message": Edited queue item
    - button "Save queued message":
      - img
+    - tooltip "Save queued message"
    - button "Cancel editing":
      - img
 - textbox "Message the agent"
@@ -23,7 +23,7 @@
 - paragraph: partial
 - status: Deep diving...
 - region "To-dos":
-  - button "To-dos 1/2 tasks · 1 in progress"
+  - button "To-dos 1 completed · 1 in progress"
 - img
 - text: Ongoing Goal Keep the composer context panels aligned
 - button "Pause goal":
@@ -21,6 +21,7 @@
    - text: Edited queue item
    - button "Edit queued message":
      - img
+    - tooltip "Edit queued message"
    - button "Remove queued message":
      - img
    - button "Steer queued message":
@@ -28,8 +28,8 @@
 - scrollbar-width: auto
 - scrollbar-color: auto
 - ::-webkit-scrollbar-thumb:hover declarations: var(--dsh-scrollbar-thumb-hover)
- --dsh-scrollbar-thumb, pointer over the list: rgb(60, 60, 61)
- --dsh-scrollbar-thumb-hover, pointer over the list: rgb(84, 85, 87)
+- --dsh-scrollbar-thumb, pointer over the list: rgb(84, 85, 87)
+- --dsh-scrollbar-thumb-hover, pointer over the list: rgb(101, 103, 107)
 - list overflows: true
 - reserved band: 8px
 - scrollbar inset from the sidebar edge: 2px
@@ -296,7 +296,7 @@ export interface ConnectionConfig {
 }
 ```

-Source: [`packages/client/connection/src/index.ts:20`](../packages/client/connection/src/index.ts)
+Source: [`packages/client/connection/src/index.ts:21`](../packages/client/connection/src/index.ts)

 ## `@deepseek-ai/dsh-client-hmr`

@@ -574,7 +574,7 @@ export interface Config {
 }
 ```

-Source: [`packages/host/webserver/src/index.ts:39`](../packages/host/webserver/src/index.ts)
+Source: [`packages/host/webserver/src/index.ts:47`](../packages/host/webserver/src/index.ts)

 ## `@deepseek-ai/dsh-invariants`

@@ -770,6 +770,14 @@ The web-shape HTTP carrier service. Activation listens immediately (route regist
 */
 register(route: WebRoute): () => void

+/**
+ * Register an exact-path HTTP upgrade route. Duplicate paths throw because
+ * one socket can have only one protocol owner.
+ * @param route - pathname and handler owning negotiation plus socket use.
+ * @returns the disposer removing the route.
+ */
+registerUpgrade(route: WebUpgradeRoute): () => void
+
 /**
 * Register an index.html transform, applied to every index response in
 * registration order.
@@ -779,7 +787,7 @@ register(route: WebRoute): () => void
 tapIndex(transform: (html: string) => string): () => void
 ```

-Source: [`packages/host/webserver/src/index.ts:55`](../../packages/host/webserver/src/index.ts)
+Source: [`packages/host/webserver/src/index.ts:63`](../../packages/host/webserver/src/index.ts)

 ## `ctx.invariants` — `InvariantService`

@@ -1,6 +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
-web-styling.md: af05faca30fc968828f5a850f59d9d48ae382b05
-web-styling.zh.md: d0838cd8a6ee4290cdddff16b979950bec396314
+#   pnpm run verify-translation-pairing --write docs/web-styling.md
+web-styling.md: 173ce4482ec01f95cf38c62ebc2879e03a2d8192
+web-styling.zh.md: b38ba267cc7cc66ed12f000a93744dc81d940d06
@@ -62,14 +62,14 @@ Font sizes and spacing are **not tokenized** (matching the baseline repository's
 - Input card: floats centered at the same width as the conversation column (840px, reduced to 712px below 1024px) with bottom spacing; radius `--radius-xl`, border `--border-l2`, background `--bg-base`, shadow `--shadow-card`; two internal vertical sections = textarea (16px/24px, minimum 2 lines, maximum 14 lines = 336px, auto-growing through a mirror div) + action row (a 34px primary round button nested at bottom right); focus does not change the border or shadow (matching the baseline).
 - Primary input button (the three decisions made on 2026-07-20, visually based on the Codex App): a 32px solid circular icon button (inline SVG). Idle = `--accent` background with a white ↑ “Send” arrow; while running it changes in place to an accent ■ “Stop” icon on `--accent-soft` (the same color family, not a warning, and not red). **Input is locked while running** (decision 3, replacing the earlier hover-menu design): the textarea is disabled (gray, with draft content still visible), there is no queue/interjection menu, and Stop is the only action. When the turn ends, input unlocks and regains focus. Enter sends; Ctrl/Meta+Enter inserts a newline (the keyboard path is disabled with the locked input while running).
 - Scrollbars: nearly invisible, darkening on hover, with `scrollbar-gutter: stable` so they do not consume layout space (always use `.scrollable`; see § 3.9).
- Four-quadrant RPC direction symbols (the official visual vocabulary, using the spatial metaphor that up goes to the server, down comes from the server; single line = unary, double line = SSE):
+- Four-quadrant RPC direction symbols (the official visual vocabulary, using the spatial metaphor that up goes to the server, down comes from the server; single line = client-initiated exchange, double line = server-initiated exchange):

 | Symbol | Quadrant | Badge colors |
 | --- | --- | --- |
 | `↑` | client-request (unary outbound) | `--accent` / `--accent-soft` |
 | `↓` | server-response (unary response) | ok `--ok`/`--ok-soft`, error `--error`/`--error-soft` |
-| `⇟` | server-request (SSE frame push) | mux `--color-frame-mux`/`--frame-mux-soft`, host `--color-frame-host`/`--frame-host-soft` |
-| `⇞` | client-response (SSE-side response) | `--accent`/`--accent-soft` at reduced opacity |
+| `⇟` | server-request (downlink stream) | mux `--color-frame-mux`/`--frame-mux-soft`, host `--color-frame-host`/`--frame-host-soft` |
+| `⇞` | client-response (reply to server request) | `--accent`/`--accent-soft` at reduced opacity |

 ## 3. Style implementation rules (review checklist)

@@ -62,14 +62,14 @@
 - 输入卡片：与会话列同宽（840px，<1024px 降 712px)居中悬浮（距底留白带）；圆角 `--radius-xl`、边框 `--border-l2`、底 `--bg-base`、阴影 `--shadow-card`；内部上下两段=textarea（16px/24px，min 2 行 max 14 行=336px，镜像 div 自增高）+ 操作行（右下嵌 34px 主圆钮）；focus 无边框/阴影变化（基线同款）。
 - 输入主按钮（拍板 2026-07-20 三连，视觉参照 Codex App）：32px 实心正圆图标钮（内联 SVG）——空闲=`--accent` 底白↑箭头「发送」，运行中原地变 `--accent-soft` 底 accent ■「停止」（同色系不告警、不用红）。**运行中锁输入**（拍板 3，取代早先 hover 菜单方案）：textarea disabled（灰、草稿内容保留可见）、无任何排队/插话菜单，停止是唯一动作；turn 结束解禁并 refocus。键盘 Enter=发送、Ctrl/Meta+Enter=换行（运行中键盘路径随锁失效）。
 - 滚动条：近隐形、hover 加深、`scrollbar-gutter: stable` 不占布局（统一走 `.scrollable`，见 §3-9）。
- RPC 四象限方向符（官方视觉词汇，空间隐喻：上=去 server、下=来自 server；单线=unary、双线=SSE）：
+- RPC 四象限方向符（官方视觉词汇，空间隐喻：上=去 server、下=来自 server；单线=客户端发起的交互、双线=服务端发起的交互）：

 | 符号 | 象限 | 徽章配色 |
 | --- | --- | --- |
 | `↑` | client-request（unary 出站） | `--accent` / `--accent-soft` |
 | `↓` | server-response（unary 回包） | ok `--ok`/`--ok-soft`，error `--error`/`--error-soft` |
-| `⇟` | server-request（SSE 帧推送） | mux `--color-frame-mux`/`--frame-mux-soft`，host `--color-frame-host`/`--frame-host-soft` |
-| `⇞` | client-response（SSE 侧回应） | `--accent`/`--accent-soft` 降透明度 |
+| `⇟` | server-request（下行流） | mux `--color-frame-mux`/`--frame-mux-soft`，host `--color-frame-host`/`--frame-host-soft` |
+| `⇞` | client-response（对 server request 的回应） | `--accent`/`--accent-soft` 降透明度 |

 ## 3. 样式编码规范（review 对照打勾）

@@ -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/connection/README.md
-README.md: f537fee3273e3b5d2411197cf1a1a6e0d34af5f9
-README.zh.md: 16528e3c963c474d80c7f93d3b385ec31ee0bfa5
+README.md: faf093964a740092983e13bf88f2cccd853c3e36
+README.zh.md: b06ab245dedbde13957aa416be044ef107b2753c
@@ -2,11 +2,15 @@

 English | [中文](README.zh.md)

-Wire consumer layer: the client plugin's apply mounts `ctx.connection` (shared api client + current-page loopback state + single-consumer stream-loop starter); the export face carries the wire contract types, the `AbstractApiClient` seam, and the loop's sink/config types. Loopback hostname classification stays package-internal: the `/api` Host fence uses it directly, while other client plugins consume the derived `ctx.connection.isLoopback` state. The node half's `/api` route pins the privileged method set (`host.pickDirectory`, `host.openPath`, and the whole configuration plane — `settings.describe`/`update`/`replace`/`mutate` and `credentials.describe`/`set`/`unset`, reads included, since describing returns the exposed configuration and probing an arbitrary reference reports where a credential comes from) to loopback by passing the trust fence with an empty trust list — a declared `trustedHosts` authority reaches every other method, while these stay loopback-local until a real authentication layer exists. The platform subclasses (WebApiClient/FixtureApiClient), the ConnectionController loop, and the fixture data source are package-internal — apply selects and drives them; tests reach them via src. Contract: api-contracts v3 §3.
+Wire consumer layer: the client plugin's apply mounts `ctx.connection` (shared api client + current-page loopback state + single-consumer stream-loop starter); the export face carries the wire contract types, the `AbstractApiClient` seam, and the loop's sink/config types. The real browser carrier uses HTTP POST for unary and respond operations and opens one downlink-only WebSocket each for `events.mux` and `events.host`; the fixture and in-process carriers continue to satisfy the same two-stream abstraction. Loopback hostname classification stays package-internal: the `/api` Host fence and WebSocket upgrades use it directly, while other client plugins consume the derived `ctx.connection.isLoopback` state. The node half's `/api` route pins the privileged method set (`host.pickDirectory`, `host.openPath`, and the whole configuration plane — `settings.describe`/`update`/`replace`/`mutate` and `credentials.describe`/`set`/`unset`, reads included, since describing returns the exposed configuration and probing an arbitrary reference reports where a credential comes from) to loopback by passing the trust fence with an empty trust list — a declared `trustedHosts` authority reaches every other method, while these stay loopback-local until a real authentication layer exists. The platform subclasses (WebApiClient/FixtureApiClient), the ConnectionController loop, and the fixture data source are package-internal — apply selects and drives them; tests reach them via src. The downlink boundary is documented in the [WebSocket downlink carrier Agent Note](../../../.agents/notes/implemented/architecture/2026-08-04-websocket-downlink-carrier.md); the protocol contract is api-contracts v3 §3.

 ## /api browser-trust fence

-The node half guards every request under `/api` before bridging (`src/api-request-trust.ts`). Every request — browser-marked or not — must present a `Host` that is a loopback authority or matches a `trustedHosts` entry: exact on `host:port` entries, any port on port-less entries, both sides compared through WHATWG normalization (DNS-rebinding defense). There is deliberately no shortcut for requests without browser markers: over plain HTTP a browser attaches neither `Origin` nor Fetch-Metadata to reads (EventSource, images, navigations — those headers go only to trustworthy destinations), so an unmarked request may still be a rebound browser read with a readable response, and Host is the one header rebinding cannot forge; non-browser clients pass the same fence via loopback, the CLI-derived LAN IP literals, or a declared authority. When markers are present, an attached `Origin` must equal the Host authority, and an explicit `sec-fetch-site: cross-site` marker is refused. A `trustedHosts` entry that is not a bare, canonical `host[:port]` authority — one WHATWG parsing reads back exactly as written — fails the plugin load loudly: parsing would otherwise quietly authorize the hostname inside `harness.internal/path`, or broaden a dangling-colon or zero-padded port to an any-port grant. Failures answer plain 403 before any RPC dispatch. A non-loopback (`--host 0.0.0.0`) deployment therefore needs its serving authorities trusted: the dsh CLI derives the machine's LAN IP literals itself and its `--trusted-host` flag declares named ones, so `trustedHosts` in cordis.yml is for compositions the CLI does not boot. The fence is deliberately not an authentication layer — reachability policy stays with the webserver binding, and auth remains deferred work. Decision record: [the api browser-trust boundary Agent Note](../../../.agents/notes/implemented/architecture/2026-07-28-api-browser-trust-boundary.md).
+The node half guards every entry under `/api` before bridging or upgrading (`src/api-request-trust.ts`). Every request — browser-marked or not — must present a `Host` that is a loopback authority or matches a `trustedHosts` entry: exact on `host:port` entries, any port on port-less entries, both sides compared through WHATWG normalization (DNS-rebinding defense). There is deliberately no shortcut for unmarked HTTP requests: over plain HTTP a browser attaches neither `Origin` nor Fetch-Metadata to image and navigation reads, so an unmarked request may still be a rebound browser read with a readable response, and Host is the one header rebinding cannot forge; a browser WebSocket handshake carries `Origin` and passes the same comparison. Non-browser clients pass the same fence via loopback, the CLI-derived LAN IP literals, or a declared authority. When markers are present, an attached `Origin` must equal the Host authority, and an explicit `sec-fetch-site: cross-site` marker is refused. A `trustedHosts` entry that is not a bare, canonical `host[:port]` authority — one WHATWG parsing reads back exactly as written — fails the plugin load loudly: parsing would otherwise quietly authorize the hostname inside `harness.internal/path`, or broaden a dangling-colon or zero-padded port to an any-port grant. HTTP failures answer plain 403 before any RPC dispatch; upgrade failures reject the handshake before any event stream starts. A non-loopback (`--host 0.0.0.0`) deployment therefore needs its serving authorities trusted: the dsh CLI derives the machine's LAN IP literals itself and its `--trusted-host` flag declares named ones, so `trustedHosts` in cordis.yml is for compositions the CLI does not boot. The fence is deliberately not an authentication layer — reachability policy stays with the webserver binding, and auth remains deferred work. Decision record: [the api browser-trust boundary Agent Note](../../../.agents/notes/implemented/architecture/2026-07-28-api-browser-trust-boundary.md).
+
+## `/api` WebSocket downlinks
+
+`/api/events.mux` and `/api/events.host` each accept a WebSocket upgrade and send only the corresponding `ServerRequest` text messages to the browser; the client sends no application data over these sockets. If either socket ends, the current connection generation fails and rebuilds both streams; readiness still requires both sockets to be open and the `host.describe` HTTP call to succeed. Host teardown terminates both sockets, aborts their sources, and waits for source cleanup before returning. Ordinary network GETs to these paths return 426 with no SSE fallback; `toFetchHandler`'s SSE codec serves only the isomorphic in-process carrier.

 ## Keyless fixture

@@ -2,11 +2,15 @@

 [English](README.md) | 中文

-协议消费方层：客户端插件的 apply 会挂载 `ctx.connection`（共享 API 客户端 + 当前页面的 loopback 状态 + 单消费方流循环启动器）；导出表层携带协议契约类型、`AbstractApiClient` seam，以及循环的 sink／配置类型。Loopback hostname 判定逻辑留在包内部：`/api` Host fence 会直接使用它，其他客户端插件则消费派生的 `ctx.connection.isLoopback` 状态。node 半侧的 `/api` 路由通过向信任栅栏传入空信任列表，将特权方法集（`host.pickDirectory`、`host.openPath`，以及整个配置面——`settings.describe`/`update`/`replace`/`mutate` 与 `credentials.describe`/`set`/`unset`，读取也在内，因为 describe 会返回已暴露的配置，而探测任意引用会报出某条凭据来自何处）限制在回环地址——已声明的 `trustedHosts` 授权可达其余全部方法，而这些方法在真正的认证层出现之前仍只限回环本机。平台子类（WebApiClient/FixtureApiClient）、ConnectionController 循环和 fixture（测试前置数据）数据源都属于包内部：apply 负责选择并驱动它们，测试则通过 src 访问。契约：api-contracts v3 §3。
+协议消费层：客户端插件的 apply 会挂载 `ctx.connection`（共享 API 客户端 + 当前页面的 loopback 状态 + 单消费方流循环启动器）；导出表层携带协议契约类型、`AbstractApiClient` seam，以及循环的 sink／配置类型。真实浏览器载体以 HTTP POST 发送 unary／respond，并为 `events.mux` 与 `events.host` 各开一条只下行的 WebSocket；fixture 与进程内载体继续满足同一双流抽象。Loopback hostname 判定逻辑留在包内部：`/api` Host fence 与 WebSocket upgrade 会直接使用它，其他客户端插件则消费派生的 `ctx.connection.isLoopback` 状态。node 半侧的 `/api` 路由让特权方法集（`host.pickDirectory`、`host.openPath`，以及整个配置面——`settings.describe`/`update`/`replace`/`mutate` 与 `credentials.describe`/`set`/`unset`，读取也在内，因为 describe 会返回已暴露的配置，而探测任意引用会报出某条凭据来自何处）以空信任表过信任 fence，从而钉在回环——已声明的 `trustedHosts` 授权可达其余全部方法，而这些方法在真正的认证层出现之前仍只限回环本机。平台子类（WebApiClient/FixtureApiClient）、ConnectionController 循环和 fixture 数据源都属于包内部：apply 负责选择并驱动它们，测试则通过 src 访问。下行边界见 [WebSocket 下行载体 Agent Note](../../../.agents/notes/implemented/architecture/2026-08-04-websocket-downlink-carrier.md)；协议契约见 api-contracts v3 §3。

 ## /api 浏览器信任栅栏

-node 半侧在桥接前守卫 `/api` 下的每个请求（`src/api-request-trust.ts`）。每个请求——无论是否带浏览器标记——`Host` 都必须是回环地址权威，或与某个 `trustedHosts` 条目匹配：带端口的 `host:port` 条目精确匹配，不带端口的条目匹配任意端口，两侧均经 WHATWG 归一化后比较（DNS rebinding 防御）。刻意不为无浏览器标记的请求开捷径：明文 HTTP 下浏览器的读取（EventSource、图片、导航——这些头只发给可信目标）既不带 `Origin` 也不带 Fetch-Metadata，因此无标记请求仍可能是被重绑页面发起的、响应可被读走的读取，而 Host 是重绑唯一伪造不了的请求头；非浏览器客户端经由回环地址、CLI（命令行界面）推导的 LAN IP 字面量或已声明的权威通过同一道栅栏。当标记存在时，若附带 `Origin`，则其必须与 Host 权威完全一致；显式的 `sec-fetch-site: cross-site` 标记一律拒绝。不是纯的、规范形 `host[:port]` 权威的 `trustedHosts` 条目——即 WHATWG 解析读回后与原文不完全一致的——会使插件在加载时明确报错：否则解析会悄悄授权 `harness.internal/path` 这类笔误里的 hostname，或把悬空冒号、补零端口放大成任意端口授权。相关请求会在任何 RPC 分发之前直接收到 403 响应。因此非回环（`--host 0.0.0.0`）部署需要让自己的服务权威被信任：dsh CLI 会自行推导本机的 LAN IP 字面量，其 `--trusted-host` flag 用于声明具名权威，所以 cordis.yml 中的 `trustedHosts` 面向 CLI 不参与引导的组合。这道栅栏刻意不承担认证职责——可达性策略归 webserver 绑定配置，认证仍是延期工作。决策记录：[API 浏览器信任边界 Agent Note](../../../.agents/notes/implemented/architecture/2026-07-28-api-browser-trust-boundary.md)。
+node 半侧在桥接或 upgrade 前守卫 `/api` 下的每个入口（`src/api-request-trust.ts`）。每个请求——无论是否带浏览器标记——`Host` 都必须是回环地址权威，或与某个 `trustedHosts` 条目匹配：带端口的 `host:port` 条目精确匹配，不带端口的条目匹配任意端口，两侧均经 WHATWG 归一化后比较（DNS rebinding 防御）。刻意不为无浏览器标记的 HTTP 请求开捷径：明文 HTTP 下浏览器的图片与导航读取既不带 `Origin` 也不带 Fetch-Metadata，因此无标记请求仍可能是被重绑页面发起的、响应可被读走的读取，而 Host 是重绑唯一伪造不了的请求头；WebSocket 浏览器握手会带 `Origin` 并通过同一道比较。非浏览器客户端经由回环地址、CLI 推导的 LAN IP 字面量或已声明的权威通过同一道栅栏。当标记存在时，`Origin` 必须与 Host 权威完全一致；显式的 `sec-fetch-site: cross-site` 标记一律拒绝。不是纯的、规范形 `host[:port]` 权威的 `trustedHosts` 条目——即 WHATWG 解析读回后与原文不完全一致的——会让插件加载大声失败：否则解析会悄悄授权 `harness.internal/path` 这类笔误里的 hostname，或把悬空冒号、补零端口放大成任意端口授权。HTTP 失败在任何 RPC 分发之前以纯 403 应答，upgrade 失败在启动任何 event stream 前拒绝握手。因此非回环（`--host 0.0.0.0`）部署需要让自己的服务权威被信任：dsh CLI 会自行推导本机的 LAN IP 字面量，其 `--trusted-host` flag 用于声明具名权威，所以 cordis.yml 中的 `trustedHosts` 面向 CLI 不参与引导的组合。这道栅栏刻意不承担认证职责——可达性策略归 webserver 绑定配置，认证仍是延期工作。决策记录：[api 浏览器信任边界 Agent Note](../../../.agents/notes/implemented/architecture/2026-07-28-api-browser-trust-boundary.md)。
+
+## `/api` WebSocket 下行
+
+`/api/events.mux` 与 `/api/events.host` 各接受一条 WebSocket upgrade，并只向浏览器发送对应的 `ServerRequest` text message；客户端不会在这些 socket 上发送业务数据。任一 socket 结束都会使当前 connection generation 失败并重建两条流，连接就绪仍要求两条 socket open 且 `host.describe` HTTP 调用成功。Host teardown 会终止两条 socket、中止各自的 source，并等待 source 清理完成后再返回。普通网络 GET 这些路径会返回 426，不保留 SSE 回退；`toFetchHandler` 的 SSE 编解码只服务进程内同构载体。

 ## 无密钥 fixture

@@ -14,7 +18,7 @@ node 半侧在桥接前守卫 `/api` 下的每个请求（`src/api-request-trust

 ## 模型体验

-无。协议消费方层只在浏览器与主机之间搬运已经组合好的消息；这里没有任何内容进入模型请求。
+无。协议消费层只在浏览器与主机之间搬运已经组合好的消息；这里没有任何内容进入模型请求。

 #### KV Cache 影响

@@ -22,5 +26,5 @@ node 半侧在桥接前守卫 `/api` 下的每个请求（`src/api-request-trust

 ## 已知限制与暂缓事项

- **history 的隐式恢复存在争议**：在未附加的会话上打开 history，会在主机侧拉起 agent（智能体）；纯持久化读取的替代方案记录在 rt-core 协调账本中，P-I 不作改变。该包的消费方会在首次打开时感受到这段延迟。
+- **history 的隐式恢复存在争议**：在未附加的会话上打开 history，会在主机侧拉起 agent；纯持久化读取的替代方案记录在 rt-core 协调账本中，P-I 不作改变。该包的消费方会在首次打开时感受到这段延迟。
 - **计划移除 `ToolEventView`／`ToolCallView`／`ToolResultView` 的重新导出**：当 toolview 迁移删除主机 `viewFor` 行时，它们会一并移除（呈现属于客户端）；在此之前，fixture 保留一份局部 `viewFor` 镜像。
@@ -1,6 +1,6 @@
 {
  "name": "@deepseek-ai/dsh-client-connection",
-  "description": "Wire consumer layer: IApiClient subclasses, ConnectionController (SSE dual-stream + reconnect), fixture api (no cordis)",
+  "description": "Wire consumer layer: HTTP-up/WebSocket-down client, ConnectionController dual streams with reconnect, and fixture api",
  "version": "0.0.1",
  "private": true,
  "type": "module",
@@ -34,7 +34,8 @@
    "@deepseek-ai/dsh-llm": "workspace:^",
    "@deepseek-ai/dsh-session": "workspace:^",
    "@deepseek-ai/dsh-tools": "workspace:^",
-    "schemastery": "^3.18.0"
+    "schemastery": "^3.18.0",
+    "ws": "^8.21.0"
  },
  "files": [
    "lib/index.js",
@@ -52,6 +53,7 @@
  "devDependencies": {
    "@deepseek-ai/dsh-host-webserver": "workspace:^",
    "@deepseek-ai/dsh-invariants": "workspace:^",
+    "@types/ws": "^8.18.1",
    "cordis": "^4.0.0-rc.7"
  }
 }
@@ -1,8 +1,14 @@
 /**
 * The /api URL prefix — single source for both halves of the web transport.
- * The node half registers this prefix on the web server; browser-side path
- * literals currently live in the apiproxy client layer (out of scope here).
+ * The node half registers this prefix on the web server; both halves share the
+ * event paths below for the browser WebSocket downlinks.
 */

 /** Route prefix owning every api request (`/api` and `/api/<anything>`). */
 export const API_PATH = '/api'
+
+/** Browser mux-frame WebSocket pathname. */
+export const MUX_EVENTS_PATH = `${API_PATH}/events.mux`
+
+/** Browser host-frame WebSocket pathname. */
+export const HOST_EVENTS_PATH = `${API_PATH}/events.host`
@@ -4,7 +4,7 @@
 * the attacker's domain while the socket reaches this server) and cross-site
 * requests fired from a malicious page. The Host fence binds every request,
 * browser-looking or not: over plain HTTP a browser attaches neither Origin
- * nor Fetch-Metadata to reads (EventSource, images, navigations — those
+ * nor Fetch-Metadata to reads (images and navigations — those
 * headers go only to trustworthy destinations), so an unmarked request may
 * still be a rebound browser read and Host is the one header rebinding cannot
 * forge. Non-browser and remote clients pass the same fence via loopback, the
@@ -97,7 +97,7 @@ export function isTrustedApiRequest(request: ApiTrustRequest, trustedHosts: read
  // fills Host from the URL it believes it is talking to, so a rebound page
  // carries the attacker's domain here even though the socket lands on this
  // server. There is no marker shortcut — a browser read over plain HTTP
-  // (EventSource, images, navigations) arrives with neither Origin nor
+  // (images and navigations) arrives with neither Origin nor
  // Fetch-Metadata, indistinguishable from curl, and its response is readable
  // by the rebound page.
  const host = header(request.headers, 'host')
@@ -126,7 +126,7 @@ export class ConnectionController {

      try {
        // Strict readiness handshake (audit C2): describe proves unary reachability, onOpen
-        // proves each SSE transport is established (response headers in, before any frame) —
+        // proves each physical stream is established before any frame —
        // only then may onConnected fire, so the resync it triggers cannot outrun the
        // subscribed baseline. The timeout guards against a carrier that never fires onOpen
        // (see ConnectionConfig.streamOpenTimeoutMs).
@@ -1,12 +1,91 @@
-// WebApiClient: the browser platform subclass — transport = global fetch over same-origin
-// /api/* (base resolution handled by AbstractApiClient). Envelope observation comes from the
-// base batching aspect; subscribers attach via subscribeEnvelopes (see boot).
+/** Browser API carrier: HTTP upstream plus one WebSocket per downstream event stream. */

+import type { ApiProxy, HostFrame, MuxFrame, RpcRequest, ServerRequest } from './api.ts'
 import { AbstractApiClient } from './api.ts'
+import { hostFrameSchema, muxFrameSchema } from '@deepseek-ai/dsh-host-apiproxy/api/events.schema'
+import { serverRequestSchema } from '@deepseek-ai/dsh-host-apiproxy/api/rpc.schema'
+import { HOST_EVENTS_PATH, MUX_EVENTS_PATH } from '../api-path.ts'

-/** Browser platform subclass: transport = global fetch over same-origin /api/*. */
+type SocketItem<F> = { kind: 'frame'; envelope: RpcRequest<F> } | { kind: 'end' }
+type Parser<F> = { parse(value: unknown): F }
+
+/** Browser platform subclass: unary/respond use fetch; mux/host use downlink-only WebSockets. */
 export class WebApiClient extends AbstractApiClient {
  protected doFetch(input: URL, init?: RequestInit): Promise<Response> {
    return globalThis.fetch(input, init)
  }
+
+  protected override openMux(
+    _payload: Parameters<ApiProxy['events']['mux']>[0]['payload'],
+    signal: AbortSignal,
+    onOpen?: () => void,
+  ): AsyncIterable<RpcRequest<MuxFrame>> {
+    return this.readWebSocket(MUX_EVENTS_PATH, signal, muxFrameSchema, onOpen)
+  }
+
+  protected override openHost(
+    _payload: Parameters<ApiProxy['events']['host']>[0]['payload'],
+    signal: AbortSignal,
+    onOpen?: () => void,
+  ): AsyncIterable<RpcRequest<HostFrame>> {
+    return this.readWebSocket(HOST_EVENTS_PATH, signal, hostFrameSchema, onOpen)
+  }
+
+  private async *readWebSocket<F extends MuxFrame | HostFrame>(
+    path: string,
+    signal: AbortSignal,
+    frameSchema: Parser<F>,
+    onOpen?: () => void,
+  ): AsyncGenerator<RpcRequest<F>> {
+    const url = new URL(path, this.resolveBase())
+    url.protocol = url.protocol === 'https:' ? 'wss:' : 'ws:'
+    const socket = new WebSocket(url)
+    const inbox: SocketItem<F>[] = []
+    let wake: (() => void) | undefined
+    const enqueue = (item: SocketItem<F>): void => {
+      inbox.push(item)
+      wake?.()
+      wake = undefined
+    }
+    const handleOpen = (): void => { onOpen?.() }
+    const handleMessage = (event: MessageEvent): void => {
+      let full: ServerRequest
+      let frame: F
+      try {
+        if (typeof event.data !== 'string') throw new Error('binary WebSocket frame')
+        full = serverRequestSchema.parse(JSON.parse(event.data))
+        frame = frameSchema.parse(full.payload)
+      } catch (error) {
+        console.error(`[client-connection] dropping malformed WebSocket frame on ${path}:`, error)
+        return
+      }
+      this.onEnvelope(full)
+      enqueue({ kind: 'frame', envelope: { rpcId: full.rpcId, payload: frame } })
+    }
+    const handleClose = (): void => { enqueue({ kind: 'end' }) }
+    const handleAbort = (): void => {
+      if (socket.readyState === WebSocket.CONNECTING || socket.readyState === WebSocket.OPEN) socket.close()
+    }
+    socket.addEventListener('open', handleOpen)
+    socket.addEventListener('message', handleMessage)
+    socket.addEventListener('close', handleClose, { once: true })
+    signal.addEventListener('abort', handleAbort, { once: true })
+    if (signal.aborted) handleAbort()
+    try {
+      while (true) {
+        while (inbox.length > 0) {
+          const item = inbox.shift() as SocketItem<F>
+          if (item.kind === 'end') return
+          yield item.envelope
+        }
+        await new Promise<void>((resolve) => { wake = resolve })
+      }
+    } finally {
+      signal.removeEventListener('abort', handleAbort)
+      socket.removeEventListener('open', handleOpen)
+      socket.removeEventListener('message', handleMessage)
+      socket.removeEventListener('close', handleClose)
+      handleAbort()
+    }
+  }
 }
@@ -2,13 +2,14 @@
 import type { Context } from 'cordis'
 import z from 'schemastery'
 // Activates the httpServer Context merge used below.
-import type { WebRoute } from '@deepseek-ai/dsh-host-webserver'
+import type { WebRoute, WebUpgradeRoute } from '@deepseek-ai/dsh-host-webserver'
 import { toFetchHandler } from '@deepseek-ai/dsh-host-apiproxy'
-import { API_PATH } from './api-path.ts'
+import { API_PATH, HOST_EVENTS_PATH, MUX_EVENTS_PATH } from './api-path.ts'
 import { bridge } from './http-bridge.ts'
 import { assertTrustedAuthority, isTrustedApiRequest } from './api-request-trust.ts'
+import { rejectWebSocketUpgrade, WebSocketDownlinks } from './websocket-downlink.ts'

-export { API_PATH } from './api-path.ts'
+export { API_PATH, HOST_EVENTS_PATH, MUX_EVENTS_PATH } from './api-path.ts'

 /** Stable Cordis plugin name. */
 export const name = 'client-connection'
@@ -76,6 +77,7 @@ export function apply(ctx: Context, config?: ConnectionConfig): void {
  // silently authorizing its hostname prefix at request time.
  for (const entry of trustedHosts) assertTrustedAuthority(entry)
  const apiHandler = toFetchHandler(ctx.apiProxy)
+  const downlinks = new WebSocketDownlinks(ctx.apiProxy)
  const route: WebRoute = {
    kind: 'prefix',
    path: API_PATH,
@@ -92,8 +94,31 @@ export function apply(ctx: Context, config?: ConnectionConfig): void {
        res.end('forbidden')
        return
      }
+      if (req.method === 'GET' && (pathname === MUX_EVENTS_PATH || pathname === HOST_EVENTS_PATH)) {
+        res.writeHead(426, { connection: 'Upgrade', upgrade: 'websocket' })
+        res.end('upgrade required')
+        return
+      }
      await bridge(req, res, apiHandler)
    },
  }
  ctx.effect(() => ctx.httpServer.register(route), 'client-connection: /api route')
+  const registerDownlink = (
+    path: string,
+    handle: WebUpgradeRoute['handler'],
+  ): void => {
+    ctx.effect(() => ctx.httpServer.registerUpgrade({
+      path,
+      handler: (req, socket, head) => {
+        if (!isTrustedApiRequest(req, trustedHosts)) {
+          rejectWebSocketUpgrade(socket)
+          return
+        }
+        return handle(req, socket, head)
+      },
+    }), `client-connection: ${path} WebSocket`)
+  }
+  ctx.effect(() => () => downlinks.close(), 'client-connection: WebSocket downlinks')
+  registerDownlink(MUX_EVENTS_PATH, (req, socket, head) => { downlinks.handleMux(req, socket, head) })
+  registerDownlink(HOST_EVENTS_PATH, (req, socket, head) => { downlinks.handleHost(req, socket, head) })
 }
@@ -0,0 +1,153 @@
+/** Host-side WebSocket carrier for the two server-to-browser event streams. */
+
+import { randomUUID } from 'node:crypto'
+import type { IncomingMessage } from 'node:http'
+import type { Duplex } from 'node:stream'
+import WebSocket, { WebSocketServer } from 'ws'
+import type {
+  ApiProxy, HostFrame, MuxFrame, RpcRequest, ServerRequest,
+} from '@deepseek-ai/dsh-host-apiproxy/api'
+import { RpcId } from '@deepseek-ai/dsh-host-apiproxy/api'
+
+type Frame = MuxFrame | HostFrame
+
+function serverRequest(frame: RpcRequest<Frame>): ServerRequest {
+  return {
+    type: 'server-request',
+    rpcId: frame.rpcId,
+    method: frame.payload.type,
+    payload: frame.payload,
+  }
+}
+
+function send(socket: WebSocket, frame: RpcRequest<Frame>): Promise<void> {
+  return new Promise((resolve, reject) => {
+    if (socket.readyState !== WebSocket.OPEN) {
+      reject(new Error('websocket downlink closed before frame delivery'))
+      return
+    }
+    socket.send(JSON.stringify(serverRequest(frame)), (error) => {
+      if (error) reject(error)
+      else resolve()
+    })
+  })
+}
+
+function failureFrame(error: unknown): RpcRequest<Frame> {
+  return {
+    rpcId: RpcId(randomUUID()),
+    payload: {
+      type: 'stream/error',
+      error: { code: 'internal', message: String(error), details: {} },
+    },
+  }
+}
+
+/**
+ * Owns WebSocket negotiation and frame pumping for the connection plugin's
+ * two downlinks. Client messages are a protocol violation: upstream traffic
+ * remains on HTTP.
+ */
+export class WebSocketDownlinks {
+  private readonly server = new WebSocketServer({ noServer: true })
+  private readonly pumps = new Set<Promise<void>>()
+
+  /** @param api - host API supplying the typed event streams. */
+  constructor(private readonly api: ApiProxy) {}
+
+  /**
+   * Upgrade one socket and pump the mux stream until either side closes.
+   * @param req - HTTP upgrade request.
+   * @param socket - Raw socket transferred by the HTTP server.
+   * @param head - Bytes already read after the upgrade headers.
+   */
+  handleMux(req: IncomingMessage, socket: Duplex, head: Buffer): void {
+    this.upgrade(req, socket, head, signal => this.api.events.mux({
+      rpcId: RpcId(randomUUID()),
+      payload: {},
+    }, signal))
+  }
+
+  /**
+   * Upgrade one socket and pump the host stream until either side closes.
+   * @param req - HTTP upgrade request.
+   * @param socket - Raw socket transferred by the HTTP server.
+   * @param head - Bytes already read after the upgrade headers.
+   */
+  handleHost(req: IncomingMessage, socket: Duplex, head: Buffer): void {
+    this.upgrade(req, socket, head, signal => this.api.events.host({
+      rpcId: RpcId(randomUUID()),
+      payload: {},
+    }, signal))
+  }
+
+  /**
+   * Terminate owned sockets and await the no-server acceptor plus frame pumps.
+   * @returns A promise resolving after every socket and source iterator stops.
+   */
+  async close(): Promise<void> {
+    for (const socket of this.server.clients) socket.terminate()
+    await new Promise<void>((resolve, reject) => {
+      this.server.close((error) => {
+        if (error === undefined) resolve()
+        else reject(error)
+      })
+    })
+    await Promise.all(this.pumps)
+  }
+
+  private upgrade<F extends Frame>(
+    req: IncomingMessage,
+    socket: Duplex,
+    head: Buffer,
+    open: (signal: AbortSignal) => AsyncIterable<RpcRequest<F>>,
+  ): void {
+    this.server.handleUpgrade(req, socket, head, (websocket) => {
+      const abort = new AbortController()
+      websocket.once('close', () => { abort.abort() })
+      websocket.once('error', () => { abort.abort() })
+      websocket.once('message', () => {
+        websocket.close(1008, 'downlink only')
+      })
+      const pump = this.pump(websocket, open(abort.signal), abort)
+      this.pumps.add(pump)
+      void pump.then(() => { this.pumps.delete(pump) })
+    })
+  }
+
+  private async pump<F extends Frame>(
+    socket: WebSocket,
+    frames: AsyncIterable<RpcRequest<F>>,
+    abort: AbortController,
+  ): Promise<void> {
+    try {
+      for await (const frame of frames) await send(socket, frame)
+    } catch (error) {
+      if (!abort.signal.aborted) {
+        try {
+          await send(socket, failureFrame(error))
+        } catch {
+          // Socket loss won the race; no downstream remains to receive the failure frame.
+        }
+      }
+    } finally {
+      abort.abort()
+      if (socket.readyState === WebSocket.OPEN) socket.close()
+    }
+  }
+}
+
+/**
+ * Reject an untrusted upgrade before protocol negotiation.
+ * @param socket - Raw HTTP socket that remains owned by the caller.
+ */
+export function rejectWebSocketUpgrade(socket: Duplex): void {
+  socket.end([
+    'HTTP/1.1 403 Forbidden',
+    'Connection: close',
+    'Content-Type: text/plain; charset=utf-8',
+    'Content-Length: 9',
+    '',
+    'forbidden',
+  ].join('\r\n'))
+}
@@ -3,15 +3,55 @@
 * selection off the page URL, and the single-consumer stream-loop ownership.
 */
 import { Context } from 'cordis'
-import { afterEach, describe, expect, it } from 'vitest'
+import { afterEach, describe, expect, it, vi } from 'vitest'
 import { apply, type ConnectionHandle } from '../src/client/index.ts'
+import type { RpcMessage } from '../src/client/api.ts'
+import { RpcId } from '../src/client/api.ts'
 import { FixtureApiClient } from '../src/client/fixture.ts'
 import { WebApiClient } from '../src/client/web-api-client.ts'

-type Win = { location?: { hostname: string; search: string } }
+type Win = { location?: { hostname: string; search: string; origin?: string } }
+type WebSocketGlobal = { WebSocket?: typeof WebSocket }
+
+const originalWebSocket = globalThis.WebSocket
+const sockets: FakeWebSocket[] = []
+
+class FakeWebSocket extends EventTarget {
+  static readonly CONNECTING = 0
+  static readonly OPEN = 1
+  static readonly CLOSING = 2
+  static readonly CLOSED = 3
+
+  readonly url: string
+  readyState = FakeWebSocket.CONNECTING
+
+  constructor(url: string | URL) {
+    super()
+    this.url = String(url)
+    sockets.push(this)
+    queueMicrotask(() => {
+      if (this.readyState !== FakeWebSocket.CONNECTING) return
+      this.readyState = FakeWebSocket.OPEN
+      this.dispatchEvent(new Event('open'))
+    })
+  }
+
+  close(): void {
+    if (this.readyState === FakeWebSocket.CLOSED) return
+    this.readyState = FakeWebSocket.CLOSED
+    this.dispatchEvent(new Event('close'))
+  }
+
+  receive(data: unknown): void {
+    this.dispatchEvent(new MessageEvent('message', { data }))
+  }
+}

 afterEach(() => {
  delete (globalThis as Win).location
+  sockets.length = 0
+  if (originalWebSocket === undefined) delete (globalThis as WebSocketGlobal).WebSocket
+  else globalThis.WebSocket = originalWebSocket
 })

 async function mount(): Promise<ConnectionHandle> {
@@ -53,7 +93,7 @@ describe('connection client apply', () => {
    loop.stop() // teardown must not throw; the fixture streams abort quietly
  })

-  it('WebApiClient carries requests over globalThis.fetch', async () => {
+  it('WebApiClient keeps unary calls and respond on globalThis.fetch', async () => {
    ;(globalThis as Win).location = { hostname: 'localhost', search: '' }
    const handle = await mount()
    const original = globalThis.fetch
@@ -65,9 +105,102 @@ describe('connection client apply', () => {
    try {
      // Schema rejection is fine — the transport hop is the assertion.
      await (handle.api as WebApiClient).host.describe({}).catch(() => undefined)
+      await handle.api.respond({
+        type: 'client-response',
+        rpcId: RpcId('response-over-http'),
+        result: { ok: true, value: {} },
+      }).catch(() => undefined)
    } finally {
      globalThis.fetch = original
    }
-    expect(seen.some(u => u.includes('/api/'))).toBe(true)
+    expect(seen.some(u => u.includes('/api/host.describe'))).toBe(true)
+    expect(seen.some(u => u.includes('/api/respond'))).toBe(true)
+  })
+
+  it('opens one WebSocket per downlink, parses frames, and aborts both without using fetch', async () => {
+    ;(globalThis as Win).location = {
+      hostname: 'localhost', search: '', origin: 'http://localhost:3080',
+    }
+    ;(globalThis as WebSocketGlobal).WebSocket = FakeWebSocket as unknown as typeof WebSocket
+    const fetch = vi.spyOn(globalThis, 'fetch')
+    const client = (await mount()).api as WebApiClient
+    const envelopes: RpcMessage[][] = []
+    client.subscribeEnvelopes((batch) => { envelopes.push([...batch]) })
+    const opened: string[] = []
+    const muxAbort = new AbortController()
+    const hostAbort = new AbortController()
+    const mux = client.events.mux({}, muxAbort.signal, () => { opened.push('mux') })[Symbol.asyncIterator]()
+    const host = client.events.host({}, hostAbort.signal, () => { opened.push('host') })[Symbol.asyncIterator]()
+    const muxFrame = mux.next()
+    const hostFrame = host.next()
+    await vi.waitFor(() => { expect(sockets).toHaveLength(2) })
+    expect(sockets.map(socket => socket.url)).toEqual([
+      'ws://localhost:3080/api/events.mux',
+      'ws://localhost:3080/api/events.host',
+    ])
+    await vi.waitFor(() => { expect(opened).toEqual(['mux', 'host']) })
+
+    const errors = vi.spyOn(console, 'error').mockImplementation(() => {})
+    sockets[0]!.receive(new Uint8Array([1, 2, 3]))
+    sockets[1]!.receive(JSON.stringify({ type: 'server-request', rpcId: 'bad', method: 'host/session-status', payload: {} }))
+    sockets[0]!.receive(JSON.stringify({
+      type: 'server-request',
+      rpcId: 'mux-browser',
+      method: 'session/subscribed',
+      payload: { type: 'session/subscribed', sessionId: 'session-browser', lastSeq: 8 },
+    }))
+    sockets[1]!.receive(JSON.stringify({
+      type: 'server-request',
+      rpcId: 'host-browser',
+      method: 'host/commands-changed',
+      payload: { type: 'host/commands-changed' },
+    }))
+    expect(await muxFrame).toMatchObject({
+      value: { rpcId: 'mux-browser', payload: { type: 'session/subscribed', lastSeq: 8 } },
+    })
+    expect(await hostFrame).toMatchObject({
+      value: { rpcId: 'host-browser', payload: { type: 'host/commands-changed' } },
+    })
+    expect(errors).toHaveBeenCalledTimes(2)
+    await vi.waitFor(() => { expect(envelopes.flat()).toHaveLength(2) })
+    expect(fetch).not.toHaveBeenCalled()
+
+    const muxEnd = mux.next()
+    const hostEnd = host.next()
+    muxAbort.abort()
+    hostAbort.abort()
+    await expect(muxEnd).resolves.toMatchObject({ done: true })
+    await expect(hostEnd).resolves.toMatchObject({ done: true })
+    expect(sockets.every(socket => socket.readyState === FakeWebSocket.CLOSED)).toBe(true)
+    errors.mockRestore()
+    fetch.mockRestore()
+  })
+
+  it('maps an HTTPS page origin to a secure WebSocket URL', async () => {
+    ;(globalThis as Win).location = {
+      hostname: 'harness.example', search: '', origin: 'https://harness.example',
+    }
+    ;(globalThis as WebSocketGlobal).WebSocket = FakeWebSocket as unknown as typeof WebSocket
+    const client = (await mount()).api
+    const abort = new AbortController()
+    const iterator = client.events.mux({}, abort.signal)[Symbol.asyncIterator]()
+    const pending = iterator.next()
+    await vi.waitFor(() => { expect(sockets[0]?.url).toBe('wss://harness.example/api/events.mux') })
+    abort.abort()
+    await expect(pending).resolves.toMatchObject({ done: true })
+  })
+
+  it('closes a WebSocket immediately when its signal was already aborted', async () => {
+    ;(globalThis as Win).location = {
+      hostname: 'localhost', search: '', origin: 'http://localhost:3080',
+    }
+    ;(globalThis as WebSocketGlobal).WebSocket = FakeWebSocket as unknown as typeof WebSocket
+    const client = (await mount()).api
+    const abort = new AbortController()
+    abort.abort()
+    const iterator = client.events.mux({}, abort.signal)[Symbol.asyncIterator]()
+    await expect(iterator.next()).resolves.toMatchObject({ done: true })
+    expect(sockets).toHaveLength(1)
+    expect(sockets[0]?.readyState).toBe(FakeWebSocket.CLOSED)
  })
 })
@@ -1,22 +1,29 @@
 /** Node half: registers the /api prefix route bridging to the api gateway. */
-import { EventEmitter } from 'node:events'
+import { EventEmitter, once } from 'node:events'
 import { createServer, request as httpRequest } from 'node:http'
-import { Readable } from 'node:stream'
+import { PassThrough, Readable } from 'node:stream'
 import { Context } from 'cordis'
 import { describe, expect, it } from 'vitest'
 import type { AddressInfo } from 'node:net'
 import type { IncomingMessage, ServerResponse } from 'node:http'
 import type { ApiProxy } from '@deepseek-ai/dsh-host-apiproxy/api'
-import type { HttpServerService, WebRoute } from '@deepseek-ai/dsh-host-webserver'
-import { API_PATH, apply, inject } from '../src/index.ts'
+import type { HttpServerService, WebRoute, WebUpgradeRoute } from '@deepseek-ai/dsh-host-webserver'
+import { API_PATH, apply, HOST_EVENTS_PATH, inject, MUX_EVENTS_PATH } from '../src/index.ts'

-/** Structural httpServer fake: the plugin only touches register(). */
-function fakeHttpServer(routes: WebRoute[]): Pick<HttpServerService, 'register' | 'tapIndex' | 'port'> {
+/** Structural httpServer fake recording both route registries. */
+function fakeHttpServer(
+  routes: WebRoute[],
+  upgrades: WebUpgradeRoute[],
+): Pick<HttpServerService, 'register' | 'registerUpgrade' | 'tapIndex' | 'port'> {
  return {
    register(route) {
      routes.push(route)
      return () => { routes.splice(routes.indexOf(route), 1) }
    },
+    registerUpgrade(route) {
+      upgrades.push(route)
+      return () => { upgrades.splice(upgrades.indexOf(route), 1) }
+    },
    tapIndex: () => () => {},
    port: 0,
  }
@@ -45,33 +52,67 @@ function fakeResponse(): { response: ServerResponse; state: { status?: number; b
  return { response, state }
 }

-async function mounted(config?: { trustedHosts?: string[] }): Promise<{ routes: WebRoute[]; dispose: () => Promise<void> }> {
+async function mounted(config?: { trustedHosts?: string[] }): Promise<{
+  routes: WebRoute[]
+  upgrades: WebUpgradeRoute[]
+  dispose: () => Promise<void>
+}> {
  const ctx = new Context()
  const routes: WebRoute[] = []
-  ctx.provide('httpServer', fakeHttpServer(routes) as HttpServerService)
+  const upgrades: WebUpgradeRoute[] = []
+  ctx.provide('httpServer', fakeHttpServer(routes, upgrades) as HttpServerService)
  ctx.provide('apiProxy', {} as unknown as ApiProxy)
  const fiber = ctx.plugin({ inject: [...inject], apply }, config)
  await fiber.await()
-  return { routes, dispose: () => fiber.dispose() }
+  return { routes, upgrades, dispose: () => fiber.dispose() }
 }

 describe('connection node half', () => {
  it('fails the load on a trustedHosts entry that is not a bare authority', async () => {
    const routes: WebRoute[] = []
+    const upgrades: WebUpgradeRoute[] = []
    const ctx = new Context()
-    ctx.provide('httpServer', fakeHttpServer(routes) as HttpServerService)
+    ctx.provide('httpServer', fakeHttpServer(routes, upgrades) as HttpServerService)
    ctx.provide('apiProxy', {} as unknown as ApiProxy)
    const fiber = ctx.plugin({ inject: [...inject], apply }, { trustedHosts: ['harness.internal/path'] })
    await expect(fiber).rejects.toThrow(/not a bare host\[:port\] authority/)
    expect(routes).toHaveLength(0)
+    expect(upgrades).toHaveLength(0)
  })

-  it('registers the /api prefix route and removes it with the fiber', async () => {
-    const { routes, dispose } = await mounted()
+  it('registers one HTTP route plus one upgrade route per downlink and removes all three with the fiber', async () => {
+    const { routes, upgrades, dispose } = await mounted()
    expect(routes).toHaveLength(1)
    expect(routes[0]).toMatchObject({ kind: 'prefix', path: API_PATH })
+    expect(upgrades.map(route => route.path)).toEqual([MUX_EVENTS_PATH, HOST_EVENTS_PATH])
    await dispose()
    expect(routes).toHaveLength(0)
+    expect(upgrades).toHaveLength(0)
+  })
+
+  it('requires WebSocket upgrade for network GETs to either event path', async () => {
+    const { routes, dispose } = await mounted()
+    for (const path of [MUX_EVENTS_PATH, HOST_EVENTS_PATH]) {
+      const { response, state } = fakeResponse()
+      await routes[0]!.handler(fakeRequest({ host: '127.0.0.1:3080' }, path), response)
+      expect(state.status).toBe(426)
+      expect(state.body).toBe('upgrade required')
+    }
+    await dispose()
+  })
+
+  it('rejects an untrusted WebSocket upgrade before protocol negotiation', async () => {
+    const { upgrades, dispose } = await mounted()
+    const socket = new PassThrough()
+    const chunks: Buffer[] = []
+    socket.on('data', (chunk: Buffer) => { chunks.push(chunk) })
+    const ended = once(socket, 'end')
+    await upgrades[0]!.handler(fakeRequest({
+      host: 'harness.example', origin: 'http://harness.example', 'sec-fetch-site': 'same-origin',
+    }, MUX_EVENTS_PATH), socket, Buffer.alloc(0))
+    await ended
+    expect(Buffer.concat(chunks).toString()).toContain('HTTP/1.1 403 Forbidden')
+    await dispose()
  })

  it('refuses an untrusted Host on any /api path before the bridge runs', async () => {
@@ -0,0 +1,308 @@
+import { once } from 'node:events'
+import { createServer } from 'node:http'
+import type { AddressInfo } from 'node:net'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import WebSocket from 'ws'
+import type {
+  ApiProxy, HostFrame, MuxFrame, RpcRequest, ServerRequest,
+} from '@deepseek-ai/dsh-host-apiproxy/api'
+import { RpcId } from '@deepseek-ai/dsh-host-apiproxy/api'
+import { HOST_EVENTS_PATH, MUX_EVENTS_PATH } from '../src/api-path.ts'
+import { WebSocketDownlinks } from '../src/websocket-downlink.ts'
+
+type MuxSource = (signal: AbortSignal) => AsyncIterable<RpcRequest<MuxFrame>>
+type HostSource = (signal: AbortSignal) => AsyncIterable<RpcRequest<HostFrame>>
+
+const running: (() => Promise<void>)[] = []
+
+afterEach(async () => {
+  await Promise.all(running.splice(0).map(close => close()))
+})
+
+function untilAbort(signal: AbortSignal): Promise<void> {
+  if (signal.aborted) return Promise.resolve()
+  return new Promise((resolve) => {
+    signal.addEventListener('abort', () => { resolve() }, { once: true })
+  })
+}
+
+async function * idle<F>(signal: AbortSignal): AsyncGenerator<RpcRequest<F>> {
+  await untilAbort(signal)
+}
+
+function api(mux: MuxSource, host: HostSource): ApiProxy {
+  return {
+    events: {
+      mux: (_request, signal) => mux(signal),
+      host: (_request, signal) => host(signal),
+    },
+  } as ApiProxy
+}
+
+async function serve(downlinks: WebSocketDownlinks): Promise<{
+  origin: string
+  close: () => Promise<void>
+}> {
+  const server = createServer()
+  server.on('upgrade', (request, socket, head) => {
+    const pathname = new URL(request.url ?? '/', 'http://dsh.internal').pathname
+    if (pathname === MUX_EVENTS_PATH) downlinks.handleMux(request, socket, head)
+    else if (pathname === HOST_EVENTS_PATH) downlinks.handleHost(request, socket, head)
+    else socket.destroy()
+  })
+  await new Promise<void>(resolve => server.listen(0, '127.0.0.1', resolve))
+  const port = (server.address() as AddressInfo).port
+  return {
+    origin: `ws://127.0.0.1:${String(port)}`,
+    close: async () => {
+      await downlinks.close()
+      await new Promise<void>(resolve => server.close(() => { resolve() }))
+    },
+  }
+}
+
+function read(socket: WebSocket): Promise<ServerRequest> {
+  return once(socket, 'message').then(([data]) => JSON.parse(String(data)) as ServerRequest)
+}
+
+async function acceptedSocket(downlinks: WebSocketDownlinks): Promise<WebSocket> {
+  const server = (downlinks as unknown as { server: { clients: Set<WebSocket> } }).server
+  let accepted: WebSocket | undefined
+  await vi.waitFor(() => {
+    accepted = server.clients.values().next().value
+    expect(accepted).toBeDefined()
+  })
+  return accepted as WebSocket
+}
+
+describe('WebSocket downlinks', () => {
+  it('carries mux and host over independent downstream sockets and cancels each source on close', async () => {
+    let muxAborted = false
+    let hostAborted = false
+    const downlinks = new WebSocketDownlinks(api(
+      async function * (signal) {
+        try {
+          yield {
+            rpcId: RpcId('mux-1'),
+            payload: { type: 'session/subscribed', sessionId: 'session-1' as never, lastSeq: 4 },
+          }
+          await untilAbort(signal)
+        } finally {
+          muxAborted = true
+        }
+      },
+      async function * (signal) {
+        try {
+          yield { rpcId: RpcId('host-1'), payload: { type: 'host/commands-changed' } }
+          await untilAbort(signal)
+        } finally {
+          hostAborted = true
+        }
+      },
+    ))
+    const host = await serve(downlinks)
+    running.push(host.close)
+
+    const mux = new WebSocket(`${host.origin}${MUX_EVENTS_PATH}`)
+    const hostSocket = new WebSocket(`${host.origin}${HOST_EVENTS_PATH}`)
+    const muxFrame = read(mux)
+    const hostFrame = read(hostSocket)
+    expect(await muxFrame).toEqual({
+      type: 'server-request',
+      rpcId: 'mux-1',
+      method: 'session/subscribed',
+      payload: { type: 'session/subscribed', sessionId: 'session-1', lastSeq: 4 },
+    })
+    expect(await hostFrame).toEqual({
+      type: 'server-request',
+      rpcId: 'host-1',
+      method: 'host/commands-changed',
+      payload: { type: 'host/commands-changed' },
+    })
+
+    const muxClosed = once(mux, 'close')
+    const hostClosed = once(hostSocket, 'close')
+    mux.close()
+    hostSocket.close()
+    await Promise.all([muxClosed, hostClosed])
+    await vi.waitFor(() => {
+      expect(muxAborted).toBe(true)
+      expect(hostAborted).toBe(true)
+    })
+  })
+
+  it('rejects client messages because upstream remains HTTP', async () => {
+    let aborted = false
+    const downlinks = new WebSocketDownlinks(api(
+      async function * (signal) {
+        try {
+          await untilAbort(signal)
+        } finally {
+          aborted = true
+        }
+      },
+      idle,
+    ))
+    const host = await serve(downlinks)
+    running.push(host.close)
+    const socket = new WebSocket(`${host.origin}${MUX_EVENTS_PATH}`)
+    await once(socket, 'open')
+    const closed = once(socket, 'close')
+    socket.send('upstream payload')
+    const [code, reason] = await closed as [number, Buffer]
+    expect(code).toBe(1008)
+    expect(String(reason)).toBe('downlink only')
+    await vi.waitFor(() => { expect(aborted).toBe(true) })
+  })
+
+  it('sends stream/error before closing when a source fails', async () => {
+    const downlinks = new WebSocketDownlinks(api(
+      async function * () {
+        throw new Error('mux source failed')
+      },
+      idle,
+    ))
+    const host = await serve(downlinks)
+    running.push(host.close)
+    const socket = new WebSocket(`${host.origin}${MUX_EVENTS_PATH}`)
+    const failure = read(socket)
+    const closed = once(socket, 'close')
+    expect((await failure).payload).toEqual({
+      type: 'stream/error',
+      error: { code: 'internal', message: 'Error: mux source failed', details: {} },
+    })
+    await closed
+  })
+
+  it('aborts the source when an accepted socket reports a transport error', async () => {
+    let aborted = false
+    const downlinks = new WebSocketDownlinks(api(
+      async function * (signal) {
+        try {
+          await untilAbort(signal)
+        } finally {
+          aborted = true
+        }
+      },
+      idle,
+    ))
+    const host = await serve(downlinks)
+    running.push(host.close)
+    const socket = new WebSocket(`${host.origin}${MUX_EVENTS_PATH}`)
+    await once(socket, 'open')
+    const accepted = await acceptedSocket(downlinks)
+    const closed = once(socket, 'close')
+    accepted.emit('error', new Error('transport failed'))
+    await closed
+    expect(aborted).toBe(true)
+  })
+
+  it('drops a source frame that races after the client has closed', async () => {
+    let release!: () => void
+    const gate = new Promise<void>((resolve) => { release = resolve })
+    let finish!: () => void
+    const finished = new Promise<void>((resolve) => { finish = resolve })
+    let sourceSignal: AbortSignal | undefined
+    const downlinks = new WebSocketDownlinks(api(
+      async function * (signal) {
+        sourceSignal = signal
+        try {
+          await gate
+          yield {
+            rpcId: RpcId('late'),
+            payload: { type: 'session/subscribed', sessionId: 'session-late' as never, lastSeq: 0 },
+          }
+        } finally {
+          finish()
+        }
+      },
+      idle,
+    ))
+    const host = await serve(downlinks)
+    running.push(host.close)
+    const socket = new WebSocket(`${host.origin}${MUX_EVENTS_PATH}`)
+    await once(socket, 'open')
+    const closed = once(socket, 'close')
+    socket.close()
+    await closed
+    await vi.waitFor(() => { expect(sourceSignal?.aborted).toBe(true) })
+    release()
+    await finished
+  })
+
+  it('contains socket send callback failures and closes the downlink', async () => {
+    let release!: () => void
+    const gate = new Promise<void>((resolve) => { release = resolve })
+    const downlinks = new WebSocketDownlinks(api(
+      async function * () {
+        await gate
+        yield {
+          rpcId: RpcId('send-failure'),
+          payload: { type: 'session/subscribed', sessionId: 'session-send' as never, lastSeq: 0 },
+        }
+      },
+      idle,
+    ))
+    const host = await serve(downlinks)
+    running.push(host.close)
+    const socket = new WebSocket(`${host.origin}${MUX_EVENTS_PATH}`)
+    await once(socket, 'open')
+    const accepted = await acceptedSocket(downlinks)
+    const send = vi.spyOn(accepted, 'send').mockImplementation(((
+      _data: unknown,
+      optionsOrCallback?: unknown,
+      callback?: (error?: Error) => void,
+    ) => {
+      const done = typeof optionsOrCallback === 'function'
+        ? optionsOrCallback as (error?: Error) => void
+        : callback
+      done?.(new Error('socket send failed'))
+    }) as WebSocket['send'])
+    const closed = once(socket, 'close')
+    release()
+    await closed
+    expect(send).toHaveBeenCalledTimes(2)
+    send.mockRestore()
+  })
+
+  it('rejects when its acceptor has already closed', async () => {
+    const downlinks = new WebSocketDownlinks(api(idle, idle))
+    await downlinks.close()
+    await expect(downlinks.close()).rejects.toThrow('The server is not running')
+  })
+
+  it('waits for source cleanup before teardown resolves', async () => {
+    let cleanupStarted!: () => void
+    const started = new Promise<void>((resolve) => { cleanupStarted = resolve })
+    let releaseCleanup!: () => void
+    const cleanupGate = new Promise<void>((resolve) => { releaseCleanup = resolve })
+    let cleaned = false
+    const downlinks = new WebSocketDownlinks(api(
+      async function * (signal) {
+        try {
+          await untilAbort(signal)
+        } finally {
+          cleanupStarted()
+          await cleanupGate
+          cleaned = true
+        }
+      },
+      idle,
+    ))
+    const host = await serve(downlinks)
+    const socket = new WebSocket(`${host.origin}${MUX_EVENTS_PATH}`)
+    await once(socket, 'open')
+    let closed = false
+    const closing = host.close().then(() => { closed = true })
+    try {
+      await started
+      expect(closed).toBe(false)
+      releaseCleanup()
+      await closing
+      expect(cleaned).toBe(true)
+    } finally {
+      releaseCleanup()
+      await closing
+    }
+  })
+})
@@ -12,7 +12,10 @@
  padding: 4px;
  display: flex;
  flex-direction: column;
-  min-width: 220px;
+  min-width: min(220px, 100%);
+  /* Never wider than the composer card (the overlay anchor's width): long
+     rows truncate instead of pushing the card past the composer's edge. */
+  max-width: 100%;
  /* Height cap: the 320px design maximum, clamped at runtime to the space
   * above the composer (inline max-height set in PopupSelectView.tsx). */
  max-height: 320px;
@@ -51,7 +54,8 @@
 }

 .label {
-  flex: 1;
+  flex: 1 1 auto;
+  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
@@ -61,6 +65,8 @@
  font-size: 12px;
  color: var(--dsw-alias-label-tertiary);
  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }

 .check {
@@ -16,7 +16,9 @@
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
-  padding: 16px 24px;
+  /* Sides = composer clearance + 16px: on narrow viewports the transcript
+     stays exactly 32px narrower than the input card (the shared width rule). */
+  padding: 16px calc(var(--dsh-composer-side-clearance) + 16px);
 }

 :global([data-conversation-scroll]) .root {
@@ -31,10 +33,11 @@
  min-height: auto;
 }

-/* Message column: 736px fixed width, centered on the same axis as the
-   input box; the scroller itself stays full-bleed. */
+/* Message column: shared chat width (ConversationRoot --dsh-chat-content-width),
+   centered on the same axis as the input box (which caps at chat + 16px); the
+   scroller itself stays full-bleed. */
 .column {
-  max-width: 736px;
+  max-width: var(--dsh-chat-content-width);
  width: 100%;
  margin: 0 auto;
  display: flex;
@@ -166,7 +169,7 @@
  height: 0;
  display: flex;
  justify-content: flex-end;
-  padding-right: max(0px, calc((100% - 736px) / 2));
+  padding-right: max(0px, calc((100% - var(--dsh-chat-content-width)) / 2));
  pointer-events: none;
 }

@@ -1,12 +1,12 @@
 // Shared IconActions chrome for user, steering, and assistant messages: copy
 // live, optional branch wiring, and an optional date-aware clock.

-import { useCallback, useId } from 'react'
+import { useCallback, useEffect, useId, useRef, useState } from 'react'
 import {
-  IconBranchOutline16, IconCopyOutline16, Tooltip,
+  IconBranchOutline16, IconCheckOutline16, IconCopyOutline16, Tooltip, writeClipboard,
 } from '@deepseek-ai/dsh-client-ui-primitives'
 import type { ChatViewSlotProps } from '../contract/slots.ts'
-import { formatMessageClock, formatRunDuration, writeClipboard } from './message-chrome.ts'
+import { formatMessageClock, formatRunDuration } from './message-chrome.ts'
 import { useCalendarDay } from './use-calendar-day.ts'
 import css from './MessageIconActions.module.css'

@@ -41,9 +41,32 @@ export function MessageIconActions({
 }: MessageIconActionsProps) {
  const day = useCalendarDay()
  const reasonId = useId()
+  // Same success chrome as CodeBlock: a short check swap after the write,
+  // gated so re-clicks during the window neither re-copy nor stack timers.
+  const [copied, setCopied] = useState(false)
+  const copyPending = useRef(false)
+  const copyTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const copyEpoch = useRef(0)
+  useEffect(() => () => {
+    copyEpoch.current += 1
+    copyPending.current = false
+    if (copyTimer.current !== null) clearTimeout(copyTimer.current)
+  }, [])
  const onCopy = useCallback(() => {
-    void writeClipboard(text)
-  }, [text])
+    if (copied || copyPending.current) return
+    const epoch = copyEpoch.current
+    copyPending.current = true
+    void writeClipboard(text).then((ok) => {
+      if (epoch !== copyEpoch.current) return
+      copyPending.current = false
+      if (!ok) return
+      setCopied(true)
+      copyTimer.current = window.setTimeout(() => {
+        copyTimer.current = null
+        setCopied(false)
+      }, 1000)
+    })
+  }, [copied, text])
  const clockEl = time === undefined ? null : (
    <span className={clock === 'start' ? css.timeStart : css.timeEnd}>
      {formatMessageClock(time, t, day)}
@@ -58,9 +81,9 @@ export function MessageIconActions({
  return (
    <div className={className === undefined ? css.actions : `${css.actions} ${className}`}>
      {clock === 'start' ? clockEl : null}
-      <Tooltip label={t('copy')} side="bottom">
-        <button type="button" className={css.action} aria-label={t('copy')} onClick={onCopy}>
-          <IconCopyOutline16 />
+      <Tooltip label={copied ? t('copied') : t('copy')} side="bottom">
+        <button type="button" className={css.action} aria-label={copied ? t('copied') : t('copy')} onClick={onCopy}>
+          {copied ? <IconCheckOutline16 /> : <IconCopyOutline16 />}
        </button>
      </Tooltip>
      {showBranch && onBranch !== undefined && (
@@ -1,23 +1,25 @@
 /* Session stats row: 12/20 tertiary text under the flow, aligned to the
-   736px message column axis. */
+   shared message column axis (--dsh-chat-content-width). */

 .root {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
-  max-width: 736px;
+  /* Block, not flex: text-overflow only elides a block's inline content, so
+     an overlong line ends in … instead of a mid-glyph clip. */
+  display: block;
+  text-align: center;
+  max-width: var(--dsh-chat-content-width);
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
-  padding: 4px 24px 0px;
+  padding: 4px calc(var(--dsh-composer-side-clearance) + 16px) 0px;
  font-size: 12px;
  line-height: 20px;
  color: var(--dsw-alias-label-tertiary);
  white-space: nowrap;
  overflow: hidden;
+  text-overflow: ellipsis;
 }

 .sep {
  color: var(--dsw-alias-separator-primary);
+  margin: 0 10px; /* carries the former flex gap */
 }
@@ -152,7 +152,7 @@ export const StatsLine = memo(function StatsLine({ useSession, useProjection }:
    <div className={css.root}>
      {groups.map((group, i) => (
        <Fragment key={group}>
-          {i > 0 && <span className={css.sep} aria-hidden>|</span>}
+          {i > 0 && <><span className={css.sep} aria-hidden>|</span>{' '}</>}
          <span>{group}</span>
        </Fragment>
      ))}
@@ -1,5 +1,4 @@
-// Shared chrome helpers for user/assistant IconActions rows: clipboard write
-// and the compact date+clock label from a session-event epoch.
+// Shared time-label helpers for user/assistant IconActions rows.

 import type { Translate } from '@deepseek-ai/dsh-client-ui-slots'

@@ -8,46 +7,6 @@ export type ClockTranslate = Translate<'clock.md' | 'clock.ymd'>

 /** The elapsed-duration share of the conversation dictionary. */
 export type RunDurationTranslate = Translate<'duration.seconds' | 'duration.minutes'>
-
-/**
- * Best-effort clipboard write; rejections stay swallowed (no success chrome).
- * @param text - Plain text to place on the clipboard.
- */
-export async function writeClipboard(text: string): Promise<void> {
-  // lib.dom types clipboard non-optional, but insecure contexts omit it —
-  // that runtime gap is exactly what this guard detects.
-  /* oxlint-disable-next-line typescript/no-unnecessary-condition */
-  if (navigator.clipboard?.writeText) {
-    try {
-      await navigator.clipboard.writeText(text)
-    } catch {
-      // Denied permissions / iframe policy.
-    }
-    return
-  }
-  // execCommand('copy') is the only clipboard fallback where the async API
-  // is missing (insecure contexts); deprecated but deliberately retained.
-  /* oxlint-disable typescript/no-deprecated */
-  const exec = typeof document.execCommand === 'function'
-    ? document.execCommand.bind(document)
-    : undefined
-  if (exec === undefined) return
-  const el = document.createElement('textarea')
-  el.value = text
-  el.setAttribute('readonly', '')
-  el.style.position = 'fixed'
-  el.style.left = '-9999px'
-  document.body.appendChild(el)
-  el.select()
-  try {
-    exec('copy')
-  } catch {
-    // Clipboard unavailable; the button stays idle.
-  }
-  /* oxlint-enable typescript/no-deprecated */
-  el.remove()
-}
-
 function pad2(n: number): string {
  return String(n).padStart(2, '0')
 }
@@ -42,8 +42,10 @@ export const zh = {
  'details.input': '输入',
  'details.output': '输出',
  'details.running': '运行中…',
-  'todo.title': '任务清单',
-  'todo.progress': '{done}/{total} 项任务 · {active} 项进行中',
+  'todo.title': '任务',
+  'todo.progress.done': '{done} 已完成',
+  'todo.progress.active': '{active} 进行中',
+  'todo.progress.pending': '{pending} 待处理',
  'todo.rowTitle': '更新任务清单',
  'todo.completed': '{done}/{total} 已完成',
  'chat.loadingHistory': '载入历史…',
@@ -154,7 +156,9 @@ export const en = {
  'details.output': 'Output',
  'details.running': 'Running…',
  'todo.title': 'To-dos',
-  'todo.progress': '{done}/{total} tasks · {active} in progress',
+  'todo.progress.done': '{done} completed',
+  'todo.progress.active': '{active} in progress',
+  'todo.progress.pending': '{pending} pending',
  'todo.rowTitle': 'Update to-do list',
  'todo.completed': '{done}/{total} completed',
  'chat.loadingHistory': 'Loading history…',
@@ -16,20 +16,21 @@
    var(--dsh-composer-dock-inset) -
    var(--dsh-composer-dock-inset)
  );
-  /* Flex gap still applies after this item; subtract it together with the
-     design's overlap so the later composer paints over the queue edge. */
-  margin: 0 auto calc(
-    0px - var(--dsh-composer-stack-gap) - var(--dsh-queue-composer-overlap)
-  );
-  padding: 2px 12px;
+  /* Cancel the stack gap after this item and tuck 3px under the input card
+     (square bottom), reading as one attached surface. */
+  margin: 0 auto calc(0px - var(--dsh-composer-stack-gap) - 3px);
+  /* Horizontal padding completes the shared dock inset (this wrapper only
+     subtracts two insets from its width); no vertical padding, so the visual
+     gap above the panel stays the uniform stack gap. */
+  padding: 0 var(--dsh-composer-dock-inset);
 }

 .panel {
  position: relative;
  overflow: hidden;
  width: 100%;
-  padding-top: 2px;
-  border-radius: 14px 14px 0 0;
+  padding: 2px 0;
+  border-radius: 12px 12px 0 0;
  background: var(--dsw-specific-tip);
  --dsh-scrollbar-thumb: var(--dsw-alias-scrollbar-bg-l2);
  --dsh-scrollbar-thumb-hover: var(--dsw-alias-scrollbar-hover-l2);
@@ -39,6 +40,7 @@
  position: absolute;
  inset: 0;
  border: 1px solid var(--dsw-alias-border-l1);
+  /* The input card's own top border closes the shape below. */
  border-bottom: none;
  border-radius: inherit;
  content: '';
@@ -52,7 +54,9 @@
  gap: 10px;
  width: 100%;
  height: 36px;
-  padding: 4px 16px 4px 12px;
+  /* Right inset 12px puts the chevron on the same vertical line as the Todo
+     header's chevron (12px body padding there). */
+  padding: 4px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
@@ -70,11 +74,18 @@
  cursor: default;
 }

+.lead {
+  display: grid;
+  flex: none;
+  place-items: center;
+  color: var(--dsw-alias-label-tertiary);
+}
+
 .count {
  flex: 1 1 auto;
  min-width: 0;
  font-family: Inter, var(--dsw-font-family);
-  font-size: 14px;
+  font-size: 13px;
  font-weight: 500;
  line-height: 24px;
 }
@@ -8,8 +8,8 @@ import { useEffect, useId, useMemo, useState } from 'react'
 import type { PropsLocale, PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots'
 import type { SessionId } from '@deepseek-ai/dsh-client-runtime/client'
 import {
-  IconCheckOutline16, IconChevronDownOutline14, IconChevronUpOutline14,
-  IconCloseOutline16, IconEditOutline16, IconSendOutline16, IconTrashOutline16,
+  IconCheckOutline16, IconChevronDownOutline14, IconChevronUpOutline14, IconCloseOutline16,
+  IconEditOutline16, IconQueueOutline14, IconSendOutline14, IconTrashOutline16, Tooltip,
 } from '@deepseek-ai/dsh-client-ui-primitives'
 import type { QueueAction, QueueItemId } from '../contract/queue.ts'
 import { NS } from '../locales.ts'
@@ -87,6 +87,7 @@ export function QueueDock({ useSession, updateQueue, notify, t }: QueueDockProps
            disabled={interactionActive}
            onClick={() => { setCollapsed(value => !value) }}
          >
+            <span className={css.lead} aria-hidden><IconQueueOutline14 /></span>
            <span className={css.count}>{t('queue.count', { n: queue.length })}</span>
            <span className={css.chevron} aria-hidden>
              {expanded ? <IconChevronDownOutline14 /> : <IconChevronUpOutline14 />}
@@ -96,6 +97,8 @@ export function QueueDock({ useSession, updateQueue, notify, t }: QueueDockProps
        <ul id={listId} className={css.list} hidden={!listVisible}>
          {listVisible && queue.map(row => (
            <li key={row.id} className={css.row}>
+              {/* Single-item strip has no count header, so the row itself carries the queue glyph. */}
+              {queue.length === 1 && <span className={css.lead} aria-hidden><IconQueueOutline14 /></span>}
              {editing?.id === row.id
                ? (
                  <input
@@ -121,74 +124,83 @@ export function QueueDock({ useSession, updateQueue, notify, t }: QueueDockProps
                {editing?.id === row.id
                  ? (
                    <>
-                      <button
-                        type="button"
-                        className={css.action}
-                        aria-label={t('queue.save')}
-                        title={t('queue.save')}
-                        disabled={busy !== null || editing.text.trim() === ''}
-                        onClick={() => { void saveEdit() }}
-                      >
-                        <IconCheckOutline16 size={14} />
-                      </button>
-                      <button
-                        type="button"
-                        className={css.action}
-                        aria-label={t('queue.cancelEdit')}
-                        title={t('queue.cancelEdit')}
-                        disabled={busy !== null}
-                        onClick={() => { setEditing(null) }}
-                      >
-                        <IconCloseOutline16 size={14} />
-                      </button>
+                      <Tooltip label={t('queue.save')} side="bottom" delayMs={500}>
+                        <button
+                          type="button"
+                          className={css.action}
+                          aria-label={t('queue.save')}
+                          disabled={busy !== null || editing.text.trim() === ''}
+                          onClick={() => { void saveEdit() }}
+                        >
+                          <IconCheckOutline16 size={14} />
+                        </button>
+                      </Tooltip>
+                      <Tooltip label={t('queue.cancelEdit')} side="bottom" delayMs={500}>
+                        <button
+                          type="button"
+                          className={css.action}
+                          aria-label={t('queue.cancelEdit')}
+                          disabled={busy !== null}
+                          onClick={() => { setEditing(null) }}
+                        >
+                          <IconCloseOutline16 size={14} />
+                        </button>
+                      </Tooltip>
                    </>
                  )
                  : (
                    <>
-                      <button
-                        type="button"
-                        className={css.action}
-                        aria-label={t('queue.edit')}
-                        title={row.text === null ? t('queue.edit.unsupported') : t('queue.edit')}
-                        disabled={busy !== null || row.text === null}
-                        onClick={() => {
-                          if (row.text !== null) setEditing({ id: row.id, text: row.text })
-                        }}
-                      >
-                        <IconEditOutline16 size={14} />
-                      </button>
-                      <button
-                        type="button"
-                        className={css.action}
-                        aria-label={t('queue.remove')}
-                        title={t('queue.remove')}
-                        disabled={busy !== null}
-                        onClick={() => {
-                          void applyAction(
-                            row.id,
-                            { kind: 'remove' },
-                            t('queue.removeFailed'),
-                          )
-                        }}
-                      >
-                        <IconTrashOutline16 size={14} />
-                      </button>
-                      <button
-                        type="button"
-                        className={css.action}
-                        aria-label={t('queue.steer')}
-                        title={running ? t('queue.steer') : t('queue.steer.unavailable')}
-                        disabled={busy !== null || !running}
-                        onClick={() => {
-                          void applyAction(
-                            row.id,
-                            { kind: 'steer' },
-                            t('queue.steerFailed'),
-                          )
-                        }}
-                      >
-                        <IconSendOutline16 size={14} />
-                      </button>
+                      <Tooltip label={t('queue.edit')} side="bottom" delayMs={500} disabled={row.text === null}>
+                        <button
+                          type="button"
+                          className={css.action}
+                          aria-label={t('queue.edit')}
+                          // Disabled buttons fire no hover events, so the
+                          // unsupported hint stays a native title.
+                          title={row.text === null ? t('queue.edit.unsupported') : undefined}
+                          disabled={busy !== null || row.text === null}
+                          onClick={() => {
+                            if (row.text !== null) setEditing({ id: row.id, text: row.text })
+                          }}
+                        >
+                          <IconEditOutline16 size={14} />
+                        </button>
+                      </Tooltip>
+                      <Tooltip label={t('queue.remove')} side="bottom" delayMs={500}>
+                        <button
+                          type="button"
+                          className={css.action}
+                          aria-label={t('queue.remove')}
+                          disabled={busy !== null}
+                          onClick={() => {
+                            void applyAction(
+                              row.id,
+                              { kind: 'remove' },
+                              t('queue.removeFailed'),
+                            )
+                          }}
+                        >
+                          <IconTrashOutline16 size={14} />
+                        </button>
+                      </Tooltip>
+                      <Tooltip label={t('queue.steer')} side="bottom" delayMs={500} disabled={!running}>
+                        <button
+                          type="button"
+                          className={css.action}
+                          aria-label={t('queue.steer')}
+                          title={running ? undefined : t('queue.steer.unavailable')}
+                          disabled={busy !== null || !running}
+                          onClick={() => {
+                            void applyAction(
+                              row.id,
+                              { kind: 'steer' },
+                              t('queue.steerFailed'),
+                            )
+                          }}
+                        >
+                          <IconSendOutline14 />
+                        </button>
+                      </Tooltip>
                    </>
                  )}
              </div>}
@@ -8,13 +8,15 @@
  display: flex;
  flex-direction: column;
  align-items: center;
-  padding: 8px 32px 12px;
+  /* Sides = clearance + 16px so the card lands on the shared content width
+     (input card - 32) at every viewport. */
+  padding: 8px calc(var(--dsh-composer-side-clearance) + 16px) 12px;
 }

 .card {
  overflow: hidden;
  width: 100%;
-  max-width: 776px;
+  max-width: var(--dsh-chat-content-width);
  border: 1px solid var(--dsw-alias-state-warn-secondary);
  border-radius: 20px;
  background: var(--dsw-specific-input-major);
@@ -84,7 +86,9 @@
 /* Card-level row, not body content. Its padding reproduces the metrics the row
   had inside the body: 14px above (the flex gap of 6 plus the row's 8px top
   margin, neither of which reaches it out here) and the body's former 14px
-   bottom pad below, so the resting card is unchanged. */
+   bottom pad below, so the resting card is unchanged. Buttons are the shared
+   outline/primary capsules (Button atom, matching QuestionComposer's footer);
+   only the reject's danger hover is local. */
 .actionRow {
  display: flex;
  justify-content: flex-end;
@@ -92,36 +96,6 @@
  padding: 14px 16px 14px;
 }

-.allow,
-.reject {
-  padding: 6px 16px;
-  border-radius: 10px;
-  font-size: 13px;
-  line-height: 18px;
-  cursor: pointer;
-}
-
-.allow:disabled,
-.reject:disabled {
-  opacity: 0.5;
-  cursor: default;
-}
-
-/* Primary action: filled ink (draft's rightmost emphasis, minus the dropped
-   always-allow button). */
-.allow {
-  border: none;
-  background: var(--dsw-alias-label-primary);
-  color: var(--dsw-alias-label-primary-foreground);
-}
-
-/* Secondary: quiet outline. */
-.reject {
-  border: 1px solid var(--dsw-alias-border-l2-darkmode-thin);
-  background: transparent;
-  color: var(--dsw-alias-label-secondary);
-}
-
 .reject:hover:not(:disabled) {
  background: var(--dsw-alias-interactive-bg-hover-danger);
  color: var(--dsw-alias-state-error-primary);
@@ -14,6 +14,7 @@
 // grant storage.

 import { useMemo, useState } from 'react'
+import { Button } from '@deepseek-ai/dsh-client-ui-primitives'
 import type { RunningToolCall } from '@deepseek-ai/dsh-client-runtime/client'
 import { PendingApproval, type ApprovalComposerProps } from '../contract/slots.ts'
 import css from './ApprovalPanel.module.css'
@@ -69,12 +70,12 @@ function ApprovalFlow({ pending, command, t }: {
          {command !== undefined && <div className={css.command}>{command}</div>}
        </div>
        <div className={css.actionRow}>
-          <button type="button" className={css.reject} disabled={answered} onClick={() => { answer('rejected') }}>
+          <Button variant="outline" className={css.reject} disabled={answered} onClick={() => { answer('rejected') }}>
            {t('approval.reject')}
-          </button>
-          <button type="button" className={css.allow} disabled={answered} onClick={() => { answer('allowed-once') }}>
+          </Button>
+          <Button variant="primary" disabled={answered} onClick={() => { answer('allowed-once') }}>
            {t('approval.allowOnce')}
-          </button>
+          </Button>
        </div>
      </div>
    </div>
@@ -9,6 +9,20 @@
  height: 100%;
  min-width: 0;
  background: var(--dsw-alias-bg-base);
+
+  /* Shared width axis for the whole column: one content width W
+     (--dsh-chat-content-width) for the transcript, the dock cards
+     (todo/goal/queue: card minus four insets, 4 x 8 = 32), and the takeover
+     cards (question/approval/plan review); the input card alone is W + 32px.
+     The relation also holds when a narrow viewport shrinks everything: the
+     chat scroller and the takeover frames pad clearance + 16px per side while
+     the input card clears the bare clearance, so the input card stays exactly
+     content + 32px at every width. Declared on the root because the
+     transcript and the composer seat are sibling subtrees. */
+  --dsh-chat-content-width: 748px;
+  --dsh-composer-card-max-width: calc(var(--dsh-chat-content-width) + 32px);
+  --dsh-composer-side-clearance: 16px;
+  --dsh-composer-dock-inset: 8px;
 }

 .header {
@@ -134,16 +148,11 @@
 }

 /* Composer context stack (Figma 9:937): standalone dock cards share one
-   rhythm; the terminal queue strip additionally tucks under the input card. */
+   rhythm above the input card. */
 .composerStack {
+  /* Horizontal geometry (card width, clearance, dock inset) rides the shared
+     .root variables above so takeover siblings match the stack. */
  --dsh-composer-stack-gap: 6px;
-  --dsh-queue-composer-overlap: 5px;
-
-  /* InputBar and dock registrants derive their horizontal geometry from the
-     same card width, outer clearance, and dock inset. */
-  --dsh-composer-card-max-width: 800px;
-  --dsh-composer-side-clearance: 32px;
-  --dsh-composer-dock-inset: 12px;

  display: flex;
  flex-direction: column;
@@ -239,7 +248,9 @@
  gap: 12px;
  /* Foot inside the centered box floats the stack a bit above true center. */
  padding-bottom: 32px;
-  width: min(776px, calc(100% - 48px));
+  /* Card cap + both clearances: the hero input card lands at exactly the same
+     width as the docked composer at every viewport. */
+  width: min(calc(var(--dsh-composer-card-max-width) + 2 * var(--dsh-composer-side-clearance)), 100%);
  z-index: 1;
 }

@@ -263,7 +274,9 @@
  display: flex;
  align-items: center;
  min-width: 0;
-  padding-left: 8px;
+  /* figma drew px 8; nudged +12 so the chip's folder glyph lines up closer to
+     the card's inner controls below. */
+  padding-left: 20px;
 }

 /* Hero: the composer sits inside the session scroll body; center there so
@@ -11,23 +11,28 @@
 /* Floating capsule input (figma Input_Bottom 75:8208): card floats above the
   viewport bottom inside the centered message column; textarea on top, action
   row below, one primary circle button bottom-right. Input width rides the
-   column (800 is a cap, not a fixed size — layout rule: the box shrinks with
-   the center column keeping its padding). Hero variant = the same card
-   centered in the empty state; the transition between the two is a position
-   move of one component. */
+   column (--dsh-composer-card-max-width = chat content + 32px, 16px per side,
+   is a cap, not a fixed size — layout rule: the box shrinks with the center
+   column keeping its clearance). Hero variant = the same card centered in the
+   empty state; the transition between the two is a position move of one
+   component. */

 .root {
  display: flex;
  flex-direction: column;
  align-items: center;
-  /* figma Input_Bottom: pad L32/R32/B8; the bottom gradient mask is owned by
-     the chat scroller. No top pad: the composer stack's gap owns the space
-     above; error/status strips still carry their own margin. */
+  /* Side pads ride the shared clearance (figma Input_Bottom drew L32/R32/B8;
+     the sides narrow with the shared width axis); the bottom gradient mask
+     is owned by the chat scroller. No top pad: the composer stack's gap owns
+     the space above; error/status strips still carry their own margin. */
  padding: 0 var(--dsh-composer-side-clearance) 8px;
 }

 .hero {
-  padding: 0;
+  /* No bottom pad in the centered hero, but the side clearance must survive:
+     the hero wrapper is full-width on narrow viewports, so this padding is
+     the only thing keeping the card off the edges there. */
+  padding: 0 var(--dsh-composer-side-clearance);
 }

 .error,
@@ -83,7 +88,7 @@
     the input border is one notch weaker than buttons) — exactly the
     l2-darkmode-thin pair. Fill: the input surface token (elevated in dark). */
  border: 1px solid var(--dsw-alias-border-l2-darkmode-thin);
-  border-radius: 20px;
+  border-radius: 22px;
  background: var(--dsw-specific-input-major);
  box-shadow: var(--dsw-shadow-lv2);
  font-size: 16px;
@@ -256,8 +261,16 @@
  align-items: center;
  justify-content: space-between;
  gap: 12px;
-  padding: 0 10px 10px 10px;
+  /* 2px moved from the bottom pad to the top: the whole control row sits 2px
+     lower in the card (it read too high against the textarea) while the card
+     height and the controls' own centering stay untouched. */
+  padding: 2px 8px 6px;
  min-width: 0;
+  /* Size container so the chips inside can collapse to icon-only when the
+     card runs out of row width (PermissionSelect @container rule). Anonymous
+     on purpose: CSS modules hash container-name per module, so a name declared
+     here can never match a query in another module's sheet. */
+  container-type: inline-size;
 }

 .tools,
@@ -268,13 +281,15 @@
  min-width: 0;
 }

-/* figma 75:8208: 16 between + and the mode chips; 4 between Plan / Read-only. */
+/* figma 75:8208 drew 16 between + and the mode chips and 4 between Plan /
+   Read-only; the chip gap widened to 12 so the pill chips read as separate
+   controls. */
 .tools {
  gap: 16px;
 }

 .modes {
-  gap: 4px;
+  gap: 12px;
 }

 .trailing {
@@ -354,6 +369,10 @@
  color: #fff;
  cursor: pointer;
  transition: background-color 100ms ease;
+  /* Opts out of the row's 2px downward shift (.row top pad): the send circle
+     keeps its original seat while the smaller chips sit lower. Transform, not
+     margin, so flex centering math is untouched. */
+  transform: translateY(-2px);
 }

 .primary:hover:not(:disabled) {
@@ -9,7 +9,7 @@
 import { useEffect, useRef } from 'react'
 import type { ChangeEvent, KeyboardEvent, MouseEvent, ReactNode } from 'react'
 import clsx from 'clsx'
-import { IconPlusOutline16 } from '@deepseek-ai/dsh-client-ui-primitives'
+import { IconPlusOutline16, Tooltip } from '@deepseek-ai/dsh-client-ui-primitives'
 // Type-only: the `plan` projection key merge (the TodoDock posture — the
 // composer reads a host-computed value; the domain owns the key).
 import type {} from '@deepseek-ai/dsh-plan-mode/client'
@@ -489,19 +489,20 @@ export function InputBar({
        </div>
        <div className={css.row}>
          <div className={css.tools}>
-            <button
-              type="button"
-              className={css.add}
-              aria-label={t('input.commands')}
-              title={t('input.commands')}
-              aria-haspopup="listbox"
-              aria-expanded={commandMenuOpen}
-              disabled={locked || toggleCommandMenu === undefined}
-              onMouseDown={keepFocus}
-              onClick={onToggleCommandMenu}
-            >
-              <IconPlusOutline16 size={14} />
-            </button>
+            <Tooltip label={t('input.commands')} side="top" delayMs={500}>
+              <button
+                type="button"
+                className={css.add}
+                aria-label={t('input.commands')}
+                aria-haspopup="listbox"
+                aria-expanded={commandMenuOpen}
+                disabled={locked || toggleCommandMenu === undefined}
+                onMouseDown={keepFocus}
+                onClick={onToggleCommandMenu}
+              >
+                <IconPlusOutline16 size={14} />
+              </button>
+            </Tooltip>
            <div className={css.modes}>
              {accessSelect}
              {renderSlot('conversation.input.plan', { locked })}
@@ -512,25 +513,26 @@ export function InputBar({
            {rightItems}
            {renderSlot('conversation.input.model', { locked })}
            {/* {machineBusy && <span className={css.pending} data-input-pending aria-label="处理中" />} */}
-            <button
-              type="button"
-              className={css.primary}
-              aria-label={primaryLabel}
-              title={primaryLabel}
-              disabled={stopping ? stop === undefined : empty || disabled || machineBusy}
-              onMouseDown={keepFocus}
-              onClick={onPrimary}
-            >
-              {stopping ? (
-                <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden>
-                  <rect x="3" y="3" width="10" height="10" rx="3" fill="currentColor" />
-                </svg>
-              ) : (
-                <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden>
-                  <path d="M8.3125 0.980183C8.66767 1.0531 8.97902 1.20418 9.2627 1.43233C9.48724 1.61297 9.73029 1.85793 9.97949 2.10714L14.707 6.83468L13.293 8.24874L9 3.95577V15.0417H7V3.95577L2.70703 8.24874L1.29297 6.83468L6.02051 2.10714C6.26971 1.85793 6.51277 1.61297 6.7373 1.43233C6.97662 1.23986 7.28445 1.04402 7.6875 0.980183C7.8973 0.947006 8.1031 0.95516 8.3125 0.980183Z" fill="currentColor" />
-                </svg>
-              )}
-            </button>
+            <Tooltip label={primaryLabel} side="top" delayMs={500}>
+              <button
+                type="button"
+                className={css.primary}
+                aria-label={primaryLabel}
+                disabled={stopping ? stop === undefined : empty || disabled || machineBusy}
+                onMouseDown={keepFocus}
+                onClick={onPrimary}
+              >
+                {stopping ? (
+                  <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden>
+                    <rect x="3" y="3" width="10" height="10" rx="3" fill="currentColor" />
+                  </svg>
+                ) : (
+                  <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden>
+                    <path d="M8.3125 0.980183C8.66767 1.0531 8.97902 1.20418 9.2627 1.43233C9.48724 1.61297 9.73029 1.85793 9.97949 2.10714L14.707 6.83468L13.293 8.24874L9 3.95577V15.0417H7V3.95577L2.70703 8.24874L1.29297 6.83468L6.02051 2.10714C6.26971 1.85793 6.51277 1.61297 6.7373 1.43233C6.97662 1.23986 7.28445 1.04402 7.6875 0.980183C7.8973 0.947006 8.1031 0.95516 8.3125 0.980183Z" fill="currentColor" />
+                  </svg>
+                )}
+              </button>
+            </Tooltip>
          </div>
        </div>
      </div>
@@ -7,7 +7,8 @@
  height: 28px;
  padding: 0 4px 0 8px;
  border: none;
-  border-radius: 8px;
+  /* Rounded chip chrome, matching the sibling model trigger. */
+  border-radius: 24px;
  outline: none;
  background: transparent;
  color: var(--dsw-alias-label-secondary);
@@ -30,6 +31,18 @@
  cursor: default;
 }

+.triggerIcon {
+  display: inline-flex;
+  flex: 0 0 auto;
+}
+
+/* The shared 16px glyphs render one step smaller on the exposed trigger;
+   the dropdown rows keep the full 16px. */
+.triggerIcon svg {
+  width: 14px;
+  height: 14px;
+}
+
 .triggerLabel {
  min-width: 0;
  overflow: hidden;
@@ -40,4 +53,21 @@
 .chevron {
  flex: 0 0 auto;
  color: var(--dsw-alias-label-caption);
+  transition: transform 120ms ease;
+}
+
+/* Narrow composer: the trigger collapses to icon + chevron so the row keeps
+   fitting. Only triggers that actually carry a mode glyph drop their label —
+   a host-configured mode without one keeps its text as the sole identifier.
+   The 460px cut is the point where the row (attach + modes + model + send)
+   starts squeezing labels; the container is the composer row (InputBar .row —
+   anonymous query because CSS modules hash container-names per module). */
+@container (max-width: 460px) {
+  .trigger:has(.triggerIcon) .triggerLabel {
+    display: none;
+  }
+}
+
+.chevronOpen {
+  transform: rotate(180deg);
 }
@@ -1,12 +1,50 @@
 import { useEffect, useState } from 'react'
+import type { ReactNode } from 'react'
+import clsx from 'clsx'
 import type { PermissionSelect as PermissionSelectValue } from '@deepseek-ai/dsh-permission/client'
-import { Menu, RiskConfirmation } from '@deepseek-ai/dsh-client-ui-primitives'
+import { IconChevronDownOutline14, Menu, RiskConfirmation } from '@deepseek-ai/dsh-client-ui-primitives'
 import type { MenuEntry } from '@deepseek-ai/dsh-client-ui-primitives'
 import type { ComposerBarProps } from '../contract/slots.ts'
 import css from './PermissionSelect.module.css'

 const FULL_ACCESS = 'danger-full-access'

+/* Shield glyphs (design set 1556): check = read-only, pencil = workspace
+   write, exclamation = full access. currentColor so the trigger and menu
+   rows tint them with their own text color. */
+
+const shieldOutline = 'M8.20554 0.899994L14.7901 3.36857V7.01026C14.7901 12 11.0466 14.2103 8.20554 15.3C5.36446 14.2103 1.62012 12 1.62012 7.01026V3.36857L8.20554 0.899994Z'
+
+const permissionGlyphs = {
+  'read-only': (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden>
+      <path d={shieldOutline} stroke="currentColor" strokeWidth="1.31831" strokeLinejoin="round" />
+      <path d="M12.1654 5.7552L8.9447 9.41475C8.73044 9.65816 8.53628 9.8804 8.35774 10.0423C8.1713 10.2114 7.94235 10.3717 7.64016 10.4254C7.48207 10.4535 7.32 10.4552 7.16151 10.4294C6.85843 10.3801 6.62728 10.2223 6.43836 10.0559C6.25752 9.89653 6.06037 9.67732 5.84264 9.43705L4.72925 8.20897L5.63557 7.38707L6.74897 8.61594C6.98603 8.87755 7.12974 9.03533 7.24673 9.13839C7.31033 9.19443 7.34485 9.21476 7.35823 9.22122C7.38068 9.22484 7.40352 9.22515 7.42593 9.22122C7.40522 9.22502 7.42893 9.23294 7.53583 9.136C7.65132 9.03126 7.79316 8.87139 8.02643 8.60638L11.2479 4.94763L12.1654 5.7552Z" fill="currentColor" />
+    </svg>
+  ),
+  'workspace-write': (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden>
+      <path d="M8.08887 0.251709C8.20479 0.23085 8.32486 0.241168 8.43652 0.282959L15.0215 2.75171C15.2787 2.84819 15.4492 3.09414 15.4492 3.3689V7.0105C15.4492 7.10986 15.4441 7.2081 15.4414 7.30542C15.0285 7.07175 14.5905 6.87695 14.1309 6.73022V3.82495L8.20508 1.60327L2.2793 3.82495V7.0105C2.27936 9.7171 3.4745 11.5379 5.02734 12.7947C5.01025 12.9942 5 13.1962 5 13.4001C5.00001 13.7617 5.02722 14.1169 5.08008 14.4636C2.91555 13.0393 0.961014 10.752 0.960938 7.0105V3.3689C0.960938 3.09417 1.13146 2.84821 1.38867 2.75171L7.97461 0.282959L8.08887 0.251709Z" fill="currentColor" />
+      <path d="M11.3525 5.64688V6.85688H5V5.64688H11.3525Z" fill="currentColor" />
+      <path d="M9.5824 8.29376V9.50376H5V8.29376H9.5824Z" fill="currentColor" />
+      <path d="M14.6647 15.6852H10.0338C10.3878 15.3751 10.7567 15.0517 11.0772 14.7706C11.2531 14.6164 11.4144 14.4746 11.5511 14.3547H14.6647V15.6852Z" fill="currentColor" />
+      <path d="M8.14852 14.1308L7.33925 15.4976C7.22458 15.6912 7.42245 15.9194 7.63037 15.8333L9.09785 15.2254L15.0399 10.0719L14.0905 8.97733L8.14852 14.1308Z" fill="currentColor" />
+    </svg>
+  ),
+  [FULL_ACCESS]: (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden>
+      <path d={shieldOutline} stroke="currentColor" strokeWidth="1.31831" strokeLinejoin="round" />
+      <path d="M9.10094 4.5V8.75939H7.59888V4.5H9.10094Z" fill="currentColor" />
+      <path d="M9.10094 9.8114V11.5H7.59888V9.8114H9.10094Z" fill="currentColor" />
+    </svg>
+  ),
+} as Record<string, ReactNode>
+
+/** Glyph for a permission option value; host-configured names outside the design set get none. */
+function permissionGlyph(value: string): ReactNode | undefined {
+  return permissionGlyphs[value]
+}
+
 /**
 * Display transform: kebab-case machine names render as title-case labels
 * (`workspace-write` → `Workspace Write`); non-kebab host-configured names
@@ -52,7 +90,10 @@ export function PermissionSelect({ value, locked, command, t }: PermissionSelect

  const items: MenuEntry[] = value.options
    .filter(o => o.value !== 'custom')
-    .map(option => ({ id: option.value, label: optionLabel(option) }))
+    .map((option) => {
+      const icon = permissionGlyph(option.value)
+      return { id: option.value, label: optionLabel(option), ...icon === undefined ? {} : { icon } }
+    })

  const submit = (id: string): void => {
    setPick(id)
@@ -102,10 +143,14 @@ export function PermissionSelect({ value, locked, command, t }: PermissionSelect
            disabled={locked || busy}
            onClick={() => { setOpen(!open) }}
          >
+            {permissionGlyph(currentValue) !== undefined && (
+              <span className={css.triggerIcon} aria-hidden>{permissionGlyph(currentValue)}</span>
+            )}
            <span className={css.triggerLabel}>{current === undefined ? displayName(currentValue) : optionLabel(current)}</span>
-            <svg className={css.chevron} viewBox="0 0 12 12" width="12" height="12" aria-hidden>
-              <path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" fill="none" />
-            </svg>
+            {/* Same glyph + open rotation as the sibling ModelSelect trigger. */}
+            <span className={clsx(css.chevron, open && css.chevronOpen)} aria-hidden>
+              <IconChevronDownOutline14 />
+            </span>
          </button>
        }
      />
@@ -1,6 +1,7 @@
 /* Todo strip in the composer context stack (Figma 1236:32276): tip surface,
-   14px radius, status icons + secondary item labels. Its visible card aligns
-   with the GoalBar and the Queue panel inside their shared dock column. */
+   status icons + secondary item labels. Its visible card aligns with the
+   GoalBar and the Queue panel inside their shared dock column: 12px radius,
+   36px collapsed row, 12px side padding, 14px tertiary leading glyph. */

 .root {
  box-sizing: border-box;
@@ -24,7 +25,7 @@
    var(--dsh-composer-dock-inset)
  );
  border: 1px solid var(--dsw-alias-border-l1);
-  border-radius: 14px;
+  border-radius: 12px;
  background: var(--dsw-specific-tip);
  /* Elevated surface: `--dsw-specific-tip` is the same dark rung as the menu
     surface, and `.list` scrolls inside this card, so the thumb takes the l2
@@ -39,7 +40,7 @@
  display: flex;
  flex-direction: column;
  gap: 8px;
-  padding: 9px 15px;
+  padding: 6px 12px;
 }

 .header {
@@ -54,9 +55,16 @@
  cursor: pointer;
 }

+.lead {
+  display: grid;
+  flex: none;
+  place-items: center;
+  color: var(--dsw-alias-label-tertiary);
+}
+
 .title {
  flex: none;
-  font-size: 14px;
+  font-size: 13px;
  line-height: 24px;
  font-weight: 500;
  color: var(--dsw-alias-label-primary);
@@ -13,7 +13,7 @@ import type { PropsLocale, PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots
 // declare) and the payload type. Type-only by construction — the outlet is
 // free of host value imports, so no host Context merge enters this program.
 import type { TodoItem } from '@deepseek-ai/dsh-tool-todo/client'
-import { IconChevronDownOutline14, IconChevronUpOutline14 } from '@deepseek-ai/dsh-client-ui-primitives'
+import { IconChecklistOutline14, IconChevronDownOutline14, IconChevronUpOutline14 } from '@deepseek-ai/dsh-client-ui-primitives'
 import { NS } from '../locales.ts'
 import css from './TodoPanel.module.css'

@@ -78,11 +78,18 @@ function StatusGlyph({ status }: { status: TodoItem['status'] }) {
  }
 }

-/** Header summary: "<done>/<total> tasks · <n> in progress". */
+/** Header summary: "·"-joined per-status counts; zero-count segments are omitted as noise (a non-empty list keeps at least one). */
 function progressLabel(todos: readonly TodoItem[], t: TodoPanelProps['t']): string {
  const done = todos.filter(item => item.status === 'completed').length
  const active = todos.filter(item => item.status === 'in_progress').length
-  return t('todo.progress', { done, total: todos.length, active })
+  const pending = todos.length - done - active
+  // En spaces (U+2002): HTML collapses runs of ASCII spaces, so widening the
+  // separator breathing room needs a literal wide space.
+  return [
+    ...done > 0 ? [t('todo.progress.done', { done })] : [],
+    ...active > 0 ? [t('todo.progress.active', { active })] : [],
+    ...pending > 0 ? [t('todo.progress.pending', { pending })] : [],
+  ].join('\u2002·\u2002')
 }

 export function TodoPanel({ todos, t }: TodoPanelProps) {
@@ -98,6 +105,7 @@ export function TodoPanel({ todos, t }: TodoPanelProps) {
          aria-expanded={!collapsed}
          onClick={() => { setCollapsed(v => !v) }}
        >
+          <span className={css.lead} aria-hidden><IconChecklistOutline14 /></span>
          <span className={css.title}>{t('todo.title')}</span>
          <span className={css.progress}>{progressLabel(todos, t)}</span>
          <span className={css.chevron} aria-hidden>
@@ -122,7 +122,7 @@ describe('todo_write assembly (product registrations, no outlet twins)', () => {
    // (default-collapsed: the header summary shows; rows appear on expand).
    const panel = view.container.querySelector('[data-testid="todo-panel"]')
    expect(panel).not.toBeNull()
-    expect(panel!.textContent).toContain('1/3 项任务 · 1 项进行中')
+    expect(panel!.textContent).toContain('1 已完成\u2002·\u20021 进行中\u2002·\u20021 待处理')
    fireEvent.click(panel!.querySelector('button')!)
    expect([...panel!.querySelectorAll('li')].map(li => li.getAttribute('data-status')))
      .toEqual(['completed', 'in_progress', 'pending'])
@@ -102,16 +102,10 @@ describe('MessageItem arms', () => {
    expect(screen.getByRole('tooltip').textContent).toBe('仅可从已完成轮次的最后一条消息分支')
  })

-  it('user copy stays quiet when execCommand throws or is absent', () => {
+  it('user copy never claims success when the host rejects the write', async () => {
    Object.defineProperty(navigator, 'clipboard', {
      configurable: true,
-      value: undefined,
-    })
-    Object.defineProperty(document, 'execCommand', {
-      configurable: true,
-      value: () => {
-        throw new Error('denied')
-      },
+      value: { writeText: vi.fn().mockRejectedValue(new Error('denied')) },
    })
    render(
      <MessageItem t={t} node={{
@@ -122,12 +116,91 @@ describe('MessageItem arms', () => {
      />,
    )
    fireEvent.click(screen.getByRole('button', { name: '复制' }))
+    await act(async () => {
+      await Promise.resolve()
+      await Promise.resolve()
+    })
+    expect(screen.getByRole('button', { name: '复制' })).toBeTruthy()
+    expect(screen.queryByRole('button', { name: '复制成功' })).toBeNull()
+  })

-    Object.defineProperty(document, 'execCommand', {
+  it('copy swaps to the check success chrome, gates re-clicks, and reverts after a second', async () => {
+    vi.useFakeTimers()
+    const writeText = vi.fn().mockResolvedValue(undefined)
+    Object.defineProperty(navigator, 'clipboard', {
      configurable: true,
-      value: undefined,
+      value: { writeText },
+    })
+    render(
+      <MessageItem t={t} node={{
+        kind: 'user', seq: 1, time: 1_000,
+        content: [{ type: 'text', text: 'copied body' }] as never,
+        source: null,
+      }}
+      />,
+    )
+    const copy = screen.getByRole('button', { name: '复制' })
+    fireEvent.click(copy)
+    fireEvent.click(copy)
+    expect(writeText).toHaveBeenCalledTimes(1)
+    // Two microtask ticks: writeClipboard's own await, then the .then that
+    // lands the success chrome.
+    await act(async () => {
+      await Promise.resolve()
+      await Promise.resolve()
+    })
+    const done = screen.getByRole('button', { name: '复制成功' })
+    fireEvent.click(done)
+    expect(writeText).toHaveBeenCalledTimes(1)
+    act(() => { vi.advanceTimersByTime(1000) })
+    expect(screen.getByRole('button', { name: '复制' })).toBeTruthy()
+  })
+
+  it('clears copy feedback work when the message unmounts', async () => {
+    vi.useFakeTimers()
+    let finishWrite!: () => void
+    const writeText = vi.fn(() => new Promise<void>((resolve) => { finishWrite = resolve }))
+    Object.defineProperty(navigator, 'clipboard', {
+      configurable: true,
+      value: { writeText },
+    })
+    const view = render(
+      <MessageItem t={t} node={{
+        kind: 'user', seq: 1, time: 1_000,
+        content: [{ type: 'text', text: 'copied body' }] as never,
+        source: null,
+      }}
+      />,
+    )
+    fireEvent.click(screen.getByRole('button', { name: '复制' }))
+    view.unmount()
+    await act(async () => {
+      finishWrite()
+      await Promise.resolve()
+      await Promise.resolve()
+    })
+    expect(vi.getTimerCount()).toBe(0)
+
+    const mounted = render(
+      <MessageItem t={t} node={{
+        kind: 'user', seq: 2, time: 1_000,
+        content: [{ type: 'text', text: 'copied body' }] as never,
+        source: null,
+      }}
+      />,
+    )
+    Object.defineProperty(navigator, 'clipboard', {
+      configurable: true,
+      value: { writeText: vi.fn().mockResolvedValue(undefined) },
    })
    fireEvent.click(screen.getByRole('button', { name: '复制' }))
+    await act(async () => {
+      await Promise.resolve()
+      await Promise.resolve()
+    })
+    expect(screen.getByRole('button', { name: '复制成功' })).toBeTruthy()
+    mounted.unmount()
+    expect(vi.getTimerCount()).toBe(0)
  })

  it('consumed steering renders copy and branch actions without a badge', () => {
@@ -502,6 +575,6 @@ describe('small branch tails', () => {
          : undefined}
      />,
    )
-    expect(view.container.textContent).toBe('1 turns · 1 steps|Input 0 tok · Output 10 tok')
+    expect(view.container.textContent).toBe('1 turns · 1 steps| Input 0 tok · Output 10 tok')
  })
 })
@@ -133,7 +133,7 @@ describe('StatsLine', () => {
    const view = render(<StatsLine {...props(source)} />)
    // No timing on the fixture: the duration group drops out whole. Tokens come
    // from the projection, so paging the window cannot change them.
-    expect(view.container.textContent).toBe('1 turns · 1 steps|Cache hit 90%|Input 100 tok · Output 5 tok')
+    expect(view.container.textContent).toBe('1 turns · 1 steps| Cache hit 90%| Input 100 tok · Output 5 tok')
    const empty = makeSource()
    const emptyView = render(<StatsLine {...props(empty.source, {
      tokenUsage: { uncachedInputTokens: 0, outputTokens: 0, cacheReadTokens: 0, cacheWriteTokens: 0 },
@@ -149,7 +149,7 @@ describe('StatsLine', () => {
      contextPressure: { pressureTokens: 32_000, contextWindow: 128_000 },
    })} />)
    expect(view.container.textContent)
-      .toBe('Context 25% of 128K|Cache hit 90%|Input 100 tok · Output 5 tok')
+      .toBe('Context 25% of 128K| Cache hit 90%| Input 100 tok · Output 5 tok')
  })

  it('renders context occupancy only when the projection knows a capacity', () => {
@@ -196,7 +196,7 @@ describe('StatsLine', () => {
    const view = render(<StatsLine {...props(source, {
      tokenUsage: { uncachedInputTokens: 0, outputTokens: 7, cacheReadTokens: 0, cacheWriteTokens: 0 },
    })} />)
-    expect(view.container.textContent).toBe('1 turns · 1 steps|Input 0 tok · Output 7 tok')
+    expect(view.container.textContent).toBe('1 turns · 1 steps| Input 0 tok · Output 7 tok')
  })

  it('includes cache writes in billed input and the cache-hit denominator', () => {
@@ -210,7 +210,7 @@ describe('StatsLine', () => {
      },
    })} />)
    expect(view.container.textContent)
-      .toBe('1 turns · 1 steps|Cache hit 45%|Input 200 tok · Output 7 tok')
+      .toBe('1 turns · 1 steps| Cache hit 45%| Input 200 tok · Output 7 tok')
  })

  it('renders ZERO times during streaming chunk frames (RFC hard acceptance)', () => {
@@ -143,7 +143,6 @@ function bench(over?: BenchOptions) {
  }
  const view = render(<InputBar {...props} />)
  const textarea = view.container.querySelector('textarea')!
-  // aria-label (not role name): title carries the same label and would double-match.
  const stopping = over?.running === true && over.subagent === undefined
  const button = view.container.querySelector<HTMLButtonElement>(
    `button[aria-label="${stopping ? '停止生成' : '发送消息'}"]`,
@@ -724,6 +723,8 @@ describe('command launcher chrome and control seats', () => {
    const trigger = view.getByLabelText(/^访问模式/) as HTMLButtonElement
    // Title-case display is presentation only; the menu ids stay machine names.
    expect(trigger.textContent).toBe('Read Only')
+    expect([...trigger.querySelectorAll('svg')]
+      .every(icon => icon.closest('[aria-hidden="true"]') !== null)).toBe(true)
    fireEvent.click(trigger)
    const items = view.getAllByRole('menuitem')
    expect(items.map(o => o.textContent)).toEqual(['Read Only', 'Workspace Write', 'Full access'])
@@ -38,15 +38,24 @@ describe('TodoPanel', () => {
    expect(container.innerHTML).toBe('')
  })

-  it('starts collapsed with the progress summary visible', () => {
+  it('starts collapsed with the per-status count summary visible', () => {
    render(<TodoPanel todos={LIST} t={t} />)
    expect(screen.getByTestId('todo-panel')).toBeTruthy()
-    expect(screen.getByText('任务清单')).toBeTruthy()
-    expect(screen.getByText('1/3 项任务 · 1 项进行中')).toBeTruthy()
+    expect(screen.getByText('任务')).toBeTruthy()
+    expect(screen.getByText('1 已完成 · 1 进行中 · 1 待处理')).toBeTruthy()
    expect(screen.getByRole('button', { expanded: false })).toBeTruthy()
    expect(screen.queryByRole('list')).toBeNull()
  })

+  it('omits the completed segment while nothing is done yet', () => {
+    render(<TodoPanel todos={[
+      { content: '写组件', status: 'in_progress' },
+      { content: '补测试', status: 'pending' },
+    ]} t={t} />)
+    expect(screen.getByText('1 进行中 · 1 待处理')).toBeTruthy()
+    expect(screen.queryByText(/已完成/)).toBeNull()
+  })
+
  it('expands to show one row per item with its status glyph', () => {
    render(<TodoPanel todos={LIST} t={t} />)
    fireEvent.click(screen.getByRole('button', { expanded: false }))
@@ -65,17 +74,18 @@ describe('TodoPanel', () => {
    fireEvent.click(header)
    expect(screen.queryByRole('list')).toBeNull()
    // Collapsed header is title + progress only (no in-progress content hint).
-    expect(screen.getByText('1/3 项任务 · 1 项进行中')).toBeTruthy()
+    expect(screen.getByText('1 已完成 · 1 进行中 · 1 待处理')).toBeTruthy()
    expect(screen.queryByText('写组件')).toBeNull()
    fireEvent.click(screen.getByRole('button', { expanded: false }))
    expect(screen.getAllByRole('listitem')).toHaveLength(3)
  })

-  it('collapsed header still shows zero in-progress when nothing is active', () => {
+  it('an all-completed list collapses the summary to the done count alone', () => {
    render(<TodoPanel todos={[{ content: '都完了', status: 'completed' }]} t={t} />)
    expect(screen.getByRole('button', { expanded: false })).toBeTruthy()
    expect(screen.queryByText('都完了')).toBeNull()
-    expect(screen.getByText('1/1 项任务 · 0 项进行中')).toBeTruthy()
+    expect(screen.getByText('1 已完成')).toBeTruthy()
+    expect(screen.queryByText(/进行中|待处理/)).toBeNull()
  })
 })

@@ -93,7 +103,7 @@ describe('TodoDock', () => {
    // Capability absent (no baseline/frame yet) renders nothing.
    expect(screen.queryByTestId('todo-panel')).toBeNull()
    act(() => { store.set({ value: LIST }) })
-    expect(screen.getByText('1/3 项任务 · 1 项进行中')).toBeTruthy()
+    expect(screen.getByText('1 已完成 · 1 进行中 · 1 待处理')).toBeTruthy()
    // The pre-first-write whole value (null) retires the strip (the panel owns no data).
    act(() => { store.set({ value: null }) })
    expect(screen.queryByTestId('todo-panel')).toBeNull()
@@ -1,5 +1,6 @@
 /* GoalBar: the second standalone card in the composer context stack (Figma
-   1236:32276). Its 752px column matches Todo and the Queue panel. */
+   1236:32276). Its dock column (card cap minus four insets) matches Todo and
+   the Queue panel. */

 .dock {
  box-sizing: border-box;
@@ -21,27 +22,29 @@
  align-items: center;
  gap: 10px;
  width: 100%;
-  max-width: 752px;
+  max-width: calc(var(--dsh-composer-card-max-width) - 4 * var(--dsh-composer-dock-inset));
  height: 36px;
  margin: 0 auto;
  padding: 4px 5px 4px 12px;
  border: 1px solid var(--dsw-alias-border-l1);
-  border-radius: 14px;
+  border-radius: 12px;
  background: var(--dsw-specific-tip);
 }

-.sparkle {
+.goalGlyph {
  display: inline-flex;
  flex: none;
  color: var(--dsw-alias-label-tertiary);
 }

+/* Matches the Todo/Queue panel titles (13/24 medium, primary) so the three
+   composer-stack cards read as one family. */
 .label {
  flex: none;
  font-size: 13px;
-  line-height: 20px;
+  line-height: 24px;
  font-weight: 500;
-  color: var(--dsw-alias-label-primary-dimmed);
+  color: var(--dsw-alias-label-primary);
 }

 .objective {
@@ -1,6 +1,6 @@
 /**
 * GoalBar: the goal indicator docked above the message composer (input dock
- * strip). A present goal shows a sparkle, a phase label, the truncated
+ * strip). A present goal shows a goal glyph, a phase label, the truncated
 * objective, and icon actions — resume when paused, edit (inline form in the
 * same strip), and clear. Goal creation lives on the `/goal` command, not
 * here: loading (undefined), no goal (null), and complete goals render
@@ -11,7 +11,8 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 import type { GoalSnapshot } from '@deepseek-ai/dsh-goal/client'
 import {
-  IconCheckOutline16, IconCloseOutline16, IconEditOutline16, IconPauseOutline16, IconPlayOutline16, IconSparkle16, IconTrashOutline16,
+  IconCheckOutline16, IconCloseOutline16, IconEditOutline16, IconGoalOutline16,
+  IconPauseOutline16, IconPlayOutline16, IconTrashOutline16, Tooltip,
 } from '@deepseek-ai/dsh-client-ui-primitives'
 import type { PropsLocale } from '@deepseek-ai/dsh-client-ui-slots'
 import type { GoalActionResult, GoalBarActions } from './slots.ts'
@@ -94,26 +95,28 @@ export function GoalBar({ goal, onEdit, onPause, onResume, onClear, t }: GoalBar
          />
          {actionError !== null && <span className={css.error} role="alert">{actionError}</span>}
          <div className={css.actions}>
-            <button
-              type="button"
-              className={css.iconBtn}
-              onClick={() => { void handleEdit() }}
-              disabled={pending || draft.trim() === ''}
-              title={t('action.save')}
-              aria-label={t('action.save')}
-            >
-              <IconCheckOutline16 />
-            </button>
-            <button
-              type="button"
-              className={css.iconBtn}
-              onClick={() => { setEditing(false) }}
-              disabled={pending}
-              title={t('action.cancel')}
-              aria-label={t('action.cancel')}
-            >
-              <IconCloseOutline16 />
-            </button>
+            <Tooltip label={t('action.save')} side="bottom" delayMs={500}>
+              <button
+                type="button"
+                className={css.iconBtn}
+                onClick={() => { void handleEdit() }}
+                disabled={pending || draft.trim() === ''}
+                aria-label={t('action.save')}
+              >
+                <IconCheckOutline16 size={14} />
+              </button>
+            </Tooltip>
+            <Tooltip label={t('action.cancel')} side="bottom" delayMs={500}>
+              <button
+                type="button"
+                className={css.iconBtn}
+                onClick={() => { setEditing(false) }}
+                disabled={pending}
+                aria-label={t('action.cancel')}
+              >
+                <IconCloseOutline16 size={14} />
+              </button>
+            </Tooltip>
          </div>
        </div>
      </div>
@@ -124,34 +127,41 @@ export function GoalBar({ goal, onEdit, onPause, onResume, onClear, t }: GoalBar
  return (
    <div className={css.dock} data-goal-bar>
      <div className={css.bar} title={title}>
-        <span className={css.sparkle}><IconSparkle16 /></span>
+        <span className={css.goalGlyph}><IconGoalOutline16 size={14} /></span>
        <span className={css.label}>{t(PHASE_LABELS[goal.phase])}</span>
        <span className={css.objective}>{goal.objective}</span>
        {actionError !== null && <span className={css.error} role="alert">{actionError}</span>}
        <div className={css.actions}>
          {goal.phase === 'active' && (
-            <button type="button" className={css.iconBtn} disabled={pending} onClick={() => { void runAction(onPause) }} title={t('action.pause')} aria-label={t('action.pause')}>
-              <IconPauseOutline16 />
-            </button>
+            <Tooltip label={t('action.pause')} side="bottom" delayMs={500}>
+              <button type="button" className={css.iconBtn} disabled={pending} onClick={() => { void runAction(onPause) }} aria-label={t('action.pause')}>
+                <IconPauseOutline16 size={14} />
+              </button>
+            </Tooltip>
          )}
          {goal.phase === 'paused' && (
-            <button type="button" className={css.iconBtn} disabled={pending} onClick={() => { void runAction(onResume) }} title={t('action.resume')} aria-label={t('action.resume')}>
-              <IconPlayOutline16 />
-            </button>
+            <Tooltip label={t('action.resume')} side="bottom" delayMs={500}>
+              <button type="button" className={css.iconBtn} disabled={pending} onClick={() => { void runAction(onResume) }} aria-label={t('action.resume')}>
+                <IconPlayOutline16 size={14} />
+              </button>
+            </Tooltip>
          )}
-          <button
-            type="button"
-            className={css.iconBtn}
-            disabled={pending}
-            onClick={() => { setDraft(goal.objective); setEditing(true) }}
-            title={t('action.edit')}
-            aria-label={t('action.edit')}
-          >
-            <IconEditOutline16 />
-          </button>
-          <button type="button" className={css.iconBtn} disabled={pending} onClick={() => { void handleClear(goal.id) }} title={t('action.clear')} aria-label={t('action.clear')}>
-            <IconTrashOutline16 />
-          </button>
+          <Tooltip label={t('action.edit')} side="bottom" delayMs={500}>
+            <button
+              type="button"
+              className={css.iconBtn}
+              disabled={pending}
+              onClick={() => { setDraft(goal.objective); setEditing(true) }}
+              aria-label={t('action.edit')}
+            >
+              <IconEditOutline16 size={14} />
+            </button>
+          </Tooltip>
+          <Tooltip label={t('action.clear')} side="bottom" delayMs={500}>
+            <button type="button" className={css.iconBtn} disabled={pending} onClick={() => { void handleClear(goal.id) }} aria-label={t('action.clear')}>
+              <IconTrashOutline16 size={14} />
+            </button>
+          </Tooltip>
        </div>
      </div>
    </div>
@@ -52,7 +52,7 @@ describe('GoalBar', () => {
    expect(complete.container.firstChild).toBeNull()
  })

-  it('active goal: sparkle, "进行中的目标", truncated objective, edit and clear actions', () => {
+  it('active goal: goal glyph, "进行中的目标", truncated objective, edit and clear actions', () => {
    const actions = makeActions()
    render(<GoalBar goal={makeGoal()} {...actions} t={t} />)
    expect(screen.getByText('进行中的目标')).toBeTruthy()
@@ -13,7 +13,7 @@
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'
 import type { ReactNode } from 'react'
 import type { PropsRenderSlots, PropsRuntime, PropsStore } from '@deepseek-ai/dsh-client-ui-slots'
-import { computeColumns } from './columns.ts'
+import { computeColumns, SIDEBAR_AUTO_COLLAPSE, SIDEBAR_DEFAULT } from './columns.ts'
 import type { createLayoutStore } from './stores.ts'
 import css from './AppFrame.module.css'

@@ -127,7 +127,19 @@ export function AppFrame({
    }
  }, [])

-  const cols = computeColumns(viewport, panels.sidebar, detailsSession === undefined ? 0 : panels.details)
+  // Narrow viewports auto-collapse the sidebar; the store mirror keeps
+  // toggleSidebar's semantics right (narrow toggles flip the manual
+  // re-expand override, stores.ts). Collapsed is decided here, so the
+  // solver stays breakpoint-free: a narrow re-expand passes the preference
+  // (or the default when the wide preference is closed) and the center
+  // absorbs the squeeze.
+  const narrow = viewport < SIDEBAR_AUTO_COLLAPSE
+  useEffect(() => { actions.setNarrow(narrow) }, [actions, narrow])
+  const sidebarCollapsed = narrow ? !panels.narrowExpanded : panels.sidebar === 0
+  const sidebarPreference = sidebarCollapsed
+    ? 0
+    : panels.sidebar === 0 ? SIDEBAR_DEFAULT : panels.sidebar
+  const cols = computeColumns(viewport, sidebarPreference, detailsSession === undefined ? 0 : panels.details)
  const colsRef = useRef(cols)
  colsRef.current = cols

@@ -154,7 +166,7 @@ export function AppFrame({
      ref={frameRef}
      className={css.frame}
      style={{ gridTemplateColumns: `${cols.sidebar}px minmax(0, 1fr) ${cols.details}px` }}
-      data-sidebar-collapsed={panels.sidebar === 0 || undefined}
+      data-sidebar-collapsed={sidebarCollapsed || undefined}
      data-details-collapsed={cols.details === 0 || undefined}
      data-dragging={dragging || undefined}
    >
@@ -162,9 +174,10 @@ export function AppFrame({
        {/* Render-site slot call with live concession output: a closed
            sidebar keeps the mounted slot at the compact-rail width, and the
            component sees its rendered state as owner params decided here
-            (collapsed follows the preference, not the resolved width). */}
+            (collapsed follows the resolved rail, so a derived auto-collapse
+            renders the rail UI too). */}
        {renderSlot('sidebar', {
-          collapsed: panels.sidebar === 0,
+          collapsed: sidebarCollapsed,
          width: cols.sidebar,
        })}
      </div>
@@ -178,7 +191,7 @@ export function AppFrame({
        <DetailsColumn>{renderSlot('details', {})}</DetailsColumn>
      </>
      {/* The collapsed rail is fixed-width: no resize handle while closed. */}
-      {panels.sidebar > 0 && <DragHandle side="sidebar" left={cols.sidebar} onStart={onSidebarStart} onDrag={onSidebarDrag} onEnd={onDragEnd} />}
+      {!sidebarCollapsed && <DragHandle side="sidebar" left={cols.sidebar} onStart={onSidebarStart} onDrag={onSidebarDrag} onEnd={onDragEnd} />}
      {cols.details > 0 && <DragHandle side="details" left={viewport - cols.details} onStart={onDetailsStart} onDrag={onDetailsDrag} onEnd={onDragEnd} />}
    </div>
  )
@@ -8,6 +8,9 @@
 * deficit as the last resort. Inputs are the layout store's plain width
 * preferences (0 = closed); a closed sidebar resolves to the fixed
 * SIDEBAR_COLLAPSED control rail while closed details resolve to zero width.
+ * The SIDEBAR_AUTO_COLLAPSE breakpoint is consumed by AppFrame, which decides
+ * the effective sidebar preference before solving; the solver itself stays
+ * breakpoint-free.
 */

 /** Resolved widths for one frame; center may drop below CENTER_MIN only at the final fallback. */
@@ -24,6 +27,10 @@ export const SIDEBAR_MAX = 420
 export const SIDEBAR_DEFAULT = 280
 /** Closed-sidebar rail: a 24px icon column between 16px horizontal paddings. */
 export const SIDEBAR_COLLAPSED = 56
+/** Viewport width below which the sidebar auto-collapses to the rail (deepsuite
+ * LG breakpoint); a manual toggle below it re-expands over the squeezed center
+ * (stores.ts narrowExpanded). */
+export const SIDEBAR_AUTO_COLLAPSE = 1024
 /** Details drag clamp floor. */
 export const DETAILS_MIN = 300
 /** Details drag clamp ceiling. */
@@ -13,8 +13,14 @@ import {
  SIDEBAR_DEFAULT, SIDEBAR_MAX, SIDEBAR_MIN,
 } from './columns.ts'

-/** Layout store state: panel width preferences in px (0 = closed). */
-type LayoutState = { sidebar: number; details: number }
+/**
+ * Layout store state: panel width preferences in px (0 = closed), plus the
+ * narrow-viewport pair — `narrow` mirrors AppFrame's breakpoint reading
+ * (viewport < SIDEBAR_AUTO_COLLAPSE) so toggleSidebar can pick semantics, and
+ * `narrowExpanded` is the manual override that re-expands the auto-collapsed
+ * sidebar over the squeezed center without rewriting the width preference.
+ */
+type LayoutState = { sidebar: number; details: number; narrow: boolean; narrowExpanded: boolean }

 /**
 * Annotation twin of the actions literal below (the export needs a declared
@@ -24,6 +30,7 @@ type LayoutActions = {
  setSidebar: (draft: LayoutState, px: number) => void
  setDetails: (draft: LayoutState, px: number) => void
  toggleSidebar: (draft: LayoutState) => void
+  setNarrow: (draft: LayoutState, narrow: boolean) => void
  openDetails: (draft: LayoutState) => void
  closeDetails: (draft: LayoutState) => void
 }
@@ -33,16 +40,30 @@ type LayoutActions = {
 * closing a panel forgets its drag width — reopening restores the contract
 * default. Actions are the complete write set: drag writes clamp
 * into the panel's contract range and never cross the open/closed line;
- * open/close transitions write 0 / the default explicitly.
+ * open/close transitions write 0 / the default explicitly. Below the
+ * auto-collapse breakpoint (AppFrame feeds setNarrow) the sidebar toggle
+ * flips the narrowExpanded override instead of the preference.
 * @returns the store handle (spec + type + identity + factory in one).
 */
 export function createLayoutStore(): EngineStoreHandle<LayoutState, LayoutActions>  {
  const handle = defineStore({
-    init: (): LayoutState => ({ sidebar: SIDEBAR_DEFAULT, details: 0 }),
+    init: (): LayoutState => ({ sidebar: SIDEBAR_DEFAULT, details: 0, narrow: false, narrowExpanded: false }),
    actions: {
      setSidebar: (d, px: number) => { d.sidebar = clampWidth(px, SIDEBAR_MIN, SIDEBAR_MAX) },
      setDetails: (d, px: number) => { d.details = clampWidth(px, DETAILS_MIN, DETAILS_MAX) },
-      toggleSidebar: (d) => { d.sidebar = d.sidebar === 0 ? SIDEBAR_DEFAULT : 0 },
+      // Narrow toggles flip only the override: the width preference survives
+      // untouched, so re-widening restores the pre-squeeze layout.
+      toggleSidebar: (d) => {
+        if (d.narrow) d.narrowExpanded = !d.narrowExpanded
+        else d.sidebar = d.sidebar === 0 ? SIDEBAR_DEFAULT : 0
+      },
+      // Crossing the breakpoint in either direction drops the override: the
+      // narrow default is auto-collapsed, the wide state is the preference.
+      setNarrow: (d, narrow: boolean) => {
+        if (d.narrow === narrow) return
+        d.narrow = narrow
+        d.narrowExpanded = false
+      },
      openDetails: (d) => { if (d.details === 0) d.details = DETAILS_DEFAULT },
      closeDetails: (d) => { d.details = 0 },
    },
@@ -284,6 +284,50 @@ describe('AppFrame', () => {
  })
 })

+describe('AppFrame — narrow-viewport auto-collapse', () => {
+  it('mounts collapsed below the breakpoint with no sidebar handle', () => {
+    frameWidth = 980
+    const { frame, slotCalls } = mountFrame()
+    expect(tracks(frame)).toEqual([SIDEBAR_COLLAPSED, 0])
+    expect(frame.hasAttribute('data-sidebar-collapsed')).toBe(true)
+    expect(slotCalls.filter(c => c.key === 'sidebar').at(-1)!.props).toEqual({ collapsed: true, width: SIDEBAR_COLLAPSED })
+    expect(frame.querySelectorAll('[class*="handle"]')).toHaveLength(0)
+  })
+
+  it('narrow toggle re-expands over the squeezed center and back', () => {
+    frameWidth = 980
+    const { frame, instance } = mountFrame()
+    act(() => { instance.actions.toggleSidebar() })
+    expect(tracks(frame)).toEqual([280, 0])
+    expect(frame.hasAttribute('data-sidebar-collapsed')).toBe(false)
+    expect(frame.querySelectorAll('[class*="handle"]')).toHaveLength(1)
+    act(() => { instance.actions.toggleSidebar() })
+    expect(tracks(frame)).toEqual([SIDEBAR_COLLAPSED, 0])
+  })
+
+  it('a wide-closed preference re-expands at the contract default while narrow', () => {
+    frameWidth = 1920
+    const { frame, instance } = mountFrame()
+    act(() => { instance.actions.toggleSidebar() }) // close while wide: preference 0
+    frameWidth = 980
+    act(() => { fireResize?.(); vi.advanceTimersByTime(20) })
+    act(() => { instance.actions.toggleSidebar() })
+    expect(tracks(frame)).toEqual([280, 0])
+    expect(instance.getSnapshot().sidebar).toBe(0) // preference untouched
+  })
+
+  it('shrinking across the breakpoint auto-collapses; re-widening restores the drag width', () => {
+    const { frame, instance } = mountFrame()
+    act(() => { instance.actions.setSidebar(400) })
+    frameWidth = 980
+    act(() => { fireResize?.(); vi.advanceTimersByTime(20) })
+    expect(tracks(frame)).toEqual([SIDEBAR_COLLAPSED, 0])
+    frameWidth = 1920
+    act(() => { fireResize?.(); vi.advanceTimersByTime(20) })
+    expect(tracks(frame)).toEqual([400, 0])
+  })
+})
+
 describe('AppFrame — guard branches', () => {
  it('pointer moves without capture are ignored (no width write)', () => {
    const { frame, instance } = mountFrame()
@@ -17,9 +17,9 @@ const PERSIST_KEY = 'dsh.layout.panels'
 beforeEach(() => { localStorage.clear() })

 describe('createLayoutStore', () => {
-  it('initializes the sidebar at its default width and details closed', () => {
+  it('initializes the sidebar at its default width, details closed, wide viewport assumed', () => {
    const { store } = createLayoutStore().create()
-    expect(store.getSnapshot()).toEqual({ sidebar: SIDEBAR_DEFAULT, details: 0 })
+    expect(store.getSnapshot()).toEqual({ sidebar: SIDEBAR_DEFAULT, details: 0, narrow: false, narrowExpanded: false })
  })

  it('each create() is an independent instance (factory is not a singleton)', () => {
@@ -50,6 +50,30 @@ describe('createLayoutStore', () => {
    expect(store.getSnapshot().sidebar).toBe(SIDEBAR_DEFAULT)
  })

+  it('narrow toggleSidebar flips only the re-expand override; the width preference survives', () => {
+    const { store, actions } = createLayoutStore().create()
+    actions.setSidebar(400)
+    actions.setNarrow(true)
+    actions.toggleSidebar()
+    expect(store.getSnapshot()).toEqual({ sidebar: 400, details: 0, narrow: true, narrowExpanded: true })
+    actions.toggleSidebar()
+    expect(store.getSnapshot().narrowExpanded).toBe(false)
+    expect(store.getSnapshot().sidebar).toBe(400)
+  })
+
+  it('crossing the breakpoint drops the override; a same-value setNarrow keeps it', () => {
+    const { store, actions } = createLayoutStore().create()
+    actions.setNarrow(true)
+    actions.toggleSidebar()
+    expect(store.getSnapshot().narrowExpanded).toBe(true)
+    actions.setNarrow(true)
+    expect(store.getSnapshot().narrowExpanded).toBe(true)
+    actions.setNarrow(false)
+    expect(store.getSnapshot()).toMatchObject({ narrow: false, narrowExpanded: false })
+    actions.setNarrow(true)
+    expect(store.getSnapshot().narrowExpanded).toBe(false)
+  })
+
  it('openDetails uses the contract default, preserves an open width, and closeDetails zeroes', () => {
    const { store, actions } = createLayoutStore().create()
    actions.openDetails()
@@ -72,6 +96,8 @@ describe('createLayoutStore', () => {
    expect(second.store.getSnapshot()).toEqual({
      sidebar: SIDEBAR_DEFAULT,
      details: 0,
+      narrow: false,
+      narrowExpanded: false,
    })
  })
 })
@@ -13,6 +13,7 @@ function fakePanels(): PanelActions {
    setSidebar: vi.fn(),
    setDetails: vi.fn(),
    toggleSidebar: vi.fn(),
+    setNarrow: vi.fn(),
    openDetails: vi.fn(),
    closeDetails: vi.fn(),
  }
@@ -15,7 +15,8 @@
  height: 28px;
  padding: 0 4px 0 8px;
  border: none;
-  border-radius: 8px;
+  /* Rounded chip chrome, matching the sibling permission trigger. */
+  border-radius: 24px;
  outline: none;
  background: transparent;
  color: var(--dsw-alias-label-secondary);
@@ -26,7 +26,8 @@

 .rows {
  list-style: none;
-  margin: 0;
+  /* Extra air between the title/intro block and the first provider card. */
+  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
@@ -70,6 +71,10 @@
  cursor: pointer;
 }

+.primaryButton:hover:not(:disabled) {
+  background: var(--dsw-alias-button-primary-hover);
+}
+
 .secondaryButton {
  border: 1px solid var(--dsw-alias-border-l2);
  border-radius: 999px;
@@ -80,14 +85,24 @@
  cursor: pointer;
 }

+.secondaryButton:hover:not(:disabled) {
+  background: var(--dsw-alias-interactive-bg-hover-solid);
+}
+
 .dangerButton {
  border: none;
+  border-radius: 8px;
+  padding: 4px 8px;
  background: none;
  color: var(--dsw-alias-state-error-primary);
  font: inherit;
  cursor: pointer;
 }

+.dangerButton:hover:not(:disabled) {
+  background: var(--dsw-alias-interactive-bg-hover-danger);
+}
+
 .primaryButton:disabled,
 .secondaryButton:disabled,
 .dangerButton:disabled {
@@ -147,6 +162,10 @@
  cursor: pointer;
 }

+.linkButton:hover:not(:disabled) {
+  color: var(--dsw-alias-label-secondary);
+}
+
 .linkButton:disabled {
  opacity: 0.5;
  cursor: default;
@@ -171,17 +190,23 @@
 }

 .addButton {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
  align-self: flex-start;
  border: 1px solid var(--dsw-alias-border-l2);
  border-radius: 999px;
  padding: 8px 16px;
  font: inherit;
-  font-size: 13px;
  background: var(--dsw-alias-bg-layer-3);
  color: inherit;
  cursor: pointer;
 }

+.addButton:hover:not(:disabled) {
+  background: var(--dsw-alias-interactive-bg-hover-solid);
+}
+
 .addButton:disabled {
  opacity: 0.5;
  cursor: default;
@@ -246,6 +271,20 @@
  color: var(--dsw-alias-label-dimmed);
 }

+/* Select variant of .input: replaces the OS arrow (which sits flush against
+   the right edge) with the shared 12px chevron inset like the composer's
+   .select chips; the right pad reserves its cell. */
+.selectInput {
+  appearance: none;
+  padding-right: 32px;
+  /* Data-URI SVGs cannot resolve CSS variables; #81858C is the caption gray
+     shared by both themes. */
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%2381858C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 12px center;
+  background-size: 12px 12px;
+}
+
 .error {
  margin: 0;
  font-size: 12px;
@@ -12,7 +12,7 @@
 import { useState } from 'react'
 import type { ReactNode } from 'react'
 import type { IApiClient } from '@deepseek-ai/dsh-client-connection/client'
-import { Button, Modal } from '@deepseek-ai/dsh-client-ui-primitives'
+import { Button, IconPlusOutline16, Modal } from '@deepseek-ai/dsh-client-ui-primitives'
 import type { SnapshotSelectorHook } from '@deepseek-ai/dsh-client-web-react'
 import { messageOf } from './store.ts'
 import type { ModelsSettingsState, ModelsSettingsStore, ProviderRow } from './store.ts'
@@ -245,7 +245,7 @@ function Loaded({ injected }: { injected: ModelsSectionInjected }): ReactNode {
              <div className={styles['field']}>
                <span className={styles['fieldLabel']}>{t('provider')}</span>
                <select
-                  className={styles['input']}
+                  className={`${styles['input']} ${styles['selectInput']}`}
                  value={addTarget.provider}
                  aria-label={t('provider')}
                  onChange={(event) => {
@@ -287,7 +287,9 @@ function Loaded({ injected }: { injected: ModelsSectionInjected }): ReactNode {
                setEditing(targetOf(first))
              }}
            >
-              {`+ ${t('add')}`}
+              {/* Same glyph as the composer's attach button. */}
+              <IconPlusOutline16 size={14} />
+              {t('add')}
            </button>
          )}
      </div>
@@ -275,7 +275,7 @@ export function ProviderEditor(props: ProviderEditorProps): ReactNode {
            <div className={styles['field']}>
              <span className={styles['fieldLabel']}>{t('effort')}</span>
              <select
-                className={styles['input']}
+                className={`${styles['input']} ${styles['selectInput']}`}
                value={stringAt(draft, effortField) ?? ''}
                aria-label={t('effort')}
                disabled={disabled}
@@ -155,7 +155,7 @@ describe('ModelsSection', () => {
    expect(screen.getByText('openai')).toBeTruthy()
    expect(screen.queryByText('Active')).toBeNull()
    expect(screen.queryByText('Inactive')).toBeNull()
-    expect(screen.getByText(`+ ${en.add}`)).toBeTruthy()
+    expect(screen.getByText(en.add)).toBeTruthy()
  })

  it('turns the setup card into a row once the credential reports configured', async () => {
@@ -332,7 +332,7 @@ describe('ModelsSection', () => {

  it('adds a dormant provider with a derived reference and stores its key', async () => {
    const { mutate, set } = await mountSection()
-    fireEvent.click(screen.getByText(`+ ${en.add}`))
+    fireEvent.click(screen.getByText(en.add))
    const pick = await screen.findByLabelText<HTMLSelectElement>(en.provider)
    expect([...pick.options].map(option => option.value)).toEqual(['anthropic', 'broken', 'plain'])
    expect(pick.value).toBe('anthropic')
@@ -356,7 +356,7 @@ describe('ModelsSection', () => {

  it('switches the add card target and degrades unknown or broken targets loudly', async () => {
    await mountSection()
-    fireEvent.click(screen.getByText(`+ ${en.add}`))
+    fireEvent.click(screen.getByText(en.add))
    const pick = await screen.findByLabelText<HTMLSelectElement>(en.provider)
    fireEvent.change(pick, { target: { value: 'broken' } })
    await screen.findByText(/unresolvable settings path/)
@@ -374,7 +374,7 @@ describe('ModelsSection', () => {
    const { set } = await mountSection({
      mutate: vi.fn(() => Promise.resolve(fail('llm-pi-ai: unknown pi-ai provider "bogus"'))),
    })
-    fireEvent.click(screen.getByText(`+ ${en.add}`))
+    fireEvent.click(screen.getByText(en.add))
    await screen.findByLabelText(en.provider)
    const keys = screen.getAllByLabelText<HTMLInputElement>(en.keyInput)
    fireEvent.change(keys[keys.length - 1] as HTMLInputElement, { target: { value: 'sk-x' } })
@@ -554,7 +554,7 @@ describe('ModelsSection', () => {
    />)
    expect(screen.getByText(en.readOnly)).toBeTruthy()
    expect(screen.getAllByText<HTMLButtonElement>(en.remove).every(button => button.disabled)).toBe(true)
-    expect(screen.getByText<HTMLButtonElement>(`+ ${en.add}`).disabled).toBe(true)
+    expect(screen.getByText<HTMLButtonElement>(en.add).disabled).toBe(true)
  })

  it('toggles the row editor closed on a second edit click and on cancel', async () => {
@@ -573,10 +573,10 @@ describe('ModelsSection', () => {

  it('cancels the add card back to the add button', async () => {
    await mountSection()
-    fireEvent.click(screen.getByText(`+ ${en.add}`))
+    fireEvent.click(screen.getByText(en.add))
    await screen.findByLabelText(en.provider)
    fireEvent.click(screen.getAllByText(en.cancel)[1] as HTMLElement)
-    await screen.findByText(`+ ${en.add}`)
+    await screen.findByText(en.add)
    expect(screen.queryByLabelText(en.provider)).toBeNull()
  })

@@ -1,6 +1,6 @@
 /* Visual spec mirrors deepsuite @deepseek/ui Tooltip.css (size m, no arrow),
-   except padding tightened 6/12 -> 4/8 and radius 10 -> 8 by product ruling:
-   tooltip-bg plate,
+   except padding tightened 6/12 -> 3/7, type 14/22 -> 13/20, and radius
+   10 -> 8 by product ruling: tooltip-bg plate,
   one text color across both themes (the plate stays dark in light and dark
   mode). Behavior (fixed positioning off the anchor rect) is local — the
   upstream Floating stack is intentionally not vendored. */
@@ -8,13 +8,20 @@
 .bubble {
  position: fixed;
  z-index: 100;
-  padding: 4px 8px;
+  /* Fixed-position shrink-to-fit measures only the space from `left` to the
+     viewport edge, so anchors near the right edge would wrap early;
+     max-content sizes by the label alone, capped at half the viewport. */
+  width: max-content;
+  max-width: 50vw;
+  padding: 3px 7px;
  border-radius: 8px;
  background: var(--dsw-alias-tooltip-bg);
  color: var(--dsw-static-neutral-bluish-00);
-  font-size: 14px;
-  line-height: 22px;
+  font-size: 13px;
+  line-height: 20px;
  white-space: pre-line;
+  /* Unbreakable tokens (URLs, paths) must not push past max-width. */
+  overflow-wrap: break-word;
  pointer-events: none;
  animation: tooltip-in 150ms var(--ds-ease-in-out);
 }
@@ -27,6 +34,10 @@
  transform: translateX(-50%);
 }

+.bubble[data-side='top'] {
+  transform: translate(-50%, -100%);
+}
+
@keyframes tooltip-in {
  from { opacity: 0; }
 }
@@ -1,18 +1,19 @@
 // Hover/focus label bubble (figma tooltip pill: dark plate, white text).
-// TODO: interaction is a placeholder (no flip on viewport collision or
-// arrow) — visuals and behavior get a proper pass later.
+// TODO: interaction is a placeholder (horizontal overflow clamps, but there
+// is no vertical flip on viewport collision and no arrow) — visuals and
+// behavior get a proper pass later.
 // The anchor is the child element itself (cloneElement, no wrapper node), so
 // attaching a tooltip never changes the anchor's layout context. The bubble is
 // position:fixed and coordinates come from the anchor's rect at show time, so
 // it escapes ancestor overflow clipping (the sidebar rail clips its column)
 // without a portal.

-import { cloneElement, useCallback, useEffect, useRef, useState } from 'react'
+import { cloneElement, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'
 import type { FocusEventHandler, MouseEventHandler, MutableRefObject, ReactElement, Ref } from 'react'
 import css from './Tooltip.module.css'

 /** Bubble placement relative to the anchor. */
-export type TooltipSide = 'right' | 'bottom'
+export type TooltipSide = 'right' | 'bottom' | 'top'

 /** Props Tooltip injects into its anchor child; the child's own handlers are chained ahead of the tooltip's. */
 interface AnchorProps {
@@ -44,6 +45,29 @@ export function Tooltip({ label, side = 'right', delayMs = 0, disabled = false,
    else if (childRef != null) (childRef as MutableRefObject<HTMLElement | null>).current = el
  }, [childRef])
  const [pos, setPos] = useState<{ x: number; y: number } | null>(null)
+  const bubble = useRef<HTMLSpanElement | null>(null)
+  // Horizontal viewport clamp: fixed positioning knows nothing about edges, so
+  // a centered bubble near the right edge would clip. Each measurement resets
+  // the base position before applying a direct style offset, allowing a shorter
+  // label or wider viewport to release a previous clamp without another render.
+  useLayoutEffect(() => {
+    if (pos === null) return
+    const clamp = () => {
+      const el = bubble.current
+      /* v8 ignore next -- pos is set only while the bubble is mounted. */
+      if (el === null) return
+      const EDGE_MARGIN = 12
+      el.style.left = `${pos.x}px`
+      const r = el.getBoundingClientRect()
+      let dx = 0
+      if (r.right > window.innerWidth - EDGE_MARGIN) dx = window.innerWidth - EDGE_MARGIN - r.right
+      if (r.left + dx < EDGE_MARGIN) dx = EDGE_MARGIN - r.left
+      el.style.left = `${pos.x + dx}px`
+    }
+    clamp()
+    window.addEventListener('resize', clamp)
+    return () => { window.removeEventListener('resize', clamp) }
+  }, [label, pos])
  const showTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
  // Hover and focus are independent triggers: the bubble hides only after
  // BOTH clear (hovering away from a focused anchor must not drop it).
@@ -73,7 +97,9 @@ export function Tooltip({ label, side = 'right', delayMs = 0, disabled = false,
    const r = el.getBoundingClientRect()
    setPos(side === 'right'
      ? { x: r.right + 10, y: r.top + r.height / 2 }
-      : { x: r.left + r.width / 2, y: r.bottom + 8 })
+      : side === 'top'
+        ? { x: r.left + r.width / 2, y: r.top - 8 }
+        : { x: r.left + r.width / 2, y: r.bottom + 8 })
  }
  const showAfterHoverDelay = () => {
    cancelShow()
@@ -101,7 +127,7 @@ export function Tooltip({ label, side = 'right', delayMs = 0, disabled = false,
        onBlur: (e) => { children.props.onBlur?.(e); triggers.current.focus = false; hide() },
      })}
      {pos !== null && (
-        <span className={css.bubble} data-side={side} style={{ left: pos.x, top: pos.y }} role="tooltip">
+        <span ref={bubble} className={css.bubble} data-side={side} style={{ left: pos.x, top: pos.y }} role="tooltip">
          {label}
        </span>
      )}
@@ -1,6 +1,5 @@
-// Package-internal clipboard write, shared by every copy control in this
-// package (CodeBlock's code copy, TerminalBlock's output copy). Not part of the
-// public surface: consumers get the components, not the host detection.
+// Host clipboard write shared by Web UI copy controls. Success feedback stays
+// with each control; this seam only reports whether the host accepted a write.

 /**
 * Write text to the host clipboard, preferring the async Clipboard API and
@@ -675,6 +675,26 @@ export const IconDataOutline16 = ({ size = 16, className }: IconProps) => (
  </svg>
 )

+/** ic_send_outline_14 (figma extract): thin-stroke upward send arrow. */
+export const IconSendOutline14 = ({ size = 14, className }: IconProps) => (
+  <svg width={size} height={size} className={className} viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M7.24707 1.01771C7.52897 1.07653 7.77619 1.19694 8.00391 1.38001C8.19202 1.53136 8.39884 1.73784 8.61914 1.95814L12.6396 5.9806L11.6299 6.99134L7.71484 3.0763V13.0001H6.28516V3.0763L2.36914 6.99134L1.35938 5.9806L5.38086 1.95814C5.60116 1.73784 5.80798 1.53136 5.99609 1.38001C6.19476 1.22027 6.4385 1.06739 6.75195 1.01771C6.91296 0.992304 7.07471 0.997504 7.24707 1.01771Z"
+      fill="currentColor"
+    />
+  </svg>
+)
+
+/** ic_queue_outline_14 (figma extract): open chat bubble with two queued lines. */
+export const IconQueueOutline14 = ({ size = 14, className }: IconProps) => (
+  <svg width={size} height={size} className={className} viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M7.00049 0.199829C3.24488 0.199829 0.199952 3.24408 0.199707 6.99963C0.199707 8.0414 0.434087 9.03061 0.854004 9.91467L1.11279 10.4576L2.19775 9.94202L1.94092 9.39905L1.81787 9.12268C1.5498 8.46885 1.40186 7.75171 1.40186 6.99963C1.4021 3.90808 3.90888 1.40198 7.00049 1.40198C10.0919 1.40219 12.5979 3.90821 12.5981 6.99963C12.5981 10.0913 10.0921 12.5981 7.00049 12.5983C6.36734 12.5983 5.90348 12.5535 5.49268 12.4401C5.08803 12.3283 4.7041 12.1414 4.24463 11.8209C3.57111 11.3511 2.60588 11.1855 1.81006 11.6881L1.79736 11.6959L1.78467 11.7047L1.25537 12.0778L1.65381 13.2672L2.46045 12.6989C2.75029 12.5214 3.18004 12.5442 3.55615 12.8063C4.10063 13.1861 4.60863 13.4423 5.17334 13.5983C5.73194 13.7525 6.31665 13.8004 7.00049 13.8004C10.7561 13.8002 13.8003 10.7553 13.8003 6.99963C13.8 3.24421 10.7559 0.200041 7.00049 0.199829ZM3.81201 7.47327V8.67542H7.11572V7.47327H3.81201ZM3.81201 6.34924H10.2173V5.14709H3.81201V6.34924Z"
+      fill="currentColor"
+    />
+  </svg>
+)
+
 /** ic_checklist_outline_14 (figma extract): two rings + two list bars. */
 export const IconChecklistOutline14 = ({ size = 14, className }: IconProps) => (
  <svg width={size} height={size} className={className} viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -703,7 +723,23 @@ export const IconListPenOutline16 = ({ size = 16, className }: IconProps) => (
  </svg>
 )

-/** sparkle_16 (Others tool-row / goal strip leading glyph; hand-authored three-star
+/** ic_ds_goal_outline_16 (goal strip leading glyph: dartboard with a landed arrow) */
+export const IconGoalOutline16 = ({ size = 16, className }: IconProps) => (
+  <svg width={size} height={size} className={className} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M8 0C8.31451 0 8.62464 0.019379 8.92969 0.0546875C8.48228 0.403371 8.0952 0.825758 7.78809 1.30469C4.18586 1.41664 1.2998 4.37061 1.2998 8C1.2998 11.7003 4.29969 14.7002 8 14.7002C11.6297 14.7002 14.5829 11.8136 14.6943 8.21094C15.1734 7.90377 15.5956 7.51688 15.9443 7.06934C15.9797 7.37473 16 7.68512 16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0ZM7.0166 3.6084C7.00658 3.73765 7 3.86817 7 4C7 4.31845 7.03098 4.62973 7.08789 4.93164C5.76489 5.32438 4.7998 6.54958 4.7998 8C4.7998 9.76731 6.23269 11.2002 8 11.2002C9.45065 11.2002 10.6749 10.2345 11.0674 8.91113C11.3696 8.96818 11.6812 9 12 9C12.1315 9 12.2617 8.99239 12.3906 8.98242C11.9423 10.995 10.1477 12.5 8 12.5C5.51472 12.5 3.5 10.4853 3.5 8C3.5 5.85255 5.00435 4.05702 7.0166 3.6084Z"
+      fill="currentColor"
+    />
+    <path d="M7.5 8.62109L9.12109 7" stroke="currentColor" strokeWidth="1.3" />
+    <path
+      d="M9.08245 3.35798L11.8651 0.575334C11.895 0.545384 11.9463 0.56391 11.9502 0.606086L12.2362 3.69859C12.2384 3.72259 12.2574 3.74159 12.2814 3.74378L15.3697 4.02583C15.4119 4.02968 15.4305 4.08101 15.4005 4.11098L12.618 6.89351C12.6086 6.90289 12.5959 6.90816 12.5826 6.90816L9.11781 6.90815C9.09019 6.90816 9.06781 6.88577 9.06781 6.85816L9.06781 3.39333C9.06781 3.38007 9.07308 3.36735 9.08245 3.35798Z"
+      stroke="currentColor"
+      strokeWidth="1.3"
+    />
+  </svg>
+)
+
+/** sparkle_16 (Others tool-row leading glyph; hand-authored three-star
 *  approximation — the figma 43:31850 glyph is an SF Symbols "sparkles" text glyph,
 *  not extractable as vector data) */
 export const IconSparkle16 = ({ size = 16, className }: IconProps) => (
@@ -20,6 +20,7 @@ export { FishLogo } from './FishLogo.tsx'
 export { BrandWordmark } from './BrandWordmark.tsx'
 export { Tooltip } from './Tooltip.tsx'
 export type { TooltipSide } from './Tooltip.tsx'
+export { writeClipboard } from './clipboard.ts'
 export { JsonTree } from './JsonTree.tsx'
 export type { JsonTreeProps, JsonTreeLabels } from './JsonTree.tsx'
 export { TerminalBlock, DEFAULT_TERMINAL_MAX_LINES } from './TerminalBlock.tsx'
@@ -2,7 +2,9 @@
 import { cleanup, render } from '@testing-library/react'
 import { afterEach, describe, expect, it } from 'vitest'
 import * as primitives from '@deepseek-ai/dsh-client-ui-primitives'
-import { IconApiOutline14, IconArchiveOutline20, IconFolderClose16, IconSendOutline16 } from '@deepseek-ai/dsh-client-ui-primitives'
+import {
+  IconApiOutline14, IconArchiveOutline20, IconFolderClose16, IconGoalOutline16, IconSendOutline16,
+} from '@deepseek-ai/dsh-client-ui-primitives'

 afterEach(cleanup)

@@ -14,8 +16,8 @@ const icons = Object.fromEntries(
 const iconNames = Object.keys(icons)

 describe('ic_ds_ icon set', () => {
-  it('exports the full P-I set (45 deepsuite + 15 figma extracts + the hand-authored sparkle)', () => {
-    expect(iconNames.length).toBe(61)
+  it('exports the full P-I set (46 deepsuite + 17 figma extracts + the hand-authored sparkle)', () => {
+    expect(iconNames.length).toBe(64)
  })

  it.each(iconNames)('%s renders an svg with currentColor fills and no hardcoded palette', (name) => {
@@ -44,6 +46,12 @@ describe('ic_ds_ icon set', () => {
    const archive = render(<IconArchiveOutline20 />)
    expect(archive.container.querySelector('svg')!.getAttribute('width')).toBe('20')
  })
+
+  it('renders reusable goal glyphs without document-global ids', () => {
+    const { container } = render(<><IconGoalOutline16 /><IconGoalOutline16 /></>)
+    expect(container.querySelector('[id]')).toBeNull()
+    expect(container.querySelector('[clip-path]')).toBeNull()
+  })
 })

 describe('FishLogo', () => {
@@ -43,8 +43,9 @@ describe('Tooltip', () => {
    const bubble = screen.getByRole('tooltip')
    expect(bubble.textContent).toBe('Open sidebar')
    expect(bubble.getAttribute('data-side')).toBe('right')
-    // jsdom rects are all-zero: right placement lands at the +10 gutter.
-    expect(bubble.style.left).toBe('10px')
+    // jsdom rects are all-zero: right placement lands at the +10 gutter, then
+    // the zero-width measured rect clamps to the 12px edge margin (10 + 12).
+    expect(bubble.style.left).toBe('22px')
    expect(bubble.style.top).toBe('0px')
    fireEvent.mouseLeave(anchor)
    expect(screen.queryByRole('tooltip')).toBeNull()
@@ -60,12 +61,100 @@ describe('Tooltip', () => {
    fireEvent.focus(anchor)
    const bubble = screen.getByRole('tooltip')
    expect(bubble.getAttribute('data-side')).toBe('bottom')
-    expect(bubble.style.left).toBe('0px')
+    // Zero-width jsdom rect at x=0 clamps to the 12px edge margin.
+    expect(bubble.style.left).toBe('12px')
    expect(bubble.style.top).toBe('8px')
    fireEvent.blur(anchor)
    expect(screen.queryByRole('tooltip')).toBeNull()
  })

+  // jsdom's default rects are all-zero, so the clamp tests stub the measured
+  // rect (anchor and bubble share the prototype stub) and derive expectations
+  // from it: pos.x = anchor center, then shifted by the measured overflow.
+  const rect = (left: number, right: number): DOMRect =>
+    ({ left, right, top: 0, bottom: 20, width: right - left, height: 20, x: left, y: 0, toJSON: () => ({}) })
+
+  it('clamps a bubble overflowing the right viewport edge back inside', () => {
+    const spy = vi.spyOn(Element.prototype, 'getBoundingClientRect').mockReturnValue(rect(900, 1100))
+    try {
+      render(
+        <Tooltip label="Wide" side="bottom">
+          <button type="button">anchor</button>
+        </Tooltip>,
+      )
+      fireEvent.mouseEnter(screen.getByText('anchor'))
+      // pos.x = 1000 (anchor center); measured right edge 1100 overflows the
+      // 1024 viewport's 12px safe margin (limit 1012) by 88, so the clamp
+      // shifts left to 912.
+      expect(screen.getByRole('tooltip').style.left).toBe('912px')
+    } finally {
+      spy.mockRestore()
+    }
+  })
+
+  it('reclamps after label and viewport width changes', () => {
+    const originalWidth = window.innerWidth
+    const spy = vi.spyOn(Element.prototype, 'getBoundingClientRect').mockImplementation(function (this: Element) {
+      if (this.getAttribute('role') !== 'tooltip') return rect(900, 1000)
+      return this.textContent === 'Wide' ? rect(900, 1100) : rect(850, 950)
+    })
+    try {
+      const view = render(
+        <Tooltip label="Wide" side="bottom">
+          <button type="button">anchor</button>
+        </Tooltip>,
+      )
+      fireEvent.mouseEnter(screen.getByText('anchor'))
+      expect(screen.getByRole('tooltip').style.left).toBe('862px')
+
+      view.rerender(
+        <Tooltip label="Short" side="bottom">
+          <button type="button">anchor</button>
+        </Tooltip>,
+      )
+      expect(screen.getByRole('tooltip').style.left).toBe('950px')
+
+      Object.defineProperty(window, 'innerWidth', { configurable: true, value: 900 })
+      fireEvent(window, new Event('resize'))
+      expect(screen.getByRole('tooltip').style.left).toBe('888px')
+    } finally {
+      Object.defineProperty(window, 'innerWidth', { configurable: true, value: originalWidth })
+      spy.mockRestore()
+    }
+  })
+
+  it('clamps a bubble past the left viewport edge back inside', () => {
+    const spy = vi.spyOn(Element.prototype, 'getBoundingClientRect').mockReturnValue(rect(-20, 80))
+    try {
+      render(
+        <Tooltip label="Wide" side="bottom">
+          <button type="button">anchor</button>
+        </Tooltip>,
+      )
+      fireEvent.mouseEnter(screen.getByText('anchor'))
+      // pos.x = 30 (anchor center); measured left edge -20 underflows the
+      // 12px safe margin by 32, so the clamp shifts right to 62.
+      expect(screen.getByRole('tooltip').style.left).toBe('62px')
+    } finally {
+      spy.mockRestore()
+    }
+  })
+
+  it('supports top placement for anchors at the viewport bottom', () => {
+    render(
+      <Tooltip label="Above" side="top">
+        <button type="button">anchor</button>
+      </Tooltip>,
+    )
+    fireEvent.mouseEnter(screen.getByText('anchor'))
+    const bubble = screen.getByRole('tooltip')
+    expect(bubble.getAttribute('data-side')).toBe('top')
+    // jsdom rects are all-zero: top placement lands at the -8 gutter and the
+    // zero-width measured rect clamps left to the 12px edge margin.
+    expect(bubble.style.left).toBe('12px')
+    expect(bubble.style.top).toBe('-8px')
+  })
+
  it('chains the anchor\'s own handlers ahead of the tooltip\'s', () => {
    const onMouseEnter = vi.fn()
    const onMouseLeave = vi.fn()
@@ -9,7 +9,9 @@
 .frame {
  display: flex;
  justify-content: center;
-  padding: 6px 24px 10px;
+  /* Sides = clearance + 16px: the card lands on the shared content width
+     (input card - 32) at every viewport. */
+  padding: 6px calc(var(--dsh-composer-side-clearance) + 16px) 10px;
 }

 .card {
@@ -17,7 +19,7 @@
  overflow: hidden;
  flex-direction: column;
  width: 100%;
-  max-width: 776px;
+  max-width: var(--dsh-chat-content-width);
  /* Composer seat sits in a fixed-height conversation column (overflow
     hidden): cap the card against the viewport and scroll the plan, so the
     strip and the decision row stay reachable on a long plan. */
@@ -93,11 +95,19 @@
  gap: 8px;
 }

-@media (max-width: 720px) {
-  .frame {
-    padding: 6px 10px 10px;
-  }
+/* The discuss verb stays a quiet text button beside the two decision
+   capsules: 14px glyph against the 14px label with a slightly wider gap, so
+   the icon reads as a prefix rather than a peer-sized control. */
+.discuss {
+  gap: 6px;
+  color: var(--dsw-alias-label-secondary);
+}

+.discuss:hover:not(:disabled) {
+  color: var(--dsw-alias-label-primary);
+}
+
+@media (max-width: 720px) {
  .card {
    border-radius: 16px;
  }
@@ -73,21 +73,21 @@ export function PlanReviewPanel({ pending, review, t }: PlanReviewPanelProps) {
          <div className={css.feedback} role="status">{error}</div>
          <div className={css.actions}>
            <Button
-              size="sm" variant="ghost" icon={<IconEditOutline16 />}
+              variant="ghost" className={css.discuss} icon={<IconEditOutline16 size={14} />}
              disabled={busy} onClick={() => { settle(() => pending.cancel()) }}
            >
              {t('plan.discuss')}
            </Button>
            {decline !== undefined && (
              <Button
-                size="sm" variant="outline" {...tooltip(decline.description)}
+                variant="outline" {...tooltip(decline.description)}
                disabled={busy} onClick={() => { decide(decline.label) }}
              >
                {t('plan.decline')}
              </Button>
            )}
            <Button
-              size="sm" variant="primary" {...tooltip(review.approve.description)}
+              variant="primary" {...tooltip(review.approve.description)}
              disabled={busy} onClick={() => { decide(review.approve.label) }}
            >
              {t('plan.approve')}
@@ -1,9 +1,10 @@
-/* The takeover seats where the input card sits, so the frame mirrors the
-   InputBar geometry (side pad 32, card cap 800) to keep both edges flush. */
+/* The takeover seats where the input card sits, centered on the InputBar
+   axis at the shared content width (input card - 32): sides = clearance +
+   16px so the relation also holds on narrow viewports. */
 .frame {
  display: flex;
  justify-content: center;
-  padding: 6px 32px 10px;
+  padding: 6px calc(var(--dsh-composer-side-clearance) + 16px) 10px;
 }

 /* Figma Input 973:36348 body over the 1019:36938 header: no banner strip —
@@ -12,7 +13,7 @@
  display: flex;
  flex-direction: column;
  width: 100%;
-  max-width: 800px;
+  max-width: var(--dsh-chat-content-width);
  /* Composer seat sits in a fixed-height conversation column (overflow
     hidden): cap the card against the viewport and scroll the option list
     so header and footer actions stay reachable on long batches. */
@@ -366,10 +367,6 @@
 }

@media (max-width: 720px) {
-  .frame {
-    padding: 6px 10px 10px;
-  }
-
  .card {
    border-radius: 16px;
  }
@@ -16,6 +16,10 @@
  background: var(--dsw-specific-sidebar-fill);
  color: var(--dsw-alias-label-primary);
  font-size: 14px;
+  /* The sidebar is elevated above the conversation surface, so a revealed
+     scrollbar uses the l2 pair. .quietBars hides it without changing layout. */
+  --dsh-scrollbar-thumb: var(--dsw-alias-scrollbar-bg-l2);
+  --dsh-scrollbar-thumb-hover: var(--dsw-alias-scrollbar-hover-l2);
 }

 /* Rail geometry (figma rail spec): 36x36 control boxes centered in the 56px
@@ -141,7 +141,7 @@ export function SidebarRoot({
        )}
        {/* Rail resting state is the whale mark; hovering swaps in the panel
            icon (the expand affordance, figma sidebar-hover flow). */}
-        <Tooltip label={t('toggle.open')} disabled={wide}>
+        <Tooltip label={collapsed ? t('toggle.open') : t('toggle.collapse')} delayMs={500}>
          <button
            type="button"
            className={clsx(css.iconButton, css.toggle)}
@@ -155,7 +155,8 @@ export function SidebarRoot({
        </Tooltip>
      </div>

-      <Tooltip label={t('session.new.label')} disabled={wide}>
+      {/* Expanded, the button carries its own label — tooltip only on the rail. */}
+      <Tooltip label={t('session.new.label')} delayMs={500} disabled={wide}>
        <button
          type="button"
          className={css.newSession}
@@ -9,8 +9,11 @@
  bottom: calc(100% + 4px);
  left: 0;
  z-index: 100;
-  min-width: 260px;
-  max-width: 537px;
+  min-width: min(260px, 100%);
+  /* 537 is the design cap; the 100% clamp keeps the menu inside the composer
+     card when a narrow viewport shrinks the card below the cap (the overlay
+     anchor is exactly the card's width). */
+  max-width: min(537px, 100%);
  /* Height cap: the 320px design maximum, clamped at runtime to the space
   * above the composer (inline max-height set in MenuView.tsx). */
  max-height: 320px;
@@ -228,7 +228,9 @@
    - var(--dsh-session-list-scrollbar-width)
    - var(--dsh-session-list-scrollbar-offset)
  );
-  padding-bottom: 12px;
+  /* Clears the 72px bottom fade overlay: at scroll end the last row sits
+     above the gradient instead of under it. */
+  padding-bottom: 48px;
  scrollbar-gutter: stable;
 }

@@ -78,14 +78,16 @@ function GroupByMenu({ groupBy, onPick, t }: {
      // be cut off at the header's bounds.
      portal
      anchor={(
-        <button
-          type="button"
-          className={clsx(css.iconButton, css.wide)}
-          aria-label={t('groupBy.label')}
-          onClick={() => { setOpen(v => !v) }}
-        >
-          <IconPersonalizationOutline16 />
-        </button>
+        <Tooltip label={t('groupBy.label')} side="bottom" delayMs={500}>
+          <button
+            type="button"
+            className={clsx(css.iconButton, css.wide)}
+            aria-label={t('groupBy.label')}
+            onClick={() => { setOpen(v => !v) }}
+          >
+            <IconPersonalizationOutline16 />
+          </button>
+        </Tooltip>
      )}
    />
  )
@@ -550,7 +552,7 @@ export function WorkspaceBrowser({
            picking affordance has nothing to offer here: the region hides the
            button rather than leaving a dead one in the header. */}
        {directoryFlowAvailable && (
-          <Tooltip label={t('workspace.add')} disabled={wide}>
+          <Tooltip label={t('workspace.add')} side="bottom" delayMs={500}>
            <button
              ref={wsPlusRef}
              type="button"
@@ -388,6 +388,10 @@ export const SERVICE_API: readonly ServiceApiEntry[] = [
        signature: 'register(route: WebRoute): () => void',
        jsDoc: '/**\n * Register a named route. Duplicate (kind, path) throws — route patterns are\n * a composition-level contract, so a collision is a misconfiguration.\n * @param route - kind, path, and the owning handler.\n * @returns the disposer removing the route.\n */',
      },
+      {
+        signature: 'registerUpgrade(route: WebUpgradeRoute): () => void',
+        jsDoc: '/**\n * Register an exact-path HTTP upgrade route. Duplicate paths throw because\n * one socket can have only one protocol owner.\n * @param route - pathname and handler owning negotiation plus socket use.\n * @returns the disposer removing the route.\n */',
+      },
      {
        signature: 'tapIndex(transform: (html: string) => string): () => void',
        jsDoc: '/**\n * Register an index.html transform, applied to every index response in\n * registration order.\n * @param transform - pure html-to-html function.\n * @returns the disposer removing the transform.\n */',
@@ -3129,6 +3133,10 @@ export const TYPE_API: readonly TypeApiEntry[] = [
    name: 'WebSource',
    declaration: 'export interface WebSource {\n    url: string;\n    title?: string;\n    snippet?: string;\n    publishedAt?: string;\n}',
  },
+  {
+    name: 'WebUpgradeRoute',
+    declaration: 'export interface WebUpgradeRoute {\n    path: string;\n    handler: (req: IncomingMessage, socket: Duplex, head: Buffer) => void | Promise<void>;\n}',
+  },
  {
    name: 'WorkflowMeta',
    declaration: 'export interface WorkflowMeta {\n    name: string;\n    description: string;\n    whenToUse?: string;\n    phases?: WorkflowPhase[];\n}',
@@ -1,5 +1,5 @@
 /**
- * events domain contract: signatures and frame unions for the two SSE
+ * events domain contract: signatures and frame unions for the two logical
 * streams. Four-quadrant: streams yield the narrow form `RpcRequest<Frame>` (server-request
 * view) — rpcId must be exposed to the business layer, because responses to answerable frames
 * (approval/question requested) echo it; for pure pushes it identifies that one push.
@@ -42,7 +42,7 @@ export interface QueuedInboxItem {
  message: Message
 }

-/** Streaming face of the contract: the two SSE stream openers (mux + host). */
+/** Streaming face of the contract: the two logical stream openers (mux + host). */
 export interface EventsApi {
  /**
   * All-session aggregated mux stream. On open, emits a subscribed control frame for every
@@ -1,7 +1,7 @@
 /**
 * apiproxy contract-layer barrel. api/ has zero Node dependencies and is
- * importable from the browser; the TS interfaces are the authoritative contract, HTTP/SSE are
- * merely physical channels (four-quadrant message model).
+ * importable from the browser; the TS interfaces are the authoritative contract, while HTTP,
+ * WebSocket, and in-process SSE are merely physical channels (four-quadrant message model).
 */

 import type { SessionsApi } from './sessions.ts'
@@ -1,7 +1,7 @@
 /**
- * Four-quadrant RPC message model. Channels and messages are
- * decoupled: HTTP is the client→server physical channel, SSE the server→client one; logical
- * messages are channel-independent, and the wire full form is a four-member discriminated union.
+ * Four-quadrant RPC message model. Channels and messages are decoupled: HTTP,
+ * WebSocket, and in-process SSE are physical carriers, while logical messages
+ * are channel-independent and form a four-member discriminated union.
 * api/ contract layer: zero Node dependencies, importable from the browser.
 */

@@ -147,7 +147,7 @@ export interface ServerResponse {
 }

 /**
- * Message initiated by the server (wire carrier: SSE frame). Answerable interactions
+ * Message initiated by the server (wire carrier: downstream stream frame). Answerable interactions
 * (approval/question requested — stable rpcId, reused on replay) and pure pushes
 * (session/event etc. — rpcId identifies that one push) share this shape; whether a
 * response is expected is determined statically by method (a strict dichotomy, no third kind).
@@ -1,6 +1,6 @@
 /**
 * Client side of the fetch carrier. AbstractApiClient holds every protocol invariant: rpcId minting,
- * four-quadrant envelope wrap/unwrap, zod parsing, SSE frame decoding, and the payload-direct
+ * four-quadrant envelope wrap/unwrap, zod parsing, in-process SSE frame decoding, and the payload-direct
 * IApiClient domain methods (business code never mints). Platform differences ride two aspects:
 * abstract doFetch (transport) + overridable onEnvelope (tap). ApiProxy (the impl face) is untouched.
 */
@@ -69,8 +69,8 @@ import {
 * Bounded calls merge it with the instance timeout via AbortSignal.any; user-paced calls
 * carry only that external signal. In both cases the signal rides beside the request, never
 * on the wire, like the stream signatures.
- * Stream methods accept an optional onOpen callback: it fires once the SSE transport is
- * readable (response headers received, before any frame) — the "stream established" signal
+ * Stream methods accept an optional onOpen callback: it fires once the physical transport is
+ * readable (before any frame) — the "stream established" signal
 * connection controllers need for the readiness handshake. Generators are lazy, so the
 * underlying fetch (and therefore onOpen) only happens once iteration starts.
 * Relationship: ApiProxy is the narrow-form signature contract the impl side implements;
@@ -5,7 +5,7 @@
 * platform subclasses on the client side), and the host-side implementation
 * (api-proxy.ts: createApiProxy + the ApiProxyService gateway plugin providing
 * `ctx.apiProxy`). Transport-agnostic by design: this package registers no
- * routes — carriers (HTTP today, IPC later) wrap `ctx.apiProxy` themselves.
+ * routes — physical carriers wrap `ctx.apiProxy` themselves.
 */

 import { resolve } from 'node:path'
@@ -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/host/webserver/README.md
-README.md: c3c7b222683bc7731a6c21f2fffd325225099bab
-README.zh.md: e6976f11f1502b6ac31306b1b57f717206d34b50
+README.md: 196f350d87c5322cd3e9cda6e40587d35acd08c4
+README.zh.md: 0ae0470eab0aae2f6b539404621c611d95827977
@@ -2,17 +2,17 @@

 English | [中文](README.zh.md)

-Plain HTTP route-registration plugin (default-exported `HttpServerService`, config `{host, port, distIndex}`): a `node:http` server that listens on activation and provides `ctx.httpServer` — `register(route)` adds a named `exact`/`prefix` route (duplicate `(kind, path)` throws: route patterns are a composition-level contract, so a collision is a misconfiguration; the returned disposer removes the route), `tapIndex(transform)` adds an index.html transform applied in registration order, `port` reads the listening port (the OS-assigned value when `port` is 0), and `host` reads the configured bind host (composition-time facts other plugins adapt to, e.g. the directory-picker chooser). The match order is fixed — exact over the whole table, then longest prefix, then the static dist fallback with the locked semantics: traversal outside the dist root is 403, any miss falls back to `index.html` with HTTP 200 (SPA routing), unknown extensions ship as octet-stream, non-GET/HEAD is 405. Registration order carries no request-facing semantics.
+Web HTTP and upgrade-route registration plugin (default-exported `HttpServerService`, config `{host, port, distIndex}`): a `node:http` server that listens on activation and provides `ctx.httpServer`. `register(route)` adds a named `exact`/`prefix` HTTP route; `registerUpgrade(route)` adds an upgrade route for an exact pathname. A duplicate path within either table throws because route patterns are a composition-level contract and a collision is a misconfiguration; both methods return a disposer that removes the registration. `tapIndex(transform)` adds an index.html transform applied in registration order, `port` reads the listening port (the OS-assigned value when `port` is 0), and `host` reads the configured bind host (composition-time facts other plugins adapt to, e.g. the directory-picker chooser). HTTP match order is fixed: exact over the whole table, then longest prefix, then the static dist fallback with the locked semantics: traversal outside the dist root is 403, any miss falls back to `index.html` with HTTP 200 (SPA routing), unknown extensions ship as octet-stream, and non-GET/HEAD is 405. Upgrades match exactly and unmatched connections are closed; registration order carries no request-facing semantics.

-The package knows no harness concepts: the `/api` bridge is the connection plugin's route, plugin bundles and the HMR event stream are the modules/hmr plugins' routes. `host` accepts only `127.0.0.1` (default posture) and `0.0.0.0` (deliberate network exposure); `distIndex` is an assembly fact the composing app resolves and injects, never self-resolved (dist location is workspace knowledge of the app). Web (browser) shape only — Electron loads dist over `file://` and carries fetch over an IPC bridge, not this server. This package never prints; the URL line belongs to the shell.
+The package knows no harness concepts: the `/api` HTTP bridge and downlink WebSockets are routes owned by the connection plugin, while plugin bundles and the HMR event stream are routes owned by the modules/hmr plugins. The upgrade handler owns the protocol handshake and connection contents; the webserver only delivers the raw socket and request. `host` accepts only `127.0.0.1` (default posture) and `0.0.0.0` (deliberate network exposure); `distIndex` is an assembly fact the composing app resolves and injects, never self-resolved (dist location is workspace knowledge of the app). Web (browser) shape only — Electron loads dist over `file://` and carries fetch over an IPC bridge, not this server. This package never prints; the URL line belongs to the shell.

-A listen failure (EADDRINUSE…) throws out of activation and rejects Loader composition with the bind diagnostic; the failed candidate fiber is disposed. A request whose handling throws (a malformed %-escape hitting `decodeURIComponent`, a client dropping mid-body) is answered 400 — or the socket destroyed when headers are already out — and logged as a warning; it never exits the process. Disposal pairs `close()` with `closeAllConnections()` because held-open responses (SSE) never end on their own.
+A listen failure (EADDRINUSE…) throws out of activation and rejects Loader composition with the bind diagnostic; the failed candidate fiber is disposed. An HTTP request whose handling throws (a malformed %-escape hitting `decodeURIComponent`, a client dropping mid-body) is answered 400 — or the socket destroyed when headers are already out — and logged as a warning; it never exits the process. An upgrade-handler exception or upgraded-socket transport error is logged as a warning and destroys its socket. Disposal starts `close()` and `closeAllConnections()`, destroys every tracked upgraded socket, and returns only after the HTTP server and those sockets have closed.

 In development, the client-plugin registry synchronously captures each built bundle's stat baseline before it returns, then polls those baselines and re-hashes changed content. Each rescan stages its candidate table, graph, and watch map before publishing them, so a baseline failure preserves the prior graph. An immediate rebuild therefore cannot disappear into an asynchronously established watch baseline; a rename window marks the path dirty, retains the last successful baseline, and forces a re-hash when the bundle reappears even with identical metadata.

 ## Model Experience

-None, as the package is a pure HTTP carrier between the browser and the routes other plugins register; nothing here reaches a model request.
+None, as the package is a Web carrier between the browser and the HTTP/upgrade routes other plugins register; nothing here reaches a model request.

 #### KV Cache effect

--- a/Show More
+++ b/Show More