dsh-better-display 0.3.8 → 0.3.9

package/tests/reader-user-bubble.test.ts

@@ -0,0 +1,137 @@
+import assert from 'node:assert/strict';
+import { existsSync, mkdtempSync, readFileSync, rmSync, writeFileSync } from 'node:fs';
+import { createServer } from 'node:http';
+import { pathToFileURL } from 'node:url';
+import { createRequire } from 'node:module';
+import { homedir, tmpdir } from 'node:os';
+import { dirname, join, resolve } from 'node:path';
+import { transform } from 'lightningcss';
+import { test } from 'vitest';
+import { OFFICIAL_SEATS, OFFICIAL_SLOTS } from '../src/client/official-slots.js';
+
+// Width is a layout fact of the real Reader and the host user/steering renderer.
+// This skips in CI, which has no pinned Chromium and no Harness tree.
+const harnessPointer = join(homedir(), '.config/dshx/harness');
+const harness = process.env.DSHX_HARNESS?.trim()
+  || (existsSync(harnessPointer) ? readFileSync(harnessPointer, 'utf8').trim() : '');
+const browserRuntime = join(homedir(), '.codex/playwright-runtime/runtime.mjs');
+const skip = !harness ? 'DSH Harness source not available'
+  : !existsSync(browserRuntime) ? 'pinned Chromium runtime not available' : false;
+
+interface Box { w: number; h: number; font: string; line: string }
+interface Row {
+  name: string;
+  user: Box; steering: Box; pending: Box;
+  nativeUser: Box; nativeSteering: Box;
+  readerHtml: string;
+}
+interface BubbleResult {
+  error?: string;
+  readerSlot?: string;
+  nativeSlot?: string;
+  rows?: Row[];
+}
+
+test('reader user and steering bubbles match the host column cap', { skip, timeout: 120_000 }, async () => {
+  const root = resolve(import.meta.dirname, '..');
+  const require = createRequire(join(root, 'package.json'));
+  const { build } = createRequire(require.resolve('tsx'))('esbuild');
+  const webRequire = createRequire(join(harness, 'packages/client/web/package.json'));
+  const out = mkdtempSync(join(tmpdir(), 'reader-user-bubble-'));
+  const cssParts: string[] = [];
+  try {
+    const { launchPinnedChromium } = await import(pathToFileURL(browserRuntime).href);
+    await build({
+      entryPoints: [join(root, 'tests/fixtures/reader-user-bubble.tsx')],
+      outfile: join(out, 'fixture.js'), bundle: true, platform: 'browser', format: 'esm', jsx: 'automatic',
+      alias: {
+        '@fixture/registry': join(harness, 'packages/client/ui-renderer/src/client/registry.ts'),
+        '@fixture/renderer': join(harness, 'packages/client/ui-renderer/src/client/scoped-slots.tsx'),
+        '@fixture/user-message': join(harness, 'packages/client/ui-chat/src/client/chat/MessageItem.tsx'),
+        '@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'),
+        '@deepseek-ai/dsh-client-store': join(harness, 'packages/client/store/src/index.ts'),
+        react: dirname(require.resolve('react/package.json')),
+        'react-dom': dirname(webRequire.resolve('react-dom/package.json')),
+      },
+      loader: { '.woff2': 'empty', '.woff': 'empty', '.ttf': 'empty', '.png': 'empty', '.jpg': 'empty', '.webp': 'empty' },
+      plugins: [{
+        name: 'css-modules',
+        setup(build: { onLoad: Function; onEnd: Function }) {
+          build.onLoad({ filter: /\.module\.css$/ }, (args: { path: string }) => {
+            const result = transform({ filename: args.path, code: readFileSync(args.path), cssModules: { pattern: 't[hash]_[local]' } });
+            const mapping: Record<string, string> = {};
+            for (const [key, value] of Object.entries(result.exports ?? {})) mapping[key] = value.name;
+            cssParts.push(Buffer.from(result.code).toString('utf8'));
+            return { contents: `export default ${JSON.stringify(mapping)};`, loader: 'js' };
+          });
+          build.onLoad({ filter: /\.css$/ }, (args: { path: string }) => {
+            cssParts.push(readFileSync(args.path, 'utf8'));
+            return { contents: 'export default {};', loader: 'js' };
+          });
+          build.onLoad({ filter: /\.svg$/ }, () => ({ contents: 'export default function Svg(){return null}', loader: 'js' }));
+          build.onEnd(() => { writeFileSync(join(out, 'fixture.css'), cssParts.join('\n')); });
+        },
+      }],
+      logLevel: 'silent',
+    });
+    const server = createServer((request, response) => {
+      if (request.url === '/fixture.js') {
+        response.setHeader('Content-Type', 'text/javascript');
+        response.end(readFileSync(join(out, 'fixture.js')));
+      } else if (request.url === '/fixture.css') {
+        response.setHeader('Content-Type', 'text/css');
+        response.end(readFileSync(join(out, 'fixture.css')));
+      } else {
+        response.setHeader('Content-Type', 'text/html');
+        response.end('<!doctype html><meta charset="utf-8"><link rel="stylesheet" href="/fixture.css"><style>html,body{margin:0;font-family:"PingFang SC","Hiragino Sans GB",sans-serif}</style><div id="app"></div><script type="module" src="/fixture.js"></script>');
+      }
+    });
+    await new Promise<void>(resolveListen => server.listen(0, '127.0.0.1', resolveListen));
+    let browser;
+    try {
+      browser = await launchPinnedChromium();
+      const page = await browser.newPage({ viewport: { width: 1400, height: 900 } });
+      const errors: string[] = [];
+      page.on('pageerror', (error: Error) => errors.push(String(error)));
+      page.on('console', (message: { type(): string; text(): string }) => {
+        if (message.type() === 'error') errors.push(message.text());
+      });
+      const address = server.address();
+      assert.ok(address && typeof address === 'object');
+      await page.goto(`http://127.0.0.1:${address.port}`);
+      await page.waitForFunction(() => 'readerBubbleResult' in window, undefined, { timeout: 20000 });
+      const result = await page.evaluate(() => Reflect.get(window, 'readerBubbleResult')) as BubbleResult;
+      assert.equal(result.error, undefined, result.error);
+      assert.deepEqual(errors, []);
+      assert.equal(result.readerSlot, OFFICIAL_SEATS.nodes);
+      assert.equal(result.nativeSlot, OFFICIAL_SLOTS.nodes);
+      assert.notEqual(result.readerSlot, 'conversation.chat.node');
+      for (const row of result.rows ?? []) {
+        assert.equal(row.user.w, row.nativeUser.w, `${row.name} user width ${row.user.w} != ${row.nativeUser.w} ${row.readerHtml}`);
+        assert.equal(row.user.h, row.nativeUser.h, `${row.name} user height`);
+        assert.equal(row.steering.w, row.nativeSteering.w, `${row.name} steering width`);
+        assert.equal(row.steering.h, row.nativeSteering.h, `${row.name} steering height`);
+        assert.equal(row.pending.w, row.nativeUser.w, `${row.name} pending width`);
+        assert.equal(row.pending.h, row.nativeUser.h, `${row.name} pending height`);
+        assert.equal(row.pending.font, '14px', `${row.name} pending font`);
+        assert.equal(row.pending.line, '22px', `${row.name} pending line`);
+        assert.equal(row.nativeUser.font, '14px', `${row.name} native font`);
+        assert.equal(row.nativeUser.line, '22px', `${row.name} native line`);
+      }
+      const byName = Object.fromEntries((result.rows ?? []).map(row => [row.name, row]));
+      assert.ok(byName.short.user.h < 50, 'a four-glyph message stays on one line');
+      assert.ok(byName.short.user.w < 160, 'a four-glyph message stays content-sized');
+      assert.ok(byName.thirty.user.h < 50, 'thirty glyphs fit on one line at the default column');
+      assert.ok(Math.abs(byName.long.user.w - 748 * 0.702) < 1, 'the default cap follows 748 * 0.702');
+      assert.ok(byName['wide-axis'].user.w > 540, 'a wider content axis is not stuck at 525px');
+      assert.ok(Math.abs(byName.narrow.user.w - 480 * 0.82) < 1, 'a narrow column uses 82% of the column');
+      assert.ok(byName.short.steering.h < 50, 'a short steering message stays on one line');
+    } finally {
+      await browser?.close();
+      await new Promise<void>(resolveClose => server.close(() => resolveClose()));
+    }
+  } finally {
+    rmSync(out, { recursive: true, force: true });
+  }
+});

package/tests/reasoning-follow.test.ts

@@ -1,5 +1,5 @@
 import assert from 'node:assert/strict';
-import { test } from 'node:test';
+import { test } from 'vitest';
 import { reasoningTarget } from '../src/client/reasoning-follow.js';
 
 test('reasoning follows ordinary growth in two-line steps without passing the tail', () => {

package/tests/retiring-content.test.ts

@@ -1,5 +1,5 @@
 import assert from 'node:assert/strict';
-import { test } from 'node:test';
+import { test } from 'vitest';
 import { readFileSync } from 'node:fs';
 import { createRequire } from 'node:module';
 import { runInNewContext } from 'node:vm';
@@ -14,7 +14,7 @@ const compiled = ts.transpileModule(`const EASING = 'cubic-bezier(.22,1,.36,1)';
 
 // Drive the component's real effect with deterministic hooks and a compositor
 // that never finishes unless the test explicitly sends onfinish.
-function mount() {
+function mount(options?: { containsFocus?: boolean; hidden?: boolean }) {
   let cursor = 0;
   let enabled = true;
   const hooks: unknown[] = [];
@@ -23,8 +23,22 @@ function mount() {
   let timerId = 0;
   const timers = new Map<number, { run: () => void; duration: number }>();
   const animations: Array<{ onfinish?: () => void; cancelled: number }> = [];
+  const cutFocus = { id: 'focus-cut' };
+  const outside = { id: 'outside' };
+  const listeners = new Set<() => void>();
+  const column = {
+    id: 'reader-column',
+    tabIndex: -1,
+    focus() { page.active = column; },
+  };
+  const page = {
+    hidden: options?.hidden ?? false,
+    active: (options?.containsFocus ? cutFocus : null) as { id: string } | null,
+  };
   const element = {
-    contains: () => false,
+    contains: (node: unknown) => node === cutFocus,
+    closest: (selector: string) => selector === '[data-chat-flow]' ? column : null,
+    parentElement: null,
     getBoundingClientRect: () => ({ height: 64 }),
     animate: (_frames: unknown, options: { duration: number; fill: string }) => {
       assert.equal(options.duration, 220);
@@ -45,7 +59,14 @@ function mount() {
     require: createRequire(import.meta.url),
     css: { retiringContent: 'retiring' },
     StreamMotionContext: {},
-    document: { activeElement: null },
+    HTMLElement: globalThis.HTMLElement,
+    Element: globalThis.Element,
+    document: {
+      get activeElement() { return page.active; },
+      get hidden() { return page.hidden; },
+      addEventListener: (type: string, listener: () => void) => { if (type === 'visibilitychange') listeners.add(listener); },
+      removeEventListener: (type: string, listener: () => void) => { if (type === 'visibilitychange') listeners.delete(listener); },
+    },
     window: {
       setTimeout: (run: () => void, duration: number) => { timers.set(++timerId, { run, duration }); return timerId; },
       clearTimeout: (id: number) => { timers.delete(id); },
@@ -65,10 +86,13 @@ function mount() {
     useEffect: effect,
   });
   assert.equal(typeof exports.RetiringContent, 'function');
+  type Rendered = { ref: { current: unknown }; props: { onBlur: (event: unknown) => void } };
+  let last: Rendered | null = null;
   const render = (visible: boolean) => {
     cursor = 0;
     pending = [];
-    const result = exports.RetiringContent!({ visible, children: 'narration' }) as { ref: { current: unknown } } | null;
+    const result = exports.RetiringContent!({ visible, children: 'narration' }) as Rendered | null;
+    last = result;
     if (result) result.ref.current = element;
     for (const { index, run, deps } of pending) {
       effects.get(index)?.cleanup?.();
@@ -78,7 +102,17 @@ function mount() {
   };
   render(true);
   return {
-    render, timers, animations,
+    render, timers, animations, listeners,
+    focusId: () => page.active?.id ?? '',
+    // Move focus out of the cut the way a real blur reports it.
+    blur: () => {
+      page.active = outside;
+      last?.props.onBlur({ currentTarget: element, relatedTarget: outside });
+    },
+    hide: () => {
+      page.hidden = true;
+      for (const listener of [...listeners]) listener();
+    },
     disableMotion: () => { enabled = false; },
     unmount: () => { for (const effect of effects.values()) effect.cleanup?.(); },
     deadline: () => {
@@ -135,3 +169,61 @@ test('disabled motion retires immediately without an animation or timer', () =>
   assert.equal(view.timers.size, 0);
   view.unmount();
 });
+
+test('reduced motion moves focus out of cut content before it unmounts', () => {
+  const reduced = mount({ containsFocus: true });
+  reduced.disableMotion();
+  reduced.render(false);
+  assert.equal(reduced.render(false), null);
+  assert.equal(reduced.focusId(), 'reader-column');
+  assert.equal(reduced.animations.length, 0);
+  reduced.unmount();
+
+  const hidden = mount({ containsFocus: true, hidden: true });
+  hidden.render(false);
+  assert.equal(hidden.render(false), null);
+  assert.equal(hidden.focusId(), 'reader-column');
+  assert.equal(hidden.animations.length, 0);
+  hidden.unmount();
+
+  // The animated path still defers while focus is inside the cut.
+  const playing = mount({ containsFocus: true });
+  assert.ok(playing.render(false));
+  assert.equal(playing.focusId(), 'focus-cut');
+  assert.equal(playing.animations.length, 0);
+  playing.unmount();
+});
+
+test('a page hidden while focus defers the collapse retires at once and keeps focus', () => {
+  const view = mount({ containsFocus: true });
+  assert.ok(view.render(false));
+  // The focus-held state re-runs the effect; it must keep waiting, not animate.
+  assert.ok(view.render(false));
+  assert.equal(view.focusId(), 'focus-cut');
+  assert.equal(view.animations.length, 0);
+  assert.equal(view.listeners.size, 1, 'the focus-held path still listens for a hidden page');
+  view.hide();
+  assert.equal(view.render(false), null);
+  assert.equal(view.focusId(), 'reader-column');
+  assert.equal(view.animations.length, 0);
+  assert.equal(view.timers.size, 0);
+  view.unmount();
+  assert.equal(view.listeners.size, 0);
+});
+
+test('focus leaving the cut still plays the collapse, bounded by its deadline', () => {
+  const view = mount({ containsFocus: true });
+  view.render(false);
+  view.render(false);
+  assert.equal(view.animations.length, 0);
+  view.blur();
+  assert.ok(view.render(false));
+  assert.equal(view.animations.length, 1);
+  assert.equal(view.listeners.size, 1);
+  view.deadline();
+  assert.equal(view.render(false), null);
+  assert.equal(view.focusId(), 'outside');
+  view.unmount();
+  assert.equal(view.listeners.size, 0);
+  assert.equal(view.timers.size, 0);
+});

package/tests/reveal.test.ts

@@ -1,5 +1,5 @@
 import assert from 'node:assert/strict';
-import { test } from 'node:test';
+import { test } from 'vitest';
 import { mkdtemp, mkdir, rm, writeFile } from 'node:fs/promises';
 import { IncomingMessage, ServerResponse } from 'node:http';
 import { Socket } from 'node:net';
@@ -23,9 +23,9 @@ test('absolute parent predicate accepts POSIX, drive and UNC roots only', () =>
   assert.equal(isAbsoluteWorkspacePath(dirname('docs/a.txt')), false);
 });
 
-async function workspace(t: { after: (cleanup: () => Promise<void>) => void }) {
+async function workspace(t: { onTestFinished: (cleanup: () => Promise<void>) => void }) {
   const root = await mkdtemp(join(tmpdir(), 'bd-reveal-'));
-  t.after(() => rm(root, { recursive: true, force: true }));
+  t.onTestFinished(() => rm(root, { recursive: true, force: true }));
   await mkdir(join(root, 'docs'));
   await writeFile(join(root, 'docs', 'report.md'), 'report');
   return root;