dsh-better-display 0.3.8 → 0.3.9

package/tests/fixtures/reader-user-bubble.tsx

@@ -0,0 +1,222 @@
+import { Context } from '@deepseek-ai/cordis';
+import { createRoot } from 'react-dom/client';
+import { flushSync } from 'react-dom';
+import { SlotRegistry } from '@fixture/registry';
+import { createSlotRenderer } from '@fixture/renderer';
+import { UserMessageNodeView } from '@fixture/user-message';
+import { Reader } from '../../src/client/Reader.js';
+import { createReaderStore } from '../../src/client/store.js';
+import { OFFICIAL_SEATS, OFFICIAL_SLOTS, installOfficialSlots, officialChildren } from '../../src/client/official-slots.js';
+import type { ReaderProps } from '../../src/client/types.js';
+
+// Real Reader, real slot seats, and the host's user/steering renderer.
+// Session text is the only synthetic part. Width is measured after layout.
+
+const CASES = [
+  { name: 'short', width: 748, axis: '', text: '升级插件' },
+  { name: 'thirty', width: 748, axis: '', text: '测'.repeat(30) },
+  { name: 'long', width: 748, axis: '', text: '测'.repeat(80) },
+  { name: 'narrow', width: 480, axis: '', text: '测'.repeat(30) },
+  { name: 'wide-axis', width: 1000, axis: '1000px', text: '测'.repeat(80) },
+] as const;
+
+function turnOf() {
+  return {
+    turn: 1, status: 'closed' as const, start: { seq: 1, time: 1 },
+    end: { time: 2, data: { reason: { kind: 'completed' } } }, data: new Map(), steps: [],
+  };
+}
+
+function messageNode(kind: 'user' | 'steering', text: string) {
+  const turn = turnOf();
+  return {
+    key: `${kind}-key`, kind, anchorSeq: kind === 'user' ? 1 : 2, visibility: 'visible' as const,
+    location: { kind: 'turn' as const, turn },
+    data: { seq: kind === 'user' ? 1 : 2, time: 1, content: [{ type: 'text', text }] },
+  };
+}
+
+function readerProps(text: string, renderSlot: ReaderProps['renderSlot'], renderSlotChain: ReaderProps['renderSlotChain']): ReaderProps {
+  const turn = turnOf();
+  const user = messageNode('user', text);
+  const steering = messageNode('steering', text);
+  user.location = { kind: 'turn', turn };
+  steering.location = { kind: 'turn', turn };
+  const nodes = new Map([[user.key, user], [steering.key, steering]]);
+  const chat = { order: [user.key, steering.key], nodes, timeline: { turns: new Map([[1, turn]]) } };
+  const session = {
+    running: false, openState: 'ready', hasMore: false, loadingOlder: false,
+    pendingSubmissions: [{ requestId: `pending-${text.length}`, text, time: 1, placement: 'transcript' }],
+  };
+  const store = createReaderStore().create(`session-${text.length}`);
+  store.actions.setMotion(false);
+  const source = <T,>(value: T) => ({ getSnapshot: () => value, subscribe: () => () => {} });
+  return {
+    sessionId: `session-${text.length}`,
+    useChat: (select: (snapshot: typeof chat) => unknown) => select(chat),
+    useSession: (select: (snapshot: typeof session) => unknown) => select(session),
+    useSessions: (select: (snapshot: { byId: Record<string, { cwd: string }> }) => unknown) => select({ byId: { [`session-${text.length}`]: { cwd: '/fixture' } } }),
+    useSessionStatus: (select: (snapshot: Map<string, unknown>) => unknown) => select(new Map()),
+    useStore: (select: (snapshot: ReturnType<typeof store.getSnapshot>) => unknown) => select(store.getSnapshot()),
+    actions: store.actions,
+    t: (key: string) => key,
+    loadImage: async () => ({ data: new Uint8Array(), mediaType: 'image/png' }),
+    officialImageLoader: Object.assign(async () => null, { peek: () => null }),
+    officialFileMentions: () => undefined,
+    officialPreviewFile: () => {},
+    officialHost: source({ home: '/fixture' }),
+    fillComposer: () => true,
+    openFile: () => {},
+    loadOlder: async () => {},
+    openView: () => {},
+    renderSlot,
+    renderSlotChain,
+  } as ReaderProps;
+}
+
+function NativeColumn({ renderSlot, kind, text }: {
+  renderSlot: ReaderProps['renderSlot'];
+  kind: 'user' | 'steering';
+  text: string;
+}) {
+  const node = messageNode(kind, text);
+  const owner = {
+    cwd: '/fixture', openFile: () => {}, openSkill: () => {}, forkAt: () => {},
+    inspectCall: () => {}, loadImage: async () => null,
+    renderMessageImages: () => null, fileMentions: () => undefined, node,
+  };
+  return (
+    <div data-native={kind} style={{ width: '100%', maxWidth: 'var(--dsh-chat-content-width, 748px)', display: 'flex', flexDirection: 'column' }}>
+      <div style={{ minWidth: 0 }}>
+        {renderSlot(OFFICIAL_SLOTS.nodes, owner, {
+          entryKey: kind,
+          hookContext: { turnData: node.location.turn.data, disclosureReset: { getSnapshot: () => 0, subscribe: () => () => {}, set: () => {} } },
+          fallback: null,
+        })}
+      </div>
+    </div>
+  );
+}
+
+function boxOf(root: ParentNode | null, kind: 'user' | 'steering' | 'pending') {
+  const scope = kind === 'pending'
+    ? root?.querySelector('[data-reader-pending-submission]')
+    : root?.querySelector(`[data-reader-key="${kind}-key"]`);
+  if (!scope) return null;
+  if (kind === 'pending') {
+    return [...scope.children].find(element => element instanceof HTMLElement && element.querySelector('button') === null) ?? null;
+  }
+  const slot = scope.querySelector('[data-slot]');
+  return slot?.firstElementChild?.firstElementChild?.firstElementChild ?? null;
+}
+
+function nativeBox(frame: ParentNode, kind: 'user' | 'steering') {
+  const column = frame.querySelector(`[data-native="${kind}"]`);
+  const slot = column?.querySelector('[data-slot]');
+  return slot?.firstElementChild?.firstElementChild?.firstElementChild ?? null;
+}
+
+function measure(element: Element | null) {
+  if (!element) return { w: 0, h: 0, font: '', line: '' };
+  const style = getComputedStyle(element);
+  const rect = element.getBoundingClientRect();
+  return {
+    w: Math.round(rect.width * 10) / 10,
+    h: Math.round(rect.height * 10) / 10,
+    font: style.fontSize,
+    line: style.lineHeight,
+  };
+}
+
+async function verify() {
+  const root = new Context();
+  await root.plugin(SlotRegistry);
+  let run = async () => {};
+  await root.plugin({ name: 'reader-bubble-width', inject: ['slots'], async apply(ctx: Context) {
+    const slots = ctx.slots as any;
+    slots.install(createSlotRenderer());
+    const source = <T,>(value: T) => ({ getSnapshot: () => value, subscribe: () => () => {} });
+    const binding = { key: 'session-width', ctx: new Context(), hooks: {}, keyedHooks: {}, props: { sessionId: 'session-width' } };
+    slots.installScope('session', {
+      current: source(binding), bindingSource: () => source(binding), renderArea: (_: unknown, props: { children?: unknown }) => props.children,
+    });
+    slots.installLocale({ ...source({}), bind: () => (key: string) => key });
+    const HostUser = (props: Record<string, unknown>) => (
+      <UserMessageNodeView
+        {...props as never}
+        t={(props.t as ((key: string) => string) | undefined) ?? ((key: string) => key)}
+        openFile={(props.openFile as (() => void) | undefined) ?? (() => {})}
+        openSkill={(props.openSkill as (() => void) | undefined) ?? (() => {})}
+        renderMessageImages={(props.renderMessageImages as (() => null) | undefined) ?? (() => null)}
+      />
+    );
+    slots.register({ name: 'root', children: {
+      'conversation.chat.node': { kind: 'keyed', scope: 'session', inject: { hooks: {
+        turnData: (_: unknown, context: { turnData?: unknown }) => () => context.turnData,
+        disclosure: (_: unknown, context: { disclosureReset?: { getSnapshot(): number } }) => () => context.disclosureReset,
+      } } },
+      'conversation.message.images': { kind: 'single', scope: 'session' },
+      'fixture.reader': { kind: 'single', scope: 'session' },
+    } }, ({ SessionProvider, renderSlot }: any) => (
+      <SessionProvider>
+        {renderSlot('fixture.reader', {})}
+        {CASES.map(item => (
+          <section key={`native-${item.name}`} data-native-case={item.name} style={{ width: item.width, ['--dsh-chat-content-width' as string]: item.axis || undefined }}>
+            <NativeColumn renderSlot={renderSlot} kind="user" text={item.text} />
+            <NativeColumn renderSlot={renderSlot} kind="steering" text={item.text} />
+          </section>
+        ))}
+      </SessionProvider>
+    ));
+    slots.register({ name: 'fixture.reader', children: {
+      ...officialChildren(slots),
+      'dsh-better-display.block': { kind: 'chain', scope: 'session' },
+    } }, ({ renderSlot, renderSlotChain }: any) => (
+      <>
+        {CASES.map(item => (
+          <section key={item.name} data-case={item.name} style={{ width: item.width, ['--dsh-chat-content-width' as string]: item.axis || undefined }}>
+            <div data-reader-mount>
+              <Reader {...readerProps(item.text, renderSlot, renderSlotChain)} />
+            </div>
+          </section>
+        ))}
+      </>
+    ));
+    slots.register({ name: 'conversation.chat.node', key: 'user', locale: 'chat' }, HostUser);
+    slots.register({ name: 'conversation.chat.node', key: 'steering', locale: 'chat' }, HostUser);
+    const stopMirror = installOfficialSlots(ctx);
+    run = async () => {
+      await new Promise(resolve => queueMicrotask(resolve));
+      const container = document.getElementById('app')!;
+      const reactRoot = createRoot(container);
+      flushSync(() => reactRoot.render(slots.renderSlot('root', {})));
+      for (const reader of container.querySelectorAll<HTMLElement>('[data-dsh-better-display]')) reader.style.padding = '0';
+      await new Promise(resolve => requestAnimationFrame(() => resolve(undefined)));
+      const readerSlot = container.querySelector('[data-reader-key="user-key"] [data-slot]')?.getAttribute('data-slot') ?? '';
+      const nativeSlot = container.querySelector('[data-native="user"] [data-slot]')?.getAttribute('data-slot') ?? '';
+      const rows = CASES.map(item => {
+        const frame = container.querySelector(`[data-case="${item.name}"]`);
+        const nativeFrame = container.querySelector(`[data-native-case="${item.name}"]`);
+        const mount = frame?.querySelector('[data-reader-mount]') ?? null;
+        const user = measure(boxOf(mount, 'user'));
+        const steering = measure(boxOf(mount, 'steering'));
+        const pending = measure(boxOf(mount, 'pending'));
+        const nativeUser = measure(nativeFrame ? nativeBox(nativeFrame, 'user') : null);
+        const nativeSteering = measure(nativeFrame ? nativeBox(nativeFrame, 'steering') : null);
+        return {
+          name: item.name,
+          user, steering, pending, nativeUser, nativeSteering,
+          readerHtml: mount?.querySelector('[data-reader-key="user-key"]')?.innerHTML.slice(0, 400) ?? '',
+        };
+      });
+      stopMirror();
+      Object.assign(window, { readerBubbleResult: { readerSlot, nativeSlot, expectedReaderSlot: OFFICIAL_SEATS.nodes, expectedNativeSlot: OFFICIAL_SLOTS.nodes, rows } });
+    };
+  } });
+  await run();
+}
+
+verify().catch(error => {
+  console.error(error);
+  Object.assign(window, { readerBubbleResult: { error: `${error instanceof Error ? error.stack : String(error)}\n${document.getElementById('app')?.innerHTML.slice(0, 2000)}` } });
+});

package/tests/flags.test.ts

@@ -0,0 +1,66 @@
+import assert from 'node:assert/strict';
+import { spawnSync } from 'node:child_process';
+import { mkdtempSync, readFileSync, rmSync, writeFileSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+import { test } from 'vitest';
+import { fileURLToPath } from 'node:url';
+import { apply } from '../src/dsh-better-display.js';
+import { defaultFlags, loadFlags } from '../src/flags.js';
+
+test('readerEnabled defaults to true', () => {
+  assert.equal(defaultFlags.readerEnabled, true);
+  const file = JSON.parse(readFileSync(fileURLToPath(new URL('../flags.json', import.meta.url)), 'utf8')) as { readerEnabled: boolean };
+  assert.equal(file.readerEnabled, true);
+  assert.equal(loadFlags().readerEnabled, true);
+  assert.equal(loadFlags({ readerEnabled: false }).readerEnabled, false);
+  const dir = mkdtempSync(join(tmpdir(), 'bd-flags-'));
+  try {
+    const broken = join(dir, 'flags.json');
+    writeFileSync(broken, '{ "readerEnabled": "yes" }');
+    assert.equal(loadFlags(broken).readerEnabled, true);
+    assert.equal(loadFlags(join(dir, 'missing.json')).readerEnabled, true);
+  } finally {
+    rmSync(dir, { recursive: true, force: true });
+  }
+});
+
+test('apply skips route registration when readerEnabled is false', () => {
+  let registered = 0;
+  let effects = 0;
+  apply({
+    webServer: {
+      register() {
+        registered += 1;
+        return () => undefined;
+      },
+    },
+    effect(run: () => void) {
+      effects += 1;
+      run();
+    },
+  } as never, { flags: { readerEnabled: false } });
+  assert.equal(registered, 0);
+  assert.equal(effects, 0);
+  assert.doesNotThrow(() => apply({} as never, { flags: { readerEnabled: true } }));
+});
+
+test('check-dead-flags fails when a flags.json key is unused under src', () => {
+  const script = fileURLToPath(new URL('../scripts/check-dead-flags.mjs', import.meta.url));
+  const ok = spawnSync(process.execPath, [script], { encoding: 'utf8' });
+  assert.equal(ok.status, 0, ok.stderr || ok.stdout);
+  const dir = mkdtempSync(join(tmpdir(), 'bd-dead-flags-'));
+  try {
+    const flags = join(dir, 'flags.json');
+    writeFileSync(flags, JSON.stringify({ readerEnabled: true, unusedFlag: false }));
+    const bad = spawnSync(process.execPath, [script], {
+      encoding: 'utf8',
+      env: { ...process.env, FLAGS_JSON: flags },
+    });
+    assert.notEqual(bad.status, 0);
+    assert.match(bad.stderr, /unusedFlag/);
+    assert.doesNotMatch(bad.stderr, /readerEnabled/);
+  } finally {
+    rmSync(dir, { recursive: true, force: true });
+  }
+});

package/tests/fold-choreography.test.ts

@@ -1,28 +1,52 @@
-import test from 'node:test';
+import { test } from 'vitest';
 import assert from 'node:assert/strict';
 import { collapseRows, containsNewUser, flowRows, FOLD_TIMING, retiringKeys } from '../src/client/fold-choreography.js';
 import { presentLiveTurn } from '../src/client/live-turn.js';
 import type { LiveStep } from '../src/client/live-turn.js';
 const reasoning = (n: number): LiveStep => ({ kind: 'reasoning', key: `r${n}`, nodeKey: `n${n}`, start: 0, blocks: [], step: n });
 const body: LiveStep = { kind: 'body', key: 'b1', nodeKey: 'n1', start: 1, blocks: [], step: 1 };
+const tool: LiveStep = {
+  kind: 'tool',
+  key: 't1',
+  entry: {
+    kind: 'tool',
+    key: 't1',
+    callId: 'c1',
+    step: 0,
+    order: 0,
+    draft: { kind: 'tool-call', callId: 'c1', name: 'read', argsRaw: '{"path":"Reader.tsx"}' },
+  },
+};
 const open = { status: 'open' } as const;
 test('first fold retains every visible step key and admits no incoming reasoning', () => {
-  const before = presentLiveTurn([reasoning(1), body], open);
-  const after = presentLiveTurn([reasoning(1), body, reasoning(2)], open);
-  assert.deepEqual(retiringKeys(before, after, {}), ['r1', 'b1']);
+  const before = presentLiveTurn([reasoning(1), tool], open);
+  const after = presentLiveTurn([reasoning(1), tool, reasoning(2)], open);
+  assert.deepEqual(retiringKeys(before, after, {}), ['r1', 't1']);
   const rows = collapseRows(before, after);
-  assert.deepEqual(rows.filter(x => x.kind === 'step').map(x => x.key), ['r1', 'b1']);
+  assert.deepEqual(rows.filter(x => x.kind === 'step').map(x => x.key), ['r1', 't1']);
   assert.equal(rows[0].kind, 'summary');
-  assert.equal(rows[0].kind === 'summary' && rows[0].item.summary, '思考×0 · 输出×0');
+  assert.equal(rows[0].kind === 'summary' && rows[0].item.summary, '思考×0 · 工具×0');
   assert.equal(new Set(flowRows(after).map(row => row.key)).size, flowRows(after).length);
 });
 test('repeat fold retires only displayed open rows, retaining the same summary identity', () => {
-  const before = presentLiveTurn([reasoning(1), body, reasoning(2)], open);
-  const after = presentLiveTurn([reasoning(1), body, reasoning(2), reasoning(3)], open);
+  const before = presentLiveTurn([reasoning(1), tool, reasoning(2)], open);
+  const after = presentLiveTurn([reasoning(1), tool, reasoning(2), reasoning(3)], open);
   assert.deepEqual(retiringKeys(before, after, {}), ['r2']);
   assert.equal(collapseRows(before, after)[0].key, flowRows(before)[0].key);
   assert.deepEqual(retiringKeys(before, after, { 'live-fold:r1': true }), []);
 });
+test('narration never enters a fold cell, so choreography never retires it', () => {
+  const before = presentLiveTurn([reasoning(1)], open);
+  const withNarration = presentLiveTurn([reasoning(1), body], open);
+  assert.deepEqual(retiringKeys(before, withNarration, {}), []);
+  assert.deepEqual(flowRows(withNarration).map(row => row.key), ['r1', 'b1']);
+
+  const after = presentLiveTurn([reasoning(1), body, tool, reasoning(2)], open);
+  assert.equal(after.some(item => item.kind === 'fold' && item.steps.some(step => step.kind === 'body')), false);
+  // The prior reasoning run folds (r1 retires), but narration itself never does.
+  assert.deepEqual(retiringKeys(withNarration, after, {}), ['r1']);
+  assert.ok(!retiringKeys(withNarration, after, {}).includes('b1'));
+});
 test('user admission bypasses buffered choreography and preserves source ordering', () => {
   const before = presentLiveTurn([reasoning(1)], open);
   const user: LiveStep = { kind: 'user', key: 'u2', nodeKey: 'u2' };

package/tests/fold-intensity.test.ts

@@ -1,4 +1,4 @@
-import { test } from 'node:test';
+import { test } from 'vitest';
 import assert from 'node:assert/strict';
 import { readFileSync } from 'node:fs';
 import { dirname, resolve } from 'node:path';
@@ -57,17 +57,22 @@ test('fold slider maps 0/1/2 and migrates older persist flags', () => {
   assert.equal(processOnlyFromIntensity(2), true);
 });
 
-test('autoFold false keeps every step open; autoFold true is current-main fold-on-next-reasoning', () => {
+test('autoFold false keeps every step open; autoFold true folds only thinking/tool runs', () => {
   const steps = [reasoning(1), body, tool, reasoning(2)];
   const none = presentLiveTurn(steps, open, false);
   assert.equal(none.some(item => item.kind === 'fold'), false);
   assert.deepEqual(none.map(item => item.key), ['r1', 'b1', 't1', 'r2']);
 
+  // Narration stays open; each prior reasoning/tool run folds in its own place.
   const standard = presentLiveTurn(steps, open, true);
-  assert.equal(standard[0]?.kind, 'fold');
-  if (standard[0]?.kind !== 'fold') throw new Error('expected standard fold');
-  assert.deepEqual(standard[0].steps.map(step => step.key), ['r1', 'b1', 't1']);
-  assert.deepEqual(standard.filter(item => item.kind === 'open').map(item => item.key), ['r2']);
+  assert.deepEqual(standard.map(item => item.kind), ['fold', 'open', 'fold', 'open']);
+  assert.deepEqual(standard.filter(item => item.kind === 'open').map(item => item.key), ['b1', 'r2']);
+  const folds = standard.filter(item => item.kind === 'fold');
+  assert.equal(folds.length, 2);
+  if (folds[0]?.kind !== 'fold' || folds[1]?.kind !== 'fold') throw new Error('expected standard folds');
+  assert.deepEqual(folds[0].steps.map(step => step.key), ['r1']);
+  assert.deepEqual(folds[1].steps.map(step => step.key), ['t1']);
+  assert.equal(standard.some(item => item.kind === 'fold' && item.steps.some(step => step.kind === 'body')), false);
 });
 
 test('root reader store persists glass off and standard fold on dsh.reader.v1', () => {

package/tests/footer-precedence.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/history-word-regression.test.ts

@@ -1,5 +1,5 @@
 import assert from 'node:assert/strict';
-import { test } from 'node:test';
+import { test } from 'vitest';
 import { WordTimeline } from '../src/client/word-timeline.js';
 
 test('opening a long existing answer does not animate every historical word', () => {