dsh-better-display 0.3.0 → 0.3.4

package/scripts/verify-official-bridge.mjs

@@ -22,6 +22,7 @@ const paths = {
   feedback: 'ui-message-feedback/src/client/index.ts', 'read-row': 'ui-tool/src/client/tool/toolviews/read-row.tsx',
   'read-image-row': 'ui-tool/src/client/tool/toolviews/read-image-row.tsx', 'tool-locale': 'ui-conversation/src/client/locales.ts',
   deliverables: 'ui-deliverables/src/client/Deliverables.tsx', 'deliverables-locale': 'ui-deliverables/src/client/locales.ts',
+  'open-in-app-action': 'ui-open-in-app/src/client/FileRouteAction.tsx', 'open-in-app-locale': 'ui-open-in-app/src/client/locales.ts',
 };
 const webRequire = createRequire(join(harness, 'packages/client/web/package.json'));
 await build({
@@ -39,6 +40,7 @@ const pixel = Buffer.from('iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQ
 const server = createServer(async (req, res) => {
   if (req.url === '/') { res.setHeader('Content-Type', 'text/html'); res.end('<!doctype html><html lang="zh"><meta charset="utf-8"><link rel="stylesheet" href="/fixture.css"><style>body{font-family:system-ui;margin:24px}button{cursor:pointer}</style><div id="app"></div><script type="module" src="/fixture.js"></script></html>'); return; }
   if (req.url?.startsWith('/api/file?') || req.url === '/pixel.png') { res.setHeader('Content-Type', 'image/png'); res.end(pixel); return; }
+  if (req.url?.startsWith('/api/present.open')) { res.setHeader('Content-Type', 'application/json'); res.end(JSON.stringify([{ id: 'preview-app', name: 'Preview App', default: true, icon: null }, { id: 'other-app', name: 'Other App', default: false, icon: null }])); return; }
   const file = req.url === '/fixture.js' ? 'fixture.js' : req.url === '/fixture.css' ? 'fixture.css' : null;
   if (!file) { res.writeHead(404); res.end(); return; }
   res.setHeader('Content-Type', file.endsWith('.js') ? 'text/javascript' : 'text/css');
@@ -90,11 +92,11 @@ try {
   await tool.getByText('export const value = 1;', { exact: true }).waitFor();
   assert.equal(await page.locator('[data-presented-file]').count(), 1);
   assert.equal(await page.locator('[data-produced-files-row]').count(), 0);
-  await page.getByRole('button', { name: '在侧边栏打开 /fixture/report.pdf', exact: true }).click();
+  await page.getByRole('button', { name: '在侧边栏预览 /fixture/report.pdf', exact: true }).click();
   assert.equal(await page.evaluate(() => window.fixture.observations.opens.at(-1).path), '/fixture/report.pdf');
-  await page.getByRole('button', { name: '/fixture/report.pdf 的更多文件操作', exact: true }).click();
-  await page.getByRole('menuitem', { name: '用默认应用打开', exact: true }).click();
-  assert.deepEqual(await page.evaluate(() => window.fixture.observations.opens.at(-1)), ['presented', 'session-a', 42, 0, 'open']);
+  await page.getByRole('button', { name: '更多打开方式', exact: true }).click();
+  await page.getByRole('menuitem', { name: 'Other App', exact: true }).click();
+  assert.deepEqual(await page.evaluate(() => window.fixture.observations.opens.at(-1)), ['presented', 'session-a', 42, 0, 'open', 'other-app']);
   await page.evaluate(() => window.fixture.language());
   await page.getByRole('button', { name: 'Good response', exact: true }).waitFor();
   const image = page.locator('img[alt="本地样例"]');

package/scripts/verify-tool-shimmer.mjs

@@ -0,0 +1,62 @@
+/** Offline pixel regression for the shipped tool-summary CSS; no Host or model. */
+import assert from 'node:assert/strict';
+import { readFile, mkdir, writeFile } from 'node:fs/promises';
+import { homedir } from 'node:os';
+import { join, resolve } from 'node:path';
+import { pathToFileURL } from 'node:url';
+
+const root = resolve(import.meta.dirname, '..');
+const bundle = resolve(process.argv[2] ?? join(root, 'lib/client.js'));
+const out = join(root, '.evidence/tool-shimmer');
+await mkdir(out, { recursive: true });
+const js = await readFile(bundle, 'utf8');
+const line = js.split('\n').find(line => /const css\$\d+ = "\.\w+_root\{/.test(line));
+assert.ok(line, 'Reader CSS must be present in the shipped bundle');
+const css = JSON.parse(line.slice(line.indexOf('=') + 1).trim().replace(/;$/, ''));
+const summary = css.match(/\.(\w+_nativeToolSummary)\[data-running\]/)?.[1];
+assert.ok(summary);
+const { launchPinnedChromium } = await import(pathToFileURL(join(homedir(), '.codex/playwright-runtime/runtime.mjs')).href);
+const browser = await launchPinnedChromium();
+const results = [];
+try {
+  for (const theme of ['dark', 'light']) for (const width of [180, 800]) {
+    const page = await browser.newPage({ viewport: { width: 900, height: 120 }, deviceScaleFactor: 2 });
+    await page.setContent(`<style>${css}body{margin:20px;background:${theme === 'dark' ? '#141414' : '#fff'};--dsw-alias-label-tertiary:${theme === 'dark' ? '#aaa' : '#666'};font:14px system-ui}.row{display:flex;width:${width}px}</style><div class="row" data-motion="on"><span data-running class="${summary}">Re-run acceptance criteria verification</span></div>`);
+    const target = page.locator(`.${summary}`);
+    const capture = async time => {
+      await target.evaluate((el, time) => {
+        const animations = el.getAnimations();
+        if (animations.length !== 1) throw new Error(`Expected one animation, found ${animations.length}`);
+        animations[0].pause(); animations[0].currentTime = time;
+      }, time);
+      return target.screenshot();
+    };
+    const timing = await target.evaluate(el => el.getAnimations()[0].effect.getTiming().duration);
+    const first = await capture(0);
+    const middle = await capture(timing * .25);
+    const beforeWrap = await capture(timing - 1);
+    const afterWrap = await capture(timing);
+    assert.notDeepEqual(middle, first, 'The highlight must visibly travel across the text');
+    assert.deepEqual(beforeWrap, first, 'The sweep must fully leave the text before wrapping');
+    assert.deepEqual(afterWrap, first, 'The cycle boundary must preserve identical text pixels');
+    await writeFile(join(out, `${theme}-${width}-start.png`), first);
+    await writeFile(join(out, `${theme}-${width}-middle.png`), middle);
+    await writeFile(join(out, `${theme}-${width}-end.png`), beforeWrap);
+    const runningStyle = await target.evaluate(el => ({ repeat: getComputedStyle(el).backgroundRepeat, animationCount: el.getAnimations().length }));
+    assert.equal(runningStyle.repeat, 'no-repeat');
+    await page.locator('[data-motion]').evaluate(el => { el.dataset.motion = 'off'; });
+    assert.equal(await target.evaluate(el => el.getAnimations().length), 0, 'Reader motion-off must stop shimmer');
+    await page.locator('[data-motion]').evaluate(el => { el.dataset.motion = 'on'; });
+    await page.emulateMedia({ reducedMotion: 'reduce' });
+    const reduced = await target.evaluate(el => ({ count: el.getAnimations().length, fill: getComputedStyle(el).webkitTextFillColor }));
+    assert.equal(reduced.count, 0, 'System reduced motion must stop shimmer');
+    assert.notEqual(reduced.fill, 'rgba(0, 0, 0, 0)', 'Stopped animation must keep text readable');
+    await page.emulateMedia({ reducedMotion: 'no-preference' });
+    await target.evaluate(el => el.removeAttribute('data-running'));
+    assert.equal(await target.evaluate(el => el.getAnimations().length), 0, 'Settled tools must not shimmer');
+    results.push({ theme, width, loopPixelsContinuous: true, ...runningStyle, motionOff: true, reducedMotion: true, settled: true });
+    await page.close();
+  }
+  await writeFile(join(out, 'result.json'), JSON.stringify({ bundle, results }, null, 2));
+  console.log(JSON.stringify({ passed: true, results }));
+} finally { await browser.close(); }

package/src/client/OfficialContent.tsx

@@ -1,5 +1,6 @@
-import { useSyncExternalStore, type ReactNode } from 'react';
-import type { ChatConversationViewNode, ChatNodeOwnerProps, TurnTailOwnerProps } from '@deepseek-ai/dsh-client-ui-chat/client';
+import { useCallback, useState, useSyncExternalStore, type ReactNode } from 'react';
+import type { ChatConversationViewNode, ChatNodeOwnerProps, TurnTailOwnerProps, UseDisclosure } from '@deepseek-ai/dsh-client-ui-chat/client';
+import { createSnapshotStore } from '@deepseek-ai/dsh-client-store';
 import type { ToolCallBlock } from '@deepseek-ai/dsh-client-ui-conversation/client';
 import type { AssistantActionOwnerProps } from '@deepseek-ai/dsh-client-ui-chat/client';
 type MessageId = AssistantActionOwnerProps['messageId'];
@@ -13,26 +14,37 @@ export function OfficialActions({ official, messageId }: Pick<BlockRenderProps,
   </span>;
 }
 
+/** Each atomic Tool view owns its disclosure state through this stable Hook prop. */
+const useToolDisclosure: UseDisclosure = () => {
+  const [expanded, setExpanded] = useState(false);
+  const toggle = useCallback(() => setExpanded(previous => !previous), []);
+  return { expanded, setExpanded, toggle };
+};
+
 export function OfficialTool({ official, block, toolName, cwd, openFile, fallback }: BlockRenderProps & {
   official: NonNullable<BlockRenderProps['official']>; block: ToolCallBlock; toolName: string; fallback: ReactNode;
 }) {
   const home = useSyncExternalStore(official.officialHost.subscribe, official.officialHost.getSnapshot).home;
   return <div data-reader-tool-official>
-    {official.renderSlot(OFFICIAL_SEATS.tools, {
-      callId: block.callId, toolName, block, cwd, home,
+    {(official.renderSlot as (key: string, owner: object, options: object) => ReactNode)(OFFICIAL_SEATS.tools, {
+      callId: block.callId, toolName,
+      phase: 'kind' in block ? 'result' : block.phase, block, cwd, home,
       openFile: openFile ?? (() => {}),
       loadImage: official.officialImageLoader,
+      useDisclosure: useToolDisclosure,
       inspect: () => official.openView('trajectory', block.callId),
-    }, { entryKey: toolName, fallback })}
+    }, { entryKey: toolName, hookContext: { callId: block.callId, assistant: undefined }, fallback })}
   </div>;
 }
 
 export function OfficialNode({ node, fallback, ...render }: BlockRenderProps & { node: ChatConversationViewNode; fallback: ReactNode }) {
   const official = render.official;
+  const [disclosureReset] = useState(() => createSnapshotStore(0));
   if (!official) return fallback;
   const owner: ChatNodeOwnerProps = {
     cwd: render.cwd,
     openFile: render.openFile ?? (() => {}),
+    openSkill: () => {},
     forkAt: render.forkAt ?? (() => {}),
     inspectCall: callId => official.openView('trajectory', callId),
     loadImage: official.officialImageLoader,
@@ -45,13 +57,13 @@ export function OfficialNode({ node, fallback, ...render }: BlockRenderProps & {
   // The runtime node domain is open; the public SlotMap enumerates the known kinds.
   const renderNode = official.renderSlot as unknown as (key: string, owner: object, options: object) => ReactNode;
   return <div data-reader-official-node={node.kind} data-chat-anchor-key={node.key} data-chat-flow-kind={node.kind}>
-    {renderNode(OFFICIAL_SEATS.nodes, { ...owner, node }, { entryKey: node.kind, hookContext: turn?.data, fallback })}
+    {renderNode(OFFICIAL_SEATS.nodes, { ...owner, node }, { entryKey: node.kind, hookContext: { turnData: turn?.data, disclosureReset }, fallback })}
   </div>;
 }
 
 export function OfficialTail({ official, owner, produced }: Pick<BlockRenderProps, 'official'> & { owner?: TurnTailOwnerProps; produced: readonly string[] }) {
   const tailOwner = owner && official ? { ...owner, openFile: official.officialPreviewFile, readerProducedPaths: produced } : undefined;
   return official && tailOwner ? <div data-reader-official-tail style={{ display: 'contents' }}>
-    {official.renderSlotChain(OFFICIAL_SEATS.tail, tailOwner)}
+    {official.renderSlot(OFFICIAL_SEATS.tail, tailOwner)}
   </div> : null;
 }

package/src/client/Reader.module.css

@@ -250,13 +250,16 @@
     currentColor 0%, currentColor 35%,
     color-mix(in srgb, currentColor 35%, transparent) 50%,
     currentColor 65%, currentColor 100%);
-  background-size: 220% 100%;
+  /* Keep the travelling band outside the text at both loop endpoints. A single
+     tile covers the row throughout, so wrapping cannot start a second sweep. */
+  background-size: 300% 100%;
+  background-repeat: no-repeat;
   background-position: 100% 0;
   -webkit-background-clip: text; background-clip: text;
   -webkit-text-fill-color: transparent;
   animation: readerStepShimmer 1.6s linear infinite;
 }
-@keyframes readerStepShimmer { to { background-position: -120% 0; } }
+@keyframes readerStepShimmer { to { background-position: 0% 0; } }
 /* The duration stays on a step that ran long, so a slow command keeps its number;
    a fast one shows nothing once it returns. */
 .toolElapsed[data-slow] { opacity: 1; font-weight: 500;
@@ -538,8 +541,19 @@
    pinned straight on top of it. Give each lane its own band instead, stacked
    from the measured top: status first, then the summary, then the fold body. */
 .turnProcessSticky { box-sizing: border-box; width: calc(100% - var(--reader-control-width, 148px)); top: max(var(--reader-toolbar-height, 40px), var(--reader-status-height, 40px)); min-height: 40px; padding-right: 0; z-index: 6; border-bottom: 1px solid transparent; background-clip: padding-box; backdrop-filter: none; -webkit-backdrop-filter: none; }
+/* A pinned lane's in-flow gap stays visible as an uncovered scrollport strip
+   while the lane itself paints opaque. Cast each plate upward over its strip
+   (the .turn 14px gap / the prior cell's 16px flowCellInner padding) so the
+   lanes read as one band instead of solid plates with notches between them.
+   The status lane reserves --reader-control-width on its right for the
+   toolbar's control group, which leaves the same kind of strip there; paint
+   it too. The toolbar is z-index 7, above the lane's 6, so its buttons still
+   render on top of the extension. */
+.turnProcessSticky { box-shadow: 0 -14px 0 var(--dsw-alias-bg-base), var(--reader-control-width, 148px) 0 0 var(--dsw-alias-bg-base); }
 /* The same summary row stays in flow until it reaches the measured top lane. */
 .flowCell[data-flow-summary], .closedProcessSummary { position: sticky; top: calc(max(var(--reader-toolbar-height, 40px), var(--reader-status-height, 40px)) + var(--reader-sticky-lane, 40px)); z-index: 5; overflow: visible; box-sizing: border-box; min-height: 40px; padding-block: 4px; background: var(--dsw-alias-bg-base); border-bottom: 0; }
+.flowCell[data-flow-summary] { box-shadow: 0 -16px 0 var(--dsw-alias-bg-base); }
+.closedProcessSummary { box-shadow: 0 -14px 0 var(--dsw-alias-bg-base); }
 .foldControl { display: inline-flex; align-items: center; gap: 0; padding: 2px; border-radius: 8px; background: var(--dsw-alias-bg-module-platform); }
 .foldStop { border: 0; background: transparent; color: var(--dsw-alias-label-secondary); padding: 2px 8px; border-radius: 6px; white-space: nowrap; font: inherit; font-size: 12px; line-height: 18px; cursor: pointer; }
 .foldStop[data-on] { background: var(--dsw-alias-bg-base); color: var(--dsw-alias-label-primary); }
@@ -573,6 +587,7 @@
    a glass reader keeps exactly the same footer precedence as an opaque one. */
 .root[data-reader-glass] .flowCell[data-flow-summary],
 .root[data-reader-glass] .closedProcessSummary {
+  box-shadow: none;
   position: static;
   z-index: auto;
   min-height: 32px;

package/src/client/Reader.tsx

@@ -272,8 +272,7 @@ function subagentCount(snapshot: { nodes: { get(key: string): ChatConversationVi
   return 0;
 }
 
-function GroupStatus({ group, sessionId, useChat, useSessionPendingInteraction, motion }: Pick<ReaderProps, 'sessionId' | 'useChat' | 'useSessionPendingInteraction'> & { group: ReaderGroup; motion: boolean }) {
-  const pending = useSessionPendingInteraction(snapshot => snapshot.get(sessionId));
+function GroupStatus({ group, sessionId, useChat, pending, motion }: Pick<ReaderProps, 'sessionId' | 'useChat'> & { group: ReaderGroup; motion: boolean; pending: { kind?: string } | undefined }) {
   const text = useChat(snapshot => {
     const turn = group.turn === null ? undefined : snapshot.timeline.turns.get(group.turn);
     if (turn?.status === 'closed') {
@@ -477,7 +476,7 @@ const TurnGroup = memo(function TurnGroup({ group, motion, autoFold, pinnedKeys,
   const snapshot = props.useChat(snapshot => snapshot);
   const nodes = snapshot.nodes;
   const turn = group.turn === null ? undefined : snapshot.timeline.turns.get(group.turn);
-  const interaction = props.useSessionPendingInteraction(snapshot => snapshot.get(props.sessionId));
+  const interaction = props.useSessionStatus(snapshot => snapshot.get(props.sessionId)?.pendingInteraction);
   const sessionRunning = props.useSession(snapshot => snapshot.running);
   const boundary = useMemo(() => boundaryOf(turn), [turn]);
   const choiceKey = processChoiceKey(group.key, boundary);
@@ -538,8 +537,8 @@ const TurnGroup = memo(function TurnGroup({ group, motion, autoFold, pinnedKeys,
   const metrics = useMemo(() => ({
     usage: tailData?.tokenUsage,
     runMs,
-    tokensPerSecond: tailData?.tokensPerSecond,
-    ttftMs: tailData?.ttftMs,
+    tokensPerSecond: (tailData as { tokensPerSecond?: number } | undefined)?.tokensPerSecond,
+    ttftMs: (tailData as { ttftMs?: number } | undefined)?.ttftMs,
     endedAt: tailData?.closing?.time ?? turn?.end?.time,
   }), [tailData, runMs, turn?.end?.time]);
   const forkSeq = forkAnchorSeq([tailData?.closing?.finalNode]);
@@ -594,7 +593,7 @@ const TurnGroup = memo(function TurnGroup({ group, motion, autoFold, pinnedKeys,
     {startsWithUser && <BlockBoundary><MainNode {...shared} useChat={props.useChat} boundary={boundary} nodeKey={group.keys[0]} /></BlockBoundary>}
     {hasProcess && !isAwaitingModel && <StickyLane kind="status" className={css.turnProcessSticky}>
       <Disclosure open={expanded} onChange={setExpanded} controls={flowId} buttonRef={processButton}
-        label={<GroupStatus group={group} sessionId={props.sessionId} useChat={props.useChat} useSessionPendingInteraction={props.useSessionPendingInteraction} motion={motion} />} />
+        label={<GroupStatus group={group} sessionId={props.sessionId} useChat={props.useChat} pending={interaction} motion={motion} />} />
     </StickyLane>}
     {boundary.status === 'closed' && hasProcess && autoFold && <ClosedProcessSummary open={expanded} onChange={setExpanded} controls={flowId}
       steps={steps.filter(step => {
@@ -610,7 +609,7 @@ const TurnGroup = memo(function TurnGroup({ group, motion, autoFold, pinnedKeys,
       onOpenChange={(key, value) => { pinProcess(); setFoldOpenByKey(current => ({ ...current, [key]: value })); }} renderStep={renderStep} />
     {/* 状态指示永远排在流程之后：AI 的响应永远出现在最新消息（含补充消息）的下方 */}
     {!hasProcess && boundary.status === 'open' && !isAwaitingModel && <div className={css.disclosure} data-reader-status-only>
-      <GroupStatus group={group} sessionId={props.sessionId} useChat={props.useChat} useSessionPendingInteraction={props.useSessionPendingInteraction} motion={motion} />
+      <GroupStatus group={group} sessionId={props.sessionId} useChat={props.useChat} pending={interaction} motion={motion} />
     </div>}
     {showDeliverablesRow(boundary.status, deliverables) && <DeliverablesRow deliverables={deliverables} openFile={props.openFile} revealFile={props.revealFile} openMode={openMode} />}
     {boundary.status === 'closed' && <BlockBoundary><OfficialTail official={official} owner={tailOwner} produced={deliverables} /></BlockBoundary>}
@@ -625,7 +624,7 @@ export function Reader(props: ReaderProps) {
   const nodes = props.useChat(snapshot => snapshot.nodes);
   const timeline = props.useChat(snapshot => snapshot.timeline);
   const running = props.useSession(snapshot => snapshot.running);
-  const pending = props.useSessionPendingInteraction(snapshot => snapshot.get(props.sessionId));
+  const pending = props.useSessionStatus(snapshot => snapshot.get(props.sessionId)?.pendingInteraction);
   const openError = props.useSession(snapshot => snapshot.openError);
   const loading = props.useSession(snapshot => snapshot.openState === 'loading');
   const hasMore = props.useSession(snapshot => snapshot.hasMore);
@@ -816,7 +815,7 @@ export function Reader(props: ReaderProps) {
 
   // ChatView publishes data-chat-flow="" on its column. Skins treat a
   // scrollport without that hook as inspect-only and hide [data-composer-seat].
-  return <StreamMotionContext.Provider value={streamMotion}><div ref={root} className={css.root} data-reader-build="0.3.0-preview.1" data-dsh-better-display="0.3.0-preview.1" data-reader-wait-clock-version="input-v1" data-reader-wait-start={waitAnchor.time ?? undefined} data-motion={motion ? 'on' : 'off'} data-reader-glass={frostedGlass || undefined} data-reader-auto-fold={autoFold ? 'on' : 'off'}>
+  return <StreamMotionContext.Provider value={streamMotion}><div ref={root} className={css.root} data-reader-build="0.3.4" data-dsh-better-display="0.3.4" data-reader-wait-clock-version="input-v1" data-reader-wait-start={waitAnchor.time ?? undefined} data-motion={motion ? 'on' : 'off'} data-reader-glass={frostedGlass || undefined} data-reader-auto-fold={autoFold ? 'on' : 'off'}>
     <TimelineRail items={timelineItems} activeTurn={activeTurn} busyTurn={busyTurn} onNavigate={onNavigateTurn} />
     <div className={css.column} data-chat-flow="">
       <StickyLane kind="toolbar" className={css.toolbar}>

package/src/client/ToolActivity.tsx

@@ -2,7 +2,7 @@ import { memo, useEffect, useId, useMemo, useRef, useState } from 'react';
 import type { ToolCallBlock, ToolResultNode } from '@deepseek-ai/dsh-client-ui-conversation/client';
 import type { DiffHunk, ReadBlockLine, SearchFileGroup } from '@deepseek-ai/dsh-client-ui-primitives';
 import { DiffBlock, DisclosureRow, JsonTree, ReadBlock, SearchBlock, TerminalBlock, WebBlock,
-  IconApiOutline14, IconBrowseOutline16, IconEditOutline16, IconSearchOutline16, IconSkillOutline16, IconSparkle16 } from '@deepseek-ai/dsh-client-ui-primitives';
+  IconApiOutlineRegular, IconBrowseOutlineRegular, IconEditOutlineRegular, IconSearchOutlineRegular, IconSkillOutlineRegular, IconSparkleRegular } from '@deepseek-ai/dsh-client-ui-primitives';
 import { Blocks, contentBlocks } from './Blocks.js';
 import { OfficialTool } from './OfficialContent.js';
 import { ProcessFragment } from './motion.js';
@@ -15,7 +15,7 @@ import { diffBlockLabels, jsonTreeLabels, readBlockLabels, searchBlockLabels, te
 import css from './Reader.module.css';
 
 const LABEL: Record<ToolPhase, string> = { preparing: '输入生成中', running: '执行中', returned: '已返回', succeeded: '已完成', failed: '失败', interrupted: '已中断' };
-const ICONS = { write: IconEditOutline16, read: IconBrowseOutline16, terminal: IconApiOutline14, search: IconSearchOutline16, web: IconSearchOutline16, code: IconApiOutline14, other: IconSparkle16 } satisfies Record<ToolCategory, unknown>;
+const ICONS = { write: IconEditOutlineRegular, read: IconBrowseOutlineRegular, terminal: IconApiOutlineRegular, search: IconSearchOutlineRegular, web: IconSearchOutlineRegular, code: IconApiOutlineRegular, other: IconSparkleRegular } satisfies Record<ToolCategory, unknown>;
 const number = new Intl.NumberFormat('zh-CN');
 const language = (path: string | undefined) => path?.split('.').at(-1);
 const duration = (ms: number) => ms < 1000 ? `${Math.round(ms)} 毫秒` : `${(ms / 1000).toFixed(ms < 10000 ? 1 : 0)} 秒`;
@@ -179,7 +179,7 @@ export const ToolActivity = memo(function ToolActivityView({ entry, motion, turn
     return () => document.removeEventListener('selectionchange', track);
   }, []);
   const facts = executionFacts(entry.block);
-  const Icon = model.name === 'skill' ? IconSkillOutline16 : ICONS[model.category];
+  const Icon = model.name === 'skill' ? IconSkillOutlineRegular : ICONS[model.category];
   const block = entry.block;
   const native = block ? toolRowModel(model.name, block) : null;
   const skillName = typeof model.args?.name === 'string' ? model.args.name.split('\n')[0] : model.raw.split('\n')[0];

package/src/client/index.tsx

@@ -1,5 +1,7 @@
 import type { Context } from '@deepseek-ai/cordis';
+import type {} from '@deepseek-ai/dsh-api-remotes/client';
 import type {} from '@deepseek-ai/dsh-api-session-controller/client';
+import type {} from '@deepseek-ai/dsh-client-connection/client';
 import type { SessionId } from '@deepseek-ai/dsh-session/types';
 import { resolveWorkspacePath } from '@deepseek-ai/dsh-util-workspace-path';
 import * as workspacePathPkg from '@deepseek-ai/dsh-util-workspace-path';

package/src/client/markdown/render.tsx

@@ -524,7 +524,8 @@ function renderImage(url: string, alt: string, key: Key, context: MarkdownRender
   let imageSrc = remote
   if (rewritten !== undefined) {
     try {
-      if (['http:', 'https:', 'blob:', 'data:'].includes(new URL(rewritten).protocol)) imageSrc = rewritten
+      const parsed = new URL(rewritten)
+      if (['http:', 'https:', 'blob:', 'data:'].includes(parsed.protocol) || rewritten.startsWith('dsh-app://app/api/file?')) imageSrc = rewritten
     } catch { /* A vocabulary result must be an absolute URL. */ }
   }
   if (imageSrc === undefined) {

package/src/client/native/ContextInjectionRow.module.css

@@ -60,3 +60,7 @@
   /* Figma 10:2482 code text: the form bodies inherit it from the scrollport. */
   font: 400 11px/16px var(--ds-font-family-code);
 }
+
+.toolChanges {
+  white-space: nowrap;
+}

package/src/client/native/ContextInjectionRow.tsx

@@ -1,9 +1,10 @@
 import { useState } from 'react'
 import type { ContextMessageNode } from '@deepseek-ai/dsh-client-ui-conversation/client'
 import type { TranslateNS } from '@deepseek-ai/dsh-client-ui-slots'
-import { DisclosureRow, IconBrowseOutline16 } from '@deepseek-ai/dsh-client-ui-primitives'
+import { DisclosureRow, IconBrowseOutlineRegular } from '@deepseek-ai/dsh-client-ui-primitives'
 import { ReferenceIcon } from './ReferenceIcon.js'
 import { contextBody } from './ContextBody.js'
+import { toolUpdateRows } from './tool-update.js'
 import css from './ContextInjectionRow.module.css'
 
 /** Props for the logged non-user message presentation. */
@@ -18,9 +19,9 @@ export interface ContextInjectionRowProps {
    * optional here and resolved below, so the row renders on either host instead
    * of throwing on `undefined.role` and degrading its whole block boundary.
    */
-  provenance?: ContextMessageNode['provenance'] | null
+  provenance?: ContextMessageNode['producer'] | null
   /** Alpha-generation spelling of {@link provenance}. */
-  producer?: ContextMessageNode['provenance'] | null
+  producer?: ContextMessageNode['producer'] | null
   /** Producer-declared information form; null renders the opaque body. */
   form: ContextMessageNode['form']
   /** The owning view's locale seat, passed down as a plain prop. */
@@ -46,16 +47,32 @@ export function ContextInjectionRow({ content, source, provenance, producer, for
   // Resolved rather than declared: a form whose fields are unreadable renders
   // the opaque body, and the marker must say what the row actually shows.
   const { rendered, summary, body } = contextBody(form, { content, source, t })
+  const tools = toolUpdateRows(content)
+  const toolSummary = tools === null || tools.single !== null ? null
+    : tools.added.length > 0 && tools.removed.length > 0
+      ? t('message.toolsChanged', { added: tools.added.length, removed: tools.removed.length })
+      : tools.added.length > 0
+        ? t('message.toolsAddedCount', { count: tools.added.length })
+        : t('message.toolsRemovedCount', { count: tools.removed.length })
 
   return (
     <DisclosureRow
       className={css.root}
-      icon={view.role === 'recall'
+      icon={view.role === 'recall' && tools === null
         ? <span data-context-recall-icon><ReferenceIcon kind="session" /></span>
-        : <IconBrowseOutline16 size={14} />}
+        : <IconBrowseOutlineRegular size={14} />}
       chevronClassName={css.chevron}
-      title={t(view.role === 'recall' ? 'message.contextRecall' : 'message.contextInjection')}
-      collapsedContent={view.label === null ? undefined : (
+      title={tools?.single !== undefined && tools.single !== null
+        ? t(tools.single.type === 'tool-addition' ? 'message.toolAdded' : 'message.toolRemoved', { name: tools.single.toolName })
+        : tools !== null
+          ? t('message.toolsUpdated')
+          : t(view.role === 'recall' ? 'message.contextRecall' : 'message.contextInjection')}
+      collapsedContent={toolSummary !== null ? (
+        <>
+          <span className={css.sep} aria-hidden />
+          <span className={css.summary}>{toolSummary}</span>
+        </>
+      ) : tools !== null || view.label === null ? undefined : (
         /* ToolRow's separator shape: an aria-hidden dot, so the accessible name
            stays the two readable parts and the two disclosure rows expose one
            name shape. A source that names no producer drops the dot with it. */
@@ -71,13 +88,18 @@ export function ContextInjectionRow({ content, source, provenance, producer, for
         </>
       )}
       keepContentWhenOpen
-      open={open}
-      expandable
+      open={open && tools?.single == null}
+      expandable={tools?.single == null}
       expandOnRowClick
       onToggle={() => { setOpen(value => !value) }}
     >
       <div className={css.body} data-context-injection-body data-context-form={rendered ?? undefined}>
-        {body}
+        {tools === null ? body : (
+          <div className={css.toolChanges}>
+            {tools.added.length > 0 && <div>{t('message.toolsAdded', { names: tools.added.join(', ') })}</div>}
+            {tools.removed.length > 0 && <div>{t('message.toolsRemoved', { names: tools.removed.join(', ') })}</div>}
+          </div>
+        )}
       </div>
     </DisclosureRow>
   )

package/src/client/native/ReferenceIcon.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react'
 import {
-  IconBrowseOutline16, IconFolderClose16,
+  IconBrowseOutlineRegular, IconFolderCloseRegular,
 } from '@deepseek-ai/dsh-client-ui-primitives'
 
 /** Reference domains with distinct composer and transcript glyphs. */
@@ -29,7 +29,7 @@ export function ReferenceIcon({ kind, size = 16, className }: ReferenceIconProps
           />
         </svg>
       )
-    case 'file': return <IconBrowseOutline16 size={size} className={className} />
-    case 'folder': return <IconFolderClose16 size={size} className={className} />
+    case 'file': return <IconBrowseOutlineRegular size={size} className={className} />
+    case 'folder': return <IconFolderCloseRegular size={size} className={className} />
   }
 }

package/src/client/native/tool-call-model.ts

@@ -217,7 +217,7 @@ function deriveBody(variant: ToolRowVariant, argsRaw: string): string | null {
 export function toolRowModel(toolName: string, block: ToolCallBlock, cwd?: string, home?: string): ToolRowModel {
   const variant = classifyTool(toolName)
   const done = 'kind' in block
-  const argsRaw = (done ? block.call?.argsRaw : block.argsRaw) ?? ''
+  const argsRaw = (done ? block.call?.argsRaw : ('argsRaw' in block ? block.argsRaw : '')) ?? ''
   const state: ToolRowState = !done ? 'running'
     : block.error?.code === 'interrupted' ? 'stopped'
       : block.isError ? 'error' : 'ok'

package/src/client/native/tool-update.ts

@@ -0,0 +1,32 @@
+/** One developer tool-change block the 0.1.7-rc.2 context row names in place. */
+export interface ToolChangeBlock {
+  type: 'tool-addition' | 'tool-removal'
+  toolName: string
+}
+
+/** Names collected from a context whose every block is a tool change. */
+export interface ToolUpdateRows {
+  added: readonly string[]
+  removed: readonly string[]
+  /** The only block, when the row is a single add or removal. */
+  single: ToolChangeBlock | null
+}
+
+/**
+ * Classify a context as the rc.2 tool-update row.
+ * Mixed or empty content stays on the generic injection presentation.
+ * @param content - durable context blocks.
+ * @returns collected names, or null when any block is not a tool change.
+ */
+export function toolUpdateRows(content: readonly { readonly type: string; readonly toolName?: string }[]): ToolUpdateRows | null {
+  if (content.length === 0) return null
+  const rows: ToolChangeBlock[] = []
+  for (const block of content) {
+    if (block.type !== 'tool-addition' && block.type !== 'tool-removal') return null
+    if (typeof block.toolName !== 'string') return null
+    rows.push({ type: block.type, toolName: block.toolName })
+  }
+  const added = rows.flatMap(row => row.type === 'tool-addition' ? [row.toolName] : [])
+  const removed = rows.flatMap(row => row.type === 'tool-removal' ? [row.toolName] : [])
+  return { added, removed, single: rows.length === 1 ? rows[0]! : null }
+}

package/src/client/official-slots.tsx

@@ -62,7 +62,7 @@ const READER_NODES = new Set(['user', 'steering', 'assistant-step', 'tool-call',
 const EXPECTED: Record<OfficialFamily, Spec> = {
   actions: { kind: 'list', scope: 'session' },
   tools: { kind: 'keyed', scope: 'session' },
-  tail: { kind: 'chain', scope: 'session' },
+  tail: { kind: 'list', scope: 'session' },
   nodes: { kind: 'keyed', scope: 'session' },
   images: { kind: 'single', scope: 'session' },
 };

package/src/client/platform-media.ts

@@ -1,8 +1,14 @@
-/** RC2 Chat's same-origin local media contract. Authorization stays Host-side. */
+/** Web or Desktop file route. Authorization stays Host-side. */
 export function localPathMediaUrl(protocol: string, origin: string, value: string): string | undefined {
-  if (protocol !== 'http:' && protocol !== 'https:') return undefined;
   if (!value.startsWith('/') || value.startsWith('//')) return undefined;
-  return `${origin}/api/file?path=${encodeURIComponent(value)}`;
+  if (protocol === 'http:' || protocol === 'https:') {
+    return `${origin}/api/file?path=${encodeURIComponent(value)}`;
+  }
+  // Official fileMediaUrl accepts the Desktop application base dsh-app://app/.
+  if (protocol === 'dsh-app:' && origin === 'dsh-app://app') {
+    return `dsh-app://app/api/file?path=${encodeURIComponent(value)}`;
+  }
+  return undefined;
 }
 
 export const readerPathImages = {

package/src/client/primitive-labels.ts

@@ -14,22 +14,23 @@ export const markdownLabels: MarkdownLabels = {
 };
 
 export const readBlockLabels: ReadBlockLabels = {
+  codeLabel: '代码', wrapLabel: '自动换行', unwrapLabel: '不换行',
   window: (shown, total) => `显示 ${shown} / ${total} 行`,
   copy: '复制', copied: '已复制', collapseAria: '收起文件内容',
   expandAria: hidden => `展开其余 ${hidden} 行`, collapse: '收起', expand: hidden => `展开其余 ${hidden} 行`,
 };
 
 export const terminalBlockLabels: TerminalBlockLabels = {
-  signal: signal => `信号 ${signal}`, exitCode: code => `退出码 ${code}`,
+  signal: signal => `信号 ${signal}`, exitCode: code => `退出码 ${code}`, noExitCode: '无退出码',
   running: '执行中', failed: '失败', done: '已完成', copy: '复制', copied: '已复制',
   noOutput: '没有输出', collapseAria: '收起命令输出', collapse: '收起',
   expandAria: hidden => `展开其余 ${hidden} 行`, expand: hidden => `展开其余 ${hidden} 行`,
 };
 
 export const diffBlockLabels: DiffBlockLabels = {
+  codeLabel: '代码', wrapLabel: '自动换行', unwrapLabel: '不换行',
   copy: '复制', copied: '已复制', collapseAria: '收起差异', collapse: '收起',
   expandAria: hidden => `展开其余 ${hidden} 行`, expand: hidden => `展开其余 ${hidden} 行`,
-  files: count => `${count} 个文件`,
 };
 
 export const searchBlockLabels: SearchBlockLabels = {

package/src/client/tool-activity.ts

@@ -95,13 +95,13 @@ export function toolIdentity(entry: Pick<ToolActivityEntry, 'block' | 'draft'>)
   const block = entry.block;
   return {
     name: block ? 'kind' in block ? block.call?.name ?? entry.draft?.name ?? '工具调用' : block.name : entry.draft?.name ?? '工具调用',
-    raw: block ? 'kind' in block ? block.call?.argsRaw ?? entry.draft?.argsRaw ?? '' : block.argsRaw : entry.draft?.argsRaw ?? '',
+    raw: block ? 'kind' in block ? block.call?.argsRaw ?? entry.draft?.argsRaw ?? '' : ('argsRaw' in block ? block.argsRaw : '') : entry.draft?.argsRaw ?? '',
   };
 }
 
 /** Name and raw arguments of any call block, whether it has landed or is pending. */
 function childIdentity(block: ToolCallBlock): { name?: string; raw: string } {
-  if (!block || !('kind' in block)) return { name: block?.name, raw: block?.argsRaw ?? '' };
+  if (!block || !('kind' in block)) return { name: block?.name, raw: block && 'argsRaw' in block ? block.argsRaw : '' };
   return { name: block.call?.name, raw: block.call?.argsRaw ?? '' };
 }
 

package/tests/browser-auto-fold.tsx

@@ -43,7 +43,7 @@ const useReaderStore: ReaderProps['useStore'] = selector => selector(useSyncExte
 const props = {
   sessionId: 'auto-fold-fixture', useChat: selector => selector(chat),
   useSession: selector => selector(sessionSnapshot), useSessions: selector => selector(sessionsSnapshot),
-  useSessionPendingInteraction: selector => selector(pending),
+  useSessionStatus: selector => selector(new Map([['auto-fold-fixture', { running: true, pendingInteraction: pending.get('auto-fold-fixture'), completionUnread: false }]])),
   useStore: useReaderStore, actions: session.actions, openPrefs: prefs,
   t: key => key, renderSlot: (_name, _owner, options) => options?.fallback ?? null,
   renderSlotChain: (_name, _owner, options) => options?.fallback ?? null,