feat(gui): step1 skeleton — dsc web serves built web UI over booted harness host

Five new modules: apps/dsc (bin: parseArgs + node:http static server +
signal shutdown), packages/host/apiproxy (programmatic harness core
composition, agents:[]), packages/client/web-runtime (React-free browser
runtime), packages/client/web-ui (React mount), apps/web (vite build
entry producing dist consumed by apps/dsc via package exports).

Root wiring: apps/* workspace glob, dsh-* paths for host/client groups,
demo:web script, apps/web/dist gitignore. No protocol/API routes yet —
contract lands in step2 (see missions/tasks/20260719-1902-apiproxy-api-design).

Includes the design + implementation archives (spec v2.1, deepseekchat
baseline and harness boot research, implementation run log).

Acceptance: 12/12 passed incl. real-key llm.stream smoke (51 chunks).

feat(gui): apiproxy — four-quadrant RPC contract + fetch carriers, live end to end

Contract layer (src/api/, 14 files): four named wire message types
(ClientRequest / ServerResponse / ServerRequest / ClientResponse) as a
discriminated union over strict bidirectional rpcId (initiator mints,
responder echoes; channel and message fully decoupled — HTTP is the
client->server pipe, SSE the reverse); narrow RpcRequest<P>/
RpcResponse<T> signature forms; RpcMethodMap with RequestPayload<K>/
ResponseValue<K> derivation; typed RpcError details map; approval/
question responses modeled as ClientResponse via a single /api/respond
endpoint (RpcReceipt carrier ack); zod schemas anchored per Wire<T>
against exactOptionalPropertyTypes.

impl/api-proxy.ts: describe/list/create, both SSE streams (frame queue
pump, subscribed baseline, lifecycle frames, signal cleanup); history
pages on message boundaries (tail-back scan, partial included in the
tail page); prompt dispatches queue->agent.send / steer->agent.steer
with rpcId carried through MessageSource; cancel for attached sessions;
cold-session resume deduped via a per-id promise map; host-level
provider/model defaults injected at create/resume.

fetch/: mechanical UNARY_ROUTES table, two-level parse with
path==method check, SSE frames completed to ServerRequest full form;
client mints -> narrows -> envelopes outbound, verifies rpcId echo
inbound, streams SSE frames, four-quadrant onEnvelope tap (debug panel
choke point). Real-browser fixes: URL base resolves to location.origin
(hardcoded internal base broke real pages), browser-safe export paths.

Design archives: contract design.md v2.0 with decision log,
core-coverage audit, comparative studies, step2 impl run log. Probed
end to end over real HTTP: prompt -> live model stream -> history
returns the finished reply.

feat(gui): RpcLog debug panel — fixture-driven milestone, playwright-verified 10/10

web-runtime: rpcLog + ui slices (zustand), four-quadrant RpcLogEntry
(client-request / server-response / server-request / client-response),
onEnvelope tap -> microtask-batched pump with 500-entry ring buffer,
ConnectionController (private state, backoff reconnect), fixture API
with fake envelopes (?fixture switch), bootWebRuntime; contract types
via temporary local copies (api-types.ts, swapped for real imports when
W3 client lands).

web-ui: components/panels/RpcLog five-piece set (badge with unread
count, floating panel, direction glyphs per quadrant, same-rpcId
pair highlighting in two families, JSON payload expand, follow/pause,
clear), App shell, utils/formatRelative, light-theme CSS variables with
dark placeholders.

dsc bin: mime lookup fixed to use the actually-served file (naked
'/?query' no longer falls through to octet-stream download); shutdown
closes SSE keep-alive connections so SIGTERM actually exits.

Acceptance: scripts/verify-rpclog-panel.mjs (chromium headless) ALL
PASS 10/10 over design.md §D 1-6.

pkg: add web scripts for building

feat(gui): session milestone — list + conversation over Session OOP, styled RpcLog v2.1

web-runtime: Session/SessionManager object layer (resident instances,
mux frame routing, lineage flattening), foldSurface adapter with padding
sentinels for paged windows, chunk accumulator for streaming partials,
batched change notification (useSyncExternalStore contract), connection
sinks + reconnect fix (the 300ms self-abort reconnect storm that made
the session list flap is gone), fixture rewritten as a scripted host
(60-turn history, typewriter replay, resident pending approval, child
session); temporary contract copies deleted in favor of real apiproxy
imports.

web-ui: sessions screen (list with lineage indent + selection as
container-local state), conversation view (turn grouping, reasoning
fold, tool cards, steering, pending interaction cards, upward paging
with scroll anchoring), input bar with queue/steer/stop; RpcLog panel
restyled per docs/web-styling.md (tokenized palette, quadrant badge
glyphs now vertical ↑↓⇟⇞, pair highlighting, floating shadow).

docs/web-styling.md: living style guide (tokens, visual baseline,
coding rules, evolution log).

Acceptance: verify-session.mjs 31/31, verify-session-real.mjs 5/5
(real model streaming), verify-rpclog-panel.mjs 10/10.

feat(gui): hostruntime split + repo-wide package prefix rename

Package split (design: 20260720-0101-hostruntime-split-design):
dsh-host-runtime carries bootHost + createApiProxy + startHost()
(RunningHost {api, handler, defaults, ctx, dispose} — the seam Electron
and any future shell reuses; ctx is the official front-door mount
point); dsh-host-webserver carries the node:http static+API bridge
(fixed: abort now keys on res 'close' + writableEnded — req 'close'
fires on body end since Node 16 and was killing every SSE stream
instantly, the reconnect-storm root cause); apps/dsc is now a thin
assembly with web/-p subcommands. dsc -p runs the full isomorphic
carrier chain in process (second real protocol consumer; probed
end-to-end against the live model).

Naming rule (user decree): packages under host/ and client/ carry the
directory prefix in their npm name — dsh-host-apiproxy,
dsh-client-web-runtime, dsh-client-web-ui renamed repo-wide in one
frozen batch; explicit tsconfig paths entries added where the wildcard
no longer matches.

Acceptance: verify-session 31/31, verify-rpclog-panel 10/10,
verify-session-real 7/7 (incl. new 12s connection-stability sentinels),
tsc green, dsc web + dsc -p smoke both pass.

refactor(gui): AbstractApiClient class hierarchy — OO client with inheritable seams

AbstractApiClient (apiproxy) carries every protocol invariant: rpcId
minting, four-quadrant envelope wrap/unwrap, zod parsing, SSE frame
parsing, the payload-direct IApiClient surface (callers no longer mint
rpcIds — the carrier does), and the instance-level envelope observation
pump (batched via microtask; moved off module-level globals in
rpc-log.ts, which is now a pure subscriber mapping envelopes into store
entries — the debug panel observes the connection, it is not part of
it).

Platform subclasses own two abstract seams (doFetch, onEnvelope) plus
three protocol-level virtuals for transportless overrides:
InProcessApiClient (apiproxy; dsc -p uses new InProcessApiClient(
host.handler)), WebApiClient (web-runtime), FixtureApiClient (fixture
now subclasses instead of wrapping). Naming per decree: AbstractApiClient
/ IApiClient; ApiProxy stays the impl-side narrow-form contract.

headless.ts call sites drop rpcRequest wrappers (payload-direct);
split-design archive updated with the naming-rule ledger.

tsc green; verify-session 31/31, verify-rpclog-panel 10/10,
verify-session-real 7/7 (12s connection sentinel count=4); dsc -p smoke
CALLER-OK.

feat(gui): InputBar final form — bug batch, deepseekchat layout, single primary button, running locks input

Squashes the whole InputBar iteration batch: IME/caret/auto-grow/focus/dedup
bug fixes, layout aligned to the deepseekchat baseline, single primary button
with hover flyout, finalized button semantics with the Codex-style icon
circle, and running-state locking where stop is the only mid-turn action.
The same batch carried the Chinese-to-English code comment sweep
(density pruned), folded in here.

docs(gui): purge work-log references from code comments

76 design-doc references cleared across the GUI packages: section
pointers inlined as self-contained constraint statements, pure pointer
comments dropped, milestone codenames and ruling tags out, and the 14
contract file headers switched to the formal RFC (the only sanctioned
external reference). web-styling.md now cites the styling RFC instead
of the disposable research archive. grep for work-log reference
variants is clean across the GUI packages.

docs(gui): file-header comments self-contained — drop RFC filename references

RFC renames/reorgs must not require a source sweep (the 2026-07-20
two-way merge proved it). 11 headers lose only the '(RFC …)' tail and
stay self-contained; api-proxy.ts keeps its minimal-first note.

fix(gui): session streaming — freeze interrupted partials, sweep stale running calls, send force-scrolls

Aborted turns never emit the finalizing assistant/message, so the
accumulated partial and its running tool cards kept rendering below
later messages — the "new message lands above the stopped reply"
illusion. turn/end side effects now freeze content-bearing partials
into interrupted terminal nodes (fractional seq keeps flow order; the
live freeze and history replay converge through applyEventSideEffects,
so a refresh reconstructs identical frozen nodes) and turn running tool
cards into interrupted terminal cards; only content-free partials are
swept outright. ConversationView gains the send-force-scroll rule (own
words must be visible) alongside the pre-update atBottom follow flag.
Regressions pinned as E2-4a–c (real host) and §E1-11h (fixture).

feat(gui): webserver hardening verify script

feat(gui): dark-mode toggle pinned to the sidebar bottom

Interim home before the Settings page exists (the button re-homes with
zero logic change — mechanics live in utils/theme.ts): html[data-theme]
flip + dsc.theme localStorage, stored choice wins over the OS
prefers-color-scheme default, applied in mount() before first paint so
a dark reload never flashes light. Moon/sun inline SVG icon button at
the sidebar's pinned bottom row. Pure front-end local concern: no RPC,
no Session/store involvement. Dark sweep of list/conversation/input
card/RPC panel found no unreadable pairs — no token changes needed.

docs(gui): GUI RFCs and web styling handbook

Layering+RPC protocol and web client architecture RFCs (post-reorg,
developer-facing polish folded in) plus the styling engineering
handbook. Mission work logs live in the commit above; PRs can be cut
from this commit to include formal docs only.

fix(gui): client object-layer hardening — audit timing/reference/resilience batches (S3-S5,C1-C3,C5-C8)

fix(gui): carrier error channel + webserver backpressure (audit A1-A5,A7-A10,R2,R5)

feat(gui): session persistence surface — cold list, project cwd, legacy no-cwd retirement

refactor: rename dsc CLI to dsh — apps/cli, bin name, package scope

Includes the root tsconfig project-references fix for host/* and
client/web-runtime (originally a separate build fix commit).

test(gui): three-tier suite — protocol/object/browser lanes, tier-a fill to per-file 100%

test(gui): jsdom lane for web-ui + web-runtime coverage gate entry

docs(gui): GUI testing system RFC (zh)

feat(gui): tool-card views — contract slot, host-computed delivery, three-level card fallback

fix(gui): lint clean across GUI packages — wrap long doc comments, drop dead type args, sync-return methods without awaits

docs(gui): doc-sync mechanical fixes — JSDoc on apiproxy/host exports, RFC sketch fences ignore-check, md-wrap paragraphs, drop missions links, web-ui plain-ts entry

chore(gui): module-graph regen + knip clean — drop dead re-exports, internalize createFixtureApi, scan web-ui tsx and verify mjs scripts

build(gui): wire client/host packages into the lib build shape — tsc references + tsdown (web-ui css-external), lib manifests, cordis peer, apiproxy typed subpaths, vite src aliases

test(gui): host-side per-file 100% coverage — apiproxy schema/carrier suites, webserver http-bridge suite, host-runtime composition suite; client/* coverage excluded pending the browser-side testing work item

docs(gui): package READMEs for the five GUI packages — model-experience audit entries, limitations sections

docs(gui): bilingual RFC pairs + client JSDoc completion — translate the three GUI RFCs to English with i18n records and manifest ratchet, Consequences sections both sides, full client/* export JSDoc, regen doc graphs and RFC index

fix(scripts): doc-typecheck built-declarations mode maps /src/* subpath wildcards (apiproxy browser-safe channels)

docs(gui): apply dsh rename across pr-gates docs — READMEs, layering RFC en, web-ui entry comment, i18n re-record

fix(gui): post-rebase lint reconciliation — wrap main-tree long doc comments, read-through narrowing guards, abortError Error normalization, handleUnary generic justification

fix(gui): post-rebase doc/test reconciliation — align host specs with evolved carrier contracts (sentinel rpcId, stream/error surfacing, url-path transport messages, defaults.cwd), Agent Note titles and relocated links, KV Cache effect sections, JSDoc on evolved exports

fix(gui): second-rebase reconciliation to 509db0cb3 — restore api panel exports the baseline suites consume, knip workspace entries for jsdom lane and apps/web smokes, hoist result narrowing, align testing.md to the narrowed web-ui exclusion

fix(test): vitest-scoped tsconfig maps bare imports for tsx specs — with GUI manifests now pointing at lib, an unmapped importer loaded a second copy of the web-runtime singletons

fix(gui): typecheck + lint clean over the tool-card batch — brand callIds and object-form turn/end reason in the view spec, narrow fixture arg stringification, wrap long v8-ignore comments

docs(gui): export JSDoc for tool-card surfaces + testing-note pairing header

docs: rfc for web testing

feat: add tools to host-runtime

fix(gui): dispatch agent/error via agentEvents in host-runtime spec — mounted invariants plugin rejects raw ctx.emit without the scope carrier

fix(gui): restore GUI knip workspaces + scripts/mjs entries and regenerate lockfile after master rebase

fix(gui): post-rebase gate repairs — drop context-node envelope (master unwrapped injected content envelopes), regen event matrix, condense testing.md web-ui exclusion within budget

fix(session): browser-safe deep-equal in surface — node:util import broke the vite bundle

ci(gates): frontend vite build joins pre-push — node: imports in the client closure pass tsc but break the browser bundle

test(tui): drop the checkout-dependent process.cwd() harness default — a long worktree path pushes the footer token counters past the 88-column fake terminal

test(gui): jsdom behavior E2E — conversation main path over fixture runtime, reconnect banner lifecycle

test(gui): jsdom RPC panel behavior — ledger rows, expand, pairing, pause/clear, follow-pause, payload truncation

test(gui): jsdom tier-2 — InputBar guards, reasoning fold, JSON blocks, message variants, theme, create-then-select; act-harden banner case

test(gui): jsdom tier-3 — ConversationView states/paging/force-bottom, ToolCallCard arms, PendingCard, list rows

test(gui): jsdom tails — view-card variants, LogRow directions, registry hygiene, badge overflow, hook ops, mount glue

test(gui): jsdom tails round 2 — call-ref blocks, resume follow, view precedence, failed create, empty-diff arm

test(gui): jsdom final arms — anchor compensation, follow-off, interval ticks, view halves, node-over-running precedence

test(gui): web-ui joins the per-file 100% coverage gate

Annotation-only src changes plus the config swap. The web-ui exclusion is
replaced by a single index.tsx entry (stale byte-identical duplicate of
mount.tsx, nothing imports it; same entry-glue treatment as bin.ts) and the
coverage include gains .tsx.

v8-ignore sites (each with its reason inline):
- ConversationView 3x ref-null guards; InputBar disabled-click guard
- ToolCallCard both-null arms + windowless-custom argsRaw arm
- LogRow css-module key fallbacks (start/stop block); RpcLogBody 3x ref-null guards
- web-runtime drift from the tool-card batch: fixture presenter catch/str
  typo-guards, dense-array guards (fold-adapter reset, session rebuild,
  fixture backscan), live view-present arm (fixture replays are text-only;
  view vocabulary is covered by the history samples)

test(gui): close the PR #443 host-side coverage gaps — apiproxy client abort arms, api-proxy cold/view paths, webserver drain

- apiproxy fetch/client.ts: 3 new cases (pre-aborted signal short-circuits
  before transport + string reason mapping, non-Error/string reason falls to
  the default AbortError message, signal-less doFetch passthrough)
- runtime/api-proxy.ts: one v8-ignore (summarizeCold cwd arm — list()
  filters cwd-less legacy metas) + api-proxy-cold.spec.ts (cold list merge:
  mtime source, locate-undefined and vanished-log fallbacks, lineage;
  no-persistence/no-factory resume → internal) + 2 view cases (history views
  with meta passthrough and orphan/bad-args/presenterless soft-falls,
  session/disposed open-call cleanup on the mux stream)
- webserver/index.ts: /api/big fixture drives both drain-wait legs (full
  8MiB readback after drain, mid-chunk disconnect wakes via 'close')

feat: app shell

fix: rebase conflicts

fix: coverage

fix(gui): lint clean after rebase — wrap long v8-ignore comments, unconditional v1 detail-block claim

chore(gui): remove browser/probe verify scripts from scripts/

The six GUI acceptance/probe scripts (carrier-errors, rpclog-panel,
session, session-real, webserver-backpressure, webserver-hardening)
leave the repo's scripts/ tree; the three code comments that pointed at
them now describe the coverage lane without naming a script path.

fix(webserver): guard the request callback — one malformed request must not kill the process

The async handle() had no top-level catch, so any throw inside it (a bad
%-escape reaching decodeURIComponent, a client dropping mid-body, a
response stream erroring) became an unhandled rejection and took the whole
process down (audit R1 must-fix). The guard answers 400 when headers are
not out yet, destroys the socket when they are, and reports the failure to
onError (the package never prints). Spec covers all three legs: %-escape
barrage → 400 + server stays alive, non-Error throw wrapped for onError,
mid-stream explosion → socket teardown.

feat: client AGENTS.md

fix: client/AGENTS.md

fix: rebase

feat(gui): T0 cut 1 — 12 client package skeletons with contract stubs, dshClient declarations, tsdown client preset, theme token sheets

feat(gui): T0 cut 2 — pure git mv migration per v3 §11 (connection six, runtime sessions/kernel, ui-conversation chat, ui-primitives markdown family, web shell + e2e)

feat(gui): T0 cuts 3+4 — import rewiring to new package names, .legacy demotion of owner-rewrite files, legacy web-runtime/web-ui/apps-web retired to attic

feat(gui): connection 对账刀——index.ts 精确导出清单替换 export *，intents.legacy 溶解删除

feat(client/ui-slots): SlotCore real implementation — kind semantics, sync version + microtask-batched notify, onMutate bridge

feat(gui): web shell vite alias — retarget to new client packages, shell static surface only

feat(gui): host 侧刀属地半——HostWebPluginRegistry（entries 扫描+internal/plugin 去抖重扫+dshClient 校验+exports./client 解析）、GET /plugins/<id>/client.js 分发端点、GET / 与 SPA fallback 注入 __DSH_BOOT__（webPlugins 可选注入，不传行为不变）

feat(web-react): add use-sync-external-store dep + local shim typings

feat(web-react): bindSnapshotSelector via uSES with-selector shim

feat(gui): ui-layout concession-chain solver — pure computeColumns with contract geometry

feat(gui): ui-layout LayoutService — four persisted stores, clamped actions, list-driven prune

feat(gui): ui-layout AppFrame styles — grid columns, collapse-safe borders, edge drag handles

test(gui): 存量 spec 平移——connection 三件+runtime 六件自 attic 捞回改包名路径全绿；api-helpers 按归属拆分（wire 半留 connection、classifier 半随 conversation.ts 入 runtime）；boot-intents/preinit/rpc-log 随 intents/rpc-log 退役不迁（记 v3 §3.2 溶解项）

feat(client/ui-primitives): StateDot/Button/Pill/Input/Menu atoms, ConnectionBanner de-legacied to pure props, JsonBlock CSS on --dsw tokens

feat(web-react): createSnapshotStore engine (rafFlush batch, persist opt-in, dev freeze) + spec

feat(gui): ui-layout AppFrame — grid tracks, pointer-capture drag handles with rAF throttle, frame ResizeObserver

feat(web-react): useInvoke (external pending store, stable invoke, concurrency count) + spec

test(web-react): bind spec — equality bail, custom eq, zero resubscribe, StrictMode, method sources

feat(gui): ui-layout index rewiring — real exports, client apply provides ctx.layout and defines three slots

feat(web-react): SessionProvider (renderBody deps) + RootBindingProvider + binding contexts + spec

feat(gui): web shell AppRoot boot-page styles — self-contained with neutral token fallbacks

feat(gui): web shell AppRoot — boot gate over loader status, fail-loud plugin failure list

fix(gui): AppRoot gates on explicit settled signal — status-derived readiness races the incrementally filled table

feat(client/ui-theme): ThemeService real implementation — registry with built-in light/dark, apply toggles body[data-ds-dark-theme], third-party token overrides as body inline vars

feat(web-react): scopedSlots outlet (kind matrix, inject WeakMap caches, per-entry error boundary) + spec

feat(gui): web shell module-table seed — pure-library entities for the loader require surface

feat(client/i18n): I18nService real implementation — ns×locale registry, stable bind(ns) reference, zh fallback chain, zh/en skeleton dictionaries

feat(gui): web shell assembly closure — layout exports via module table, SessionProvider + scopedSlots + RootBindingProvider

feat: client/ui-conversation

feat: code

codedoc

build(gui): root bundle green — web shell excluded from the lib workspace (vite app), ui-primitives lib externalizes css side-effect imports (web-ui precedent)

gates(gui): verify-cordis-config follows aggregate tsconfig references (root is a shell over host/client programs); module graph regenerated for the twelve client packages

chore(gui): retire legacy migration sources — every owner rewrite landed (t0-checklist §7 ledger honored); orphan css of retired components removed

gates(gui): knip green groundwork — e2e/tsx entries for the new packages, loader-runtime deps ignored where loading is by specifier string, fake plugin ids un-bare-named, dead test export dropped

chore(client): manifest shape batch A — ui-slots/web-react/ui-primitives invariant companions, files whitelist, cordis+invariants peer/dev, tsconfig refs

chore(client): manifest shape batch B — connection/runtime/ui-conversation/ui-trajectory files whitelist, cordis peer+dev, explicit invariant lib entries (clientBundle signature)

chore(client): manifest shape batch C — i18n/ui-layout/ui-sidebar/ui-theme invariant companions, files whitelist, invariants peer/dev, tsconfig refs

chore(client): manifest shape batch D — web shell gains node-half lib entry + invariant companion + uniform files whitelist

chore(client): drop verified-unused deps — dsh-tools from runtime/ui-conversation (types ride /presentation), ui-primitives+clsx from ui-layout

gates(gui): doc-gate fixes — theme JSDoc prose, three client type-link exemptions, agent-note paths follow the migration, config catalog regenerated

gates(gui): type-equiv manifest follows the types.ts extraction, approval JSDoc keeps its link form, persistence catalog regenerated

docs(gui): per-constant JSDoc on the contract geometry exports (export-jsdoc gate)

test(gates): loader-composition budget covers cold tsx resolution after the program split (was flaking at the default 5s)

docs(gui): README substantiation batch 1 — ui-slots/ui-primitives/web-react/connection: Model Experience short form, real deferred-work ledgers, description accuracy pass

fix(client): theme/i18n dual-entry split — service classes + cordis merges move to src/client (host catalog scanner no longer misclassifies client services), node halves keep types + empty apply; catalogs regenerated

docs(gui): README substantiation batch 2 — runtime/ui-layout/ui-sidebar/ui-conversation: Model Experience short form, package-owned deferred-work ledgers (unload stub, watch approximation, /client value-import rule, global details state, two-state dots, stats duration gap, single-bundle caches)

docs(gui): README substantiation batch 3 — ui-trajectory/ui-theme/i18n/web: Model Experience short form, deferred-work ledgers (placeholder charter, no theme toggle owner, empty locale dictionaries, one-shot rendering); both README gates green

test(scripts): purity spec adopts clientBundle two-arg signature (explicit libEntry, no default)

gates(gui): knip green — declaration-merge dep ignored, fake plugin id assembled at runtime, invariants dep de-duplicated to peer+dev, stale apps/web section dropped

feat(gui): 门禁波次 host 三包 invariant 形状——apiproxy explained-empty 伴生（wire 契约层零事件面）、webserver 真关系伴生（manifest 行必解析出 clientPath，防 __DSH_BOOT__ 广告 404 bundle；apps/cli 发布 webPlugins 键供审计）、runtime 补 files 白名单；三包 exports/files/peer+dev/tsconfig refs 齐 fw-react 形状；constraints+invariants 双 gate 零违规

build(client): ui-layout/ui-sidebar tsdown configs adopt the explicit two-arg clientBundle signature (orphaned follow-up of the manifest shape batch)

refactor(gui): shell boot becomes a library face — bootWebShell(el) exported for the apps/web entry; main.ts retired

refactor(gui): exports 纪律刀1——ui-theme/i18n node index 收敛为只空 apply（Translate/LocaleDict/ThemeTokens 类型下沉 src/client/），ui-conversation 的 I18nService import 改 /client 子路径

build(typecheck): converge to root host aggregate + tsconfig.client.json — delete tsconfig.host.json, verify-cordis-config seeds both aggregates

feat(gui): apps/web restored as the vite application — thin main over bootWebShell; dsh-client-web becomes a plain lib (index exports shell surface, vite files and e2e moved out)

chore(gates): knip.json rewritten on the master base — same semantics, minimal diff (formatting churn dropped)

docs(gui): 时效清扫②——testing.md 删 web-ui 覆盖豁免残句；web-styling.md 加 token 换代头注（--dsw-* 现行、工程约束条款仍有效并注明收编处）

docs(gui): 时效清扫③——四对 GUI Agent Note 加路径更新头注（web-runtime/web-ui/dsh-frontend→现行 12 包结构；设计结论存续声明；双语对同步）

docs(gui): 时效清扫③b——四对 note 头注的 i18n 配对哈希重录

build(typecheck): minimal-diff tsconfig shape — drop root files entry (purity spec + preset move to client program), compress comments, drop redundant util/home root ref

feat(gui): apps/web restoration follow-through — dsh-frontend package name, cli dist resolve, root build:web filter, tsdown exemption dropped, vitest web lane + knip + client aggregate retargeted, e2e paths rebased

refactor(gui): exports 纪律刀2——connection wire 六件 git mv 进 src/client/（wire 即该 dshClient 插件的 client 半），node index=只空 apply，/client 半边整面导出（v3 §3.2 清单原样），包内 tests 改 src/client 直取

refactor(gui): exports 纪律刀3——runtime 实现整体下沉 src/client/（sessions/slots/loader；契约类型与 cordis merge 随迁 client/index），node index=只空 apply；./loader exports 指 client/loader；全消费面（web 壳/ui-sidebar/ui-trajectory/tests）bare→/client 机械跟改；vitest.e2e 换 tsconfig.vitest paths（root tsconfig 排除 client 会把 /client import 掉到 exports 的浏览器 dist bundle）

refactor(gui): exports 纪律刀3 补遗——ui-layout 三处 bare runtime import 改 /client（刀3 消费面机械跟改漏提交件；跨属地机械一行×3 报备 ui-shell）

test(gui): drop the getSessionManager singleton case — the init/get pair is a dead legacy-boot surface with zero live consumers (SessionsService constructs and holds the manager under the plugin architecture); source removal tracked with rt-core

refactor(gui): 删 manager.ts 尾部 initSessionManager/getSessionManager 单例对——旧 boot 直连遗物，插件化下 SessionsService 构造持有 manager，全仓零活消费者（convo-b 测试清扫对表，其测试用例已先行退役 7e2c51898）；头注释同步去单例措辞

code

refactor

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

@@ -0,0 +1,185 @@
+/**
+ * Client plugin body: provide the conversation service and toolview registry,
+ * register the conversation/details slot occupants and the no-session empty
+ * state, and mount the chat view with its samples. Assembly only — components
+ * receive everything through inject factories; nothing here renders directly.
+ */
+import { createElement, Fragment, type ReactNode } from 'react'
+import type { Context } from 'cordis'
+import type { SessionBinding } from '@deepseek-ai/dsh-client-ui-slots'
+import { scopedSlots, shallowEqual } from '@deepseek-ai/dsh-client-web-react'
+import type { SnapshotSelectorHook, UseSession } from '@deepseek-ai/dsh-client-web-react'
+import type {
+  SessionId, SessionListState, SessionsService, SlotsService,
+} from '@deepseek-ai/dsh-client-runtime/client'
+import type { LayoutService } from '@deepseek-ai/dsh-client-ui-layout/client'
+import type { I18nService } from '@deepseek-ai/dsh-client-i18n/client'
+import type { ConvViewProps, SelectionTarget, ViewEntry, ViewId } from './contract/views.ts'
+import type { ConversationInjected, DetailsInjected, EmptyStateInjected } from './contract/slots.ts'
+import { ConversationService } from './service.ts'
+import { ToolViewRegistry } from './toolviews/registry.ts'
+import { childSessionScope, registerChat } from './chat/register.ts'
+import { registerBashSamples } from './toolviews/bash-sample.tsx'
+import { ConversationRoot } from './skeleton/ConversationRoot.tsx'
+import { DetailsPanel } from './skeleton/DetailsPanel.tsx'
+import { EmptyState } from './skeleton/EmptyState.tsx'
+
+/** Required services (cordis fiber inject — the loader passes the whole export surface as an object plugin). */
+export const inject = ['slots', 'layout', 'sessions', 'i18n']
+
+/** Resolve a service via ctx.get, failing loud. Property access is reserved
+ *  for contexts whose fiber declares the inject (scope fibers do not). */
+// T is the caller-named cast target; inlining `as T` per call site would scatter the budgeted cast.
+// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-parameters
+function need<T>(ctx: Context, name: string): T {
+  const value = ctx.get(name) as T | undefined
+  if (value === undefined) throw new Error(`ui-conversation: ${name} service unavailable`)
+  return value
+}
+
+/** Per-list-state cwd set (deduped, list order) for the empty-state picker. */
+const cwdsCache = new WeakMap<SessionListState, readonly string[]>()
+function cwdsOf(state: SessionListState): readonly string[] {
+  let cached = cwdsCache.get(state)
+  if (cached === undefined) {
+    const seen = new Set<string>()
+    for (const id of state.ids) {
+      const cwd = state.byId[id]?.cwd
+      if (cwd !== undefined && cwd !== '') seen.add(cwd)
+    }
+    cached = [...seen]
+    cwdsCache.set(state, cached)
+  }
+  return cached
+}
+
+/**
+ * Client plugin body.
+ * @param ctx - client root context.
+ */
+export function apply(ctx: Context): void {
+  const sessions = need<SessionsService>(ctx, 'sessions')
+  const layout = need<LayoutService>(ctx, 'layout')
+  const i18n = need<I18nService>(ctx, 'i18n')
+  const slots = need<SlotsService>(ctx, 'slots')
+
+  const conversation = new ConversationService(ctx)
+  const toolviews = new ToolViewRegistry()
+  ctx.provide('toolviews', toolviews)
+
+  const t = i18n.bind('conversation')
+  // Chat view + StatsLine footer; bash samples assembled here (apply is the
+  // only cross-domain point — chat consumes the resolver face, samples come
+  // from the toolviews domain). registerView inside registerChat is already
+  // effect-scoped; the raw sample registrations need the effect wrapper to
+  // ride the fiber cascade.
+  ctx.effect(
+    () => registerChat({ conversation, toolviews, t }),
+    'ui-conversation: chat view')
+  ctx.effect(
+    () => registerBashSamples(toolviews, childSessionScope(sessions.list)),
+    'ui-conversation: bash toolview samples')
+
+  // ConvViewProps.slots is ScopedSlots<never>: a real outlet with an empty
+  // whitelist (uncallable by type, correct runtime shape for future grants).
+  const emptySlots = scopedSlots<never>(slots.core)
+
+  /** conversation slot: skeleton surface assembled once per (entry x session). */
+  const conversationInject = (b: SessionBinding): ConversationInjected => {
+    const bctx = b.ctx as Context
+    const scoped = need<ConversationService>(bctx, 'conversation')
+    const id = b.sessionId as SessionId
+    const useSession = b.session.useSelector as UseSession
+    const selectionStore = scoped.selection
+    const draftsStore = scoped.drafts
+    const session = sessions.manager.get(id)
+    // Watch-driven history pull: assembling the surface IS the watch signal
+    // (once per entry x session; open() is idempotent and self-recovers).
+    void session.open()
+
+    const viewProps: Omit<ConvViewProps, 'slots'> = {
+      sessionId: id,
+      useSession,
+      useSelection: selectionStore.useSelector,
+      actions: {
+        openDetails: (target: SelectionTarget) => { scoped.openDetails(target) },
+        loadOlder: () => { void session.loadOlder() },
+      },
+    }
+
+    const injected: ConversationInjected = {
+      useAncestry: () => sessions.list.useSelector(
+        () => sessions.ancestry(id),
+        (a, b) => shallowEqual(a, b)),
+      views: {
+        list: () => conversation.views(),
+        subscribe: fn => conversation.subscribeViews(fn),
+        version: () => conversation.viewsVersion(),
+      },
+      // layout's viewFor value type is its own looser ViewId; the registry is
+      // the runtime validator (unknown ids fall back to the first view).
+      useActiveView: () => layout.current.useSelector(s => s.viewFor[id]) as ViewId | undefined,
+      composer: {
+        useDraft: () => draftsStore.useSelector(s => s),
+        setDraft: (text) => { draftsStore.set(text) },
+        send: (mode) => {
+          const text = draftsStore.getSnapshot().trim()
+          if (text === '') return
+          // Optimistic clear with failure restore (choreography lives with the
+          // sender; the business failure also lands in snapshot.promptError).
+          draftsStore.set('')
+          void scoped.send(text, mode).catch(() => {
+            if (draftsStore.getSnapshot() === '') draftsStore.set(text)
+          })
+        },
+        stop: () => {
+          scoped.cancel().catch(() => {
+            // Stop failure surfaces via snapshot.promptError; nothing to restore.
+          })
+        },
+      },
+      actions: {
+        openView: (view: ViewId) => { layout.openView(id, view) },
+        open: (target: SessionId) => { layout.open(target) },
+      },
+      renderView: (entry: ViewEntry): ReactNode => {
+        const children: ReactNode[] = []
+        if (entry.chrome?.header !== undefined) {
+          children.push(createElement(entry.chrome.header, { key: 'header', sessionId: id, useSession }))
+        }
+        children.push(createElement(entry.component, { key: 'view', ...viewProps, slots: emptySlots }))
+        if (entry.chrome?.footer !== undefined) {
+          children.push(createElement(entry.chrome.footer, { key: 'footer', sessionId: id, useSession }))
+        }
+        return createElement(Fragment, null, ...children)
+      },
+    }
+    return injected
+  }
+
+  /** details slot: minimal selection-driven panel. */
+  const detailsInject = (b: SessionBinding): DetailsInjected => {
+    const bctx = b.ctx as Context
+    const scoped = need<ConversationService>(bctx, 'conversation')
+    const injected: DetailsInjected = {
+      useSelection: scoped.selection.useSelector,
+      actions: { closeDetails: () => { layout.closeDetails() } },
+    }
+    return injected
+  }
+
+  /** conversation.empty root slot: the NEW SESSION hero. */
+  const emptyInject = (): EmptyStateInjected => {
+    const useCwds: SnapshotSelectorHook<readonly string[]> = (sel, eq) =>
+      sessions.list.useSelector(s => sel(cwdsOf(s)), eq)
+    const injected: EmptyStateInjected = {
+      useCwds,
+      actions: { startSession: opts => conversation.startSession(opts) },
+    }
+    return injected
+  }
+
+  slots.register('conversation', ConversationRoot, { inject: conversationInject })
+  slots.register('details', DetailsPanel, { inject: detailsInject })
+  slots.register('conversation.empty', EmptyState, { inject: emptyInject })
+}

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

@@ -0,0 +1,33 @@
+/* Assistant flow body: full-width narration (figma 16/28), block gap 16. */
+
+.root {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  font-size: 16px;
+  line-height: 28px;
+  color: var(--dsw-alias-label-primary);
+}
+
+.pulse {
+  display: inline-block;
+  width: 8px;
+  height: 14px;
+  background: var(--dsw-alias-state-business-primary);
+  animation: pulse 1s infinite ease-in-out;
+}
+
+@keyframes pulse {
+  50% { opacity: 0.2; }
+}
+
+/* Interrupted-turn terminal marker: quiet inline tag, no animation. */
+.stopped {
+  align-self: flex-start;
+  padding: 0 6px;
+  border-radius: 6px;
+  background: var(--dsw-alias-interactive-bg-hover);
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 11px;
+  line-height: 18px;
+}

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

@@ -0,0 +1,56 @@
+// AssistantMarkdown: renders assistant blocks in order — markdown text body,
+// reasoning as the figma Think summary row (expand = indented gray text),
+// other-block JSON fallback. Tool-call heads are NOT rendered here: the chat
+// view groups them into tool rows via the toolview outlet (figma step-summary
+// flow). Shared by finalized nodes and the streaming partial (pulse marker).
+
+import { memo } from 'react'
+import type { AssistantBlock } from '@deepseek-ai/dsh-client-runtime/client'
+import { IconThinkOutline14, JsonBlock, MessageText } from '@deepseek-ai/dsh-client-ui-primitives'
+import { ToolRow } from './ToolRow.tsx'
+import css from './AssistantMarkdown.module.css'
+
+export interface AssistantMarkdownProps {
+  blocks: readonly AssistantBlock[]
+  streaming: boolean
+  /** Frozen partial of an aborted turn: rendered with a 已停止 marker, no pulse. */
+  interrupted?: boolean | undefined
+}
+
+function firstLine(text: string): string {
+  const nl = text.indexOf('\n')
+  return nl === -1 ? text : text.slice(0, nl)
+}
+
+/** Reasoning block as the Think variant summary row (figma 39:28304). */
+function ThinkRow({ text, running }: { text: string; running: boolean }) {
+  return (
+    <ToolRow
+      variant="think"
+      icon={<IconThinkOutline14 />}
+      title="Think"
+      summary={firstLine(text)}
+      body={text}
+      state={running ? 'running' : 'ok'}
+    />
+  )
+}
+
+export const AssistantMarkdown = memo(function AssistantMarkdown({ blocks, streaming, interrupted }: AssistantMarkdownProps) {
+  const last = blocks.length - 1
+  return (
+    <div className={css.root} data-streaming={streaming || undefined}>
+      {blocks.map((block, i) => {
+        switch (block.kind) {
+          case 'text': return <MessageText key={i} text={block.text} />
+          case 'reasoning': return <ThinkRow key={i} text={block.text} running={streaming && i === last} />
+          // Tool-call heads render as tool rows in the chat view's grouping pass.
+          case 'tool-call': return null
+          default: return <JsonBlock key={i} label="未知内容块" payload={block.block} />
+        }
+      })}
+      {streaming && <span className={css.pulse} />}
+      {interrupted && <span className={css.stopped}>已停止</span>}
+    </div>
+  )
+})

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

@@ -0,0 +1,101 @@
+/* Chat flow: block gap 16 between narration/bubbles/tool groups (figma);
+   tool rows inside a group gap 10. Input padding cap rides the skeleton. */
+
+.root {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  flex: 1 1 auto;
+}
+
+.scroll {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 16px 24px;
+}
+
+/* Message column: 736px fixed width, centered on the same axis as the
+   input box; the scroller itself stays full-bleed. */
+.column {
+  max-width: 736px;
+  width: 100%;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.toolGroup {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.callRow {
+  border-radius: 6px;
+}
+
+/* Selection linkage: the selected call row wears the blue outline.
+   button-info-fill flips 500→400 with the theme, hitting the darker-blue
+   dark-mode spec exactly (business-primary stays 500 on both). */
+.callRow[data-selected] {
+  outline: 1.5px solid var(--dsw-alias-button-info-fill);
+  outline-offset: 1px;
+}
+
+.hint {
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.openError {
+  color: var(--dsw-alias-state-error-primary);
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.older {
+  display: flex;
+  justify-content: center;
+}
+
+.older button {
+  border: none;
+  border-radius: 14px;
+  padding: 4px 12px;
+  font-size: 12px;
+  color: var(--dsw-alias-label-secondary);
+  background: var(--dsw-alias-interactive-bg-hover-solid);
+  cursor: pointer;
+}
+
+.older button:disabled {
+  cursor: default;
+  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));
+  bottom: 16px;
+  width: 34px;
+  height: 34px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 100px;
+  color: var(--dsw-alias-label-primary);
+  background: var(--dsw-alias-button-floating-fill);
+  box-shadow: var(--dsw-shadow-lv2);
+  cursor: pointer;
+}
+
+.toBottom:hover {
+  background: var(--dsw-alias-button-floating-hover);
+}

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

@@ -0,0 +1,293 @@
+// ChatView: the default conversation view — message flow with user bubbles,
+// assistant narration, tool summary rows grouped into step runs, pending
+// cards, paging and bottom-follow. Created via factory so plugin deps
+// (toolviews registry, i18n) arrive by closure, never by import.
+//
+// Render economics (architecture RFC performance model): the list parent
+// subscribes to snapshot segments that do NOT change per streaming chunk
+// (nodes/runningCalls/pending keep their references across chunk batches), so
+// during a token storm only StreamingTail re-renders; history rows hold via
+// memo on cache-stable node slices. Selection changes re-render the parent
+// map but only rows whose own selected bit flipped.
+
+import {
+  memo, useLayoutEffect, useMemo, useRef, useState, type FC, type ReactNode,
+} from 'react'
+import type {
+  ConversationNode, ConversationSnapshot, RunningToolCall, SessionId, ToolResultNode,
+} from '@deepseek-ai/dsh-client-runtime/client'
+import type { SnapshotSelectorHook } from '@deepseek-ai/dsh-client-web-react'
+import { IconChevronDownOutline14 } from '@deepseek-ai/dsh-client-ui-primitives'
+import type { ConvViewProps, SelectionTarget, Translate } from '../contract/views.ts'
+import type { ToolViewProps } from '../contract/toolview.ts'
+import type { ToolViewResolver } from '../contract/toolview.ts'
+import { deriveChatFlow, type ChatFlowItem } from './chat-flow.ts'
+import { AssistantMarkdown } from './AssistantMarkdown.tsx'
+import { MessageItem } from './MessageItem.tsx'
+import { PendingCard } from './PendingCard.tsx'
+import { ToolViewOutlet } from './ToolViewOutlet.tsx'
+import css from './ChatView.module.css'
+
+/** Plugin-supplied closure deps (assembled in registerChat, apply world). */
+export interface ChatViewDeps {
+  toolviews: ToolViewResolver
+  t: Translate
+}
+
+const FOLLOW_THRESHOLD = 24
+
+type OpenDetails = (target: SelectionTarget) => void
+
+/** web-react's UseSession is deliberately wide (dependency direction); the
+ *  chat view narrows once to the runtime snapshot the binding actually feeds. */
+type UseConversation = SnapshotSelectorHook<ConversationSnapshot>
+
+/** One tool call row (result or running): builds the bound ToolViewProps. */
+const CallRow = memo(function CallRow({ registry, sessionId, useSession, t, callId, toolName, block, seq, onOpenDetails, selected }: {
+  registry: ToolViewResolver
+  sessionId: SessionId
+  useSession: ConvViewProps['useSession']
+  t: Translate
+  callId: string
+  toolName: string
+  block: ToolResultNode | RunningToolCall
+  /** Surface seq for finalized results; the call's turn for running calls. */
+  seq: number
+  onOpenDetails: OpenDetails
+  selected: boolean
+}) {
+  const viewProps = useMemo<ToolViewProps>(() => ({
+    callId, toolName, block, useSession,
+    actions: { openDetails: () => onOpenDetails({ turnSeq: seq, callId, toolName }) },
+    t,
+  }), [callId, toolName, block, useSession, seq, onOpenDetails, t])
+  return (
+    <div className={css.callRow} data-selected={selected || undefined}>
+      <ToolViewOutlet registry={registry} sessionId={sessionId} toolName={toolName} viewProps={viewProps} />
+    </div>
+  )
+})
+
+/** Consecutive tool results as one step-run group (figma VERTICAL gap10). */
+const ToolGroup = memo(function ToolGroup({ registry, sessionId, useSession, t, results, onOpenDetails, selectedCallId }: {
+  registry: ToolViewResolver
+  sessionId: SessionId
+  useSession: ConvViewProps['useSession']
+  t: Translate
+  results: readonly ToolResultNode[]
+  onOpenDetails: OpenDetails
+  /** Only set when the selected call lives in THIS group (memo economy). */
+  selectedCallId: string | undefined
+}) {
+  return (
+    <div className={css.toolGroup}>
+      {results.map((node) => (
+        <CallRow
+          key={node.callId}
+          registry={registry}
+          sessionId={sessionId}
+          useSession={useSession}
+          t={t}
+          callId={node.callId}
+          toolName={node.call?.name ?? ''}
+          block={node}
+          seq={node.seq}
+          onOpenDetails={onOpenDetails}
+          selected={node.callId === selectedCallId}
+        />
+      ))}
+    </div>
+  )
+})
+
+/** The streaming partial, isolated so chunk batches re-render only this tail.
+ *  onGrow lets the scroll owner follow content the parent never re-renders for. */
+function StreamingTail({ useSession, onGrow }: {
+  useSession: UseConversation
+  onGrow: () => void
+}) {
+  const partial = useSession((s) => s.partial)
+  useLayoutEffect(() => {
+    onGrow()
+  })
+  if (partial === null) return null
+  return <AssistantMarkdown blocks={partial.blocks} streaming />
+}
+
+/**
+ * Build the chat view component over plugin deps.
+ * @param deps - toolview registry and bound translator.
+ * @returns the ConvViewProps component registered as the chat view.
+ */
+export function createChatView(deps: ChatViewDeps): FC<ConvViewProps> {
+  const { toolviews, t } = deps
+
+  return function ChatView({ sessionId, useSession: useSessionWide, useSelection, actions }: ConvViewProps) {
+    const useSession = useSessionWide as UseConversation
+    const nodes = useSession((s) => s.nodes)
+    const runningCalls = useSession((s) => s.runningCalls)
+    const pending = useSession((s) => s.pending)
+    const openState = useSession((s) => s.openState)
+    const openErrorMessage = useSession((s) => s.openError === null ? null : `${s.openError.message}（${s.openError.code}）`)
+    const hasMore = useSession((s) => s.hasMore)
+    const loadingOlder = useSession((s) => s.loadingOlder)
+    const selectedCallId = useSelection((sel) => sel?.callId)
+
+    const items = useMemo(() => deriveChatFlow(nodes), [nodes])
+
+    const listRef = useRef<HTMLDivElement | null>(null)
+    const atBottomRef = useRef(true)
+    const [atBottom, setAtBottom] = useState(true)
+    /** Paging anchor: height/position at click, compensated after the prepend lands. */
+    const anchorRef = useRef<{ h: number; t: number } | null>(null)
+    const firstSeqRef = useRef<number | null>(null)
+    const openedRef = useRef(false)
+    const lastKeyRef = useRef<string | null>(null)
+
+    const firstSeq = nodes[0]?.seq ?? null
+    const lastItem = items[items.length - 1]
+
+    const toBottom = (el: HTMLDivElement): void => {
+      el.scrollTop = el.scrollHeight
+      atBottomRef.current = true
+      setAtBottom(true)
+    }
+
+    useLayoutEffect(() => {
+      const el = listRef.current
+      /* v8 ignore next -- ref-null guard: React attaches the ref before layout effects run. */
+      if (el === null) return
+      // 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
+        return
+      }
+      // Prepend (head seq decreased): compensate by the height delta.
+      if (anchorRef.current !== null && firstSeq !== null && firstSeqRef.current !== null && firstSeq < firstSeqRef.current) {
+        el.scrollTop = anchorRef.current.t + (el.scrollHeight - anchorRef.current.h)
+        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
+        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'
+      lastKeyRef.current = lastKey
+      if (appendedUser || 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 isAtBottom = el.scrollHeight - el.scrollTop - el.clientHeight <= FOLLOW_THRESHOLD + 1
+      atBottomRef.current = isAtBottom
+      setAtBottom(isAtBottom)
+    }
+
+    // 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 onGrow = useRef(() => followRef.current?.()).current
+
+    const loadOlder = (): void => {
+      const el = 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 }
+      actions.loadOlder()
+    }
+
+    const renderItem = (item: ChatFlowItem): ReactNode => {
+      if (item.kind === 'tool-group') {
+        const inGroup = selectedCallId !== undefined
+          && item.results.some((r) => r.callId === selectedCallId)
+        return (
+          <ToolGroup
+            key={item.key}
+            registry={toolviews}
+            sessionId={sessionId}
+            useSession={useSession}
+            t={t}
+            results={item.results}
+            onOpenDetails={actions.openDetails}
+            selectedCallId={inGroup ? selectedCallId : undefined}
+          />
+        )
+      }
+      const node: ConversationNode = item.node
+      if (node.kind === 'assistant') {
+        return <AssistantMarkdown key={item.key} blocks={node.blocks} streaming={false} interrupted={node.interrupted} />
+      }
+      /* v8 ignore next -- tool-result never reaches here: deriveChatFlow folds them into groups. */
+      if (node.kind === 'tool-result') return null
+      return <MessageItem key={item.key} node={node} />
+    }
+
+    return (
+      <div className={css.root}>
+        <div ref={listRef} className={css.scroll} onScroll={onScroll}>
+          <div className={css.column}>
+          {openState === 'loading' && <div className={css.hint}>载入历史…</div>}
+          {openState === 'error' && <div className={css.openError}>历史加载失败：{openErrorMessage}</div>}
+          {hasMore && (
+            <div className={css.older}>
+              <button type="button" disabled={loadingOlder} onClick={loadOlder}>
+                {loadingOlder ? '加载中…' : '加载更早'}
+              </button>
+            </div>
+          )}
+          {items.map(renderItem)}
+          <StreamingTail useSession={useSession} onGrow={onGrow} />
+          {runningCalls.length > 0 && (
+            <div className={css.toolGroup}>
+              {runningCalls.map((call) => (
+                <CallRow
+                  key={call.callId}
+                  registry={toolviews}
+                  sessionId={sessionId}
+                  useSession={useSession}
+                  t={t}
+                  callId={call.callId}
+                  toolName={call.name}
+                  block={call}
+                  seq={call.turn}
+                  onOpenDetails={actions.openDetails}
+                  selected={call.callId === selectedCallId}
+                />
+              ))}
+            </div>
+          )}
+          {pending.map((item) => <PendingCard key={item.rpcId} item={item} />)}
+          </div>
+        </div>
+        {!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/GenericToolCard.tsx

@@ -0,0 +1,36 @@
+// GenericToolCard: the registry-miss fallback toolview — classifies the tool
+// into one of the five figma row variants and renders the summary row. Also
+// the shared base the bash sample builds on: any ToolViewProps consumer.
+
+import type { ReactNode } from 'react'
+import {
+  IconApiOutline14, IconBrowseOutline16, IconSearchOutline16, IconThinkOutline14,
+} from '@deepseek-ai/dsh-client-ui-primitives'
+import type { ToolViewProps } from '../contract/toolview.ts'
+import { toolRowModel, type ToolCallBlock, type ToolRowVariant } from '../contract/tool-call-model.ts'
+import { ToolRow } from './ToolRow.tsx'
+import { IconSparkle16 } from './IconSparkle16.tsx'
+
+/** Variant leading icons (figma table). */
+const VARIANT_ICONS: Record<ToolRowVariant, ReactNode> = {
+  think: <IconThinkOutline14 />,
+  search: <IconSearchOutline16 />,
+  read: <IconBrowseOutline16 />,
+  bash: <IconApiOutline14 size={16} />,
+  others: <IconSparkle16 />,
+}
+
+export function GenericToolCard({ toolName, block, actions }: ToolViewProps) {
+  const model = toolRowModel(toolName, block as ToolCallBlock)
+  return (
+    <ToolRow
+      variant={model.variant}
+      icon={VARIANT_ICONS[model.variant]}
+      title={model.title}
+      summary={model.summary}
+      body={model.body}
+      state={model.state}
+      onOpenDetails={actions.openDetails}
+    />
+  )
+}

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

@@ -0,0 +1,15 @@
+// Local sparkle icon for the Others tool-row variant (figma 43:31850 leading
+// glyph is an SF Symbols "sparkles" text glyph — not extractable as vector
+// data, so this is a hand-authored three-star approximation). Lives here
+// rather than ui-primitives until the exact glyph is exported and adopted
+// into the ic_ds_* family.
+
+export function IconSparkle16({ size = 16, className }: { size?: number; className?: string }) {
+  return (
+    <svg width={size} height={size} className={className} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M6.1 3.1Q6.6 7.8 11.3 8.3Q6.6 8.8 6.1 13.5Q5.6 8.8 0.9 8.3Q5.6 7.8 6.1 3.1Z" fill="currentColor" />
+      <path d="M11.9 1Q12.2 3.7 14.9 4Q12.2 4.3 11.9 7Q11.6 4.3 8.9 4Q11.6 3.7 11.9 1Z" fill="currentColor" />
+      <path d="M12.5 9.4Q12.7 11.4 14.7 11.6Q12.7 11.8 12.5 13.8Q12.3 11.8 10.3 11.6Q12.3 11.4 12.5 9.4Z" fill="currentColor" />
+    </svg>
+  )
+}

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

@@ -0,0 +1,34 @@
+/* User bubble: right-aligned, figma r22 fill = the bubble specific token
+   (#EDF3FE light / dark pair rides the token sheet). */
+
+/* Block spacing is the flow column's gap alone — no extra padding here. */
+.userRow {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.bubble {
+  /* 525px cap inside the 736 column; percentage keeps narrow windows sane. */
+  max-width: min(525px, 82%);
+  background: var(--dsw-specific-bubble);
+  border-radius: 22px;
+  /* 44px single-line bubble: 24 line + 10 vertical padding each side. */
+  padding: 10px 16px;
+  font-size: 16px;
+  line-height: 24px;
+  color: var(--dsw-alias-label-primary);
+}
+
+.badge {
+  display: inline-block;
+  margin-bottom: 4px;
+  padding: 1px 6px;
+  border-radius: 6px;
+  background: var(--dsw-alias-state-warn-primary);
+  color: var(--dsw-alias-label-primary-foreground);
+  font-size: 11px;
+}
+
+.contextRow {
+  padding: 2px 0;
+}

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

@@ -0,0 +1,56 @@
+// MessageItem: the four simple node kinds — user bubble (right-aligned),
+// steering (badged bubble), context injection and unknown-surface JSON rows.
+// Props are frozen node slices off the snapshot cache; memo holds across
+// streaming because unchanged nodes keep their references.
+
+import { memo } from 'react'
+import type {
+  ContextMessageNode, SteeringMessageNode, UnknownSurfaceNode, UserMessageNode,
+} from '@deepseek-ai/dsh-client-runtime/client'
+import { JsonBlock, MessageText } from '@deepseek-ai/dsh-client-ui-primitives'
+import css from './MessageItem.module.css'
+
+export interface MessageItemProps {
+  node: UserMessageNode | SteeringMessageNode | ContextMessageNode | UnknownSurfaceNode
+}
+
+function contentText(content: readonly unknown[]): { text: string; rest: unknown[] } {
+  const texts: string[] = []
+  const rest: unknown[] = []
+  for (const block of content) {
+    const b = block as { type?: string; text?: string }
+    if (b.type === 'text' && typeof b.text === 'string') texts.push(b.text)
+    else rest.push(block)
+  }
+  return { text: texts.join(''), rest }
+}
+
+export const MessageItem = memo(function MessageItem({ node }: MessageItemProps) {
+  switch (node.kind) {
+    case 'user':
+    case 'steering': {
+      const { text, rest } = contentText(node.content)
+      return (
+        <div className={css.userRow}>
+          <div className={css.bubble}>
+            {node.kind === 'steering' && <span className={css.badge}>插话</span>}
+            <MessageText text={text} />
+            {rest.map((block, i) => <JsonBlock key={i} label="附加内容块" payload={block} />)}
+          </div>
+        </div>
+      )
+    }
+    case 'context':
+      return (
+        <div className={css.contextRow}>
+          <JsonBlock label="上下文注入" payload={{ content: node.content, meta: node.meta }} />
+        </div>
+      )
+    default:
+      return (
+        <div className={css.contextRow}>
+          <JsonBlock label={`未知 surface 事件：${node.type}`} payload={node.data} />
+        </div>
+      )
+  }
+})

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

@@ -0,0 +1,31 @@
+/* Amber pending strip (approval waiting = warn semantic, figma state colors). */
+
+.card {
+  margin: 6px 0;
+  padding: 8px 12px;
+  border: 1px solid var(--dsw-alias-state-warn-secondary);
+  border-radius: 10px;
+  background: var(--dsw-alias-state-warn-tertiary);
+}
+
+.title {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--dsw-alias-label-primary);
+}
+
+.mono {
+  font-family: var(--ds-font-family-code);
+}
+
+.reason {
+  margin-top: 4px;
+  font-size: 12px;
+  color: var(--dsw-alias-label-secondary);
+}
+
+.hint {
+  margin-top: 6px;
+  font-size: 11px;
+  color: var(--dsw-alias-label-tertiary);
+}

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

@@ -0,0 +1,31 @@
+// PendingCard: approval/question placeholder card (visible, not answerable —
+// the composer-takeover approval panel is a P-II item; wire pending semantics
+// already exist so the flow must show them).
+
+import { memo } from 'react'
+import type { PendingInteraction } from '@deepseek-ai/dsh-client-runtime/client'
+import { JsonBlock } from '@deepseek-ai/dsh-client-ui-primitives'
+import css from './PendingCard.module.css'
+
+export interface PendingCardProps {
+  item: PendingInteraction
+}
+
+export const PendingCard = memo(function PendingCard({ item }: PendingCardProps) {
+  return (
+    <div className={css.card}>
+      {item.kind === 'approval' ? (
+        <>
+          <div className={css.title}>等待审批：<span className={css.mono}>{item.toolName}</span></div>
+          {item.reason !== undefined && <div className={css.reason}>{item.reason}</div>}
+        </>
+      ) : (
+        <>
+          <div className={css.title}>等待回答（{item.questions.length} 题）</div>
+          <JsonBlock label="问题内容" payload={item.questions} />
+        </>
+      )}
+      <div className={css.hint}>请在原客户端处理（web 端作答后续里程碑提供）</div>
+    </div>
+  )
+})

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

@@ -0,0 +1,13 @@
+/* Session stats row: 12/20 tertiary text under the flow, aligned to the
+   736px message column axis. */
+
+.root {
+  max-width: 736px;
+  width: 100%;
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 4px 24px 8px;
+  font-size: 12px;
+  line-height: 20px;
+  color: var(--dsw-alias-label-tertiary);
+}

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

@@ -0,0 +1,68 @@
+// StatsLine: the session stats row (figma 122:11212 "cache hit 92% · 1,284
+// tokens · 45.2s · 5 turns · 32 steps"), mounted as the chat view's
+// chrome.footer — the first chrome-attachment consumer. Duration has no data
+// source in P-I (ledger). Subscribes to `nodes` only: chunk batches never swap
+// that reference, so the row renders zero times during streaming (the RFC
+// performance model's acceptance row).
+
+import { memo, useMemo } from 'react'
+import type { ConversationSnapshot } from '@deepseek-ai/dsh-client-runtime/client'
+import type { SnapshotSelectorHook } from '@deepseek-ai/dsh-client-web-react'
+import type { ChromeProps } from '../contract/views.ts'
+import css from './StatsLine.module.css'
+
+interface UsageTotals {
+  turns: number
+  steps: number
+  tokens: number
+  cacheHitPct: number | null
+}
+
+/** Token accounting slice of assistant `usage` (typed upstream as unknown). */
+interface UsageLike {
+  inputTokens?: number
+  outputTokens?: number
+  cacheReadTokens?: number
+}
+
+/**
+ * Fold assistant nodes into display totals.
+ * @param nodes - snapshot nodes.
+ * @returns totals; cacheHitPct null until any cache accounting arrives.
+ */
+export function deriveStats(nodes: ConversationSnapshot['nodes']): UsageTotals {
+  const turns = new Set<number>()
+  let steps = 0
+  let tokens = 0
+  let input = 0
+  let cacheRead = 0
+  for (const node of nodes) {
+    if (node.kind !== 'assistant') continue
+    turns.add(node.turn)
+    steps += 1
+    const usage = node.usage as UsageLike | undefined
+    if (usage === undefined) continue
+    input += usage.inputTokens ?? 0
+    cacheRead += usage.cacheReadTokens ?? 0
+    tokens += (usage.inputTokens ?? 0) + (usage.outputTokens ?? 0) + (usage.cacheReadTokens ?? 0)
+  }
+  const denom = input + cacheRead
+  return {
+    turns: turns.size,
+    steps,
+    tokens,
+    cacheHitPct: denom === 0 ? null : Math.round((cacheRead / denom) * 100),
+  }
+}
+
+export const StatsLine = memo(function StatsLine({ useSession }: ChromeProps) {
+  const nodes = (useSession as SnapshotSelectorHook<ConversationSnapshot>)((s) => s.nodes)
+  const stats = useMemo(() => deriveStats(nodes), [nodes])
+  if (stats.steps === 0) return null
+  const parts: string[] = []
+  if (stats.cacheHitPct !== null) parts.push(`cache hit ${stats.cacheHitPct}%`)
+  parts.push(`${stats.tokens.toLocaleString('en-US')} tokens`)
+  parts.push(`${stats.turns} turns`)
+  parts.push(`${stats.steps} steps`)
+  return <div className={css.root}>{parts.join(' · ')}</div>
+})

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

@@ -0,0 +1,88 @@
+/* Tool summary row (figma 122:9479): 24px single line —
+   [16 leading] gap6 [title 14/24] gap8 [2x2 dot] gap8 [summary FILL truncate]. */
+
+.root {
+  display: flex;
+  flex-direction: column;
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  height: 24px;
+  min-width: 0;
+}
+
+.row[data-clickable] {
+  cursor: pointer;
+  border-radius: 6px;
+}
+
+.row[data-clickable]:hover {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.leading {
+  flex: none;
+  width: 16px;
+  height: 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 6px;
+  padding: 0;
+  border: none;
+  background: none;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+/* The others-variant sparkle glyph is one gray step darker than the icon
+   family in the source design. */
+.root[data-variant='others'] .leading {
+  color: var(--dsw-alias-label-secondary);
+}
+
+button.leading {
+  cursor: pointer;
+}
+
+.chevron {
+  color: var(--dsw-alias-label-secondary);
+}
+
+.title {
+  flex: none;
+  font-size: 14px;
+  line-height: 24px;
+  color: var(--dsw-alias-label-primary-dimmed);
+}
+
+.sep {
+  flex: none;
+  width: 2px;
+  height: 2px;
+  border-radius: 1px;
+  margin: 0 8px;
+  background: var(--dsw-alias-label-caption);
+}
+
+.summary {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 14px;
+  line-height: 24px;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+/* Expanded body: pad-left 22 indented gray text, no border, no fill. */
+.body {
+  padding: 4px 0 4px 22px;
+  font-size: 14px;
+  line-height: 24px;
+  white-space: pre-wrap;
+  word-break: break-word;
+  color: var(--dsw-alias-label-tertiary);
+}

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

@@ -0,0 +1,75 @@
+// ToolRow: the single-line tool summary row (figma component set 122:9479) —
+// 16px leading slot (state dot / tool icon, chevron when expanded) + title +
+// separator dot + FILL-truncated summary. Expanded body is indented gray text;
+// no inline output (full results live in the details panel). Expand state is
+// component-local view state; row click hands the selection off to the owner.
+
+import { useState, type ReactNode } from 'react'
+import clsx from 'clsx'
+import { StateDot } from '@deepseek-ai/dsh-client-ui-primitives'
+import { IconChevronDownOutline14 } from '@deepseek-ai/dsh-client-ui-primitives'
+import type { ToolRowState, ToolRowVariant } from '../contract/tool-call-model.ts'
+import css from './ToolRow.module.css'
+
+export interface ToolRowProps {
+  variant: ToolRowVariant
+  /** Leading 16px tool icon, shown while collapsed and not running/failed. */
+  icon: ReactNode
+  title: string
+  summary: string
+  /** Expanded-body text; null = not expandable (leading slot never toggles). */
+  body: string | null
+  state: ToolRowState
+  /** Selection handoff (row click), already bound to this call by the owner. */
+  onOpenDetails?: (() => void) | undefined
+}
+
+/** Leading-slot state substitution: the tool icon yields to the state semantic
+ *  (running = blue ring, error = red, interrupted = amber halo; ok = icon). */
+function leadingFor(state: ToolRowState, icon: ReactNode): ReactNode {
+  switch (state) {
+    case 'running': return <StateDot state="ongoing" />
+    case 'error': return <StateDot state="error" />
+    case 'stopped': return <StateDot state="warning" />
+    default: return icon
+  }
+}
+
+export function ToolRow({ variant, icon, title, summary, body, state, onOpenDetails }: ToolRowProps) {
+  const [expanded, setExpanded] = useState(false)
+  const expandable = body !== null
+  const open = expanded && expandable
+  return (
+    <div className={css.root} data-variant={variant} data-state={state}>
+      <div
+        className={css.row}
+        data-clickable={onOpenDetails !== undefined || undefined}
+        onClick={onOpenDetails}
+      >
+        {expandable ? (
+          <button
+            type="button"
+            className={css.leading}
+            aria-expanded={open}
+            onClick={(e) => {
+              e.stopPropagation()
+              setExpanded((v) => !v)
+            }}
+          >
+            {open ? <IconChevronDownOutline14 className={clsx(css.chevron)} /> : leadingFor(state, icon)}
+          </button>
+        ) : (
+          <span className={css.leading}>{leadingFor(state, icon)}</span>
+        )}
+        <span className={css.title}>{title}</span>
+        {!open && (
+          <>
+            <span className={css.sep} aria-hidden />
+            <span className={css.summary}>{summary}</span>
+          </>
+        )}
+      </div>
+      {open && <div className={css.body}>{body}</div>}
+    </div>
+  )
+}

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

@@ -0,0 +1,89 @@
+// ToolViewOutlet: resolves the toolview for one call through ctx.toolviews
+// (uSES over the registry version so unload falls back live) and renders it
+// behind a per-row error boundary. GenericToolCard is the render-side
+// fallback for both a registry miss and a crashed custom row. A registrant
+// inject factory is called once per (registration x binding) and cached,
+// mirroring the scoped-slots injection discipline.
+
+import { Component, useSyncExternalStore, type FC, type ReactNode } from 'react'
+import { useSessionBinding } from '@deepseek-ai/dsh-client-web-react'
+import type { SessionBinding } from '@deepseek-ai/dsh-client-ui-slots'
+import type { SessionId } from '@deepseek-ai/dsh-client-runtime/client'
+import type { ToolViewInject, ToolViewProps, ToolViewResolver } from '../contract/toolview.ts'
+import { GenericToolCard } from './GenericToolCard.tsx'
+
+export interface ToolViewOutletProps {
+  registry: ToolViewResolver
+  sessionId: SessionId
+  toolName: string
+  viewProps: ToolViewProps
+}
+
+/** Inject cache: per inject-factory (stable per registration) x binding object. */
+const injectCache = new WeakMap<ToolViewInject<object>, WeakMap<object, object>>()
+
+function cachedInject(inject: ToolViewInject<object>, binding: SessionBinding): object {
+  let perBinding = injectCache.get(inject)
+  if (!perBinding) {
+    perBinding = new WeakMap()
+    injectCache.set(inject, perBinding)
+  }
+  let props = perBinding.get(binding)
+  if (!props) {
+    props = inject(binding)
+    perBinding.set(binding, props)
+  }
+  return props
+}
+
+class RowErrorBoundary extends Component<
+  { resetKey: unknown; fallback: ReactNode; children: ReactNode }, { failed: boolean }
+> {
+  override state = { failed: false }
+  // Fallback state MUST flip here (render phase): a boundary whose derived
+  // state does not change re-renders the crashing children and React gives
+  // up after the second throw, escalating past the boundary.
+  static getDerivedStateFromError(): { failed: boolean } {
+    return { failed: true }
+  }
+  override componentDidCatch(error: unknown): void {
+    console.error('toolview row crashed:', error)
+  }
+  // A re-registration (resetKey bump) retries the custom row.
+  override componentDidUpdate(prev: { resetKey: unknown }): void {
+    if (this.state.failed && prev.resetKey !== this.props.resetKey) {
+      this.setState({ failed: false })
+    }
+  }
+  override render(): ReactNode {
+    if (this.state.failed) return this.props.fallback
+    return this.props.children
+  }
+}
+
+/** Split component: only inject-carrying registrations need the session
+ *  binding hook (keeps injectless rendering free of the Provider requirement). */
+function InjectedRow({ Row, inject, viewProps }: {
+  Row: FC<ToolViewProps & object>; inject: ToolViewInject<object>; viewProps: ToolViewProps
+}) {
+  const binding = useSessionBinding()
+  const injected = cachedInject(inject, binding)
+  return <Row {...{ ...injected, ...viewProps }} />
+}
+
+export function ToolViewOutlet({ registry, sessionId, toolName, viewProps }: ToolViewOutletProps) {
+  const version = useSyncExternalStore(
+    (fn) => registry.subscribe(fn),
+    () => registry.getVersion(),
+  )
+  const resolved = registry.resolve(toolName, sessionId)
+  if (resolved === undefined) return <GenericToolCard {...viewProps} />
+  const Row = resolved.component
+  return (
+    <RowErrorBoundary resetKey={version} fallback={<GenericToolCard {...viewProps} />}>
+      {resolved.inject === undefined
+        ? <Row {...viewProps} />
+        : <InjectedRow Row={Row} inject={resolved.inject} viewProps={viewProps} />}
+    </RowErrorBoundary>
+  )
+}

packages/client/ui-conversation/src/client/chat/chat-flow.ts

@@ -0,0 +1,46 @@
+/**
+ * Chat flow derivation: ConversationSnapshot nodes -> render items. Tool
+ * results group into consecutive-run tool groups (figma step-summary flow,
+ * VERTICAL gap10) alternating with narration; everything else passes through.
+ * Item identity keys are stable across snapshots so the list parent can
+ * subscribe to keys only while rows subscribe to content.
+ */
+import type { ConversationNode, ToolResultNode } from '@deepseek-ai/dsh-client-runtime/client'
+
+/** One renderable flow item; key is the React key and the parent's identity unit. */
+export type ChatFlowItem =
+  | { kind: 'node'; key: string; node: ConversationNode }
+  | { kind: 'tool-group'; key: string; results: readonly ToolResultNode[] }
+
+/**
+ * Group finalized nodes into the step-summary flow.
+ * @param nodes - snapshot nodes (surface order).
+ * @returns flow items; consecutive tool-results merged into one group keyed by the first seq.
+ */
+export function deriveChatFlow(nodes: readonly ConversationNode[]): ChatFlowItem[] {
+  const items: ChatFlowItem[] = []
+  let group: ToolResultNode[] | null = null
+  for (const node of nodes) {
+    if (node.kind === 'tool-result') {
+      if (group === null) {
+        group = [node]
+        items.push({ kind: 'tool-group', key: `g${node.seq}`, results: group })
+      } else {
+        group.push(node)
+      }
+    } else {
+      group = null
+      items.push({ kind: 'node', key: `n${node.seq}`, node })
+    }
+  }
+  return items
+}
+
+/**
+ * Key projection for the list parent's selector (content-blind identity).
+ * @param items - derived flow items.
+ * @returns joined key string usable with Object.is short-circuiting.
+ */
+export function flowKeys(items: readonly ChatFlowItem[]): string {
+  return items.map(i => i.key).join('|')
+}

packages/client/ui-conversation/src/client/chat/register.ts

@@ -0,0 +1,52 @@
+/**
+ * Chat-side registration entry, called from the plugin apply (the assembly
+ * point): registers the chat view with the stats-line footer chrome. The
+ * chat domain touches the tool ring only through the contract resolver face;
+ * bash sample registration moved to apply (cross-domain assembly).
+ */
+import type { SessionId, SessionListState } from '@deepseek-ai/dsh-client-runtime/client'
+import type { ConversationService } from '../service.ts'
+import type { Translate } from '../contract/views.ts'
+import type { ToolViewResolver } from '../contract/toolview.ts'
+import { createChatView } from './ChatView.tsx'
+import { StatsLine } from './StatsLine.tsx'
+
+/** Read face of the sessions list store (subscription not needed: the filter
+ *  reads the latest snapshot at each resolve). */
+export interface SessionListReader { getSnapshot(): SessionListState }
+
+/**
+ * Default scoped-sample filter: the sub-session family. Sub-agent rows
+ * rendering differently is the registry's canonical product scenario, and
+ * forking gives W5 acceptance a real entry point to observe the differential.
+ * @param list - injected sessions list read face.
+ * @returns filter matching sessions with a parent.
+ */
+export function childSessionScope(list: SessionListReader): (sessionId: SessionId) => boolean {
+  return sessionId => list.getSnapshot().byId[sessionId]?.parentId !== undefined
+}
+
+/** Assembly inputs for {@link registerChat} (resolved by apply, not here). */
+export interface RegisterChatDeps {
+  conversation: ConversationService
+  /** Toolview read face consumed by the chat rows' outlet. */
+  toolviews: ToolViewResolver
+  /** Translator bound to the conversation namespace. */
+  t: Translate
+}
+
+/**
+ * Register the chat view (footer chrome included).
+ * @param deps - assembled service instances.
+ * @returns disposer removing the registration.
+ */
+export function registerChat(deps: RegisterChatDeps): () => void {
+  const { conversation, toolviews, t } = deps
+  return conversation.registerView({
+    id: 'chat',
+    label: 'Chat',
+    order: 0,
+    component: createChatView({ toolviews, t }),
+    chrome: { footer: StatsLine },
+  })
+}

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

@@ -0,0 +1,63 @@
+/**
+ * Slot-ring contract for the conversation package: the composed props shapes
+ * its registrants mount into the layout-owned slots (conversation / details /
+ * conversation.empty — the SlotMap declarations live with ui-layout, the
+ * slot owner). Per the share-ownership rule, the owner share is REFERENCED
+ * from ui-layout and each registrant's injected share is declared here, next
+ * to the component that receives it; full component props = owner share &
+ * standard share & own injected share.
+ */
+import type { ReactNode } from 'react'
+import type { SessionId, SessionSummary } from '@deepseek-ai/dsh-client-runtime/client'
+import type { SnapshotSelectorHook, UseSession } from '@deepseek-ai/dsh-client-web-react'
+import type { ConvOwnerProps, DetailsOwnerProps, EmptyOwnerProps } from '@deepseek-ai/dsh-client-ui-layout/client'
+import type { SelectionTarget, ViewEntry, ViewId } from './views.ts'
+
+/** Injected share of the conversation slot (assembled by apply's inject factory). */
+export interface ConversationInjected {
+  /** Breadcrumb chain (root ancestor first, self last; ancestry(list) feed). */
+  useAncestry: () => readonly SessionSummary[]
+  /** View registry read face (uSES triple from the conversation service). */
+  views: {
+    list(): readonly ViewEntry[]
+    subscribe(fn: () => void): () => void
+    version(): number
+  }
+  /** Active view accessor (layout.viewFor backed; undefined falls to 'chat'). */
+  useActiveView: () => ViewId | undefined
+  /** Composer surface: draft store hook pair + send/stop choreography. */
+  composer: {
+    useDraft: () => string
+    setDraft(text: string): void
+    send(mode: 'queue' | 'steer'): void
+    stop(): void
+  }
+  actions: {
+    openView(view: ViewId): void
+    open(id: SessionId): void
+  }
+  /** Renders the active view's body (the owner closes over ConvViewProps assembly). */
+  renderView: (entry: ViewEntry) => ReactNode
+}
+
+/** Full conversation-slot component props: owner share & standard share & injected share. */
+export type ConversationSlotProps = ConvOwnerProps & { useSession: UseSession } & ConversationInjected
+
+/** Injected share of the details slot. */
+export interface DetailsInjected {
+  useSelection: SnapshotSelectorHook<SelectionTarget | null>
+  actions: { closeDetails(): void }
+}
+
+/** Full details-slot component props. */
+export type DetailsSlotProps = DetailsOwnerProps & { useSession: UseSession } & DetailsInjected
+
+/** Injected share of the no-session empty-state slot (root slot: no standard share). */
+export interface EmptyStateInjected {
+  /** cwd options derived from sessions.list (deduped; assembled by the inject factory). */
+  useCwds: SnapshotSelectorHook<readonly string[]>
+  actions: { startSession(opts: { cwd?: string; text: string; mode: 'queue' | 'steer' }): Promise<void> }
+}
+
+/** Full empty-state component props. */
+export type EmptyStateSlotProps = EmptyOwnerProps & EmptyStateInjected

packages/client/ui-conversation/src/client/contract/tool-call-model.ts

@@ -0,0 +1,126 @@
+/**
+ * Pure row-model derivation for tool summary rows: variant classification,
+ * one-line summary and expanded-body text from the frozen call slice. No
+ * inline output ever — full results live in the details panel.
+ */
+import type { ToolCallBlock } from './toolview.ts'
+
+export type { ToolCallBlock } from './toolview.ts'
+
+/** The frozen slice the chat view hands to toolview components as `block`
+ *  (both members are cache-stable references off ConversationSnapshot). */
+
+/** The five figma row variants (think is fed by reasoning blocks, not tool calls). */
+export type ToolRowVariant = 'think' | 'search' | 'read' | 'bash' | 'others'
+
+/** Row state semantic; colors self-supplied via StateDot (design gives none). */
+export type ToolRowState = 'running' | 'ok' | 'error' | 'stopped'
+
+/** Figma row titles per variant (design literals, not translatable copy). */
+export const VARIANT_TITLES: Record<ToolRowVariant, string> = {
+  think: 'Think', search: 'Search', read: 'Read', bash: 'Bash', others: 'Tool call',
+}
+
+/** Known tool name -> variant; fs write/edit intentionally fall to others (no figma form). */
+const TOOL_VARIANTS: Record<string, ToolRowVariant> = {
+  bash: 'bash',
+  read: 'read',
+  web_fetch: 'read',
+  web_search: 'search',
+  grep: 'search',
+  glob: 'search',
+}
+
+/**
+ * Classify a tool name into its row variant.
+ * @param toolName - wire tool name.
+ * @returns matching variant, others when unknown.
+ */
+export function classifyTool(toolName: string): ToolRowVariant {
+  return TOOL_VARIANTS[toolName] ?? 'others'
+}
+
+/** Everything ToolRow needs, derived once from the frozen slice. */
+export interface ToolRowModel {
+  variant: ToolRowVariant
+  title: string
+  summary: string
+  /** Expanded-body text (pretty args); null = row not expandable. */
+  body: string | null
+  state: ToolRowState
+}
+
+function parseArgs(argsRaw: string): unknown {
+  try {
+    return JSON.parse(argsRaw)
+  } catch {
+    // Non-JSON args (mid-stream truncation): summary/body fall back to the raw string.
+    return undefined
+  }
+}
+
+function firstLine(text: string): string {
+  const nl = text.indexOf('\n')
+  return nl === -1 ? text : text.slice(0, nl)
+}
+
+function pickString(args: Record<string, unknown>, keys: readonly string[]): string | undefined {
+  for (const key of keys) {
+    const v = args[key]
+    if (typeof v === 'string' && v !== '') return v
+  }
+  return undefined
+}
+
+/** Summary key preference per variant (args-derived; result-derived summaries are a ledger item). */
+const SUMMARY_KEYS: Record<ToolRowVariant, readonly string[]> = {
+  bash: ['description', 'command'],
+  read: ['path', 'file_path', 'url'],
+  search: ['query', 'pattern', 'url'],
+  think: [],
+  others: [],
+}
+
+function deriveSummary(variant: ToolRowVariant, argsRaw: string): string {
+  const parsed = parseArgs(argsRaw)
+  if (typeof parsed !== 'object' || parsed === null) return firstLine(argsRaw)
+  const args = parsed as Record<string, unknown>
+  const picked = pickString(args, SUMMARY_KEYS[variant])
+  if (picked !== undefined) return firstLine(picked)
+  for (const v of Object.values(args)) {
+    if (typeof v === 'string' && v !== '') return firstLine(v)
+  }
+  return firstLine(argsRaw)
+}
+
+function deriveBody(argsRaw: string): string | null {
+  if (argsRaw === '') return null
+  const parsed = parseArgs(argsRaw)
+  return parsed === undefined ? argsRaw : JSON.stringify(parsed, null, 2)
+}
+
+/**
+ * Derive the full row model from a frozen call slice.
+ * @param toolName - wire tool name (dispatch-supplied; survives windowless results).
+ * @param block - RunningToolCall or ToolResultNode off the snapshot caches.
+ * @returns the row model.
+ */
+export function toolRowModel(toolName: string, block: ToolCallBlock): ToolRowModel {
+  const variant = classifyTool(toolName)
+  const done = 'kind' in block
+  const argsRaw = (done ? block.call?.argsRaw : block.argsRaw) ?? ''
+  const state: ToolRowState = !done ? 'running'
+    : block.error?.code === 'interrupted' ? 'stopped'
+      : block.isError ? 'error' : 'ok'
+  const base = argsRaw === '' ? block.callId : deriveSummary(variant, argsRaw)
+  // Others keeps the static "Tool call" title (figma literal); the real tool
+  // name rides the mutable summary slot so no information is lost.
+  const summary = variant === 'others' && toolName !== '' ? `${toolName} · ${base}` : base
+  return {
+    variant,
+    title: VARIANT_TITLES[variant],
+    summary,
+    body: deriveBody(argsRaw),
+    state,
+  }
+}

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

@@ -0,0 +1,77 @@
+/**
+ * Tool-ring contract: the props surface handed to toolview components, the
+ * registry's resolve/registration shapes, and the tool-call block union.
+ * Shared face between the chat domain (ToolViewOutlet consumes resolve) and
+ * the toolviews domain (registry implementation + sample rows); domain
+ * implementation files import this, never each other.
+ */
+import type { FC } from 'react'
+import type { SessionBinding } from '@deepseek-ai/dsh-client-ui-slots'
+import type { UseSession } from '@deepseek-ai/dsh-client-web-react'
+import type { SessionId, ToolCallBlock } from '@deepseek-ai/dsh-client-runtime/client'
+import type { CallId, Translate } from './views.ts'
+
+// The block union's defining home is runtime (fold-product types); the
+// contract only forwards it (type-definition authority stays with the layer
+// that produces the values).
+export type { ToolCallBlock } from '@deepseek-ai/dsh-client-runtime/client'
+
+/** Props handed to registered toolview components. */
+export interface ToolViewProps {
+  callId: CallId
+  toolName: string
+  block: ToolCallBlock
+  useSession: UseSession
+  actions: { openDetails(): void }
+  t: Translate
+}
+
+/**
+ * Toolview inject factory: produces the registrant's private injected share
+ * `I`, called once per (registration x session binding) and cached by the
+ * render outlet. Session-bound by nature — tool rows always render inside a
+ * session subtree.
+ */
+export type ToolViewInject<I extends object> = (b: SessionBinding) => I
+
+/** Options accepted by the toolview registry's register; `I` is inferred from the inject factory. */
+export interface ToolViewOptions<I extends object = object> {
+  /** Session filter; absent = global registration. */
+  scope?: (sessionId: SessionId) => boolean
+  /** Private inject factory merged into the row's props by the render outlet. */
+  inject?: ToolViewInject<I>
+}
+
+/**
+ * A resolved toolview registration. `I` is erased to `object` on the resolve
+ * read face (storage erases the per-registration parameter; the outlet merges
+ * injected props untyped — the register site already proved component ⊇ I).
+ */
+export interface ResolvedToolView<I extends object = object> {
+  component: FC<ToolViewProps & I>
+  inject?: ToolViewInject<I>
+}
+
+/** The registry's read face consumed by render outlets (implementation lives in the toolviews domain). */
+export interface ToolViewResolver {
+  /**
+   * Resolve the renderer for a tool in a session. Order: scope match (later
+   * registration wins) > global > undefined (caller falls back to the
+   * generic card).
+   * @param tool - tool name.
+   * @param sessionId - session the row renders in.
+   * @returns resolved view, or undefined when nothing matches.
+   */
+  resolve(tool: string, sessionId: SessionId): ResolvedToolView | undefined
+  /**
+   * Subscribe to registration changes (synchronous).
+   * @param fn - change callback.
+   * @returns unsubscribe.
+   */
+  subscribe(fn: () => void): () => void
+  /**
+   * Monotonic version for uSES pairing.
+   * @returns current version.
+   */
+  getVersion(): number
+}

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

@@ -0,0 +1,68 @@
+/**
+ * View-ring contract: the typed conversation view table and the props
+ * surfaces handed to registered views. Shared face between the skeleton
+ * domain (ConversationRoot renders views) and the chat domain (registers the
+ * chat view); domain implementation files import this, never each other.
+ */
+import type { FC } from 'react'
+import type { ScopedSlots } from '@deepseek-ai/dsh-client-ui-slots'
+import type { SnapshotSelectorHook, UseSession } from '@deepseek-ai/dsh-client-web-react'
+import type { SessionId } from '@deepseek-ai/dsh-client-runtime/client'
+
+/**
+ * One ConversationViewMap entry: per-view props extension shapes (design
+ * ledger, view ring). `chromeProps` extends {@link ChromeProps} for the
+ * view's chrome attachments; `extraProps` extends {@link ConvViewProps} for
+ * the view component itself. Both optional — the common bases stay the floor.
+ */
+export interface ViewEntryDef { chromeProps?: object; extraProps?: object }
+
+/**
+ * Typed conversation view table; ui-trajectory merges {trajectory, waterfall}.
+ * The chat entry is declared inline here (self-merge from a sibling module
+ * trips TS6305 under tsc -b).
+ */
+export interface ConversationViewMap { chat: ViewEntryDef }
+
+/** View id constrained to registered ConversationViewMap keys (all string literals; chat is declared inline). */
+export type ViewId = keyof ConversationViewMap
+
+/** Per-view chrome props: the common base plus the entry's declared extension. */
+export type ChromePropsOf<Id extends ViewId> =
+  ChromeProps & (ConversationViewMap[Id] extends { chromeProps: infer C extends object } ? C : object)
+
+/** Per-view component props: the common base plus the entry's declared extension. */
+export type ConvViewPropsOf<Id extends ViewId> =
+  ConvViewProps & (ConversationViewMap[Id] extends { extraProps: infer E extends object } ? E : object)
+
+/** Tool call identity as carried on the wire (branded upstream in connection). */
+export type CallId = string
+
+/** Translate function bound to a namespace via i18n. */
+export type Translate = (key: string, params?: Record<string, unknown>) => string
+
+/** One registered conversation view (props positions keyed by the entry's declared shapes). */
+export interface ViewEntry<Id extends ViewId = ViewId> {
+  id: Id
+  label: string
+  order?: number
+  component: FC<ConvViewPropsOf<Id>>
+  /** Per-view chrome attachments (chat mounts the stats line as footer). */
+  chrome?: { header?: FC<ChromePropsOf<Id>>; footer?: FC<ChromePropsOf<Id>> }
+}
+
+/** Props for view chrome attachments. */
+export interface ChromeProps { sessionId: SessionId; useSession: UseSession }
+
+/** Selection target for the details linkage channel (toolcall is the step special case). */
+export interface SelectionTarget { turnSeq: number; stepSeq?: number; callId?: CallId; toolName?: string }
+
+/** Props handed to registered conversation views. */
+export interface ConvViewProps {
+  sessionId: SessionId
+  useSession: UseSession
+  useSelection: SnapshotSelectorHook<SelectionTarget | null>
+  actions: { openDetails(t: SelectionTarget): void; loadOlder(): void }
+  /** Chat has no delegated sub-slots in P-I (toolviews go through the named registry). */
+  slots: ScopedSlots<never>
+}

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

@@ -0,0 +1,42 @@
+/**
+ * Conversation domain plugin, browser half: skeleton (header/tabs/composer),
+ * typed view registry, scope-addressed ConversationService, named toolview
+ * registry, minimal details panel. Contract: api-contracts v3 section 7.
+ * Thin shell: type surfaces live in contract/, assembly in apply.ts; the
+ * three implementation domains (skeleton/chat/toolviews) never import each
+ * other — contract/ is their only shared face.
+ */
+import type { ConversationService } from './service.ts'
+import type { ToolViewRegistry } from './toolviews/registry.ts'
+
+export { apply, inject } from './apply.ts'
+export { ConversationService } from './service.ts'
+export { ToolViewRegistry } from './toolviews/registry.ts'
+
+export type {
+  CallId, ChromeProps, ChromePropsOf, ConversationViewMap, ConvViewProps, ConvViewPropsOf,
+  SelectionTarget, Translate, ViewEntry, ViewEntryDef, ViewId,
+} from './contract/views.ts'
+export type {
+  ResolvedToolView, ToolCallBlock, ToolViewOptions, ToolViewProps, ToolViewResolver,
+} from './contract/toolview.ts'
+export type {
+  ConversationInjected, ConversationSlotProps, DetailsInjected, DetailsSlotProps,
+  EmptyStateInjected, EmptyStateSlotProps,
+} from './contract/slots.ts'
+
+export { ConversationRoot } from './skeleton/ConversationRoot.tsx'
+export type { ConversationRootProps } from './skeleton/ConversationRoot.tsx'
+export { InputBar } from './skeleton/InputBar.tsx'
+export type { InputBarError, InputBarProps } from './skeleton/InputBar.tsx'
+export { EmptyState } from './skeleton/EmptyState.tsx'
+export type { EmptyStateProps } from './skeleton/EmptyState.tsx'
+export { DetailsPanel } from './skeleton/DetailsPanel.tsx'
+export type { DetailsPanelProps } from './skeleton/DetailsPanel.tsx'
+
+declare module 'cordis' {
+  interface Context {
+    conversation: ConversationService
+    toolviews: ToolViewRegistry
+  }
+}

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

@@ -0,0 +1,251 @@
+/**
+ * ConversationService implementation: scope-addressed send/cancel, per-scope
+ * selection/draft stores booked on the session scope fiber, view registry
+ * with a uSES read face, openDetails orchestration, and the empty-state
+ * startSession chain. Contract: api-contracts v3 section 7.
+ *
+ * Scope addressing rides the cordis Service tracker: property access through
+ * `ctx.conversation` rebinds `this.ctx` to the caller's context, so methods
+ * read the session tag with scopeOf (same mechanism as the host tool
+ * registry). Mutable state lives in plain objects reached by one property
+ * read — field assignment through the tracker's shadow proxy is off-limits,
+ * as are `#` hard-private fields.
+ */
+import { Service } from 'cordis'
+import type { Context } from 'cordis'
+// Value import MUST use the /client subpath: only that specifier is in the
+// bundle externals (CLIENT_EXTERNALS), so it resolves to the shared runtime
+// module at load time. A bare-specifier value import gets INLINED as a second
+// module instance whose private scope-tag Symbol never matches the one
+// SessionsService tags contexts with — scopeOf then always returns undefined
+// in the browser while unit tests (single-instance path resolution) stay green.
+import { scopeOf } from '@deepseek-ai/dsh-client-runtime/client'
+import type { Session, SessionId, SessionsService } from '@deepseek-ai/dsh-client-runtime/client'
+import { createSnapshotStore } from '@deepseek-ai/dsh-client-web-react'
+import type { SnapshotStore } from '@deepseek-ai/dsh-client-web-react'
+import type { LayoutService } from '@deepseek-ai/dsh-client-ui-layout/client'
+import type { SelectionTarget, ViewEntry, ViewId } from './index.ts'
+
+/** Mutable view-registry cell (plain object: mutation never crosses the tracker proxy). */
+interface ViewsState {
+  entries: Map<string, ViewEntry>
+  /** Sorted projection cache; null = rebuild on next read. */
+  cache: readonly ViewEntry[] | null
+  tick: number
+  listeners: Set<() => void>
+}
+
+/** Scope-addressed conversation service (root singleton, provided as `conversation`). */
+export class ConversationService extends Service {
+  private readonly selections = new Map<SessionId, SnapshotStore<SelectionTarget | null>>()
+  private readonly draftStores = new Map<SessionId, SnapshotStore<string>>()
+  private readonly viewsState: ViewsState = {
+    entries: new Map(), cache: null, tick: 0, listeners: new Set(),
+  }
+
+  /**
+   * @param ctx - owning root context (the plugin apply context; the service
+   * registers itself and follows that fiber's lifetime).
+   */
+  constructor(ctx: Context) {
+    super(ctx, 'conversation')
+  }
+
+  /**
+   * Send a prompt into the scoped session. Business failures also land in the
+   * session snapshot's promptError (object-layer surface); the rejection here
+   * exists for caller choreography (the composer restores the draft on it).
+   * @param text - prompt text, sent verbatim as one text block.
+   * @param mode - queue after the current turn, or steer into it.
+   */
+  async send(text: string, mode: 'queue' | 'steer'): Promise<void> {
+    const session = this.scopedSession('send')
+    const result = await session.prompt([{ type: 'text', text }], mode)
+    if (!result.ok) throw new Error(`conversation.send failed: ${result.error.code}: ${result.error.message}`)
+  }
+
+  /** Cancel the scoped session's in-flight turn (failures land in promptError and reject, as in send). */
+  async cancel(): Promise<void> {
+    const session = this.scopedSession('cancel')
+    const result = await session.cancel()
+    if (!result.ok) throw new Error(`conversation.cancel failed: ${result.error.code}: ${result.error.message}`)
+  }
+
+  /** Per-scope selection channel (details linkage); root access throws. */
+  get selection(): SnapshotStore<SelectionTarget | null> {
+    return this.scopeStore(this.selections, 'selection',
+      () => createSnapshotStore<SelectionTarget | null>(null))
+  }
+
+  /**
+   * Per-scope draft store, persisted per session id; root access throws.
+   * Persistence is hand-rolled (raw string per key): the snapshot-store
+   * engine's persist middleware object-spreads state on save, corrupting
+   * primitive-state stores.
+   */
+  get drafts(): SnapshotStore<string> {
+    return this.scopeStore(this.draftStores, 'drafts', (id) => {
+      const key = `dsh.conversation.draft.${id}`
+      const store = createSnapshotStore<string>(loadDraft(key))
+      store.subscribe(() => { saveDraft(key, store.getSnapshot()) })
+      return store
+    })
+  }
+
+  /**
+   * Write the scoped selection and open the details panel. Orchestration
+   * only — panel geometry stays with ctx.layout.
+   * @param target - selection target.
+   */
+  openDetails(target: SelectionTarget): void {
+    this.selection.set(target)
+    this.requireLayout().openDetails()
+  }
+
+  /**
+   * Register a conversation view. Duplicate ids throw; the registration is an
+   * effect on the caller's fiber (plugin unload collects it).
+   * @param entry - the view entry.
+   * @returns disposer removing the view.
+   */
+  registerView<Id extends ViewId>(entry: ViewEntry<Id>): () => void {
+    const views = this.viewsState
+    const dispose = this.ctx.effect(() => {
+      if (views.entries.has(entry.id)) {
+        throw new Error(`conversation view "${entry.id}" is already registered`)
+      }
+      views.entries.set(entry.id, entry)
+      bumpViews(views)
+      return () => {
+        views.entries.delete(entry.id)
+        bumpViews(views)
+      }
+    }, 'conversation.registerView()')
+    // The effect disposer settles asynchronously; the registry face stays a
+    // synchronous fire-and-forget disposer.
+    return () => { void dispose() }
+  }
+
+  /**
+   * Registered views ordered by `order` (ties keep registration sequence).
+   * Stable array reference between mutations (uSES getSnapshot source).
+   * @returns the view entries.
+   */
+  views(): readonly ViewEntry[] {
+    const state = this.viewsState
+    state.cache ??= [...state.entries.values()].sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
+    return state.cache
+  }
+
+  /**
+   * Subscribe to view registry changes (synchronous, like the toolview registry).
+   * @param fn - change callback.
+   * @returns unsubscribe.
+   */
+  subscribeViews(fn: () => void): () => void {
+    const { listeners } = this.viewsState
+    listeners.add(fn)
+    return () => { listeners.delete(fn) }
+  }
+
+  /**
+   * Monotonic view registry version for uSES pairing.
+   * @returns current version.
+   */
+  viewsVersion(): number {
+    return this.viewsState.tick
+  }
+
+  /**
+   * Empty-state first-send chain (root-context method; does not read scope):
+   * create the session, navigate to it, then send through the new scope.
+   * The create → open ordering is safe: the manager merges the new summary
+   * synchronously before create() resolves, so the list store is projected by
+   * the time open() validates against it (manager notification batching is
+   * microtask-based; SessionsService projects on the same flush that create
+   * awaited through the RPC round trip).
+   * @param opts - project directory, prompt text, and send mode.
+   */
+  async startSession(opts: { cwd?: string; text: string; mode: 'queue' | 'steer' }): Promise<void> {
+    const sessions = this.requireSessions()
+    const id = await sessions.create(opts.cwd === undefined ? {} : { cwd: opts.cwd })
+    // The manager notifier flushes per microtask; one await guarantees the
+    // list-store projection landed before layout.open validates against it.
+    await Promise.resolve()
+    this.requireLayout().open(id)
+    const scoped = sessions.scope(id)
+    if (scoped === undefined) throw new Error(`conversation.startSession: created session "${id}" resolved no scope`)
+    // ctx.get, not scoped.conversation: property access walks the fiber
+    // topology (a scope fiber never injects services), while get reads the
+    // global store and still binds this service to the scoped ctx.
+    const scopedConversation = scoped.get('conversation')
+    if (scopedConversation === undefined) throw new Error('conversation.startSession: conversation service unavailable through the new scope')
+    await scopedConversation.send(opts.text, opts.mode)
+  }
+
+  /** Resolve the caller scope's Session or throw on root contexts. */
+  private scopedSession(op: string): Session {
+    const id = this.scopeId(op)
+    return this.requireSessions().manager.get(id)
+  }
+
+  /** Read the caller's session scope tag; root contexts fail loud. */
+  private scopeId(op: string): SessionId {
+    const id = scopeOf(this.ctx)
+    if (id === undefined) {
+      throw new Error(`conversation.${op} requires a session scope — address one via ctx.sessions.scope(id).conversation`)
+    }
+    return id
+  }
+
+  /**
+   * Per-scope store account: lazily created, booked on the scope fiber so the
+   * scope teardown (SessionsService prune) collects the entry.
+   */
+  private scopeStore<T>(
+    map: Map<SessionId, SnapshotStore<T>>, op: string,
+    make: (id: SessionId) => SnapshotStore<T>): SnapshotStore<T> {
+    const id = this.scopeId(op)
+    let store = map.get(id)
+    if (store === undefined) {
+      store = make(id)
+      map.set(id, store)
+      this.ctx.effect(() => () => { map.delete(id) }, `conversation.${op} scope account`)
+    }
+    return store
+  }
+
+  private requireSessions(): SessionsService {
+    // ctx.get instead of ctx.sessions: the typed Context merge is suspended
+    // while the client/host `sessions` declaration collision awaits
+    // arbitration (see the runtime package's Context merge note).
+    const sessions = this.ctx.get('sessions')
+    if (sessions === undefined) throw new Error('conversation: sessions service unavailable')
+    return sessions
+  }
+
+  private requireLayout(): LayoutService {
+    const layout = this.ctx.get('layout')
+    if (layout === undefined) throw new Error('conversation: layout service unavailable')
+    return layout
+  }
+}
+
+function bumpViews(state: ViewsState): void {
+  state.cache = null
+  state.tick += 1
+  for (const fn of [...state.listeners]) fn()
+}
+
+function loadDraft(key: string): string {
+  /* v8 ignore next -- storage-less environment guard (workers/tests without DOM); jsdom always provides localStorage. */
+  if (typeof localStorage === 'undefined') return ''
+  return localStorage.getItem(key) ?? ''
+}
+
+function saveDraft(key: string, text: string): void {
+  /* v8 ignore next -- storage-less environment guard (workers/tests without DOM); jsdom always provides localStorage. */
+  if (typeof localStorage === 'undefined') return
+  if (text === '') localStorage.removeItem(key)
+  else localStorage.setItem(key, text)
+}

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

@@ -0,0 +1,129 @@
+/* Conversation column skeleton: header (breadcrumb row + tabs) over the view
+   area, composer InputBar at the bottom. Column width/squeeze is layout's;
+   this fills its cell. Figma: Header 39:27730 (83px two-row), tabs 13px with
+   a 3px active bar. */
+
+.root {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-width: 0;
+  background: var(--dsw-alias-bg-base);
+}
+
+.header {
+  flex: none;
+  padding: 12px 28px 0 20px;
+  border-bottom: 1px solid var(--dsw-alias-border-l2);
+}
+
+.crumbRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 32px;
+}
+
+.crumbs {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.crumbSeg {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+}
+
+.crumbSep {
+  /* figma: "/" separators are 14px caption gray (75:7903), one tint lighter than crumb text. */
+  color: var(--dsw-alias-label-caption);
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.crumb {
+  max-width: 220px;
+  overflow: hidden;
+  padding: 4px 8px;
+  border: none;
+  border-radius: 12px;
+  background: transparent;
+  font-size: 13px;
+  line-height: 16px;
+  color: var(--dsw-alias-label-tertiary);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.crumb:hover:not(:disabled) {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.crumbCurrent {
+  font-weight: 500;
+  color: var(--dsw-alias-label-primary);
+  cursor: default;
+}
+
+.meta {
+  margin-left: 4px;
+  font-size: 12px;
+  line-height: 18px;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+/* figma Tab_Group 34:11441: 35px strip, gap 36, pad-left 8, tabs bottom-aligned. */
+.tabs {
+  display: flex;
+  gap: 36px;
+  margin-top: 4px;
+  padding-left: 8px;
+}
+
+/* figma .Tab 34:11442: 13/16 wt510 text, gap 8 to the 3px bar (no bottom rounding). */
+.tab {
+  position: relative;
+  padding: 0 0 11px;
+  border: none;
+  background: transparent;
+  font-size: 13px;
+  line-height: 16px;
+  font-weight: 510;
+  color: var(--dsw-alias-label-tertiary);
+  cursor: pointer;
+}
+
+.tab::after {
+  content: '';
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 3px;
+  background: transparent;
+}
+
+/* Selected tab is blue, not ink: brand-primary resolves to neutral black in
+   this token sheet, so the selected state rides the business blue — the
+   nearest semantic token that stays blue in both themes. */
+.tabActive {
+  color: var(--dsw-alias-state-business-primary);
+}
+
+.tabActive::after {
+  background: var(--dsw-alias-state-business-primary);
+}
+
+.viewArea {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+}

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

@@ -0,0 +1,109 @@
+// ConversationRoot: the conversation slot's skeleton (figma Header 39:27730 +
+// Tab_Group + view area + composer). Zero framework imports — everything
+// arrives via props from the inject factory: breadcrumb feed, view registry
+// read face, per-view render, and the composer's draft/send choreography.
+// The active view id lives in layout.viewFor (shell viewing state), read and
+// written through injected accessors.
+
+import { useSyncExternalStore } from 'react'
+import clsx from 'clsx'
+import type { ConversationSlotProps } from '../contract/slots.ts'
+import { InputBar } from './InputBar.tsx'
+import type { InputBarError } from './InputBar.tsx'
+import css from './ConversationRoot.module.css'
+
+/**
+ * Full props = owner share (sessionId) & standard share (useSession) &
+ * injected share — composed by reference from the contract, never re-typed
+ * here (share-ownership rule).
+ */
+export type ConversationRootProps = ConversationSlotProps
+
+export function ConversationRoot({
+  sessionId, useSession, useAncestry, views, useActiveView, composer, actions, renderView,
+}: ConversationRootProps) {
+  useSyncExternalStore(views.subscribe, views.version)
+  const list = views.list()
+  const activeId = useActiveView() ?? 'chat'
+  const active = list.find(v => v.id === activeId) ?? list[0]
+
+  const ancestry = useAncestry()
+  const draft = composer.useDraft()
+  const running = useSession(s => (s as { running: boolean }).running)
+  const removed = useSession(s => (s as { removed: boolean }).removed)
+  const promptError = useSession(s => (s as { promptError: { op: 'send' | 'stop'; error: { message: string; code: string } } | null }).promptError)
+  const turns = useSession(s => countTurns(s as { nodes: readonly { kind: string }[] }))
+
+  const error: InputBarError | null = promptError === null
+    ? null
+    : { op: promptError.op, message: `${promptError.error.message}（${promptError.error.code}）` }
+
+  return (
+    <div className={css.root}>
+      <header className={css.header}>
+        <div className={css.crumbRow}>
+          <nav className={css.crumbs} aria-label="会话层级">
+            {ancestry.map((s, i) => {
+              const last = i === ancestry.length - 1
+              return (
+                <span key={s.id} className={css.crumbSeg}>
+                  {i > 0 && <span className={css.crumbSep}>/</span>}
+                  <button
+                    type="button"
+                    className={clsx(css.crumb, last && css.crumbCurrent)}
+                    disabled={last}
+                    onClick={() => { actions.open(s.id) }}
+                  >
+                    {s.title}
+                  </button>
+                </span>
+              )
+            })}
+            {ancestry.length === 0 && <span className={css.crumbCurrent}>{sessionId}</span>}
+            <span className={css.meta}>· {turns} turns</span>
+          </nav>
+          {/* Header button row (Fork / Session log / I/O Details): a P-I visual
+              placeholder registry slot is deferred — buttons land with their features. */}
+        </div>
+        {list.length > 1 && (
+          <div className={css.tabs} role="tablist">
+            {list.map(v => (
+              <button
+                key={v.id}
+                type="button"
+                role="tab"
+                aria-selected={v.id === active?.id}
+                className={clsx(css.tab, v.id === active?.id && css.tabActive)}
+                onClick={() => { actions.openView(v.id) }}
+              >
+                {v.label}
+              </button>
+            ))}
+          </div>
+        )}
+      </header>
+
+      <div className={css.viewArea}>
+        {active !== undefined && renderView(active)}
+      </div>
+
+      <InputBar
+        draft={draft}
+        running={running}
+        disabled={removed}
+        error={error}
+        variant="composer"
+        onDraftChange={composer.setDraft}
+        onSend={composer.send}
+        onStop={composer.stop}
+      />
+    </div>
+  )
+}
+
+/** Turn count = user message nodes in the window (display meta; exact host count deferred). */
+function countTurns(s: { nodes: readonly { kind: string }[] }): number {
+  let n = 0
+  for (const node of s.nodes) if (node.kind === 'user') n += 1
+  return n
+}

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

@@ -0,0 +1,94 @@
+/* Details third column, minimal P-I fill: header (name + close) over a
+   scrolling body of Input/Output code sections. Panel width/squeeze belongs
+   to layout; this fills whatever the column gives. */
+
+.root {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-width: 0;
+  border-left: 1px solid var(--dsw-alias-border-l2);
+  background: var(--dsw-alias-bg-base);
+}
+
+/* figma RightSidebar header frame (I54:42735;43:36451): pad 14/12/12/12, gap 8. */
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 14px 12px 12px;
+  border-bottom: 1px solid var(--dsw-alias-border-l2);
+}
+
+/* figma I54:42735;43:41479: 14/20 wt500. */
+.title {
+  overflow: hidden;
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 500;
+  color: var(--dsw-alias-label-primary);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.close {
+  display: grid;
+  flex: none;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  border: none;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--dsw-alias-label-secondary);
+  cursor: pointer;
+}
+
+.close:hover {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.body {
+  flex: 1;
+  min-height: 0;
+  padding: 12px 16px;
+  overflow-y: auto;
+}
+
+.empty {
+  padding: 8px 0;
+  font-size: 13px;
+  line-height: 20px;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.section {
+  margin-bottom: 16px;
+}
+
+.sectionLabel {
+  margin-bottom: 6px;
+  font-size: 12px;
+  line-height: 18px;
+  font-weight: 500;
+  color: var(--dsw-alias-label-secondary);
+}
+
+/* figma Code-block (I54:42735;43:41429): r12, pad 16, mono 13/22. */
+.code {
+  margin: 0;
+  padding: 16px;
+  border-radius: 12px;
+  background: var(--dsw-alias-markdown-code-block);
+  font-family: var(--ds-font-family-code);
+  font-size: 13px;
+  line-height: 22px;
+  color: var(--dsw-alias-label-primary);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.code[data-error] {
+  color: var(--dsw-alias-state-error-primary);
+}

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

@@ -0,0 +1,111 @@
+// DetailsPanel, P-I minimal form: close button + the selected call's args and
+// result rendered raw. The three-段 Switch / Prev-Next stepping / See-in-
+// trajectory are deferred (ledger). Subscribes to the per-scope selection and
+// derives the call material from the session snapshot — no data of its own.
+
+import type { ConversationSnapshot, ToolResultNode } from '@deepseek-ai/dsh-client-runtime/client'
+import { shallowEqual } from '@deepseek-ai/dsh-client-web-react'
+import type { DetailsSlotProps } from '../contract/slots.ts'
+import css from './DetailsPanel.module.css'
+
+/** Full props composed by reference from the contract (owner & standard & injected shares). */
+export type DetailsPanelProps = DetailsSlotProps
+
+/** Selected call material: resolved result node, or the in-flight running call's args. */
+interface CallMaterial {
+  name: string
+  argsRaw: string | null
+  result: ToolResultNode | null
+  running: boolean
+}
+
+function materialFor(s: ConversationSnapshot, callId: string): CallMaterial | null {
+  for (const node of s.nodes) {
+    if (node.kind === 'tool-result' && node.callId === callId) {
+      return { name: node.call?.name ?? callId, argsRaw: node.call?.argsRaw ?? null, result: node, running: false }
+    }
+  }
+  const open = s.runningCalls.find(c => c.callId === callId)
+  if (open !== undefined) {
+    return { name: open.name, argsRaw: open.argsRaw, result: null, running: true }
+  }
+  return null
+}
+
+function pretty(raw: string): string {
+  try {
+    return JSON.stringify(JSON.parse(raw), null, 2)
+  } catch {
+    // Not JSON (streaming fragment or plain text): show verbatim.
+    return raw
+  }
+}
+
+export function DetailsPanel({ useSession, useSelection, actions }: DetailsPanelProps) {
+  const selection = useSelection(s => s)
+  const callId = selection?.callId
+  // materialFor builds a fresh wrapper; shallowEqual short-circuits on its
+  // stable members (result node reference rides the snapshot's structural sharing).
+  const material = useSession(
+    s => (callId === undefined ? null : materialFor(s as ConversationSnapshot, callId)),
+    (a, b) => shallowEqual(a, b))
+
+  return (
+    <div className={css.root}>
+      <div className={css.header}>
+        <div className={css.title}>
+          {selection === null ? '详情' : material?.name ?? selection.toolName ?? '详情'}
+        </div>
+        <button
+          type="button" className={css.close} aria-label="关闭详情"
+          onClick={() => { actions.closeDetails() }}
+        >
+          <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden>
+            <path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+          </svg>
+        </button>
+      </div>
+      <div className={css.body}>
+        {selection === null || callId === undefined
+          ? <div className={css.empty}>点击消息流中的工具行查看详情</div>
+          : material === null
+            ? <div className={css.empty}>该调用不在当前窗口内</div>
+            : (
+                <>
+                  {material.argsRaw !== null && (
+                    <section className={css.section}>
+                      <div className={css.sectionLabel}>Input</div>
+                      <pre className={css.code}>{pretty(material.argsRaw)}</pre>
+                    </section>
+                  )}
+                  <section className={css.section}>
+                    <div className={css.sectionLabel}>Output</div>
+                    {/* materialFor invariant: result===null ⇔ running (a settled
+                        material always carries its result node). */}
+                    {material.result === null
+                      ? <div className={css.empty}>运行中…</div>
+                      : (
+                          <pre className={css.code} data-error={material.result.isError || undefined}>
+                            {renderResult(material.result)}
+                          </pre>
+                        )}
+                  </section>
+                </>
+              )}
+      </div>
+    </div>
+  )
+}
+
+/** Flatten result content blocks to display text (text blocks verbatim, others as JSON). */
+function renderResult(node: ToolResultNode): string {
+  const parts: string[] = []
+  for (const block of node.content) {
+    if (block.type === 'text') parts.push(block.text)
+    else parts.push(JSON.stringify(block, null, 2))
+  }
+  if (parts.length === 0 && node.error !== undefined) {
+    parts.push(`${node.error.name}: ${node.error.code}`)
+  }
+  return parts.join('\n')
+}

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

@@ -0,0 +1,68 @@
+/* NEW SESSION hero: headline over the shared InputBar card, centered in the
+   conversation column. The card is the same component as the composer —
+   only positioning lives here. */
+
+.root {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  min-width: 0;
+  padding: 24px;
+}
+
+/* figma hero group 34:10409: headline block sits 36px above the input card. */
+.card {
+  display: flex;
+  flex-direction: column;
+  gap: 36px;
+  width: 100%;
+  max-width: 776px;
+}
+
+/* figma 34:10411: fish + title row, gap 10, centered; title 26/32 wt600 (34:10414). */
+.headline {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  font-size: 26px;
+  line-height: 32px;
+  font-weight: 600;
+  color: var(--dsw-alias-label-primary);
+}
+
+/* figma 34:10412/10413: brand-blue vector. */
+.fish {
+  flex: none;
+  color: var(--dsw-alias-state-business-primary);
+}
+
+.picker {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.select,
+.customInput {
+  max-width: 320px;
+  padding: 4px 10px;
+  border: 1px solid var(--dsw-alias-border-l2-darkmode-thin);
+  border-radius: 12px;
+  background: var(--dsw-alias-bg-base);
+  font-size: 13px;
+  line-height: 20px;
+  color: var(--dsw-alias-label-secondary);
+}
+
+.customInput {
+  width: 320px;
+  outline: none;
+}
+
+.customInput:focus {
+  /* Business blue, not brand-primary: that token resolves to ink in this sheet. */
+  border-color: var(--dsw-alias-state-business-primary);
+  color: var(--dsw-alias-label-primary);
+}

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

@@ -0,0 +1,106 @@
+// EmptyState (figma NEW SESSION screen): centered hero card built around the
+// SAME InputBar component the resident composer uses (the empty→content
+// transition is one component changing position, never a swap). Project
+// picker: cwd set derived from sessions.list plus a free-form new-directory
+// input; submit runs the startSession chain (create → open → send) in one
+// service call.
+
+import { useState } from 'react'
+import { FishLogo } from '@deepseek-ai/dsh-client-ui-primitives'
+import type { EmptyStateSlotProps } from '../contract/slots.ts'
+import { InputBar } from './InputBar.tsx'
+import type { InputBarError } from './InputBar.tsx'
+import css from './EmptyState.module.css'
+
+/** Select sentinel for the free-form directory entry (impossible as a real path: not absolute). */
+const NEW_DIR = '::new-directory'
+
+/** Full props composed by reference from the contract (owner & injected shares; root slot has no standard share). */
+export type EmptyStateProps = EmptyStateSlotProps
+
+export function EmptyState({ useCwds, actions }: EmptyStateProps) {
+  const cwds = useCwds(s => s)
+  // Local viewing state: the empty state owns no session, so its draft is
+  // ephemeral by design (drafts are keyed by session id; there is none yet).
+  const [draft, setDraft] = useState('')
+  const [cwd, setCwd] = useState<string>('')
+  const [custom, setCustom] = useState(false)
+  const [sending, setSending] = useState(false)
+  const [error, setError] = useState<InputBarError | null>(null)
+
+  const submit = (mode: 'queue' | 'steer'): void => {
+    const text = draft.trim()
+    /* v8 ignore next -- defensive: InputBar disables send while empty. */
+    if (text === '' || sending) return
+    setSending(true)
+    setError(null)
+    const chosen = cwd.trim()
+    actions.startSession({ text, mode, ...(chosen === '' ? {} : { cwd: chosen }) })
+      .catch((reason: unknown) => {
+        // The empty state survives failure with the draft intact (no session
+        // exists to carry promptError; this is the only local error surface).
+        setError({ op: 'send', message: reason instanceof Error ? reason.message : String(reason) })
+        setSending(false)
+      })
+    // Success needs no cleanup: layout.open swaps this slot out for the session body.
+  }
+
+  const picker = (
+    <div className={css.picker}>
+      {custom
+        ? (
+            <input
+              className={css.customInput}
+              value={cwd}
+              autoFocus
+              placeholder="目录路径，如 /home/me/proj"
+              onChange={(e) => { setCwd(e.target.value) }}
+            />
+          )
+        : (
+            <select
+              className={css.select}
+              value={cwd}
+              aria-label="项目目录"
+              onChange={(e) => {
+                if (e.target.value === NEW_DIR) {
+                  setCustom(true)
+                  setCwd('')
+                } else {
+                  setCwd(e.target.value)
+                }
+              }}
+            >
+              <option value="">默认目录</option>
+              {cwds.map(c => <option key={c} value={c}>{c}</option>)}
+              <option value={NEW_DIR}>新目录…</option>
+            </select>
+          )}
+    </div>
+  )
+
+  return (
+    <div className={css.root}>
+      <div className={css.card}>
+        <div className={css.headline}>
+          {/* figma 34:10412: fish 34x25 leading the headline, gap 10. */}
+          <FishLogo size={34} className={css.fish} />
+          Let&apos;s start building
+        </div>
+        <InputBar
+          draft={draft}
+          running={false}
+          disabled={sending}
+          error={error}
+          variant="hero"
+          placeholder="Message to run task, plan and build"
+          accessory={picker}
+          onDraftChange={setDraft}
+          onSend={submit}
+          /* v8 ignore next -- structural noop: hero never passes running=true, so stop is unreachable. */
+          onStop={() => {}}
+        />
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,160 @@
+/* Floating capsule input (figma Input_Bottom 34:11445): card floats above the
+   viewport bottom inside the centered message column; textarea on top, action
+   row below, one primary circle button bottom-right. Input width rides the
+   column (776 is a cap, not a fixed size — layout rule: the box shrinks with
+   the center column keeping its padding). Hero variant = the same card
+   centered in the empty state; the transition between the two is a position
+   move of one component. */
+
+.root {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  /* figma Input_Bottom 34:11445: pad L32/R32/B12; the bottom gradient mask is
+     owned by the chat scroller. Top 8 hosts the error strip's breathing room. */
+  padding: 8px 32px 12px;
+}
+
+.hero {
+  padding: 0;
+}
+
+.error {
+  width: 100%;
+  max-width: 776px;
+  margin-bottom: 6px;
+  padding: 4px 8px;
+  border-radius: 8px;
+  background: var(--dsw-alias-interactive-bg-hover-danger);
+  color: var(--dsw-alias-state-error-primary);
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  /* figma Input 34:11458: 12px between the text area and the button row. */
+  gap: 12px;
+  width: 100%;
+  max-width: 776px;
+  /* Input stroke: black/0.10 light, white/0.06 dark (figma darkmode note says
+     the input border is one notch weaker than buttons) — exactly the
+     l2-darkmode-thin pair. Fill: the input surface token (elevated in dark). */
+  border: 1px solid var(--dsw-alias-border-l2-darkmode-thin);
+  border-radius: 20px;
+  background: var(--dsw-specific-input-major);
+  box-shadow: var(--dsw-shadow-lv2);
+  font-size: 16px;
+  line-height: 24px;
+}
+
+/* New-session state rounds up (figma: r24 and a taller box). */
+.hero .card {
+  border-radius: 24px;
+}
+
+.accessory {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px 0;
+}
+
+/* Mirror-div auto-grow wrapper: the hidden mirror is in normal flow and sets the height
+   (min 2 lines / max 14 lines); the textarea rides it absolutely. Mirror and textarea
+   MUST share font, line-height, padding and wrapping rules or heights diverge. */
+.grow {
+  position: relative;
+}
+
+.input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  resize: none;
+  overflow-y: auto;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--dsw-alias-label-primary);
+  /* Business blue, not brand-primary: that token resolves to ink in this sheet. */
+  caret-color: var(--dsw-alias-state-business-primary);
+}
+
+.input,
+.mirror {
+  padding: 12px 16px 0;
+  font-size: inherit;
+  line-height: inherit;
+  white-space: pre-wrap;
+  word-break: break-word;
+  overflow-wrap: anywhere;
+}
+
+/* figma 34:10434: #ADB2B8 light / #81858C dark — the caption pair exactly. */
+.input::placeholder {
+  color: var(--dsw-alias-label-caption);
+  user-select: none;
+}
+
+/* Running lock: grayed but the draft stays visible; the turn ending re-enables. */
+.input:disabled {
+  color: var(--dsw-alias-label-tertiary);
+  cursor: not-allowed;
+}
+
+.mirror {
+  visibility: hidden;
+  pointer-events: none;
+  /* 2-line floor: 2 × 24px line + 12px top padding; 14-line cap (336px). */
+  min-height: 60px;
+  max-height: 336px;
+  overflow: hidden;
+}
+
+.hero .mirror {
+  /* New-session box is taller at rest (figma 118px input area). */
+  min-height: 84px;
+}
+
+/* figma Frame 1123 (34:11463): pad 12/0/10/10, buttons vertically centered. */
+.row {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 0 10px 10px 12px;
+}
+
+/* Primary send (figma IconButton 34:10465): 34px circle, #3964FE light /
+   #679EFE dark — the info-fill pair (500→400), NOT button-primary (ink);
+   white glyph; empty text = 0.4 opacity. */
+.primary {
+  display: grid;
+  place-items: center;
+  width: 34px;
+  height: 34px;
+  border: none;
+  border-radius: 999px;
+  background: var(--dsw-alias-button-info-fill);
+  color: var(--dsw-alias-label-primary-foreground);
+  cursor: pointer;
+}
+
+.primary:hover {
+  background: var(--dsw-alias-button-info-hover);
+}
+
+.primary:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
+/* Stop state: same slot, dimmed brand fill — the running-state send-key
+   replacement is a design gap filled by us (figma gives no stop form). */
+.stopping,
+.stopping:hover {
+  background: var(--dsw-alias-button-primary-dimmed);
+  color: var(--dsw-alias-brand-text);
+}

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

@@ -0,0 +1,142 @@
+// InputBar: the one composer input (figma Input_Bottom). The same component
+// serves the empty state (variant='hero': centered launch card) and the
+// resident composer (variant='composer') — the empty→content transition is a
+// position move of this component, never a swap (layout ruling). Running
+// LOCKS the input: textarea disabled with the draft visible, stop is the only
+// action; the turn ending re-enables and refocuses.
+
+import { useEffect, useRef } from 'react'
+import type { KeyboardEvent, MouseEvent, ReactNode } from 'react'
+import clsx from 'clsx'
+import css from './InputBar.module.css'
+
+/** Prompt failure surface (mirrors the session snapshot's promptError shape). */
+export interface InputBarError {
+  op: 'send' | 'stop'
+  message: string
+}
+
+export interface InputBarProps {
+  draft: string
+  running: boolean
+  disabled: boolean
+  error: InputBarError | null
+  /** Hero = empty-state centered card; composer = resident bottom bar. */
+  variant: 'hero' | 'composer'
+  placeholder?: string
+  /** Optional leading accessory row content (the empty state mounts its cwd picker here). */
+  accessory?: ReactNode
+  onDraftChange: (text: string) => void
+  onSend: (mode: 'queue' | 'steer') => void
+  onStop: () => void
+}
+
+export function InputBar({
+  draft, running, disabled, error, variant, placeholder, accessory, onDraftChange, onSend, onStop,
+}: InputBarProps) {
+  const empty = draft.trim() === ''
+  const inputRef = useRef<HTMLTextAreaElement | null>(null)
+  // IME guard: composition Enter picks a candidate, it must not send. The ref outlives renders;
+  // clearing is deferred one tick because Safari delivers the closing keydown AFTER compositionend.
+  const composingRef = useRef(false)
+  const onCompositionStart = (): void => {
+    composingRef.current = true
+  }
+  const onCompositionEnd = (): void => {
+    setTimeout(() => {
+      composingRef.current = false
+    }, 10)
+  }
+
+  // Locked while running: the browser drops keystrokes AND focus on a disabled
+  // textarea — no sending mid-turn, stop or wait.
+  const locked = disabled || running
+
+  // Unlock (mount / session switch / turn end) returns focus to the box.
+  useEffect(() => {
+    if (!locked) inputRef.current?.focus()
+  }, [locked])
+
+  const onKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>): void => {
+    if (e.key !== 'Enter') return
+    if (composingRef.current || e.nativeEvent.isComposing || e.nativeEvent.keyCode === 229) return
+    if (e.shiftKey) return // native newline
+    if (e.ctrlKey || e.metaKey) {
+      // execCommand keeps the browser undo stack intact, unlike a setState splice.
+      e.preventDefault()
+      document.execCommand('insertText', false, '\n')
+      return
+    }
+    e.preventDefault()
+    if (e.repeat) return // held-down Enter must not machine-gun sends
+    if (!empty && !locked) onSend('queue')
+  }
+
+  // Button presses steal focus from the textarea; suppress at mousedown so typing continues seamlessly.
+  const keepFocus = (e: MouseEvent<HTMLButtonElement>): void => {
+    e.preventDefault()
+    inputRef.current?.focus()
+  }
+
+  const primaryLabel = running ? '停止' : '发送'
+  const onPrimary = (): void => {
+    if (running) {
+      onStop()
+      return
+    }
+    /* v8 ignore next -- defensive: the primary button is disabled while empty||disabled, so a click cannot reach the false arm. */
+    if (!empty && !disabled) onSend('queue')
+  }
+
+  return (
+    <div className={clsx(css.root, variant === 'hero' && css.hero)}>
+      {error !== null && (
+        <div className={css.error}>
+          {error.op === 'stop' ? '停止失败' : '发送失败'}：{error.message}
+        </div>
+      )}
+      <div className={css.card}>
+        {accessory !== undefined && <div className={css.accessory}>{accessory}</div>}
+        {/* Mirror-div auto-grow: the hidden mirror renders draft+'\n' and stretches the wrapper
+            (min/max capped in CSS); the absolutely-positioned textarea rides its height. Counting
+            rows by '\n' cannot see soft wraps. */}
+        <div className={css.grow}>
+          <textarea
+            ref={inputRef}
+            className={css.input}
+            value={draft}
+            disabled={locked}
+            placeholder={placeholder ?? (disabled ? '会话不可用' : running ? '回复生成中，可停止后再输入' : '输入消息，Enter 发送，Shift+Enter 换行')}
+            rows={2}
+            onChange={(e) => onDraftChange(e.target.value)}
+            onKeyDown={onKeyDown}
+            onCompositionStart={onCompositionStart}
+            onCompositionEnd={onCompositionEnd}
+          />
+          <div aria-hidden className={css.mirror}>{`${draft}\n`}</div>
+        </div>
+        <div className={css.row}>
+          <button
+            type="button"
+            className={clsx(css.primary, running && css.stopping)}
+            aria-label={primaryLabel}
+            title={running ? '停止本轮' : '发送（Enter）'}
+            disabled={!running && (empty || disabled)}
+            onMouseDown={keepFocus}
+            onClick={onPrimary}
+          >
+            {running ? (
+              <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden>
+                <rect x="4" y="4" width="8" height="8" rx="1.5" fill="currentColor" />
+              </svg>
+            ) : (
+              <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden>
+                <path d="M8 13V3.8M8 3.8L3.8 8M8 3.8L12.2 8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none" />
+              </svg>
+            )}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

packages/client/ui-conversation/src/client/toolviews/bash-sample.module.css

@@ -0,0 +1,48 @@
+/* Sample bash rows: deliberately distinct from ToolRow so the differential
+   registry hit is visible at a glance. */
+
+.row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 24px;
+  min-width: 0;
+  cursor: pointer;
+  border-radius: 6px;
+  font-family: var(--ds-font-family-code);
+  font-size: 13px;
+}
+
+.row:hover {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.prompt {
+  flex: none;
+  color: var(--dsw-alias-state-success-primary);
+}
+
+.scopeBadge {
+  flex: none;
+  padding: 0 6px;
+  border-radius: 6px;
+  font-size: 11px;
+  line-height: 18px;
+  color: var(--dsw-alias-label-primary-foreground);
+  background: var(--dsw-alias-state-business-primary);
+}
+
+.command {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--dsw-alias-label-secondary);
+}
+
+.err {
+  flex: none;
+  color: var(--dsw-alias-state-error-primary);
+  font-size: 11px;
+}

packages/client/ui-conversation/src/client/toolviews/bash-sample.tsx

@@ -0,0 +1,52 @@
+// Bash toolview sample, written in third-party posture: everything below uses
+// only the public registration surface (ctx.toolviews.register + ToolViewProps)
+// — the differential-rendering acceptance proof for the registry chain.
+// Two registrations: a global bash row, and a scope-filtered variant that
+// takes over for matching sessions only (later registration wins its tier).
+
+import type { SessionId } from '@deepseek-ai/dsh-client-runtime/client'
+import type { ToolViewProps } from '../contract/toolview.ts'
+import type { ToolViewRegistry } from './registry.ts'
+import { toolRowModel, type ToolCallBlock } from '../contract/tool-call-model.ts'
+import css from './bash-sample.module.css'
+
+/** Global bash row: command-first monospace summary (replaces the generic row). */
+export function BashRow({ toolName, block, actions }: ToolViewProps) {
+  const model = toolRowModel(toolName, block as ToolCallBlock)
+  return (
+    <div className={css.row} data-sample="bash-global" onClick={actions.openDetails}>
+      <span className={css.prompt} aria-hidden>$</span>
+      <span className={css.command}>{model.summary}</span>
+      {model.state === 'error' && <span className={css.err}>failed</span>}
+    </div>
+  )
+}
+
+/** Scoped variant: visually distinct so the differential hit is observable. */
+export function ScopedBashRow({ toolName, block, actions }: ToolViewProps) {
+  const model = toolRowModel(toolName, block as ToolCallBlock)
+  return (
+    <div className={css.row} data-sample="bash-scoped" onClick={actions.openDetails}>
+      <span className={css.scopeBadge}>scoped</span>
+      <span className={css.command}>{model.summary}</span>
+    </div>
+  )
+}
+
+/**
+ * Register both sample rows.
+ * @param toolviews - the conversation plugin's registry service.
+ * @param scope - session filter for the scoped variant.
+ * @returns disposer removing both registrations.
+ */
+export function registerBashSamples(
+  toolviews: ToolViewRegistry,
+  scope: (sessionId: SessionId) => boolean,
+): () => void {
+  const offGlobal = toolviews.register('bash', BashRow)
+  const offScoped = toolviews.register('bash', ScopedBashRow, { scope })
+  return () => {
+    offGlobal()
+    offScoped()
+  }
+}

packages/client/ui-conversation/src/client/toolviews/registry.ts

@@ -0,0 +1,102 @@
+/**
+ * ToolViewRegistry: named per-tool component registry, session-scope aware
+ * (api-contracts v3 section 7). Consumed by chat now, trajectory/waterfall
+ * later — deliberately a named service, not a SlotMap key. The tool key set
+ * is deliberately open (model-side tools arrive at runtime): the strong
+ * typing lives inside the Entry — `I` is inferred from the inject factory at
+ * the register site and proves component props ⊇ ToolViewProps & I.
+ */
+import type { FC } from 'react'
+import type { SessionId } from '@deepseek-ai/dsh-client-runtime/client'
+import type { ResolvedToolView, ToolViewOptions, ToolViewProps } from '../contract/toolview.ts'
+
+/** Stored registration: the per-registration inject parameter is erased
+ *  (storage-erase/read-restore is the typed-Map boundary, one cast budgeted). */
+interface Registration extends ToolViewOptions {
+  component: FC<ToolViewProps & object>
+}
+
+/**
+ * Per-tool renderer registry. Resolution order: scope match (later
+ * registration wins) > global (same tie-break) > undefined, where the caller
+ * falls back to GenericToolCard.
+ */
+export class ToolViewRegistry {
+  private byTool = new Map<string, Registration[]>()
+  private version = 0
+  private listeners = new Set<() => void>()
+
+  /**
+   * Register a tool row renderer. The component must accept the shared
+   * ToolViewProps plus its own injected share `I` — mismatches (missing keys,
+   * wrong types, an inject factory that does not produce what the component
+   * declares) are register-site compile errors.
+   * @param tool - tool name the renderer takes over.
+   * @param component - row component over ToolViewProps & I.
+   * @param opts - optional session-scope filter and private inject factory.
+   * @returns disposer removing this registration.
+   */
+  register<I extends object = object>(
+    tool: string, component: FC<ToolViewProps & I>, opts?: ToolViewOptions<I>): () => void {
+    const list = this.byTool.get(tool) ?? []
+    if (list.length === 0) this.byTool.set(tool, list)
+    // Storage erases I (heterogeneous registrations share one list); resolve
+    // restores the erased shape on the read face.
+    const entry: Registration = { component: component as FC<ToolViewProps & object>, ...opts }
+    list.push(entry)
+    this.bump()
+    let disposed = false
+    return () => {
+      if (disposed) return
+      disposed = true
+      const at = list.indexOf(entry)
+      /* v8 ignore next -- negative arm: an entry lives in one list and only its own once-guarded disposer removes it, so a live disposer always finds it. */
+      if (at >= 0) list.splice(at, 1)
+      if (list.length === 0) this.byTool.delete(tool)
+      this.bump()
+    }
+  }
+
+  /**
+   * Resolve the renderer for a tool in a session.
+   * @param tool - tool name.
+   * @param sessionId - session the row renders in (fed to scope filters).
+   * @returns resolved view, or undefined when nothing matches.
+   */
+  resolve(tool: string, sessionId: SessionId): ResolvedToolView | undefined {
+    const list = this.byTool.get(tool)
+    if (list === undefined) return undefined
+    let global: Registration | undefined
+    let scoped: Registration | undefined
+    for (const entry of list) {
+      if (entry.scope === undefined) global = entry
+      else if (entry.scope(sessionId)) scoped = entry
+    }
+    const hit = scoped ?? global
+    if (hit === undefined) return undefined
+    return hit.inject === undefined ? { component: hit.component } : { component: hit.component, inject: hit.inject }
+  }
+
+  /**
+   * Subscribe to registration changes (render outlets re-resolve on notify).
+   * @param fn - change listener.
+   * @returns disposer.
+   */
+  subscribe(fn: () => void): () => void {
+    this.listeners.add(fn)
+    return () => this.listeners.delete(fn)
+  }
+
+  /**
+   * Monotonic registration version for uSES getSnapshot.
+   * @returns current version.
+   */
+  getVersion(): number {
+    return this.version
+  }
+
+  private bump(): void {
+    this.version += 1
+    for (const fn of this.listeners) fn()
+  }
+}

packages/client/ui-conversation/src/css-modules.d.ts

@@ -0,0 +1,6 @@
+declare module '*.module.css' {
+  const classes: Record<string, string>
+  export default classes
+}
+
+declare module '*.css'

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

@@ -0,0 +1,10 @@
+/**
+ * Conversation plugin, node half. Pure UI plugin: the empty apply exists so
+ * the plugin appears in the host cordis.yml / Loader (load and lifecycle
+ * follow the host; the browser half ships via exports["./client"], discovered
+ * through the package.json dshClient declaration). Contract: api-contracts
+ * v3 sections 0.3 and 7.
+ */
+
+/** Host plugin body — no host-side behavior for the conversation plugin. */
+export function apply(): void {}

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

@@ -0,0 +1,33 @@
+/**
+ * Package-owned invariant companion for `@deepseek-ai/dsh-client-ui-conversation`.
+ * @module @deepseek-ai/dsh-client-ui-conversation/invariant
+ */
+
+/* jscpd:ignore-start */
+import type { Context } from 'cordis'
+import type { InvariantInstaller } from '@deepseek-ai/dsh-invariants'
+
+const PACKAGE_NAME = '@deepseek-ai/dsh-client-ui-conversation'
+
+/** Cordis companion plugin name. */
+export const name = 'client-ui-conversation-invariant'
+/** Service required before the companion can reserve package ownership. */
+export const inject = ['invariants']
+
+/**
+ * No runtime invariant: the conversation service emits no cordis events — its
+ * view and toolview registries notify through package-local subscribe faces
+ * whose ordering (synchronous version bump before notification) is exercised
+ * directly by the behavior specs, and the per-scope store accounts are owned
+ * mutable state with no cross-plugin observer to contradict.
+ */
+const install: InvariantInstaller = () => {}
+
+/**
+ * Register this package's invariant companion.
+ * @param ctx - Cordis context carrying the invariant service.
+ * @returns the installed registration's disposer after setup succeeds.
+ */
+export const apply = (ctx: Context): Promise<() => void> =>
+  Promise.resolve(ctx.invariants.register(PACKAGE_NAME, install))
+/* jscpd:ignore-end */