dsh-better-display 0.2.1 → 0.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-better-display",
-  "version": "0.2.1",
+  "version": "0.3.2",
   "description": "A calmer reading view for DeepSeek Harness: native process details, live reasoning, and clean final answers.",
   "type": "module",
   "license": "MIT",
@@ -33,29 +33,33 @@
     }
   },
   "scripts": {
-    "build": "tsc -p tsconfig.json && tsdown",
+    "build": "node scripts/check-harness-compat.mjs && tsc -p tsconfig.json && tsdown",
+    "check:harness": "node scripts/check-harness-compat.mjs",
+    "test:official": "node scripts/verify-official-bridge.mjs",
+    "test:auto-fold": "node scripts/verify-auto-fold.mjs",
     "typecheck": "tsc -p tsconfig.json --noEmit",
     "test": "node --import tsx/esm --test tests/*.test.ts",
     "link:harness": "node scripts/link-harness-dependencies.mjs"
   },
   "peerDependencies": {
-    "@deepseek-ai/cordis": "^4.0.2",
-    "@deepseek-ai/dsh-api-session-controller": "^0.1.2-rc.1",
-    "@deepseek-ai/dsh-attachment": "^0.1.2-rc.1",
-    "@deepseek-ai/dsh-client-store": "^0.1.2-rc.1",
-    "@deepseek-ai/dsh-client-ui-chat": "^0.1.2-rc.1",
-    "@deepseek-ai/dsh-client-ui-conversation": "^0.1.2-rc.1",
-    "@deepseek-ai/dsh-client-ui-primitives": "^0.1.2-rc.1",
-    "@deepseek-ai/dsh-client-ui-renderer": "^0.1.2-rc.1",
-    "@deepseek-ai/dsh-client-ui-session": "^0.1.2-rc.1",
-    "@deepseek-ai/dsh-client-ui-slots": "^0.1.2-rc.1",
-    "@deepseek-ai/dsh-session": "^0.1.2-rc.1",
-    "@deepseek-ai/dsh-util-workspace-path": "^0.1.2-rc.1",
+    "@deepseek-ai/cordis": "~4.0.4",
+    "@deepseek-ai/dsh-api-session-controller": ">=0.1.7-rc.1 <0.1.8",
+    "@deepseek-ai/dsh-attachment": ">=0.1.7-rc.1 <0.1.8",
+    "@deepseek-ai/dsh-client-store": ">=0.1.7-rc.1 <0.1.8",
+    "@deepseek-ai/dsh-client-ui-chat": ">=0.1.7-rc.1 <0.1.8",
+    "@deepseek-ai/dsh-client-ui-conversation": ">=0.1.7-rc.1 <0.1.8",
+    "@deepseek-ai/dsh-client-ui-primitives": ">=0.1.7-rc.1 <0.1.8",
+    "@deepseek-ai/dsh-client-ui-renderer": ">=0.1.7-rc.1 <0.1.8",
+    "@deepseek-ai/dsh-client-ui-session": ">=0.1.7-rc.1 <0.1.8",
+    "@deepseek-ai/dsh-client-ui-slots": ">=0.1.7-rc.1 <0.1.8",
+    "@deepseek-ai/dsh-client-ui-tool": ">=0.1.7-rc.1 <0.1.8",
+    "@deepseek-ai/dsh-session": ">=0.1.7-rc.1 <0.1.8",
+    "@deepseek-ai/dsh-util-workspace-path": ">=0.1.7-rc.1 <0.1.8",
     "react": "^18.2.0"
   },
   "devDependencies": {
-    "@deepseek-ai/dsh-api-session-controller": "0.1.2-rc.1",
-    "@deepseek-ai/dsh-session-turn-outline": "0.1.2-rc.1",
+    "@deepseek-ai/dsh-api-session-controller": "0.1.7-rc.1",
+    "@deepseek-ai/dsh-session-turn-outline": "0.1.7-rc.1",
     "@types/mdast": "^4.0.4",
     "@types/node": "^22.20.0",
     "@types/react": "~18.3.1",
@@ -95,7 +99,9 @@
     "DESIGN.md",
     "LICENSE",
     "THIRD_PARTY_NOTICES.md",
-    "CHANGELOG.md"
+    "CHANGELOG.md",
+    "compat",
+    "docs"
   ],
   "engines": {
     "node": "^22.19.0 || >=24.0.0"

package/scripts/check-harness-compat.mjs

@@ -0,0 +1,71 @@
+/** Upgrade gate for the public composition adapter and remaining Markdown fork. */
+import { readFileSync, writeFileSync } from 'node:fs';
+import { createHash } from 'node:crypto';
+import { execFileSync } from 'node:child_process';
+import { homedir } from 'node:os';
+import { join, resolve } from 'node:path';
+import { createRequire } from 'node:module';
+
+const root = resolve(import.meta.dirname, '..');
+const harness = resolve(process.env.DSHX_HARNESS?.trim() || readFileSync(join(homedir(), '.config/dshx/harness'), 'utf8').trim());
+const baselineFile = join(root, 'compat/harness-rc2.json');
+const ts = createRequire(join(root, 'package.json'))('typescript');
+const files = [
+  'packages/client/ui-slots/src/index.ts',
+  'packages/client/ui-slots/src/renderer.ts',
+  'packages/client/ui-renderer/src/client/registry.ts',
+  'packages/client/ui-renderer/src/client/scoped-slots.tsx',
+  'packages/client/ui-chat/src/client/contract/slots.ts',
+  'packages/client/ui-tool/src/client/contract/slots.ts',
+  'packages/client/ui-deliverables/src/client/Deliverables.tsx',
+  'packages/client/ui-chat/src/client/chat/AssistantMarkdown.tsx',
+  'packages/client/ui-chat/src/client/chat/MessageItem.tsx',
+  'packages/client/ui-chat/src/client/chat/AssistantNodeView.tsx',
+  'packages/client/ui-chat/src/client/chat/TurnTailNodeView.tsx',
+  'packages/client/ui-chat/src/client/chat/TurnProcessNodeView.tsx',
+  'packages/client/ui-tool/src/client/tool/models/tool-call-model.ts',
+  ...['MarkdownText.tsx', 'render.tsx', 'parse.ts', 'incremental.ts', 'katex.tsx'].map(name => `packages/client/ui-primitives/src/markdown/${name}`),
+];
+const hashes = Object.fromEntries(files.map(file => [file, createHash('sha256').update(readFileSync(join(harness, file))).digest('hex')]));
+const registrations = [];
+for (const path of execFileSync('rg', ['--files', 'packages/client', '-g', '*.ts', '-g', '*.tsx'], { cwd: harness, encoding: 'utf8' }).trim().split('\n')) {
+  if (!path.includes('/src/client/')) continue;
+  const text = readFileSync(join(harness, path), 'utf8');
+  if (!/conversation\.chat\.|tool\.call\.|conversation\.message\./u.test(text)) continue;
+  const file = ts.createSourceFile(path, text, ts.ScriptTarget.Latest, true, ts.ScriptKind.TSX);
+  function visit(node) {
+    if (ts.isCallExpression(node) && ts.isPropertyAccessExpression(node.expression) && node.expression.name.text === 'register') {
+      const options = node.arguments[0];
+      if (options && ts.isObjectLiteralExpression(options)) {
+        const fields = {};
+        for (const p of options.properties) {
+          if (ts.isPropertyAssignment(p) && ts.isStringLiteral(p.initializer)) fields[p.name.getText(file).replaceAll("'", '').replaceAll('"', '')] = p.initializer.text;
+        }
+        if (/^(conversation\.chat\.|tool\.call\.|conversation\.message\.)/u.test(fields.name ?? '')) {
+          registrations.push(`${fields.name} | ${fields.key ?? fields.id ?? '(chain/single)'} | ${path}`);
+        }
+      }
+    }
+    ts.forEachChild(node, visit);
+  }
+  visit(file);
+}
+registrations.sort();
+const current = {
+  harnessVersion: JSON.parse(readFileSync(join(harness, 'packages/client/ui-chat/package.json'), 'utf8')).version,
+  hashes, registrations,
+};
+if (process.argv.includes('--record')) {
+  writeFileSync(baselineFile, JSON.stringify(current, null, 2) + '\n');
+  console.log(`Recorded candidate baseline: ${current.harnessVersion}; run build, fixtures and DSH acceptance before committing it.`);
+} else {
+  const baseline = JSON.parse(readFileSync(baselineFile, 'utf8'));
+  const changed = files.filter(file => current.hashes[file] !== baseline.hashes[file]);
+  const added = registrations.filter(row => !baseline.registrations.includes(row));
+  const removed = baseline.registrations.filter(row => !registrations.includes(row));
+  if (current.harnessVersion !== baseline.harnessVersion || changed.length || added.length || removed.length) {
+    console.error(JSON.stringify({ compatible: 'review-required', target: current.harnessVersion, changedContractsOrForkSources: changed, addedRegistrations: added, removedRegistrations: removed }, null, 2));
+    console.error('Review the differences and run the official bridge/visual tests. --record alone is not compatibility proof.');
+    process.exitCode = 1;
+  } else console.log(`Harness compatibility baseline passed (${current.harnessVersion}; ${registrations.length} official registrations).`);
+}

package/scripts/link-harness-dependencies.mjs

@@ -17,6 +17,7 @@ const shared = {
   '@deepseek-ai/dsh-client-ui-renderer': 'packages/client/ui-renderer',
   '@deepseek-ai/dsh-client-ui-session': 'packages/client/ui-session',
   '@deepseek-ai/dsh-client-ui-slots': 'packages/client/ui-slots',
+  '@deepseek-ai/dsh-client-ui-tool': 'packages/client/ui-tool',
   '@deepseek-ai/dsh-attachment': 'packages/attachment/attachment',
   '@deepseek-ai/dsh-session': 'packages/core/session',
   '@deepseek-ai/dsh-util-workspace-path': 'packages/util/workspace-path',

package/scripts/verify-auto-fold.mjs

@@ -0,0 +1,114 @@
+/** Real Reader interaction regression, isolated from the user's Host and data. */
+import assert from 'node:assert/strict';
+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';
+
+const root = resolve(import.meta.dirname, '..');
+const harness = process.env.DSHX_HARNESS;
+if (!harness) throw new Error('Set DSHX_HARNESS to the target checkout.');
+const require = createRequire(join(root, 'package.json'));
+const webRequire = createRequire(join(harness, 'packages/client/web/package.json'));
+const { build } = await import(pathToFileURL(createRequire(require.resolve('tsx')).resolve('esbuild')).href);
+const { launchPinnedChromium } = await import(pathToFileURL(join(homedir(), '.codex/playwright-runtime/runtime.mjs')).href);
+const out = join(root, '.evidence/auto-fold');
+await mkdir(out, { recursive: true });
+await build({
+  entryPoints: [join(root, 'tests/browser-auto-fold.tsx')], outfile: join(out, 'fixture.js'),
+  bundle: true, platform: 'browser', format: 'esm', jsx: 'automatic',
+  alias: {
+    '@deepseek-ai/dsh-client-ui-primitives': join(harness, 'packages/client/ui-primitives/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 server = createServer(async (req, res) => {
+  const file = req.url === '/fixture.js' ? 'fixture.js' : req.url === '/fixture.css' ? 'fixture.css' : null;
+  if (file) { res.setHeader('Content-Type', file.endsWith('.js') ? 'text/javascript' : 'text/css'); res.end(await readFile(join(out, file))); return; }
+  if (req.url !== '/') { res.writeHead(404); res.end(); return; }
+  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{margin:0;font:14px/1.6 system-ui;--dsw-alias-label-primary:#222;--dsw-alias-label-secondary:#666;--dsw-alias-label-tertiary:#888;--dsw-alias-bg-base:#fff;--dsw-alias-border-l2:#ddd}button{cursor:pointer}</style><div id="app"></div><script type="module" src="/fixture.js"></script></html>');
+});
+await new Promise(resolve => server.listen(0, '127.0.0.1', resolve));
+let browser;
+const results = [];
+try {
+  browser = await launchPinnedChromium();
+  for (const reducedMotion of ['no-preference', 'reduce']) {
+    const page = await browser.newPage({ viewport: { width: 1200, height: 1000 }, reducedMotion });
+    page.setDefaultTimeout(4000);
+    const errors = [];
+    page.on('pageerror', error => errors.push(String(error)));
+    await page.goto(`http://127.0.0.1:${server.address().port}/`);
+    const closed = page.locator('[data-reader-turn="1"]');
+    const live = page.locator('[data-reader-turn="2"]');
+    const completedThought = closed.getByText('已完成思考 0', { exact: true });
+    const oldLiveThought = live.getByText('进行中思考 0', { exact: true });
+    const latestThought = live.getByText('进行中思考 1', { exact: true });
+    const toggle = () => page.getByRole('button', { name: /^自动折叠[开关]$/ }).click();
+    await page.getByRole('button', { name: '自动折叠开', exact: true }).waitFor();
+    await latestThought.waitFor();
+    assert.equal(await completedThought.count(), 0);
+
+    // Reading while auto-fold is off used to persist a manual expansion forever.
+    await toggle();
+    await completedThought.click();
+    assert.ok(Object.values(await page.evaluate(() => window.autoFoldFixture.state().expanded)).includes(true));
+    await toggle();
+    await completedThought.waitFor({ state: 'hidden' });
+    await latestThought.waitFor();
+    await closed.getByText('最终回答始终保留', { exact: true }).waitFor();
+
+    // A prior-steps disclosure has its own state, separate from the store.
+    await live.getByRole('button', { name: '展开此前步骤', exact: true }).click();
+    await oldLiveThought.waitFor();
+    await toggle();
+    await toggle();
+    await oldLiveThought.waitFor({ state: 'hidden' });
+    await latestThought.waitFor();
+
+    // Fresh manual choices still work after automatic folding is restored.
+    await closed.getByRole('button', { name: '展开思考与过程', exact: true }).click();
+    await completedThought.waitFor();
+    await page.evaluate(() => window.autoFoldFixture.preference(false));
+    await page.getByRole('button', { name: '自动折叠关', exact: true }).waitFor();
+    await page.evaluate(() => window.autoFoldFixture.preference(true));
+    await completedThought.waitFor({ state: 'hidden' });
+
+    // Active text selection still protects reading until the user clears it.
+    await toggle();
+    await completedThought.evaluate(async element => {
+      const range = document.createRange();
+      range.selectNodeContents(element);
+      document.getSelection().removeAllRanges();
+      document.getSelection().addRange(range);
+      document.dispatchEvent(new Event('selectionchange'));
+      await new Promise(requestAnimationFrame);
+    });
+    await page.evaluate(() => window.autoFoldFixture.preference(true));
+    await page.getByRole('button', { name: '自动折叠开', exact: true }).waitFor();
+    await closed.getByRole('button', { name: '收起思考与过程', exact: true }).waitFor();
+    assert.equal(await page.evaluate(() => document.getSelection().toString()), '已完成思考 0');
+    await page.evaluate(() => document.getSelection().removeAllRanges());
+    await completedThought.waitFor({ state: 'hidden' });
+
+    // Rapid reversal must settle with automatic folding enabled.
+    for (let i = 0; i < 6; i++) await toggle();
+    await completedThought.waitFor({ state: 'hidden' });
+    await oldLiveThought.waitFor({ state: 'hidden' });
+    await latestThought.waitFor();
+    assert.deepEqual(errors, []);
+    assert.equal(await page.getByText('此内容暂时无法展示', { exact: false }).count(), 0);
+    await page.screenshot({ path: join(out, `${reducedMotion}.png`) });
+    results.push({ reducedMotion, passed: true, paths: ['read-while-off', 'prior-steps-override', 'new-manual-choice', 'settings-toggle', 'active-selection', 'rapid-reversal', 'latest-and-final-content'] });
+    await page.close();
+  }
+  await writeFile(join(out, 'result.json'), JSON.stringify({ passed: true, results }, null, 2));
+  console.log(JSON.stringify({ passed: true, results }));
+} finally {
+  await browser?.close();
+  await new Promise(resolve => server.close(resolve));
+}

package/scripts/verify-official-bridge.mjs

@@ -0,0 +1,121 @@
+/** 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',
+  '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({
+  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; }
+  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');
+  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: '更多打开方式', 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="本地样例"]');
+  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,69 @@
+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'];
+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>;
+}
+
+/** 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 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, 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,
+    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: { 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.renderSlot(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,27 @@
    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; }
+/* 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: 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; }
+.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); }
@@ -558,6 +584,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;