dsh-better-display 0.2.1 → 0.3.0

package/scripts/verify-official-bridge.mjs

@@ -0,0 +1,119 @@
+/** Headless fixture verification; never attaches to the user's browser/Host. */
+import { createRequire } from 'node:module';
+import { readFile, mkdir, writeFile } from 'node:fs/promises';
+import { createServer } from 'node:http';
+import { homedir } from 'node:os';
+import { dirname, join, resolve } from 'node:path';
+import { pathToFileURL } from 'node:url';
+import assert from 'node:assert/strict';
+
+const harness = process.env.DSHX_HARNESS;
+if (!harness) throw new Error('Set DSHX_HARNESS to the target checkout.');
+const root = resolve(import.meta.dirname, '..');
+const require = createRequire(join(root, 'package.json'));
+const esbuild = createRequire(require.resolve('tsx')).resolve('esbuild');
+const { build } = await import(pathToFileURL(esbuild).href);
+const browserRuntime = join(homedir(), '.codex/playwright-runtime/runtime.mjs');
+const { launchPinnedChromium } = await import(pathToFileURL(browserRuntime).href);
+const out = join(root, '.evidence/official-bridge');
+await mkdir(out, { recursive: true });
+const paths = {
+  registry: 'ui-renderer/src/client/registry.ts', renderer: 'ui-renderer/src/client/scoped-slots.tsx',
+  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',
+};
+const webRequire = createRequire(join(harness, 'packages/client/web/package.json'));
+await build({
+  entryPoints: [join(root, 'tests/browser-official-bridge.tsx')], outfile: join(out, 'fixture.js'), bundle: true,
+  format: 'esm', platform: 'browser', jsx: 'automatic', sourcemap: true, logLimit: 5,
+  alias: {
+    ...Object.fromEntries(Object.entries(paths).map(([name, path]) => [`@fixture/${name}`, join(harness, 'packages/client', path)])),
+    '@deepseek-ai/dsh-client-ui-primitives': join(harness, 'packages/client/ui-primitives/src/index.ts'),
+    '@deepseek-ai/dsh-client-ui-slots': join(harness, 'packages/client/ui-slots/src/index.ts'),
+    react: dirname(require.resolve('react/package.json')), 'react-dom': dirname(webRequire.resolve('react-dom/package.json')),
+  },
+  loader: { '.woff2': 'dataurl', '.woff': 'dataurl', '.ttf': 'dataurl', '.svg': 'dataurl' },
+});
+const pixel = Buffer.from('iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAwMCAO+/lN8AAAAASUVORK5CYII=', 'base64');
+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; }
+  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');
+  res.end(await readFile(join(out, file)));
+});
+await new Promise(resolve => server.listen(0, '127.0.0.1', resolve));
+let browser;
+try {
+  browser = await launchPinnedChromium();
+  const page = await browser.newPage({ viewport: { width: 1200, height: 900 } });
+  const errors = [];
+  page.setDefaultTimeout(10000);
+  page.on('pageerror', error => { errors.push(String(error)); console.error(String(error)); });
+  page.on('console', msg => { if (msg.type() === 'error') { errors.push(msg.text()); console.error(msg.text().slice(0, 1200)); } });
+  await page.goto(`http://127.0.0.1:${server.address().port}`);
+  await page.getByRole('button', { name: '好的回答', exact: true }).waitFor();
+  assert.equal(await page.locator('[data-nested]').textContent(), 'nested official child');
+  await page.getByRole('button', { name: 'Count 0' }).click();
+  await page.getByRole('button', { name: 'Count 1' }).waitFor();
+  await page.evaluate(() => window.fixture.update());
+  await page.getByText('session-a / updated / turn-context', { exact: true }).waitFor();
+  await page.evaluate(() => window.fixture.addAction());
+  await page.getByRole('button', { name: 'Future official action' }).waitFor();
+  assert.equal(await page.getByRole('button', { name: 'Count 1' }).count(), 1);
+  assert.equal(await page.evaluate(() => window.fixture.observations.mounts), 1);
+  // Uses the real official dialog/controller with in-memory Remote replies.
+  await page.getByRole('button', { name: '好的回答', exact: true }).click();
+  await page.getByRole('dialog').waitFor();
+  await page.screenshot({ path: join(out, 'feedback-dialog.png') });
+  await writeFile(join(out, 'dialog.txt'), await page.getByRole('dialog').innerText());
+  const cancel = page.getByRole('button', { name: 'close', exact: true });
+  await cancel.click();
+  await page.getByRole('dialog').waitFor({ state: 'hidden' });
+  await page.getByRole('button', { name: '好的回答', exact: true }).click();
+  await page.getByRole('button', { name: '任务结果', exact: true }).click();
+  await page.getByRole('textbox', { name: '反馈详情' }).fill('Local fixture only');
+  await page.getByRole('button', { name: 'submit', exact: true }).click();
+  await page.getByRole('dialog').waitFor({ state: 'hidden' });
+  await page.getByRole('button', { name: '取消标记', exact: true }).waitFor();
+  const put = await page.evaluate(() => window.fixture.observations.requests.find(([method]) => method === 'put')[1]);
+  assert.deepEqual(put, { sessionId: 'session-a', messageId: 'message-1', rating: 'positive', note: 'Local fixture only', category: 'task-result', ifVersion: null });
+  await page.getByRole('button', { name: '取消标记', exact: true }).click();
+  await page.getByRole('button', { name: '好的回答', exact: true }).waitFor();
+  const tool = page.locator('[data-reader-tool]');
+  await tool.getByRole('button', { name: 'sample.ts', exact: true }).click();
+  const open = await page.evaluate(() => window.fixture.observations.opens[0]);
+  assert.deepEqual(open, { path: '/fixture/sample.ts', options: { line: 12 } });
+  await tool.locator('[data-disclosure-row]').click();
+  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();
+  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.evaluate(() => window.fixture.language());
+  await page.getByRole('button', { name: 'Good response', exact: true }).waitFor();
+  const image = page.locator('img[alt="本地样例"]');
+  assert.match(await image.getAttribute('src'), /\/api\/file\?path=%2Ffixture%2Fimage.png$/);
+  assert.equal(await image.evaluate(img => img.complete && img.naturalWidth > 0), true);
+  await page.screenshot({ path: join(out, 'reader-controls.png') });
+  await writeFile(join(out, 'tool.txt'), await page.locator('[data-reader-tool]').innerText());
+  const before = await page.evaluate(() => window.fixture.observations.subscriptions);
+  await page.evaluate(() => window.fixture.unmount());
+  await page.locator('[data-unmounted]').waitFor();
+  const after = await page.evaluate(() => window.fixture.observations.subscriptions);
+  assert.ok(after < before, `subscriptions did not release (${before} → ${after})`);
+  await page.evaluate(() => window.fixture.mount());
+  await page.getByRole('button', { name: 'Good response', exact: true }).waitFor();
+  assert.deepEqual(errors, []);
+  const result = { passed: true, assertions: ['real official feedback dialog', 'feedback submit/retract through mock Remote', 'official file opener with line', 'official read detail', 'official presented file preview/menu', 'no duplicate produced row', 'memo', 'locale change', 'session injection', 'store actions', 'context hook', 'nested slots', 'new official registration', 'stable mount', 'subscription cleanup', 'Reader remount', 'local image'], observations: await page.evaluate(() => window.fixture.observations) };
+  await writeFile(join(out, 'result.json'), JSON.stringify(result, null, 2) + '\n');
+  console.log(JSON.stringify(result));
+} finally {
+  await browser?.close();
+  await new Promise(resolve => server.close(resolve));
+}

package/src/client/Blocks.tsx

@@ -162,7 +162,7 @@ function MessageClock({ time }: { time: number }) {
   return <time className={css.messageClock} dateTime={new Date(time).toISOString()}>{formatMessageClock(time)}</time>;
 }
 
-export function CopyAnswer({ blocks, onFork, metrics }: { blocks: readonly AssistantBlock[]; onFork?: () => void; metrics?: BlockRenderProps['metrics'] }) {
+export function CopyAnswer({ blocks, onFork, metrics, extraActions }: { blocks: readonly AssistantBlock[]; onFork?: () => void; metrics?: BlockRenderProps['metrics']; extraActions?: ReactNode }) {
   const { receipt, copy } = useCopyReceipt();
   const text = blocks.filter((block): block is Extract<AssistantBlock, { kind: 'text' }> => block.kind === 'text').map(block => block.text).join('\n\n');
   const endedAt = metrics?.endedAt;
@@ -174,6 +174,7 @@ export function CopyAnswer({ blocks, onFork, metrics }: { blocks: readonly Assis
         <CopyGlyph />
       </button>
     )}
+    {extraActions}
     {onFork && (
       <button
         type="button"

package/src/client/OfficialContent.tsx

@@ -0,0 +1,57 @@
+import { useSyncExternalStore, type ReactNode } from 'react';
+import type { ChatConversationViewNode, ChatNodeOwnerProps, TurnTailOwnerProps } from '@deepseek-ai/dsh-client-ui-chat/client';
+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'];
+import { OFFICIAL_SEATS } from './official-slots.js';
+import type { BlockRenderProps } from './types.js';
+
+export function OfficialActions({ official, messageId }: Pick<BlockRenderProps, 'official'> & { messageId?: MessageId }) {
+  if (!official || !messageId) return null;
+  return <span data-reader-official-actions style={{ display: 'contents' }}>
+    {official.renderSlot(OFFICIAL_SEATS.actions, { messageId })}
+  </span>;
+}
+
+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,
+      openFile: openFile ?? (() => {}),
+      loadImage: official.officialImageLoader,
+      inspect: () => official.openView('trajectory', block.callId),
+    }, { entryKey: toolName, fallback })}
+  </div>;
+}
+
+export function OfficialNode({ node, fallback, ...render }: BlockRenderProps & { node: ChatConversationViewNode; fallback: ReactNode }) {
+  const official = render.official;
+  if (!official) return fallback;
+  const owner: ChatNodeOwnerProps = {
+    cwd: render.cwd,
+    openFile: render.openFile ?? (() => {}),
+    forkAt: render.forkAt ?? (() => {}),
+    inspectCall: callId => official.openView('trajectory', callId),
+    loadImage: official.officialImageLoader,
+    renderMessageImages: images => official.renderSlot(OFFICIAL_SEATS.images, {
+      ...images, loadImage: official.officialImageLoader,
+    }),
+    fileMentions: official.officialFileMentions,
+  };
+  const turn = node.location.kind === 'turn' || node.location.kind === 'step' ? node.location.turn : undefined;
+  // 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 })}
+  </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)}
+  </div> : null;
+}

package/src/client/Reader.module.css

@@ -100,9 +100,13 @@
 .chevron { flex: none; stroke: currentColor; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: transform 260ms cubic-bezier(.22,1,.36,1); }
 .chevron[data-open=true] { transform: rotate(90deg); }
 .disclosureBody { overflow: hidden; height: 0; transform-origin: top center; will-change: height, opacity, transform; }
-.processContents { display: flow-root; border-left: 1px solid var(--dsw-alias-border-l2); padding: 3px 0 2px 17px; margin: 0 0 0 6px; color: var(--dsw-alias-label-secondary); font-size: 14px; line-height: 24px; }
+/* One rail geometry for every nested lane. These three rules used to sit at
+   6px / 24px / 6px with 1px, 1px and 2px rails, so the vertical guides stepped
+   in and out down the page. They now share --reader-rail: same left edge, same
+   rail width, same gutter, so a column of nested rows reads as one line. */
+.processContents { display: flow-root; border-left: 1px solid var(--dsw-alias-border-l2); padding: 3px 0 2px var(--reader-gutter, 16px); margin: 0 0 0 var(--reader-rail, 6px); color: var(--dsw-alias-label-secondary); font-size: 14px; line-height: 24px; }
 .processContents > :last-child { margin-bottom: 0; }
-.processCommentary { color: var(--dsw-alias-label-secondary); font-size: 14px; line-height: 24px; margin: 4px 0 8px 6px; padding-left: 12px; border-left: 2px solid var(--dsw-alias-border-l2); }
+.processCommentary { color: var(--dsw-alias-label-secondary); font-size: 14px; line-height: 24px; margin: 4px 0 8px var(--reader-rail, 6px); padding-left: var(--reader-gutter, 16px); border-left: 1px solid var(--dsw-alias-border-l2); }
 .processFrame { min-width: 0; }
 .toolActivity { min-width: 0; color: var(--dsw-alias-label-secondary); }
 .nativeToolRow { min-width: 0; }
@@ -297,8 +301,9 @@
 .systemPrompt { margin: 0; max-height: 320px; padding: 12px; overflow: auto; border-radius: 8px; background: var(--dsw-alias-bg-module-platform); color: var(--dsw-alias-label-primary); font: 12px/20px ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
 .commandInput { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
 .toolReceipt .blocks, .toolDocument .blocks { font-size: 13px; line-height: 22px; }
-.toolChildren { margin: 0 14px 12px 24px; padding-left: 12px; border-left: 1px solid var(--dsw-alias-border-l2); display: flex; flex-direction: column; gap: 9px; }
-@container (max-width: 420px) { .toolHeading { gap: 7px; padding: 11px 10px 6px; grid-template-columns: 16px minmax(0, 1fr) auto; } .toolHeadingState { gap: 4px; } .toolLedger { padding-left: 33px; padding-right: 10px; } .toolPanel { padding: 10px; } .toolChildren { margin-left: 12px; padding-left: 8px; } }
+.toolChildren { margin: 0 14px 12px var(--reader-rail, 6px); padding-left: var(--reader-gutter, 16px); border-left: 1px solid var(--dsw-alias-border-l2); display: flex; flex-direction: column; gap: 9px; }
+@container (max-width: 420px) { .toolHeading { gap: 7px; padding: 11px 10px 6px; grid-template-columns: 16px minmax(0, 1fr) auto; } .toolHeadingState { gap: 4px; } .toolLedger { padding-left: 33px; padding-right: 10px; } .toolPanel { padding: 10px; } /* .toolChildren keeps the shared rail here too: a different left edge under a
+     narrow container is what made nested rows read as misplaced lines. */ }
 @media (pointer: coarse) { .toolTabs > button { min-height: 44px; } }
 /* Transitions.dev — Reasoning stream (user-supplied). Transform the one real
    transcript; hand the painted offset to native scrolling for manual reading. */
@@ -465,15 +470,18 @@
 .morphDrawer { overflow: hidden; height: 0; transform-origin: top center; will-change: height, opacity, transform; }
 .liveFoldImpact { animation: liveFoldElastic 180ms cubic-bezier(0.2, 0, 0, 1) both; }
 @keyframes liveFoldElastic { 0% { transform: scale(1); } 50% { transform: scale(1.015); } 100% { transform: scale(1); } }
-.liveFoldContainer { position: sticky; top: max(var(--reader-toolbar-height, 40px), var(--reader-status-height, 40px)); z-index: 6; background: var(--dsw-alias-bg-base); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 4px 0; margin-bottom: 6px; animation: liveFoldPulse 320ms cubic-bezier(0.16, 1, 0.3, 1) both; transform-origin: left center; will-change: transform, opacity; }
+.liveFoldContainer { position: sticky; top: calc(max(var(--reader-toolbar-height, 40px), var(--reader-status-height, 40px)) + var(--reader-sticky-lane, 40px) * 2); z-index: 4; background: var(--dsw-alias-bg-base); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 4px 0; margin-bottom: 6px; animation: liveFoldPulse 320ms cubic-bezier(0.16, 1, 0.3, 1) both; transform-origin: left center; will-change: transform, opacity; }
 @keyframes liveFoldPulse { 0% { transform: translateY(-4px) scale(0.98); opacity: 0.8; } 50% { transform: translateY(0) scale(1.02); opacity: 1; } 100% { transform: translateY(0) scale(1); opacity: 1; } }
 [data-motion=off] .liveFoldContainer { animation: none !important; }
 @media (prefers-reduced-motion: reduce) { .liveFoldContainer { animation: none !important; } }
 .priorFoldDrawer { display: flex; flex-direction: column; gap: 14px; min-width: 0; width: 100%; }
 .jump { margin-top: -34px; flex: none; width: 34px; height: 34px; display: flex; justify-content: center; align-items: center; padding: 0; border: 0; border-radius: 100px; color: var(--dsw-alias-label-primary); background: var(--dsw-alias-button-floating-fill, var(--dsw-alias-bg-base)); box-shadow: var(--dsw-elevation-panel, 0 2px 8px var(--dsw-alias-border-l1)); pointer-events: auto; }
 .jump:hover { background: var(--dsw-alias-button-floating-hover, var(--dsw-alias-interactive-bg-hover)); }
-.foldSummary { display: inline-flex; align-items: baseline; white-space: nowrap !important; max-width: 100%; }
-.foldSummaryPart { display: inline-flex; align-items: baseline; white-space: nowrap !important; }
+/* The digest is a single line. nowrap on the parent does not stop the parts
+   from wrapping, so each part is pinned too and the run clips with an ellipsis
+   when the column is narrow. */
+.foldSummary { display: inline-flex; align-items: baseline; white-space: nowrap !important; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
+.foldSummaryPart { display: inline-flex; align-items: baseline; white-space: nowrap !important; flex: none; }
 .numberRollRoot { display: inline-flex; position: relative; overflow: hidden; vertical-align: baseline; line-height: inherit; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; white-space: nowrap !important; flex-shrink: 0; min-width: 1.45em; justify-content: center; text-align: center; }
 .numberRollSizer { visibility: hidden; user-select: none; pointer-events: none; line-height: inherit; white-space: nowrap; }
 .numberRollDigit { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; line-height: inherit; white-space: nowrap; }
@@ -522,9 +530,16 @@
    first lane and its containing block always ends above the seat, so it can
    never reach the band, and 7 keeps it above the host's code-block banners. */
 .toolbar { width: 100%; max-width: 100%; align-self: stretch; box-sizing: border-box; min-height: 40px; z-index: 7; border-bottom: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
+/* Every sticky lane used to pin to the SAME top: the status row, the folded
+   summary row and the live-fold container all sat at
+   max(toolbar-height, status-height) with z-index 6. Three siblings competing
+   for one slot paint over each other in scroll order, which is what "展开以后
+   内容被盖住、看不见" was: the disclosure opened, and the row that followed
+   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; }
 /* The same summary row stays in flow until it reaches the measured top lane. */
-.flowCell[data-flow-summary], .closedProcessSummary { position: sticky; top: max(var(--reader-toolbar-height, 40px), var(--reader-status-height, 40px)); z-index: 6; 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], .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; }
 .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); }

package/src/client/Reader.tsx

@@ -6,6 +6,7 @@ import { JsonBlock, MarkdownText } from '@deepseek-ai/dsh-client-ui-primitives';
 import { BlockBoundary, Blocks, contentBlocks, CopyAnswer, UserMessageActions } from './Blocks.js';
 import { ReasoningCard } from './ReasoningCard.js';
 import { ToolActivity, ToolMedia } from './ToolActivity.js';
+import { OfficialActions, OfficialNode, OfficialTail } from './OfficialContent.js';
 import { preparingLabel, readerFlow } from './tool-activity.js';
 import { Disclosure, ProcessFragment, RetiringContent, StatusText, useMotionAllowed, usePinnedSelection, useReadingScroll } from './motion.js';
 import { StreamMotionContext } from './streaming.js';
@@ -181,7 +182,7 @@ const AssistantNode = memo(function AssistantNode({ useChat, nodeKey, boundary,
             // of its own; passing it would fork the whole session instead.
             const anchor = forkAnchorSeq([data.finalNode, { seq: render.forkSeq }]);
             return render.forkAt && anchor !== undefined ? () => render.forkAt!(anchor) : undefined;
-          })()} metrics={render.metrics} />
+          })()} metrics={render.metrics} extraActions={<OfficialActions official={render.official} messageId={data.finalNode?.messageId} />} />
         )}
       </article>
     </RetiringContent>;
@@ -226,6 +227,7 @@ const MainNode = memo(function MainNode({ useChat, nodeKey, boundary, pinned, pr
   if (isNode(node, 'turn-max-tokens')) return <div className={css.notice}>已到达输出长度限制，回答尚未完整。</div>;
   if (isNode(node, 'model-retry')) return node.data.current.retryState === 'scheduled'
     ? <div className={css.notice} role="status">模型请求未成功，正在等待重试。详情保留在执行过程中。</div> : null;
+  if (isNode(node, 'command') && render.official) return <OfficialNode {...render} node={node} fallback={<JsonBlock label="命令记录" payload={node.data} truncatedLabel={truncatedJsonLabel} />} />;
   if (isNode(node, 'command')) {
     if (node.data.outcome?.kind === 'error') return <div className={css.error} role="alert">
       <svg className={css.errorIcon} viewBox="0 0 16 16" fill="none" stroke="currentColor">
@@ -245,10 +247,11 @@ const MainNode = memo(function MainNode({ useChat, nodeKey, boundary, pinned, pr
   // host (it appears nowhere in the installed packages), so a slash command arrives
   // as 'command' above and is rendered there. Keeping the branch only made the file
   // look like it handled a case that cannot occur.
-  return <div className={css.unknown} data-reader-anchor>
+  return <OfficialNode {...render} node={node} fallback={<div className={css.unknown} data-reader-anchor>
     <p>此记录类型暂未接入阅读页：{node.kind}</p>
+    {render.official && <button type="button" className={css.textButton} onClick={() => render.official!.openView('chat', node.key)}>在对话中查看</button>}
     <JsonBlock label="查看原始记录" payload={node.data} truncatedLabel={truncatedJsonLabel} />
-  </div>;
+  </div>} />;
 });
 
 /**
@@ -504,11 +507,11 @@ const TurnGroup = memo(function TurnGroup({ group, motion, autoFold, pinnedKeys,
       : item.key === key || ('nodeKey' in item.step && item.step.nodeKey === key)));
   const expanded = !autoFold || holdingSelection || processExpanded(expansionChoice, boundary);
   const [foldOpenByKey, setFoldOpenByKey] = useState<Record<string, boolean>>({});
+  useLayoutEffect(() => {
+    // Restoring automatic folding also releases live "prior steps" disclosures.
+    if (autoFold) setFoldOpenByKey(current => Object.keys(current).length ? {} : current);
+  }, [autoFold]);
   const deliverables = useMemo(() => getTurnDeliverables(turn, flow), [turn, flow]);
-  const fileMentions = useMemo(
-    () => deliverables.length > 0 && props.openFile ? createProducedFileMentions(deliverables, props.openFile) : undefined,
-    [deliverables, props.openFile],
-  );
   const tailData = useMemo(() => {
     for (const key of group.keys) {
       const n = nodes.get(key);
@@ -516,6 +519,21 @@ const TurnGroup = memo(function TurnGroup({ group, motion, autoFold, pinnedKeys,
     }
     return undefined;
   }, [group.keys, nodes]);
+  const tailOwner = useMemo(() => turn && tailData ? {
+    turn, seq: tailData.closing?.finalNode.seq ?? tailData.seq, openFile: props.openFile,
+  } : undefined, [turn, tailData, props.openFile]);
+  const fileMentions = useMemo(() => {
+    const official = tailOwner ? props.officialFileMentions(tailOwner) : undefined;
+    const reader = deliverables.length > 0 ? createProducedFileMentions(deliverables, props.openFile) : undefined;
+    return official || reader ? { resolve: (value: string) => official?.resolve(value) ?? reader?.resolve(value) } : undefined;
+  }, [tailOwner, props.officialFileMentions, deliverables, props.openFile]);
+  const official = useMemo(() => ({
+    renderSlot: props.renderSlot, renderSlotChain: props.renderSlotChain,
+    officialImageLoader: props.officialImageLoader, officialFileMentions: props.officialFileMentions,
+    officialPreviewFile: props.officialPreviewFile,
+    officialHost: props.officialHost, openView: props.openView,
+  }), [props.renderSlot, props.renderSlotChain, props.officialImageLoader, props.officialFileMentions, props.officialPreviewFile, props.officialHost, props.openView]);
+  const cwd = props.useSessions(state => state.byId[props.sessionId]?.cwd);
   const runMs = turn?.start && turn?.end ? Math.max(0, turn.end.time - turn.start.time) : undefined;
   const metrics = useMemo(() => ({
     usage: tailData?.tokenUsage,
@@ -545,7 +563,8 @@ const TurnGroup = memo(function TurnGroup({ group, motion, autoFold, pinnedKeys,
     forkSeq,
     fileMentions,
     metrics,
-    getToolView: props.getToolView,
+    official,
+    cwd,
   };
   const terminal = terminalLabel(boundary.reason);
   const hasTurnError = flow.some(item => item.kind === 'node' && nodes.get(item.nodeKey)?.kind === 'turn-error');
@@ -594,6 +613,7 @@ const TurnGroup = memo(function TurnGroup({ group, motion, autoFold, pinnedKeys,
       <GroupStatus group={group} sessionId={props.sessionId} useChat={props.useChat} useSessionPendingInteraction={props.useSessionPendingInteraction} 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>}
     {showTerminalNotice && <div className={css.notice} data-reader-terminal>{terminal}</div>}
   </section>;
 });
@@ -622,6 +642,14 @@ export function Reader(props: ReaderProps) {
   );
   const storeAutoFold = props.useStore(state => state.autoFold);
   const autoFold = prefsSnap?.autoFold ?? (prefsSnap?.foldIntensity !== undefined ? prefsSnap.foldIntensity !== 0 : undefined) ?? storeAutoFold ?? true;
+  const previousAutoFold = useRef(autoFold);
+  useLayoutEffect(() => {
+    const restored = autoFold && !previousAutoFold.current;
+    previousAutoFold.current = autoFold;
+    // Watch the effective preference so toolbar and Settings changes behave alike.
+    // Reading while folding is off must not pin completed process content forever.
+    if (restored) props.actions.resetExpanded();
+  }, [autoFold, props.actions]);
   const frostedGlass = frostedGlassOf(prefsSnap);
   const streamMotion = useMemo(() => ({ enabled: motion, activatedAt: activatedAt.current }), [motion]);
   const groups = useMemo(() => groupNodes(order, key => nodes.get(key)), [order, nodes, timeline]);
@@ -788,7 +816,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-dsh-better-display="0.2.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.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'}>
     <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

@@ -4,6 +4,7 @@ import type { DiffHunk, ReadBlockLine, SearchFileGroup } from '@deepseek-ai/dsh-
 import { DiffBlock, DisclosureRow, JsonTree, ReadBlock, SearchBlock, TerminalBlock, WebBlock,
   IconApiOutline14, IconBrowseOutline16, IconEditOutline16, IconSearchOutline16, IconSkillOutline16, IconSparkle16 } from '@deepseek-ai/dsh-client-ui-primitives';
 import { Blocks, contentBlocks } from './Blocks.js';
+import { OfficialTool } from './OfficialContent.js';
 import { ProcessFragment } from './motion.js';
 import { activityPhase, activitySummary, callDiffHunks, diffTotals, executionFacts, objectValue, toolIdentity } from './tool-activity.js';
 import type { ToolActivityEntry, ToolCategory, ToolPhase } from './tool-activity.js';
@@ -14,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, other: IconSparkle16 } satisfies Record<ToolCategory, unknown>;
+const ICONS = { write: IconEditOutline16, read: IconBrowseOutline16, terminal: IconApiOutline14, search: IconSearchOutline16, web: IconSearchOutline16, code: IconApiOutline14, other: IconSparkle16 } 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)} 秒`;
@@ -80,28 +81,14 @@ function searchFiles(value: unknown): SearchFileGroup[] | null {
   return files;
 }
 
-function CustomToolWrapper({ Component, block, toolName, cwd, openFile }: {
-  Component: any;
-  block: any;
-  toolName: string;
-  cwd?: string;
-  openFile?: (path: string) => Promise<void> | void;
-}) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  useEffect(() => {
-    // If the component renders a collapsed disclosure row (like DiffCard with role="button" and aria-expanded="false"),
-    // expand it automatically once so details are immediately visible inside ResultView.
-    const row = containerRef.current?.querySelector<HTMLElement>('[role="button"][aria-expanded="false"]');
-    if (row) row.click();
-  }, []);
-  return (
-    <div ref={containerRef} data-reader-tool-custom>
-      <Component block={block} toolName={toolName} cwd={cwd} openFile={openFile} />
-    </div>
-  );
+function ResultView(props: BlockRenderProps & { entry: ToolActivityEntry; model: ReturnType<typeof activitySummary>; phase: ToolPhase }) {
+  const { official, entry, model } = props;
+  const fallback = <ResultFallback {...props} />;
+  if (!official || !entry.block || model.name === 'render_ui' || model.name === 'show_widget') return fallback;
+  return <OfficialTool {...props} official={official} block={entry.block} toolName={model.name} cwd={props.cwd ?? model.cwd} fallback={fallback} />;
 }
 
-function ResultView({ entry, model, phase, ...render }: BlockRenderProps & { entry: ToolActivityEntry; model: ReturnType<typeof activitySummary>; phase: ToolPhase }) {
+function ResultFallback({ entry, model, phase, ...render }: BlockRenderProps & { entry: ToolActivityEntry; model: ReturnType<typeof activitySummary>; phase: ToolPhase }) {
   if ((model.name === 'render_ui' || model.name === 'show_widget') && typeof model.args?.html === 'string') {
     return <McpAppFrame html={model.args.html as string} title={typeof model.args.title === 'string' ? (model.args.title as string) : undefined} fillComposer={render.fillComposer} />;
   }
@@ -114,11 +101,6 @@ function ResultView({ entry, model, phase, ...render }: BlockRenderProps & { ent
   const text = block.content.filter(item => item.type === 'text').map(item => item.text).join('\n');
   if (phase === 'interrupted') return <><p className={css.toolDetailNote}>工具已取消，未正常完成。输入和原始返回记录仍可查看。</p><InputView model={model} preparing={false} fillComposer={render.fillComposer} /><pre className={css.toolRaw}>{text}</pre></>;
 
-  const CustomToolView = render.getToolView?.(model.name);
-  if (CustomToolView) {
-    return <CustomToolWrapper Component={CustomToolView} block={block} toolName={model.name} cwd={model.cwd} openFile={render.openFile} />;
-  }
-
   if (model.category === 'terminal') {
     const facts = executionFacts(block);
     const output = text.replace(/\n\[(?:exit code: \d+|killed by signal: [^\]\n]+)\]$/, '');
@@ -154,6 +136,19 @@ function ResultView({ entry, model, phase, ...render }: BlockRenderProps & { ent
     {generatedInput(model.content, model.target, false)}
   </>;
   const content: ToolResultNode['content'] = block.content;
+  // A code interpreter's product is its result, not prose. Without this branch
+  // the output fell through to the generic document path below, which emits it
+  // as reader answer text — so a run_code card sat in the transcript outside
+  // every fold, the exact block the reader wanted to be able to close.
+  if (model.category === 'code') {
+    const output = content.filter(item => item.type === 'text').map(item => item.text).join('\n');
+    const facts = executionFacts(block);
+    if (output.trim()) return <div data-reader-tool-code>
+      <TerminalBlock command={model.command ?? model.name} cwd={model.cwd} output={output}
+        exitCode={facts.exitCode} signal={facts.signal} maxLines={18} labels={terminalBlockLabels} />
+    </div>;
+    return <p className={css.toolDetailNote}>代码已执行，没有可展示的输出。</p>;
+  }
   if (content.some(item => item.type === 'text')) return <div className={css.toolDocument}><Blocks {...render} blocks={contentBlocks(content).filter(item => item.kind === 'text')} source="tool" /></div>;
   if (content.length) return <p className={css.toolDetailNote}>图片或扩展内容已在对话中单独展示。</p>;
   return <p className={css.toolDetailNote}>工具没有返回可展示的内容。</p>;
@@ -265,7 +260,7 @@ export const ToolActivity = memo(function ToolActivityView({ entry, motion, turn
   && previous.entry.draft === next.entry.draft && previous.entry.step === next.entry.step
   && previous.motion === next.motion && previous.turnClosed === next.turnClosed && previous.depth === next.depth
   && previous.onRead === next.onRead && previous.renderSlotChain === next.renderSlotChain && previous.loadImage === next.loadImage && previous.fillComposer === next.fillComposer
-  && previous.getToolView === next.getToolView);
+  && previous.official === next.official && previous.cwd === next.cwd && previous.openFile === next.openFile);
 
 /** Rich media (images, MCP widgets) rendered outside the folded tool ledger. */
 export function ToolMedia({ block, depth = 0, ...render }: BlockRenderProps & { block: ToolCallBlock; depth?: number }) {

package/src/client/index.tsx

@@ -13,6 +13,8 @@ import { installBetterDisplaySettings } from './settings.js';
 import { fillComposerDom } from './mcp-app.js';
 import { fileAddressFor, modeFromSnapshot, openDeliverableFile } from './open-file.js';
 import type { ReaderInjected } from './types.js';
+import type { ImageAttachmentRef } from '@deepseek-ai/dsh-attachment';
+import { installOfficialSlots, officialChildren, type CompositionRegistry } from './official-slots.js';
 
 /** Structural face of the sanctioned per-session composer writer. */
 interface ComposerShell {
@@ -51,7 +53,7 @@ async function openWorkspacePath(
 export type { ReaderBlockOwner } from './types.js';
 export { McpAppFrame } from './McpAppFrame.js';
 export const name = 'dsh-better-display-client';
-export const inject = ['slots', 'sessions', 'conversation', 'remote', 'remote.session'];
+export const inject = ['slots', 'sessions', 'conversation', 'uiConversation', 'remote', 'remote.session'];
 
 export function apply(ctx: Context): void {
   const store = createReaderStore();
@@ -60,14 +62,17 @@ export function apply(ctx: Context): void {
   // intensity, and open-mode on the unsuffixed `dsh.reader.v1` key.
   const prefs = store.create();
   installBetterDisplaySettings(ctx, prefs);
-  ctx.slots.inject('conversation.view', function* () {
+  ctx.slots.inject('conversation.chat.node', function* () {
     yield ctx.slots.register({
     name: 'conversation.view',
     id: 'reader',
     order: -5,
     label: () => '阅读',
     locale: 'chat',
-    children: { 'dsh-better-display.block': { kind: 'chain', scope: 'session' } },
+    children: {
+      'dsh-better-display.block': { kind: 'chain', scope: 'session' },
+      ...officialChildren(ctx.slots as unknown as CompositionRegistry),
+    },
     store,
     inject: (sessionId: SessionId): ReaderInjected => {
       const session = () => {
@@ -77,13 +82,28 @@ export function apply(ctx: Context): void {
       };
       return {
         openPrefs: prefs,
+        officialImageLoader: Object.assign(
+          (attachment: ImageAttachmentRef) => ctx.uiConversation.imageUrl(sessionId, attachment),
+          { peek: (attachment: ImageAttachmentRef) => ctx.uiConversation.peekImageUrl(sessionId, attachment) },
+        ),
+        officialFileMentions: owner => ctx.get('chatFileMentions')?.forClosing(owner, sessionId),
+        officialPreviewFile: path => {
+          const cwd = ctx.sessions.list.getSnapshot().byId[sessionId]?.cwd;
+          const sidebar = ctx.get('sidebarRight') as SidebarRightFace | undefined;
+          if (!sidebar?.openResource) throw new Error('文件预览面板不可用。');
+          sidebar.openResource((officialFileAddressFor ?? fileAddressFor)(sessionId, cwd, path));
+        },
+        officialHost: {
+          getSnapshot: () => ctx.remote.$host,
+          subscribe: listener => ctx.on('connection/reset', listener),
+        },
         loadOlder: async () => { await session().loadOlder(); },
         loadImage: async attachment => {
           const receipt = await session().readAttachment(attachment.attachmentId);
           if (!receipt.ok) throw new Error(receipt.error.message);
           return { data: Uint8Array.from(receipt.value.data), mediaType: receipt.value.attachment.mediaType };
         },
-        openFile: async (path: string) => {
+        openFile: async (path, options) => {
           try {
             const cwd = ctx.sessions?.list?.getSnapshot?.()?.byId[sessionId]?.cwd;
             const sidebar = (
@@ -98,7 +118,7 @@ export function apply(ctx: Context): void {
               resolveWorkspacePath,
               openExternal: async (absolutePath) => { await openWorkspacePath(ctx, absolutePath); },
               openSidebar: typeof sidebar?.openResource === 'function'
-                ? (address) => { sidebar.openResource!(address); }
+                ? (address) => { sidebar.openResource!(address, options?.line === undefined ? undefined : { params: { line: options.line } }); }
                 : undefined,
               fileAddressFor: officialFileAddressFor ?? fileAddressFor,
               warn: (message, extra) => { console.warn(message, extra); },
@@ -190,35 +210,11 @@ export function apply(ctx: Context): void {
             return false;
           }
         },
-        getToolView: (toolName: string) => {
-          try {
-            const slotsService = ctx.slots as unknown as { entriesOfSlot?: (name: string) => unknown[] };
-            const entries = slotsService?.entriesOfSlot?.('tool.call.toolview') ?? [];
-            const matches = entries.filter((e: any) => {
-              const key = e?.options?.key ?? e?.key;
-              const comp = e?.component ?? e?.view ?? e?.render ?? (typeof e === 'function' ? e : null);
-              return key === toolName && typeof comp === 'function';
-            });
-            if (matches.length === 0) return null;
-            matches.sort((a: any, b: any) => {
-              const prioA = a?.options?.priority ?? a?.priority ?? 0;
-              const prioB = b?.options?.priority ?? b?.priority ?? 0;
-              return prioA - prioB;
-            });
-            const best = matches[0] as any;
-            const prio = best?.options?.priority ?? best?.priority ?? 0;
-            const comp = best?.component ?? best?.view ?? best?.render ?? (typeof best === 'function' ? best : null);
-            if (prio < 0 || (toolName !== 'edit' && toolName !== 'write')) {
-              return comp;
-            }
-            return null;
-          } catch {
-            return null;
-          }
-        },
+
       };
     },
     }, Reader);
+    yield installOfficialSlots(ctx);
     yield installReaderEntry(ctx);
   });
 }