Merge remote-tracking branch 'origin/master' into worktree/chat-ui-polish

# Conflicts:
#	packages/client/ui-conversation/README.i18n.yaml
#	packages/client/ui-conversation/src/client/chat/MessageItem.tsx
#	packages/client/ui-conversation/tests/chat-branch-tails.spec.tsx

.agents/notes/implemented/feature/2026-07-30-web-context-injection-disclosure.i18n.yaml

@@ -0,0 +1,6 @@
+# Bilingual-pair consistency record (docs/i18n/README.md): the git blob hash of each
+# side as of the last confirmed-consistent state. Both languages carry equal authority;
+# after editing either side, bring the other along and re-record with:
+#   pnpm run verify-translation-pairing --write .agents/notes/implemented/feature/2026-07-30-web-context-injection-disclosure.md
+2026-07-30-web-context-injection-disclosure.md: 84c3259f3f226e501a671cc55cacf7d7d96f61fb
+2026-07-30-web-context-injection-disclosure.zh.md: 4d77e06e27badb02fb73ca2ea2a739b33c5804de

.agents/notes/implemented/feature/2026-07-30-web-context-injection-disclosure.md

@@ -0,0 +1,33 @@
+# Agent Note: Web context injection disclosure
+
+Status: implemented
+
+English | [中文](2026-07-30-web-context-injection-disclosure.zh.md)
+
+## Problem
+
+The Web conversation rendered every logged non-user message through the generic `JsonBlock`. That presentation used a textual triangle, compact label typography, a bordered JSON panel, and unrelated spacing, so context injection did not match the Tool calls disclosure shown in the product design. Restyling the generic primitive would also change unknown events and attachment fallbacks.
+
+## Decision
+
+`MessageItem` routes context nodes to `ContextInjectionRow`. The row starts collapsed, names the presentation `上下文注入`, uses the existing browse glyph, and exposes the whole 24px header as one pointer and keyboard disclosure target. Its expanded body begins 4px below the header at the shared 22px content indent and renders the design's 141px scrollport with 8px radius, code-block background, 11/16 code text, and no border.
+
+`ContextInjectionRow` serializes both logged `content` and `source` into one inline JSON value, preserving provenance alongside model-visible material. The display remains bounded by the existing 20,000-character truncation policy. It changes no session event, runtime fold, or context-producing plugin.
+
+The package-internal `DisclosureRow` owns the header geometry, icon-to-chevron transition, controlled open state, and Enter/Space behavior shared by context and `ToolRow`. `ToolRow` remains the semantic owner of tool state, summaries, file links, and expanded tool bodies. Context does not enter the keyed toolview slot and gains no context-specific slot while all context sources share one presentation.
+
+## Verification
+
+Conversation component tests pin the collapsed default, browse glyph, whole-row pointer and keyboard toggles, inline JSON shape, truncation, and unchanged generic unknown-event rendering. The keyless assembled-Web history scenario injects context through the real Agent API, records the collapsed row in its ARIA golden, and measures the design's icon, header, indent, gap, scrollport, padding, radius, typography, color, and overflow in Chromium.
+
+## Alternatives considered
+
+**Restyle `JsonBlock` globally.** Unknown surface events and miscellaneous content blocks use that primitive for a separate generic fallback, so a global visual change would couple unrelated presentations.
+
+**Render context as a read tool.** Reusing `ToolRow` directly would add false tool semantics, state and keyed dispatch to a logged non-user message.
+
+**Add a keyed context-view slot.** Every current context source uses the same title and provenance body. A registration seam has no present consumer and can be added without changing the row if distinct source-owned presentations emerge.
+
+## Consequences
+
+Context injection matches the Tool calls visual language without changing its durable meaning. The shared disclosure header prevents the two rows from drifting, while the dedicated context body and generic `JsonBlock` remain independently evolvable. The fixed-height body trades automatic expansion for a stable transcript rhythm and requires scrolling to inspect long injected instructions.

.agents/notes/implemented/feature/2026-07-30-web-context-injection-disclosure.zh.md

@@ -0,0 +1,33 @@
+# Agent Note: Web 上下文注入展开项
+
+Status: implemented
+
+[English](2026-07-30-web-context-injection-disclosure.md) | 中文
+
+## 问题
+
+Web 会话原本通过通用 `JsonBlock` 渲染每条已记录的非用户消息。这种呈现使用文本三角符号、紧凑的标签字体、有边框的 JSON 面板和另一套间距，因此上下文注入与产品设计中的 Tool calls 展开项不一致。修改通用原语的样式还会影响未知事件和附件的兜底呈现。
+
+## 决策
+
+`MessageItem` 将上下文节点路由至 `ContextInjectionRow`。该行初始折叠，标题为 `上下文注入`，使用现有的浏览图标，并使整个 24px 标题栏成为可通过指针和键盘操作的展开目标。其展开主体从标题栏下方 4px 处开始，与共用的 22px 内容缩进对齐，并渲染设计规定的 141px 滚动区；滚动区采用 8px 圆角、代码块背景、11/16 代码文本且无边框。
+
+`ContextInjectionRow` 将已记录的 `content` 和 `source` 序列化为一个内联 JSON 值，在模型可见内容旁保留来源信息。显示内容继续受现有的 20,000 字符截断策略约束。该变更不修改任何会话事件、运行时折叠逻辑或上下文生成插件。
+
+包内部的 `DisclosureRow` 负责上下文行和 `ToolRow` 共用的标题栏几何、图标至折叠箭头的过渡、受控打开状态，以及 Enter／Space 操作。`ToolRow` 仍是工具状态、摘要、文件链接和展开后工具主体的语义 owner。所有上下文来源共用同一套呈现；上下文不会进入键控 toolview slot，也不会获得上下文专用 slot。
+
+## 验证
+
+会话组件测试固定验证初始折叠状态、浏览图标、整行的指针与键盘切换、内联 JSON 形状、截断，以及通用未知事件渲染保持不变。无密钥的组装后 Web 历史场景通过真实 Agent API 注入上下文，在 ARIA 预期输出中记录折叠行，并在 Chromium 中测量设计规定的图标、标题栏、缩进、间隙、滚动区、内边距、圆角、字体排版、颜色和溢出行为。
+
+## 考虑过的替代方案
+
+**全局重新设置 `JsonBlock` 样式。** 之所以否决：未知 surface 事件和其他内容块使用该原语作为独立的通用兜底呈现，全局视觉变更会把无关的呈现耦合起来。
+
+**将上下文渲染为 read 工具。** 之所以否决：直接复用 `ToolRow` 会为已记录的非用户消息添加错误的工具语义、状态和键控分发。
+
+**新增键控 context-view slot。** 之所以否决：当前所有上下文来源都使用相同的标题和来源信息主体，注册 seam 暂无消费方。如果将来出现由不同来源拥有的呈现，仍可在不更改该行的情况下添加此 seam。
+
+## 后果
+
+上下文注入与 Tool calls 采用一致的视觉语言，同时不改变其持久保存的语义。共用的展开项标题栏可以防止这两种行逐渐偏离，而专用的上下文主体与通用 `JsonBlock` 仍可独立演进。固定高度的主体以无法随内容自动增高为代价，为 transcript（文本记录）维持稳定的排版节奏；查看较长的注入指令时必须滚动。

apps/web/tests/seeded-history.e2e.ts

@@ -12,6 +12,8 @@ import { fileURLToPath } from 'node:url'
 import type { Browser, Page } from 'playwright'
 import { chromium } from 'playwright'
 import { afterAll, beforeAll, describe, expect, it, onTestFailed } from 'vitest'
+import { createUserMessage } from '@deepseek-ai/dsh-llm'
+import { SessionId } from '@deepseek-ai/dsh-session'
 import { join } from 'node:path'
 import {
   assertFixtureInventory, captureStableAria, compareOrRefreshGolden, fixtureUserPrompts,
@@ -117,6 +119,30 @@ describe('web e2e: seeded history renders through cold resume', () => {
     const toolRows = page.locator('[data-variant], [data-sample]')
     await expect.poll(() => toolRows.count(), { timeout: 10_000 }).toBeGreaterThanOrEqual(2)
     expect(await page.getByText('a.txt', { exact: false }).count()).toBeGreaterThan(0)
+
+    const agent = scaffold.ctx.agents.get(SessionId(SEED_ID))
+    if (agent === undefined) throw new Error('seeded session did not attach an agent')
+    agent.inject(createUserMessage({
+      content: [{
+        type: 'text',
+        text: '<system-reminder>\n'
+          + 'The following workspace instructions may be relevant to your work. '
+          + 'Use them as guidance when applicable.\n\n'
+          + Array.from({ length: 24 }, (_, index) => `Instruction ${index + 1}: preserve the logged context contract.`).join('\n')
+          + '\n</system-reminder>',
+      }],
+      source: {
+        kind: 'workspace-instructions',
+        baseline: true,
+        changes: [{
+          action: 'set',
+          scope: '.\u0000AGENTS.md',
+          path: 'AGENTS.md',
+          digest: 'context-injection-browser-snapshot',
+        }],
+      },
+    }))
+    await page.getByRole('button', { name: '上下文注入' }).waitFor({ timeout: 10_000 })
   }, 60_000)
 
   it.skipIf(MODE === 'record')('matches the historical conversation aria golden', async () => {
@@ -132,6 +158,58 @@ describe('web e2e: seeded history renders through cold resume', () => {
     await compareOrRefreshGolden(UI_EXPECTED, snapshot, MODE)
   })
 
+  it.skipIf(MODE === 'record')('matches the Figma context disclosure geometry', async () => {
+    onTestFailed(() => saveFailureShot(page, 'web-e2e-context-injection'))
+    const disclosure = page.getByRole('button', { name: '上下文注入' })
+    expect(await disclosure.getAttribute('aria-expanded')).toBe('false')
+    const collapsedIcon = disclosure.locator('svg').first()
+    const collapsedIconBox = await collapsedIcon.boundingBox()
+    expect(collapsedIconBox?.width).toBe(14)
+    expect(collapsedIconBox?.height).toBe(14)
+
+    await disclosure.click()
+    await expect.poll(() => disclosure.getAttribute('aria-expanded')).toBe('true')
+    const body = page.locator('[data-context-injection-body]')
+    await body.waitFor({ timeout: 5_000 })
+    const headerBox = await disclosure.boundingBox()
+    const bodyBox = await body.boundingBox()
+    if (headerBox === null || bodyBox === null) throw new Error('context disclosure geometry is not measurable')
+    expect(headerBox.height).toBe(24)
+    expect(bodyBox.x - headerBox.x).toBe(22)
+    expect(bodyBox.y - headerBox.y - headerBox.height).toBe(4)
+    expect(bodyBox.height).toBe(141)
+
+    const style = await body.evaluate((element) => {
+      const computed = getComputedStyle(element)
+      return {
+        backgroundColor: computed.backgroundColor,
+        borderRadius: computed.borderRadius,
+        color: computed.color,
+        fontSize: computed.fontSize,
+        lineHeight: computed.lineHeight,
+        padding: [
+          computed.paddingTop,
+          computed.paddingRight,
+          computed.paddingBottom,
+          computed.paddingLeft,
+        ],
+        scrolls: element.scrollHeight > element.clientHeight,
+      }
+    })
+    expect(style).toEqual({
+      backgroundColor: 'rgb(249, 250, 251)',
+      borderRadius: '8px',
+      color: 'rgb(129, 133, 140)',
+      fontSize: '11px',
+      lineHeight: '16px',
+      padding: ['10px', '16px', '12px', '12px'],
+      scrolls: true,
+    })
+
+    await disclosure.click()
+    await expect.poll(() => disclosure.getAttribute('aria-expanded')).toBe('false')
+  })
+
   it.skipIf(MODE === 'record')('file-path tool rows rebuilt from the cold log stay details-inert', async () => {
     onTestFailed(() => saveFailureShot(page, 'web-e2e-seeded-toolrow'))
     // Interaction over cold-resumed history: read summaries are host-open

apps/web/tests/snapshots/seeded-history/ui.expected.md

@@ -31,6 +31,10 @@
 - button "在新对话中分支":
   - img
 - text: {{clock}}
+- button "上下文注入":
+  - img
+  - img
+  - text: 上下文注入
 - textbox "Message the agent"
 - button "Add attachment":
   - img

packages/client/ui-conversation/README.i18n.yaml

@@ -2,5 +2,5 @@
 # side as of the last confirmed-consistent state. Both languages carry equal authority;
 # after editing either side, bring the other along and re-record with:
 #   pnpm run verify-translation-pairing --write packages/client/ui-conversation/README.md
-README.md: bf24994e6d6103755e776cf5b694d16d8d6cc2fa
-README.zh.md: b43c108b973b5d29f78210e33323bacc80c6148f
+README.md: 50bf807fd8cdf8532fbf775a0480c6b5eb3276be
+README.zh.md: b9574425586478705c4949937fa8090a979a8d57

packages/client/ui-conversation/README.md

@@ -2,7 +2,7 @@
 
 English | [中文](README.zh.md)
 
-Conversation domain: skeleton (header/tabs/composer/empty state), chat view (grouped step-summary flow, streaming tail isolation, text-icon context disclosures, an animated left-to-right gradient `Deep diving...` turn status, per-tool row slot with a bash sample registrant and the todo row), composer dock (session stats sticky with the input), input dock (hairline-separated queue rows plus the todo plan strip), minimal details panel, scope-addressed ConversationService. Contract: api-contracts v3 §7 plus the slot terminal design (store seat / props shares).
+Conversation domain: skeleton (header/tabs/composer/empty state), chat view (grouped step-summary flow, streaming tail isolation, an animated left-to-right gradient `Deep diving...` turn status, per-tool row slot with a bash sample registrant and the todo row), composer dock (session stats sticky with the input), input dock (hairline-separated queue rows plus the todo plan strip), minimal details panel, scope-addressed ConversationService. Contract: api-contracts v3 §7 plus the slot terminal design (store seat / props shares).
 
 The resident conversation shell survives no-session and session transitions. Without a current session it renders a disabled input bar; its root-scoped `conversation.hero.workspace` slot hosts the Workspace picker. Selecting a Workspace connects or reuses its Host-owned blank session and opens that session without replacing the shell. Blank sessions render the same composer body as active sessions, while the InputHub carries drafts across Workspace switches and mirrors them into the session store. In the active phase the session header occupies the top as ordinary column chrome; beneath it a scrollport (`data-conversation-scroll`) holds the flowing views and the sticky composer stack (stats dock + input docks + bar). Wheel over the textarea chains: the capped draft scrolls locally until its edge, then forwards to that host.
 
@@ -10,6 +10,8 @@ The view ring IS a slot: the conversation registration declares the `'conversati
 
 Approvals take over the composer through the chain this package declares: `ApprovalPanel` registers as a selector-routed `'conversation.composer'` entry (the ui-question pattern) and occupies the composer in place of the InputBar while an approval wait is pending (amber strip, justification headline, paired command line from the running call's args, one-shot refuse/allow). The `PendingApproval` domain face in `contract/slots.ts` owns the wire encoding — the `ApprovalResponsePayload` value with the audit correlation — over the runtime's `PendingWait` carrier; the broadcast `approval/resolved` frame settles the wait and restores the composer. The sidebar mirrors the blocked state through the manager-tracked `waitingApproval` list bit (lit for uninstantiated sessions too), which outranks the running ring until the question resolves. Pending waits leave the message flow entirely: questions (ui-question) and approvals (ApprovalPanel) both answer through the composer takeover, so no display-only placeholder card remains. The composer's bottom-row Access seat mounts `PermissionSelect`, fed by the host-computed `permissions` projection through the standard-kit `useProjection` (key absence hides the chip); the chip opens a Menu-primitive dropdown whose kebab-case preset names render as title-case labels (the `/permission` popup's display transform twin), and a pick submits the `/permission <preset>` command line through the bar's injected `command` callback.
 
+Logged non-user messages render as a default-collapsed `上下文注入` disclosure. It shares the Tool calls header geometry and interaction with `ToolRow` through the package-internal `DisclosureRow`, while retaining context semantics: the expanded 141px scrollport shows bounded inline JSON for both `content` and `source`, and no tool state, summary, or keyed toolview dispatch is synthesized ([decision](../../../.agents/notes/implemented/feature/2026-07-30-web-context-injection-disclosure.md)).
+
 Generic tool rows classify the built-in bash, read, search, write, edit, and run_code names into dedicated visual variants. The filesystem variants render the edit icon and a path summary; that path is a hover-underline link that opens the file with the host OS default application (`host.openPath`, relative paths resolve against the session cwd). Tool rows are not whole-row click targets and do not open the details panel. The code variant summarizes with the model-authored `description` and expands to the program itself; its logged sub-dispatches render as always-visible nested rows through the SAME keyed toolview hole (custom registrations and the GenericToolCard fallback apply to sub-rows unchanged). Cordis lifecycle tools reuse those generic variants while presenting `Inspect`, `Mount temporary Plugin`, and `Unmount temporary Plugin` with a shared Cordis accent; mount keeps the code variant's expandable source rendering.
 
 A tool call declaring the `terminal` render intent renders its command output inline, at both conversation render sites, through ui-primitives' `TerminalBlock`. `contract/terminal-card-model.ts` is the single derivation from the snapshot's `callView`/`resultView` pair, so the sites cannot disagree about a command, its cwd, or its exit status; it yields null — the generic path — for any other card tag, including one this client version does not know. Both sites therefore also show the card's run-state dot, which is the same `StateDot` semantic a tool row's leading icon carries, so a row and its own card always agree about one command's state. A multi-line command gets one prompt row per line, with the dot marking the call once on the first row — the exit status is the whole call's, so a dot per line would claim a per-line outcome bash does not report. The keyed `BashRow` carries the card resident below its summary row; since tool rows are no longer details-panel click targets, the card's copy and expand controls are the row's only interactions. The render-site fallback row keeps the card behind its existing expand control. Rows cap at `CHAT_TERMINAL_MAX_LINES` (8) against the panel's 16, which is what keeps a summary surface bounded — the panel stays the single-call reading surface. Inline output is licensed for this intent alone; a generic tool's content remains panel-only ([decision](../../../.agents/notes/implemented/feature/2026-07-28-web-terminal-card.md)).

packages/client/ui-conversation/README.zh.md

@@ -2,12 +2,14 @@
 
 [English](README.md) | 中文
 
-会话领域：骨架（标题栏／标签页／编辑器／空状态）、聊天视图（分组步骤摘要流、流式尾部隔离、文本图标式上下文展开区、带从左到右动态渐变的 `Deep diving...` 轮次状态、逐工具行 slot 及一个 bash 示例注册方与 todo 行）、编辑器 dock（与输入区一同 sticky 的会话统计行）、输入区 dock（带发丝分界线的队列行加 todo 计划条）、最小详情面板、按 scope 寻址的 ConversationService。契约：api-contracts v3 §7 加 slot 终端设计（store seat／props share）。
+会话领域：骨架（标题栏／标签页／编辑器／空状态）、聊天视图（分组步骤摘要流、流式尾部隔离、带从左到右动态渐变的 `Deep diving...` 轮次状态、逐工具行 slot 及一个 bash 示例注册方与 todo 行）、编辑器 dock（与输入区一同 sticky 的会话统计行）、输入区 dock（带发丝分界线的队列行加 todo 计划条）、最小详情面板、按 scope 寻址的 ConversationService。契约：api-contracts v3 §7 加 slot 终端设计（store seat／props share）。
 
 常驻会话壳会跨无会话与会话状态切换而保留。没有当前会话时，它会渲染禁用输入栏；其根作用域的 `conversation.hero.workspace` slot 承载 Workspace 选择器。选择 Workspace 会连接或复用由 Host 拥有的空白会话，并在不替换会话壳的情况下打开该会话。空白会话与活跃会话渲染相同的输入区主体；InputHub 则在 Workspace 切换间携带草稿，并将草稿镜像到会话 store。活跃阶段会话标题栏以普通列 chrome 占据顶部；其下滚动容器（`data-conversation-scroll`）承载流动排版的各视图与 sticky 编辑器栈（统计 dock＋输入区 dock＋输入栏）。textarea 上的滚轮会链式处理：限高草稿先在本地滚动，到达边缘后再转交给该宿主。
 
 视图环本身就是 slot：会话注册声明 `'conversation.view'` 列表 slot（Session scope），并将其列在 `children` 表中；ConversationRoot 通过 renderSlot share 渲染活跃配置项（`only: <active id>`）；视图标签页从环账本的注册选项（`id`／`order`／`label`）投影而来。聊天视图是该包自身的环配置项；其他插件（ui-trajectory）通过普通的 `ctx.slots.register` 贡献标签页。先前包内的视图注册表（`registerView`／`ViewEntry`／`ConversationViewMap` 及 chrome 附加表）已退役，逐视图 chrome 则被拆入视图组件自身。
 
+已记录的非用户消息渲染为默认折叠的 `上下文注入` 展开项。它通过包内部的 `DisclosureRow` 与 `ToolRow` 共享 Tool calls 标题栏的几何与交互，同时保留上下文语义：展开后的 141px 滚动区会以内联 JSON 的形式有界展示 `content` 和 `source`，且不会合成工具状态、摘要或键控 toolview 分发（[决策](../../../.agents/notes/implemented/feature/2026-07-30-web-context-injection-disclosure.md)）。
+
 通用工具行把内置的 bash、read、search、write、edit 和 run_code 名称归入专用视觉变体。文件系统变体会渲染 edit 图标和路径摘要；该路径是悬停下划线链接，点击后通过宿主操作系统的默认应用打开文件（`host.openPath`，相对路径相对会话 cwd 解析）。工具行不再是整行点击目标，也不会打开 details 面板。code 变体以模型撰写的 `description` 作摘要，展开后显示程序本身；其已记录的子调用经由同一个键控 toolview 空位渲染为始终可见的嵌套行（自定义注册和 GenericToolCard fallback 原样适用于子行）。Cordis 生命周期工具复用这些通用变体，同时以统一的 Cordis 强调色呈现 `Inspect`、`Mount temporary Plugin` 和 `Unmount temporary Plugin`；mount 行保留 code 变体的可展开源码渲染。
 
 声明 `terminal` 渲染意图的工具调用，会在两个对话渲染点上都通过 ui-primitives 的 `TerminalBlock` 内联渲染其命令输出。`contract/terminal-card-model.ts` 是从快照的 `callView`／`resultView` 对推导的唯一位置，因此两个渲染点不可能在命令、cwd 或退出状态上产生分歧；对任何其他 card 标签——包括当前客户端版本不认识的标签——它返回 null，落回通用路径。因此两个渲染点也都显示卡片的运行状态点，它与工具行行首图标承载同一套 `StateDot` 语义，所以一行与其自身的卡片对同一条命令的状态总是一致。多行命令的每一行各占一个提示行，状态点只在第一行为整次调用标记一次——退出状态属于整次调用，因此每行一枚就会声称一个 bash 并不报告的逐行结果。键控的 `BashRow` 把卡片常驻在摘要行下方；由于工具行已不再是详情面板的点击目标，卡片的复制与展开控件就是该行唯一的交互。渲染点兜底行则保持其既有的展开控件。行的上限是 `CHAT_TERMINAL_MAX_LINES`（8），面板为 16，正是这一点让摘要面保持有界——面板仍是单次调用的阅读面。内联输出只对该意图开放；通用工具的内容仍然只在面板中呈现（[决策](../../../.agents/notes/implemented/feature/2026-07-28-web-terminal-card.md)）。
@@ -20,7 +22,7 @@ todo 两个面就是在该形状上的两个注册项，都是普通注册方插
 
 逐 Session UI 状态中的选择与活跃视图位于已声明的聊天 store（`stores.ts` `createChatStore`）中；InputHub 拥有输入区状态机，并将草稿镜像到该 store 以便持久化。apply 将同一个 store handle 传给严格限定于会话的子树、聊天视图和详情注册，因此每个会话内共享一个实例，框架拥有其生命周期。组件保持纯粹：框架标准工具包提供 `useSession`／`sessionId`、全局 `useSessions`／`useWorkspaces`，以及输入状态机的 `useInput`／`inputActions`；store 表层与 inject factory 提供其余状态和回调。
 
-输入栏为 `'conversation.input.plan'`（位于本地 access 模式控件右侧）和 `'conversation.input.model'`（渲染在 pending 指示器与发送／停止按钮之前）声明会话作用域的单实例 seat，并为 overlay、dock、left 和 right 输入扩展声明列表 slot。各功能包拥有相应控件及其状态；ui-conversation 提供放置位置、`locked` owner prop 和标准 slot share。当 `plan` 投影的有效目标为 plan mode 时，InputBar 将文本框 placeholder 切换为 plan 任务措辞，经本包注册的 `command.hint` locale 命名空间本地化，并与已认领 `/plan` 命令的提示逐字共用同一份文案（经标准套件 `useProjection` 读取的 host 折叠值；owner 提供的 placeholder 优先）。另一个会话视图活跃时，待处理的 composer 接管仍保持挂载，使被阻塞的 agent（智能体）仍能收到回答；没有待处理交互时，活跃会话的 composer 归 Chat 所有。composer bar 坑位本身为 `session-maybe`：没有当前会话时，同一个 bar 以惰性态渲染（machine face 缺席、`disabled` owner prop），而不是换入一棵平行的 disabled 树，因此 textarea DOM 在选定 workspace 的切换中得以存活；严格会话作用域的控件 seat 在会话存在之前保持为空。
+输入栏为 `'conversation.input.plan'`（位于本地 access 模式控件右侧）和 `'conversation.input.model'`（渲染在 pending 指示器与发送／停止按钮之前）声明会话作用域的单实例 seat，并为 overlay、dock、left 和 right 输入扩展声明列表 slot。各功能包拥有相应控件及其状态；ui-conversation 提供放置位置、`locked` owner prop 和标准 slot share。当 `plan` 投影的有效目标为 plan mode 时，InputBar 将文本框 placeholder 切换为 plan 任务措辞，经本包注册的 `command.hint` locale 命名空间本地化，并与已认领 `/plan` 命令的提示逐字共用同一份文案（经标准套件 `useProjection` 读取的 host 折叠值；owner 提供的 placeholder 优先）。另一个会话视图活跃时，待处理的 composer 接管仍保持挂载，使被阻塞的 agent（智能体）仍能收到回答；没有待处理交互时，活跃会话的 composer 归 Chat 所有。composer bar slot 本身为 `session-maybe`：没有当前会话时，同一个 bar 以不可交互状态渲染（machine face 均缺席、`disabled` owner prop），而不是换入一棵平行的 disabled 树，因此选择 workspace 时 textarea DOM 不会被销毁；严格会话作用域的控件 seat 在会话存在之前保持为空。
 
 `src/client/` 按未来的包拆分组织：`contract/` 是唯一的跨领域共享表层（`slots.ts` slot 声明 + 组合后的 slot props，包括工具行契约、`views.ts` 共享原语、`tool-call-model.ts`）；`skeleton/`、`chat/` 和 `toolviews/`（示例注册方）领域目录只导入 contract 文件，彼此绝不导入；`apply.ts` 是唯一允许导入全部三个领域的组装点。`/client` 导出表层只包含契约：`apply`／`inject`、两个服务类和 `contract/` 类型家族；实现组件（骨架、聊天行）与 store factory 保持内部状态，只能通过 apply 的 slot 注册到达页面（测试通过 `./src/*` 子路径获取它们）。
 

packages/client/ui-conversation/src/client/chat/ContextInjectionRow.module.css

@@ -0,0 +1,29 @@
+/* Figma 10:2482: 24px Tool calls header, 4px gap, 141px clipped code block. */
+
+.root {
+  min-width: 0;
+}
+
+.root[data-open] {
+  padding-bottom: 4px;
+}
+
+.chevron {
+  color: var(--dsw-alias-label-secondary);
+}
+
+.body {
+  box-sizing: border-box;
+  width: calc(100% - 22px);
+  height: 141px;
+  margin: 4px 0 0 22px;
+  overflow: auto;
+  padding: 10px 16px 12px 12px;
+  border: none;
+  border-radius: 8px;
+  background: var(--dsw-alias-markdown-code-block);
+  color: var(--dsw-alias-label-tertiary);
+  font: 400 11px/16px var(--ds-font-family-code);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}

packages/client/ui-conversation/src/client/chat/ContextInjectionRow.tsx

@@ -0,0 +1,81 @@
+import { useMemo, useState } from 'react'
+import type { ContextMessageNode } from '@deepseek-ai/dsh-client-runtime/client'
+import { IconBrowseOutline16 } from '@deepseek-ai/dsh-client-ui-primitives'
+import { DisclosureRow } from './DisclosureRow.tsx'
+import css from './ContextInjectionRow.module.css'
+
+const MAX_CHARS = 20_000
+
+function inlineJson(payload: unknown): string {
+  const raw = JSON.stringify(payload)
+  let formatted = ''
+  let quoted = false
+  let escaped = false
+
+  for (let index = 0; index < raw.length; index++) {
+    const char = raw.charAt(index)
+    if (quoted) {
+      formatted += char
+      if (escaped) escaped = false
+      else if (char === '\\') escaped = true
+      else if (char === '"') quoted = false
+      continue
+    }
+    if (char === '"') {
+      quoted = true
+      formatted += char
+      continue
+    }
+    if (char === '{' || char === '[') {
+      formatted += char
+      const close = char === '{' ? '}' : ']'
+      if (raw[index + 1] !== close) formatted += ' '
+      continue
+    }
+    if (char === '}' || char === ']') {
+      const open = char === '}' ? '{' : '['
+      if (raw[index - 1] !== open) formatted += ' '
+      formatted += char
+      continue
+    }
+    formatted += char === ':' || char === ',' ? `${char} ` : char
+  }
+  return formatted
+}
+
+/** Props for the logged non-user message presentation. */
+export interface ContextInjectionRowProps {
+  content: ContextMessageNode['content']
+  source: ContextMessageNode['source']
+}
+
+/**
+ * Render logged context with the Tool calls disclosure chrome from Figma.
+ * @param props - Durable content and source provenance.
+ * @returns A collapsed context row with a bounded JSON body.
+ */
+export function ContextInjectionRow({ content, source }: ContextInjectionRowProps) {
+  const [open, setOpen] = useState(false)
+  const body = useMemo(() => {
+    if (!open) return ''
+    const text = inlineJson({ content, source })
+    return text.length > MAX_CHARS
+      ? `${text.slice(0, MAX_CHARS)}\n… 已截断，共 ${text.length} 字符`
+      : text
+  }, [content, open, source])
+
+  return (
+    <DisclosureRow
+      className={css.root}
+      icon={<IconBrowseOutline16 size={14} />}
+      chevronClassName={css.chevron}
+      title="上下文注入"
+      open={open}
+      expandable
+      expandOnRowClick
+      onToggle={() => { setOpen(value => !value) }}
+    >
+      <pre className={css.body} data-context-injection-body>{body}</pre>
+    </DisclosureRow>
+  )
+}

packages/client/ui-conversation/src/client/chat/DisclosureRow.module.css

@@ -0,0 +1,69 @@
+/* Shared Tool calls disclosure header: [16px leading] gap 6 [title 14/24]. */
+
+.root {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-width: 0;
+}
+
+.row {
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  height: 24px;
+  min-width: 0;
+}
+
+.row[data-expandable] {
+  cursor: pointer;
+}
+
+.leading {
+  position: relative;
+  flex: none;
+  width: 16px;
+  height: 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 6px;
+  padding: 0;
+  border: none;
+  background: none;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+button.leading {
+  cursor: pointer;
+}
+
+.iconIdle {
+  display: inline-flex;
+  opacity: 1;
+  transition: opacity 100ms ease;
+}
+
+.chevronHover {
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  opacity: 0;
+  transition: opacity 100ms ease;
+}
+
+.row:hover .iconIdle {
+  opacity: 0;
+}
+
+.row:hover .chevronHover {
+  opacity: 1;
+}
+
+.title {
+  flex: none;
+  font-size: 14px;
+  line-height: 24px;
+  color: var(--dsw-alias-label-secondary);
+}

packages/client/ui-conversation/src/client/chat/DisclosureRow.tsx

@@ -0,0 +1,101 @@
+import { type KeyboardEvent, type MouseEvent, type ReactNode } from 'react'
+import clsx from 'clsx'
+import { IconChevronDownOutline14 } from '@deepseek-ai/dsh-client-ui-primitives'
+import css from './DisclosureRow.module.css'
+
+/** Shared 24px disclosure chrome for conversation flow rows. */
+export interface DisclosureRowProps {
+  icon: ReactNode
+  title: string
+  open: boolean
+  expandable: boolean
+  onToggle: () => void
+  /** Makes the complete title row the disclosure target. */
+  expandOnRowClick?: boolean | undefined
+  /** Replaces the collapsed icon with a chevron while the row is hovered. */
+  previewChevron?: boolean | undefined
+  collapsedContent?: ReactNode
+  children?: ReactNode
+  className?: string | undefined
+  rowClassName?: string | undefined
+  leadingClassName?: string | undefined
+  chevronClassName?: string | undefined
+  titleClassName?: string | undefined
+}
+
+/**
+ * Render one disclosure header and its controlled expanded content.
+ * @param props - Visual content, controlled state, and interaction policy.
+ * @returns The disclosure row.
+ */
+export function DisclosureRow({
+  icon,
+  title,
+  open,
+  expandable,
+  onToggle,
+  expandOnRowClick = false,
+  previewChevron = expandable,
+  collapsedContent,
+  children,
+  className,
+  rowClassName,
+  leadingClassName,
+  chevronClassName,
+  titleClassName,
+}: DisclosureRowProps) {
+  const rowExpands = expandable && expandOnRowClick
+  const toggleFromLeading = (event: MouseEvent<HTMLButtonElement>) => {
+    event.stopPropagation()
+    onToggle()
+  }
+  const toggleFromKeyboard = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (!rowExpands || (event.key !== 'Enter' && event.key !== ' ')) return
+    event.preventDefault()
+    onToggle()
+  }
+  const collapsedLeading = previewChevron
+    ? (
+      <>
+        <span className={css.iconIdle}>{icon}</span>
+        <IconChevronDownOutline14 className={clsx(chevronClassName, css.chevronHover)} />
+      </>
+    )
+    : icon
+  const leading = open
+    ? <IconChevronDownOutline14 className={chevronClassName} />
+    : collapsedLeading
+
+  return (
+    <div className={clsx(css.root, className)} data-open={open || undefined}>
+      <div
+        className={clsx(css.row, rowClassName)}
+        data-disclosure-row
+        data-expandable={rowExpands || undefined}
+        role={rowExpands ? 'button' : undefined}
+        tabIndex={rowExpands ? 0 : undefined}
+        aria-expanded={rowExpands ? open : undefined}
+        onClick={rowExpands ? onToggle : undefined}
+        onKeyDown={rowExpands ? toggleFromKeyboard : undefined}
+      >
+        {expandable && !rowExpands ? (
+          <button
+            type="button"
+            className={clsx(css.leading, leadingClassName)}
+            aria-expanded={open}
+            onClick={toggleFromLeading}
+          >
+            {leading}
+          </button>
+        ) : (
+          <span className={clsx(css.leading, leadingClassName)}>
+            {leading}
+          </span>
+        )}
+        <span className={clsx(css.title, titleClassName)}>{title}</span>
+        {!open && collapsedContent}
+      </div>
+      {open && children}
+    </div>
+  )
+}

packages/client/ui-conversation/src/client/chat/MessageItem.tsx

@@ -1,17 +1,16 @@
 // MessageItem: the four simple node kinds — user bubble (right-aligned, with
 // clock + copy / branch / edit IconActions), steering (badged bubble), context
-// injection as a text-icon disclosure, and unknown-surface JSON rows. Props
-// are frozen node slices off the snapshot cache; memo holds across streaming
-// because unchanged nodes keep their references.
+// injection and unknown-surface JSON rows. Props are frozen node slices off
+// the snapshot cache; memo holds across streaming because unchanged nodes
+// keep their references.
 
 import { memo } from 'react'
 import type { ReactNode } from 'react'
 import type {
   ContextMessageNode, SteeringMessageNode, UnknownSurfaceNode, UserMessageNode,
 } from '@deepseek-ai/dsh-client-runtime/client'
-import {
-  IconTextOutline14, JsonBlock, MessageText,
-} from '@deepseek-ai/dsh-client-ui-primitives'
+import { JsonBlock, MessageText } from '@deepseek-ai/dsh-client-ui-primitives'
+import { ContextInjectionRow } from './ContextInjectionRow.tsx'
 import { MessageIconActions } from './MessageIconActions.tsx'
 import css from './MessageItem.module.css'
 
@@ -96,13 +95,7 @@ export const MessageItem = memo(function MessageItem({ node }: MessageItemProps)
     }
     case 'context':
       return (
-        <div className={css.contextRow}>
-          <JsonBlock
-            label="上下文注入"
-            payload={{ content: node.content, source: node.source }}
-            collapsedIcon={<IconTextOutline14 />}
-          />
-        </div>
+        <ContextInjectionRow content={node.content} source={node.source} />
       )
     default:
       return (

packages/client/ui-conversation/src/client/chat/ToolRow.module.css

@@ -9,10 +9,6 @@
 .row {
   position: relative; /* sweep-glare overlay anchor */
   overflow: hidden;
-  display: flex;
-  align-items: center;
-  height: 24px;
-  min-width: 0;
 }
 
 /* Running sweep (deepsuite ShimmerText pattern): a fixed-width glare band —
@@ -41,24 +37,8 @@
   90%, 100% { left: 100%; }
 }
 
-/* Expand-on-row (Think / code): pointer only — no row fill hover. */
-.row[data-expandable] {
-  cursor: pointer;
-}
-
 .leading {
-  position: relative; /* .chevronHover overlay anchor */
-  flex: none;
-  width: 16px;
-  height: 16px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  margin-right: 6px;
-  padding: 0;
-  border: none;
-  background: none;
-  color: var(--dsw-alias-label-tertiary);
+  flex-shrink: 0;
 }
 
 /* Cordis lifecycle tools retain their generic row mechanics while carrying a
@@ -76,40 +56,8 @@
   background: var(--dsw-alias-state-business-primary);
 }
 
-button.leading {
-  cursor: pointer;
-}
-
-/* Hover preview on expandable rows: the idle tool icon crossfades (100ms)
-   into a down chevron before the row is opened. The chevron overlays the
-   icon cell absolutely so both can stay mounted for the opacity transition. */
-.iconIdle {
-  display: inline-flex;
-  opacity: 1;
-  transition: opacity 100ms ease;
-}
-
-.chevronHover {
-  position: absolute;
-  inset: 0;
-  margin: auto;
-  opacity: 0;
-  transition: opacity 100ms ease;
-}
-
-.row:hover .iconIdle {
-  opacity: 0;
-}
-
-.row:hover .chevronHover {
-  opacity: 1;
-}
-
 .title {
-  flex: none;
-  font-size: 14px;
-  line-height: 24px;
-  color: var(--dsw-alias-label-secondary);
+  font-weight: 400;
 }
 
 .sep {

packages/client/ui-conversation/src/client/chat/ToolRow.tsx

@@ -8,11 +8,11 @@
 // component-local view state. File-tool summaries are path links that open
 // through the host; the row itself is not a details-panel control.
 
-import { useState, type KeyboardEvent, type MouseEvent, type ReactNode } from 'react'
+import { useState, type MouseEvent, type ReactNode } from 'react'
 import { CodeBlock, StateDot, TerminalBlock } from '@deepseek-ai/dsh-client-ui-primitives'
-import { IconChevronDownOutline14 } from '@deepseek-ai/dsh-client-ui-primitives'
 import { CHAT_TERMINAL_MAX_LINES, type TerminalCardModel } from '../contract/terminal-card-model.ts'
 import type { ToolRowState, ToolRowVariant } from '../contract/tool-call-model.ts'
+import { DisclosureRow } from './DisclosureRow.tsx'
 import css from './ToolRow.module.css'
 
 export interface ToolRowProps {
@@ -82,63 +82,27 @@ export function ToolRow({
   // this substitution never shows.
   const text = body ?? ''
   const open = expanded && expandable
-  const rowExpands = expandable && expandOnRowClick
   const toggleExpand = () => {
     setExpanded(v => !v)
   }
-  const toggleFromLeading = (event: MouseEvent<HTMLButtonElement>) => {
-    event.stopPropagation()
-    toggleExpand()
-  }
-  const toggleFromKeyboard = (event: KeyboardEvent<HTMLDivElement>) => {
-    if (!rowExpands || (event.key !== 'Enter' && event.key !== ' ')) return
-    event.preventDefault()
-    toggleExpand()
-  }
   const openFile = (event: MouseEvent<HTMLButtonElement>) => {
     event.stopPropagation()
     if (filePath !== undefined) onOpenFile?.(filePath)
   }
-  // Expandable rows preview the toggle on hover: the tool icon yields to a
-  // down chevron (CSS swap on .row:hover); state dots still take precedence.
-  const collapsedIcon = expandable
-    ? (
-      <>
-        <span className={css.iconIdle}>{icon}</span>
-        <IconChevronDownOutline14 className={css.chevronHover} />
-      </>
-    )
-    : icon
-  const leading = open
-    ? <IconChevronDownOutline14 />
-    : leadingFor(state, collapsedIcon)
   return (
     <div className={css.root} data-variant={variant} data-tool={toolName} data-state={state}>
-      <div
-        className={css.row}
-        data-expandable={rowExpands || undefined}
-        role={rowExpands ? 'button' : undefined}
-        tabIndex={rowExpands ? 0 : undefined}
-        aria-expanded={rowExpands ? open : undefined}
-        onClick={rowExpands ? toggleExpand : undefined}
-        onKeyDown={rowExpands ? toggleFromKeyboard : undefined}
-      >
-        {expandable && !rowExpands ? (
-          <button
-            type="button"
-            className={css.leading}
-            aria-expanded={open}
-            onClick={toggleFromLeading}
-          >
-            {leading}
-          </button>
-        ) : (
-          <span className={css.leading}>
-            {leading}
-          </span>
-        )}
-        <span className={css.title}>{title}</span>
-        {!open && (
+      <DisclosureRow
+        rowClassName={css.row}
+        leadingClassName={css.leading}
+        titleClassName={css.title}
+        icon={leadingFor(state, icon)}
+        title={title}
+        open={open}
+        expandable={expandable}
+        expandOnRowClick={expandOnRowClick}
+        previewChevron={expandable && state !== 'error' && state !== 'stopped'}
+        onToggle={toggleExpand}
+        collapsedContent={(
           <>
             <span className={css.sep} aria-hidden />
             {fileLink ? (
@@ -154,18 +118,18 @@ export function ToolRow({
             )}
           </>
         )}
-      </div>
-      {/* The terminal presenter's description belongs ABOVE the card per the
-          render-intent contract, so an expanded terminal row keeps showing it
-          even though the collapsed summary is hidden while open. */}
-      {open && terminalBody?.description !== undefined && (
-        <div className={css.terminalDescription}>{terminalBody.description}</div>
-      )}
-      {open && (terminalBody !== null
-        ? <TerminalBlock {...terminalBody.card} maxLines={CHAT_TERMINAL_MAX_LINES} className={css.terminalBody} />
-        : variant === 'code'
-          ? <CodeBlock code={text} lang="typescript" className={css.codeBody} />
-          : <div className={css.body}>{text}</div>)}
+      >
+        {/* The terminal presenter's description belongs above the card per
+            the render-intent contract. */}
+        {terminalBody?.description !== undefined && (
+          <div className={css.terminalDescription}>{terminalBody.description}</div>
+        )}
+        {terminalBody !== null
+          ? <TerminalBlock {...terminalBody.card} maxLines={CHAT_TERMINAL_MAX_LINES} className={css.terminalBody} />
+          : variant === 'code'
+            ? <CodeBlock code={text} lang="typescript" className={css.codeBody} />
+            : <div className={css.body}>{text}</div>}
+      </DisclosureRow>
     </div>
   )
 }

packages/client/ui-conversation/tests/chat-branch-tails.spec.tsx

@@ -107,15 +107,48 @@ describe('MessageItem arms', () => {
     expect(view.queryByRole('button', { name: '复制' })).toBeNull()
   })
 
-  it('context and unknown nodes render their JSON rows', () => {
+  it('context uses the Tool calls disclosure chrome and keeps its JSON collapsed by default', () => {
     const ctxView = render(
-      <MessageItem node={{ kind: 'context', seq: 3, content: [], source: null } as never} />,
+      <MessageItem node={{
+        kind: 'context',
+        seq: 3,
+        content: [{ type: 'text', text: 'x\n"y":,[{}]' }],
+        source: { kind: 'plugin', plugin: 'fixture', empty: {}, list: [] },
+      } as never}
+      />,
     )
-    const contextToggle = ctxView.getByRole('button', { name: '上下文注入' })
-    expect(contextToggle.getAttribute('aria-expanded')).toBe('false')
-    expect(contextToggle.querySelector('svg')).not.toBeNull()
-    fireEvent.click(contextToggle)
-    expect(contextToggle.getAttribute('aria-expanded')).toBe('true')
+    const disclosure = ctxView.getByRole('button', { name: '上下文注入' })
+    expect(disclosure.getAttribute('aria-expanded')).toBe('false')
+    expect(ctxView.container.querySelector('[data-context-injection-body]')).toBeNull()
+    expect(ctxView.container.querySelector('svg')).not.toBeNull()
+
+    fireEvent.click(disclosure)
+    expect(disclosure.getAttribute('aria-expanded')).toBe('true')
+    expect(ctxView.container.querySelector('[data-context-injection-body]')?.textContent).toBe(
+      '{ "content": [ { "type": "text", "text": "x\\n\\"y\\":,[{}]" } ], '
+      + '"source": { "kind": "plugin", "plugin": "fixture", "empty": {}, "list": [] } }',
+    )
+
+    fireEvent.keyDown(disclosure, { key: ' ' })
+    expect(disclosure.getAttribute('aria-expanded')).toBe('false')
+  })
+
+  it('context preserves the bounded JSON truncation contract', () => {
+    const view = render(
+      <MessageItem node={{
+        kind: 'context',
+        seq: 3,
+        content: [{ type: 'text', text: 'x'.repeat(21_000) }],
+        source: null,
+      } as never}
+      />,
+    )
+    fireEvent.click(view.getByRole('button', { name: '上下文注入' }))
+    expect(view.container.querySelector('[data-context-injection-body]')?.textContent)
+      .toMatch(/… 已截断，共 \d+ 字符$/)
+  })
+
+  it('unknown nodes retain the generic JSON row', () => {
     const unknownView = render(
       <MessageItem node={{ kind: 'unknown', seq: 4, type: 'surface/next', data: { x: 1 } } as never} />,
     )

packages/client/ui-primitives/README.i18n.yaml

@@ -2,5 +2,5 @@
 # side as of the last confirmed-consistent state. Both languages carry equal authority;
 # after editing either side, bring the other along and re-record with:
 #   pnpm run verify-translation-pairing --write packages/client/ui-primitives/README.md
-README.md: ba315a02563596a680bc1849c07b8dec3cfdab21
-README.zh.md: c0ecfb42765a3a539fb2aa470133f86b36ca2f57
+README.md: 0ef3c20f848b3d331c007911d0837f11cd72c024
+README.zh.md: af94551bfb9e12dbadcef6a96a54f9bf7ea71299

packages/client/ui-primitives/README.md

@@ -6,7 +6,7 @@ Pure React atoms (zero cordis): StateDot, ic_ds_* icons, Button/Pill/Menu/Modal/
 
 ## Markdown rendering
 
-`MarkdownText` renders GFM from untrusted assistant output through React elements. It omits raw HTML, neutralizes relative and non-HTTP(S)/mailto links, opens HTTP(S) links with safe external-link attributes, and renders image alt text without loading remote resources; `MessageText` remains the literal-text primitive for user-authored content. `extractMarkdownPlainText` removes Markdown presentation markup for compact labels while preserving raw HTML as literal text. `JsonBlock` renders a bounded JSON disclosure with design-system chevrons, `aria-expanded`, and an optional semantic collapsed-state icon. Element spacing, tables, links, and inline code use the same `--dsw-alias-markdown-*` / `--dsw-font-markdown-*` tokens as deepsuite `@deepseek/md`. Fenced blocks render through `CodeBlock` (language banner, copy control, shiki for the registered grammars).
+`MarkdownText` renders GFM from untrusted assistant output through React elements. It omits raw HTML, neutralizes relative and non-HTTP(S)/mailto links, opens HTTP(S) links with safe external-link attributes, and renders image alt text without loading remote resources; `MessageText` remains the literal-text primitive for user-authored content. `extractMarkdownPlainText` removes Markdown presentation markup for compact labels while preserving raw HTML as literal text. Element spacing, tables, links, and inline code use the same `--dsw-alias-markdown-*` / `--dsw-font-markdown-*` tokens as deepsuite `@deepseek/md`. Fenced blocks render through `CodeBlock` (language banner, copy control, shiki for the registered grammars).
 
 ## Terminal output
 

packages/client/ui-primitives/README.zh.md

@@ -6,8 +6,7 @@
 
 ## Markdown 渲染
 
-`MarkdownText` 通过 React 元素渲染来自不受信任 assistant 输出的 GFM。它会省略原始 HTML，使相对链接及非 HTTP(S)/mailto 链接失效，以安全的外部链接属性打开 HTTP(S) 链接，并只渲染图片 alt 文本而不加载远程资源；`MessageText` 仍是用户创作内容使用的字面文本原语。`extractMarkdownPlainText` 会移除 Markdown 呈现标记以用于紧凑标签，同时将原始 HTML 保留为字面文本。`JsonBlock` 会渲染一个有界的 JSON 展开区，其中带有设计系统的 V 形箭头、`aria-expanded`，并可选配折叠态语义图标。元素间距、表格、链接与行内代码使用与 deepsuite `@deepseek/md` 相同的 `--dsw-alias-markdown-*` / `--dsw-font-markdown-*` token。围栏代码块通过 `CodeBlock` 渲染（语言横幅、复制控件，以及对已注册语法使用 shiki）。
-
+`MarkdownText` 通过 React 元素渲染来自不受信任 assistant 输出的 GFM。它会省略原始 HTML，使相对链接及非 HTTP(S)/mailto 链接失效，以安全的外部链接属性打开 HTTP(S) 链接，并只渲染图片 alt 文本而不加载远程资源；`MessageText` 仍是用户创作内容使用的字面文本原语。`extractMarkdownPlainText` 会移除 Markdown 呈现标记以用于紧凑标签，同时将原始 HTML 保留为字面文本。元素间距、表格、链接与行内代码使用与 deepsuite `@deepseek/md` 相同的 `--dsw-alias-markdown-*` / `--dsw-font-markdown-*` token。围栏代码块通过 `CodeBlock` 渲染（语言横幅、复制控件，以及对已注册语法使用 shiki）。
 ## 终端输出
 
 `TerminalBlock` 将一条 shell 命令渲染为终端表层：命令的每一行各占一个提示行（缩短后的 `cwd` 标签只出现在第一行，因为视图只知道一个工作目录，而一个 `cd` 就会让后面的行去到别处，标签之后是该行）、命令输出、非零退出码或终止信号对应的状态胶囊，以及写入原始 `output` prop 的复制控件。一枚运行状态 `StateDot` 为整次调用标记一次，位于第一行，以脱离文档流的方式落在卡片以自身左内边距预留的落区中，因此它位于卡片盒之内、提示文字之左。它用到 `StateDot` 的三种状态——`running` 期间为追逐动画，与渲染状态胶囊相同的退出状态为红色，其余为绿色——因此卡片直接陈述其命令是否仍在运行，而不是让人从有无输出中推断；由于 `StateDot` 是 `aria-hidden`，它携带一处视觉隐藏的文本标签。无论多少行都只有一枚状态点是有意为之：退出状态属于整次调用，因此每行一枚就会声称一个视图并不携带的逐行结果。命令文本使用 `white-space: pre`，因此重复空格、制表符与缩进续行都原样呈现，同时该行仍保持单行并以省略号截断。ANSI 转义序列通过运行时依赖 `anser` 解析为 React span；光标移动在剥除无显示意义控制符之前先重放进逐行的列缓冲，因为回车与退格**只移动**光标：单是 `100%` 加回车再加 `OK` 显示为 `OK0%`，而 spinner 随重绘写出的 `\x1b[K` 会擦掉尾巴，因此 `100%\r\x1b[KOK` 显示为 `OK`。行内擦除的三种参数形式都被遵循，光标按终端列推进（8 列制表位；emoji 与 CJK 占两列；组合标记不占列），SGR 状态按单元格归一化存储，与终端一致，并跨行延续、在行结束时的状态处收束；基础 16 色前景色映射到 `--dsw-*` token，而 256 色板与真彩色值按字面 rgb 透传。输出保持 `white-space: pre` 并支持横向滚动，因此按列对齐的输出保留其对齐而不会软换行；超过 `maxLines`（默认 16，与 TUI 转录相同的切分算法）时折叠为头部切片加尾部切片，由展开按钮控制。原理：[Web 终端卡片笔记](../../../.agents/notes/implemented/feature/2026-07-28-web-terminal-card.md)。

packages/client/ui-primitives/src/icons/index.tsx

@@ -685,18 +685,6 @@ export const IconChecklistOutline14 = ({ size = 14, className }: IconProps) => (
   </svg>
 )
 
-/** Text document glyph for context-disclosure rows. */
-export const IconTextOutline14 = ({ 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
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M4.083 1.167h4.55c.31 0 .606.123.825.342l2.7 2.7c.219.219.342.516.342.825v6.05c0 .966-.784 1.75-1.75 1.75H4.083a1.75 1.75 0 0 1-1.75-1.75V2.917c0-.967.784-1.75 1.75-1.75Zm4.084 1.166H4.083a.583.583 0 0 0-.583.584v8.166c0 .323.261.584.583.584h6.667a.583.583 0 0 0 .583-.584V5.25H9.917a1.75 1.75 0 0 1-1.75-1.75V2.333Zm1.166.825 1.175 1.175h-.591a.583.583 0 0 1-.584-.583v-.592ZM5.25 7h4.667v1.167H5.25V7Zm0 2.333h4.667V10.5H5.25V9.333Z"
-      fill="currentColor"
-    />
-  </svg>
-)
-
 /** ic_ds_List_Pen_outline_16 */
 export const IconListPenOutline16 = ({ 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">

packages/client/ui-primitives/src/index.ts

@@ -24,7 +24,6 @@ export { TerminalBlock, DEFAULT_TERMINAL_MAX_LINES } from './TerminalBlock.tsx'
 export type { TerminalBlockProps } from './TerminalBlock.tsx'
 export { CodeBlock } from './markdown/CodeBlock.tsx'
 export { JsonBlock } from './markdown/JsonBlock.tsx'
-export type { JsonBlockProps } from './markdown/JsonBlock.tsx'
 export { MarkdownText } from './markdown/MarkdownText.tsx'
 export { MessageText } from './markdown/MessageText.tsx'
 export { extractMarkdownPlainText } from './markdown/plain-text.ts'

packages/client/ui-primitives/src/markdown/JsonBlock.module.css

@@ -3,54 +3,22 @@
 }
 
 .toggle {
-  display: inline-flex;
-  align-items: center;
-  min-height: 24px;
-  font-size: 14px;
-  line-height: 24px;
+  font-size: 12px;
+  line-height: 18px;
   color: var(--dsw-alias-label-secondary);
-  padding: 0;
+  padding: 2px 6px;
   border: none;
   background: transparent;
   cursor: pointer;
+  border-radius: 6px;
 }
 
-.leading {
-  position: relative;
-  flex: none;
-  width: 16px;
-  height: 16px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  margin-right: 6px;
-  color: var(--dsw-alias-label-tertiary);
-}
-
-.iconIdle {
-  display: inline-flex;
-  opacity: 1;
-  transition: opacity 100ms ease;
-}
-
-.chevronHover {
-  position: absolute;
-  inset: 0;
-  margin: auto;
-  opacity: 0;
-  transition: opacity 100ms ease;
-}
-
-.toggle:hover .iconIdle {
-  opacity: 0;
-}
-
-.toggle:hover .chevronHover {
-  opacity: 1;
+.toggle:hover {
+  background: var(--dsw-alias-interactive-bg-hover);
 }
 
 .body {
-  margin: 4px 0 0 22px;
+  margin: 4px 0 0;
   padding: 8px;
   max-height: 200px;
   overflow: auto;

packages/client/ui-primitives/src/markdown/JsonBlock.tsx

@@ -1,28 +1,15 @@
-// JsonBlock: accessible JSON disclosure row (conversation side; independent
-// from the RPC panel's PayloadJson to avoid cross-panel coupling).
+// JsonBlock: collapsible JSON block (conversation side; independent from the RPC panel's PayloadJson to avoid cross-panel coupling).
 
-import { useMemo, useState, type ReactNode } from 'react'
-import { IconChevronDownOutline14, IconChevronRightOutline14 } from '../icons/index.tsx'
+import { useMemo, useState } from 'react'
 import css from './JsonBlock.module.css'
 
 const MAX_CHARS = 20_000
 
-/** Props for the compact JSON disclosure used in conversation content. */
-export interface JsonBlockProps {
+export function JsonBlock({ label, payload, defaultOpen = false }: {
   label: string
   payload: unknown
   defaultOpen?: boolean
-  /** Semantic glyph shown while collapsed; hover previews the disclosure chevron. */
-  collapsedIcon?: ReactNode
-}
-
-/** Render a bounded, pretty-printed JSON disclosure. */
-export function JsonBlock({
-  label,
-  payload,
-  defaultOpen = false,
-  collapsedIcon,
-}: JsonBlockProps) {
+}) {
   const [open, setOpen] = useState(defaultOpen)
   const body = useMemo(() => {
     if (!open) return ''
@@ -36,26 +23,10 @@ export function JsonBlock({
     }
     return s.length > MAX_CHARS ? `${s.slice(0, MAX_CHARS)}\n… 已截断，共 ${s.length} 字符` : s
   }, [open, payload])
-  const leading = open
-    ? <IconChevronDownOutline14 />
-    : collapsedIcon === undefined
-      ? <IconChevronRightOutline14 />
-      : (
-        <>
-          <span className={css.iconIdle}>{collapsedIcon}</span>
-          <IconChevronRightOutline14 className={css.chevronHover} />
-        </>
-      )
   return (
     <div className={css.root}>
-      <button
-        type="button"
-        className={css.toggle}
-        aria-expanded={open}
-        onClick={() => { setOpen(v => !v) }}
-      >
-        <span className={css.leading} aria-hidden="true">{leading}</span>
-        <span>{label}</span>
+      <button type="button" className={css.toggle} onClick={() => { setOpen(v => !v) }}>
+        {open ? '▾' : '▸'} {label}
       </button>
       {open && <pre className={css.body}>{body}</pre>}
     </div>

packages/client/ui-primitives/tests/icons.spec.tsx

@@ -14,8 +14,8 @@ const icons = Object.fromEntries(
 const iconNames = Object.keys(icons)
 
 describe('ic_ds_ icon set', () => {
-  it('exports the full P-I set (45 deepsuite + 14 figma extracts + 2 hand-authored glyphs)', () => {
-    expect(iconNames.length).toBe(61)
+  it('exports the full P-I set (45 deepsuite + 14 figma extracts + the hand-authored sparkle)', () => {
+    expect(iconNames.length).toBe(60)
   })
 
   it.each(iconNames)('%s renders an svg with currentColor fills and no hardcoded palette', (name) => {

packages/client/ui-primitives/tests/markdown.spec.tsx

@@ -124,17 +124,12 @@ describe('MarkdownText', () => {
 })
 
 describe('JsonBlock', () => {
-  it('collapsed by default; accessible toggle reveals pretty-printed payload', () => {
-    render(<JsonBlock label="args" payload={{ a: 1 }} collapsedIcon={<span data-testid="json-icon">T</span>} />)
-    const toggle = screen.getByRole('button', { name: 'args' })
-    expect(toggle.getAttribute('aria-expanded')).toBe('false')
-    expect(screen.getByTestId('json-icon')).toBeDefined()
+  it('collapsed by default; toggle reveals pretty-printed payload', () => {
+    render(<JsonBlock label="args" payload={{ a: 1 }} />)
     expect(screen.queryByText(/"a": 1/)).toBeNull()
-    fireEvent.click(toggle)
-    expect(toggle.getAttribute('aria-expanded')).toBe('true')
+    fireEvent.click(screen.getByRole('button', { name: /args/ }))
     expect(screen.getByText(/"a": 1/)).toBeDefined()
-    fireEvent.click(toggle)
-    expect(toggle.getAttribute('aria-expanded')).toBe('false')
+    fireEvent.click(screen.getByRole('button', { name: /args/ }))
     expect(screen.queryByText(/"a": 1/)).toBeNull()
   })