dsh-better-display 0.3.8 → 0.3.9

package/src/log.ts

@@ -0,0 +1,137 @@
+import { randomUUID } from 'node:crypto';
+import type { IncomingMessage } from 'node:http';
+
+export const REDACTED = '[REDACTED]';
+
+const REQUEST_ID_HEADER = 'x-request-id';
+const REQUEST_ID_PATTERN = /^[A-Za-z0-9._:-]{1,200}$/;
+
+const SECRET_KEYS = new Set([
+  'authorization',
+  'proxyauthorization',
+  'cookie',
+  'setcookie',
+  'token',
+  'accesstoken',
+  'refreshtoken',
+  'idtoken',
+  'apikey',
+  'apisecret',
+  'secret',
+  'clientsecret',
+  'password',
+  'passwd',
+  'credential',
+  'credentials',
+  'signature',
+  'sig',
+  'jwt',
+  'bearer',
+  'privatekey',
+  'xapikey',
+  'xauthtoken',
+  'xaccesstoken',
+  'auth',
+]);
+
+export type LogFields = Record<string, unknown>;
+
+export interface Logger {
+  info(msg: string, fields?: LogFields): void;
+  warn(msg: string, fields?: LogFields): void;
+  error(msg: string, fields?: LogFields): void;
+}
+
+export interface LoggerOptions {
+  readonly write?: (line: string) => void;
+  readonly base?: LogFields;
+  readonly clock?: () => Date;
+}
+
+function normalizeKey(key: string): string {
+  return key.toLowerCase().replace(/[^a-z0-9]/g, '');
+}
+
+function isSecretKey(key: string): boolean {
+  const normalized = normalizeKey(key);
+  if (SECRET_KEYS.has(normalized)) return true;
+  if (normalized === 'requestid' || normalized === 'xrequestid') return false;
+  return /(?:^|[^a-z])(?:token|secret|password|api[-_]?key)$/i.test(key);
+}
+
+function redactString(value: string): string {
+  const query = value.replace(/([?&#])([^&#=]+)=([^&#]*)/g, (match, sep: string, rawKey: string) => {
+    let key: string;
+    try {
+      key = decodeURIComponent(rawKey.replace(/\+/g, ' '));
+    } catch {
+      key = rawKey;
+    }
+    return isSecretKey(key) ? `${sep}${rawKey}=${REDACTED}` : match;
+  });
+  return query
+    .replace(/\b(Bearer|Basic)\s+\S+/gi, `$1 ${REDACTED}`)
+    .replace(
+      /\b((?:access[_-]?token|refresh[_-]?token|id[_-]?token|api[_-]?key|client[_-]?secret|password|passwd|authorization|token|secret))(\s*[:=]\s*)([^\s&]+)/gi,
+      `$1$2${REDACTED}`,
+    );
+}
+
+export function redact(value: unknown): unknown {
+  return redactValue(undefined, value, 0, new WeakSet());
+}
+
+function redactValue(key: string | undefined, value: unknown, depth: number, seen: WeakSet<object>): unknown {
+  if (key !== undefined && isSecretKey(key)) return REDACTED;
+  if (depth > 8) return REDACTED;
+  if (typeof value === 'string') return redactString(value);
+  if (typeof value === 'number' || typeof value === 'boolean' || value === null || value === undefined) return value;
+  if (typeof value !== 'object') return REDACTED;
+  if (value instanceof Date) return value.toISOString();
+  if (value instanceof Error) {
+    return redactValue(undefined, { name: value.name, message: value.message }, depth + 1, seen);
+  }
+  if (seen.has(value)) return REDACTED;
+  seen.add(value);
+  if (Array.isArray(value)) {
+    return value.map(item => redactValue(undefined, item, depth + 1, seen));
+  }
+  const output: Record<string, unknown> = {};
+  for (const [childKey, childValue] of Object.entries(value)) {
+    output[childKey] = redactValue(childKey, childValue, depth + 1, seen);
+  }
+  return output;
+}
+
+export function createLogger(options: LoggerOptions = {}): Logger {
+  const write = options.write ?? ((line: string) => {
+    console.log(line);
+  });
+  const clock = options.clock ?? (() => new Date());
+  const emit = (level: 'info' | 'warn' | 'error', msg: string, fields?: LogFields): void => {
+    const details = redact({ ...options.base, ...fields });
+    const record = {
+      ...(details !== null && typeof details === 'object' ? details as LogFields : {}),
+      time: clock().toISOString(),
+      level,
+      msg: redactString(msg),
+    };
+    try {
+      write(JSON.stringify(record));
+    } catch {
+      write(JSON.stringify({ time: record.time, level, msg: record.msg, error: 'log record was not serializable' }));
+    }
+  };
+  return {
+    info: (msg, fields) => emit('info', msg, fields),
+    warn: (msg, fields) => emit('warn', msg, fields),
+    error: (msg, fields) => emit('error', msg, fields),
+  };
+}
+
+export function requestIdOf(req: IncomingMessage): string {
+  const raw = req.headers[REQUEST_ID_HEADER];
+  const value = Array.isArray(raw) ? raw[0] : raw;
+  if (typeof value === 'string' && REQUEST_ID_PATTERN.test(value)) return value;
+  return randomUUID();
+}

package/src/metrics.ts

@@ -0,0 +1,50 @@
+export const ROUTE_REVEAL = '/better-display/reveal';
+export const ROUTE_SKILL_STATUS = '/better-display/skill-status';
+export const ROUTE_METRICS = '/better-display/metrics';
+
+export const ROUTE_HITS = [ROUTE_REVEAL, ROUTE_SKILL_STATUS, ROUTE_METRICS] as const;
+
+export interface RouteTiming {
+  count: number;
+  totalMs: number;
+  maxMs: number;
+}
+
+const hits = new Map<string, number>(ROUTE_HITS.map(route => [route, 0]));
+const timings = new Map<string, RouteTiming>(ROUTE_HITS.map(route => [route, { count: 0, totalMs: 0, maxMs: 0 }]));
+
+function snapshotHits(): Record<string, number> {
+  return Object.fromEntries(hits);
+}
+
+function snapshotTimings(): Record<string, RouteTiming> {
+  return Object.fromEntries([...timings].map(([route, timing]) => [route, { ...timing }]));
+}
+
+export function recordRouteHit(route: string): number {
+  const next = (hits.get(route) ?? 0) + 1;
+  hits.set(route, next);
+  return next;
+}
+
+export function recordRouteDuration(route: string, elapsedMs: number): RouteTiming {
+  const ms = Number.isFinite(elapsedMs) && elapsedMs > 0 ? Math.round(elapsedMs) : 0;
+  const current = timings.get(route) ?? { count: 0, totalMs: 0, maxMs: 0 };
+  const next = {
+    count: current.count + 1,
+    totalMs: current.totalMs + ms,
+    maxMs: Math.max(current.maxMs, ms),
+  };
+  timings.set(route, next);
+  return next;
+}
+
+export function metricsPayload(): {
+  counters: { dsh_better_display_route_hits_total: Record<string, number> };
+  timingsMs: Record<string, RouteTiming>;
+} {
+  return {
+    counters: { dsh_better_display_route_hits_total: snapshotHits() },
+    timingsMs: snapshotTimings(),
+  };
+}

package/tests/browser-commentary.tsx

@@ -0,0 +1,191 @@
+import React, { useSyncExternalStore } from 'react';
+import { createRoot } from 'react-dom/client';
+import type { ChatSnapshot } from '@deepseek-ai/dsh-client-ui-chat/client';
+import { Reader } from '../src/client/Reader.js';
+import { createReaderStore } from '../src/client/store.js';
+import type { ReaderProps } from '../src/client/types.js';
+
+/**
+ * Real Reader + real root/session stores; only conversation data is synthetic.
+ *
+ * This fixture isolates the "process report narration" bug: an assistant step
+ * that carries a long non-reasoning text block (正文) between thinking steps used
+ * to be classified as process content and folded away. Contract under test:
+ * body text is always visible; folds may only hold reasoning / tool / other
+ * process records.
+ *
+ * Turn layout:
+ *   1  closed/completed : step0 = reasoning + 正文A + tool-call ; step1 = reasoning + 最终回答B
+ *   2  open             : step0 = reasoning + 进行中汇报正文C ; step1 = reasoning (latest)
+ *   3  closed/error     : step0 = reasoning + 失败轮正文D
+ *   4  closed/interrupted: step0 = reasoning + 中断轮正文E
+ */
+const BODY_A = '过程汇报正文A';
+const REASON_A = '历史思考：先查简报素材';
+const FINAL_B = '最终回答B';
+const REASON_B = '第二次思考：整理结论';
+const TOOL_SUMMARY = '读取 简报素材.txt';
+const BODY_C = '进行中汇报正文C';
+const REASON_C0 = '第一轮思考';
+const REASON_C1 = '第二轮思考';
+const BODY_D = '失败轮正文D';
+const REASON_D = '报错前的思考';
+const BODY_E = '中断轮正文E';
+const REASON_E = '中断前的思考';
+// Turn 5 exercises the segmented-report case: two adjacent narration paragraphs
+// (with folded reasoning between them) plus a final answer, all with long text.
+const BODY_F = '第一段汇报：已完成需求梳理，确认改造点集中在投影层与阅读渲染层。这一步整理的是已经核实的事实，不包括猜测。\n\n第二段汇报：接下来核对折叠链边界，并验证正文在收起状态下仍然可见，同时保持思维链与工具行可以展开。';
+const REASON_F0 = '汇报前的思考';
+const BODY_G = '补充汇报：折叠只保留思维链与工具调用，正文块保持原位。';
+const REASON_G = '补充说明前的思考';
+const REASON_H = '收尾思考';
+const FINAL_H = '最终回答H';
+const TOOL_CALL_ID = 'call-read-1';
+const TOOL_ARGS = '{"path":"/fixture/工作区/简报素材.txt"}';
+
+const store = createReaderStore();
+const prefs = store.create();
+const session = store.create('commentary-fixture');
+
+type Turn = {
+  turn: number; status: 'open' | 'closed';
+  start: { seq: number; time: number };
+  end?: { time: number; data: { reason: { kind: string } } };
+  data: Map<string, any>;
+  steps: any[];
+};
+const nodes = new Map<string, any>();
+const turns = new Map<number, Turn>();
+
+function newTurn(turn: number, status: 'open' | 'closed', seq: number, reason?: string): Turn {
+  const value: Turn = {
+    turn, status, start: { seq, time: 1 },
+    end: status === 'closed' ? { time: 1001, data: { reason: { kind: reason ?? 'completed' } } } : undefined,
+    data: new Map<string, any>(),
+    steps: [],
+  };
+  turns.set(turn, value);
+  return value;
+}
+
+function addStep(turnNumber: number, step: number, seq: number, status: string, blocks: any[]): any {
+  const turn = turns.get(turnNumber)!;
+  const data = { turn: turnNumber, step, status, time: 1, blocks };
+  const location = { step, start: { seq }, data: new Map([['assistant-step', data]]) };
+  turn.steps.push(location);
+  nodes.set(`turn-${turnNumber}-step-${step}`, {
+    key: `turn-${turnNumber}-step-${step}`, kind: 'assistant-step', visibility: 'visible',
+    anchorSeq: seq, location: { kind: 'step', turn, step: location }, data,
+  });
+  return location;
+}
+
+function addToolCallNode(turnNumber: number, key: string, seq: number, location: any, callId: string, argsRaw: string): void {
+  const turn = turns.get(turnNumber)!;
+  const root = {
+    kind: 'tool-result', seq, time: 1, callId,
+    call: { name: 'read', argsRaw }, callTime: 1,
+    content: [{ kind: 'text', text: '简报素材的摘录内容' }], isError: false, subCalls: [],
+  };
+  nodes.set(key, {
+    key, kind: 'tool-call', visibility: 'visible', anchorSeq: seq,
+    location: { kind: 'step', turn, step: location }, data: { root },
+  });
+}
+
+// --- turn 1: completed; narration sits between reasoning and the final answer.
+const turn1 = newTurn(1, 'closed', 100);
+turn1.data.set('turn-tail', { closing: { step: 1 } });
+const t1s0 = addStep(1, 0, 101, 'settled', [
+  { kind: 'reasoning', text: REASON_A },
+  { kind: 'text', text: BODY_A },
+  { kind: 'tool-call', callId: TOOL_CALL_ID, name: 'read', argsRaw: TOOL_ARGS },
+]);
+addToolCallNode(1, 'turn-1-tool-call-1', 102, t1s0, TOOL_CALL_ID, TOOL_ARGS);
+addStep(1, 1, 103, 'settled', [
+  { kind: 'reasoning', text: REASON_B },
+  { kind: 'text', text: FINAL_B },
+]);
+
+// --- turn 2: open; second reasoning arrives after a process report.
+const turn2 = newTurn(2, 'open', 200);
+addStep(2, 0, 201, 'settled', [
+  { kind: 'reasoning', text: REASON_C0 },
+  { kind: 'text', text: BODY_C },
+]);
+addStep(2, 1, 202, 'running', [
+  { kind: 'reasoning', text: REASON_C1 },
+]);
+
+// --- turn 3: failed turn; nothing may fold.
+newTurn(3, 'closed', 300, 'error');
+addStep(3, 0, 301, 'settled', [
+  { kind: 'reasoning', text: REASON_D },
+  { kind: 'text', text: BODY_D },
+]);
+
+// --- turn 4: interrupted turn; nothing may fold.
+newTurn(4, 'closed', 400, 'interrupted');
+addStep(4, 0, 401, 'settled', [
+  { kind: 'reasoning', text: REASON_E },
+  { kind: 'text', text: BODY_E },
+]);
+
+// --- turn 5: completed turn whose report is split into two narration paragraphs
+// with folded reasoning between them; the rail must bridge them after collapsing.
+const turn5 = newTurn(5, 'closed', 500);
+turn5.data.set('turn-tail', { closing: { step: 2 } });
+addStep(5, 0, 501, 'settled', [
+  { kind: 'reasoning', text: REASON_F0 },
+  { kind: 'text', text: BODY_F },
+]);
+addStep(5, 1, 502, 'settled', [
+  { kind: 'reasoning', text: REASON_G },
+  { kind: 'text', text: BODY_G },
+]);
+addStep(5, 2, 503, 'settled', [
+  { kind: 'reasoning', text: REASON_H },
+  { kind: 'text', text: FINAL_H },
+]);
+
+const chat = {
+  order: [
+    'turn-1-step-0', 'turn-1-tool-call-1', 'turn-1-step-1',
+    'turn-2-step-0', 'turn-2-step-1',
+    'turn-3-step-0', 'turn-4-step-0',
+    'turn-5-step-0', 'turn-5-step-1', 'turn-5-step-2',
+  ],
+  nodes,
+  timeline: { turns },
+} as unknown as ChatSnapshot;
+const sessionSnapshot = { running: true, openState: 'ready', pendingSubmissions: [], hasMore: false, loadingOlder: false };
+const sessionsSnapshot = { byId: { 'commentary-fixture': { cwd: '/fixture' } } };
+const pending = new Map();
+const host = { home: '/fixture' };
+const useReaderStore: ReaderProps['useStore'] = selector => selector(useSyncExternalStore(session.subscribe, session.getSnapshot));
+const props = {
+  sessionId: 'commentary-fixture', useChat: selector => selector(chat),
+  useSession: selector => selector(sessionSnapshot), useSessions: selector => selector(sessionsSnapshot),
+  useSessionStatus: selector => selector(new Map([['commentary-fixture', { running: true, pendingInteraction: pending.get('commentary-fixture'), completionUnread: false }]])),
+  useStore: useReaderStore, actions: session.actions, openPrefs: prefs,
+  t: key => key, renderSlot: (_name: string, _owner: any, options: any) => options?.fallback ?? null,
+  renderSlotChain: (_name: string, _owner: any, options: any) => options?.fallback ?? null,
+  loadImage: async () => ({ data: new Uint8Array(), mediaType: 'image/png' }),
+  officialImageLoader: Object.assign(async () => null, { peek: () => null }),
+  officialFileMentions: () => undefined, officialPreviewFile: () => {},
+  officialHost: { getSnapshot: () => host, subscribe: () => () => {} },
+  fillComposer: () => true, openFile: () => {}, loadOlder: async () => {}, openView: () => {},
+} as unknown as ReaderProps;
+
+Object.assign(window, {
+  commentaryFixture: {
+    // Exercise the same root preference the Settings panel uses.
+    preference: (value: boolean) => prefs.actions.setAutoFold(value),
+    state: () => session.getSnapshot(),
+    text: { BODY_A, REASON_A, FINAL_B, REASON_B, TOOL_SUMMARY, BODY_C, REASON_C0, REASON_C1, BODY_D, REASON_D, BODY_E, REASON_E, BODY_F, REASON_F0, BODY_G, REASON_G, REASON_H, FINAL_H, TOOL_CALL_ID },
+  },
+});
+
+createRoot(document.getElementById('app')!).render(
+  <div data-conversation-scroll style={{ height: '100vh', overflow: 'auto' }}><Reader {...props} /></div>,
+);

package/tests/chat-flow-hook.test.ts

@@ -1,7 +1,7 @@
 import assert from 'node:assert/strict';
 import { readFileSync } from 'node:fs';
 import { dirname, resolve } from 'node:path';
-import { test } from 'node:test';
+import { test } from 'vitest';
 import { fileURLToPath } from 'node:url';
 
 const root = resolve(dirname(fileURLToPath(import.meta.url)), '..');

package/tests/cloud-gate.test.ts

@@ -1,4 +1,4 @@
-import { test } from 'node:test';
+import { test } from 'vitest';
 import assert from 'node:assert/strict';
 import { accessSync, constants, readFileSync } from 'node:fs';
 import { dirname, resolve } from 'node:path';

package/tests/context-tool-update.test.ts

@@ -1,5 +1,5 @@
 import assert from 'node:assert/strict';
-import { test } from 'node:test';
+import { test } from 'vitest';
 import { toolUpdateRows } from '../src/client/native/tool-update.js';
 
 test('a single tool addition is its own closed row', () => {

package/tests/conversation-scroll.test.ts

@@ -1,4 +1,4 @@
-import { test } from 'node:test';
+import { test } from 'vitest';
 import assert from 'node:assert/strict';
 import { flowTop, landTurn, READING_LINE_OFFSET_PX, scrollerOf } from '../src/client/conversation-scroll.ts';
 

package/tests/deliverables.test.ts

@@ -1,4 +1,4 @@
-import { test } from 'node:test';
+import { test } from 'vitest';
 import assert from 'node:assert/strict';
 import type { TurnLocation } from '@deepseek-ai/dsh-client-ui-conversation/client';
 import { basename, createProducedFileMentions, dirname, getTurnDeliverables, showDeliverablesRow } from '../src/client/deliverables.ts';

package/tests/entry.test.ts

@@ -1,5 +1,5 @@
 import assert from 'node:assert/strict';
-import { test } from 'node:test';
+import { test } from 'vitest';
 import { ReaderEntryPolicy, readerEntryRequested } from '../src/client/entry-policy.js';
 
 test('fresh sessions default to reading, without requiring a special URL', () => {

package/tests/fixtures/reader-lane-owners.tsx

@@ -0,0 +1,46 @@
+import { useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import { StickyLane, usePublishedHeight } from '../../src/client/StickyLane.js';
+
+function Measured({ id, property, height }: { id: string; property: string; height: number }) {
+  const ref = usePublishedHeight(property);
+  return <div ref={ref} id={id} style={{ height }}>{id}</div>;
+}
+
+function SummaryReader({ id, height, show }: { id: string; height: number; show: boolean }) {
+  return <div data-dsh-better-display={id} id={`root-${id}`}>
+    <section data-reader-turn="1" id={`turn-${id}`}>
+      {show && <Measured id={`row-${id}`} property="--reader-summary-height" height={height} />}
+    </section>
+  </div>;
+}
+
+function App() {
+  const [height, setHeight] = useState(52);
+  const [show, setShow] = useState(true);
+  return <>
+    <button id="grow" type="button" onClick={() => setHeight(86)}>grow</button>
+    <button id="drop" type="button" onClick={() => setShow(false)}>drop</button>
+    <SummaryReader id="a" height={height} show={show} />
+    <SummaryReader id="b" height={52} show />
+    <div data-dsh-better-display="short" id="root-short">
+      <section data-reader-turn="1" id="turn-short">
+        <Measured id="row-short" property="--reader-status-height" height={38} />
+      </section>
+    </div>
+    <div data-dsh-better-display="toolbar" id="root-toolbar">
+      <StickyLane kind="toolbar" className="toolbarProbe">
+        <button id="toolbar-button" type="button" style={{ height: 12, padding: 0, border: 0 }}>开</button>
+      </StickyLane>
+    </div>
+    <div data-dsh-better-display="status" id="root-status">
+      <section data-reader-turn="1" id="turn-status">
+        <StickyLane kind="status" className="statusProbe">
+          <span style={{ display: 'block', height: 12 }}>用时</span>
+        </StickyLane>
+      </section>
+    </div>
+  </>;
+}
+
+createRoot(document.getElementById('app')!).render(<App />);

package/tests/fixtures/reader-official-users.tsx

@@ -130,6 +130,70 @@ async function verify() {
       assert.equal(count(html, 'user content'), 1);
       assert.equal(count(html, 'steering content'), 1);
       assert.equal(count(html, 'Official recall'), 0);
+
+      // A priority below the official assistant renderer is a replacement.
+      // Reader keeps the reasoning card and hands only the body blocks over.
+      const assistant = {
+        key: 'assistant-key', kind: 'assistant-step', anchorSeq: 4, visibility: 'visible',
+        location: { kind: 'turn', turn },
+        data: {
+          status: 'settled', turn: 1, step: 0, time: 3,
+          blocks: [
+            { kind: 'reasoning', text: 'think privately' },
+            { kind: 'text', text: '<div id="vcp-root">card face</div>' },
+          ],
+        },
+      };
+      // Reader memoizes on the order array and the nodes map. A real host
+      // publishes new references; this fixture has to do the same.
+      chat.nodes = new Map(chat.nodes);
+      chat.nodes.set('assistant-key', assistant);
+      chat.order = [...chat.order, 'assistant-key'];
+      store.actions.setExpanded('turn:1:closed:completed', true);
+      html = render();
+      assert.equal(count(html, 'data-foreign-assistant'), 0);
+      assert.ok(html.includes('vcp-root'));
+      assert.ok(html.includes('think privately'));
+      const calls: Array<{ groupPart: unknown; kinds: string[]; text: string }> = [];
+      const Foreign = (props: { groupPart?: unknown; node?: { data?: { blocks?: Array<{ kind: string; text?: string }> } } }) => {
+        const blocks = props.node?.data?.blocks ?? [];
+        calls.push({
+          groupPart: props.groupPart,
+          kinds: blocks.map(block => block.kind),
+          text: blocks.map(block => block.text ?? '').join('\n'),
+        });
+        const body = blocks.filter(block => block.kind === 'text').map(block => block.text ?? '').join('\n');
+        return <div data-foreign-assistant>{body}</div>;
+      };
+      const removeOfficialAssistant = slots.register({ name: 'conversation.chat.node', key: 'assistant-step' }, () => <span>Official assistant</span>);
+      const removeForeign = slots.register({ name: 'conversation.chat.node', key: 'assistant-step', priority: -10 }, Foreign);
+      await new Promise(resolve => queueMicrotask(resolve));
+      assert.ok(slots.entriesOfSlot(OFFICIAL_SEATS.nodes).some((entry: { options: { key?: string; priority?: number } }) => entry.options.key === 'assistant-step' && entry.options.priority === -10));
+      html = render();
+      const answer = container.querySelector('[data-reader-body]');
+      assert.ok(answer);
+      assert.equal(answer!.querySelectorAll('[data-foreign-assistant]').length, 1);
+      assert.ok(answer!.textContent?.includes('<div id="vcp-root">card face</div>'));
+      assert.equal(answer!.querySelectorAll('pre').length, 0);
+      assert.equal(count(html, 'Official assistant'), 0);
+      assert.ok(calls.some(call => call.groupPart === 'response' && call.kinds.join(',') === 'text' && call.text.includes('vcp-root')));
+      assert.ok(calls.every(call => !call.kinds.includes('reasoning')));
+      const reasoning = container.querySelector('[data-reader-text-kind="reasoning"]');
+      assert.ok(reasoning);
+      assert.ok(reasoning!.textContent?.includes('think privately'));
+      assert.equal(reasoning!.querySelectorAll('[data-foreign-assistant]').length, 0);
+      removeForeign();
+      removeOfficialAssistant();
+      await new Promise(resolve => queueMicrotask(resolve));
+      html = render();
+      assert.equal(count(html, 'data-foreign-assistant'), 0);
+      assert.ok(html.includes('vcp-root'));
+      assert.ok(html.includes('think privately'));
+      chat.nodes = new Map(chat.nodes);
+      chat.nodes.delete('assistant-key');
+      chat.order = chat.order.filter((key: string) => key !== 'assistant-key');
+      store.actions.setExpanded('turn:1:closed:completed', false);
+
       const module = Reflect.get(window, 'easyrewriteModule');
       if (module) {
         const plugin = module.factory((name: string) => {

package/tests/fixtures/reader-theme-overlap.html

@@ -0,0 +1,80 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8">
+  <title>Reader theme overlap</title>
+  <link rel="stylesheet" href="/Reader.module.css">
+  <link rel="stylesheet" href="/MarkdownText.module.css">
+  <style>
+    :root {
+      --dsh-content-font-size: 24px;
+      --dsh-content-font-delta: 10px;
+      --dsw-alias-bg-base: transparent;
+      --dsw-alias-bg-layer-1: #102040;
+      --dsw-alias-label-primary: #f5f7fa;
+      --dsw-alias-label-secondary: #c5cad3;
+      --dsw-alias-label-tertiary: #9aa3af;
+      --dsw-font-family: ui-sans-serif, sans-serif;
+      --dsw-font-markdown-h2: 700 29px/38px var(--dsw-font-family);
+      --dsw-font-markdown-base: 24px/34px var(--dsw-font-family);
+    }
+    body { margin: 0; background: #ff00aa; }
+    .scroll { height: 280px; overflow: auto; background: #ff00aa; }
+    .spacer { height: 900px; }
+  </style>
+</head>
+<body>
+  <div class="scroll" id="scroll">
+    <div class="root" data-dsh-better-display="fixture">
+      <div class="column" data-chat-flow="">
+        <div class="toolbar" data-reader-lane="toolbar"><button class="textButton">自动折叠开</button></div>
+        <section class="turn" data-reader-turn="1">
+          <div class="turnStickyRegion">
+            <div class="turnStickyLanes">
+              <div class="turnProcessSticky" data-reader-lane="status">
+                <button class="disclosureButton" type="button"><span class="statusText">用时 64 分 24 秒</span></button>
+              </div>
+              <div class="closedProcessSummary" id="summary" data-reader-closed-summary>
+                <div class="summaryRow">
+                  <button class="disclosureButton" type="button"><span class="foldSummary">思考×79 · 输出×15 · 工具×79 · 记录×3</span></button>
+                  <span class="diffStatRoot"><button class="diffStatButton" type="button"><span class="diffAdded">+751</span><span class="diffRemoved">-63</span></button></span>
+                </div>
+              </div>
+            </div>
+            <div class="answer">
+              <div class="markdown">
+                <h2 id="heading">核心对比 (2024/25 赛季, Deloitte 统一口径)</h2>
+                <p class="spacer">回答正文在标题下面继续，用来把标题滚进吸顶带。</p>
+              </div>
+            </div>
+          </div>
+        </section>
+        <section class="turn" data-reader-turn="2">
+          <div class="turnProcessSticky" id="flow-status" data-reader-lane="flow-status">
+            <button class="disclosureButton" type="button"><span class="statusText">用时 64 分 24 秒，字号放大后这一行变高</span></button>
+          </div>
+          <div class="flowCell" id="flow-summary" data-flow-summary>
+            <button class="disclosureButton" type="button"><span class="foldSummary">思考×79 · 输出×15 · 工具×79 · 记录×3</span></button>
+          </div>
+          <div class="spacer"></div>
+        </section>
+      </div>
+    </div>
+  </div>
+  <script>
+    const root = document.querySelector('[data-dsh-better-display]');
+    const turn = document.querySelector('[data-reader-turn="2"]');
+    const toolbar = document.querySelector('.toolbar');
+    const flowStatus = document.querySelector('#flow-status');
+    const flowSummary = document.querySelector('#flow-summary');
+    const publish = () => {
+      root.style.setProperty('--reader-toolbar-height', `${Math.ceil(toolbar.getBoundingClientRect().height)}px`);
+      turn.style.setProperty('--reader-status-height', `${Math.ceil(flowStatus.getBoundingClientRect().height)}px`);
+      turn.style.setProperty('--reader-summary-height', `${Math.ceil(flowSummary.getBoundingClientRect().height)}px`);
+    };
+    publish();
+    for (const el of [toolbar, flowStatus, flowSummary]) new ResizeObserver(publish).observe(el);
+    window.__themeOverlapReady = true;
+  </script>
+</body>
+</html>