Merge remote-tracking branch 'origin/master' into feature/shared-cli-config-foundation

# Conflicts:
#	packages/host/apiproxy/README.i18n.yaml

packages/client/connection/src/client/fixture.ts

@@ -1021,6 +1021,27 @@ export function createFixtureApi(options: FixtureOptions = {}): ApiProxy {
         if (options.dropSessionCreateResponse) throw new Error('fixture: dropped session.create response after publication')
         return ok(request, { sessionId: created.sessionId })
       },
+      rename: (request) => {
+        const missing = requireSession(request)
+        if (missing !== undefined) return missing
+        const { sessionId, title } = request.payload
+        const normalized = title.trim().replace(/\s+/g, ' ')
+        if (normalized.length === 0) {
+          return err(request, {
+            code: 'title-invalid',
+            message: 'session title must contain visible characters',
+            details: { sessionId },
+          })
+        }
+        // The append emits the session/event and its session/projection frame
+        // (host parallel); the unary response settles the caller first.
+        append(sessionId, {
+          type: 'session/title',
+          data: { title: normalized, messageSeqs: [], source: { kind: 'user' } },
+        })
+        const appended = logOf(sessionId).at(-1) as SessionEvent
+        return ok(request, { title: normalized, seq: appended.seq })
+      },
       history: async (request) => {
         const log = logs.get(request.payload.sessionId) ?? []
         // Snapshot at request time, deliver after the transit delay (mirrors a real host under latency).
@@ -1564,6 +1585,7 @@ export class FixtureApiClient extends AbstractApiClient {
       case 'session.history': return this.api.sessions.history(request)
       case 'session.models': return this.api.sessions.models(request)
       case 'session.selectModel': return this.api.sessions.selectModel(request)
+      case 'session.rename': return this.api.sessions.rename(request)
       case 'session.prompt': return this.api.sessions.prompt(request)
       case 'session.cancel': return this.api.sessions.cancel(request)
       case 'host.describe': return this.api.host.describe(request)

packages/client/connection/tests/fake-api.ts

@@ -45,6 +45,7 @@ export class FakeApiClient implements IApiClient {
   // Programmable slots (defaults answer OK-empty); reassign per case.
   onList: (payload: unknown) => Promise<RpcResponse<{ items: never[] }>> = () => Promise.resolve(ok({ items: [] }))
   onCreate: (payload: unknown) => Promise<RpcResponse<{ sessionId: SessionId }>> = () => Promise.resolve(ok({ sessionId: 'fk-new' as SessionId }))
+  onRename: (payload: unknown) => Promise<RpcResponse<{ title: string; seq: number }>> = () => Promise.resolve(ok({ title: 'fk-renamed', seq: 0 }))
   onHistory: (payload: { sessionId: SessionId; beforeSeq?: number; maxMessages?: number })
   => Promise<RpcResponse<{ events: never[]; hasMore: boolean; modelTarget: ModelTarget }>> =
     () => Promise.resolve(ok({
@@ -96,6 +97,7 @@ export class FakeApiClient implements IApiClient {
     models: (payload: unknown) => this.record('session.models', payload, this.onModels(payload)),
     selectModel: (payload: ModelTarget & { sessionId: SessionId }) =>
       this.record('session.selectModel', payload, this.onSelectModel(payload)),
+    rename: (payload: unknown) => this.record('session.rename', payload, this.onRename(payload)),
     prompt: (payload: unknown) => this.record('session.prompt', payload, this.onPrompt(payload)),
     cancel: (payload: unknown) => this.record('session.cancel', payload, this.onCancel(payload)),
   }

packages/client/connection/tests/fixture.spec.ts

@@ -464,6 +464,47 @@ describe('createFixtureApi', () => {
     expect(seen.map(f => f.type)).toEqual(['host/workspace-changed', 'host/workspace-changed'])
   })
 
+  it('session.rename covers not-found, blank title, and the accepted append + title frame', async () => {
+    const api = createFixtureApi()
+    const abort = new AbortController()
+    const framesPromise = (async () => {
+      const frames: MuxFrame[] = []
+      for await (const envelope of api.events.mux(req({}), abort.signal)) {
+        frames.push(envelope.payload)
+        if (frames.some(f => f.type === 'session/projection' && f.key === 'title' && f.value === '重命名')) abort.abort()
+      }
+      return frames
+    })()
+    await new Promise(resolve => setTimeout(resolve, 10))
+
+    const missing = await api.sessions.rename(req({ sessionId: sid('fx-void'), title: 'x' }))
+    expect(missing.result).toMatchObject({ ok: false, error: { code: 'session-not-found', details: { sessionId: 'fx-void' } } })
+
+    const blank = await api.sessions.rename(req({ sessionId: sid('fx-alpha'), title: '   ' }))
+    expect(blank.result).toMatchObject({ ok: false, error: { code: 'title-invalid', details: { sessionId: 'fx-alpha' } } })
+
+    const renamed = await api.sessions.rename(req({ sessionId: sid('fx-alpha'), title: '  重命名  ' }))
+    if (!renamed.result.ok) throw new Error('rename failed')
+    expect(renamed.result.value.title).toBe('重命名')
+    const acceptedSeq = renamed.result.value.seq
+    // The response seq addresses the appended title event (the client plane
+    // has no session/title in its event union — titles ride the projection —
+    // so the event is located by seq and its payload checked structurally).
+    const history = await api.sessions.history(req({ sessionId: sid('fx-alpha'), maxMessages: 100 }))
+    if (!history.result.ok) throw new Error('history failed')
+    const appended = history.result.value.events.find(entry => entry.event.seq === acceptedSeq)
+    expect(appended?.event).toMatchObject({
+      type: 'session/title',
+      data: { title: '重命名', messageSeqs: [], source: { kind: 'user' } },
+    })
+    // Beyond the subscribe-time baseline replay, the append emitted exactly
+    // one title projection frame carrying the new value at the response seq.
+    const frames = await framesPromise
+    const titleFrames = frames.filter(f => f.type === 'session/projection' && f.key === 'title' && f.sessionId === sid('fx-alpha') && f.value === '重命名')
+    expect(titleFrames).toHaveLength(1)
+    expect(titleFrames[0]).toMatchObject({ seq: acceptedSeq })
+  })
+
   it('workspace.insertSessionBefore moves, appends, no-ops, and rejects invalid ids', async () => {
     const api = createFixtureApi()
     const wsid = 'fx-ws-fixture' as WorkspaceId

packages/client/runtime/README.i18n.yaml

@@ -2,5 +2,5 @@
 # side as of the last confirmed-consistent state. Both languages carry equal authority;
 # after editing either side, bring the other along and re-record with:
 #   pnpm run verify-translation-pairing --write packages/client/runtime/README.md
-README.md: 25eb60e2c95059ae918669c9f5169b6b8e9c6816
-README.zh.md: 8ac2ea10884aee48775dc5c545fac414edcddefe
+README.md: b51cc0276d8635ea9faa506e30246a107c1c1418
+README.zh.md: 4b2248d875ae37f1b848c51a0009d2497c6b3e61

packages/client/runtime/README.md

@@ -2,7 +2,7 @@
 
 English | [中文](README.zh.md)
 
-Client cordis boot and React-free object services: SlotsService wraps SlotCore and supplies renderer data sources; SessionsService owns Session objects, list/scope/history state; WorkspacesService depends on SessionsService and owns Workspace objects, list/actions, default-target derivation, and the New Session blank-reuse entry (`connectWorkspace`). The runtime fans the shared Host stream into both managers. Client sessions are always Host-born (Session+Agent+cwd in one `session.create`); the client holds no pre-entity session state — a session's Agent scope (the client mirror of host dsh-scope, keyed by the shared agent/session id) is born when its row enters the list mirror and dies with the prune. Contract: api-contracts v3 §4. Each `Session` holds a generic `ProjectionValueStore` seeded from the history-tail `projections` block and updated by `session/projection` frames under higher-seq-wins; domain keys (including `todos`) are read via `projections.faceOf` / `useProjection`, not via `ConversationSnapshot`.
+Client cordis boot and React-free object services: SlotsService wraps SlotCore and supplies renderer data sources; SessionsService owns Session objects and the Chat-facing list, scope, and event-window state; SessionHistoryService lazily owns independent raw-history ledgers for inspection consumers; WorkspacesService depends on SessionsService and owns Workspace objects, list/actions, default-target derivation, and the New Session blank-reuse entry (`connectWorkspace`). The runtime fans the shared Host stream into the Session, Workspace, and activated history owners without routing inspection state through Session or SessionManager. Client sessions are always Host-born (Session+Agent+cwd in one `session.create`); the client holds no pre-entity session state — a session's Agent scope (the client mirror of host dsh-scope, keyed by the shared agent/session id) is born when its row enters the list mirror and dies with the prune. Contract: api-contracts v3 §4. Each `Session` holds a generic `ProjectionValueStore` seeded from the history-tail `projections` block and updated by `session/projection` frames under higher-seq-wins; domain keys (including `todos`) are read via `projections.faceOf` / `useProjection`, not via `ConversationSnapshot`.
 
 ## Workspace and Session lists
 
@@ -22,7 +22,7 @@ SlotsService gives the renderer separate bare observables for `useSessions` and
 
 ## Session title projection
 
-`SessionManager` retains the latest validated `session/title` control snapshot independently of list and session-instance arrival. Newer event seqs replace older snapshots, title timestamps contribute to list recency, and a subscription baseline discards any retained title beyond its `lastSeq` before the optional folded title arrives. Explicit session removal also clears the retained title. The client-facing `SessionSummary.title` is therefore only the actual durable title; `displayTitle` is always present and falls back through the cwd basename and session id. A cold persisted session keeps that fallback until opening or resuming it causes the host to fold and project its log-backed title.
+`SessionManager` retains the latest validated `session/title` control snapshot independently of list and session-instance arrival. Newer event seqs replace older snapshots, title timestamps contribute to list recency, and a subscription baseline discards any retained title beyond its `lastSeq` before the optional folded title arrives. Explicit session removal also clears the retained title. The client-facing `SessionSummary.title` is therefore only the actual durable title; `displayTitle` is always present and falls back through the cwd basename and session id. A cold persisted session keeps that fallback until opening or resuming it causes the host to fold and project its log-backed title. `ISession.rename` settles the `title` projection cell directly from the unary response's `{title, seq}` under the same higher-seq-wins rule — the list row and every `useProjection('title')` reader update ahead of the push frame, whose later replay of the same seq is a no-op.
 
 ## Session model selection
 

packages/client/runtime/README.zh.md

@@ -2,7 +2,7 @@
 
 [English](README.md) | 中文
 
-客户端 cordis 启动与不依赖 React 的对象服务：SlotsService 包装 SlotCore 并提供 renderer 数据源；SessionsService 拥有 Session 对象、列表／scope／history 状态；WorkspacesService 依赖 SessionsService，拥有 Workspace 对象、列表／操作、默认目标派生，以及 New Session 空会话复用入口（`connectWorkspace`）。运行时把共享 Host 流分发给两个 manager。客户端会话一律由 Host 创建（一次 `session.create` 同时产生 Session、agent（智能体）和 cwd）；客户端不持有任何实体化之前的会话状态——agent scope（host dsh-scope 的客户端镜像，以 agent/session 共用 id 为键）在会话行进入列表镜像时创建，并随 prune 销毁。契约：api-contracts v3 §4。每个 `Session` 持有一个通用的 `ProjectionValueStore`，由历史记录末尾的 `projections` 块播种，并经 `session/projection` 帧按 seq 高者胜更新；领域键（含 `todos`）经 `projections.faceOf`／`useProjection` 读取，不经 `ConversationSnapshot`。
+客户端 cordis 启动与不依赖 React 的对象服务：SlotsService 包装 SlotCore 并提供 renderer 数据源；SessionsService 拥有 Session 对象以及 Chat 所需的列表、scope 和事件窗口状态；SessionHistoryService 为检查类消费方惰性拥有彼此独立的原始历史账本；WorkspacesService 依赖 SessionsService，拥有 Workspace 对象、列表／操作、默认目标派生，以及 New Session 空会话复用入口（`connectWorkspace`）。运行时把共享 Host 流分发给 Session、Workspace 和已激活的历史数据所有者，不让检查状态经过 Session 或 SessionManager。客户端会话一律由 Host 创建（一次 `session.create` 同时产生 Session、agent（智能体）和 cwd）；客户端不持有任何实体化之前的会话状态——agent scope（host dsh-scope 的客户端镜像，以 agent/session 共用 id 为键）在会话行进入列表镜像时创建，并随 prune 销毁。契约：api-contracts v3 §4。每个 `Session` 持有一个通用的 `ProjectionValueStore`，由历史记录尾部的 `projections` 块播种，并经 `session/projection` 帧按 seq 高者胜更新；领域键（含 `todos`）经 `projections.faceOf`／`useProjection` 读取，不经 `ConversationSnapshot`。
 
 ## Workspace 与 Session 列表
 
@@ -22,7 +22,7 @@ SlotsService 分别为 renderer 提供 `useSessions` 与 `useWorkspaces` 的裸
 
 ## Session 标题投影
 
-`SessionManager` 独立于列表和 Session 实例到达情况，保留最近一次通过验证的 `session/title` 控制快照。seq 更高的事件会替换旧快照，标题时间戳计入列表新近程度；订阅基线会先丢弃 seq 超过其 `lastSeq` 的任何已保留标题，再接收可选的折叠标题。显式移除 Session 也会清除已保留标题。因此，面向客户端的 `SessionSummary.title` 只包含实际的持久化标题；`displayTitle` 始终存在，并依次回退到 cwd basename 和 Session id。冷态持久化会话会保持该回退值，直到打开或恢复会话，促使主机折叠并投影由日志支撑的标题。
+`SessionManager` 独立于列表和 Session 实例到达情况，保留最近一次通过验证的 `session/title` 控制快照。seq 更高的事件会替换旧快照，标题时间戳计入列表新近程度；订阅基线会先丢弃 seq 超过其 `lastSeq` 的任何已保留标题，再接收可选的折叠标题。显式移除 Session 也会清除已保留标题。因此，面向客户端的 `SessionSummary.title` 只包含实际的持久化标题；`displayTitle` 始终存在，并依次回退到 cwd basename 和 Session id。冷态持久化会话会保持该回退值，直到打开或恢复会话，促使主机折叠并投影由日志支撑的标题。`ISession.rename` 用 unary 响应中的 `{title, seq}` 直接结算 `title` 投影格，遵循同一 seq 高者胜规则——列表行和所有 `useProjection('title')` 读者在推送帧到达前即更新；推送帧随后重放同一 seq 时为无操作。
 
 ## 会话模型选择
 

packages/client/runtime/src/client/contract/session-history.ts

@@ -0,0 +1,35 @@
+import type {
+  RpcError, SessionId,
+} from '@deepseek-ai/dsh-client-connection/client'
+import type { SessionHistoryInspection } from '../sessions/history.ts'
+import type { ObservableSnapshot } from './store.ts'
+
+/** Observable state of one independently loaded session history ledger. */
+export interface SessionHistorySnapshot {
+  state: 'cold' | 'loading' | 'ready' | 'error'
+  error: RpcError | null
+  hasMore: boolean
+  inspection: SessionHistoryInspection
+}
+
+/** Read-only history source addressed by session id. */
+export interface SessionHistoryFace
+  extends ObservableSnapshot<SessionHistorySnapshot> {
+  readonly sessionId: SessionId
+  /**
+   * Load the tail and exhaust every available older page.
+   * @param signal - Consumer lifetime; abort is observed between page requests.
+   * @returns When the available ledger is complete or stops advancing.
+   */
+  loadAll(signal?: AbortSignal): Promise<void>
+}
+
+/** Runtime service resolving independent history sources. */
+export interface ISessionHistory {
+  /**
+   * Resolve the identity-stable source for a session.
+   * @param sessionId - Host session identity.
+   * @returns The source owned outside Session and SessionManager.
+   */
+  source(sessionId: SessionId): SessionHistoryFace
+}

packages/client/runtime/src/client/contract/session.ts

@@ -41,6 +41,13 @@ export interface ISession {
    * @returns acceptance, or the business error.
    */
   cancel(): Promise<RpcResult<{ accepted: true }>>
+  /**
+   * Rename this session (explicit user title; pins it against automatic
+   * regeneration).
+   * @param title - raw title text (the host normalizes acceptance).
+   * @returns the normalized accepted title and its event seq, or the business error.
+   */
+  rename(title: string): Promise<RpcResult<{ title: string; seq: number }>>
   /**
    * Extend the history window backwards (older messages pagination).
    * @returns completion; failures land in snapshot.openState/loadingOlder.

packages/client/runtime/src/client/index.ts

@@ -5,6 +5,7 @@ import type { MaybeSnapshotSelectorHook, SnapshotSelectorHook } from '@deepseek-
 import { SlotsService } from './slots.ts'
 import { SessionsService } from './sessions/service.ts'
 import type { SessionListState } from './sessions/service.ts'
+import { SessionHistoryService } from './session-history/service.ts'
 import { WorkspacesService } from './workspaces/service.ts'
 import type { ConversationSnapshot, RunningToolCall, ToolResultNode } from './sessions/conversation.ts'
 import type { UseProjection } from './sessions/projection-store.ts'
@@ -12,6 +13,7 @@ import type { UseProjection } from './sessions/projection-store.ts'
 export { SlotsService } from './slots.ts'
 export type { RootOwnerProps } from './slots.ts'
 export { SessionCreateError, SessionsService, scopeOf, workspaceTitleOf } from './sessions/service.ts'
+export { SessionHistoryService } from './session-history/service.ts'
 // The provide channel is shared with the client test runtime (one
 // materialization/projection implementation; no test-side mirror to drift).
 export { SessionProvideChannel } from './sessions/provide.ts'
@@ -21,6 +23,9 @@ export type { AgentScopeHandle } from './agents/scope.ts'
 export { DirectoryBrowseError, WorkspaceCreateError, WorkspacesService } from './workspaces/service.ts'
 export type { Session } from './sessions/session.ts'
 export type { ISession, ProjectionsFace, SessionFace } from './contract/session.ts'
+export type {
+  ISessionHistory, SessionHistoryFace, SessionHistorySnapshot,
+} from './contract/session-history.ts'
 export type { ISessions } from './contract/sessions.ts'
 export type { IWorkspaces } from './contract/workspaces.ts'
 export type {
@@ -38,10 +43,19 @@ export type {
   EngineStoreHandle, EngineStoreInstance, ObservableSnapshot, SnapshotStore,
 } from './contract/store.ts'
 export type {
-  AssistantBlock, AssistantMessageNode, CodeSubCall, CommandNode, ComposerPhase, ContextMessageNode, ConversationNode,
+  AssistantBlock, AssistantMessageNode, AssistantProvenanceView, AssistantRequestConfig,
+  AssistantTiming, CodeSubCall, CommandNode, ComposerPhase, ContextMessageNode, ConversationNode,
   ConversationSnapshot, QueuedMessage, RunningToolCall,
   SteeringMessageNode, TodoItem, ToolResultNode, UnknownSurfaceNode, UserMessageNode,
 } from './sessions/conversation.ts'
+export type {
+  ConversationContext, ConversationContextOriginKind,
+} from './sessions/conversation-context.ts'
+export type {
+  ConversationPromptSnapshot, RequestInspectionSnapshot, RequestPromptChange, RequestView,
+} from './sessions/request-inspection.ts'
+export type { ConversationHistoryProjection } from './session-history/history-fold.ts'
+export type { SessionHistoryInspection } from './sessions/history.ts'
 export { PendingWait } from './sessions/pending.ts'
 export type { PendingInteraction, PendingKind, PendingPayloads } from './sessions/pending.ts'
 // Projection value store (session-projection RFC, push model): host-computed
@@ -120,6 +134,8 @@ declare module 'cordis' {
     slots: import('./slots.ts').SlotsService
     /** The outward face only; the concrete service stays inside the runtime. */
     sessions: import('./contract/sessions.ts').ISessions
+    /** Read-only history sources isolated from Chat sessions and workspace state. */
+    sessionHistory: import('./contract/session-history.ts').ISessionHistory
     /** The outward face only; the concrete service stays inside the runtime. */
     workspaces: import('./contract/workspaces.ts').IWorkspaces
   }
@@ -135,30 +151,55 @@ export function apply(ctx: Context): void {
   ctx.plugin(SlotsService)
   const connection = ctx.get('connection') as ConnectionHandle
   const sessions = new SessionsService(ctx, connection.api)
+  const sessionHistory = new SessionHistoryService(ctx, connection.api)
   const workspaces = new WorkspacesService(ctx, connection.api, sessions)
   ctx.effect(
     () => workspaces.startInitialSelection(),
     'runtime: initial Workspace selection',
   )
   const loop = connection.start({
-    onMuxEnvelope: (envelope) => { sessions.handleMuxEnvelope(envelope) },
+    onMuxEnvelope: (envelope) => {
+      sessions.handleMuxEnvelope(envelope)
+      try {
+        sessionHistory.handleMuxEnvelope(envelope)
+      } catch (error) {
+        console.error('[web-runtime] history frame routing failed:', error)
+      }
+    },
     onHostEnvelope: (envelope) => {
       sessions.handleHostEnvelope(envelope)
       workspaces.handleHostEnvelope(envelope)
       // Typed-event bridge: the session layer ignores registry frames (no
       // session routing); consumers (command directory caches) subscribe on ctx.
       if (envelope.payload.type === 'host/commands-changed') ctx.emit('commands/changed')
+      try {
+        sessionHistory.handleHostEnvelope(envelope)
+      } catch (error) {
+        console.error('[web-runtime] history host-frame routing failed:', error)
+      }
     },
     onConnected: () => {
       sessions.handleConnected()
       workspaces.handleConnected()
       ctx.emit('connection/reset')
+      try {
+        sessionHistory.handleConnected()
+      } catch (error) {
+        console.error('[web-runtime] history reconnect failed:', error)
+      }
     },
     onStateChange: (state) => {
       // Generation death fires before any next-generation frame can arrive
       // (reconnect replays flow from stream open, ahead of onConnected):
       // the only safe moment to drop generation-scoped interaction state.
-      if (state === 'reconnecting') sessions.handleDisconnected()
+      if (state === 'reconnecting') {
+        sessions.handleDisconnected()
+        try {
+          sessionHistory.handleDisconnected()
+        } catch (error) {
+          console.error('[web-runtime] history disconnect failed:', error)
+        }
+      }
     },
   })
   ctx.effect(() => () => { loop.stop() }, 'runtime: connection stream loop')

packages/client/runtime/src/client/session-history/history-fold.ts

@@ -0,0 +1,472 @@
+import type { ContentBlock } from '@deepseek-ai/dsh-llm/types'
+import type { SessionEvent } from '@deepseek-ai/dsh-session/types'
+import {
+  SurfaceManager, isSurfaceEligibleType, isSurfaceEvent,
+} from '@deepseek-ai/dsh-session/surface'
+import type {
+  HistoryEntry, ToolCallView, ToolResultView,
+} from '@deepseek-ai/dsh-client-connection/client'
+import type {
+  AssistantRequestConfig, AssistantTiming, CodeSubCall, ConversationNode,
+  PartialAssistant, RunningToolCall,
+} from '../sessions/conversation.ts'
+import { toAssistantBlocks } from '../sessions/conversation.ts'
+import type {
+  ConversationContext, ConversationContextOriginKind,
+} from '../sessions/conversation-context.ts'
+import type { ConversationPromptSnapshot } from '../sessions/request-inspection.ts'
+import { PartialAccumulator } from '../sessions/partial.ts'
+
+interface CallIndexEntry {
+  name: string
+  argsRaw: string
+  time: number
+  callView: ToolCallView | null
+}
+
+interface FoldedContext {
+  generation: number
+  nodes: readonly number[]
+  originSeq?: number
+}
+
+interface AssistantStepMetadata {
+  stepStartTime: number | null
+  firstTokenTime: number | null
+}
+
+/** Immutable conversation projections derived only from the history source. */
+export interface ConversationHistoryProjection {
+  eventNodes: readonly ConversationNode[]
+  contexts: readonly ConversationContext[]
+  interruptedNodes: readonly ConversationNode[]
+  partial: PartialAssistant | null
+  runningCalls: readonly RunningToolCall[]
+  codeDispatches: ReadonlyMap<string, readonly CodeSubCall[]>
+}
+
+function assistantStepKey(turn: number, step: number): string {
+  return `${turn}\u0000${step}`
+}
+
+// Trajectory owns surface-window reconstruction so its immutable ledger does
+// not depend on Chat's live fold adapter or Session's mutable state.
+/* jscpd:ignore-start */
+function paddingEvent(seq: number): SessionEvent {
+  return { type: 'noop/padding', seq, time: 0, data: {} } as unknown as SessionEvent
+}
+
+function replacementCrossesWindowHead(event: SessionEvent, baseSeq: number): boolean {
+  if (!isSurfaceEvent(event) || event.surfaceOp === 'append') return false
+  return event.surfaceOp.start < baseSeq || event.surfaceOp.end < baseSeq
+}
+/* jscpd:ignore-end */
+
+function contextOriginKind(event: SessionEvent | undefined): ConversationContextOriginKind {
+  if (event?.type !== 'user/message') return 'rewrite'
+  const source = event.data.source
+  if (typeof source === 'object' && 'kind' in source && 'plugin' in source) {
+    if (source.plugin === 'compact') return 'compaction'
+    if (source.plugin === 'rewind') return 'rewind'
+  }
+  return 'rewrite'
+}
+
+function isTokenDelta(chunk: SessionEvent<'assistant/chunk'>['data']['chunk']): boolean {
+  switch (chunk.type) {
+    case 'text-delta':
+    case 'reasoning-delta':
+      return chunk.text !== ''
+    case 'tool-call-delta':
+      return chunk.argumentsDelta !== '' || chunk.name !== undefined
+    default:
+      return false
+  }
+}
+
+function foldContexts(events: readonly SessionEvent[]): readonly FoldedContext[] {
+  const replay: SessionEvent[] = []
+  const surface = new SurfaceManager(replay)
+  const contexts: FoldedContext[] = []
+  let generation = 0
+  let originSeq: number | undefined
+  for (const event of events) {
+    if (isSurfaceEvent(event) && event.surfaceOp !== 'append') {
+      contexts.push({
+        generation,
+        nodes: [...surface.nodes],
+        ...(originSeq === undefined ? {} : { originSeq }),
+      })
+      generation++
+      originSeq = event.seq
+    }
+    replay.push(event)
+  }
+  contexts.push({
+    generation,
+    nodes: [...surface.nodes],
+    ...(originSeq === undefined ? {} : { originSeq }),
+  })
+  return contexts
+}
+
+// History projection owns its node mapping so Chat's live adapter remains free
+// of inspection metadata and lifecycle coupling.
+/* jscpd:ignore-start */
+function materializeNode(
+  event: SessionEvent,
+  callIndex: ReadonlyMap<string, CallIndexEntry>,
+  resultView: ToolResultView | null,
+  assistantTiming: AssistantTiming | undefined,
+  requestConfig: AssistantRequestConfig | undefined,
+): ConversationNode {
+  switch (event.type) {
+    case 'user/message':
+      if (event.data.source.kind !== 'user') {
+        return {
+          kind: 'context', seq: event.seq, time: event.time,
+          content: event.data.content, source: event.data.source,
+        }
+      }
+      return {
+        kind: 'user', seq: event.seq, time: event.time,
+        content: event.data.content, source: event.data.source,
+      }
+    case 'assistant/message':
+      return {
+        kind: 'assistant', seq: event.seq, time: event.time,
+        turn: event.data.turn, step: event.data.step,
+        blocks: toAssistantBlocks(event.data.message.content), usage: event.data.usage,
+        provenance: {
+          provider: event.data.message.source.provider,
+          model: event.data.message.source.model,
+        },
+        ...(requestConfig === undefined ? {} : { requestConfig }),
+        ...(assistantTiming === undefined ? {} : { timing: assistantTiming }),
+      }
+    case 'steering/message':
+      return {
+        kind: 'steering', seq: event.seq, time: event.time, turn: event.data.turn,
+        content: event.data.message.content, source: event.data.message.source,
+      }
+    case 'tool/result': {
+      const result = event.data.message.content[0]
+      const callId = String(event.data.message.source.callId)
+      const call = callIndex.get(callId)
+      return {
+        kind: 'tool-result', seq: event.seq, time: event.time,
+        callId,
+        call: call === undefined ? null : { name: call.name, argsRaw: call.argsRaw },
+        callTime: call?.time ?? null,
+        content: result.content, isError: result.isError === true,
+        ...(event.data.error === undefined ? {} : { error: event.data.error }),
+        meta: event.data.meta,
+        callView: call?.callView ?? null,
+        resultView,
+      }
+    }
+    default:
+      return {
+        kind: 'unknown', seq: event.seq, time: event.time,
+        type: event.type, data: (event as { data?: unknown }).data,
+      }
+  }
+}
+/* jscpd:ignore-end */
+
+function projectTransient(entries: readonly HistoryEntry[]): Pick<
+  ConversationHistoryProjection,
+  'interruptedNodes' | 'partial' | 'runningCalls' | 'codeDispatches'
+> {
+  let partial: PartialAccumulator | null = null
+  const openCalls = new Map<string, RunningToolCall>()
+  const interruptedNodes: ConversationNode[] = []
+  const codeDispatches = new Map<string, readonly CodeSubCall[]>()
+
+  for (const entry of entries) {
+    const { event } = entry
+    if ((event.type as string) === 'tool/code-dispatch-start') {
+      const data = event.data as unknown as {
+        parentCallId: string
+        subCallId: string
+        name: string
+        arguments: unknown
+      }
+      const siblings = codeDispatches.get(data.parentCallId) ?? []
+      // The independent replay emits the same public running-call shape as
+      // Chat without reading or mutating Session's live index.
+      /* jscpd:ignore-start */
+      codeDispatches.set(data.parentCallId, [...siblings, {
+        callId: data.subCallId,
+        name: data.name,
+        argsRaw: JSON.stringify(data.arguments),
+        turn: 0,
+        step: 0,
+        time: event.time,
+        callView: null,
+      }])
+      /* jscpd:ignore-end */
+      continue
+    }
+    if ((event.type as string) === 'tool/code-dispatch') {
+      const data = event.data as unknown as {
+        parentCallId: string
+        subCallId: string
+        name: string
+        arguments: unknown
+        isError: boolean
+        content: ContentBlock[]
+      }
+      const siblings = codeDispatches.get(data.parentCallId) ?? []
+      const at = siblings.findIndex(sub => sub.callId === data.subCallId)
+      const started = at === -1 ? undefined : siblings[at]
+      // History independently reproduces the public settled-call shape instead
+      // of consuming Session's live code-dispatch projection.
+      /* jscpd:ignore-start */
+      const settled: CodeSubCall = {
+        kind: 'tool-result', seq: event.seq, time: event.time,
+        callId: data.subCallId,
+        call: { name: data.name, argsRaw: JSON.stringify(data.arguments) },
+        callTime: started?.time ?? null,
+        content: data.content,
+        isError: data.isError,
+        callView: null,
+        resultView: null,
+      }
+      codeDispatches.set(
+        data.parentCallId,
+        at === -1
+          ? [...siblings, settled]
+          : siblings.map((sub, index) => index === at ? settled : sub),
+      )
+      /* jscpd:ignore-end */
+      continue
+    }
+    switch (event.type) {
+      case 'assistant/chunk': {
+        const { turn, step, chunk } = event.data
+        if (partial === null || partial.turn !== turn || partial.step !== step) {
+          partial = new PartialAccumulator(turn, step)
+        }
+        partial.push(chunk)
+        break
+      }
+      case 'assistant/message':
+        if (partial?.turn === event.data.turn && partial.step === event.data.step) partial = null
+        break
+      case 'tool/call':
+        // History reconstructs its own in-flight index; this intentionally
+        // mirrors the published Chat node shape, not Chat's mutable state.
+        /* jscpd:ignore-start */
+        openCalls.set(String(event.data.callId), {
+          callId: String(event.data.callId),
+          name: event.data.name,
+          argsRaw: event.data.arguments,
+          turn: event.data.turn,
+          step: event.data.step,
+          time: event.time,
+          callView: entry.view?.for === 'call' ? entry.view.view : null,
+        })
+        /* jscpd:ignore-end */
+        break
+      case 'tool/result':
+        openCalls.delete(String(event.data.message.source.callId))
+        break
+      case 'turn/end': {
+        if (partial !== null && partial.turn === event.data.turn) {
+          const { blocks } = partial.toPartial()
+          const visible = blocks.some(block =>
+            block.kind === 'text' || block.kind === 'reasoning' ? block.text !== '' : true)
+          if (visible) {
+            interruptedNodes.push({
+              kind: 'assistant', seq: event.seq - 0.9, time: event.time,
+              turn: partial.turn, step: partial.step, blocks, interrupted: true,
+            })
+          }
+          partial = null
+        }
+        let callOffset = 0
+        for (const [callId, call] of openCalls) {
+          if (call.turn !== event.data.turn) continue
+          openCalls.delete(callId)
+          // Interrupted terminal nodes are reconstructed independently so a
+          // Trajectory replay cannot observe Session's frozen-node lifecycle.
+          /* jscpd:ignore-start */
+          interruptedNodes.push({
+            kind: 'tool-result', seq: event.seq - 0.8 + callOffset++ * 0.01,
+            time: event.time,
+            callId,
+            call: { name: call.name, argsRaw: call.argsRaw },
+            callTime: call.time,
+            content: [],
+            isError: true,
+            error: { name: 'Interrupted', code: 'interrupted' },
+            callView: call.callView,
+            resultView: null,
+          })
+          /* jscpd:ignore-end */
+        }
+        break
+      }
+      default:
+        break
+    }
+  }
+
+  return {
+    interruptedNodes,
+    partial: partial?.toPartial() ?? null,
+    runningCalls: [...openCalls.values()],
+    codeDispatches,
+  }
+}
+
+/**
+ * Project one immutable history ledger without reading or mutating Chat state.
+ * @param entries - Contiguous history entries in sequence order.
+ * @returns Event order, context lineage, and transient tail state.
+ */
+export function projectConversationHistory(
+  entries: readonly HistoryEntry[],
+): ConversationHistoryProjection {
+  const events = entries.map(entry => entry.event)
+  const baseSeq = events[0]?.seq ?? 0
+  const padded = [
+    ...Array.from({ length: baseSeq }, (_, seq) => paddingEvent(seq)),
+    ...events,
+  ]
+  const callIndex = new Map<string, CallIndexEntry>()
+  const resultViews = new Map<number, ToolResultView>()
+  const assistantSteps = new Map<string, AssistantStepMetadata>()
+  const assistantTimings = new Map<number, AssistantTiming>()
+  const assistantRequestConfigs = new Map<number, AssistantRequestConfig>()
+  const promptsByContext = new Map<number, ConversationPromptSnapshot>()
+  let activeRequestConfig: AssistantRequestConfig | undefined
+  let activePrompt: ConversationPromptSnapshot | undefined
+  let contextGeneration = 0
+
+  for (const [index, event] of events.entries()) {
+    const view = entries[index]?.view
+    if (event.type === 'tool/call') {
+      callIndex.set(String(event.data.callId), {
+        name: event.data.name,
+        argsRaw: event.data.arguments,
+        time: event.time,
+        callView: view?.for === 'call' ? view.view : null,
+      })
+    } else if (event.type === 'tool/result' && view?.for === 'result') {
+      resultViews.set(event.seq, view.view)
+    }
+    if (isSurfaceEvent(event) && event.surfaceOp !== 'append') {
+      contextGeneration++
+      if (activePrompt !== undefined) promptsByContext.set(contextGeneration, activePrompt)
+    }
+    if (event.type === 'request/header') {
+      activeRequestConfig = event.data.header.config
+      activePrompt = {
+        config: event.data.header.config,
+        system: event.data.header.system ?? '',
+        tools: event.data.header.tools ?? [],
+      }
+      promptsByContext.set(contextGeneration, activePrompt)
+    } else if (event.type === 'step/start') {
+      assistantSteps.set(
+        assistantStepKey(event.data.turn, event.data.step),
+        { stepStartTime: event.time, firstTokenTime: null },
+      )
+    } else if (event.type === 'assistant/chunk' && isTokenDelta(event.data.chunk)) {
+      const key = assistantStepKey(event.data.turn, event.data.step)
+      const current = assistantSteps.get(key) ?? {
+        stepStartTime: null,
+        firstTokenTime: null,
+      }
+      if (current.firstTokenTime === null) {
+        assistantSteps.set(key, { ...current, firstTokenTime: event.time })
+      }
+    } else if (event.type === 'assistant/message') {
+      assistantTimings.set(
+        event.seq,
+        {
+          ...(assistantSteps.get(assistantStepKey(event.data.turn, event.data.step)) ?? {
+            stepStartTime: null,
+            firstTokenTime: null,
+          }),
+          completedTime: event.time,
+        },
+      )
+      if (activeRequestConfig !== undefined) {
+        assistantRequestConfigs.set(event.seq, activeRequestConfig)
+      }
+    }
+  }
+
+  const nodeCache = new Map<number, ConversationNode>()
+  const materialize = (seq: number): ConversationNode | undefined => {
+    const cached = nodeCache.get(seq)
+    if (cached !== undefined) return cached
+    const event = padded[seq]
+    if (event === undefined || !isSurfaceEligibleType(event.type)) return
+    const node = materializeNode(
+      event,
+      callIndex,
+      resultViews.get(seq) ?? null,
+      assistantTimings.get(seq),
+      assistantRequestConfigs.get(seq),
+    )
+    nodeCache.set(seq, node)
+    return node
+  }
+  const eventNodes = events.flatMap((event) => {
+    const node = materialize(event.seq)
+    return node === undefined ? [] : [node]
+  })
+
+  let contexts: readonly ConversationContext[]
+  if (events.some(event => replacementCrossesWindowHead(event, baseSeq))) {
+    contexts = [{
+      id: 0,
+      ...(activePrompt === undefined ? {} : { prompt: activePrompt }),
+      nodes: eventNodes,
+    }]
+  } else {
+    try {
+      contexts = foldContexts(padded).map((context): ConversationContext => {
+        const nodes = context.nodes.flatMap((seq) => {
+          const node = materialize(seq)
+          return node === undefined ? [] : [node]
+        })
+        const prompt = promptsByContext.get(context.generation)
+        if (context.originSeq === undefined) {
+          return {
+            id: context.generation,
+            ...(prompt === undefined ? {} : { prompt }),
+            nodes,
+          }
+        }
+        const originEvent = padded[context.originSeq]
+        return {
+          id: context.generation,
+          parentId: context.generation - 1,
+          origin: contextOriginKind(originEvent),
+          originSeq: context.originSeq,
+          ...(originEvent === undefined ? {} : { createdAt: originEvent.time }),
+          ...(prompt === undefined ? {} : { prompt }),
+          nodes,
+        }
+      })
+    } catch (error) {
+      console.error('[web-runtime] history surface fold failed, using event order:', error)
+      contexts = [{
+        id: 0,
+        ...(activePrompt === undefined ? {} : { prompt: activePrompt }),
+        nodes: eventNodes,
+      }]
+    }
+  }
+
+  return {
+    eventNodes,
+    contexts,
+    ...projectTransient(entries),
+  }
+}

packages/client/runtime/src/client/session-history/service.ts

@@ -0,0 +1,66 @@
+import type { Context } from 'cordis'
+import type {
+  HostFrame, IApiClient, MuxFrame, RpcRequest, SessionId,
+} from '@deepseek-ai/dsh-client-connection/client'
+import type {
+  ISessionHistory, SessionHistoryFace,
+} from '../contract/session-history.ts'
+import { SessionHistorySource } from './source.ts'
+
+/** Root registry and frame router for independent inspection histories. */
+export class SessionHistoryService implements ISessionHistory {
+  private readonly sources = new Map<SessionId, SessionHistorySource>()
+
+  /**
+   * @param ctx - Client root context.
+   * @param api - Shared wire client.
+   */
+  constructor(ctx: Context, private readonly api: IApiClient) {
+    ctx.reflect.provide('sessionHistory', this, undefined)
+  }
+
+  /**
+   * Resolve one identity-stable history source.
+   * @param sessionId - Host session identity.
+   * @returns Source independent from SessionManager.
+   */
+  source(sessionId: SessionId): SessionHistoryFace {
+    let source = this.sources.get(sessionId)
+    if (source === undefined) {
+      source = new SessionHistorySource(sessionId, this.api)
+      this.sources.set(sessionId, source)
+    }
+    return source
+  }
+
+  /**
+   * Route history-relevant mux frames only to an existing source.
+   * @param envelope - Validated mux envelope.
+   */
+  handleMuxEnvelope(envelope: RpcRequest<MuxFrame>): void {
+    const frame = envelope.payload
+    if (frame.type === 'stream/error') return
+    this.sources.get(frame.sessionId)?.handleMuxFrame(frame)
+  }
+
+  /**
+   * Drop a removed session's independent history source.
+   * @param envelope - Validated host envelope.
+   */
+  handleHostEnvelope(envelope: RpcRequest<HostFrame>): void {
+    const frame = envelope.payload
+    if (frame.type !== 'host/session-removed') return
+    this.sources.get(frame.sessionId)?.dispose()
+    this.sources.delete(frame.sessionId)
+  }
+
+  /** Invalidate requests from the dead connection generation. */
+  handleDisconnected(): void {
+    for (const source of this.sources.values()) source.handleDisconnected()
+  }
+
+  /** Rebuild every previously activated source from the new generation. */
+  handleConnected(): void {
+    for (const source of this.sources.values()) source.resync()
+  }
+}

packages/client/runtime/src/client/session-history/source.ts

@@ -0,0 +1,352 @@
+import type {
+  HistoryEntry, IApiClient, MuxFrame, RpcError, SessionId,
+} from '@deepseek-ai/dsh-client-connection/client'
+import { transportError } from '@deepseek-ai/dsh-host-apiproxy/api'
+import type {
+  SessionHistoryFace, SessionHistorySnapshot,
+} from '../contract/session-history.ts'
+import { createHistoryInspection } from '../sessions/history.ts'
+import { Notifier } from '../sessions/notifier.ts'
+
+const HISTORY_PAGE_MESSAGES = 50
+
+function isAborted(signal: AbortSignal | undefined): boolean {
+  return signal?.aborted === true
+}
+
+/** Independent raw-history owner used only by inspection consumers. */
+export class SessionHistorySource implements SessionHistoryFace {
+  private entries: readonly HistoryEntry[] = []
+  private baseSeq = 0
+  private hasMore = false
+  private state: SessionHistorySnapshot['state'] = 'cold'
+  private error: RpcError | null = null
+  private generation = 0
+  private persistentConsumer = false
+  private readonly consumerSignals = new Set<AbortSignal>()
+  private openPromise: Promise<void> | null = null
+  private olderPromise: Promise<void> | null = null
+  private stitching = false
+  private liveBuffer: HistoryEntry[] = []
+  private subscribedLastSeq: number | null = null
+  private inspectionCache: {
+    entries: readonly HistoryEntry[]
+    value: SessionHistorySnapshot['inspection']
+  } | null = null
+  private snapshotCache: SessionHistorySnapshot
+  private readonly notifier = new Notifier(() => {
+    this.snapshotCache = this.buildSnapshot()
+  })
+
+  /**
+   * @param sessionId - Host session identity.
+   * @param api - Shared wire client.
+   */
+  constructor(
+    readonly sessionId: SessionId,
+    private readonly api: IApiClient,
+  ) {
+    this.snapshotCache = this.buildSnapshot()
+  }
+
+  /**
+   * Subscribe to ledger changes.
+   * @param listener - Change callback.
+   * @returns Unsubscribe function.
+   */
+  subscribe(listener: () => void): () => void {
+    return this.notifier.subscribe(listener)
+  }
+
+  /**
+   * Read the cached ledger snapshot.
+   * @returns Stable snapshot until the source changes.
+   */
+  getSnapshot(): SessionHistorySnapshot {
+    this.notifier.ensureFresh()
+    return this.snapshotCache
+  }
+
+  /**
+   * Load the tail and exhaust all available older pages.
+   * @param signal - Consumer lifetime.
+   * @returns When paging completes, fails to advance, or is aborted.
+   */
+  async loadAll(signal?: AbortSignal): Promise<void> {
+    if (signal?.aborted === true) return
+    this.trackConsumer(signal)
+    await this.open()
+    while (
+      !isAborted(signal)
+      && this.state === 'ready'
+      && this.hasMore
+    ) {
+      const previousBaseSeq = this.baseSeq
+      await this.loadOlder()
+      if (isAborted(signal) || this.baseSeq === previousBaseSeq) return
+    }
+  }
+
+  /** Rebuild and page for whichever mounted consumers survive a reconnect. */
+  private async loadForConsumers(): Promise<void> {
+    await this.open()
+    while (
+      this.hasConsumer()
+      && this.state === 'ready'
+      && this.hasMore
+    ) {
+      const previousBaseSeq = this.baseSeq
+      await this.loadOlder()
+      if (!this.hasConsumer() || this.baseSeq === previousBaseSeq) return
+    }
+  }
+
+  /**
+   * Route a relevant mux frame without involving the Chat session.
+   * @param frame - Session-addressed frame.
+   */
+  handleMuxFrame(frame: MuxFrame): void {
+    if (frame.type === 'session/subscribed') {
+      this.subscribedLastSeq = frame.lastSeq
+      return
+    }
+    if (frame.type !== 'session/event') return
+    this.acceptLive({ event: frame.event, ...(frame.view === undefined ? {} : { view: frame.view }) })
+  }
+
+  /** Invalidate dead-generation requests while retaining the last readable snapshot. */
+  handleDisconnected(): void {
+    this.generation++
+    this.openPromise = null
+    this.olderPromise = null
+    this.stitching = false
+    this.liveBuffer = []
+    this.subscribedLastSeq = null
+    if (this.state !== 'cold') {
+      this.state = 'cold'
+      this.error = null
+      this.notifier.markDirty()
+    }
+  }
+
+  /** Rebuild an activated ledger from the new connection generation. */
+  resync(): void {
+    if (!this.hasConsumer()) return
+    this.generation++
+    this.openPromise = null
+    this.olderPromise = null
+    this.stitching = false
+    this.liveBuffer = []
+    this.subscribedLastSeq = null
+    this.entries = []
+    this.baseSeq = 0
+    this.hasMore = false
+    this.state = 'cold'
+    this.error = null
+    this.notifier.markDirty()
+    void this.loadForConsumers()
+  }
+
+  /** Stop future refresh work after the host removes the session. */
+  dispose(): void {
+    this.persistentConsumer = false
+    this.consumerSignals.clear()
+    this.generation++
+    this.openPromise = null
+    this.olderPromise = null
+    this.liveBuffer = []
+  }
+
+  private open(): Promise<void> {
+    if (this.state === 'ready') return Promise.resolve()
+    if (this.openPromise !== null) return this.openPromise
+    const generation = this.generation
+    const operation = this.doOpen(generation)
+    const settled = operation.finally(() => {
+      if (this.openPromise === settled) this.openPromise = null
+    })
+    this.openPromise = settled
+    return settled
+  }
+
+  private trackConsumer(signal: AbortSignal | undefined): void {
+    if (signal === undefined) {
+      this.persistentConsumer = true
+      return
+    }
+    if (this.consumerSignals.has(signal)) return
+    this.consumerSignals.add(signal)
+    signal.addEventListener('abort', () => {
+      this.consumerSignals.delete(signal)
+    }, { once: true })
+  }
+
+  private hasConsumer(): boolean {
+    return this.persistentConsumer || this.consumerSignals.size > 0
+  }
+
+  private async doOpen(generation: number): Promise<void> {
+    this.state = 'loading'
+    this.error = null
+    this.notifier.markDirty()
+    try {
+      let { result } = await this.api.sessions.history({
+        sessionId: this.sessionId,
+        maxMessages: HISTORY_PAGE_MESSAGES,
+      })
+      if (generation !== this.generation) return
+      if (!result.ok) {
+        this.state = 'error'
+        this.error = result.error
+        return
+      }
+      this.installTail(result.value.events, result.value.hasMore, true)
+      const tailSeq = this.tailSeq()
+      if (
+        this.subscribedLastSeq !== null
+        && tailSeq !== null
+        && this.subscribedLastSeq > tailSeq
+      ) {
+        result = (await this.api.sessions.history({
+          sessionId: this.sessionId,
+          maxMessages: HISTORY_PAGE_MESSAGES,
+        })).result
+        if (generation !== this.generation) return
+        if (result.ok) this.installTail(result.value.events, result.value.hasMore, true)
+      }
+      this.state = 'ready'
+    } catch (error) {
+      if (generation !== this.generation) return
+      this.state = 'error'
+      const folded = transportError<never>(error)
+      /* v8 ignore next -- transportError always returns the error branch. */
+      this.error = folded.ok ? null : folded.error
+    } finally {
+      if (generation === this.generation) this.notifier.markDirty()
+    }
+  }
+
+  private loadOlder(): Promise<void> {
+    if (this.olderPromise !== null) return this.olderPromise
+    if (this.state !== 'ready' || !this.hasMore) return Promise.resolve()
+    const generation = this.generation
+    const operation = (async () => {
+      try {
+        const { result } = await this.api.sessions.history({
+          sessionId: this.sessionId,
+          beforeSeq: this.baseSeq,
+          maxMessages: HISTORY_PAGE_MESSAGES,
+        })
+        if (generation !== this.generation || this.state !== 'ready' || !result.ok) return
+        const older = result.value.events
+        if (older.length === 0) {
+          this.hasMore = result.value.hasMore
+          return
+        }
+        const tail = older.at(-1)
+        if (tail === undefined || tail.event.seq + 1 !== this.baseSeq) {
+          console.error(
+            `[web-runtime] inspection history page discontinuous: tail seq ${tail?.event.seq} vs baseSeq ${this.baseSeq}`,
+          )
+          this.hasMore = false
+          return
+        }
+        this.entries = [...older, ...this.entries]
+        this.baseSeq = older[0]?.event.seq ?? this.baseSeq
+        this.hasMore = result.value.hasMore
+      } catch (error) {
+        console.error('[web-runtime] inspection history paging failed:', error)
+      }
+    })()
+    const settled = operation.finally(() => {
+      if (this.olderPromise !== settled) return
+      this.olderPromise = null
+      this.notifier.markDirty()
+    })
+    this.olderPromise = settled
+    return settled
+  }
+
+  private installTail(
+    tail: readonly HistoryEntry[],
+    hasMore: boolean,
+    replace: boolean,
+  ): void {
+    if (replace) {
+      this.entries = [...tail]
+      this.hasMore = hasMore
+    } else {
+      const firstSeq = tail[0]?.event.seq
+      const prefix = firstSeq === undefined
+        ? this.entries
+        : this.entries.filter(entry => entry.event.seq < firstSeq)
+      this.entries = [...prefix, ...tail]
+    }
+    this.baseSeq = this.entries[0]?.event.seq ?? 0
+    const buffered = this.liveBuffer
+    this.liveBuffer = []
+    for (const entry of buffered) this.appendLive(entry)
+    this.notifier.markDirty()
+  }
+
+  private acceptLive(entry: HistoryEntry): void {
+    if (this.state === 'loading' || this.stitching) {
+      this.liveBuffer.push(entry)
+      return
+    }
+    if (this.state !== 'ready') return
+    const tailSeq = this.tailSeq()
+    if (tailSeq !== null && entry.event.seq > tailSeq + 1) {
+      this.liveBuffer.push(entry)
+      void this.repairGap()
+      return
+    }
+    this.appendLive(entry)
+    this.notifier.markDirty()
+  }
+
+  private appendLive(entry: HistoryEntry): void {
+    const tailSeq = this.tailSeq()
+    if (tailSeq !== null && entry.event.seq <= tailSeq) return
+    this.entries = [...this.entries, entry]
+  }
+
+  private async repairGap(): Promise<void> {
+    if (this.stitching) return
+    this.stitching = true
+    const generation = this.generation
+    try {
+      const { result } = await this.api.sessions.history({
+        sessionId: this.sessionId,
+        maxMessages: HISTORY_PAGE_MESSAGES,
+      })
+      if (result.ok && generation === this.generation && this.state === 'ready') {
+        this.installTail(result.value.events, result.value.hasMore, false)
+      }
+    } catch (error) {
+      console.error('[web-runtime] inspection history gap repair failed:', error)
+    } finally {
+      if (generation === this.generation) this.stitching = false
+    }
+  }
+
+  private tailSeq(): number | null {
+    return this.entries.at(-1)?.event.seq ?? null
+  }
+
+  private buildSnapshot(): SessionHistorySnapshot {
+    if (this.inspectionCache?.entries !== this.entries) {
+      const entries = this.entries
+      this.inspectionCache = {
+        entries,
+        value: createHistoryInspection(() => entries),
+      }
+    }
+    return {
+      state: this.state,
+      error: this.error,
+      hasMore: this.hasMore,
+      inspection: this.inspectionCache.value,
+    }
+  }
+}

packages/client/runtime/src/client/sessions/conversation-context.ts

@@ -0,0 +1,23 @@
+import type { ConversationNode } from './conversation.ts'
+import type { ConversationPromptSnapshot } from './request-inspection.ts'
+
+/** Operation that started a new append-only model context. */
+export type ConversationContextOriginKind = 'compaction' | 'rewind' | 'rewrite'
+
+/** One immutable model-context generation reconstructed from surface replacements. */
+export interface ConversationContext {
+  /** Zero-based generation within the session; stable across later appends. */
+  id: number
+  /** Previous generation in this session; absent for the initial context. */
+  parentId?: number
+  /** Why this generation exists; absent for the initial context. */
+  origin?: ConversationContextOriginKind
+  /** Event seq of the replacement that created this generation. */
+  originSeq?: number
+  /** Unix epoch ms of the replacement that created this generation. */
+  createdAt?: number
+  /** Latest request header observed in this generation, inherited until a later header replaces it. */
+  prompt?: ConversationPromptSnapshot
+  /** Final frozen nodes for historical generations, or current folded nodes for the tail. */
+  nodes: readonly ConversationNode[]
+}

packages/client/runtime/src/client/sessions/conversation.ts

@@ -10,9 +10,26 @@ import type {
   RpcError, SessionId, ToolCallView, ToolResultView,
 } from '@deepseek-ai/dsh-client-connection/client'
 import type { PendingInteraction } from './pending.ts'
-
 export type { TodoItem }
 
+/** Request configuration recorded for one provider call. */
+export interface AssistantRequestConfig {
+  provider: string
+  model: string
+  purpose?: string
+  thinking?: string
+  reasoningEffort?: string
+  temperature?: number
+  maxTokens?: number
+  stop?: readonly string[]
+}
+
+/** Stable provider/model identity reported for one completed request. */
+export interface AssistantProvenanceView {
+  provider: string
+  model: string
+}
+
 /** Assistant content blocks sorted by what the UI cares about
  *  (text body / collapsible reasoning / tool-call card head / other fallback). */
 export type AssistantBlock =
@@ -54,6 +71,16 @@ export interface UserMessageNode {
   source: unknown
 }
 
+/** Recorded boundaries used to derive assistant latency and throughput. */
+export interface AssistantTiming {
+  /** Matching step/start timestamp, or null when it is outside the current event window. */
+  stepStartTime: number | null
+  /** First non-empty text/reasoning/tool delta timestamp, or null when no token delta was recorded. */
+  firstTokenTime: number | null
+  /** Final assistant/message timestamp. */
+  completedTime: number
+}
+
 /** A finalized (or interruption-frozen) assistant message. */
 export interface AssistantMessageNode {
   kind: 'assistant'
@@ -64,6 +91,10 @@ export interface AssistantMessageNode {
   step: number
   blocks: readonly AssistantBlock[]
   usage?: unknown
+  provenance?: AssistantProvenanceView
+  requestConfig?: AssistantRequestConfig
+  /** Timing derived from the recorded step/chunk/message event sequence. */
+  timing?: AssistantTiming
   /** Frozen partial of an aborted turn (no finalize ever arrives): rendered with a 已停止 marker.
    *  Synthetic seq (fractional, derived from the turn/end seq) keeps it ordered inside the flow. */
   interrupted?: true

packages/client/runtime/src/client/sessions/fold-adapter.ts

@@ -7,7 +7,9 @@ import type { SessionEvent } from '@deepseek-ai/dsh-session/types'
 // Subpath export (package.json exports "./surface", alias added for this): all value imports
 // go through it — the package root points at lib/index.js (needs a build) which the vite
 // browser bundle cannot resolve; surface.ts has no Node dependencies.
-import { SurfaceManager, isSurfaceEligibleType } from '@deepseek-ai/dsh-session/surface'
+import {
+  SurfaceManager, isSurfaceEligibleType, isSurfaceEvent,
+} from '@deepseek-ai/dsh-session/surface'
 import type { CommandId } from '@deepseek-ai/dsh-commands/brand'
 import type { ToolCallView, ToolEventView, ToolResultView } from '@deepseek-ai/dsh-client-connection/client'
 import type { CommandNode, ConversationNode } from './conversation.ts'
@@ -33,6 +35,11 @@ function paddingEvent(seq: number): SessionEvent {
   return { type: 'noop/padding', seq, time: 0, data: {} } as unknown as SessionEvent
 }
 
+function replacementCrossesWindowHead(event: SessionEvent, baseSeq: number): boolean {
+  if (!isSurfaceEvent(event) || event.surfaceOp === 'append') return false
+  return event.surfaceOp.start < baseSeq || event.surfaceOp.end < baseSeq
+}
+
 /** One event -> UI node (pure function; the six-variant ConversationNode union). */
 function materializeNode(
   event: SessionEvent,
@@ -137,7 +144,7 @@ export class FoldAdapter {
     for (const event of events) this.padded.push(event)
     this.surface = new SurfaceManager(this.padded)
     this.nodeCache.clear()
-    this.degraded = false
+    this.degraded = events.some(event => replacementCrossesWindowHead(event, baseSeq))
     this.callIdx = new Map()
     this.resultViews.clear()
     this.commandIdx = new Map()
@@ -160,6 +167,7 @@ export class FoldAdapter {
   append(event: SessionEvent, view?: ToolEventView): void {
     this.rev++
     this.padded.push(event)
+    if (replacementCrossesWindowHead(event, this.baseSeq)) this.degraded = true
     this.indexCall(event, view)
     this.indexCommand(event)
   }

packages/client/runtime/src/client/sessions/history.ts

@@ -0,0 +1,66 @@
+import type { ToolSchema } from '@deepseek-ai/dsh-llm/types'
+import type { HistoryEntry } from '@deepseek-ai/dsh-client-connection/client'
+import type {
+  CodeSubCall, ConversationNode, PartialAssistant, RunningToolCall,
+} from './conversation.ts'
+import type { ConversationContext } from './conversation-context.ts'
+import { projectConversationHistory } from '../session-history/history-fold.ts'
+import { inspectRequests, type RequestView } from './request-inspection.ts'
+
+/** Lazily derived inspection data for one immutable session-history window. */
+export interface SessionHistoryInspection {
+  eventNodes: readonly ConversationNode[]
+  contexts: readonly ConversationContext[]
+  requests: readonly RequestView[]
+  callSchemas: ReadonlyMap<string, ToolSchema>
+  interruptedNodes: readonly ConversationNode[]
+  partial: PartialAssistant | null
+  runningCalls: readonly RunningToolCall[]
+  codeDispatches: ReadonlyMap<string, readonly CodeSubCall[]>
+}
+
+/**
+ * Create a lazy inspection projection over an immutable history window.
+ * Conversation consumers retain the cheap wrapper; only Trajectory snapshots
+ * the entries and replays event order and request lifecycle state.
+ * @param loadEntries - Lazily snapshots contiguous raw entries in sequence order.
+ * @returns Lazy, memoized inspection fields for that exact window.
+ */
+export function createHistoryInspection(
+  loadEntries: () => readonly HistoryEntry[],
+): SessionHistoryInspection {
+  let entries: readonly HistoryEntry[] | undefined
+  let conversation: ReturnType<typeof projectConversationHistory> | undefined
+  let requests: ReturnType<typeof inspectRequests> | undefined
+  const historyEntries = () => entries ??= loadEntries()
+  const conversationProjection = () =>
+    conversation ??= projectConversationHistory(historyEntries())
+  const requestProjection = () =>
+    requests ??= inspectRequests(historyEntries())
+  return {
+    get eventNodes() {
+      return conversationProjection().eventNodes
+    },
+    get contexts() {
+      return conversationProjection().contexts
+    },
+    get interruptedNodes() {
+      return conversationProjection().interruptedNodes
+    },
+    get partial() {
+      return conversationProjection().partial
+    },
+    get runningCalls() {
+      return conversationProjection().runningCalls
+    },
+    get codeDispatches() {
+      return conversationProjection().codeDispatches
+    },
+    get requests() {
+      return requestProjection().requests
+    },
+    get callSchemas() {
+      return requestProjection().callSchemas
+    },
+  }
+}

packages/client/runtime/src/client/sessions/request-inspection.ts

@@ -0,0 +1,401 @@
+// Request-centric inspection read model. Ordinary generation and compaction
+// calls share one chronological projection; presentation-specific grouping
+// remains in the trajectory consumer.
+
+import type { ContentBlock, TokenUsage, ToolSchema } from '@deepseek-ai/dsh-llm/types'
+import type { HistoryEntry } from '@deepseek-ai/dsh-client-connection/client'
+import type { SessionEvent } from '@deepseek-ai/dsh-session/types'
+import type {
+  AssistantProvenanceView, AssistantRequestConfig,
+} from './conversation.ts'
+
+export type {
+  AssistantProvenanceView, AssistantRequestConfig,
+} from './conversation.ts'
+
+/** Complete model-visible request header in force for an ordinary generation. */
+export interface ConversationPromptSnapshot {
+  /** Provider/model and sampling configuration from the effective request header. */
+  config: AssistantRequestConfig
+  /** Rendered system prompt text; empty when the request had no system prompt. */
+  system: string
+  /** Complete tool catalog sent with the request, including tools that were never called. */
+  tools: readonly ToolSchema[]
+}
+
+/** System/tool change introduced while preparing one ordinary request. */
+export interface RequestPromptChange {
+  /** Sequence of the request/header event that introduced this state. */
+  seq: number
+  /** Unix epoch ms from the request/header event. */
+  time: number
+  /** How the model-visible prompt differs from the previous recorded state. */
+  kind: 'initial' | 'system' | 'tools' | 'system-and-tools'
+  /** State immediately before this change; absent for the initial header. */
+  previous?: ConversationPromptSnapshot
+}
+
+/** One provider request reconstructed from durable request lifecycle events. */
+export interface RequestView {
+  /** Request category; compaction is a purpose, not a separate projection. */
+  purpose: 'assistant' | 'compaction'
+  /** Sequence that opened the operation represented by this request. */
+  startSeq: number
+  turn: number
+  /** Agent-loop step, or zero for a direct compaction request. */
+  step: number
+  startedAt: number
+  completedAt: number | null
+  status: 'running' | 'complete' | 'error'
+  error?: string
+  /** Effective ordinary request input, inherited until a later header changes it. */
+  prompt?: ConversationPromptSnapshot
+  /** Prompt change logged while preparing this request. */
+  promptChange?: RequestPromptChange
+  provenance?: AssistantProvenanceView
+  requestConfig?: AssistantRequestConfig
+  usage?: unknown
+  /** Assistant message or compaction summary sequence produced by this request. */
+  resultSeq?: number
+  /** Compaction replacement message sequence, when one was committed. */
+  replacementSeq?: number
+  /** Safe compaction summary projection. */
+  summary?: readonly ContentBlock[]
+  /** Complete compaction provider output before the safe projection. */
+  rawOutput?: readonly ContentBlock[]
+  /** Retry ordinal scheduled after a failed ordinary request. */
+  retry?: number
+  maxRetries?: number
+  retryDelayMs?: number
+}
+
+/** Immutable request-centric projection derived from one history window. */
+export interface RequestInspectionSnapshot {
+  requests: readonly RequestView[]
+  callSchemas: ReadonlyMap<string, ToolSchema>
+}
+
+/**
+ * Derive the request-centric read model from one immutable history window.
+ * Compaction participates as a request purpose rather than a parallel
+ * top-level collection.
+ * @param entries - Contiguous raw session history.
+ * @returns Requests and call-time schemas derived from that history.
+ */
+export function inspectRequests(
+  entries: readonly HistoryEntry[],
+): RequestInspectionSnapshot {
+  const events = entries.map(entry => entry.event)
+  return {
+    requests: deriveRequests(events),
+    callSchemas: deriveCallSchemas(events),
+  }
+}
+
+interface RetryEvent {
+  type: 'llm/retry'
+  seq: number
+  time: number
+  data: {
+    turn: number
+    step: number
+    retry: number
+    maxRetries: number
+    delayMs: number
+    failure: { message: string }
+  }
+}
+
+interface CompactionStartEvent {
+  type: 'compact/start'
+  seq: number
+  time: number
+  data: { turn: number }
+}
+
+interface CompactionSummaryEvent {
+  type: 'compact/summary'
+  seq: number
+  time: number
+  data: {
+    summary: readonly ContentBlock[]
+    rawOutput?: readonly ContentBlock[]
+    provider: string
+    model: string
+    maxTokens?: number
+    usage?: unknown
+  }
+}
+
+interface CompactionEndEvent {
+  type: 'compact/end'
+  seq: number
+  time: number
+  data: { turn: number; error?: string }
+}
+
+function requestKey(turn: number, step: number): string {
+  return `${turn}\u0000${step}`
+}
+
+function addTokenUsage(current: unknown, next: TokenUsage): TokenUsage {
+  const previous = current as TokenUsage | undefined
+  return {
+    inputTokens: (previous?.inputTokens ?? 0) + next.inputTokens,
+    outputTokens: (previous?.outputTokens ?? 0) + next.outputTokens,
+    ...(previous?.cacheReadTokens === undefined && next.cacheReadTokens === undefined
+      ? {}
+      : {
+        cacheReadTokens:
+          (previous?.cacheReadTokens ?? 0) + (next.cacheReadTokens ?? 0),
+      }),
+    ...(previous?.cacheWriteTokens === undefined && next.cacheWriteTokens === undefined
+      ? {}
+      : {
+        cacheWriteTokens:
+          (previous?.cacheWriteTokens ?? 0) + (next.cacheWriteTokens ?? 0),
+      }),
+    ...(previous?.reasoningTokens === undefined && next.reasoningTokens === undefined
+      ? {}
+      : {
+        reasoningTokens:
+          (previous?.reasoningTokens ?? 0) + (next.reasoningTokens ?? 0),
+      }),
+  }
+}
+
+function deriveCallSchemas(
+  events: readonly SessionEvent[],
+): ReadonlyMap<string, ToolSchema> {
+  let active = new Map<string, ToolSchema>()
+  const calls = new Map<string, ToolSchema>()
+  const capture = (callId: string, name: string): void => {
+    if (calls.has(callId)) return
+    const schema = active.get(name)
+    if (schema !== undefined) calls.set(callId, schema)
+  }
+  for (const event of events) {
+    if (event.type === 'request/header') {
+      const tools: unknown = event.data.header.tools
+      active = new Map(
+        Array.isArray(tools)
+          ? (tools as ToolSchema[]).map(schema => [schema.name, schema])
+          : [],
+      )
+      continue
+    }
+    if (event.type === 'tool/call') {
+      capture(String(event.data.callId), event.data.name)
+      continue
+    }
+    const type = event.type as string
+    if (type === 'tool/code-dispatch-start' || type === 'tool/code-dispatch') {
+      const data = event.data as unknown as { subCallId: string; name: string }
+      capture(data.subCallId, data.name)
+    }
+  }
+  return calls
+}
+
+function promptChange(
+  previous: ConversationPromptSnapshot | undefined,
+  prompt: ConversationPromptSnapshot,
+  event: SessionEvent<'request/header'>,
+): RequestPromptChange | undefined {
+  const systemChanged = previous !== undefined && previous.system !== prompt.system
+  const toolsChanged = previous !== undefined
+    && JSON.stringify(previous.tools) !== JSON.stringify(prompt.tools)
+  if (previous !== undefined && !systemChanged && !toolsChanged) return
+  return {
+    seq: event.seq,
+    time: event.time,
+    kind: previous === undefined
+      ? 'initial'
+      : systemChanged && toolsChanged
+        ? 'system-and-tools'
+        : systemChanged
+          ? 'system'
+          : 'tools',
+    ...(previous === undefined ? {} : { previous }),
+  }
+}
+
+/** Project ordinary and compaction provider calls into one chronological request stream. */
+function deriveRequests(events: readonly SessionEvent[]): readonly RequestView[] {
+  const requests: RequestView[] = []
+  const ordinaryByStep = new Map<string, number>()
+  let activeStep: string | undefined
+  let activePrompt: ConversationPromptSnapshot | undefined
+  let activeCompaction: number | undefined
+
+  const update = (index: number | undefined, change: Partial<RequestView>): void => {
+    if (index === undefined) return
+    const request = requests[index]
+    if (request !== undefined) requests[index] = { ...request, ...change }
+  }
+
+  for (const sourceEvent of events) {
+    if (sourceEvent.type === 'step/start') {
+      const { turn, step } = sourceEvent.data
+      const key = requestKey(turn, step)
+      ordinaryByStep.set(key, requests.length)
+      requests.push({
+        purpose: 'assistant',
+        startSeq: sourceEvent.seq,
+        turn,
+        step,
+        startedAt: sourceEvent.time,
+        completedAt: null,
+        status: 'running',
+        ...(activePrompt === undefined
+          ? {}
+          : { prompt: activePrompt, requestConfig: activePrompt.config }),
+      })
+      activeStep = key
+      continue
+    }
+    if (sourceEvent.type === 'request/header') {
+      const tools: unknown = sourceEvent.data.header.tools
+      const prompt: ConversationPromptSnapshot = {
+        config: sourceEvent.data.header.config,
+        system: sourceEvent.data.header.system ?? '',
+        tools: Array.isArray(tools) ? tools as ToolSchema[] : [],
+      }
+      const change = promptChange(activePrompt, prompt, sourceEvent)
+      activePrompt = prompt
+      update(activeStep === undefined ? undefined : ordinaryByStep.get(activeStep), {
+        prompt,
+        requestConfig: prompt.config,
+        ...(change === undefined ? {} : { promptChange: change }),
+      })
+      continue
+    }
+    if (
+      sourceEvent.type === 'assistant/chunk'
+      && sourceEvent.data.chunk.type === 'usage'
+    ) {
+      const index = ordinaryByStep.get(
+        requestKey(sourceEvent.data.turn, sourceEvent.data.step),
+      )
+      const request = index === undefined ? undefined : requests[index]
+      update(index, {
+        usage: addTokenUsage(request?.usage, sourceEvent.data.chunk.usage),
+      })
+      continue
+    }
+    if (sourceEvent.type === 'assistant/message') {
+      const index = ordinaryByStep.get(
+        requestKey(sourceEvent.data.turn, sourceEvent.data.step),
+      )
+      const request = index === undefined ? undefined : requests[index]
+      update(index, {
+        completedAt: sourceEvent.time,
+        status: 'complete',
+        resultSeq: sourceEvent.seq,
+        provenance: {
+          provider: sourceEvent.data.message.source.provider,
+          model: sourceEvent.data.message.source.model,
+        },
+        ...(request?.usage !== undefined || sourceEvent.data.usage === undefined
+          ? {}
+          : { usage: sourceEvent.data.usage }),
+      })
+      continue
+    }
+    if (sourceEvent.type === 'step/end') {
+      const key = requestKey(sourceEvent.data.turn, sourceEvent.data.step)
+      const index = ordinaryByStep.get(key)
+      const request = index === undefined ? undefined : requests[index]
+      if (request?.status === 'running') {
+        update(index, {
+          completedAt: sourceEvent.time,
+          status: 'error',
+        })
+      }
+      if (activeStep === key) activeStep = undefined
+      continue
+    }
+    if ((sourceEvent.type as string) === 'llm/retry') {
+      const event = sourceEvent as unknown as RetryEvent
+      update(ordinaryByStep.get(requestKey(event.data.turn, event.data.step)), {
+        status: 'error',
+        error: event.data.failure.message,
+        retry: event.data.retry,
+        maxRetries: event.data.maxRetries,
+        retryDelayMs: event.data.delayMs,
+      })
+      continue
+    }
+    if (sourceEvent.type === 'turn/end' && sourceEvent.data.reason.kind === 'error') {
+      const reason = sourceEvent.data.reason
+      update(ordinaryByStep.get(requestKey(sourceEvent.data.turn, reason.step)), {
+        status: 'error',
+        error: 'failure' in reason ? reason.failure.message : reason.message,
+      })
+      continue
+    }
+
+    const type = sourceEvent.type as string
+    if (type === 'compact/start') {
+      const event = sourceEvent as unknown as CompactionStartEvent
+      activeCompaction = requests.length
+      requests.push({
+        purpose: 'compaction',
+        startSeq: event.seq,
+        turn: event.data.turn,
+        step: 0,
+        startedAt: event.time,
+        completedAt: null,
+        status: 'running',
+      })
+      continue
+    }
+    if (type === 'compact/summary' && activeCompaction !== undefined) {
+      const event = sourceEvent as unknown as CompactionSummaryEvent
+      update(activeCompaction, {
+        resultSeq: event.seq,
+        summary: event.data.summary,
+        ...(event.data.rawOutput === undefined ? {} : { rawOutput: event.data.rawOutput }),
+        provenance: {
+          provider: event.data.provider,
+          model: event.data.model,
+        },
+        requestConfig: {
+          provider: event.data.provider,
+          model: event.data.model,
+          purpose: 'compaction',
+          ...(event.data.maxTokens === undefined ? {} : { maxTokens: event.data.maxTokens }),
+        },
+        ...(event.data.usage === undefined ? {} : { usage: event.data.usage }),
+      })
+      continue
+    }
+    if (
+      sourceEvent.type === 'user/message'
+      && activeCompaction !== undefined
+      && isCompactionSource(sourceEvent.data.source)
+    ) {
+      update(activeCompaction, { replacementSeq: sourceEvent.seq })
+      continue
+    }
+    if (type !== 'compact/end' || activeCompaction === undefined) continue
+    const event = sourceEvent as unknown as CompactionEndEvent
+    update(activeCompaction, {
+      completedAt: event.time,
+      status: event.data.error === undefined ? 'complete' : 'error',
+      ...(event.data.error === undefined ? {} : { error: event.data.error }),
+    })
+    activeCompaction = undefined
+  }
+
+  return requests.sort((left, right) => left.startSeq - right.startSeq)
+}
+
+function isCompactionSource(source: unknown): boolean {
+  return typeof source === 'object'
+    && source !== null
+    && 'kind' in source
+    && source.kind === 'plugin'
+    && 'plugin' in source
+    && source.plugin === 'compact'
+}

packages/client/runtime/src/client/sessions/session.ts

@@ -252,6 +252,25 @@ export class Session implements SessionFace {
     return result
   }
 
+  /**
+   * Rename: contract session.rename 1:1. On success settle the 'title'
+   * projection cell from the response's `{title, seq}` under the store's
+   * higher-seq-wins rule (the push frame arriving later is a no-op replay),
+   * so the list row and any useProjection('title') reader update without
+   * waiting for the mux frame.
+   * @param title - raw title text (the host normalizes acceptance).
+   * @returns the rename result (normalized accepted title + title event seq).
+   */
+  async rename(title: string): Promise<RpcResult<{ title: string; seq: number }>> {
+    try {
+      const { result } = await this.api.sessions.rename({ sessionId: this.sessionId, title })
+      if (result.ok) this.projections.apply('title', result.value.title, result.value.seq)
+      return result
+    } catch (error) {
+      return transportError(error)
+    }
+  }
+
   /**
    * Execute one slash-command line against this session's agent — pure
    * admission semantics (the host executor durably logs the lifecycle;

packages/client/runtime/tests/fake-api.ts

@@ -63,6 +63,7 @@ export class FakeApiClient implements IApiClient {
   onList: (payload: unknown) => Promise<RpcResponse<{ items: never[] }>> = () => Promise.resolve(ok({ items: [] }))
   onCreate: (payload: unknown) => Promise<RpcResponse<{ sessionId: SessionId }>> = () => Promise.resolve(ok({ sessionId: 'fk-new' as SessionId }))
   readonly defaultModel: ModelTarget = { provider: 'deepseek', model: 'deepseek-v4-flash' }
+  onRename: (payload: unknown) => Promise<RpcResponse<{ title: string; seq: number }>> = () => Promise.resolve(ok({ title: 'fk-renamed', seq: 0 }))
   onHistory: (payload: { sessionId: SessionId; beforeSeq?: number; maxMessages?: number })
   => Promise<RpcResponse<{ events: never[]; hasMore: boolean }>> =
     () => Promise.resolve(ok({ events: [], hasMore: false }))
@@ -115,6 +116,7 @@ export class FakeApiClient implements IApiClient {
     models: (payload: unknown) => this.record('session.models', payload, this.onModels(payload)),
     selectModel: (payload: { provider: string; model: string }) =>
       this.record('session.selectModel', payload, this.onSelectModel(payload)),
+    rename: (payload: unknown) => this.record('session.rename', payload, this.onRename(payload)),
     prompt: (payload: unknown) => this.record('session.prompt', payload, this.onPrompt(payload)),
     cancel: (payload: unknown) => this.record('session.cancel', payload, this.onCancel(payload)),
   }

packages/client/runtime/tests/fold-adapter.spec.ts

@@ -8,6 +8,7 @@ import { createUserMessage, CallId, createMessage, createToolResultMessage } fro
 import { describe, expect, it, vi } from 'vitest'
 import type { SessionEvent } from '@deepseek-ai/dsh-session/types'
 import { FoldAdapter } from '../src/client/sessions/fold-adapter.ts'
+import { projectConversationHistory } from '../src/client/session-history/history-fold.ts'
 import { ev, plainTurn } from './event-script.ts'
 
 const at = (seq: number, e: Record<string, unknown>): SessionEvent =>
@@ -27,6 +28,7 @@ describe('FoldAdapter', () => {
     const adapter = new FoldAdapter()
     adapter.reset(plainTurn(0, 0, 'a', 'b'), 0)
     const first = adapter.nodes()
+    expect(adapter.nodes()).toBe(first)
     adapter.append(ev.user(6, '追加'))
     const second = adapter.nodes()
     expect(second.nodes).toHaveLength(3)
@@ -35,6 +37,52 @@ describe('FoldAdapter', () => {
     expect(second.nodes).not.toBe(first.nodes) // array itself fresh per call
   })
 
+  it('projects frozen surface generations without widening the core live surface', () => {
+    const events = [
+      ev.user(0, 'a'),
+      ev.user(1, 'b'),
+      at(2, {
+        type: 'assistant/message',
+        surfaceOp: { op: 'replace', start: 0, end: 0 },
+        sourceEventSeqs: [0],
+        data: {
+          turn: 1,
+          step: 1,
+          message: createMessage({
+            role: 'assistant',
+            content: [{ type: 'text', text: 'summary' }],
+            source: { kind: 'model', provider: 'fake', model: 'fake' },
+          }),
+        },
+      }),
+      at(3, {
+        type: 'assistant/message',
+        surfaceOp: { op: 'replace', start: 2, end: 1 },
+        sourceEventSeqs: [2, 1],
+        data: {
+          turn: 1,
+          step: 2,
+          message: createMessage({
+            role: 'assistant',
+            content: [{ type: 'text', text: 'summary 2' }],
+            source: { kind: 'model', provider: 'fake', model: 'fake' },
+          }),
+        },
+      }),
+    ]
+
+    expect(projectConversationHistory(events.map(event => ({ event }))).contexts.map(context => ({
+      id: context.id,
+      parentId: context.parentId,
+      originSeq: context.originSeq,
+      nodes: context.nodes.map(node => node.seq),
+    }))).toEqual([
+      { id: 0, parentId: undefined, originSeq: undefined, nodes: [0, 1] },
+      { id: 1, parentId: 0, originSeq: 2, nodes: [2, 1] },
+      { id: 2, parentId: 1, originSeq: 3, nodes: [3] },
+    ])
+  })
+
   it('materializes all six node variants with field mapping', () => {
     const adapter = new FoldAdapter()
     const events = [
@@ -114,6 +162,68 @@ describe('FoldAdapter', () => {
     }
   })
 
+  it('silently degrades when a replacement needs an earlier history page', () => {
+    const adapter = new FoldAdapter()
+    const errorSpy = vi.spyOn(console, 'error').mockImplementation(() => undefined)
+    try {
+      adapter.reset([
+        at(10, {
+          type: 'assistant/message',
+          surfaceOp: { op: 'replace', start: 1, end: 3 },
+          sourceEventSeqs: [1, 3],
+          data: {
+            turn: 1,
+            step: 1,
+            message: createMessage({
+              role: 'assistant',
+              content: [{ type: 'text', text: 'partial summary' }],
+              source: { kind: 'model', provider: 'fake', model: 'fake' },
+            }),
+          },
+        }),
+        ev.user(11, 'newer message'),
+      ], 10)
+
+      expect(adapter.nodes()).toMatchObject({
+        degraded: true,
+        nodes: [{ seq: 10 }, { seq: 11 }],
+      })
+      expect(errorSpy).not.toHaveBeenCalled()
+    } finally {
+      errorSpy.mockRestore()
+    }
+  })
+
+  it('silently degrades when a live replacement needs an earlier history page', () => {
+    const adapter = new FoldAdapter()
+    const errorSpy = vi.spyOn(console, 'error').mockImplementation(() => undefined)
+    try {
+      adapter.reset([ev.user(10, 'window head')], 10)
+      adapter.append(at(11, {
+        type: 'assistant/message',
+        surfaceOp: { op: 'replace', start: 1, end: 1 },
+        sourceEventSeqs: [1],
+        data: {
+          turn: 1,
+          step: 1,
+          message: createMessage({
+            role: 'assistant',
+            content: [{ type: 'text', text: 'live summary' }],
+            source: { kind: 'model', provider: 'fake', model: 'fake' },
+          }),
+        },
+      }))
+
+      expect(adapter.nodes()).toMatchObject({
+        degraded: true,
+        nodes: [{ seq: 10 }, { seq: 11 }],
+      })
+      expect(errorSpy).not.toHaveBeenCalled()
+    } finally {
+      errorSpy.mockRestore()
+    }
+  })
+
   it('materializes a tool-result error field when present', () => {
     const adapter = new FoldAdapter()
     adapter.reset([
@@ -130,6 +240,44 @@ describe('FoldAdapter', () => {
     expect(adapter.nodes().nodes[0]).toMatchObject({ kind: 'tool-result', isError: true, error: { code: 'boom' } })
   })
 
+  it('projects assistant timing and the active request header from history', () => {
+    const projection = projectConversationHistory([
+      ev.stepStart(0, 1, 2),
+      at(1, { type: 'request/header', data: {
+        reason: 'initial',
+        header: {
+          config: { provider: 'fake', model: 'first' },
+          tools: [],
+        },
+      } }),
+      ev.chunkStart(2, 1, 2),
+      ev.chunkText(3, 1, 'token', 2),
+      ev.assistant(4, 1, 'done', 2),
+      ev.stepStart(5, 2, 1),
+      ev.chunkText(6, 2, 'next', 1),
+      ev.assistant(7, 2, 'next done', 1),
+    ].map(event => ({ event })))
+
+    expect(projection.eventNodes[0]).toMatchObject({
+      kind: 'assistant',
+      timing: {
+        stepStartTime: 1_700_000_000_000,
+        firstTokenTime: 1_700_000_000_003,
+        completedTime: 1_700_000_000_004,
+      },
+      requestConfig: { provider: 'fake', model: 'first' },
+    })
+
+    expect(projection.eventNodes.at(-1)).toMatchObject({
+      timing: {
+        stepStartTime: 1_700_000_000_005,
+        firstTokenTime: 1_700_000_000_006,
+        completedTime: 1_700_000_000_007,
+      },
+      requestConfig: { provider: 'fake', model: 'first' },
+    })
+  })
+
   it('exposes the in-window call index for runningCalls material', () => {
     const adapter = new FoldAdapter()
     adapter.reset([ev.toolCall(0, 1, 'c9', 'slow', '{}')], 0)

packages/client/runtime/tests/request-inspection.spec.ts

@@ -0,0 +1,184 @@
+import { describe, expect, it } from 'vitest'
+import type { HistoryEntry } from '@deepseek-ai/dsh-client-connection/client'
+import { createAssistantMessage, createUserMessage } from '@deepseek-ai/dsh-llm'
+import type { SessionEvent } from '@deepseek-ai/dsh-session/types'
+import { inspectRequests } from '../src/client/sessions/request-inspection.ts'
+
+const at = (seq: number, type: string, data: unknown): SessionEvent =>
+  ({ seq, time: 1_700_000_000_000 + seq, type, data }) as SessionEvent
+
+const entriesOf = (events: readonly SessionEvent[]): HistoryEntry[] =>
+  events.map(event => ({ event }))
+
+describe('inspectRequests', () => {
+  it('projects ordinary and compaction calls into one chronological request stream', () => {
+    const events = [
+      at(0, 'step/start', { turn: 1, step: 1 }),
+      at(1, 'request/header', {
+        reason: 'initial',
+        header: {
+          config: { provider: 'fake', model: 'model' },
+          system: 'system',
+          tools: [{
+            name: 'read',
+            description: 'Read a file.',
+            parameters: { type: 'object' },
+          }],
+        },
+      }),
+      at(2, 'tool/call', {
+        turn: 1,
+        step: 1,
+        callId: 'call-1',
+        name: 'read',
+        arguments: '{}',
+      }),
+      at(3, 'assistant/message', {
+        turn: 1,
+        step: 1,
+        message: createAssistantMessage({
+          content: [{ type: 'text', text: 'done' }],
+          source: { provider: 'fake', model: 'model' },
+        }),
+        usage: { inputTokens: 5, outputTokens: 2 },
+      }),
+      at(4, 'step/end', { turn: 1, step: 1 }),
+      at(5, 'compact/start', { turn: 1 }),
+      at(6, 'compact/summary', {
+        summary: [{ type: 'text', text: 'summary' }],
+        rawOutput: [
+          { type: 'reasoning', text: 'thought' },
+          { type: 'text', text: 'summary' },
+        ],
+        provider: 'fake',
+        model: 'compact-model',
+        usage: { inputTokens: 8, outputTokens: 3 },
+      }),
+      at(7, 'user/message', createUserMessage({
+        content: [{ type: 'text', text: 'checkpoint' }],
+        source: { kind: 'plugin', plugin: 'compact' },
+      })),
+      at(8, 'compact/end', { turn: 1 }),
+    ]
+    const snapshot = inspectRequests(entriesOf(events))
+    expect(snapshot.requests).toMatchObject([
+      {
+        purpose: 'assistant',
+        startSeq: 0,
+        resultSeq: 3,
+        status: 'complete',
+        prompt: {
+          config: { provider: 'fake', model: 'model' },
+          system: 'system',
+        },
+        promptChange: { seq: 1, kind: 'initial' },
+      },
+      {
+        purpose: 'compaction',
+        startSeq: 5,
+        resultSeq: 6,
+        replacementSeq: 7,
+        status: 'complete',
+        summary: [{ type: 'text', text: 'summary' }],
+      },
+    ])
+    expect(snapshot.callSchemas.get('call-1')?.name).toBe('read')
+  })
+
+  it('captures schemas for nested tool dispatches from the active request header', () => {
+    const snapshot = inspectRequests(entriesOf([
+      at(0, 'request/header', {
+        reason: 'initial',
+        header: {
+          config: { provider: 'fake', model: 'model' },
+          tools: [{
+            name: 'read',
+            description: 'Read a file.',
+            parameters: { type: 'object' },
+          }],
+        },
+      }),
+      at(1, 'tool/code-dispatch-start', {
+        parentCallId: 'parent',
+        subCallId: 'nested',
+        name: 'read',
+        arguments: {},
+      }),
+    ]))
+
+    expect(snapshot.callSchemas.get('nested')?.name).toBe('read')
+  })
+
+  it('keeps chunk-reported usage through request failure and prefers it to message fallback', () => {
+    const chunkUsage = { inputTokens: 21, outputTokens: 3 }
+    const retryUsage = {
+      inputTokens: 5,
+      outputTokens: 2,
+      cacheReadTokens: 8,
+      reasoningTokens: 1,
+    }
+    const snapshot = inspectRequests(entriesOf([
+      at(0, 'step/start', { turn: 1, step: 1 }),
+      at(1, 'assistant/chunk', {
+        turn: 1,
+        step: 1,
+        chunk: { type: 'usage', usage: chunkUsage },
+      }),
+      at(2, 'llm/retry', {
+        turn: 1,
+        step: 1,
+        retry: 1,
+        maxRetries: 2,
+        delayMs: 100,
+        failure: { message: 'rate limited' },
+      }),
+      at(3, 'assistant/chunk', {
+        turn: 1,
+        step: 1,
+        chunk: { type: 'usage', usage: retryUsage },
+      }),
+      at(4, 'assistant/message', {
+        turn: 1,
+        step: 1,
+        message: createAssistantMessage({
+          content: [{ type: 'text', text: 'recovered' }],
+          source: { provider: 'fake', model: 'model' },
+        }),
+        usage: { inputTokens: 1, outputTokens: 1 },
+      }),
+    ]))
+
+    expect(snapshot.requests[0]).toMatchObject({
+      status: 'complete',
+      usage: {
+        inputTokens: 26,
+        outputTokens: 5,
+        cacheReadTokens: 8,
+        reasoningTokens: 1,
+      },
+    })
+  })
+
+  it('treats a scrubbed durable-fixture tool catalog as unavailable', () => {
+    const snapshot = inspectRequests(entriesOf([
+      at(0, 'step/start', { turn: 1, step: 1 }),
+      at(1, 'request/header', {
+        reason: 'initial',
+        header: {
+          config: { provider: 'fake', model: 'model' },
+          tools: '{{tools}}',
+        },
+      }),
+      at(2, 'tool/call', {
+        turn: 1,
+        step: 1,
+        callId: 'call-1',
+        name: 'read',
+        arguments: '{}',
+      }),
+    ]))
+
+    expect(snapshot.callSchemas).toEqual(new Map())
+    expect(snapshot.requests[0]?.prompt?.tools).toEqual([])
+  })
+})

packages/client/runtime/tests/session-history-source.spec.ts

@@ -0,0 +1,98 @@
+import { describe, expect, it } from 'vitest'
+import type { SessionEvent } from '@deepseek-ai/dsh-session/types'
+import type { SessionId } from '@deepseek-ai/dsh-client-connection/client'
+import { SessionHistorySource } from '../src/client/session-history/source.ts'
+import { FakeApiClient, deferred, err, ok } from './fake-api.ts'
+import { entries, ev, plainTurn } from './event-script.ts'
+
+const SID = 'history-s1' as SessionId
+
+function histResponse(events: SessionEvent[], hasMore = false) {
+  return Promise.resolve(ok({ events: entries(events) as never[], hasMore }))
+}
+
+describe('SessionHistorySource', () => {
+  it('loads every older page without changing a Chat session', async () => {
+    const pages = [
+      plainTurn(0, 0, '最早问', '最早答'),
+      plainTurn(6, 1, '中间问', '中间答'),
+      plainTurn(12, 2, '最新问', '最新答'),
+    ]
+    const api = new FakeApiClient()
+    api.onHistory = (payload) => {
+      if (payload.beforeSeq === undefined) return histResponse(pages[2]!, true)
+      if (payload.beforeSeq === 12) return histResponse(pages[1]!, true)
+      return histResponse(pages[0]!, false)
+    }
+    const source = new SessionHistorySource(SID, api)
+
+    await source.loadAll()
+
+    expect(api.callsOf('session.history')).toHaveLength(3)
+    expect(source.getSnapshot().hasMore).toBe(false)
+    expect(source.getSnapshot().inspection.eventNodes.map(node => node.seq))
+      .toEqual([1, 3, 7, 9, 13, 15])
+  })
+
+  it('pins a lazy inspection to the entries in its source snapshot', async () => {
+    const api = new FakeApiClient()
+    api.onHistory = () => histResponse(plainTurn(0, 0, '问', '答'))
+    const source = new SessionHistorySource(SID, api)
+    await source.loadAll()
+    const before = source.getSnapshot()
+
+    source.handleMuxFrame({
+      type: 'session/event',
+      sessionId: SID,
+      event: ev.user(6, 'later'),
+    })
+
+    expect(before.inspection.eventNodes.map(node => node.seq)).toEqual([1, 3])
+    expect(source.getSnapshot().inspection.eventNodes.map(node => node.seq))
+      .toEqual([1, 3, 6])
+  })
+
+  it('stops loading when an older page fails to advance', async () => {
+    const api = new FakeApiClient()
+    api.onHistory = payload => payload.beforeSeq === undefined
+      ? histResponse(plainTurn(6, 1, '新问', '新答'), true)
+      : Promise.resolve(err({
+        code: 'internal',
+        message: 'page unavailable',
+        details: {},
+      }))
+    const source = new SessionHistorySource(SID, api)
+
+    await source.loadAll()
+
+    expect(api.callsOf('session.history')).toHaveLength(2)
+    expect(source.getSnapshot().hasMore).toBe(true)
+  })
+
+  it('observes consumer cancellation between older pages', async () => {
+    const middle = deferred<Awaited<ReturnType<FakeApiClient['onHistory']>>>()
+    const olderStarted = deferred<undefined>()
+    const api = new FakeApiClient()
+    api.onHistory = (payload) => {
+      if (payload.beforeSeq === undefined) {
+        return histResponse(plainTurn(12, 2, '最新问', '最新答'), true)
+      }
+      olderStarted.resolve(undefined)
+      return middle.promise
+    }
+    const source = new SessionHistorySource(SID, api)
+    const controller = new AbortController()
+    const complete = source.loadAll(controller.signal)
+    await olderStarted.promise
+    controller.abort()
+    middle.resolve(ok({
+      events: entries(plainTurn(6, 1, '中间问', '中间答')) as never[],
+      hasMore: true,
+    }))
+
+    await complete
+
+    expect(api.callsOf('session.history')).toHaveLength(2)
+    expect(source.getSnapshot().hasMore).toBe(true)
+  })
+})

packages/client/runtime/tests/session.spec.ts

@@ -301,6 +301,32 @@ describe('prompt and cancel errors', () => {
   })
 })
 
+describe('rename', () => {
+  it('settles the title projection cell from the unary response (higher-seq-wins vs the push frame)', async () => {
+    const { api, session } = makeSession()
+    api.onRename = () => Promise.resolve(ok({ title: '正名', seq: 7 }))
+    const result = await session.rename('  正名  ')
+    expect(result).toMatchObject({ ok: true, value: { title: '正名', seq: 7 } })
+    expect(api.callsOf('session.rename')).toMatchObject([{ sessionId: SID, title: '  正名  ' }])
+    expect(session.projections.faceOf('title').getSnapshot()).toBe('正名')
+    // A stale lower-seq apply (the push-frame path routes into this same
+    // store) must not roll the settled value back.
+    session.projections.apply('title', '旧名', 3)
+    expect(session.projections.faceOf('title').getSnapshot()).toBe('正名')
+  })
+
+  it('returns the business error untouched and folds a transport throw to internal', async () => {
+    const { api, session } = makeSession()
+    api.onRename = () => Promise.resolve(err({ code: 'title-invalid', message: 'empty', details: { sessionId: SID } }))
+    const rejected = await session.rename('   ')
+    expect(rejected).toMatchObject({ ok: false, error: { code: 'title-invalid' } })
+    expect(session.projections.faceOf('title').getSnapshot()).toBeUndefined()
+    api.onRename = () => Promise.reject(new Error('rename transport down'))
+    const folded = await session.rename('x')
+    expect(folded).toMatchObject({ ok: false, error: { code: 'internal' } })
+  })
+})
+
 describe('pending interactions', () => {
   it('adds approval/question on requested and removes them on resolved', async () => {
     const { session } = makeSession()
@@ -701,6 +727,7 @@ describe('resync', () => {
     expect(snapshot.openState).toBe('open') // stale failure did not settle the fresh generation into error
     expect(snapshot.nodes.map(n => n.seq)).toEqual([7, 9])
   })
+
 })
 
 describe('run_code sub-dispatch indexing', () => {
@@ -814,20 +841,23 @@ describe('reference stability (the memo contract)', () => {
     await session.open()
     const feed = (event: SessionEvent) => { session.handleMuxEnvelope('r' as never, { type: 'session/event', sessionId: SID, event }) }
     feed(ev.turnStart(6, 1))
-    feed(ev.toolCall(7, 1, 'c1', 'echo', '{}'))
+    feed(ev.stepStart(7, 1))
+    feed(ev.toolCall(8, 1, 'c1', 'echo', '{}'))
     session.handleMuxEnvelope('ra' as never, { type: 'approval/requested', sessionId: SID, approvalId: 'ap1' as never, toolName: 'rm' })
     const before = session.getSnapshot()
-    // A chunk storm touches partial/nodes only: runningCalls and pending must keep identity.
-    feed(ev.chunkStart(8, 1))
-    feed(ev.chunkText(9, 1, '与工具无关的流式'))
+    // A chunk storm touches partial/nodes only: unrelated projections keep identity.
+    feed(ev.chunkStart(9, 1))
+    feed(ev.chunkText(10, 1, '与工具无关的流式'))
     const after = session.getSnapshot()
     expect(after).not.toBe(before)
     expect(after.runningCalls).toBe(before.runningCalls)
     expect(after.pending).toBe(before.pending)
     // And a mutation on the tracked domain swaps that array.
-    feed(ev.toolResult(10, 1, 'c1', 'ECHO'))
+    feed(ev.toolResult(11, 1, 'c1', 'ECHO'))
     const resolved = session.getSnapshot()
     expect(resolved.runningCalls).not.toBe(after.runningCalls)
     expect(resolved.pending).toBe(after.pending)
+    feed(ev.assistant(12, 1, '完成'))
+    expect(session.getSnapshot()).not.toBe(resolved)
   })
 })

packages/client/test-runtime/src/sessions.ts

@@ -107,6 +107,14 @@ export class FixtureSession implements SessionFace {
   loadOlder(): never {
     throw new Error(`test session "${this.sessionId}": loadOlder is not stubbed — supply it on the fixture's session face`)
   }
+
+  /**
+   * Fail-loud stub; supply `rename` on the fixture's session face to exercise it.
+   * @returns never — always throws.
+   */
+  rename(): never {
+    throw new Error(`test session "${this.sessionId}": rename is not stubbed — supply it on the fixture's session face`)
+  }
 }
 
 /** One live test session: fixture-derived stores plus its minted scope state. */

packages/client/test-runtime/tests/runtime.spec.tsx

@@ -470,6 +470,7 @@ describe('fixture session face', () => {
     expect(() => bare.cancel()).toThrow(/cancel is not stubbed/)
     expect(() => bare.command()).toThrow(/command is not stubbed/)
     expect(() => bare.loadOlder()).toThrow(/loadOlder is not stubbed/)
+    expect(() => bare.rename()).toThrow(/rename is not stubbed/)
     await runtime.dispose()
   })
 

packages/client/tsdown.client.ts

@@ -6,6 +6,7 @@
  * lightningcss inside the bundle: importing `x.module.css` yields the
  * hashed class map, and the css text auto-injects a <style data-plugin="<id>">
  * tag at factory execution (the loader removes plugin-owned tags on unload).
+ * The virtual loader registers each real stylesheet as a watch dependency.
  */
 import { readFile } from 'node:fs/promises'
 import { basename, dirname, resolve as resolvePath } from 'node:path'
@@ -127,6 +128,7 @@ export function clientBundle(id: string, libEntry: readonly string[]): UserConfi
       async load(virtualId: string) {
         if (!virtualId.startsWith(CSS_VIRTUAL_PREFIX)) return null
         const fileId = virtualId.slice(CSS_VIRTUAL_PREFIX.length, -CSS_VIRTUAL_SUFFIX.length)
+        this.addWatchFile(fileId)
         const source = await readFile(fileId)
         const { code, exports: cssExports } = transform({
           filename: fileId,

packages/client/ui-command/src/client/PopupSelectView.module.css

@@ -13,8 +13,10 @@
   display: flex;
   flex-direction: column;
   min-width: 220px;
+  /* 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;
-  overflow-y: auto;
+  overflow: hidden;
   /* Elevated surface: the scrollbar thumb takes the l2 elevation tokens
      (see ui-theme styles/scrollbar.css for the rebinding contract). */
   --dsh-scrollbar-thumb: var(--dsw-alias-scrollbar-bg-l2);
@@ -26,6 +28,13 @@
   outline: none;
 }
 
+.viewport {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow-y: auto;
+}
+
 .row {
   display: flex;
   align-items: center;
@@ -34,11 +43,11 @@
   border-radius: 8px;
   cursor: pointer;
   font-size: 13px;
-  color: var(--dsw-alias-text-primary);
+  color: var(--dsw-alias-label-primary);
 }
 
 .rowActive {
-  background: var(--dsw-alias-fill-hover);
+  background: var(--dsw-alias-interactive-bg-hover);
 }
 
 .label {
@@ -50,19 +59,20 @@
 
 .detail {
   font-size: 12px;
-  color: var(--dsw-alias-text-tertiary);
+  color: var(--dsw-alias-label-tertiary);
   white-space: nowrap;
 }
 
 .check {
   display: inline-flex;
-  color: var(--dsw-alias-text-secondary);
+  flex: none;
+  color: var(--dsw-alias-label-primary);
 }
 
 .status {
-  padding: 8px;
-  font-size: 12px;
-  color: var(--dsw-alias-text-tertiary);
+  padding: 8px 10px;
+  font-size: 13px;
+  color: var(--dsw-alias-label-tertiary);
 }
 
 .search {
@@ -72,7 +82,7 @@
   border-radius: 8px;
   background: transparent;
   font-size: 13px;
-  color: var(--dsw-alias-text-primary);
+  color: var(--dsw-alias-label-primary);
   outline: none;
 }
 
@@ -97,6 +107,6 @@
   border-radius: 6px;
   background: transparent;
   font-size: 12px;
-  color: var(--dsw-alias-text-primary);
+  color: var(--dsw-alias-label-primary);
   cursor: pointer;
 }

packages/client/ui-command/src/client/PopupSelectView.tsx

@@ -3,19 +3,23 @@
  * store into the conversation.input.overlay anchor. Unlike the slash menu
  * (combobox — textarea keeps focus), this shell HOLDS focus while open: the
  * inner search input takes focus, plain typing filters the loaded options
- * locally, Enter/↑↓ drive the filtered highlight, Escape dismisses back to
- * the composer, and ←→ keep the search input's native caret. Any pointer
- * interaction outside the box dismisses (the click's own target takes
- * focus). Closed state renders null; the overlay slot stays mounted.
+ * locally, Enter/↑↓ drive the filtered highlight (scrolled into view), Escape
+ * dismisses back to the composer, and ←→ keep the search input's native
+ * caret. Any pointer interaction outside the box dismisses (the click's own
+ * target takes focus). Closed state renders null; the overlay slot stays
+ * mounted. The card height clamps to the space above the composer.
  */
 import { useEffect, useRef } from 'react'
 import { useSyncExternalStore } from 'react'
 import clsx from 'clsx'
-import { IconCheckOutline16 } from '@deepseek-ai/dsh-client-ui-primitives'
+import { IconCheckOutline16, useAnchoredMaxHeight } from '@deepseek-ai/dsh-client-ui-primitives'
 import { filterOptions } from './popup.ts'
 import type { PopupSelectController } from './popup.ts'
 import css from './PopupSelectView.module.css'
 
+/** Design cap on the card height (same MenuDropdown family as the slash menu). */
+const MAX_HEIGHT = 320
+
 /** Injected business face of the popupSelect overlay entry. */
 export interface PopupSelectInjected {
   /** The session's shell controller (state store + verbs; the view never touches the open-context type). */
@@ -34,6 +38,17 @@ export function PopupSelectView({ popup }: PopupSelectInjected) {
   )
   const cardRef = useRef<HTMLDivElement>(null)
   const searchRef = useRef<HTMLInputElement>(null)
+  // The card is bottom-anchored above the composer; clamp the design cap to
+  // the space above it, re-measured on every store update.
+  const maxHeight = useAnchoredMaxHeight(cardRef, MAX_HEIGHT, state)
+  const active = state.open ? state.active : null
+
+  // The search input keeps focus while arrows move a virtual highlight, so
+  // the browser never scrolls the active row into view — do it here.
+  useEffect(() => {
+    if (active === null) return
+    cardRef.current?.querySelector('[aria-selected="true"]')?.scrollIntoView({ block: 'nearest' })
+  }, [active])
 
   // Focus ownership: the search input grabs on open (the design's
   // transient-layer rule), and ANY outside pointer interaction dismisses —
@@ -42,7 +57,6 @@ export function PopupSelectView({ popup }: PopupSelectInjected) {
   // takes focus naturally, so no focusComposer here.
   useEffect(() => {
     if (!state.open) return
-    searchRef.current?.focus()
     const onPointerDown = (ev: PointerEvent): void => {
       if (cardRef.current !== null && ev.target instanceof Node && cardRef.current.contains(ev.target)) return
       popup.dismiss()
@@ -51,6 +65,11 @@ export function PopupSelectView({ popup }: PopupSelectInjected) {
     return () => { document.removeEventListener('pointerdown', onPointerDown, true) }
   }, [state.open, popup])
 
+  // Focus the search input after it mounts (separate effect so the ref is populated).
+  useEffect(() => {
+    if (state.open) searchRef.current?.focus()
+  }, [state.open])
+
   if (!state.open) return null
 
   const rows = filterOptions(state.options, state.search)
@@ -83,6 +102,7 @@ export function PopupSelectView({ popup }: PopupSelectInjected) {
     <div
       ref={cardRef}
       className={css.card}
+      style={{ maxHeight }}
       aria-label={`/${String(state.command)} options`}
       onKeyDown={onKeyDown}
     >
@@ -108,7 +128,7 @@ export function PopupSelectView({ popup }: PopupSelectInjected) {
       {state.submitting && <div className={css.status}>Applying…</div>}
       {state.status === 'ready' && rows.length === 0 && <div className={css.status}>No options</div>}
       {state.status === 'ready' && (
-        <div role="listbox" aria-label={`/${String(state.command)} matches`}>
+        <div role="listbox" aria-label={`/${String(state.command)} matches`} className={css.viewport}>
           {rows.map((option, index) => (
             <div
               key={option.id}

packages/client/ui-command/tests/popup-view.spec.tsx

@@ -4,17 +4,28 @@
  * focus on open and plain typing filters locally, ↑↓ move the filtered
  * highlight while ←→ stay native to the input, Enter selects single-flight,
  * Escape dismisses back through focusComposer, outside pointerdown dismisses
- * plainly, and the submitting/failed states render pending text and a
- * working retry button.
+ * plainly, the submitting/failed states render pending text and a working
+ * retry button, the highlighted row scrolls into view, and the card height
+ * clamps to the space above the composer.
  */
-import { afterEach, describe, expect, it, vi } from 'vitest'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { act, cleanup, fireEvent, render, screen } from '@testing-library/react'
 import type { SelectOption } from '../src/client/contract.ts'
 import type { PopupSpec, TokenSegment } from '../src/client/popup.ts'
 import { PopupSelectController } from '../src/client/popup.ts'
 import { PopupSelectView } from '../src/client/PopupSelectView.tsx'
 
-afterEach(cleanup)
+// jsdom has no scrollIntoView; the view calls it on the highlighted row.
+const scrollIntoView = vi.fn()
+beforeEach(() => {
+  Element.prototype.scrollIntoView = scrollIntoView
+  scrollIntoView.mockClear()
+})
+
+afterEach(() => {
+  cleanup()
+  vi.restoreAllMocks()
+})
 
 const OPTIONS: SelectOption[] = [
   { id: 'dark', label: 'Dark' },
@@ -87,6 +98,27 @@ describe('PopupSelectView', () => {
     expect(fireEvent.keyDown(search, { key: 'ArrowRight' })).toBe(true)
   })
 
+  it('scrolls the highlighted row into view when the highlight moves', async () => {
+    const { search } = await mountOpen()
+    scrollIntoView.mockClear()
+    act(() => { fireEvent.keyDown(search, { key: 'ArrowDown' }) })
+    const options = screen.getAllByRole('option')
+    expect(scrollIntoView).toHaveBeenCalledWith({ block: 'nearest' })
+    expect(scrollIntoView.mock.instances.at(-1)).toBe(options[1])
+  })
+
+  it('caps the card height at the design maximum when the composer sits low enough', async () => {
+    vi.spyOn(Element.prototype, 'getBoundingClientRect').mockReturnValue({ bottom: 800 } as DOMRect)
+    await mountOpen()
+    expect(screen.getByLabelText('/theme options').style.maxHeight).toBe('320px')
+  })
+
+  it('clamps the card height to the space above the composer minus the safe margin', async () => {
+    vi.spyOn(Element.prototype, 'getBoundingClientRect').mockReturnValue({ bottom: 200 } as DOMRect)
+    await mountOpen()
+    expect(screen.getByLabelText('/theme options').style.maxHeight).toBe('188px')
+  })
+
   it('Enter selects the highlighted row: onSelect, consume, close, focusComposer', async () => {
     const seen: Array<{ option: SelectOption; context: string }> = []
     const { view, search, consume, focusComposer } = await mountOpen({

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: 5a1f9f1ad5cac6601e8686af7206bb436e40e91f
-README.zh.md: ccbf1918ae3d40fd42ff7454f7f983d6261ba28f
+README.md: 5e24e4aad5154430fa48c80eb439694005df7c6f
+README.zh.md: 89a34041e156e137d966bdafbc92d86477df166e

packages/client/ui-conversation/README.md

@@ -2,13 +2,13 @@
 
 English | [中文](README.zh.md)
 
-Conversation domain: skeleton (header/tabs/composer/empty state), chat view (grouped step-summary flow, streaming tail isolation, stats line, per-tool row slot with a bash sample registrant and the todo row), input dock (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, per-tool row slot with a bash sample registrant and the todo row), composer dock (session stats sticky with the input), input dock (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.
+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.
 
 The view ring IS a slot: the conversation registration declares the `'conversation.view'` list slot (session scope) in its `children` table, ConversationRoot renders the active entry through its renderSlot share (`only: <active id>`), and view tabs project from the ring ledger's registration options (`id`/`order`/`label`). The chat view is this package's own ring entry; other plugins (ui-trajectory) contribute tabs through plain `ctx.slots.register` — the former package-local view registry (`registerView`/`ViewEntry`/`ConversationViewMap` and the chrome attachment table) is retired, with per-view chrome dissolved into the view components themselves.
 
-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); a pick submits the `/permission <preset>` command line through the bar's injected `command` callback.
+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.
 
 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.
 
@@ -16,11 +16,11 @@ A tool call declaring the `terminal` render intent renders its command output in
 
 Tool rows are slots too — the standalone tool ring (`ToolViewRegistry`/`ctx.toolviews`/outlet) is retired. The chat entry declares the keyed `'conversation.chat.toolview'` hole (session scope; the key space is runtime-open); its render site dispatches per row via `entryKey: toolName` with `GenericToolCard` as the call-site `fallback`. The owner payload is the uniform `ToolRowOwnerProps` (`callId`/`toolName`/`block`/`openFile`) and `ToolRowProps` pre-composes it with the session standard kit. A registrant is a plain plugin: `ctx.slots.register({ name: 'conversation.chat.toolview', key: '<tool>', inject? }, Row)` with `inject: ['slots', 'conversation']` as the load-order seam (apply mounts ConversationService after the chat registration, so the service being present guarantees the slot is declared); session differentiation happens inside the component (`useSessions` reading `parentId` — the bash sample is the third-party-posture exemplar). Trajectory/waterfall toolview slots share this shape and land with their own render sites (RendersCheck rejects a declaration nobody renders).
 
-The todo surfaces are two registrations over that shape, both plain registrant plugins with `inject: ['slots', 'conversation']`. `TodoRow` takes the `'conversation.chat.toolview'` key `todo_write` and summarizes what the call attempted (`<done>/<total> 已完成 · <active item>` parsed from its args, falling back to the generic summary on malformed or wrongly-shaped model JSON, and keeping the generic dot for non-ok execution states so a cancelled call never reads as a completed update). `TodoDock` takes the `'conversation.input.dock'` list slot at `order: -1` — above the queue rows — and is the plan strip: it reads the host-computed `todos` projection via `useProjection` (standing plan: latest `todo/write` with no later `turn/start`) and renders `TodoPanel`, which takes the plain list, hides itself while the list is empty, and collapses to a header of title plus `"<done>/<total> tasks · <n> in progress"` (status glyphs are the figma check / progress / dashed-pending set). The dock adapter owns the selection so the panel stays a pure function of its props; the standing list lives here rather than in the row so the row stays one line. Anything the input-zone composer chain hides (a `conversation.composer` takeover such as ui-question's) hides the whole dock, this strip included.
+The todo surfaces are two registrations over that shape, both plain registrant plugins with `inject: ['slots', 'conversation']`. `TodoRow` takes the `'conversation.chat.toolview'` key `todo_write` and summarizes what the call attempted (`<done>/<total> 已完成 · <active item>` parsed from its args, falling back to the generic summary on malformed or wrongly-shaped model JSON, and keeping the generic dot for non-ok execution states so a cancelled call never reads as a completed update). `TodoDock` takes the `'conversation.input.dock'` list slot at `order: -1` — above the queue rows — and is the plan strip: it reads the host-computed `todos` projection via `useProjection` (standing plan: latest `todo/write` with no later `turn/start`) and renders `TodoPanel`, which takes the plain list, hides itself while the list is empty, and starts collapsed as a header of title plus `"<done>/<total> tasks · <n> in progress"` (status glyphs are the figma check / progress / dashed-pending set). The dock adapter owns the selection so the panel stays a pure function of its props; the standing list lives here rather than in the row so the row stays one line. Anything the input-zone composer chain hides (a `conversation.composer` takeover such as ui-question's) hides the whole dock, this strip included.
 
 Per-session UI state for selection and the active view lives in the declared chat store (`stores.ts` `createChatStore`); the InputHub owns the composer state machine and mirrors its draft into that store for persistence. Apply passes one store handle to the strict session subtree, chat view, and details registrations, so each session shares one instance and the framework owns its lifecycle. Components are pure: the framework standard kit supplies `useSession`/`sessionId`, global `useSessions`/`useWorkspaces`, and the input machine's `useInput`/`inputActions`; store faces and inject factories supply the remaining state and callbacks.
 
-The composer bar declares session-scoped single seats for `'conversation.input.plan'` (right of the local access-mode control) and `'conversation.input.model'` (immediately before the pending indicator and send/stop button), plus list slots for overlay, dock, left, and right input extensions. Feature packages own each control and its state; ui-conversation supplies placement, the `locked` owner prop, and the standard slot shares. While the `plan` projection's effective target is plan mode, InputBar swaps its textarea placeholder to the plan-task wording (a host-folded value read through the standard-kit `useProjection`; owner-supplied placeholders win). The resident no-session shell uses `DisabledInputBar` and therefore dispatches no session-scoped control seats.
+The composer bar declares session-scoped single seats for `'conversation.input.plan'` (right of the local access-mode control) and `'conversation.input.model'` (immediately before the pending indicator and send/stop button), plus list slots for overlay, dock, left, and right input extensions. Feature packages own each control and its state; ui-conversation supplies placement, the `locked` owner prop, and the standard slot shares. While the `plan` projection's effective target is plan mode, InputBar swaps its textarea placeholder to the plan-task wording, localized through the `command.hint` locale namespace this package registers and shared verbatim with the claimed `/plan` command hint (a host-folded value read through the standard-kit `useProjection`; owner-supplied placeholders win). A pending composer takeover remains mounted when another conversation view is active so the blocked agent can still receive its answer; without a pending interaction, the active-session composer belongs to Chat. The resident no-session shell uses `DisabledInputBar` and therefore dispatches no session-scoped control seats.
 
 `src/client/` is organized for the future package split: `contract/` is the sole inter-domain shared face (`slots.ts` slot declarations + composed slot props including the tool-row contract, `views.ts` shared primitives, `tool-call-model.ts`); the `skeleton/`, `chat/`, and `toolviews/` (sample registrants) domain directories import contract files and never each other; `apply.ts` is the only assembly point allowed to import all three domains. The `/client` export surface is the contract only — `apply`/`inject`, the two service classes, and the `contract/` type families; implementation components (skeleton, chat rows) and the store factory stay internal and reach the page exclusively through apply's slot registrations (tests take them via the `./src/*` subpath).
 

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

@@ -2,9 +2,9 @@
 
 [English](README.md) | 中文
 
-会话领域：骨架（标题栏／标签页／编辑器／空状态）、聊天视图（分组步骤摘要流、流式尾部隔离、统计行、逐工具行 slot 及一个 bash 示例注册方与 todo 行）、输入区 dock（队列行加 todo 计划条）、最小详情面板、按 scope 寻址的 ConversationService。契约：api-contracts v3 §7 加 slot 终端设计（store seat／props share）。
+会话领域：骨架（标题栏／标签页／编辑器／空状态）、聊天视图（分组步骤摘要流、流式尾部隔离、逐工具行 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。
+常驻会话壳会跨无会话与会话状态切换而保留。没有当前会话时，它会渲染禁用输入栏；其根作用域的 `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 则被拆入视图组件自身。
 
@@ -14,13 +14,13 @@
 
 工具行同样是 slot：独立工具环（`ToolViewRegistry`／`ctx.toolviews`／outlet）已经退役。聊天配置项声明键控的 `'conversation.chat.toolview'` 空位（Session scope；key 空间在运行时开放）；其渲染点逐行通过 `entryKey: toolName` 分发，并以 `GenericToolCard` 作为调用点 `fallback`。owner 载荷是统一的 `ToolRowOwnerProps`（`callId`／`toolName`／`block`／`openFile`），`ToolRowProps` 则预先将其与 Session 标准工具包组合。注册方只是普通插件：`ctx.slots.register({ name: 'conversation.chat.toolview', key: '<tool>', inject? }, Row)`，以 `inject: ['slots', 'conversation']` 作为加载顺序 seam（apply 在聊天注册后挂载 ConversationService，因此服务存在即可保证 slot 已声明）；Session 区分在组件内部完成（`useSessions` 读取 `parentId`，bash 示例是第三方姿态的范例）。Trajectory/waterfall 工具视图 slot 共享此形状，并随各自的渲染点落地（RendersCheck 会拒绝没有任何渲染方的声明）。
 
-审批经由本包声明的链接管编辑器：`ApprovalPanel` 注册为按选择器路由的 `'conversation.composer'` 配置项（ui-question 模式），在审批等待未决期间取代 InputBar 占据编辑器（琥珀色条、理由标题、来自运行中调用参数的配对命令行、一次性的拒绝／允许）。`contract/slots.ts` 中的 `PendingApproval` 领域面在运行时 `PendingWait` 载体之上拥有 wire 编码——带审计关联的 `ApprovalResponsePayload` 值；广播的 `approval/resolved` 帧使等待落定并恢复编辑器。侧边栏通过 manager 跟踪的 `waitingApproval` 列表位（未实例化会话同样点亮）镜像该阻塞状态，其优先级高于运行中圆环，直至问题解决。未决等待完全离开消息流：问题（ui-question）与审批（ApprovalPanel）都经编辑器接管作答，不再保留只读占位卡。编辑器底行的 Access 席位挂载 `PermissionSelect`，由 host 计算的 `permissions` 投影经标准工具包 `useProjection` 供数（key 缺席即隐藏 chip）；选中会经由输入栏注入的 `command` 回调提交 `/permission <preset>` 命令行。
+审批经由本包声明的链接管编辑器：`ApprovalPanel` 注册为按选择器路由的 `'conversation.composer'` 配置项（ui-question 模式），在审批等待未决期间取代 InputBar 占据编辑器（琥珀色条、理由标题、来自运行中调用参数的配对命令行、一次性的拒绝／允许）。`contract/slots.ts` 中的 `PendingApproval` 领域面在运行时 `PendingWait` 载体之上拥有 wire 编码——带审计关联的 `ApprovalResponsePayload` 值；广播的 `approval/resolved` 帧使等待落定并恢复编辑器。侧边栏通过 manager 跟踪的 `waitingApproval` 列表位（未实例化会话同样点亮）镜像该阻塞状态，其优先级高于运行中圆环，直至问题解决。未决等待完全离开消息流：问题（ui-question）与审批（ApprovalPanel）都经编辑器接管作答，不再保留只读占位卡。编辑器底行的 Access 席位挂载 `PermissionSelect`，由 host 计算的 `permissions` 投影经标准工具包 `useProjection` 供数（key 缺席即隐藏 chip）；chip 打开 Menu 原语下拉，kebab-case 预设名渲染为 Title Case 标签（与 `/permission` popup 的显示变换孪生），选中会经由输入栏注入的 `command` 回调提交 `/permission <preset>` 命令行。
 
-todo 两个面就是在该形状上的两个注册项，都是普通注册方插件，`inject: ['slots', 'conversation']`。`TodoRow` 占用 `'conversation.chat.toolview'` 的 `todo_write` key，摘要该次调用「试图写入」的内容（从其 args 解析出 `<已完成>/<总数> 已完成 · <进行中条目>`；模型 JSON 残缺或形状不对时回落到通用摘要；非 ok 执行状态保留通用状态点，使被取消的调用绝不读成一次已完成的更新）。`TodoDock` 以 `order: -1` 占用 `'conversation.input.dock'` 列表 slot（位于队列行之上），是计划条：它经 `useProjection` 读取 host 计算的 `todos` 投影（站立计划：其后没有更晚 `turn/start` 的最近一次 `todo/write`）并渲染 `TodoPanel`，后者接收纯列表，在列表为空时自我隐藏，折叠时收成标题加 `"<已完成>/<总数> tasks · <n> in progress"` 的表头（状态图标为 figma 的勾选／进行中／虚线未开始一组）。选取由 dock 适配器负责，因此面板保持为其 props 的纯函数；站立列表放在此处而非行内，行才能保持单行。输入区 composer 链隐藏的一切（例如 ui-question 对 `conversation.composer` 的接管）也会隐藏整个 dock，包括这条计划条。
+todo 两个面就是在该形状上的两个注册项，都是普通注册方插件，`inject: ['slots', 'conversation']`。`TodoRow` 占用 `'conversation.chat.toolview'` 的 `todo_write` key，摘要该次调用「试图写入」的内容（从其 args 解析出 `<已完成>/<总数> 已完成 · <进行中条目>`；模型 JSON 残缺或形状不对时回落到通用摘要；非 ok 执行状态保留通用状态点，使被取消的调用绝不读成一次已完成的更新）。`TodoDock` 以 `order: -1` 占用 `'conversation.input.dock'` 列表 slot（位于队列行之上），是计划条：它经 `useProjection` 读取 host 计算的 `todos` 投影（站立计划：其后没有更晚 `turn/start` 的最近一次 `todo/write`）并渲染 `TodoPanel`，后者接收纯列表，在列表为空时自我隐藏；列表非空时面板初始折叠，表头显示标题加 `"<已完成>/<总数> tasks · <n> in progress"`（状态图标为 figma 的勾选／进行中／虚线未开始一组）。选取由 dock 适配器负责，因此面板保持为其 props 的纯函数；站立列表放在此处而非行内，行才能保持单行。输入区 composer 链隐藏的一切（例如 ui-question 对 `conversation.composer` 的接管）也会隐藏整个 dock，包括这条计划条。
 
 逐 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 任务措辞（经标准套件 `useProjection` 读取的 host 折叠值；owner 提供的 placeholder 优先）。常驻无会话壳使用 `DisabledInputBar`，因此不会分发任何会话作用域的控件 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 所有。常驻无会话壳使用 `DisabledInputBar`，因此不会分发任何会话作用域的控件 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/package.json

@@ -39,6 +39,7 @@
     "clsx": "^2.0.0"
   },
   "peerDependencies": {
+    "@deepseek-ai/dsh-client-locale": "^0.0.1",
     "@deepseek-ai/dsh-client-runtime": "^0.0.1",
     "@deepseek-ai/dsh-client-ui-primitives": "^0.0.1",
     "@deepseek-ai/dsh-client-ui-slash": "^0.0.1",
@@ -48,10 +49,10 @@
     "react": "^18.2.0"
   },
   "devDependencies": {
+    "@deepseek-ai/dsh-client-locale": "workspace:^",
     "@deepseek-ai/dsh-client-runtime": "workspace:^",
+    "@deepseek-ai/dsh-goal": "workspace:^",
     "@deepseek-ai/dsh-plan-mode": "workspace:^",
-    "@deepseek-ai/dsh-session-projection": "workspace:^",
-    "@deepseek-ai/dsh-tool-todo": "workspace:^",
     "@deepseek-ai/dsh-client-ui-layout": "workspace:^",
     "@deepseek-ai/dsh-client-ui-primitives": "workspace:^",
     "@deepseek-ai/dsh-client-ui-slash": "workspace:^",

packages/client/ui-conversation/src/client/apply.ts

@@ -3,6 +3,8 @@ import type { Context } from 'cordis'
 import type { BoundActions } from '@deepseek-ai/dsh-client-ui-slots'
 import type { ISessions, SessionId } from '@deepseek-ai/dsh-client-runtime/client'
 import type {} from '@deepseek-ai/dsh-client-ui-layout/client'
+// Type-only: pulls the locale plugin's Context merge (ctx.locale).
+import type {} from '@deepseek-ai/dsh-client-locale/client'
 import type { ViewTab } from './contract/views.ts'
 import type {
   ApprovalWait, ChatViewInjected, ComposerBarInjected, ComposerChainProps, ConversationInjected,
@@ -15,6 +17,7 @@ import type { IConversation } from './service.ts'
 import { InputHub } from './input/hub.ts'
 import { InputBar } from './skeleton/InputBar.tsx'
 import { ChatView } from './chat/ChatView.tsx'
+import { StatsLine } from './chat/StatsLine.tsx'
 import { bashToolviewSample } from './toolviews/bash-sample.tsx'
 import { ApprovalPanel } from './skeleton/ApprovalPanel.tsx'
 import { todoToolview } from './toolviews/todo-row.tsx'
@@ -25,7 +28,7 @@ import { ConversationSession } from './skeleton/ConversationSession.tsx'
 import { DetailsPanel } from './skeleton/DetailsPanel.tsx'
 
 /** Services required by the conversation plugin. */
-export const inject = ['slots', 'layout', 'sessions', 'workspaces']
+export const inject = ['slots', 'layout', 'sessions', 'workspaces', 'locale']
 
 /** Resolve the session-scoped conversation face (scope-addressed send/cancel), failing loud. */
 function scopedConversation(sessions: ISessions, id: SessionId): IConversation {
@@ -50,6 +53,33 @@ export function apply(ctx: Context): void {
   const layout = ctx.layout
   const slots = ctx.slots
 
+  // Command hint locale: friendly placeholder text for claimed commands. The
+  // claimed /plan hint and the plan-mode textarea placeholder share one
+  // string: both describe the same next action.
+  const HINT_NS = 'command.hint'
+  const PLAN_HINT_ZH = '描述你的任务以生成计划'
+  const PLAN_HINT_EN = 'describe your task to generate plan'
+  ctx.effect(() => {
+    const disposers = [
+      ctx.locale.register(HINT_NS, 'zh', {
+        plan: PLAN_HINT_ZH,
+        goal: '输入目标，智能体将持续执行',
+        'goal.active': '当前目标进行中。可输入 edit 修改 / pause 暂停 / resume 继续 / clear 清除',
+        'placeholder.plan': PLAN_HINT_ZH,
+        'placeholder.default': '给智能体发消息',
+      }),
+      ctx.locale.register(HINT_NS, 'en', {
+        plan: PLAN_HINT_EN,
+        goal: 'describe the objective for a long-running task',
+        'goal.active': 'goal active — edit / pause / resume / clear',
+        'placeholder.plan': PLAN_HINT_EN,
+        'placeholder.default': 'Message the agent',
+      }),
+    ]
+    return () => { for (const dispose of disposers) dispose() }
+  }, 'ui-conversation: command hint dictionaries')
+  const translateHint = ctx.locale.bind(HINT_NS)
+
   // Apply-time construction keeps store identity bound to this fiber.
   const chatStore = createChatStore()
 
@@ -159,6 +189,7 @@ export function apply(ctx: Context): void {
           const result = await session.command(line)
           return result.ok && result.value.matched
         },
+        translateHint,
         hooks: { notices: shell.notices, lexicon: shell.lexicon },
       }
     },
@@ -208,6 +239,9 @@ export function apply(ctx: Context): void {
     },
   }, ChatView)
 
+  // Session stats stick with the composer (composer.dock = stats-line family).
+  slots.register({ name: 'conversation.composer.dock', id: 'stats', order: 0 }, StatsLine)
+
   // Class-plugin mount (packages/AGENTS.md service form): the service
   // registers itself as `conversation` and lives on its own child fiber.
   // Mounted AFTER the chat entry register above — construction guarantee for

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

@@ -1,6 +1,8 @@
 /* Chat flow: one 16px rhythm everywhere — between blocks (prose <-> tool
    runs) via the column gap and between consecutive tool rows via the group
-   gap. Input padding cap rides the skeleton. */
+   gap. Input padding cap rides the skeleton. Under
+   `[data-conversation-scroll]` the column host owns overflow and this view
+   is ordinary flow (see ConversationRoot active-phase rules). */
 
 .root {
   position: relative;
@@ -17,6 +19,18 @@
   padding: 16px 24px;
 }
 
+:global([data-conversation-scroll]) .root {
+  flex: 0 0 auto;
+  min-height: auto;
+  height: auto;
+}
+
+:global([data-conversation-scroll]) .scroll {
+  overflow: visible;
+  flex: 0 0 auto;
+  min-height: auto;
+}
+
 /* Message column: 736px fixed width, centered on the same axis as the
    input box; the scroller itself stays full-bleed. */
 .column {
@@ -113,16 +127,34 @@
   opacity: 0.6;
 }
 
-/* Back-to-bottom: 34px circular icon button at the column's right edge. */
-.toBottom {
-  position: absolute;
-  right: max(24px, calc((100% - 736px) / 2));
+/* Back-to-bottom: zero-height sticky slot so the control does not extend
+   scrollHeight; the button translates up into the viewport. Under the
+   conversation host, clearance sits above the sticky composer stack. */
+.toBottomSlot {
+  position: sticky;
   bottom: 16px;
-  width: 34px;
-  height: 34px;
+  /* Above the sticky composer (z-index 7) so the control stays clickable and
+     visible over the input card. */
+  z-index: 8;
+  height: 0;
+  display: flex;
+  justify-content: flex-end;
+  padding-right: max(0px, calc((100% - 736px) / 2));
+  pointer-events: none;
+}
+
+:global([data-conversation-scroll]) .toBottomSlot {
+  /* Clears the sticky composer stack (stats + docks + input card). */
+  bottom: 168px;
+}
+
+.toBottom {
   display: flex;
   align-items: center;
   justify-content: center;
+  width: 34px;
+  height: 34px;
+  margin-top: -34px;
   padding: 0;
   border: 1px solid var(--dsw-alias-border-l2);
   border-radius: 100px;
@@ -130,6 +162,7 @@
   background: var(--dsw-alias-button-floating-fill);
   box-shadow: var(--dsw-shadow-lv2);
   cursor: pointer;
+  pointer-events: auto;
 }
 
 .toBottom:hover {

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

@@ -1,11 +1,16 @@
 // ChatView: the default conversation view — message flow with user bubbles,
 // assistant narration, tool summary rows grouped into step runs, pending
-// cards, paging, bottom-follow, and the session stats line under the flow
-// (chrome dissolved into the view: the footer is part of what a chat view
-// IS, not registration metadata). Pure component registered directly; its
-// registration declares the keyed 'conversation.chat.toolview' hole, so tool
-// rows render through the props renderSlot share (entryKey = tool name,
-// GenericToolCard as the render-site fallback).
+// cards, paging, and bottom-follow. Session stats live on
+// 'conversation.composer.dock' (sticky with the composer). Pure component
+// registered directly; its registration declares the keyed
+// 'conversation.chat.toolview' hole, so tool rows render through the props
+// renderSlot share (entryKey = tool name, GenericToolCard as the render-site
+// fallback).
+//
+// Scroll: when nested under `[data-conversation-scroll]` (active conversation
+// column), that host is the scrollport and this view is flow content; when
+// mounted alone (unit tests), `.scroll` owns overflow. Bottom-follow and
+// prepend anchoring always target the resolved scrollport.
 //
 // Render economics (architecture RFC performance model): the list parent
 // subscribes to snapshot segments that do NOT change per streaming chunk
@@ -17,7 +22,7 @@
 // memoized rows never churns them.
 
 import {
-  memo, useLayoutEffect, useMemo, useRef, useState, type ReactNode,
+  memo, useEffect, useLayoutEffect, useMemo, useRef, useState, type ReactNode,
 } from 'react'
 import type {
   CodeSubCall, CommandNode, ConversationNode, ConversationSnapshot, RunningToolCall, ToolResultNode,
@@ -30,11 +35,15 @@ import { AssistantMarkdown } from './AssistantMarkdown.tsx'
 import { GenericCommandCard } from './GenericCommandCard.tsx'
 import { GenericToolCard } from './GenericToolCard.tsx'
 import { MessageItem } from './MessageItem.tsx'
-import { StatsLine } from './StatsLine.tsx'
 import css from './ChatView.module.css'
 
 const FOLLOW_THRESHOLD = 24
 
+/** Active column host when present; otherwise the view-local scroller. */
+function scrollerOf(from: HTMLElement): HTMLElement {
+  return (from.closest('[data-conversation-scroll]')) ?? from
+}
+
 type OpenFile = (path: string) => void
 
 /** The declared toolview hole's render share (stable framework binding, passed through memoized rows). */
@@ -244,26 +253,34 @@ export function ChatView({ useSession, useSessions, useStore, renderSlot, sessio
   const firstSeqRef = useRef<number | null>(null)
   const openedRef = useRef(false)
   const lastKeyRef = useRef<string | null>(null)
+  /** Flow tip signature — follow-scroll only when this moves, never on a
+   *  scroll-driven at-bottom chrome re-render (that was snapping inertial
+   *  scrolls the rest of the way to the floor). */
+  const followSigRef = useRef<string | null>(null)
 
   const firstSeq = nodes[0]?.seq ?? null
   const lastItem = items[items.length - 1]
+  const lastKey = lastItem?.key ?? null
+  const followSig = `${openState}:${firstSeq}:${lastKey}:${nodes.length}:${running ? 1 : 0}:${runningCalls.length}`
 
-  const toBottom = (el: HTMLDivElement): void => {
+  const toBottom = (el: HTMLElement): void => {
     el.scrollTop = el.scrollHeight
     atBottomRef.current = true
     setAtBottom(true)
   }
 
   useLayoutEffect(() => {
-    const el = listRef.current
+    const local = listRef.current
     /* v8 ignore next -- ref-null guard: React attaches the ref before layout effects run. */
-    if (el === null) return
+    if (local === null) return
+    const el = scrollerOf(local)
     // Open completed: jump to the bottom once.
     if (openState === 'open' && !openedRef.current) {
       openedRef.current = true
       toBottom(el)
       firstSeqRef.current = firstSeq
-      lastKeyRef.current = lastItem?.key ?? null
+      lastKeyRef.current = lastKey
+      followSigRef.current = followSig
       return
     }
     // Prepend (head seq decreased): compensate by the height delta.
@@ -272,42 +289,65 @@ export function ChatView({ useSession, useSessions, useStore, renderSlot, sessio
       anchorRef.current = null
       firstSeqRef.current = firstSeq
       /* v8 ignore next -- ?? arm: a prepend adds nodes, so the flow list here is never empty. */
-      lastKeyRef.current = lastItem?.key ?? null
+      lastKeyRef.current = lastKey
+      followSigRef.current = followSig
       return
     }
     firstSeqRef.current = firstSeq
     // Own words must be visible: a new trailing user node force-scrolls
     // (send lives in the composer, so arrival is detected here, not armed there).
-    const lastKey = lastItem?.key ?? null
     const appendedUser = lastKey !== lastKeyRef.current
       && lastItem !== undefined && lastItem.kind === 'node' && lastItem.node.kind === 'user'
+    const tipMoved = followSigRef.current !== followSig
     lastKeyRef.current = lastKey
-    if (appendedUser || atBottomRef.current) toBottom(el)
+    followSigRef.current = followSig
+    // Follow new flow content while pinned; do NOT re-pin on every render
+    // merely because atBottomRef is true (scroll threshold → setState → snap).
+    if (appendedUser || (tipMoved && atBottomRef.current)) toBottom(el)
   })
 
-  const onScroll = (): void => {
-    const el = listRef.current
-    /* v8 ignore next -- ref-null guard: the handler only fires on the mounted element. */
-    if (el === null) return
+  const onScrollRef = useRef(() => {})
+  onScrollRef.current = () => {
+    const local = listRef.current
+    /* v8 ignore next -- ref-null guard: the handler only fires while mounted. */
+    if (local === null) return
+    const el = scrollerOf(local)
     const isAtBottom = el.scrollHeight - el.scrollTop - el.clientHeight <= FOLLOW_THRESHOLD + 1
     atBottomRef.current = isAtBottom
     setAtBottom(isAtBottom)
   }
 
+  // Bind scroll to the resolved scrollport (host or local) once per mount.
+  useEffect(() => {
+    const local = listRef.current
+    /* v8 ignore next -- ref-null guard: effect runs after the list node commits. */
+    if (local === null) return
+    const el = scrollerOf(local)
+    const onScroll = (): void => { onScrollRef.current() }
+    el.addEventListener('scroll', onScroll, { passive: true })
+    return () => { el.removeEventListener('scroll', onScroll) }
+  }, [])
+
   // Follow streaming growth the parent never re-renders for (stable ref).
   // The ref starts null and is assigned every render, so the placeholder
   // initializer a function initial value would need never exists.
   const followRef = useRef<(() => void) | null>(null)
   followRef.current = () => {
-    const el = listRef.current
-    if (el !== null && atBottomRef.current) el.scrollTop = el.scrollHeight
+    const local = listRef.current
+    if (local !== null && atBottomRef.current) {
+      const el = scrollerOf(local)
+      el.scrollTop = el.scrollHeight
+    }
   }
   const onGrow = useRef(() => followRef.current?.()).current
 
   const loadOlderAnchored = (): void => {
-    const el = listRef.current
+    const local = listRef.current
     /* v8 ignore next -- ref-null guard: the paging button renders inside the list tree. */
-    if (el !== null) anchorRef.current = { h: el.scrollHeight, t: el.scrollTop }
+    if (local !== null) {
+      const el = scrollerOf(local)
+      anchorRef.current = { h: el.scrollHeight, t: el.scrollTop }
+    }
     loadOlder()
   }
 
@@ -350,7 +390,7 @@ export function ChatView({ useSession, useSessions, useStore, renderSlot, sessio
 
   return (
     <div className={css.root}>
-      <div ref={listRef} className={css.scroll} onScroll={onScroll}>
+      <div ref={listRef} className={css.scroll}>
         <div className={css.column}>
           {openState === 'loading' && <div className={css.hint}>载入历史…</div>}
           {openState === 'error' && <div className={css.openError}>历史加载失败：{openErrorMessage}</div>}
@@ -388,22 +428,23 @@ export function ChatView({ useSession, useSessions, useStore, renderSlot, sessio
               wait, tool execution, streaming) so it never flickers per step. */}
           {running && <TurnDots />}
         </div>
+        {!atBottom && (
+          <div className={css.toBottomSlot}>
+            <button
+              type="button"
+              className={css.toBottom}
+              aria-label="回到底部"
+              onClick={() => {
+                const local = listRef.current
+                /* v8 ignore next -- ref-null guard: the button only renders alongside the mounted list. */
+                if (local !== null) toBottom(scrollerOf(local))
+              }}
+            >
+              <IconChevronDownOutline14 />
+            </button>
+          </div>
+        )}
       </div>
-      <StatsLine useSession={useSession} />
-      {!atBottom && (
-        <button
-          type="button"
-          className={css.toBottom}
-          aria-label="回到底部"
-          onClick={() => {
-            const el = listRef.current
-            /* v8 ignore next -- ref-null guard: the button only renders alongside the mounted list. */
-            if (el !== null) toBottom(el)
-          }}
-        >
-          <IconChevronDownOutline14 />
-        </button>
-      )}
     </div>
   )
 }

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

@@ -1,4 +1,6 @@
 // Settled-node identity prevents stream-delta updates from rerendering this row.
+// Mounted on 'conversation.composer.dock' so it sticks with the composer in the
+// active conversation scrollport (see ConversationRoot data-conversation-scroll).
 
 import { memo, useMemo } from 'react'
 import type { ConversationSnapshot } from '@deepseek-ai/dsh-client-runtime/client'
@@ -49,7 +51,7 @@ export function deriveStats(nodes: ConversationSnapshot['nodes']): UsageTotals {
   }
 }
 
-/** Props: the conversation-snapshot selector hook (handed down by ChatView). */
+/** Props: the conversation-snapshot selector (dock registration or unit mount). */
 export interface StatsLineProps { useSession: SnapshotSelectorHook<ConversationSnapshot> }
 
 export const StatsLine = memo(function StatsLine({ useSession }: StatsLineProps) {

packages/client/ui-conversation/src/client/contract/slots.ts

@@ -117,6 +117,18 @@ declare module '@deepseek-ai/dsh-client-ui-slots' {
 
 /** Owner share of the strict session content seat. */
 export interface ConversationSessionOwnerProps {
+  /**
+   * Wrap the view ring in the transcript scrollport that also hosts the
+   * sticky composer seat (whole `'conversation.composer'` chain output).
+   * Supplied for every real session (hero/settling/active) so the composer
+   * keeps one tree seat across the blank → active flip; the header stays
+   * outside that wrapper as ordinary column chrome (`flex: none`), while
+   * active CSS sticks the seat to the bottom of the same scrollport so wheel
+   * over the footer scrolls the flow.
+   * @param view - the session view-ring content (null while blank chrome is hidden).
+   * @returns the scrollport containing `view` and the sticky composer seat.
+   */
+  wrapActiveBody?: (view: ReactNode) => ReactNode
 }
 
 /**
@@ -257,6 +269,8 @@ export interface ComposerBarInjected {
    * Resolves admission: false = rejected/unmatched/transport failure.
    */
   command: (line: string) => Promise<boolean>
+  /** Locale-aware hint translator for claimed command placeholders. */
+  translateHint: (key: string) => string
   /** Registrant hooks compartment: the renderer binds these to useNotices/useLexicon. */
   hooks: {
     /** Latest surfaced notice (null after none; seq keys re-render of repeats). */

packages/client/ui-conversation/src/client/input/machine.ts

@@ -297,14 +297,23 @@ export class InputMachine {
     return []
   }
 
-  /** Shared chip-insertion transaction: replace [span) with one placeholder occurrence (insert-ref and paste-upgrade both land here). */
-  private replaceSpanWithChip(reference: ReferenceInsert, span: TokenSpan): void {
+  /**
+   * Shared chip-insertion transaction: replace [span) with one placeholder
+   * occurrence (insert-ref and paste-upgrade both land here). A separating
+   * space follows the chip unless one is already next.
+   * @returns the inserted length (placeholder plus optional gap).
+   */
+  private replaceSpanWithChip(reference: ReferenceInsert, span: TokenSpan): number {
     this.pushTxn()
     this.typingRun = undefined
-    this.reconcile({ start: span.start, end: span.end, insertedLength: 1 })
+    const tail = this.draft.slice(span.end)
+    const gap = tail.length === 0 || tail[0] !== ' ' ? ' ' : ''
+    const inserted = PLACEHOLDER + gap
+    this.reconcile({ start: span.start, end: span.end, insertedLength: inserted.length })
     this.withMinted([this.mint(reference, span.start)])
-    this.adopt(this.draft.slice(0, span.start) + PLACEHOLDER + this.draft.slice(span.end))
+    this.adopt(this.draft.slice(0, span.start) + inserted + tail)
     this.watchClaim()
+    return inserted.length
   }
 
   /**
@@ -442,10 +451,10 @@ export class InputMachine {
     if (attempt === undefined || attempt.attemptId !== attemptId) return []
     if (this.phase !== 'plain' && this.phase !== 'claimed') return []
     if (!this.casOk(span) || span.start === span.end) return []
-    this.replaceSpanWithChip(reference, span)
+    const insertedLength = this.replaceSpanWithChip(reference, span)
     this.paste = {
       ...attempt,
-      insertedRange: { start: attempt.insertedRange.start, end: attempt.insertedRange.end + 1 - (span.end - span.start) },
+      insertedRange: { start: attempt.insertedRange.start, end: attempt.insertedRange.end + insertedLength - (span.end - span.start) },
     }
     return []
   }

packages/client/ui-conversation/src/client/skeleton/ConversationRoot.module.css

@@ -17,6 +17,12 @@
   border-bottom: 1px solid var(--dsw-alias-border-l2);
 }
 
+/* Blank hero/settling: keep the header node mounted (stable Session tree for
+   the wrapActiveBody composer) without taking column space. */
+.headerHidden {
+  display: none;
+}
+
 .crumbRow {
   display: flex;
   align-items: center;
@@ -127,6 +133,46 @@
   flex-direction: column;
 }
 
+/* Common seat for the composer chain (fallback + elected overlay siblings). */
+.composerSeat {
+  display: flex;
+  flex: none;
+  flex-direction: column;
+}
+
+/* Active phase: header is ordinary column chrome above the scrollport (not
+   sticky). The scroll body holds the transcript and the sticky composer seat
+   so wheel over the footer moves the flow. */
+.root[data-phase='active'] {
+  overflow: hidden;
+}
+
+.root[data-phase='active'] .header {
+  flex: none;
+}
+
+.scrollBody {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.root[data-phase='active'] .viewArea {
+  flex: 1 0 auto;
+  min-height: auto;
+}
+
+.root[data-phase='active'] .composerSeat {
+  position: sticky;
+  bottom: 0;
+  /* Above markdown CodeBlock sticky banners (z-index 6) so the footer never
+     paints under a sticking code header while scrolling. */
+  z-index: 7;
+  background: var(--dsw-alias-bg-base);
+}
+
 /* Hero phase: the composer stack (hero chrome + workspace row + card) is
    flex-centered in the column; composer phase docks it at the bottom. Flex,
    NOT absolute+transform: a transform would make this box the containing
@@ -165,12 +211,15 @@
   padding-left: 8px;
 }
 
-.root[data-phase='hero'] {
+/* Hero: the composer sits inside the session scroll body; center there so
+   the tree seat matches active (sticky footer) without a Root remount. */
+.root[data-phase='hero'] .scrollBody {
   justify-content: center;
+  overflow-y: auto;
 }
 
-/* Settling (session replaying, hero/docked unknown): keep the composer
+/* Settling (session replaying, hero/docked unknown): keep the composer seat
    mounted but invisible so no wrong layout flashes before the phase lands. */
-.root[data-phase='settling'] .composerStack {
+.root[data-phase='settling'] .composerSeat {
   visibility: hidden;
 }

packages/client/ui-conversation/src/client/skeleton/ConversationRoot.tsx

@@ -2,7 +2,7 @@
 // chain stay mounted across no-session/session transitions. Only the inert
 // input body swaps for the strict session InputBar.
 
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useRef, useState, type ReactNode } from 'react'
 import clsx from 'clsx'
 import type { WorkspaceId } from '@deepseek-ai/dsh-client-runtime/client'
 import type { ConversationSlotProps, InputZone } from '../contract/slots.ts'
@@ -113,24 +113,53 @@ export function ConversationRoot({
       {hero && <HeroGlow className={css.heroGlow} />}
       {hero && <HeroShell />}
       {hero && heroWorkspaceRow}
-      {!hero && zone !== undefined && renderSlot('conversation.input.dock', zone)}
+      {/* Stats band above the input-dock strips so the prior ChatView footer
+          order (stats → todo/queue → card) is preserved under the sticky stack. */}
       {!hero && zone !== undefined && renderSlot('conversation.composer.dock', zone)}
+      {!hero && zone !== undefined && renderSlot('conversation.input.dock', zone)}
       {inputBar}
     </div>
   )
 
+  const phase = settling ? 'settling' : hero ? 'hero' : 'active'
+  const composer = renderSlotChain(
+    'conversation.composer',
+    { interactions: pending },
+    { fallback: composerBar, overlay: true },
+  )
+
+  // Sticky wraps the whole chain output (fallback + elected overlay), not
+  // only `.composerStack`: overlay:true renders those as siblings, and sticky
+  // on the fallback alone would leave Question/Approval panels at the content
+  // end off-screen when the user is not pinned to the floor.
+  const composerSeat = (
+    <div className={css.composerSeat} data-composer-seat="">
+      {composer}
+    </div>
+  )
+
+  // Header stays column chrome above this scrollport; the sticky composer
+  // seat lives inside it with the transcript. Always wrap while a session
+  // exists (hero/settling/active) so the composer keeps one tree seat across
+  // the blank → active flip — relocating it only in active remounted the textarea.
+  const wrapActiveBody = (view: ReactNode): ReactNode => (
+    <div className={css.scrollBody} data-conversation-scroll="">
+      {view}
+      {composerSeat}
+    </div>
+  )
+
   return (
-    <div className={css.root} data-phase={settling ? 'settling' : hero ? 'hero' : 'active'}>
+    <div className={css.root} data-phase={phase}>
       {/* Mounted for every real session, hero included: ConversationSession
-          renders no chrome while blank but owns the draft-persistence mirror
-          bind — unmounting it in the hero would lose pre-first-send text on
-          a refresh or scope rebuild. */}
-      {sessionId !== undefined && renderSlot('conversation.session', {})}
-      {renderSlotChain(
-        'conversation.composer',
-        { interactions: pending },
-        { fallback: composerBar, overlay: true },
+          keeps a chrome-hidden shell while blank and owns the draft-
+          persistence mirror bind — unmounting it in the hero would lose
+          pre-first-send text on a refresh or scope rebuild. */}
+      {sessionId !== undefined && renderSlot(
+        'conversation.session',
+        { wrapActiveBody },
       )}
+      {sessionId === undefined ? composerSeat : null}
     </div>
   )
 }

packages/client/ui-conversation/src/client/skeleton/ConversationSession.tsx

@@ -1,6 +1,6 @@
 /** Strict per-session conversation content: header, view ring, and chat store bindings. */
 
-import { useEffect, useSyncExternalStore } from 'react'
+import { useEffect, useSyncExternalStore, type ReactNode } from 'react'
 import clsx from 'clsx'
 import { shallowEqual } from '@deepseek-ai/dsh-client-runtime/client'
 import type { SessionId, SessionListState, SessionSummary } from '@deepseek-ai/dsh-client-runtime/client'
@@ -24,7 +24,7 @@ function deriveAncestry(list: SessionListState, id: SessionId): readonly Session
 
 export function ConversationSession({
   sessionId, useSession, useSessions, useInput, inputActions, useStore, actions,
-  renderSlot, views, bindDraftMirror, open,
+  renderSlot, views, bindDraftMirror, open, wrapActiveBody,
 }: ConversationSessionProps) {
   useSyncExternalStore(views.subscribe, views.version)
   const tabs = views.list()
@@ -44,52 +44,67 @@ export function ConversationSession({
     // the machine mirror, not this seed effect.
   }, [inputActions])
 
-  if (blank && composerPhase === 'blank') return null
+  // Blank hero/settling: keep the same header + body tree shape so a
+  // wrapActiveBody-hosted composer keeps its DOM identity across the first
+  // send (hero → active). Chrome is hidden; the draft-persistence mirror
+  // still runs because this component stays mounted.
+  const hideChrome = blank && composerPhase === 'blank'
+
+  const view: ReactNode = hideChrome ? null : (
+    <div className={css.viewArea}>
+      {active !== undefined && renderSlot('conversation.view', {}, { only: active.id })}
+    </div>
+  )
 
   return (
     <>
-      <header className={css.header}>
-        <div className={css.crumbRow}>
-          <nav className={css.crumbs} aria-label="Session hierarchy">
-            {ancestry.map((summary, index) => {
-              const last = index === ancestry.length - 1
-              return (
-                <span key={summary.id} className={css.crumbSeg}>
-                  {index > 0 && <span className={css.crumbSep}>/</span>}
+      <header
+        className={clsx(css.header, hideChrome && css.headerHidden)}
+        aria-hidden={hideChrome || undefined}
+      >
+        {!hideChrome && (
+          <>
+            <div className={css.crumbRow}>
+              <nav className={css.crumbs} aria-label="Session hierarchy">
+                {ancestry.map((summary, index) => {
+                  const last = index === ancestry.length - 1
+                  return (
+                    <span key={summary.id} className={css.crumbSeg}>
+                      {index > 0 && <span className={css.crumbSep}>/</span>}
+                      <button
+                        type="button"
+                        className={clsx(css.crumb, last && css.crumbCurrent)}
+                        disabled={last}
+                        onClick={() => { open(summary.id) }}
+                      >
+                        {summary.displayTitle}
+                      </button>
+                    </span>
+                  )
+                })}
+                {ancestry.length === 0 && <span className={css.crumbCurrent}>{sessionId}</span>}
+              </nav>
+            </div>
+            {tabs.length > 1 && (
+              <div className={css.tabs} role="tablist">
+                {tabs.map(viewTab => (
                   <button
+                    key={viewTab.id}
                     type="button"
-                    className={clsx(css.crumb, last && css.crumbCurrent)}
-                    disabled={last}
-                    onClick={() => { open(summary.id) }}
+                    role="tab"
+                    aria-selected={viewTab.id === active?.id}
+                    className={clsx(css.tab, viewTab.id === active?.id && css.tabActive)}
+                    onClick={() => { actions.setView(viewTab.id) }}
                   >
-                    {summary.displayTitle}
+                    {viewTab.label}
                   </button>
-                </span>
-              )
-            })}
-            {ancestry.length === 0 && <span className={css.crumbCurrent}>{sessionId}</span>}
-          </nav>
-        </div>
-        {tabs.length > 1 && (
-          <div className={css.tabs} role="tablist">
-            {tabs.map(view => (
-              <button
-                key={view.id}
-                type="button"
-                role="tab"
-                aria-selected={view.id === active?.id}
-                className={clsx(css.tab, view.id === active?.id && css.tabActive)}
-                onClick={() => { actions.setView(view.id) }}
-              >
-                {view.label}
-              </button>
-            ))}
-          </div>
+                ))}
+              </div>
+            )}
+          </>
         )}
       </header>
-      <div className={css.viewArea}>
-        {active !== undefined && renderSlot('conversation.view', {}, { only: active.id })}
-      </div>
+      {wrapActiveBody !== undefined ? wrapActiveBody(view) : view}
     </>
   )
 }

packages/client/ui-conversation/src/client/skeleton/EmptyHero.tsx

@@ -115,9 +115,9 @@ export function HeroShell({ children }: HeroShellProps) {
           Let's start building
         </div>
         <div className={css.body}>
-          {/* The resident composer (rendered by ConversationRoot at its stable
-              tree position; the workspace row rides its accessory hole) is
-              CSS-positioned into this gap during the hero phase — see
+          {/* The resident composer (ConversationRoot wrapActiveBody seat; the
+              workspace row rides the stack above the card) is CSS-centered in
+              the session scroll body during hero — see
               ConversationRoot.module.css [data-phase='hero']. */}
         </div>
       </div>

packages/client/ui-conversation/src/client/skeleton/InputBar.module.css

@@ -125,20 +125,18 @@
   position: absolute;
   inset: 0;
   overflow: hidden;
-  color: transparent;
+  color: var(--dsw-alias-label-primary);
   pointer-events: none;
 }
 
 .hlToken {
-  border-radius: 4px;
-  /* GOAL 稿 amber token emphasis (state warn pair; glyphs stay the textarea's). */
-  background: var(--dsw-alias-state-warn-tertiary);
-  color: transparent;
+  background-color: transparent;
+  color: var(--dsw-alias-state-warn-label);
 }
 
 .hlSegment {
   border-radius: 4px;
-  background: var(--dsw-alias-interactive-bg-hover);
+  background-color: transparent;
   color: transparent;
 }
 
@@ -170,7 +168,7 @@
   border: none;
   outline: none;
   background: transparent;
-  color: var(--dsw-alias-label-primary);
+  color: transparent;
   /* Business blue, not brand-primary: that token resolves to ink in this sheet. */
   caret-color: var(--dsw-alias-state-business-primary);
 }
@@ -348,25 +346,13 @@
    draft's own glyphs — advance untouched, so the two layers cannot drift.
    Chip family colors; clone keeps rounded ends on soft-wrap fragments. */
 .textRef {
-  color: transparent;
   background-color: transparent;
+  color: var(--dsw-alias-state-business-primary);
   box-decoration-break: clone;
   -webkit-box-decoration-break: clone;
-  position: relative;
 }
 .textRef:after {
-  content: "";
-  position: absolute;
-  left: 0;
-  top: 0;
-
-  width: 100%;
-  height: 100%;
-
-  border-radius: 6px;
-  background: rgba(97, 135, 216, 0.22);
-  transform: translate(-2px, -1px);
-  padding: 2px 4px;
+  display: none;
 }
 
 /* Reference chip: rendered in the backdrop at the placeholder offset. Hard

packages/client/ui-conversation/src/client/skeleton/InputBar.tsx

@@ -13,6 +13,8 @@ import { IconPlusOutline16 } 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'
+// Type-only: the `goal` projection key merge (hint disambiguation).
+import type {} from '@deepseek-ai/dsh-goal/client'
 import type { ComposerBarProps } from '../contract/slots.ts'
 import { deriveDecorations } from '../input/decorations.ts'
 import { PermissionSelect } from './PermissionSelect.tsx'
@@ -27,7 +29,7 @@ export interface InputBarError {
 export type InputBarProps = ComposerBarProps
 
 export function InputBar({
-  useSession, useInput, inputActions, keyboard, stop, command, renderSlot, useNotices, useLexicon, useProjection,
+  useSession, useInput, inputActions, keyboard, stop, command, translateHint, renderSlot, useNotices, useLexicon, useProjection,
   variant, placeholder, accessory, overlay, leftItems, rightItems, onAdd, addLabel = 'Add attachment',
 }: InputBarProps) {
   const input = useInput(s => s)
@@ -39,6 +41,8 @@ export function InputBar({
   // Plan mode swaps the textarea placeholder (the projection is the folded
   // host value; owner-prop placeholders — hero, session-unavailable — win).
   const planActive = useProjection('plan', plan => plan !== undefined && (plan.pending ? !plan.active : plan.active))
+  // Absent (undefined: no frame yet) and cleared (null) both mean no goal.
+  const hasGoal = useProjection('goal', goal => goal != null)
   // Prompt failures are ordinary failures (no create/attach transaction
   // exists anymore): the strip renders promptError, the draft stays in the
   // machine, and the user resubmits.
@@ -75,6 +79,27 @@ export function InputBar({
     if (!locked) inputRef.current?.focus()
   }, [locked])
 
+  // Active conversation scrollport: chain the wheel. While the textarea (capped
+  // at 14 lines with overflow-y:auto) can still move in this direction, keep
+  // the native scroll; only at its own edge forward delta to the host so a
+  // short draft never traps the gesture and a long draft stays scrollable.
+  // Hero mounts have no host and keep native wheel scrolling.
+  useEffect(() => {
+    const el = inputRef.current
+    if (el === null) return
+    const onWheel = (e: WheelEvent): void => {
+      const host = el.closest('[data-conversation-scroll]')
+      if (!(host instanceof HTMLElement) || e.deltaY === 0) return
+      const atTop = el.scrollTop <= 0
+      const atEnd = el.scrollTop + el.clientHeight >= el.scrollHeight - 1
+      if ((e.deltaY < 0 && !atTop) || (e.deltaY > 0 && !atEnd)) return
+      e.preventDefault()
+      host.scrollTop += e.deltaY
+    }
+    el.addEventListener('wheel', onWheel, { passive: false })
+    return () => { el.removeEventListener('wheel', onWheel) }
+  }, [])
+
   const onKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>): void => {
     // Shift+Enter is the native newline UNCONDITIONALLY — decided before the
     // IME guard so a composition-closing Shift+Enter still breaks the line.
@@ -296,7 +321,12 @@ export function InputBar({
     }
     pushPlain(draft.length)
     if (deco.hint !== null) {
-      backdrop.push(<span key="hint" className={css.hint} data-decoration="hint">{deco.hint}</span>)
+      // Claim tokens are shaped `/name ` (trailing space); trim to the bare name.
+      const commandName = input.claim?.token.slice(1).trim() ?? ''
+      const hintKey = commandName === 'goal' && hasGoal ? 'goal.active' : commandName
+      const translated = translateHint(hintKey)
+      const displayHint = translated !== hintKey ? translated : deco.hint
+      backdrop.push(<span key="hint" className={css.hint} data-decoration="hint">{displayHint}</span>)
     }
   }
 
@@ -312,7 +342,7 @@ export function InputBar({
           {notice.text}
         </div>
       )}
-      <div className={css.card}>
+      <div className={css.card} data-composer-card>
         {overlay !== undefined && <div className={css.overlayAnchor}>{overlay}</div>}
         {accessory !== undefined && <div className={css.accessory}>{accessory}</div>}
         {/* Mirror-div auto-grow: the hidden mirror renders draft+'\n' and stretches the wrapper
@@ -329,7 +359,7 @@ export function InputBar({
             data-phase={input.phase}
             placeholder={placeholder ?? (disabled
               ? 'Session unavailable'
-              : planActive ? 'describe your task to generate plan' : 'Message the agent')}
+              : planActive ? translateHint('placeholder.plan') : translateHint('placeholder.default'))}
             rows={2}
             onChange={onChange}
             onKeyDown={onKeyDown}

packages/client/ui-conversation/src/client/skeleton/PermissionSelect.module.css

@@ -1,49 +1,43 @@
-/* Composer bottom-row permission chip (draft start.jpeg `Read-only ∨`): a
-   quiet text chip with a chevron; hover paints the standard interactive pill.
-   The native select is stretched invisibly over the chip so the platform
-   dropdown does the menu work — keyboard/AT semantics come free. */
-
-.root {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-}
-
-.chip {
+.trigger {
   display: inline-flex;
   align-items: center;
   gap: 4px;
-  padding: 6px 8px;
-  border-radius: 8px;
-  color: var(--dsw-alias-label-secondary);
-  font-size: 14px;
-  line-height: 20px;
-  pointer-events: none; /* the overlaid select owns the interaction */
-}
-
-.root:hover .chip {
-  background: var(--dsw-alias-interactive-bg-hover);
-}
-
-.chevron {
-  color: var(--dsw-alias-label-caption);
-}
-
-/* Invisible native select stretched over the chip: real menu, zero drawing. */
-.select {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 0;
+  min-width: 0;
+  max-width: 220px;
+  height: 28px;
+  padding: 0 4px 0 8px;
   border: none;
+  border-radius: 8px;
+  outline: none;
+  background: transparent;
+  color: var(--dsw-alias-label-secondary);
+  font-size: 13px;
+  line-height: 20px;
+  font-weight: 500;
   cursor: pointer;
 }
 
-.select:disabled {
+.trigger:hover:not(:disabled) {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.trigger:focus-visible {
+  box-shadow: 0 0 0 2px var(--dsw-alias-border-l3);
+}
+
+.trigger:disabled {
+  color: var(--dsw-alias-label-dimmed);
   cursor: default;
 }
 
-.root:has(.select:disabled) .chip {
-  opacity: 0.5;
+.triggerLabel {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.chevron {
+  flex: 0 0 auto;
+  color: var(--dsw-alias-label-caption);
 }

packages/client/ui-conversation/src/client/skeleton/PermissionSelect.tsx

@@ -1,27 +1,14 @@
-// PermissionSelect: the composer bottom-row permission chip (draft
-// start.jpeg's `Read-only ∨` control), the Access seat's wired occupant.
-// Options and the current value read from the host-computed `permissions`
-// projection (baseline block + push frames — no fetch, no mount timing);
-// key absence (a permission-less composition, or a Draft with no host
-// session yet) renders nothing. The visible chip is presentation only — an
-// invisible native select stretched over it owns the menu and interaction.
-// A switch submits the `/permission <preset>` command line (the one write
-// path); the control shows the picked value optimistically and disables
-// until the admission result, then re-follows the projection — the pushed
-// frame confirms the switch, and a failed/unmatched submit falls back to
-// the still-authoritative projection value (`custom` is shown as the
-// current value but never offered as a target — the host omits it from
-// switchable options).
-
 import { useState } from 'react'
 import type { PermissionSelect as PermissionSelectValue } from '@deepseek-ai/dsh-permission/client'
+import { Menu } from '@deepseek-ai/dsh-client-ui-primitives'
+import type { MenuEntry } from '@deepseek-ai/dsh-client-ui-primitives'
 import css from './PermissionSelect.module.css'
 
 /**
  * Display transform: kebab-case machine names render as title-case labels
- * (`workspace-write` → `Workspace Write`). Presentation-only — the wire
- * vocabulary and the host's advertised names are untouched; a host-configured
- * name that is not kebab-case (contains spaces or uppercase) passes through.
+ * (`workspace-write` → `Workspace Write`); non-kebab host-configured names
+ * pass through. Twin of the /permission popup's (client ui-permission) — the
+ * two permission surfaces must show the same text.
  */
 function displayName(name: string): string {
   if (!/^[a-z0-9]+(-[a-z0-9]+)*$/.test(name)) return name
@@ -29,52 +16,57 @@ function displayName(name: string): string {
 }
 
 export interface PermissionSelectProps {
-  /** The host-computed select, or undefined while the capability is absent. */
   value: PermissionSelectValue | undefined
-  /** Session-removed lock (the bar's chrome disable state). */
   locked: boolean
-  /** Submit one slash-command line; resolves admission (false = rejected/unmatched). */
   command: (line: string) => Promise<boolean>
 }
 
 export function PermissionSelect({ value, locked, command }: PermissionSelectProps) {
-  // Optimistic pick, shown while the admission round-trip runs; null follows
-  // the projection (the pushed frame lands the confirmed value there).
   const [pick, setPick] = useState<string | null>(null)
+  const [open, setOpen] = useState(false)
+
   if (value === undefined) return null
 
   const currentValue = pick ?? value.currentValue
   const current = value.options.find(option => option.value === currentValue)
+  const busy = pick !== null
 
-  const onChange = (next: string): void => {
-    if (next === value.currentValue) return
-    setPick(next)
-    void command(`/permission ${next}`)
+  const items: MenuEntry[] = value.options
+    .filter(o => o.value !== 'custom')
+    .map(option => ({ id: option.value, label: displayName(option.name) }))
+
+  const choose = (id: string): void => {
+    setOpen(false)
+    if (id === value.currentValue) return
+    setPick(id)
+    void command(`/permission ${id}`)
       .catch(() => false)
       .then(() => { setPick(null) })
   }
 
   return (
-    <label className={css.root} title={current?.description}>
-      <span className={css.chip}>
-        {displayName(current?.name ?? currentValue)}
-        <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>
-      </span>
-      <select
-        className={css.select}
-        aria-label="Access mode"
-        value={currentValue}
-        disabled={locked || pick !== null}
-        onChange={(e) => { onChange(e.target.value) }}
-      >
-        {value.options.map(option => (
-          <option key={option.value} value={option.value} disabled={option.value === 'custom'}>
-            {displayName(option.name)}
-          </option>
-        ))}
-      </select>
-    </label>
+    <Menu
+      open={open}
+      items={items}
+      selectedId={currentValue}
+      onSelect={choose}
+      onClose={() => { setOpen(false) }}
+      side="top"
+      anchor={
+        <button
+          type="button"
+          className={css.trigger}
+          aria-label={`Access mode, current: ${displayName(current?.name ?? currentValue)}`}
+          title={current?.description}
+          disabled={locked || busy}
+          onClick={() => { setOpen(!open) }}
+        >
+          <span className={css.triggerLabel}>{displayName(current?.name ?? currentValue)}</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>
+        </button>
+      }
+    />
   )
 }

packages/client/ui-conversation/src/client/skeleton/TodoPanel.tsx

@@ -83,7 +83,7 @@ function progressLabel(todos: readonly TodoItem[]): string {
 }
 
 export function TodoPanel({ todos }: TodoPanelProps) {
-  const [collapsed, setCollapsed] = useState(false)
+  const [collapsed, setCollapsed] = useState(true)
   if (todos.length === 0) return null
 
   return (

packages/client/ui-conversation/tests/apply-inject.spec.tsx

@@ -17,6 +17,7 @@
 import { describe, expect, it, vi } from 'vitest'
 import { SlotTestRuntime } from '@deepseek-ai/dsh-client-test-runtime'
 import type { SessionBehaviorOverrides } from '@deepseek-ai/dsh-client-test-runtime'
+import { LocaleService } from '@deepseek-ai/dsh-client-locale/client'
 import type { ISession, SessionId } from '@deepseek-ai/dsh-client-runtime/client'
 import { apply, inject } from '@deepseek-ai/dsh-client-ui-conversation/client'
 import type {
@@ -49,6 +50,7 @@ async function bench() {
   })
   const layoutFake = { openDetails: vi.fn(), closeDetails: vi.fn() }
   runtime.provide('layout', layoutFake)
+  runtime.provide('locale', new LocaleService(runtime.ctx))
 
   // The AppFrame role: the conversation-package slots must be declared by a
   // live entry before apply can contribute into them.

packages/client/ui-conversation/tests/chat-apply.spec.tsx

@@ -10,6 +10,7 @@
 
 import { describe, expect, it, vi } from 'vitest'
 import { SlotTestRuntime } from '@deepseek-ai/dsh-client-test-runtime'
+import { LocaleService } from '@deepseek-ai/dsh-client-locale/client'
 import type { SessionId } from '@deepseek-ai/dsh-client-runtime/client'
 import { apply, inject } from '@deepseek-ai/dsh-client-ui-conversation/client'
 
@@ -22,6 +23,7 @@ async function bench() {
   await runtime.sessions.add(
     { id: CHILD, summary: { title: 'C', displayTitle: 'C', parentId: ROOT } }, { current: false })
   runtime.provide('layout', { openDetails: vi.fn(), closeDetails: vi.fn() })
+  runtime.provide('locale', new LocaleService(runtime.ctx))
 
   // Declared by ui-layout's root entry in production; the test root declares
   // them here so the contributions land.
@@ -84,6 +86,8 @@ describe('apply wiring', () => {
     // service being present implies the chat entry declared the hole first.
     const entries = b.slots.entries('conversation.chat.toolview')
     expect(entries.map(e => e.options.key)).toEqual(['bash', 'todo_write'])
+    // Stats stick with the composer (not inside ChatView).
+    expect(b.slots.entries('conversation.composer.dock').map(e => e.options.id)).toEqual(['stats'])
     await b.runtime.dispose()
   })
 

packages/client/ui-conversation/tests/chat-code-subcalls.spec.tsx

@@ -17,6 +17,7 @@ import type {
   ToolResultNode, WorkspaceListState,
 } from '@deepseek-ai/dsh-client-runtime/client'
 import { createSlotRenderer } from '@deepseek-ai/dsh-client-web-react'
+import { LocaleService } from '@deepseek-ai/dsh-client-locale/client'
 import type { PropsRenderSlots } from '@deepseek-ai/dsh-client-ui-slots'
 import { apply, inject } from '@deepseek-ai/dsh-client-ui-conversation/client'
 
@@ -125,7 +126,7 @@ async function bench(snapshot: ConversationSnapshot) {
   }
   ctx.provide('workspaces', workspaces)
   ctx.provide('layout', layout)
-  ctx.provide('i18n', { bind: () => (key: string) => key })
+  ctx.provide('locale', new LocaleService(ctx))
 
   slots.install(createSlotRenderer())
   slots.register({

packages/client/ui-conversation/tests/chat-stats-bash-sample.spec.tsx

@@ -1,5 +1,5 @@
 // @vitest-environment jsdom
-// StatsLine (rendered inside the chat view body): totals derivation + the RFC
+// StatsLine (composer.dock entry): totals derivation + the RFC
 // hard acceptance — zero renders during streaming. Bash sample row: the
 // canonical sub-agent differential decided INSIDE the component off the
 // standard useSessions kit (no registry predicates — tool ring dissolved).

packages/client/ui-conversation/tests/chat-toolview-slot.spec.tsx

@@ -15,6 +15,7 @@ import { cleanup, fireEvent } from '@testing-library/react'
 import type { ISession, SessionId, ToolResultNode } from '@deepseek-ai/dsh-client-runtime/client'
 import type { PropsRenderSlots } from '@deepseek-ai/dsh-client-ui-slots'
 import { SlotTestRuntime } from '@deepseek-ai/dsh-client-test-runtime'
+import { LocaleService } from '@deepseek-ai/dsh-client-locale/client'
 import { apply, inject } from '@deepseek-ai/dsh-client-ui-conversation/client'
 import type { ToolRowProps } from '@deepseek-ai/dsh-client-ui-conversation/client'
 
@@ -53,6 +54,7 @@ async function bench(nodes: ToolResultNode[]) {
   const runtime = await SlotTestRuntime.create()
   const layout = { openDetails: vi.fn(), closeDetails: vi.fn() }
   runtime.provide('layout', layout)
+  runtime.provide('locale', new LocaleService(runtime.ctx))
   await runtime.sessions.add({
     id: SID,
     summary: { title: 'S', displayTitle: 'S' },
@@ -180,6 +182,7 @@ describe('registrant load-order seam', () => {
   it("suspends a registrant on inject: ['slots', 'conversation'] until the service (and the hole) exists", async () => {
     const runtime = await SlotTestRuntime.create()
     runtime.provide('layout', { openDetails: vi.fn(), closeDetails: vi.fn() })
+    runtime.provide('locale', new LocaleService(runtime.ctx))
     await runtime.root.declare(LAYOUT_CHILDREN, AppRoot)
 
     // Third-party posture, mounted BEFORE ui-conversation: real fiber inject

packages/client/ui-conversation/tests/chat-view.spec.tsx

@@ -371,6 +371,42 @@ describe('ChatView', () => {
     expect(view.queryByLabelText('回到底部')).toBeNull()
   })
 
+  it('entering the at-bottom threshold does not snap the remaining scroll distance', () => {
+    const h = makeHarness({ nodes: [user(1, 'q'), assistant(2, 'a')] })
+    const view = render(<h.ChatView {...h.props} />)
+    const scroller = view.container.querySelector('[class*="scroll"]') as HTMLDivElement
+    Object.defineProperty(scroller, 'scrollHeight', { value: 1000, writable: true })
+    Object.defineProperty(scroller, 'clientHeight', { value: 300, writable: true })
+    // Inside FOLLOW_THRESHOLD (24) but not flush with the floor — the chrome
+    // re-render from setAtBottom must not force scrollTop to scrollHeight.
+    scroller.scrollTop = 690 // distance-to-bottom = 10
+    fireEvent.scroll(scroller)
+    expect(view.queryByLabelText('回到底部')).toBeNull()
+    expect(scroller.scrollTop).toBe(690)
+  })
+
+  it('under data-conversation-scroll, bottom-follow targets the host scrollport', () => {
+    const host = document.createElement('div')
+    host.setAttribute('data-conversation-scroll', '')
+    Object.defineProperty(host, 'scrollHeight', { value: 2000, writable: true, configurable: true })
+    Object.defineProperty(host, 'clientHeight', { value: 500, writable: true, configurable: true })
+    Object.defineProperty(host, 'scrollTop', { value: 0, writable: true, configurable: true })
+    document.body.appendChild(host)
+    try {
+      const h = makeHarness({ nodes: [user(1, 'q'), assistant(2, 'a')] })
+      const view = render(<h.ChatView {...h.props} />, { container: host })
+      // Open jump uses the host, not the local .scroll node.
+      expect(host.scrollTop).toBe(2000)
+      host.scrollTop = 100
+      fireEvent.scroll(host)
+      expect(view.getByLabelText('回到底部')).toBeTruthy()
+      fireEvent.click(view.getByLabelText('回到底部'))
+      expect(host.scrollTop).toBe(2000)
+    } finally {
+      host.remove()
+    }
+  })
+
   it('paging button loads older and shows its busy label', () => {
     const h = makeHarness({ nodes: [user(5, 'later')], hasMore: true })
     const view = render(<h.ChatView {...h.props} />)

packages/client/ui-conversation/tests/input-bar.spec.tsx

@@ -42,6 +42,7 @@ interface BenchOptions {
   promptError?: ConversationSnapshot['promptError']
   variant?: 'hero' | 'composer'
   placeholder?: string
+  translateHint?: (key: string) => string
   accessory?: React.ReactNode
   overlay?: React.ReactNode
   leftItems?: React.ReactNode
@@ -100,6 +101,11 @@ function bench(over?: BenchOptions) {
     useLexicon: bindSnapshotSelector(shell.lexicon),
     stop,
     command: () => Promise.resolve(true),
+    // Mirrors the en 'command.hint' locale entries the production apply wires in.
+    translateHint: over?.translateHint ?? ((key: string) => ({
+      'placeholder.default': 'Message the agent',
+      'placeholder.plan': 'describe your task to generate plan',
+    } as Record<string, string>)[key] ?? key),
     renderSlot,
     variant: over?.variant ?? 'composer',
     ...(over?.placeholder !== undefined ? { placeholder: over.placeholder } : {}),
@@ -227,6 +233,56 @@ describe('running and lock semantics (queue cut 1)', () => {
     expect((textarea).value).toBe('typed')
   })
 
+  it('wheel over a non-overflowing textarea forwards to the conversation host', () => {
+    const host = document.createElement('div')
+    host.setAttribute('data-conversation-scroll', '')
+    Object.defineProperty(host, 'scrollTop', { value: 40, writable: true, configurable: true })
+    const { view, textarea } = bench()
+    host.appendChild(view.container)
+    document.body.appendChild(host)
+    try {
+      const wheeled = fireEvent.wheel(textarea, { deltaY: 30 })
+      expect(wheeled).toBe(false) // preventDefault
+      expect(host.scrollTop).toBe(70)
+    } finally {
+      host.remove()
+    }
+  })
+
+  it('wheel chains: long drafts scroll inside the textarea until each edge, then the host', () => {
+    const host = document.createElement('div')
+    host.setAttribute('data-conversation-scroll', '')
+    Object.defineProperty(host, 'scrollTop', { value: 40, writable: true, configurable: true })
+    const { view, textarea } = bench()
+    host.appendChild(view.container)
+    document.body.appendChild(host)
+    Object.defineProperty(textarea, 'clientHeight', { value: 100, configurable: true })
+    Object.defineProperty(textarea, 'scrollHeight', { value: 400, configurable: true })
+    let scrollTop = 150
+    Object.defineProperty(textarea, 'scrollTop', {
+      configurable: true,
+      get: () => scrollTop,
+      set: (value: number) => { scrollTop = value },
+    })
+    try {
+      // Mid-draft: both directions stay local — host must not move.
+      expect(fireEvent.wheel(textarea, { deltaY: 30 })).toBe(true)
+      expect(fireEvent.wheel(textarea, { deltaY: -30 })).toBe(true)
+      expect(host.scrollTop).toBe(40)
+      // At the bottom edge, further down-scroll forwards to the host.
+      scrollTop = 300
+      expect(fireEvent.wheel(textarea, { deltaY: 30 })).toBe(false)
+      expect(host.scrollTop).toBe(70)
+      // At the top edge, further up-scroll forwards to the host.
+      scrollTop = 0
+      host.scrollTop = 70
+      expect(fireEvent.wheel(textarea, { deltaY: -20 })).toBe(false)
+      expect(host.scrollTop).toBe(50)
+    } finally {
+      host.remove()
+    }
+  })
+
   it('disabled state shows the unavailable placeholder; custom placeholder wins', () => {
     const { textarea } = bench({ disabled: true })
     expect(textarea.placeholder).toBe('Session unavailable')
@@ -292,6 +348,19 @@ describe('decorations', () => {
     expect(view.container.querySelector('[data-decoration="token"]')).not.toBeNull()
   })
 
+  it('a locale entry for the claimed command overrides the raw claim hint (trailing-space token)', () => {
+    const dict: Record<string, string> = { goal: '输入目标，智能体将持续执行' }
+    const { view, shell } = bench({ translateHint: key => dict[key] ?? key })
+    act(() => {
+      shell.setDraft('/goal ')
+      shell.beginCommand(
+        { token: '/goal ', hint: '[<objective>|clear|edit <objective>|pause|resume]', submit: () => Promise.resolve({ kind: 'success' as const }) },
+        { start: 0, end: 6, draftRev: shell.snapshot.draftRev },
+      )
+    })
+    expect(view.container.querySelector('[data-decoration="hint"]')?.textContent).toBe('输入目标，智能体将持续执行')
+  })
+
   it('an inserted reference renders as a chip at its placeholder offset', () => {
     const { view, shell } = bench()
     act(() => {
@@ -374,7 +443,7 @@ describe('placeholder chrome and control seats', () => {
     const { view, slotCalls } = bench()
     expect(view.getByLabelText('Add attachment')).toBeTruthy()
     // Capability absent (no projection value): the chip renders nothing.
-    expect(view.queryByLabelText('Access mode')).toBeNull()
+    expect(view.queryByLabelText(/^Access mode/)).toBeNull()
     // Both seats dispatched, nothing rendered.
     expect(slotCalls.map(c => c.key)).toEqual(['conversation.input.plan', 'conversation.input.model'])
     expect(view.queryByLabelText('Plan mode')).toBeNull()
@@ -390,15 +459,19 @@ describe('placeholder chrome and control seats', () => {
       currentValue: 'workspace-write',
     }
     const { view } = bench({ permissions })
-    const select = view.getByLabelText('Access mode') as HTMLSelectElement
-    expect(select.value).toBe('workspace-write')
-    // Title-case display is presentation only; the option values stay machine names.
-    expect([...select.options].map(o => o.textContent)).toEqual(['Workspace Write', 'Danger Full Access'])
-    fireEvent.change(select, { target: { value: 'danger-full-access' } })
+    const trigger = view.getByLabelText(/^Access mode/) as HTMLButtonElement
+    // Title-case display is presentation only; the menu ids stay machine names.
+    expect(trigger.textContent).toBe('Workspace Write')
+    fireEvent.click(trigger)
+    const items = view.getAllByRole('menuitem')
+    expect(items.map(o => o.textContent)).toEqual(['Workspace Write', 'Danger Full Access'])
+    fireEvent.click(items[1]!)
     // Optimistic pick + disable until admission resolves (command stub resolves true).
-    expect(select.disabled).toBe(true)
+    const busy = view.getByLabelText(/^Access mode/) as HTMLButtonElement
+    expect(busy.textContent).toBe('Danger Full Access')
+    expect(busy.disabled).toBe(true)
     await act(async () => {})
-    expect(select.disabled).toBe(false)
+    expect((view.getByLabelText(/^Access mode/) as HTMLButtonElement).disabled).toBe(false)
   })
 
   it('a registered entry fills its seat and receives the locked owner prop', () => {
@@ -420,9 +493,9 @@ describe('placeholder chrome and control seats', () => {
     const permissions = { options: [{ value: 'workspace-write', name: 'workspace-write' }], currentValue: 'workspace-write' }
     const { view } = bench({ disabled: true, permissions })
     expect((view.getByLabelText('Add attachment') as HTMLButtonElement).disabled).toBe(true)
-    expect((view.getByLabelText('Access mode') as HTMLSelectElement).disabled).toBe(true)
+    expect((view.getByLabelText(/^Access mode/) as HTMLButtonElement).disabled).toBe(true)
     cleanup()
     const live = bench({ running: true, permissions })
-    expect((live.view.getByLabelText('Access mode') as HTMLSelectElement).disabled).toBe(false)
+    expect((live.view.getByLabelText(/^Access mode/) as HTMLButtonElement).disabled).toBe(false)
   })
 })

packages/client/ui-conversation/tests/input-machine.spec.ts

@@ -260,10 +260,10 @@ describe('input-machine: insert-ref and the occurrence table', () => {
     m.dispatch({ type: 'insert-ref', reference: refOf('alpha'), span: spanOf(m, 0, 4) })
     m.dispatch({ type: 'draft-changed', draft: `${P} and /alp`, editRange: { start: 1, end: 1, insertedLength: 9 } })
     m.dispatch({ type: 'insert-ref', reference: refOf('alpha'), span: spanOf(m, 6, 10) })
-    expect(m.state.draft).toBe(`${P} and ${P}`)
+    expect(m.state.draft).toBe(`${P} and ${P} `)
     expect(m.state.occurrences.map(o => o.occurrenceId)).toEqual([1, 2])
     // Delete the first chip whole; the second survives with its own identity.
-    m.dispatch({ type: 'draft-changed', draft: ` and ${P}`, editRange: { start: 0, end: 1, insertedLength: 0 } })
+    m.dispatch({ type: 'draft-changed', draft: ` and ${P} `, editRange: { start: 0, end: 1, insertedLength: 0 } })
     expect(m.state.occurrences).toEqual([expect.objectContaining({ occurrenceId: 2, offset: 5 })])
   })
 
@@ -273,7 +273,7 @@ describe('input-machine: insert-ref and the occurrence table', () => {
     m.dispatch({ type: 'begin-command', claim: claimOf('goal'), span: spanOf(m, 0, 3) })
     m.dispatch({ type: 'draft-changed', draft: '/goal ask @wor' })
     m.dispatch({ type: 'insert-ref', reference: refOf('worker-1', 'subagent'), span: spanOf(m, 10, 14) })
-    expect(m.state.draft).toBe(`/goal ask ${P}`)
+    expect(m.state.draft).toBe(`/goal ask ${P} `)
     expect(m.state.phase).toBe('claimed')
     expect(m.state.occurrences).toHaveLength(1)
   })
@@ -350,10 +350,10 @@ describe('input-machine: newline transaction (F1)', () => {
     m.dispatch({ type: 'draft-changed', draft: 'ab @wor' })
     m.dispatch({ type: 'insert-ref', reference: refOf('w'), span: spanOf(m, 3, 7) })
     m.dispatch({ type: 'newline', selection: { start: 2, end: 2 } })
-    expect(m.state.draft).toBe(`ab\n ${P}`)
+    expect(m.state.draft).toBe(`ab\n ${P} `)
     expect(m.state.occurrences[0]?.offset).toBe(4)
     m.dispatch({ type: 'undo' })
-    expect(m.state.draft).toBe(`ab ${P}`)
+    expect(m.state.draft).toBe(`ab ${P} `)
   })
 
   it('replaces a selection, breaks the claim prefix when leading, and rejects out-of-bounds', () => {
@@ -410,7 +410,7 @@ describe('input-machine: consume-token guards', () => {
     m.dispatch({ type: 'draft-changed', draft: '/model @wor' })
     m.dispatch({ type: 'insert-ref', reference: refOf('w'), span: spanOf(m, 7, 11) })
     m.dispatch({ type: 'consume-token', guard: { kind: 'span', span: spanOf(m, 0, 7) } })
-    expect(m.state.draft).toBe(P)
+    expect(m.state.draft).toBe(`${P} `)
     expect(m.state.occurrences[0]?.offset).toBe(0)
   })
 })
@@ -490,7 +490,7 @@ describe('input-machine: undo / redo', () => {
     m.dispatch({ type: 'draft-changed', draft: '', editRange: { start: 0, end: 1, insertedLength: 0 } })
     expect(m.state.occurrences).toEqual([])
     m.dispatch({ type: 'undo' })
-    expect(m.state.draft).toBe(P)
+    expect(m.state.draft).toBe(`${P} `)
     expect(m.state.occurrences).toHaveLength(1)
   })
 
@@ -555,9 +555,9 @@ describe('input-machine: paste plane', () => {
     m.dispatch({ type: 'paste-upgrade', attemptId: 1, span: spanOf(m, 0, 6), reference: refOf('alpha') })
     expect(m.state.paste?.insertedRange).toEqual({ start: 0, end: 7 })
     m.dispatch({ type: 'paste-upgrade', attemptId: 1, span: spanOf(m, 2, 7), reference: refOf('beta') })
-    expect(m.state.draft).toBe(`${P} ${P}`)
+    expect(m.state.draft).toBe(`${P} ${P} `)
     expect(m.state.occurrences.map(o => o.ref)).toEqual(['alpha', 'beta'])
-    expect(m.state.paste?.insertedRange).toEqual({ start: 0, end: 3 })
+    expect(m.state.paste?.insertedRange).toEqual({ start: 0, end: 4 })
   })
 
   it('a stale span CAS drops one upgrade without ending the attempt', () => {
@@ -634,8 +634,8 @@ describe('input-machine: projectClipboard', () => {
     m.dispatch({ type: 'insert-ref', reference: refOf('alpha'), span: spanOf(m, 4, 8) })
     m.dispatch({ type: 'draft-changed', draft: `use ${P} then /bet`, editRange: { start: 5, end: 5, insertedLength: 10 } })
     m.dispatch({ type: 'insert-ref', reference: refOf('beta'), span: spanOf(m, 11, 15) })
-    expect(m.state.draft).toBe(`use ${P} then ${P}`)
-    expect(projectClipboard(m.state)).toBe('use /alpha then /beta')
+    expect(m.state.draft).toBe(`use ${P} then ${P} `)
+    expect(projectClipboard(m.state)).toBe('use /alpha then /beta ')
   })
 
   it('is the identity on a chip-free draft', () => {

packages/client/ui-conversation/tests/input-matrix.spec.tsx

@@ -48,6 +48,7 @@ function mountBar(shell: SessionInputShell, over?: { running?: boolean; disabled
     renderSlot: (() => null) as InputBarProps['renderSlot'],
     stop: vi.fn(),
     command: () => Promise.resolve(true),
+    translateHint: (key: string) => key,
     variant: 'composer',
   }
   return render(<InputBar {...props} />)

packages/client/ui-conversation/tests/input-scenarios.spec.tsx

@@ -134,6 +134,7 @@ async function scopedBench(register?: (slash: SlashService) => void) {
     renderSlot: (() => null) as InputBarProps['renderSlot'],
     stop: vi.fn(),
     command: () => Promise.resolve(true),
+    translateHint: (key: string) => key,
     variant: 'composer',
   }
   const view = render(<InputBar {...barProps} />)

packages/client/ui-conversation/tests/skeleton.spec.tsx

@@ -17,7 +17,9 @@ import { ConversationRoot } from '../src/client/skeleton/ConversationRoot.tsx'
 import { ConversationSession } from '../src/client/skeleton/ConversationSession.tsx'
 import { InputBar } from '../src/client/skeleton/InputBar.tsx'
 import type { InputBarProps } from '../src/client/skeleton/InputBar.tsx'
-import type { ComposerBarOwnerProps } from '../src/client/contract/slots.ts'
+import type {
+  ComposerBarOwnerProps,
+} from '../src/client/contract/slots.ts'
 
 /** Machine-backed wiring over a sink spy. */
 function fakeWiring() {
@@ -59,6 +61,8 @@ function mount(
   snapshot: ConversationSnapshot,
   workspaceRows: WorkspaceView[] = [{ ...workspace('one'), sessionIds: [SID] }],
   retargetWorkspace = vi.fn(async (_workspaceId: WorkspaceId) => {}),
+  /** When true, mimic overlay:true chain siblings (hidden fallback + takeover). */
+  overlayTakeover = false,
 ) {
   const root = sid('root')
   const sessions = createSnapshotStore<SessionListState>({
@@ -99,9 +103,17 @@ function mount(
           useStore={bindSnapshotSelector(chat)}
           actions={chat.actions}
           renderSlot={renderSlot as never}
-          views={{ list: () => [{ id: 'chat', label: 'Chat' }], subscribe: () => () => {}, version: () => 1 }}
+          views={{
+            list: () => [
+              { id: 'chat', label: 'Chat' },
+              { id: 'trajectory', label: 'Trajectory' },
+            ],
+            subscribe: () => () => {},
+            version: () => 1,
+          }}
           bindDraftMirror={write => wiring.bindMirror(write)}
           open={open}
+          {...owner}
         />
       )
     }
@@ -124,6 +136,7 @@ function mount(
           useLexicon={bindSnapshotSelector(wiring.lexicon)}
           stop={stop}
           command={() => Promise.resolve(true)}
+          translateHint={(key: string) => key}
           renderSlot={(() => null) as InputBarProps['renderSlot']}
           {...bar}
         />
@@ -131,7 +144,18 @@ function mount(
     }
     return <div data-testid={`view-${opts?.only ?? key}`} />
   }) as ConversationRootProps['renderSlot']
-  const renderSlotChain = ((_key, _owner, opts) => opts?.fallback ?? null) as ConversationRootProps['renderSlotChain']
+  const renderSlotChain = ((_key, _owner, opts) => (
+    overlayTakeover
+      ? (
+        <>
+          <div data-chain-overlay-fallback="conversation.composer" style={{ display: 'none' }}>
+            {opts?.fallback ?? null}
+          </div>
+          <div data-testid="composer-takeover">TAKEOVER</div>
+        </>
+      )
+      : (opts?.fallback ?? null)
+  )) as ConversationRootProps['renderSlotChain']
   const props: ConversationRootProps = {
     sessionId: SID,
     SessionProvider: ({ children }) => children(SID),
@@ -166,6 +190,30 @@ describe('ConversationRoot resident composer', () => {
     expect(b.open).toHaveBeenCalledWith(sid('root'))
   })
 
+  it('active phase: fixed header outside the scrollport; sticky composer seat inside it', () => {
+    const b = mount(conversationSnapshot())
+    const host = b.view.container.querySelector('[data-conversation-scroll]')
+    const seat = b.view.container.querySelector('[data-composer-seat]')
+    const header = b.view.container.querySelector('header')
+    const textarea = b.view.container.querySelector('textarea')
+    expect(host).not.toBeNull()
+    expect(seat).not.toBeNull()
+    expect(header).not.toBeNull()
+    // Header is column chrome above the scrollport; the seat sticks inside it.
+    expect(host?.contains(header)).toBe(false)
+    expect(host?.contains(seat)).toBe(true)
+    expect(seat?.contains(textarea)).toBe(true)
+  })
+
+  it('sticky composer seat wraps the whole overlay chain, not only the fallback stack', () => {
+    const b = mount(conversationSnapshot(), undefined, undefined, true)
+    const seat = b.view.container.querySelector('[data-composer-seat]')
+    const takeover = b.view.getByTestId('composer-takeover')
+    const fallback = b.view.container.querySelector('[data-chain-overlay-fallback="conversation.composer"]')
+    expect(seat?.contains(takeover)).toBe(true)
+    expect(seat?.contains(fallback)).toBe(true)
+  })
+
   it('hero phase: same textarea, hero chrome, no header, picker switches the workspace', () => {
     const b = mount(
       conversationSnapshot({ composerPhase: 'blank', blank: true }),
@@ -174,13 +222,19 @@ describe('ConversationRoot resident composer', () => {
         { ...workspace('second'), title: 'Selected Folder' },
       ],
     )
-    // Hero chrome present, view ring absent.
+    // Hero chrome present, view ring absent; scroll host already wraps the
+    // resident composer so the blank → active flip does not remount it.
+    const host = b.view.container.querySelector('[data-conversation-scroll]')
+    const header = b.view.container.querySelector('header')
+    expect(host).not.toBeNull()
+    expect(header?.getAttribute('aria-hidden')).toBe('true')
     expect(b.view.getByText("Let's start building")).toBeTruthy()
     expect(b.view.queryByTestId('view-chat')).toBeNull()
     // The same machine-backed textarea is live in the hero, and the
-    // persistence mirror stays bound (ConversationSession mounts chrome-less
+    // persistence mirror stays bound (ConversationSession mounts chrome-hidden
     // for blank sessions): hero typing reaches the chat store.
     const box = b.view.getByRole('textbox')
+    expect(host?.contains(box)).toBe(true)
     fireEvent.change(box, { target: { value: 'draft in hero' } })
     expect(b.chat.store.getSnapshot().draft).toBe('draft in hero')
     // Picker: open through the chip; a pick switches to the other
@@ -193,20 +247,31 @@ describe('ConversationRoot resident composer', () => {
     expect(b.view.getByText('Selected Folder')).toBeTruthy()
   })
 
-  it('textarea DOM identity survives the hero → active flip', () => {
+  it('same textarea DOM node survives the hero → active flip into the sticky scrollport', () => {
     const b = mount(conversationSnapshot({ composerPhase: 'blank', blank: true }))
     const before = b.view.getByRole('textbox')
     fireEvent.change(before, { target: { value: 'kept across flip' } })
-    // First message landed: content exists, phase leaves blank.
+    // First message landed: content exists, phase leaves blank. Composer
+    // already sat in the Session scrollport during hero, so the textarea
+    // node and InputHub draft both survive.
     b.session.set(conversationSnapshot({ composerPhase: 'active', blank: false }))
     b.rerender()
-    const after = b.view.getByRole('textbox')
+    const after = b.view.getByRole('textbox') as HTMLTextAreaElement
     expect(after).toBe(before)
-    expect((after as HTMLTextAreaElement).value).toBe('kept across flip')
+    expect(after.value).toBe('kept across flip')
+    expect(b.chat.store.getSnapshot().draft).toBe('kept across flip')
+    expect(b.view.container.querySelector('[data-conversation-scroll]')?.contains(after)).toBe(true)
     expect(b.view.queryByText("Let's start building")).toBeNull()
     expect(b.view.getByTestId('view-chat')).toBeTruthy()
   })
 
+  it('keeps pending takeover interaction accessible outside the Chat view', () => {
+    const b = mount(conversationSnapshot({ pending: [{} as never] }))
+    act(() => { b.chat.actions.setView('trajectory') })
+    expect(b.view.getByTestId('view-trajectory')).toBeTruthy()
+    expect(b.view.getByRole('textbox')).toBeTruthy()
+  })
+
   it('rolls the pending workspace label back when switching fails', async () => {
     const selectWorkspace = vi.fn(async () => { throw new Error('connect failed') })
     const b = mount(

packages/client/ui-conversation/tests/todo-panel.spec.tsx

@@ -31,11 +31,18 @@ describe('TodoPanel', () => {
     expect(container.innerHTML).toBe('')
   })
 
-  it('shows progress, one row per item with its status glyph', () => {
+  it('starts collapsed with the progress summary visible', () => {
     render(<TodoPanel todos={LIST} />)
     expect(screen.getByTestId('todo-panel')).toBeTruthy()
     expect(screen.getByText('To-dos')).toBeTruthy()
     expect(screen.getByText('1/3 tasks · 1 in progress')).toBeTruthy()
+    expect(screen.getByRole('button', { expanded: false })).toBeTruthy()
+    expect(screen.queryByRole('list')).toBeNull()
+  })
+
+  it('expands to show one row per item with its status glyph', () => {
+    render(<TodoPanel todos={LIST} />)
+    fireEvent.click(screen.getByRole('button', { expanded: false }))
     const items = screen.getAllByRole('listitem')
     expect(items.map(li => li.getAttribute('data-status'))).toEqual(['completed', 'in_progress', 'pending'])
     expect(screen.getByText('搭骨架')).toBeTruthy()
@@ -44,8 +51,9 @@ describe('TodoPanel', () => {
     expect(items.every(li => li.querySelector('svg') !== null)).toBe(true)
   })
 
-  it('collapse hides the list; expand restores; header keeps the count summary', () => {
+  it('collapse hides an expanded list; expand restores; header keeps the count summary', () => {
     render(<TodoPanel todos={LIST} />)
+    fireEvent.click(screen.getByRole('button', { expanded: false }))
     const header = screen.getByRole('button', { expanded: true })
     fireEvent.click(header)
     expect(screen.queryByRole('list')).toBeNull()
@@ -58,7 +66,7 @@ describe('TodoPanel', () => {
 
   it('collapsed header still shows zero in-progress when nothing is active', () => {
     render(<TodoPanel todos={[{ content: '都完了', status: 'completed' }]} />)
-    fireEvent.click(screen.getByRole('button', { expanded: true }))
+    expect(screen.getByRole('button', { expanded: false })).toBeTruthy()
     expect(screen.queryByText('都完了')).toBeNull()
     expect(screen.getByText('1/1 tasks · 0 in progress')).toBeTruthy()
   })

packages/client/ui-conversation/tsconfig.json

@@ -29,6 +29,9 @@
     {
       "path": "../../plan/plan-mode"
     },
+    {
+      "path": "../../goal/goal"
+    },
     {
       "path": "../../todo/tool-todo"
     },

packages/client/ui-goal/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-goal/README.md
-README.md: 476096a43532a0bf514cd191585872ef17f65c50
-README.zh.md: 27bd9a2e735cb4895d30eaf3b08dd939a00436fc
+README.md: fed4870f73277b22760417297d668853b8afb2db
+README.zh.md: cc607edc856e04c6ee42cc8f596aa658679a02ca

packages/client/ui-goal/README.md

@@ -2,13 +2,13 @@
 
 English | [中文](README.zh.md)
 
-Goal surface plugin, browser half: the `GoalBar` strip in the `conversation.input.dock` list (order 1, tucked against the composer). The live goal arrives through `useProjection('goal')` — the host-computed whole value seeded by the history tail page and updated by `session/projection` frames — so the plugin owns no store, no refresh chain, and no event listener. The slot inject face carries only the three mutation verbs (edit / resume / clear over the `goal.*` wire domain); each reads the CAS ref from the session's current projected value at call time and surfaces the settled RPC error inline (the RPC's compare-and-set is the staleness guard — there is no client fence). Goal creation stays on the `/goal` host command; loading, absent, and completed goals render nothing.
+Goal surface plugin, browser half: the `GoalBar` strip in the `conversation.input.dock` list (order 1, tucked against the composer). The live goal arrives through `useProjection('goal')` — the host-computed whole value seeded by the history tail page and updated by `session/projection` frames — so the plugin owns no store, no refresh chain, and no event listener. The slot inject face carries only the four mutation verbs (edit / pause / resume / clear over the `goal.*` wire domain — an active goal offers the pause action, a paused one resume); each reads the CAS ref from the session's current projected value at call time and surfaces the settled RPC error inline (the RPC's compare-and-set is the staleness guard — there is no client fence). Goal creation stays on the `/goal` host command; loading, absent, and completed goals render nothing.
 
 The `/client` export surface is the plugin body (`apply`/`inject`), the `GoalBar`/`GoalDock` components, and the injected verb face types.
 
 ## Model Experience
 
-Indirectly, through the `goal.edit`/`goal.resume`/`goal.clear` RPCs the strip's verbs submit: each accepted mutation appends a model-visible `goal/change` context message to the session (the same durable event the projection folds), so the model sees the updated goal state on its next turn. The strip itself adds no prompt content.
+Indirectly, through the `goal.edit`/`goal.pause`/`goal.resume`/`goal.clear` RPCs the strip's verbs submit: each accepted mutation appends a model-visible `goal/change` context message to the session (the same durable event the projection folds), so the model sees the updated goal state on its next turn. The strip itself adds no prompt content.
 
 #### KV Cache effect
 

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

@@ -2,13 +2,13 @@
 
 [English](README.md) | 中文
 
-Goal 表面插件（浏览器半件）：`conversation.input.dock` 列表中的 `GoalBar` 条带（order 1，紧贴 composer）。活值经 `useProjection('goal')` 到达——host 计算的全量值由历史尾页播种、由 `session/projection` 帧更新——因此本插件不持有 store、不设刷新链、不挂事件监听。slot 注入面只携带三个变更动词（edit / resume / clear，走 `goal.*` 协议域）；每个动词在调用时从会话当前投影值读取 CAS ref，并把结算后的 RPC 错误内联呈现（RPC 的 compare-and-set 即陈旧性防护——客户端没有任何栅栏）。goal 的创建仍归 `/goal` host 命令；加载中、无 goal、已完成三种状态一律不渲染。
+Goal 表面插件（浏览器半件）：`conversation.input.dock` 列表中的 `GoalBar` 条带（order 1，紧贴 composer）。活值经 `useProjection('goal')` 到达——host 计算的全量值由历史尾页播种、由 `session/projection` 帧更新——因此本插件不持有 store、不设刷新链、不挂事件监听。slot 注入面只携带四个变更动词（edit / pause / resume / clear，走 `goal.*` 协议域——active 的 goal 提供暂停动作，paused 的提供恢复）；每个动词在调用时从会话当前投影值读取 CAS ref，并把结算后的 RPC 错误内联呈现（RPC 的 compare-and-set 即陈旧性防护——客户端没有任何栅栏）。goal 的创建仍归 `/goal` host 命令；加载中、无 goal、已完成三种状态一律不渲染。
 
 `/client` 出口面为插件本体（`apply`/`inject`）、`GoalBar`/`GoalDock` 组件与注入动词面类型。
 
 ## Model Experience
 
-间接影响：条带动词提交的 `goal.edit`/`goal.resume`/`goal.clear` RPC 每次被接受后，会向会话追加一条模型可见的 `goal/change` 上下文消息（与投影折叠的正是同一条持久事件），模型在下一轮即可看到更新后的 goal 状态。条带自身不添加任何提示词内容。
+间接影响：条带动词提交的 `goal.edit`/`goal.pause`/`goal.resume`/`goal.clear` RPC 每次被接受后，会向会话追加一条模型可见的 `goal/change` 上下文消息（与投影折叠的正是同一条持久事件），模型在下一轮即可看到更新后的 goal 状态。条带自身不添加任何提示词内容。
 
 #### KV Cache effect
 

packages/client/ui-goal/src/client/GoalBar.module.css

@@ -91,7 +91,7 @@
 .actions {
   display: flex;
   align-items: center;
-  gap: 2px;
+  gap: 8px;
   flex: none;
 }
 

packages/client/ui-goal/src/client/GoalBar.tsx

@@ -11,7 +11,7 @@
 import { useCallback, useEffect, useState } from 'react'
 import type { GoalSnapshot } from '@deepseek-ai/dsh-goal/client'
 import {
-  IconCheckOutline16, IconCloseOutline16, IconEditOutline16, IconPlayOutline16, IconSparkle16, IconTrashOutline16,
+  IconCheckOutline16, IconCloseOutline16, IconEditOutline16, IconPauseOutline16, IconPlayOutline16, IconSparkle16, IconTrashOutline16,
 } from '@deepseek-ai/dsh-client-ui-primitives'
 import type { GoalActionResult, GoalBarActions } from './slots.ts'
 import css from './GoalBar.module.css'
@@ -28,7 +28,7 @@ const PHASE_LABELS = {
   blocked: 'Blocked Goal',
 } as const
 
-export function GoalBar({ goal, onEdit, onResume, onClear }: GoalBarProps) {
+export function GoalBar({ goal, onEdit, onPause, onResume, onClear }: GoalBarProps) {
   const [editing, setEditing] = useState(false)
   const [draft, setDraft] = useState('')
   const [pending, setPending] = useState(false)
@@ -120,6 +120,11 @@ export function GoalBar({ goal, onEdit, onResume, onClear }: GoalBarProps) {
         <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="Pause goal" aria-label="Pause goal">
+              <IconPauseOutline16 />
+            </button>
+          )}
           {goal.phase === 'paused' && (
             <button type="button" className={css.iconBtn} disabled={pending} onClick={() => { void runAction(onResume) }} title="Resume goal" aria-label="Resume goal">
               <IconPlayOutline16 />
@@ -148,12 +153,13 @@ export function GoalBar({ goal, onEdit, onResume, onClear }: GoalBarProps) {
 export type GoalDockProps = import('@deepseek-ai/dsh-client-ui-slots').PropsRuntime<'conversation.input.dock'> & GoalBarActions
 
 /** Dock adapter: reads the host-computed 'goal' projection (whole value; absent or null renders nothing). */
-export function GoalDock({ useProjection, onEdit, onResume, onClear }: GoalDockProps) {
+export function GoalDock({ useProjection, onEdit, onPause, onResume, onClear }: GoalDockProps) {
   const projection = useProjection('goal')
   return (
     <GoalBar
       goal={projection === undefined ? undefined : projection === null ? null : projection.goal}
       onEdit={onEdit}
+      onPause={onPause}
       onResume={onResume}
       onClear={onClear}
     />

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

@@ -66,6 +66,11 @@ export function apply(ctx: ClientContext): void {
           if (ref === undefined) return noCurrentGoal
           return settle((await goals.edit({ sessionId, ref, objective })).result)
         },
+        onPause: async () => {
+          const ref = refOf(sessionId)
+          if (ref === undefined) return noCurrentGoal
+          return settle((await goals.pause({ sessionId, ref })).result)
+        },
         onResume: async () => {
           const ref = refOf(sessionId)
           if (ref === undefined) return noCurrentGoal

packages/client/ui-goal/src/client/slots.ts

@@ -19,6 +19,8 @@ export interface GoalBarActions {
    * @param objective - replacement objective text.
    */
   onEdit: (objective: string) => Promise<GoalActionResult>
+  /** Pause an active goal. */
+  onPause: () => Promise<GoalActionResult>
   /** Resume a paused goal. */
   onResume: () => Promise<GoalActionResult>
   /** Clear the current goal (tombstone). */

packages/client/ui-goal/tests/browser-plugin.spec.tsx

@@ -57,6 +57,7 @@ function bench(options: { projection?: GoalProjection | null | undefined; failWi
   const ref = { id: 'g-1', revision: 3 }
   ctx.provide('connection', { api: { goals: {
     edit: answer('goal.edit', { ref }),
+    pause: answer('goal.pause', { ref }),
     resume: answer('goal.resume', { ref }),
     clear: answer('goal.clear', { cleared: true as const }),
   } } })
@@ -100,13 +101,15 @@ describe('ui-goal browser plugin', () => {
     await b.fiber.await()
     const verbs = b.entry()!.inject!(sid('s1'))
     expect(await verbs.onEdit('New objective')).toEqual({ ok: true })
+    expect(await verbs.onPause()).toEqual({ ok: true })
     expect(await verbs.onResume()).toEqual({ ok: true })
     expect(await verbs.onClear()).toEqual({ ok: true })
-    expect(b.calls.map(c => c.method)).toEqual(['goal.edit', 'goal.resume', 'goal.clear'])
+    expect(b.calls.map(c => c.method)).toEqual(['goal.edit', 'goal.pause', 'goal.resume', 'goal.clear'])
     const ref = { id: 'g-1', revision: 5 }
     expect(b.calls[0]?.payload).toEqual({ sessionId: 's1', ref, objective: 'New objective' })
     expect(b.calls[1]?.payload).toEqual({ sessionId: 's1', ref })
     expect(b.calls[2]?.payload).toEqual({ sessionId: 's1', ref })
+    expect(b.calls[3]?.payload).toEqual({ sessionId: 's1', ref })
   })
 
   it('a null or absent projection short-circuits every verb without touching the wire', async () => {
@@ -114,7 +117,7 @@ describe('ui-goal browser plugin', () => {
       const b = bench({ projection })
       await b.fiber.await()
       const verbs = b.entry()!.inject!(sid('s1'))
-      for (const result of [await verbs.onEdit('x'), await verbs.onResume(), await verbs.onClear()]) {
+      for (const result of [await verbs.onEdit('x'), await verbs.onPause(), await verbs.onResume(), await verbs.onClear()]) {
         expect(result).toEqual({ ok: false, error: { code: 'no-current-goal', message: 'no current goal to mutate' } })
       }
       expect(b.calls).toHaveLength(0)
@@ -143,6 +146,7 @@ describe('GoalDock adapter', () => {
     const useProjection = vi.fn(() => projection)
     const actions: GoalBarActions = {
       onEdit: () => Promise.resolve({ ok: true }),
+      onPause: () => Promise.resolve({ ok: true }),
       onResume: () => Promise.resolve({ ok: true }),
       onClear: () => Promise.resolve({ ok: true }),
     }

packages/client/ui-goal/tests/goalbar.spec.tsx

@@ -25,6 +25,7 @@ function makeGoal(over: Partial<GoalSnapshot> = {}): GoalSnapshot {
 function makeActions() {
   return {
     onEdit: vi.fn<GoalBarActions['onEdit']>(() => Promise.resolve({ ok: true })),
+    onPause: vi.fn<GoalBarActions['onPause']>(() => Promise.resolve({ ok: true })),
     onResume: vi.fn<GoalBarActions['onResume']>(() => Promise.resolve({ ok: true })),
     onClear: vi.fn<GoalBarActions['onClear']>(() => Promise.resolve({ ok: true })),
   } satisfies GoalBarActions
@@ -103,6 +104,13 @@ describe('GoalBar', () => {
     expect(screen.getByRole('textbox', { name: 'Goal objective' })).toBeTruthy()
   })
 
+  it('active goal: the pause action pauses', () => {
+    const actions = makeActions()
+    render(<GoalBar goal={makeGoal()} {...actions} />)
+    fireEvent.click(screen.getByRole('button', { name: 'Pause goal' }))
+    expect(actions.onPause).toHaveBeenCalledTimes(1)
+  })
+
   it('paused goal: "Paused Goal" with a resume action before edit', () => {
     const actions = makeActions()
     render(<GoalBar goal={makeGoal({ phase: 'paused' })} {...actions} />)

packages/client/ui-permission/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-permission/README.md
-README.md: 0cd8e7f878a151ffacd749eb625afcb20d44ad93
-README.zh.md: 6bc299529c9795ef44cbe5429e78d6355c02a6ca
+README.md: 3377a1c5907b67b065879b012923427685c106d6
+README.zh.md: 34cf6f72394632968ded1671a5ac0377e5c78cc6

packages/client/ui-permission/README.md

@@ -2,7 +2,7 @@
 
 English | [中文](README.zh.md)
 
-Permission preset selection plugin, browser half: a popupSelect DECORATION hung on the host `/permission` command (`ctx.command.decorate`). A decoration is not a second command — the host command keeps its slash-menu row, the argued path (`/permission <preset>` switches directly), and the durable lifecycle logging; the decoration replaces only the bare invocation with the picker: one flat preset list with the current value marked active, where a pick submits the `/permission <preset>` command line. Options and the active mark read the session's `permissions` projection (the same host-computed select the composer chip renders), so both surfaces share one read source and one write path, and the pushed projection frame is the single confirmation both follow. The decoration is available exactly while the projection key is present; a permission-less composition shows no picker (a decoration never manufactures a catalog row).
+Permission preset selection plugin, browser half: a popupSelect DECORATION hung on the host `/permission` command (`ctx.command.decorate`). A decoration is not a second command — the host command keeps its slash-menu row, the argued path (`/permission <preset>` switches directly), and the durable lifecycle logging; the decoration replaces only the bare invocation with the picker: one flat preset list with the current value marked active and kebab-case preset names rendered as title-case labels (`workspace-write` → `Workspace Write`, the composer chip's display transform twin), where a pick submits the `/permission <preset>` command line. Options and the active mark read the session's `permissions` projection (the same host-computed select the composer chip renders), so both surfaces share one read source and one write path, and the pushed projection frame is the single confirmation both follow. The decoration is available exactly while the projection key is present; a permission-less composition shows no picker (a decoration never manufactures a catalog row).
 
 The `/client` export surface is the plugin body (`apply`/`inject`).
 

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

@@ -2,7 +2,7 @@
 
 [English](README.md) | 中文
 
-权限预设选择插件（浏览器半侧）：挂在 host `/permission` 命令上的 popupSelect **装饰**（`ctx.command.decorate`）。装饰不是第二条命令——host 命令保留斜杠菜单行、带参路径（`/permission <preset>` 直接切换）与持久生命周期记账；装饰只把裸调用替换为选择框：一张扁平预设列表，当前值标记为 active，选中即提交 `/permission <preset>` 命令行。选项与 active 标记读取会话的 `permissions` 投影（与 composer chip 渲染的同一份 host 计算 select），因此两个界面共享同一读源与同一写路径，推送的投影帧是两者共同跟随的唯一确认。装饰恰在投影 key 存在时可用；无权限组合不显示选择框（装饰绝不无中生有目录行）。
+权限预设选择插件（浏览器半侧）：挂在 host `/permission` 命令上的 popupSelect **装饰**（`ctx.command.decorate`）。装饰不是第二条命令——host 命令保留斜杠菜单行、带参路径（`/permission <preset>` 直接切换）与持久生命周期记账；装饰只把裸调用替换为选择框：一张扁平预设列表，当前值标记为 active，kebab-case 预设名渲染为 Title Case 标签（`workspace-write` → `Workspace Write`，与 composer chip 的显示变换孪生），选中即提交 `/permission <preset>` 命令行。选项与 active 标记读取会话的 `permissions` 投影（与 composer chip 渲染的同一份 host 计算 select），因此两个界面共享同一读源与同一写路径，推送的投影帧是两者共同跟随的唯一确认。装饰恰在投影 key 存在时可用；无权限组合不显示选择框（装饰绝不无中生有目录行）。
 
 `/client` 导出面为插件本体（`apply`/`inject`）。
 

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

@@ -23,13 +23,24 @@ function selectOf(session: SessionFace | undefined): PermissionSelect | undefine
   return session?.projections.faceOf('permissions').getSnapshot() as PermissionSelect | undefined
 }
 
+/**
+ * Display transform twin of the composer chip's (ui-conversation
+ * PermissionSelect): kebab-case machine names render as title-case labels
+ * (`workspace-write` → `Workspace Write`) so both permission surfaces show
+ * the same text; non-kebab host-configured names pass through.
+ */
+function displayName(name: string): string {
+  if (!/^[a-z0-9]+(-[a-z0-9]+)*$/.test(name)) return name
+  return name.split('-').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ')
+}
+
 /** Flatten the projection select into popup rows; `custom` is display state, never a target. */
 function optionsOf(value: PermissionSelect): SelectOption[] {
   return value.options
     .filter(option => option.value !== 'custom')
     .map(option => ({
       id: option.value,
-      label: option.name,
+      label: displayName(option.name),
       ...(option.description !== undefined ? { detail: option.description } : {}),
       ...(option.value === value.currentValue ? { active: true } : {}),
     }))

packages/client/ui-permission/tests/browser-plugin.spec.ts

@@ -85,6 +85,11 @@ describe('ui-permission browser plugin', () => {
     const again = await c.ui.options(proj, new AbortController().signal)
     expect(again.find(option => option.id === 'workspace-write')?.active).toBe(true)
     expect(again.find(option => option.id === 'read-only')?.detail).toBe('Reads only.')
+    // Kebab-case names title-case; non-kebab host-configured names pass through.
+    expect(again.map(option => option.label)).toEqual(['Read Only', 'Workspace Write', 'Danger Full Access'])
+    b.values.set(sid('s1'), { ...SELECT, options: [{ value: 'plain', name: 'Ask Every Time' }] })
+    const passthrough = await c.ui.options(proj, new AbortController().signal)
+    expect(passthrough[0]?.label).toBe('Ask Every Time')
     // A projection that vanished between availability and open throws.
     expect(() => c.ui.options({ sessionId: sid('ghost') }, new AbortController().signal))
       .toThrow(/not available on this host/)

packages/client/ui-plan/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-plan/README.md
-README.md: de43ce66d17498d31e05f8c64092ea0843103054
-README.zh.md: b4d2f4fd1a6d45f814d4a20195434f34d207e9c8
+README.md: 1d22c057b439ff337bf9daadcdba96dd4cca4540
+README.zh.md: 183b8ef7776b60c1f0afa630e04627a474d40391

packages/client/ui-plan/README.md

@@ -4,7 +4,7 @@ English | [中文](README.zh.md)
 
 Plan-mode status chip, a pure browser surface plugin. The browser half occupies the conversation-declared `conversation.input.plan` single seat (to the right of the access-mode control); the node half is an empty apply (the roster row). Plan behavior itself — the `/plan` command, the boundary-or-idle-committed `plan/mode` state, the `plan` projection unit, and the policy section — is owned by [`@deepseek-ai/dsh-plan-mode`](../../plan/plan-mode/README.md), composed independently on the host roster.
 
-Plan mode is entered through the `/plan` command only; there is no UI control that turns it on. While the host-computed `plan` projection's effective target is plan mode (`pending ? !active : active` — a folded host value, not client optimism, so an arriving frame corrects the chip either way), the seat renders a read-only "Plan" chip whose hover × executes `/plan off` through `command.execute`; otherwise the seat stays empty — a host without plan-mode (or a Draft with no session) shows nothing. While plan mode is the effective target, the composer textarea's placeholder switches to "describe your task to generate plan" (rendered by the composer from the same projection; owner-supplied placeholders win).
+Plan mode is entered through the `/plan` command only; there is no UI control that turns it on. While the host-computed `plan` projection's effective target is plan mode (`pending ? !active : active` — a folded host value, not client optimism, so an arriving frame corrects the chip either way), the seat renders a read-only "Plan" chip whose hover × executes `/plan off` through `command.execute`; otherwise the seat stays empty — a host without plan-mode (or a Draft with no session) shows nothing. While plan mode is the effective target, the composer textarea's placeholder switches to the plan-task hint — "describe your task to generate plan", localized through ui-conversation's `command.hint` locale namespace and shared verbatim with the claimed `/plan` command hint (rendered by the composer from the same projection; owner-supplied placeholders win).
 
 The chip carries the accessible description "Plan mode on, press to turn off". Admission failures (`matched: false`, business errors, transport faults) surface as an inline error and the chip stays until the projection confirms the exit.
 

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

@@ -4,7 +4,7 @@
 
 Plan mode 状态徽章，纯浏览器 surface 插件。浏览器侧占据会话声明的 `conversation.input.plan` 单座（位于 access 模式控件右侧）；node 侧是空 apply（roster 行）。plan 行为本身——`/plan` 命令、边界或空闲即时提交的 `plan/mode` 状态、`plan` 投影单元与 policy 段——归 [`@deepseek-ai/dsh-plan-mode`](../../plan/plan-mode/README.md) 所有，由 host roster 独立组合。
 
-plan mode 只经 `/plan` 命令进入；UI 上没有打开它的控件。当 host 计算的 `plan` 投影有效目标为 plan mode 时（`pending ? !active : active`——折叠的 host 值而非客户端乐观态，帧到达即自动纠正），座位渲染一个只读 "Plan" chip，hover 出现的 × 经 `command.execute` 执行 `/plan off`；否则座位保持为空——未组合 plan-mode 的 host（或尚无会话的 Draft）不显示任何内容。plan mode 为有效目标期间，composer 文本框的 placeholder 切换为 "describe your task to generate plan"（由 composer 从同一投影渲染；owner 提供的 placeholder 优先）。
+plan mode 只经 `/plan` 命令进入；UI 上没有打开它的控件。当 host 计算的 `plan` 投影有效目标为 plan mode 时（`pending ? !active : active`——折叠的 host 值而非客户端乐观态，帧到达即自动纠正），座位渲染一个只读 "Plan" chip，hover 出现的 × 经 `command.execute` 执行 `/plan off`；否则座位保持为空——未组合 plan-mode 的 host（或尚无会话的 Draft）不显示任何内容。plan mode 为有效目标期间，composer 文本框的 placeholder 切换为 plan 任务提示——"describe your task to generate plan"（中文「描述你的任务以生成计划」），经 ui-conversation 的 `command.hint` locale 命名空间本地化，并与已认领 `/plan` 命令的提示逐字共用同一份文案（由 composer 从同一投影渲染；owner 提供的 placeholder 优先）。
 
 chip 携带无障碍描述 "Plan mode on, press to turn off"。准入失败（`matched: false`、业务错误、传输故障）以内联错误呈现，chip 保持显示直至投影确认退出。
 

packages/client/ui-plan/src/client/PlanModeControl.module.css

@@ -39,13 +39,10 @@
   display: inline-flex;
   align-items: center;
   color: var(--dsw-alias-label-caption);
-  opacity: 0;
-  transition: opacity 0.12s ease;
 }
 
 .chip:hover .close,
 .chip:focus-visible .close {
-  opacity: 1;
   color: var(--dsw-alias-label-secondary);
 }
 

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: 1236054d5a05464c43ad1bb0dcbe52b09281e68a
-README.zh.md: 567881e8ca7d5e8017f82884cd638f08b13fc7e7
+README.md: 0ef3c20f848b3d331c007911d0837f11cd72c024
+README.zh.md: af94551bfb9e12dbadcef6a96a54f9bf7ea71299

packages/client/ui-primitives/README.md

@@ -2,11 +2,11 @@
 
 English | [中文](README.zh.md)
 
-Pure React atoms (zero cordis): StateDot, ic_ds_* icons, Button/Pill/Menu/Modal/Input, markdown family (MessageText/MarkdownText/JsonBlock), TerminalBlock. Contract: api-contracts v3 §8.
+Pure React atoms (zero cordis): StateDot, ic_ds_* icons, Button/Pill/Menu/Modal/Input, the markdown family (MessageText/MarkdownText/JsonBlock), the read-only JsonTree inspector, the `useAnchoredMaxHeight` hook that clamps a bottom-anchored overlay to the viewport space above its anchor (re-measured on resize, scroll, and a caller-supplied dependency), and TerminalBlock. Contract: api-contracts v3 §8.
 
 ## 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. 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

@@ -2,12 +2,11 @@
 
 [English](README.md) | 中文
 
-纯 React 原子组件（零 cordis）：StateDot、ic_ds_* 图标、Button/Pill/Menu/Modal/Input、markdown 家族（MessageText/MarkdownText/JsonBlock），以及 TerminalBlock。契约：api-contracts v3 §8。
+纯 React 原子组件（零 cordis）：StateDot、ic_ds_* 图标、Button/Pill/Menu/Modal/Input、markdown 家族（MessageText/MarkdownText/JsonBlock）、只读 JsonTree 检查器、`useAnchoredMaxHeight` hook（把底部锚定的浮层高度收敛到锚点上方的视口空间，并在 resize、scroll 与调用方提供的依赖变化时重新测量），以及 TerminalBlock。契约：api-contracts v3 §8。
 
 ## Markdown 渲染
 
-`MarkdownText` 通过 React 元素渲染来自不受信任的 assistant 输出的 GFM。它会省略原始 HTML，使相对链接及非 HTTP(S)/mailto 链接失效，以安全的外部链接属性打开 HTTP(S) 链接，并只渲染图片 alt 文本而不加载远程资源；`MessageText` 仍是用户创作内容使用的字面文本原语。元素间距、表格、链接与行内代码使用与 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deepseek-ai/dsh-client-ui-primitives",
-  "description": "Pure React atoms for the dsh web UI: StateDot, ic_ds_* icon set, Button/Pill/Menu/Modal/Input, markdown family (zero cordis)",
+  "description": "Pure React atoms for the dsh web UI: controls, icons, markdown, and JSON inspectors (zero cordis)",
   "version": "0.0.1",
   "private": true,
   "type": "module",
@@ -23,6 +23,9 @@
     "@shikijs/langs": "^4.3.1",
     "anser": "^2.3.5",
     "clsx": "^2.0.0",
+    "mdast-util-from-markdown": "^2.0.3",
+    "mdast-util-gfm": "^3.1.0",
+    "micromark-extension-gfm": "^3.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-markdown": "^10.1.0",

packages/client/ui-primitives/src/JsonTree.module.css

@@ -0,0 +1,222 @@
+.root {
+  --json-tree-property: #881391;
+  --json-tree-string: #c41a16;
+  --json-tree-number: #1c00cf;
+  --json-tree-keyword: #1c00cf;
+  --json-tree-punctuation: #202124;
+  --json-tree-icon: #5f6368;
+  --json-tree-hover: rgb(60 64 67 / 4%);
+
+  min-width: 0;
+  overflow: auto;
+  position: relative;
+  color: var(--dsw-alias-label-primary);
+  background: var(--dsw-alias-bg-layer-1);
+  font: 12px/16px var(--ds-font-family-code);
+  overscroll-behavior-x: contain;
+  overscroll-behavior-y: auto;
+}
+
+:global(body[data-ds-dark-theme]) .root {
+  --json-tree-property: #5db0d7;
+  --json-tree-string: #f28b82;
+  --json-tree-number: #99c8ff;
+  --json-tree-keyword: #99c8ff;
+  --json-tree-punctuation: #e8eaed;
+  --json-tree-icon: #9aa0a6;
+  --json-tree-hover: rgb(232 234 237 / 5%);
+}
+
+.container {
+  box-sizing: border-box;
+  width: max-content;
+  min-width: 100%;
+  margin: 0;
+  padding: 6px 8px 8px;
+  white-space: pre;
+}
+
+.expandedTopLevel {
+  box-sizing: border-box;
+  width: max-content;
+  min-width: 100%;
+  padding: 6px 8px 8px 14px;
+}
+
+.expandedTopLevel:has(> .topLevelBracket[data-json-root-row]:hover),
+.expandedTopLevel:has(> .topLevelBracket[data-json-root-row][data-json-copy-active]) {
+  background: var(--json-tree-hover);
+}
+
+.expandedTopLevelContainer {
+  padding: 0;
+}
+
+.row.topLevelBracket {
+  margin-left: 0;
+  padding-left: 0;
+}
+
+.children {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.row {
+  position: relative;
+  box-sizing: border-box;
+  min-width: 100%;
+  min-height: 16px;
+  margin: 0;
+  padding: 0 0 0 10px;
+  list-style: none;
+}
+
+.row:not(.topLevelBracket):hover:not(:has(.row:hover))::after,
+.row:not(.topLevelBracket)[data-json-copy-active]::after,
+.row:has(> .expander:focus-visible)::after {
+  position: absolute;
+  z-index: 0;
+  top: 0;
+  right: 0;
+  left: 0;
+  height: 16px;
+  background: var(--json-tree-hover);
+  content: '';
+  pointer-events: none;
+}
+
+.row > span:not(.expander) {
+  position: relative;
+  z-index: 1;
+}
+
+.label {
+  margin-right: 3px;
+  color: var(--json-tree-property);
+  font-weight: 400;
+}
+
+.clickableLabel {
+  cursor: pointer;
+}
+
+.stringValue {
+  color: var(--json-tree-string);
+}
+
+.numberValue {
+  color: var(--json-tree-number);
+}
+
+.keywordValue {
+  color: var(--json-tree-keyword);
+}
+
+.otherValue {
+  color: var(--dsw-alias-label-secondary);
+}
+
+.punctuation {
+  color: var(--json-tree-punctuation);
+}
+
+.preview {
+  color: var(--json-tree-punctuation);
+}
+
+.previewProperty {
+  color: var(--json-tree-punctuation);
+}
+
+.previewEllipsis {
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.copyAnchor {
+  position: fixed;
+  z-index: 3;
+  display: inline-flex;
+}
+
+.copyButton {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 16px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 3px;
+  color: var(--dsw-alias-label-secondary);
+  background: var(--dsw-alias-bg-layer-1);
+  box-shadow: -5px 0 5px var(--dsw-alias-bg-layer-1);
+  cursor: pointer;
+}
+
+.copyButton:hover {
+  color: var(--dsw-alias-label-primary);
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.copyButton:focus-visible {
+  outline: 1px solid var(--dsw-alias-state-business-primary);
+  outline-offset: -1px;
+}
+
+.copyButton[data-state='failed'] {
+  color: var(--dsw-alias-state-error-primary);
+}
+
+.expander {
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  left: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  box-sizing: border-box;
+  width: 8px;
+  height: 16px;
+  margin: 0;
+  color: var(--json-tree-icon);
+  cursor: pointer;
+  user-select: none;
+}
+
+.expander::before {
+  width: 0;
+  height: 0;
+  border-top: 4px solid transparent;
+  border-bottom: 4px solid transparent;
+  border-left: 6px solid currentColor;
+  content: '';
+  transform: scale(0.75);
+  transform-origin: 33.333% center;
+}
+
+.collapseIcon::before {
+  transform: rotate(90deg) scale(0.75);
+}
+
+.expander:hover {
+  color: var(--dsw-alias-label-primary);
+}
+
+.expander:focus-visible {
+  outline: none;
+}
+
+.collapsedContent {
+  margin: 0 1px;
+  color: var(--json-tree-punctuation);
+  cursor: pointer;
+}
+
+.collapsedContent::after {
+  content: '…';
+}

packages/client/ui-primitives/src/JsonTree.tsx

@@ -0,0 +1,602 @@
+import clsx from 'clsx'
+import { useEffect, useId, useRef, useState } from 'react'
+import type {
+  KeyboardEvent as ReactKeyboardEvent,
+  MouseEvent as ReactMouseEvent,
+  ReactNode,
+  UIEvent as ReactUIEvent,
+} from 'react'
+import { IconCheckOutline16, IconCopyOutline16 } from './icons/index.tsx'
+import { Menu } from './Menu.tsx'
+import type { MenuEntry } from './Menu.tsx'
+import css from './JsonTree.module.css'
+
+const OBJECT_PREVIEW_LIMIT = 4
+const ARRAY_PREVIEW_LIMIT = 5
+const PREVIEW_DEPTH_LIMIT = 2
+const VALUE_COPY_MENU_ITEMS: readonly MenuEntry[] = [
+  { id: 'value', label: 'Copy value' },
+  { id: 'json', label: 'Copy JSON' },
+  { id: 'path', label: 'Copy property path' },
+]
+const OBJECT_COPY_MENU_ITEMS: readonly MenuEntry[] = [
+  { id: 'prettyJson', label: 'Copy pretty JSON' },
+  { id: 'json', label: 'Copy compact JSON' },
+  { id: 'path', label: 'Copy property path' },
+]
+
+type JsonPath = readonly (number | string)[]
+
+interface RowTarget {
+  path: JsonPath
+  value: unknown
+}
+
+interface CopyTarget extends RowTarget {
+  left: number
+  side: 'bottom' | 'top'
+  top: number
+}
+
+function isExpandableValue(value: unknown): value is object | unknown[] {
+  return typeof value === 'object' && value !== null && !(value instanceof Date)
+}
+
+function entriesOf(value: object | unknown[]): readonly (readonly [string, unknown])[] {
+  if (Array.isArray(value)) {
+    return value.map((item, index) => [String(index), item] as const)
+  }
+  return Object.keys(value).map(key => [
+    key,
+    (value as Record<string, unknown>)[key],
+  ] as const)
+}
+
+function bracketOf(value: object | unknown[]): readonly [string, string] {
+  return Array.isArray(value) ? ['[', ']'] : ['{', '}']
+}
+
+function previewPrimitive(value: unknown): ReactNode {
+  if (value === null) return <span className={css.keywordValue}>null</span>
+  if (typeof value === 'string') {
+    return <span className={css.stringValue}>{JSON.stringify(value)}</span>
+  }
+  if (typeof value === 'number') {
+    return <span className={css.numberValue}>{String(value)}</span>
+  }
+  if (typeof value === 'boolean') {
+    return <span className={css.keywordValue}>{String(value)}</span>
+  }
+  if (typeof value === 'bigint') {
+    return <span className={css.otherValue}>{value.toString()}</span>
+  }
+  if (typeof value === 'undefined') {
+    return <span className={css.otherValue}>undefined</span>
+  }
+  if (typeof value === 'symbol') {
+    return <span className={css.otherValue}>{value.description ?? 'Symbol'}</span>
+  }
+  if (typeof value === 'function') {
+    return <span className={css.otherValue}>{value.name || 'Function'}</span>
+  }
+  return null
+}
+
+function previewValue(value: unknown, depth: number): ReactNode {
+  if (!isExpandableValue(value)) return previewPrimitive(value)
+
+  const array = Array.isArray(value)
+  const entries = entriesOf(value)
+  const limit = array ? ARRAY_PREVIEW_LIMIT : OBJECT_PREVIEW_LIMIT
+  const visible = entries.slice(0, limit)
+  const [open, close] = bracketOf(value)
+
+  return (
+    <>
+      <span className={css.punctuation}>{open}</span>
+      {depth >= PREVIEW_DEPTH_LIMIT
+        ? <span className={css.previewEllipsis}>…</span>
+        : visible.map(([key, item], index) => (
+          <span key={key}>
+            {index > 0 && <span className={css.punctuation}>, </span>}
+            {!array && (
+              <>
+                <span className={css.previewProperty}>{key}</span>
+                <span className={css.punctuation}>: </span>
+              </>
+            )}
+            {previewValue(item, depth + 1)}
+          </span>
+        ))}
+      {depth < PREVIEW_DEPTH_LIMIT && entries.length > limit && (
+        <span className={css.previewEllipsis}>, …</span>
+      )}
+      <span className={css.punctuation}>{close}</span>
+    </>
+  )
+}
+
+function primitiveValue(value: unknown): ReactNode {
+  if (value === null) return <span className={css.keywordValue}>null</span>
+  if (typeof value === 'string') {
+    return <span className={css.stringValue}>{JSON.stringify(value)}</span>
+  }
+  if (typeof value === 'boolean') {
+    return <span className={css.keywordValue}>{String(value)}</span>
+  }
+  if (typeof value === 'number') {
+    return <span className={css.numberValue}>{String(value)}</span>
+  }
+  if (typeof value === 'bigint') {
+    return <span className={css.numberValue}>{`${value.toString()}n`}</span>
+  }
+  if (value instanceof Date) {
+    return <span className={css.otherValue}>{value.toISOString()}</span>
+  }
+  if (typeof value === 'function') {
+    return <span className={css.otherValue}>function() {'{ }'}</span>
+  }
+  if (typeof value === 'undefined') {
+    return <span className={css.otherValue}>undefined</span>
+  }
+  return <span className={css.otherValue}>{(value as symbol).toString()}</span>
+}
+
+function fieldText(field: string): string {
+  return field === '' ? '""' : field
+}
+
+function pathId(path: JsonPath): string {
+  return path.map(part => (
+    typeof part === 'number' ? `n${String(part)}` : `s${String(part.length)}:${part}`
+  )).join('/')
+}
+
+function claimFocus(button: HTMLElement): void {
+  button.focus()
+}
+
+function moveFocus(button: HTMLElement, direction: -1 | 1): void {
+  const tree = button.closest<HTMLElement>('[role="tree"]')
+  /* v8 ignore next -- JsonTree attaches expander handlers only beneath its owning role=tree. */
+  if (tree === null) return
+  const expanders = Array.from(tree.querySelectorAll<HTMLElement>('[data-json-expander]'))
+  const current = expanders.indexOf(button)
+  /* v8 ignore next -- the current expander is a member of the queried non-empty set. */
+  if (current < 0 || expanders.length === 0) return
+  const next = (current + direction + expanders.length) % expanders.length
+  const nextExpander = expanders[next]
+  /* v8 ignore next -- modulo over the non-empty expander set always resolves a member. */
+  if (nextExpander !== undefined) claimFocus(nextExpander)
+}
+
+function NodeField({
+  field,
+  expandable,
+  onToggle,
+}: {
+  field: string | undefined
+  expandable: boolean
+  onToggle: () => void
+}) {
+  if (field === undefined) return null
+  return (
+    <span
+      className={clsx(css.label, expandable && css.clickableLabel)}
+      onClick={expandable ? onToggle : undefined}
+    >
+      {fieldText(field)}:
+    </span>
+  )
+}
+
+interface JsonTreeNodeProps {
+  field?: string
+  initialExpanded: boolean
+  lastElement: boolean
+  onClaimTabStop: (id: string) => void
+  onRowHover: (row: HTMLElement, target: RowTarget) => void
+  path: JsonPath
+  tabStopId: string | null
+  value: unknown
+}
+
+function JsonTreeNode({
+  field,
+  initialExpanded,
+  lastElement,
+  onClaimTabStop,
+  onRowHover,
+  path,
+  tabStopId,
+  value,
+}: JsonTreeNodeProps) {
+  const contentsId = useId()
+  const expanderRef = useRef<HTMLSpanElement>(null)
+  const [expanded, setExpanded] = useState(initialExpanded)
+  const nodeId = pathId(path)
+  const container = isExpandableValue(value)
+  const entries = container ? entriesOf(value) : []
+  const expandable = entries.length > 0
+
+  const toggle = () => {
+    setExpanded(current => !current)
+    claimFocus(expanderRef.current as HTMLSpanElement)
+  }
+
+  const onExpanderKeyDown = (event: ReactKeyboardEvent<HTMLSpanElement>) => {
+    if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {
+      event.preventDefault()
+      setExpanded(event.key === 'ArrowRight')
+      return
+    }
+    if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+      event.preventDefault()
+      moveFocus(event.currentTarget, event.key === 'ArrowUp' ? -1 : 1)
+    }
+  }
+
+  const row = (children: ReactNode, ariaExpanded?: boolean) => (
+    <div
+      className={css.row}
+      role="treeitem"
+      aria-expanded={ariaExpanded}
+      onMouseOver={(event) => {
+        event.stopPropagation()
+        onRowHover(event.currentTarget, { path, value })
+      }}
+    >
+      {children}
+    </div>
+  )
+
+  if (!container) {
+    return row((
+      <>
+        <NodeField field={field} expandable={false} onToggle={toggle} />
+        {primitiveValue(value)}
+        {!lastElement && <span className={css.punctuation}>,</span>}
+      </>
+    ))
+  }
+
+  const [open, close] = bracketOf(value)
+  if (!expandable) {
+    return row((
+      <>
+        <NodeField field={field} expandable={false} onToggle={toggle} />
+        <span className={css.punctuation}>{open}</span>
+        <span className={css.punctuation}>{close}</span>
+        {!lastElement && <span className={css.punctuation}>,</span>}
+      </>
+    ))
+  }
+
+  return row((
+    <>
+      <span
+        ref={expanderRef}
+        className={clsx(css.expander, expanded ? css.collapseIcon : css.expandIcon)}
+        data-json-expander
+        role="button"
+        aria-label={expanded ? 'Collapse JSON node' : 'Expand JSON node'}
+        aria-expanded={expanded}
+        aria-controls={expanded ? contentsId : undefined}
+        tabIndex={tabStopId === nodeId ? 0 : -1}
+        onFocus={() => { onClaimTabStop(nodeId) }}
+        onClick={toggle}
+        onKeyDown={onExpanderKeyDown}
+      />
+      <NodeField field={field} expandable onToggle={toggle} />
+      <span className={css.preview}>{previewValue(value, 0)}</span>
+      {!lastElement && <span className={css.punctuation}>,</span>}
+      {expanded && (
+        <ul id={contentsId} role="group" className={css.children}>
+          {entries.map(([key, item], index) => (
+            <JsonTreeNode
+              key={key}
+              field={key}
+              value={item}
+              path={[...path, Array.isArray(value) ? index : key]}
+              lastElement={index === entries.length - 1}
+              initialExpanded={false}
+              tabStopId={tabStopId}
+              onClaimTabStop={onClaimTabStop}
+              onRowHover={onRowHover}
+            />
+          ))}
+        </ul>
+      )}
+    </>
+  ), expanded)
+}
+
+function formattedPath(path: JsonPath): string {
+  return path.reduce<string>((result, part) => {
+    if (typeof part === 'number') return `${result}[${String(part)}]`
+    return /^[A-Za-z_$][\w$]*$/.test(part)
+      ? `${result}.${part}`
+      : `${result}[${JSON.stringify(part)}]`
+  }, '$')
+}
+
+function copyText(target: CopyTarget, mode: 'json' | 'path' | 'prettyJson' | 'value'): string {
+  if (mode === 'path') return formattedPath(target.path)
+  if (mode === 'prettyJson') return JSON.stringify(target.value, null, 2)
+  if (mode === 'json') return JSON.stringify(target.value)
+  if (typeof target.value === 'string') return target.value
+  if (typeof target.value === 'undefined') return 'undefined'
+  if (typeof target.value === 'bigint') return target.value.toString()
+  if (typeof target.value === 'symbol') return target.value.description ?? 'Symbol'
+  if (typeof target.value === 'function') return target.value.name || 'Function'
+  return JSON.stringify(target.value)
+}
+
+/** Props for the read-only, token-themed JSON tree. */
+export interface JsonTreeProps {
+  /** Parsed JSON object or array. */
+  data: object | unknown[]
+  /** Accessible label for the tree. */
+  label?: string
+  /** Optional positioning class owned by the caller. */
+  className?: string | undefined
+  /** Whether JSON rows expose copy actions. */
+  copyable?: boolean
+  /** Whether the top-level object or array is always expanded. */
+  expandTopLevel?: boolean
+}
+
+/**
+ * Render parsed JSON as a compact, keyboard-accessible inspector tree.
+ * @param props - Parsed data, accessible label, and display options.
+ * @returns A read-only JSON tree with an optionally fixed-open top level.
+ */
+export function JsonTree({
+  data,
+  label = 'JSON',
+  className,
+  copyable = true,
+  expandTopLevel = true,
+}: JsonTreeProps) {
+  const rootEntries = entriesOf(data)
+  const firstExpandableIndex = rootEntries.findIndex(([, value]) => (
+    isExpandableValue(value) && entriesOf(value).length > 0
+  ))
+  const firstExpandableEntry = rootEntries[firstExpandableIndex]
+  const initialTabStopId = expandTopLevel
+    ? firstExpandableEntry === undefined
+      ? null
+      : pathId([Array.isArray(data) ? firstExpandableIndex : firstExpandableEntry[0]])
+    : isExpandableValue(data) && rootEntries.length > 0 ? pathId([]) : null
+  const rootRef = useRef<HTMLDivElement>(null)
+  const activeRowRef = useRef<HTMLElement>()
+  const copyButtonRef = useRef<HTMLButtonElement>(null)
+  const copyMenuOpenRef = useRef(false)
+  const resetTimer = useRef<ReturnType<typeof setTimeout>>()
+  const [copyTarget, setCopyTarget] = useState<CopyTarget>()
+  const [copyState, setCopyState] = useState<'idle' | 'copied' | 'failed'>('idle')
+  const [copyMenuOpen, setCopyMenuOpen] = useState(false)
+  const [tabStopId, setTabStopId] = useState<string | null>(initialTabStopId)
+
+  const setActiveRow = (row: HTMLElement | undefined) => {
+    activeRowRef.current?.removeAttribute('data-json-copy-active')
+    activeRowRef.current = row
+    row?.setAttribute('data-json-copy-active', '')
+  }
+
+  const clearCopyTarget = () => {
+    setActiveRow(undefined)
+    setCopyTarget(undefined)
+    setCopyState('idle')
+    copyMenuOpenRef.current = false
+    setCopyMenuOpen(false)
+  }
+
+  const copyPosition = (row: HTMLElement): Pick<CopyTarget, 'left' | 'side' | 'top'> => {
+    const root = rootRef.current
+    /* v8 ignore next -- row events and viewport listeners run only after the root ref mounts. */
+    if (root === null) throw new Error('JsonTree root is not mounted')
+    const rootRect = root.getBoundingClientRect()
+    const rowRect = row.getBoundingClientRect()
+    return {
+      left: rootRect.left + root.clientWidth - 26,
+      side: rowRect.top - rootRect.top > root.clientHeight / 2 ? 'top' : 'bottom',
+      top: rowRect.top,
+    }
+  }
+
+  const positionCopyButton = (row: HTMLElement, target: RowTarget) => {
+    const position = copyPosition(row)
+    setCopyTarget({ ...target, ...position })
+  }
+
+  const repositionCopyButton = (row: HTMLElement) => {
+    const position = copyPosition(row)
+    setCopyTarget((current) => {
+      /* v8 ignore next -- an active row and its copy target are installed together. */
+      if (current === undefined) return current
+      return { ...current, ...position }
+    })
+  }
+
+  useEffect(() => () => {
+    if (resetTimer.current !== undefined) clearTimeout(resetTimer.current)
+    activeRowRef.current?.removeAttribute('data-json-copy-active')
+  }, [])
+
+  useEffect(() => {
+    activeRowRef.current?.removeAttribute('data-json-copy-active')
+    activeRowRef.current = undefined
+    copyMenuOpenRef.current = false
+    setCopyTarget(undefined)
+    setCopyState('idle')
+    setCopyMenuOpen(false)
+    setTabStopId(initialTabStopId)
+  }, [data, expandTopLevel, initialTabStopId])
+
+  useEffect(() => {
+    const reposition = () => {
+      const row = activeRowRef.current
+      if (row !== undefined) repositionCopyButton(row)
+    }
+    window.addEventListener('scroll', reposition, true)
+    window.addEventListener('resize', reposition)
+    return () => {
+      window.removeEventListener('scroll', reposition, true)
+      window.removeEventListener('resize', reposition)
+    }
+  }, [])
+
+  const handleRowHover = (row: HTMLElement, target: RowTarget) => {
+    if (!copyable || copyMenuOpenRef.current) return
+    if (activeRowRef.current === row) return
+    setActiveRow(row)
+    setCopyState('idle')
+    copyMenuOpenRef.current = false
+    setCopyMenuOpen(false)
+    positionCopyButton(row, target)
+  }
+
+  const handleRootMouseOver = (event: ReactMouseEvent<HTMLDivElement>) => {
+    if (!copyable || copyMenuOpenRef.current) return
+    /* v8 ignore next -- browser mouse events delivered through React target an Element. */
+    if (!(event.target instanceof Element)) return
+    if (event.target.closest('[data-json-copy-button]') === null) clearCopyTarget()
+  }
+
+  const handleScroll = (_event: ReactUIEvent<HTMLDivElement>) => {
+    const row = activeRowRef.current
+    if (row !== undefined) repositionCopyButton(row)
+  }
+
+  const copy = async (mode: 'json' | 'path' | 'prettyJson' | 'value') => {
+    /* v8 ignore next -- copy controls only render while their target exists. */
+    if (copyTarget === undefined) return
+    try {
+      await navigator.clipboard.writeText(copyText(copyTarget, mode))
+      setCopyState('copied')
+    } catch {
+      setCopyState('failed')
+    }
+    if (resetTimer.current !== undefined) clearTimeout(resetTimer.current)
+    resetTimer.current = setTimeout(() => { setCopyState('idle') }, 1_500)
+  }
+
+  const [rootOpen, rootClose] = bracketOf(data)
+  const copyTargetIsObject = typeof copyTarget?.value === 'object' && copyTarget.value !== null
+  const defaultCopyMode = copyTargetIsObject ? 'prettyJson' : 'value'
+  const copyTitle = copyState === 'copied'
+    ? 'Copied'
+    : copyState === 'failed'
+      ? 'Copy failed'
+      : copyTargetIsObject ? 'Copy pretty JSON' : 'Copy value'
+
+  return (
+    <div
+      ref={rootRef}
+      className={clsx(css.root, className)}
+      onMouseOver={handleRootMouseOver}
+      onMouseLeave={() => {
+        if (!copyMenuOpenRef.current) clearCopyTarget()
+      }}
+      onScroll={handleScroll}
+    >
+      {expandTopLevel
+        ? (
+          <div className={css.expandedTopLevel}>
+            <div
+              className={clsx(css.row, css.topLevelBracket)}
+              data-json-root-row
+              onMouseOver={(event) => {
+                event.stopPropagation()
+                handleRowHover(event.currentTarget, { path: [], value: data })
+              }}
+            >
+              <span className={css.punctuation}>{rootOpen}</span>
+            </div>
+            <div
+              aria-label={label}
+              className={clsx(css.container, css.expandedTopLevelContainer)}
+              role="tree"
+            >
+              {rootEntries.map(([key, value], index) => (
+                <JsonTreeNode
+                  key={key}
+                  field={key}
+                  value={value}
+                  path={[Array.isArray(data) ? index : key]}
+                  lastElement={index === rootEntries.length - 1}
+                  initialExpanded={false}
+                  tabStopId={tabStopId}
+                  onClaimTabStop={setTabStopId}
+                  onRowHover={handleRowHover}
+                />
+              ))}
+            </div>
+            <div className={clsx(css.row, css.topLevelBracket)}>
+              <span className={css.punctuation}>{rootClose}</span>
+            </div>
+          </div>
+        )
+        : (
+          <div aria-label={label} className={css.container} role="tree">
+            <JsonTreeNode
+              value={data}
+              path={[]}
+              lastElement
+              initialExpanded
+              tabStopId={tabStopId}
+              onClaimTabStop={setTabStopId}
+              onRowHover={handleRowHover}
+            />
+          </div>
+        )}
+      {copyTarget !== undefined && (
+        <span
+          className={css.copyAnchor}
+          style={{ left: copyTarget.left, top: copyTarget.top }}
+        >
+          <Menu
+            open={copyMenuOpen}
+            compact
+            portal
+            align="end"
+            side={copyTarget.side}
+            anchor={(
+              <button
+                ref={copyButtonRef}
+                type="button"
+                className={css.copyButton}
+                data-json-copy-button
+                data-state={copyState}
+                aria-label={copyTitle}
+                title={`${copyTitle}; right-click for copy options`}
+                onClick={() => void copy(defaultCopyMode)}
+                onContextMenu={(event) => {
+                  event.preventDefault()
+                  event.stopPropagation()
+                  copyMenuOpenRef.current = true
+                  setCopyMenuOpen(true)
+                }}
+              >
+                {copyState === 'copied'
+                  ? <IconCheckOutline16 size={12} />
+                  : <IconCopyOutline16 size={12} />}
+              </button>
+            )}
+            items={copyTargetIsObject ? OBJECT_COPY_MENU_ITEMS : VALUE_COPY_MENU_ITEMS}
+            onSelect={(id) => {
+              void copy(id as 'json' | 'path' | 'prettyJson' | 'value')
+              copyMenuOpenRef.current = false
+              setCopyMenuOpen(false)
+            }}
+            onClose={clearCopyTarget}
+            getAnchorRect={() => (
+              copyButtonRef.current as HTMLButtonElement
+            ).getBoundingClientRect()}
+          />
+        </span>
+      )}
+    </div>
+  )
+}

packages/client/ui-primitives/src/Menu.module.css

@@ -115,6 +115,37 @@
   background: var(--dsw-alias-interactive-bg-hover);
 }
 
+.list.compactList,
+.submenu.compactList {
+  min-width: 164px;
+  padding: 2px;
+  border-radius: 7px;
+}
+
+.compactList .item {
+  min-height: 26px;
+  gap: 6px;
+  padding: 3px 7px;
+  border-radius: 5px;
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.compactList .itemIcon {
+  width: 14px;
+  height: 14px;
+}
+
+.compactList .separator {
+  margin: 2px;
+}
+
+.compactList .label {
+  padding: 4px 7px;
+  font-size: 11px;
+  line-height: 16px;
+}
+
 .item:disabled {
   opacity: 0.4;
   cursor: not-allowed;

packages/client/ui-primitives/src/Menu.tsx

@@ -71,6 +71,7 @@ const MEASURE_STYLE: CSSProperties = { visibility: 'hidden', left: 0, top: 0 }
  * keeps the pure-CSS in-place behavior.
  * @param props.closeOnPointerLeave - close the list when the pointer leaves
  * it (default false keeps it open until outside click/Escape/selection).
+ * @param props.compact - use reduced menu typography and spacing.
  * @param props.getAnchorRect - portal mode only: supply the anchor rect
  * directly (e.g. from a host-owned trigger button) instead of measuring the
  * Menu's own wrapper span. Required when the wrapper isn't itself laid out at
@@ -81,7 +82,7 @@ const MEASURE_STYLE: CSSProperties = { visibility: 'hidden', left: 0, top: 0 }
  * by a hairline; they stay visible while the items above scroll.
  * @returns anchor wrapper with the conditional list.
  */
-export function Menu({ open, anchor, items, selectedId, onSelect, onClose, align = 'start', side = 'bottom', portal = false, closeOnPointerLeave = false, getAnchorRect, footer, className }: {
+export function Menu({ open, anchor, items, selectedId, onSelect, onClose, align = 'start', side = 'bottom', portal = false, closeOnPointerLeave = false, compact = false, getAnchorRect, footer, className }: {
   open: boolean
   anchor: ReactNode
   items: readonly MenuEntry[]
@@ -93,6 +94,7 @@ export function Menu({ open, anchor, items, selectedId, onSelect, onClose, align
   side?: 'bottom' | 'top' | 'right'
   portal?: boolean
   closeOnPointerLeave?: boolean
+  compact?: boolean
   getAnchorRect?: () => DOMRect | null
   className?: string
 }) {
@@ -219,7 +221,7 @@ export function Menu({ open, anchor, items, selectedId, onSelect, onClose, align
           {entry.id === selectedId && <IconCheckOutline16 className={css.check} />}
         </button>
         {subOpen && entry.submenu !== undefined && (
-          <div className={css.submenu} role="menu">
+          <div className={clsx(css.submenu, compact && css.compactList)} role="menu">
             {entry.submenu.map(sub => (
               <button
                 key={sub.id}
@@ -246,7 +248,7 @@ export function Menu({ open, anchor, items, selectedId, onSelect, onClose, align
   const list = open && (
     <div
       ref={listRef}
-      className={clsx(css.list, scrollable && css.scrollable, portal && css.portal, side === 'top' && !portal && css.sideTop, align === 'end' && !portal && css.alignEnd)}
+      className={clsx(css.list, compact && css.compactList, scrollable && css.scrollable, portal && css.portal, side === 'top' && !portal && css.sideTop, align === 'end' && !portal && css.alignEnd)}
       style={portal ? fixedPos ?? MEASURE_STYLE : undefined}
       role="menu"
       onPointerLeave={closeOnPointerLeave ? () => { onClose() } : undefined}

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

@@ -512,6 +512,18 @@ export const IconPlayOutline16 = ({ size = 16, className }: IconProps) => (
   </svg>
 )
 
+/** ic_ds_pause_outline_16 */
+export const IconPauseOutline16 = ({ 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="M14.1448 8.00024C14.1448 4.60644 11.394 1.85563 8.00024 1.85563C4.60644 1.85563 1.85563 4.60644 1.85563 8.00024C1.85563 11.394 4.60644 14.1448 8.00024 14.1448C11.394 14.1448 14.1448 11.394 14.1448 8.00024ZM15.5112 8.00024C15.5112 12.1482 12.1482 15.5112 8.00024 15.5112C3.85226 15.5112 0.489258 12.1482 0.489258 8.00024C0.489258 3.85226 3.85226 0.489258 8.00024 0.489258C12.1482 0.489258 15.5112 3.85226 15.5112 8.00024Z"
+      fill="currentColor"
+    />
+    <path d="M7.14244 5.14258V10.8569H5.71387V5.14258H7.14244Z" fill="currentColor" />
+    <path d="M10.286 5.14258V10.8569H8.85742V5.14258H10.286Z" fill="currentColor" />
+  </svg>
+)
+
 /** ic_ds_fullscreen_outline_16 */
 export const IconFullscreenOutline16 = ({ 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

@@ -10,6 +10,7 @@ export { Pill } from './Pill.tsx'
 export { Input } from './Input.tsx'
 export { Menu } from './Menu.tsx'
 export type { MenuEntry, MenuItem, MenuSeparator, MenuLabel } from './Menu.tsx'
+export { useAnchoredMaxHeight } from './useAnchoredMaxHeight.ts'
 export { HoverCard } from './HoverCard.tsx'
 export { Modal } from './Modal.tsx'
 export { ConnectionBanner } from './ConnectionBanner.tsx'
@@ -17,10 +18,14 @@ export { FishLogo } from './FishLogo.tsx'
 export { BrandWordmark } from './BrandWordmark.tsx'
 export { Tooltip } from './Tooltip.tsx'
 export type { TooltipSide } from './Tooltip.tsx'
+export { JsonTree } from './JsonTree.tsx'
+export type { JsonTreeProps } from './JsonTree.tsx'
 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 { MarkdownText } from './markdown/MarkdownText.tsx'
 export { MessageText } from './markdown/MessageText.tsx'
+export { extractMarkdownPlainText } from './markdown/plain-text.ts'
+export type { MarkdownPlainTextMode, MarkdownPlainTextOptions } from './markdown/plain-text.ts'
 export * from './icons/index.tsx'

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

@@ -74,6 +74,10 @@
   white-space: pre-wrap;
   word-break: break-all;
   background: var(--dsw-alias-markdown-code-block);
+  /* Bottom radii live on <pre>: overflow:hidden on .block would kill the
+     sticky banner, and this opaque fill otherwise squares off the wrapper. */
+  border-bottom-left-radius: var(--dsl-code-block-border-radius);
+  border-bottom-right-radius: var(--dsl-code-block-border-radius);
 }
 
 /* Shiki inlines its theme background var; route it to the repo token. */

packages/client/ui-primitives/src/markdown/plain-text.ts

@@ -0,0 +1,124 @@
+/**
+ * Markdown-to-plain-text projection for compact summaries and labels.
+ * Parsing shares the renderer's GFM grammar; raw HTML stays literal, links
+ * keep their labels, images keep alt text, and code keeps its source text.
+ */
+
+import { fromMarkdown } from 'mdast-util-from-markdown'
+import { gfmFromMarkdown } from 'mdast-util-gfm'
+import { gfm } from 'micromark-extension-gfm'
+
+/** Amount of parsed Markdown content returned by the extractor. */
+export type MarkdownPlainTextMode = 'all' | 'first-line' | 'first-paragraph'
+
+/** Options for {@link extractMarkdownPlainText}. */
+export interface MarkdownPlainTextOptions {
+  /** Projection boundary; defaults to the complete document. */
+  mode?: MarkdownPlainTextMode
+}
+
+interface MarkdownNode {
+  type: string
+  value?: string
+  alt?: string
+  children?: MarkdownNode[]
+}
+
+function inlineText(node: MarkdownNode): string {
+  switch (node.type) {
+    case 'text':
+    case 'inlineCode':
+    case 'code':
+      return node.value ?? ''
+    case 'image':
+    case 'imageReference':
+      return node.alt ?? ''
+    case 'break':
+      return '\n'
+    case 'html':
+      return node.value ?? ''
+    default:
+      return node.children?.map(inlineText).join('') ?? ''
+  }
+}
+
+function compactInline(text: string): string {
+  return text.replace(/\s+/g, ' ').trim()
+}
+
+function blockText(node: MarkdownNode): string {
+  switch (node.type) {
+    case 'root':
+    case 'blockquote':
+      return node.children?.map(blockText).filter(Boolean).join('\n\n') ?? ''
+    case 'paragraph':
+    case 'heading':
+      return compactInline(inlineText(node))
+    case 'code':
+      return node.value?.trim() ?? ''
+    case 'list':
+      return node.children?.map(blockText).filter(Boolean).join('\n') ?? ''
+    case 'listItem':
+      return node.children?.map(blockText).filter(Boolean).join(' ') ?? ''
+    case 'table':
+      return node.children?.map(blockText).filter(Boolean).join('\n') ?? ''
+    case 'tableRow':
+      return node.children?.map(blockText).join('\t') ?? ''
+    case 'tableCell':
+      return compactInline(inlineText(node))
+    case 'html':
+      return node.value ?? ''
+    case 'thematicBreak':
+    case 'definition':
+      return ''
+    default:
+      return compactInline(inlineText(node))
+  }
+}
+
+function findFirstParagraph(node: MarkdownNode): string | undefined {
+  if (node.type === 'paragraph') {
+    const text = compactInline(inlineText(node))
+    if (text !== '') return text
+  }
+  for (const child of node.children ?? []) {
+    const text = findFirstParagraph(child)
+    if (text !== undefined) return text
+  }
+  return undefined
+}
+
+function fullText(root: MarkdownNode): string {
+  return blockText(root)
+    .split('\n')
+    .map(line => line.trim())
+    .join('\n')
+    .replace(/\n{3,}/g, '\n\n')
+    .trim()
+}
+
+/**
+ * Parse GFM Markdown, remove its presentation markup, and preserve raw HTML literally.
+ * @param markdown - Markdown source.
+ * @param options - Optional extraction boundary.
+ * @returns Plain text for the whole document, first visible line, or first semantic paragraph.
+ */
+export function extractMarkdownPlainText(
+  markdown: string,
+  options: MarkdownPlainTextOptions = {},
+): string {
+  const { mode = 'all' } = options
+  const root = fromMarkdown(markdown, {
+    extensions: [gfm()],
+    mdastExtensions: [gfmFromMarkdown()],
+  }) as MarkdownNode
+  const all = fullText(root)
+  switch (mode) {
+    case 'all':
+      return all
+    case 'first-line':
+      return all.split('\n').find(line => line !== '') ?? ''
+    case 'first-paragraph':
+      return findFirstParagraph(root) ?? all.split('\n').find(line => line !== '') ?? ''
+  }
+}

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

@@ -0,0 +1,38 @@
+/**
+ * Viewport-fit hook for bottom-anchored overlays (slash menu, popupSelect):
+ * the element's bottom edge is laid out independent of its height, so it
+ * grows upward and only the top edge can collide with the viewport — clamp
+ * the design cap to the space between that edge and the viewport top.
+ */
+import { useLayoutEffect, useState } from 'react'
+import type { RefObject } from 'react'
+
+/** Safe distance kept between the overlay and the viewport top edge (mirrors the Menu portal margin). */
+const MARGIN = 12
+
+/**
+ * Clamp a bottom-anchored overlay's max-height to the viewport.
+ * @param ref - the overlay element; a null current (overlay closed) skips measuring.
+ * @param cap - design max-height in px (the clamp never exceeds it).
+ * @param signal - re-measure trigger: pass the overlay's render state so anchor
+ *   moves (composer growth) re-fit; resize/scroll re-fit while mounted.
+ * @returns the max-height to apply inline, in px.
+ */
+export function useAnchoredMaxHeight(ref: RefObject<HTMLElement>, cap: number, signal: unknown): number {
+  const [maxHeight, setMaxHeight] = useState(cap)
+  useLayoutEffect(() => {
+    const el = ref.current
+    if (el === null) return
+    const fit = () => {
+      setMaxHeight(Math.min(cap, Math.max(0, el.getBoundingClientRect().bottom - MARGIN)))
+    }
+    fit()
+    window.addEventListener('resize', fit)
+    window.addEventListener('scroll', fit, true)
+    return () => {
+      window.removeEventListener('resize', fit)
+      window.removeEventListener('scroll', fit, true)
+    }
+  }, [ref, cap, signal])
+  return maxHeight
+}

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

@@ -123,6 +123,7 @@ describe('Menu', () => {
     render(
       <Menu
         open
+        compact
         anchor={<span>trigger</span>}
         items={[
           { id: 'a', label: 'Alpha', icon: <svg data-testid="ic" /> },
@@ -186,6 +187,7 @@ describe('Menu', () => {
     render(
       <Menu
         open
+        compact
         anchor={<span>trigger</span>}
         items={[
           { id: 'plain', label: 'Plain' },

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 (43 deepsuite + 13 figma extracts + the hand-authored sparkle)', () => {
-    expect(iconNames.length).toBe(57)
+  it('exports the full P-I set (44 deepsuite + 13 figma extracts + the hand-authored sparkle)', () => {
+    expect(iconNames.length).toBe(58)
   })
 
   it.each(iconNames)('%s renders an svg with currentColor fills and no hardcoded palette', (name) => {

packages/client/ui-primitives/tests/json-tree.spec.tsx

@@ -0,0 +1,339 @@
+// @vitest-environment jsdom
+
+import { act, cleanup, fireEvent, render, screen, waitFor, within } from '@testing-library/react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { JsonTree } from '@deepseek-ai/dsh-client-ui-primitives'
+
+let writeText: ReturnType<typeof vi.fn>
+
+beforeEach(() => {
+  writeText = vi.fn().mockResolvedValue(undefined)
+  Object.defineProperty(navigator, 'clipboard', {
+    configurable: true,
+    value: { writeText },
+  })
+})
+
+afterEach(() => {
+  cleanup()
+  vi.useRealTimers()
+})
+
+describe('JsonTree', () => {
+  it('keeps the top level open and renders expandable value previews', () => {
+    render(
+      <JsonTree
+        label="Payload"
+        data={{
+          nested: { answer: 42 },
+          list: ['alpha', 'beta'],
+        }}
+      />,
+    )
+
+    const tree = screen.getByRole('tree', { name: 'Payload' })
+    const rows = within(tree).getAllByRole('treeitem')
+    expect(rows).toHaveLength(2)
+    expect(rows[0]?.textContent).toBe('nested:{answer: 42},')
+    expect(rows[1]?.textContent).toBe('list:["alpha", "beta"]')
+
+    const expanders = within(tree).getAllByRole('button', { name: 'Expand JSON node' })
+    expect(expanders[0]?.tabIndex).toBe(0)
+    expect(expanders[1]?.tabIndex).toBe(-1)
+
+    fireEvent.click(expanders[0] as HTMLElement)
+    expect(within(tree).getAllByRole('treeitem')).toHaveLength(3)
+    expect(screen.getByText('answer:')).toBeDefined()
+    expect(within(tree).getByRole('button', { name: 'Collapse JSON node' })).toBeDefined()
+  })
+
+  it('moves the single tab stop between visible expanders with arrow keys', () => {
+    render(
+      <JsonTree
+        expandTopLevel={false}
+        data={{
+          first: { nested: 1 },
+          second: { nested: 2 },
+        }}
+      />,
+    )
+
+    const tree = screen.getByRole('tree', { name: 'JSON' })
+    const root = within(tree).getByRole('button', { name: 'Collapse JSON node' })
+    const children = within(tree).getAllByRole('button', { name: 'Expand JSON node' })
+
+    expect(root.tabIndex).toBe(0)
+    fireEvent.keyDown(root, { key: 'ArrowDown' })
+    expect(document.activeElement).toBe(children[0])
+    expect(root.tabIndex).toBe(-1)
+    expect(children[0]?.tabIndex).toBe(0)
+
+    fireEvent.keyDown(children[0] as HTMLElement, { key: 'ArrowRight' })
+    expect(children[0]?.getAttribute('aria-expanded')).toBe('true')
+    fireEvent.keyDown(children[0] as HTMLElement, { key: 'ArrowLeft' })
+    expect(children[0]?.getAttribute('aria-expanded')).toBe('false')
+    fireEvent.keyDown(children[0] as HTMLElement, { key: 'Enter' })
+
+    fireEvent.keyDown(children[0] as HTMLElement, { key: 'ArrowUp' })
+    expect(document.activeElement).toBe(root)
+    fireEvent.keyDown(root, { key: 'ArrowUp' })
+    expect(document.activeElement).toBe(children[1])
+  })
+
+  it('copies an array element path without recovering data from rendered labels', async () => {
+    render(<JsonTree data={{ list: [{ value: 'x' }, 'tail'] }} />)
+
+    const tree = screen.getByRole('tree')
+    fireEvent.click(within(tree).getByRole('button', { name: 'Expand JSON node' }))
+    const arrayRow = within(tree).getAllByRole('treeitem')
+      .find(row => row.textContent?.startsWith('0:'))
+    expect(arrayRow).toBeDefined()
+
+    fireEvent.mouseOver(arrayRow as HTMLElement)
+    const copyButton = screen.getByRole('button', { name: 'Copy pretty JSON' })
+    fireEvent.contextMenu(copyButton)
+    fireEvent.click(screen.getByRole('menuitem', { name: 'Copy property path' }))
+
+    await waitFor(() => {
+      expect(writeText).toHaveBeenCalledWith('$.list[0]')
+    })
+  })
+
+  it('renders empty containers, JSON-adjacent primitives, and bounded deep previews', () => {
+    const anonymous = Object.defineProperty(() => {}, 'name', { value: '' })
+    const date = new Date('2026-07-28T00:00:00.000Z')
+    const data = {
+      '': 'empty key',
+      nil: null,
+      text: 'quoted',
+      flag: true,
+      count: 3,
+      big: 4n,
+      date,
+      named: function named() {},
+      missing: undefined,
+      symbol: Symbol('token'),
+      emptyObject: {},
+      emptyArray: [],
+      primitivePreview: {
+        nil: null,
+        flag: false,
+        big: 9n,
+        missing: undefined,
+      },
+      exoticPreview: {
+        symbol: Symbol(),
+        named: function sample() {},
+        anonymous,
+        date,
+      },
+      wideObject: { a: 1, b: 2, c: 3, d: 4, e: 5 },
+      wideArray: [1, 2, 3, 4, 5, 6],
+      deep: { a: { b: { c: 1 } } },
+    }
+    render(<JsonTree copyable={false} data={data} />)
+
+    const text = screen.getByRole('tree').textContent
+    expect(text).toContain('"":\"empty key\"')
+    expect(text).toContain('nil:null')
+    expect(text).toContain('flag:true')
+    expect(text).toContain('count:3')
+    expect(text).toContain('big:4n')
+    expect(text).toContain('date:2026-07-28T00:00:00.000Z')
+    expect(text).toContain('named:function() { }')
+    expect(text).toContain('missing:undefined')
+    expect(text).toContain('symbol:Symbol(token)')
+    expect(text).toContain('emptyObject:{}')
+    expect(text).toContain('emptyArray:[]')
+    expect(text).toContain('primitivePreview:{nil: null, flag: false, big: 9, missing: undefined}')
+    expect(text).toContain('exoticPreview:{symbol: Symbol, named: sample, anonymous: Function, date: }')
+    expect(text).toContain('wideObject:{a: 1, b: 2, c: 3, d: 4, …}')
+    expect(text).toContain('wideArray:[1, 2, 3, 4, 5, …]')
+    expect(text).toContain('deep:{a: {b: {…}}}')
+    expect(screen.queryByRole('button', { name: /Copy/ })).toBeNull()
+    fireEvent.mouseOver(screen.getByRole('tree').parentElement as HTMLElement)
+  })
+
+  it('renders child commas and lets a clickable property label toggle its node', () => {
+    render(<JsonTree data={{ parent: { emptyObject: {}, emptyArray: [], scalar: 1, last: 2 } }} />)
+
+    fireEvent.click(screen.getByText('parent:'))
+    const tree = screen.getByRole('tree')
+    const rows = within(tree).getAllByRole('treeitem')
+    expect(rows.find(row => row.textContent === 'emptyObject:{},')).toBeDefined()
+    expect(rows.find(row => row.textContent === 'emptyArray:[],')).toBeDefined()
+    expect(rows.find(row => row.textContent === 'scalar:1,')).toBeDefined()
+    expect(rows.find(row => row.textContent === 'last:2')).toBeDefined()
+
+    fireEvent.click(screen.getByText('parent:'))
+    expect(within(tree).getAllByRole('treeitem')).toHaveLength(1)
+  })
+
+  it('assigns the initial array tab stop and supports an empty collapsible root', () => {
+    const first = render(<JsonTree data={['plain', { nested: true }]} />)
+    const tree = screen.getByRole('tree')
+    expect(tree.textContent).toContain('0:"plain"')
+    expect(within(tree).getByRole('button', { name: 'Expand JSON node' }).tabIndex).toBe(0)
+    first.unmount()
+
+    render(<JsonTree expandTopLevel={false} data={{}} />)
+    expect(screen.getByRole('tree').textContent).toBe('{}')
+    expect(screen.queryByRole('button', { name: /JSON node/ })).toBeNull()
+  })
+
+  it('copies primitive and object values in every menu mode', async () => {
+    const anonymous = Object.defineProperty(() => {}, 'name', { value: '' })
+    render(
+      <JsonTree
+        data={{
+          plain: 'hello',
+          'odd-key': 3,
+          object: { a: 1 },
+          missing: undefined,
+          big: 7n,
+          symbol: Symbol(),
+          symbolNamed: Symbol('token'),
+          named: function named() {},
+          anonymous,
+        }}
+      />,
+    )
+
+    const tree = screen.getByRole('tree')
+    const row = (prefix: string) => {
+      const match = within(tree).getAllByRole('treeitem')
+        .find(item => item.textContent?.startsWith(prefix))
+      expect(match).toBeDefined()
+      return match as HTMLElement
+    }
+    const hover = (prefix: string) => {
+      fireEvent.mouseOver(row(prefix))
+      return screen.getByRole('button', { name: /Cop/ })
+    }
+    const select = (name: string) => {
+      const button = screen.getByRole('button', { name: /Cop/ })
+      fireEvent.contextMenu(button)
+      fireEvent.click(screen.getByRole('menuitem', { name }))
+    }
+
+    fireEvent.click(hover('plain:'))
+    await waitFor(() => { expect(writeText).toHaveBeenLastCalledWith('hello') })
+
+    hover('odd-key:')
+    select('Copy property path')
+    await waitFor(() => { expect(writeText).toHaveBeenLastCalledWith('$["odd-key"]') })
+    select('Copy JSON')
+    await waitFor(() => { expect(writeText).toHaveBeenLastCalledWith('3') })
+    fireEvent.click(hover('odd-key:'))
+    await waitFor(() => { expect(writeText).toHaveBeenLastCalledWith('3') })
+
+    fireEvent.click(hover('object:'))
+    await waitFor(() => { expect(writeText).toHaveBeenLastCalledWith('{\n  "a": 1\n}') })
+    select('Copy compact JSON')
+    await waitFor(() => { expect(writeText).toHaveBeenLastCalledWith('{"a":1}') })
+
+    for (const [prefix, expected] of [
+      ['missing:', 'undefined'],
+      ['big:', '7'],
+      ['symbol:', 'Symbol'],
+      ['symbolNamed:', 'token'],
+      ['named:', 'named'],
+      ['anonymous:', 'Function'],
+    ] as const) {
+      fireEvent.click(hover(prefix))
+      await waitFor(() => { expect(writeText).toHaveBeenLastCalledWith(expected) })
+    }
+  })
+
+  it('reports clipboard failure, resets feedback, and clears a prior timer', async () => {
+    vi.useFakeTimers()
+    writeText.mockRejectedValue(new Error('denied'))
+    const view = render(<JsonTree data={{ value: 'x' }} />)
+    const row = screen.getByRole('treeitem')
+    fireEvent.mouseOver(row)
+    fireEvent.click(screen.getByRole('button', { name: 'Copy value' }))
+    await act(async () => { await Promise.resolve() })
+    expect(screen.getByRole('button', { name: 'Copy failed' })).toBeDefined()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Copy failed' }))
+    await act(async () => { await Promise.resolve() })
+    act(() => { vi.advanceTimersByTime(1_500) })
+    expect(screen.getByRole('button', { name: 'Copy value' })).toBeDefined()
+    view.unmount()
+  })
+
+  it('keeps copy placement synchronized and clears stale targets', () => {
+    const view = render(<JsonTree data={{ first: { a: 1 }, second: 2 }} />)
+    const root = view.container.firstElementChild as HTMLElement
+    const tree = screen.getByRole('tree')
+    const firstRow = within(tree).getAllByRole('treeitem')[0] as HTMLElement
+    const secondRow = within(tree).getAllByRole('treeitem')[1] as HTMLElement
+
+    Object.defineProperty(root, 'clientHeight', { configurable: true, value: 100 })
+    Object.defineProperty(root, 'clientWidth', { configurable: true, value: 300 })
+    vi.spyOn(root, 'getBoundingClientRect').mockReturnValue({
+      bottom: 100,
+      height: 100,
+      left: 10,
+      right: 310,
+      top: 0,
+      width: 300,
+      x: 10,
+      y: 0,
+      toJSON: () => ({}),
+    })
+    vi.spyOn(firstRow, 'getBoundingClientRect').mockReturnValue({
+      bottom: 91,
+      height: 16,
+      left: 10,
+      right: 200,
+      top: 75,
+      width: 190,
+      x: 10,
+      y: 75,
+      toJSON: () => ({}),
+    })
+
+    fireEvent.mouseOver(firstRow)
+    const copyButton = screen.getByRole('button', { name: 'Copy pretty JSON' })
+    expect((copyButton.closest('span')?.parentElement as HTMLElement).style.left).toBe('284px')
+    fireEvent.mouseOver(copyButton)
+    expect(screen.getByRole('button', { name: 'Copy pretty JSON' })).toBeDefined()
+    fireEvent.mouseOver(firstRow)
+
+    fireEvent.scroll(root)
+    fireEvent.scroll(window)
+    fireEvent.resize(window)
+
+    fireEvent.contextMenu(copyButton)
+    fireEvent.mouseOver(secondRow)
+    fireEvent.mouseOver(root)
+    fireEvent.mouseLeave(root)
+    expect(screen.getByRole('menu')).toBeDefined()
+    fireEvent.keyDown(document, { key: 'Escape' })
+    expect(screen.queryByRole('button', { name: /Copy/ })).toBeNull()
+
+    fireEvent.mouseOver(secondRow)
+    expect(screen.getByRole('button', { name: 'Copy value' })).toBeDefined()
+    fireEvent.mouseOver(root)
+    expect(screen.queryByRole('button', { name: /Copy/ })).toBeNull()
+
+    fireEvent.scroll(root)
+    view.rerender(<JsonTree data={{ replacement: 3 }} />)
+    expect(screen.queryByRole('button', { name: /Copy/ })).toBeNull()
+  })
+
+  it('copies the fixed root and clears it when the pointer leaves', async () => {
+    const view = render(<JsonTree data={{ value: 1 }} />)
+    const root = view.container.firstElementChild as HTMLElement
+    const openingBracket = root.querySelector<HTMLElement>('[data-json-root-row]')
+    expect(openingBracket).not.toBeNull()
+
+    fireEvent.mouseOver(openingBracket as HTMLElement)
+    fireEvent.click(screen.getByRole('button', { name: 'Copy pretty JSON' }))
+    await waitFor(() => { expect(writeText).toHaveBeenCalledWith('{\n  "value": 1\n}') })
+
+    fireEvent.mouseLeave(root)
+    expect(screen.queryByRole('button', { name: /Copy/ })).toBeNull()
+  })
+})

packages/client/ui-primitives/tests/markdown-plain-text.spec.ts

@@ -0,0 +1,71 @@
+import { describe, expect, it } from 'vitest'
+import { extractMarkdownPlainText } from '@deepseek-ai/dsh-client-ui-primitives'
+
+const MARKDOWN = [
+  '# Release notes',
+  '',
+  'First **paragraph** with [a link](https://example.com) and ![diagram](diagram.png).',
+  '',
+  '- shipped',
+  '- `verified`',
+  '',
+  '```ts',
+  'const ready = true',
+  '```',
+].join('\n')
+
+describe('extractMarkdownPlainText', () => {
+  it('projects the complete GFM document without presentation syntax', () => {
+    expect(extractMarkdownPlainText(MARKDOWN)).toBe([
+      'Release notes',
+      '',
+      'First paragraph with a link and diagram.',
+      '',
+      'shipped',
+      'verified',
+      '',
+      'const ready = true',
+    ].join('\n'))
+  })
+
+  it('selects the first visible line or first semantic paragraph', () => {
+    expect(extractMarkdownPlainText(MARKDOWN, { mode: 'first-line' })).toBe('Release notes')
+    expect(extractMarkdownPlainText(MARKDOWN, { mode: 'first-paragraph' }))
+      .toBe('First paragraph with a link and diagram.')
+  })
+
+  it('preserves raw HTML while removing Markdown presentation markup', () => {
+    const block = [
+      '<background-task-complete id="trajectory-ui-watch">',
+      'Command: pnpm test',
+      'Exit code: 0',
+      '</background-task-complete>',
+    ].join('\n')
+    expect(extractMarkdownPlainText(block)).toBe(block)
+    expect(extractMarkdownPlainText('**Status:** <span data-state="ok">ready</span>'))
+      .toBe('Status: <span data-state="ok">ready</span>')
+    expect(extractMarkdownPlainText(block, { mode: 'first-paragraph' }))
+      .toBe('<background-task-complete id="trajectory-ui-watch">')
+  })
+
+  it('projects GFM tables, references, hard breaks, and block structure', () => {
+    const markdown = [
+      '> first\\',
+      '> second with ![diagram][asset] and <span>visible</span>',
+      '',
+      '---',
+      '',
+      '| Name | Value |',
+      '| --- | --- |',
+      '| alpha | `1` |',
+      '',
+      '[asset]: diagram.png',
+    ].join('\n')
+    expect(extractMarkdownPlainText(markdown)).toBe([
+      'first second with diagram and <span>visible</span>',
+      '',
+      'Name\tValue',
+      'alpha\t1',
+    ].join('\n'))
+  })
+})

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

@@ -100,6 +100,7 @@ export function apply(ctx: ClientContext): void {
   const source: SlashSource = {
     trigger: '/',
     name: 'skill',
+    order: 2,
     async candidates(session, { query, signal }) {
       const skills = await fetchCatalog(session.sessionId)
       // Superseded keystroke: the shared fetch stays warm, this caller yields.

packages/client/ui-slash/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-slash/README.md
-README.md: 4e363c2682bf91862ec40f3f2174831451fb9b0d
-README.zh.md: 20770f37f33c4a8a94486b116856b41bedec913e
+README.md: 29f1a71ce20f898ffe2ab3a1c6f3d73a7aecfe38
+README.zh.md: 03dac56870de5b083124716825001009b4293736

packages/client/ui-slash/README.md

@@ -6,7 +6,7 @@ Input trigger pipeline plugin: `/` and `@` detection under the caret (word-bound
 
 Layering: `src/core/` (T2) is the pure core — `detectTrigger`, `menuReduce`/`seedGroups`/`MENU_CLOSED`, `exactMatch`, zero React/DOM/cordis; `src/client/service.ts` is the shell wiring the core to the menu snapshot store, the per-hit candidate fetch (generation-gated, `AbortSignal`-superseded, failed sources drop silently with a console record), and the three pick paths. `src/types.ts` and the two `contract.ts` files are the frozen cross-package contract (design v4 §5.1); changes require main-thread arbitration.
 
-MenuView renders the menu store into the `conversation.input.overlay` slot (list kind, session scope) and renders null while closed. The slot is owned by ui-conversation's composer entry (anchor, children declaration, lifecycle); its SlotMap type merge lives in this package's `src/client/slots.ts` because the dependency direction (ui-conversation → ui-slash) admits no reverse type import. Combobox pattern: focus stays in the textarea, rows pick on mousedown, the highlight rides `aria-activedescendant`.
+MenuView renders the menu store into the `conversation.input.overlay` slot (list kind, session scope) and renders null while closed. Groups sort by the optional `SlashSource.order` (lower first, default 0, ties keep registration order) under title rows localized through the `slash.menu` locale namespace (an unknown source shows its raw name); the list height clamps to the space above the composer, and a pointer down outside both the menu and the surrounding composer card dismisses it. The slot is owned by ui-conversation's composer entry (anchor, children declaration, lifecycle); its SlotMap type merge lives in this package's `src/client/slots.ts` because the dependency direction (ui-conversation → ui-slash) admits no reverse type import. Combobox pattern: focus stays in the textarea, rows pick on mousedown, the highlight rides `aria-activedescendant`.
 
 The `/client` export surface is the plugin body (`apply`/`inject`), `SlashService`, `MenuViewInjected`, and the contract types. MenuView itself is internal — the slot registration closes over it.
 
@@ -23,4 +23,3 @@ None; this package neither assembles nor sends a provider request.
 - **Global source layer only** — session-scope source registration (per-session shadowing, ScopedLayers-alike) is designed but not enabled; the ledger tracks the trigger condition (a real per-session source need).
 - **`SlashCandidate.icon` renders as text** — MenuView drops the string into the icon slot verbatim; wiring to the design-system icon enum (iconFile five-variant family) lands when that enum ships.
 - **Overlay SlotMap merge home is split from slot ownership** — the `conversation.input.overlay` merge lives here (sole copy) while the slot's owner semantics (anchor, children declaration, lifecycle) stay with ui-conversation; the dependency direction (ui-conversation → ui-slash) forces the split, so a future dependency reshuffle should revisit it.
-- **Menu group order is registration order** — no explicit ordering seam across sources; acceptable while the roster is command/skill/subagent, revisit if business sources join.

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

@@ -6,7 +6,7 @@
 
 分层：`src/core/`（T2）是纯内核——`detectTrigger`、`menuReduce`／`seedGroups`／`MENU_CLOSED`、`exactMatch`，零 React／DOM／cordis；`src/client/service.ts` 是壳层，把内核接到菜单快照 store、逐 hit 候选拉取（以 generation 把关、后继请求经 `AbortSignal` 取代旧请求、失败的 source 静默丢弃并留一条 console 记录）和三条 pick 路径上。`src/types.ts` 与两个 `contract.ts` 文件是冻结的跨包契约（设计 v4 §5.1）；变更需经主线程仲裁。
 
-MenuView 把菜单 store 渲染进 `conversation.input.overlay` slot（列表类，会话 scope），菜单关闭期间渲染 null。该 slot 由 ui-conversation 的组合器条目拥有（锚点、children 声明、生命周期）；其 SlotMap 类型合并放在本包的 `src/client/slots.ts`，因为依赖方向（ui-conversation → ui-slash）不允许反向的类型导入。combobox 模式：焦点始终留在 textarea，行在 mousedown 时完成 pick，高亮由 `aria-activedescendant` 承载。
+MenuView 把菜单 store 渲染进 `conversation.input.overlay` slot（列表类，会话 scope），菜单关闭期间渲染 null。分组按可选的 `SlashSource.order` 排序（越小越靠前，默认 0，同值保持注册序），组标题行经 `slash.menu` locale 命名空间本地化（未知 source 显示其原名）；列表高度收敛到 composer 上方的可用空间，指针落在菜单与所在 composer 卡片之外即关闭菜单。该 slot 由 ui-conversation 的组合器条目拥有（锚点、children 声明、生命周期）；其 SlotMap 类型合并放在本包的 `src/client/slots.ts`，因为依赖方向（ui-conversation → ui-slash）不允许反向的类型导入。combobox 模式：焦点始终留在 textarea，行在 mousedown 时完成 pick，高亮由 `aria-activedescendant` 承载。
 
 `/client` 导出表层是插件主体（`apply`／`inject`）、`SlashService`、`MenuViewInjected` 与契约类型。MenuView 本身是内部实现——slot 注册以闭包持有它。
 
@@ -23,4 +23,3 @@ MenuView 把菜单 store 渲染进 `conversation.input.overlay` slot（列表类
 - **只有全局 source 层**：会话 scope 的 source 注册（逐会话遮蔽、类 ScopedLayers 机制）已有设计但未启用；台账记录着触发条件（出现真实的逐会话 source 需求）。
 - **`SlashCandidate.icon` 以文本渲染**：MenuView 把该字符串原样放进图标位；与设计系统图标枚举（iconFile 五变体家族）的接入将在该枚举交付后完成。
 - **overlay 的 SlotMap 合并归属与 slot 所有权分离**：`conversation.input.overlay` 的合并放在本包（唯一副本），而该 slot 的 owner 语义（锚点、children 声明、生命周期）留在 ui-conversation；依赖方向（ui-conversation → ui-slash）迫使这一拆分，未来依赖关系调整时应重新审视。
-- **菜单组顺序即注册顺序**：source 之间没有显式排序 seam；roster 还是 command／skill（技能）／subagent 时可以接受，业务 source 加入后需重新审视。