dsh-better-display 0.3.9 → 0.3.12

package/src/client/primitive-labels.ts

@@ -21,6 +21,7 @@ export const readBlockLabels: ReadBlockLabels = {
 };
 
 export const terminalBlockLabels: TerminalBlockLabels = {
+  commandLine: line => `命令第 ${line} 行`,
   signal: signal => `信号 ${signal}`, exitCode: code => `退出码 ${code}`, noExitCode: '无退出码',
   running: '执行中', failed: '失败', done: '已完成', copy: '复制', copied: '已复制',
   noOutput: '没有输出', collapseAria: '收起命令输出', collapse: '收起',

package/tests/browser-official-bridge.tsx

@@ -78,7 +78,8 @@ slots.register({ name: 'root', children: {
   'tool.call.toolview': { kind: 'keyed', scope: 'session' },
   'conversation.chat.turnTail': { kind: 'list', scope: 'session' },
   'conversation.chat.node': { kind: 'keyed', scope: 'session', inject: { hooks: { turnData: (_s: any, value: any) => () => value } } },
-  'conversation.message.images': { kind: 'single', scope: 'session' },
+  'conversation.chat.message.images': { kind: 'single', scope: 'session' },
+  'conversation.chat.user.images': { kind: 'single', scope: 'session' },
   'conversation.input.overlay': { kind: 'list', scope: 'session' },
   'fixture.reader': { kind: 'single', scope: 'session' },
 } }, ({ SessionProvider, renderSlot }: any) => <SessionProvider>

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

@@ -4,6 +4,7 @@ import { flushSync } from 'react-dom';
 import { SlotRegistry } from '@fixture/registry';
 import { createSlotRenderer } from '@fixture/renderer';
 import { UserMessageNodeView } from '@fixture/user-message';
+import { UserContent } from '@fixture/user-content';
 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';
@@ -81,16 +82,20 @@ function NativeColumn({ renderSlot, kind, text }: {
 }) {
   const node = messageNode(kind, text);
   const owner = {
-    cwd: '/fixture', openFile: () => {}, openSkill: () => {}, forkAt: () => {},
+    cwd: '/fixture', openFile: () => {}, forkAt: () => {},
     inspectCall: () => {}, loadImage: async () => null,
-    renderMessageImages: () => null, fileMentions: () => undefined, node,
+    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: () => {} } },
+          hookContext: {
+            turnData: node.location.turn.data,
+            disclosureReset: { getSnapshot: () => 0, subscribe: () => () => {}, set: () => {} },
+            useGroupAction: () => ({ current: null }),
+          },
           fallback: null,
         })}
       </div>
@@ -98,22 +103,33 @@ function NativeColumn({ renderSlot, kind, text }: {
   );
 }
 
+function paddedTextBox(scope: ParentNode | null): Element | null {
+  if (!scope) return null;
+  const walker = document.createTreeWalker(scope, NodeFilter.SHOW_TEXT);
+  let node: Node | null;
+  while ((node = walker.nextNode())) {
+    if (!node.textContent?.trim()) continue;
+    const parent = node.parentElement;
+    if (!parent || parent.closest('button')) continue;
+    let element: HTMLElement | null = parent;
+    while (element && element !== scope) {
+      if (parseFloat(getComputedStyle(element).paddingTop) > 0) return element;
+      element = element.parentElement;
+    }
+    return parent;
+  }
+  return null;
+}
+
 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;
+  return paddedTextBox(scope ?? 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;
+  return paddedTextBox(frame.querySelector(`[data-native="${kind}"]`));
 }
 
 function measure(element: Element | null) {
@@ -146,16 +162,15 @@ async function verify() {
         {...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,
+        groupAction: (_: unknown, context: { useGroupAction?: unknown }) => context.useGroupAction,
       } } },
-      'conversation.message.images': { kind: 'single', scope: 'session' },
+      'conversation.chat.message.images': { kind: 'single', scope: 'session' },
       'fixture.reader': { kind: 'single', scope: 'session' },
     } }, ({ SessionProvider, renderSlot }: any) => (
       <SessionProvider>
@@ -182,6 +197,13 @@ async function verify() {
         ))}
       </>
     ));
+    slots.registerFactory({
+      name: 'conversation.chat.user.content', scope: 'session', locale: 'chat',
+      children: { 'conversation.chat.user.images': { kind: 'single', scope: 'session' } },
+    }, UserContent);
+    slots.registerFactory({
+      name: 'conversation.user.text', scope: 'session', locale: 'chat',
+    }, ({ text }: { text: string }) => <>{text}</>);
     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);

package/tests/reader-composer-seat.test.ts

@@ -0,0 +1,61 @@
+import assert from 'node:assert/strict';
+import { readFileSync } from 'node:fs';
+import { dirname, resolve } from 'node:path';
+import { test } from 'vitest';
+import { fileURLToPath } from 'node:url';
+import { hostComposerUsable, READER_COMPOSER_RESTORE } from '../src/client/composer-seat.js';
+import { ReaderEntryPolicy, readerEntryRequested } from '../src/client/entry-policy.js';
+
+const root = resolve(dirname(fileURLToPath(import.meta.url)), '..');
+
+/** Specificity tuple [ids, attributes-and-pseudos, elements] for the two selectors this fix compares. */
+function specificity(selector: string): [number, number, number] {
+  const expanded = selector.replace(/:has\(([^)]*)\)/g, ' $1 ');
+  const ids = expanded.match(/#[\w-]+/g)?.length ?? 0;
+  const attrs = expanded.match(/\[[^\]]+\]/g)?.length ?? 0;
+  const without = expanded.replace(/\[[^\]]+\]/g, ' ').replace(/:[^\s#.[]+/g, ' ').replace(/#[\w-]+/g, ' ');
+  const elements = without.match(/[a-zA-Z][\w-]*/g)?.length ?? 0;
+  return [ids, attrs, elements];
+}
+
+const SKIN_HIDE = 'body[data-dsh-claude-style][data-dsh-claude-composer-active] [data-dsh-claude-composer-hidden] [data-composer-seat]';
+
+test('a new session lands on reader and the host composer stays usable there', () => {
+  const policy = new ReaderEntryPolicy(false);
+  assert.equal(policy.select(null), 'reader');
+  assert.equal(policy.select(undefined), 'reader');
+  assert.equal(hostComposerUsable({ skinHidesSeat: false, readerMounted: true }), true);
+  assert.equal(hostComposerUsable({ skinHidesSeat: true, readerMounted: true }), true);
+});
+
+test('?reader=1 still enters reading once and does not cover the composer', () => {
+  assert.equal(readerEntryRequested('?reader=1'), true);
+  let consumed = 0;
+  const policy = new ReaderEntryPolicy(true, () => { consumed++; });
+  assert.equal(policy.select('chat'), 'reader');
+  assert.equal(consumed, 1);
+  assert.equal(policy.select('chat'), null);
+  assert.equal(hostComposerUsable({ skinHidesSeat: true, readerMounted: true }), true);
+});
+
+test('leaving the reader tab does not keep forcing the composer visible', () => {
+  const policy = new ReaderEntryPolicy(false);
+  assert.equal(policy.select('chat'), null);
+  assert.equal(policy.select('trajectory'), null);
+  assert.equal(policy.select('reader'), null);
+  assert.equal(hostComposerUsable({ skinHidesSeat: true, readerMounted: false }), false);
+  assert.equal(hostComposerUsable({ skinHidesSeat: false, readerMounted: false }), true);
+});
+
+test('the reader stylesheet outranks the skin hide and the bundle ships it', () => {
+  const css = readFileSync(resolve(root, 'src/client/Reader.module.css'), 'utf8');
+  const reader = readFileSync(resolve(root, 'src/client/Reader.tsx'), 'utf8');
+  assert.match(reader, /data-dsh-better-display=/);
+  assert.match(css, new RegExp(`:global\\(${READER_COMPOSER_RESTORE.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}\\)`));
+  assert.match(css, /display:\s*flex\s*!important/);
+  const ours = specificity(READER_COMPOSER_RESTORE);
+  const skin = specificity(SKIN_HIDE);
+  assert.ok(ours[0] > skin[0] || ours[1] > skin[1] || (ours[1] === skin[1] && ours[2] > skin[2]), `${ours} should beat ${skin}`);
+  const client = readFileSync(resolve(root, 'lib/client.js'), 'utf8');
+  assert.match(client, /html body\[data-dsh-claude-style\]\[data-dsh-claude-composer-active\] \[data-dsh-claude-composer-hidden\]:has\(\[data-dsh-better-display\]\) \[data-composer-seat\]\{display:flex!important\}/);
+});

package/tests/reader-official-users.test.ts

@@ -26,7 +26,7 @@ test('official user output stays inside the cluster that carries the host width'
   assert.doesNotMatch(css, /\[data-slot="conversation\.chat\.node"\]/);
 });
 
-test('headless Reader users retain official renderers, anchors and empty-key fallback', { skip }, async () => {
+test('headless Reader users retain official renderers, anchors and empty-key fallback', { skip, timeout: 15_000 }, async () => {
   const root = resolve(import.meta.dirname, '..');
   const require = createRequire(join(root, 'package.json'));
   const { build } = createRequire(require.resolve('tsx'))('esbuild');

package/tests/reader-theme-overlap.test.ts

@@ -70,7 +70,7 @@ function pngPixel(buffer: Buffer, x: number, y: number) {
   return [pixel?.[start] ?? 0, pixel?.[start + 1] ?? 0, pixel?.[start + 2] ?? 0];
 }
 
-test('enlarged theme tokens do not let the answer heading share a lane', { skip }, async () => {
+test('enlarged theme tokens do not let the answer heading share a lane', { skip, timeout: 15_000 }, async () => {
   const root = resolve(import.meta.dirname, '..');
   const files = new Map([
     ['/Reader.module.css', readFileSync(join(root, 'src/client/Reader.module.css'))],

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

@@ -48,6 +48,7 @@ test('reader user and steering bubbles match the host column cap', { skip, timeo
         '@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'),
+        '@fixture/user-content': join(harness, 'packages/client/ui-chat/src/client/chat/UserContent.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'),

package/tests/reasoning-block-key.test.ts

@@ -0,0 +1,129 @@
+import assert from 'node:assert/strict';
+import type { ReactElement, ReactNode } from 'react';
+import { test, vi } from 'vitest';
+import { Blocks } from '../src/client/Blocks.js';
+import type { BlockRenderProps } from '../src/client/types.js';
+import {
+  createTextTransformRegistry,
+  installTextTransformRegistry,
+  type DisplayTextRequest,
+} from '../src/client/text-transform.js';
+
+// Inspect the real component paths without a browser or Harness runtime. The
+// fixed useId represents one mounted Blocks instance, not a remount test.
+vi.mock('react', async importOriginal => {
+  const react = await importOriginal<typeof import('react')>();
+  return {
+    ...react,
+    useId: () => ':opaque-mounted-reader:',
+    useEffect: () => {},
+    useMemo: (factory: () => unknown) => factory(),
+    useState: (initial: unknown) => [typeof initial === 'function' ? initial() : initial, () => {}],
+  };
+});
+vi.mock('@deepseek-ai/dsh-client-ui-primitives', () => ({
+  JsonBlock: () => null, MarkdownText: () => null, writeClipboard: vi.fn(),
+}));
+vi.mock('../src/client/streaming.js', () => ({
+  useStreamingText: (text: string) => ({ text, pending: false, reveal: false, revision: 0 }),
+}));
+vi.mock('../src/client/word-motion.js', () => ({
+  MotionMarkdown: () => null, MotionPlainText: () => null,
+}));
+vi.mock('../src/client/McpAppFrame.js', async () => {
+  const { createContext } = await import('react');
+  return { ComposerFillContext: createContext(undefined), McpAppFrame: () => null };
+});
+vi.mock('../src/client/TurnMetrics.js', () => ({ TurnMetrics: () => null }));
+
+type Element = ReactElement<Record<string, unknown>>;
+type ReasoningBlock = { readonly kind: 'reasoning'; readonly text: string };
+
+function reasoningRoots(blocks: readonly ReasoningBlock[], streaming = false): Element[] {
+  const roots: Element[] = [];
+  const renderSlotChain = ((_name: string, _owner: unknown, options: { fallback: ReactNode }) => {
+    let element = options.fallback as Element;
+    // ReadingReasoning -> [TransformedReasoning ->] ReasoningStream -> div.
+    while (typeof element.type === 'function') {
+      element = (element.type as (props: Record<string, unknown>) => Element)(element.props);
+    }
+    assert.equal(element.type, 'div');
+    assert.equal(element.props['data-reader-text-kind'], 'reasoning');
+    roots.push(element);
+    return element;
+  }) as BlockRenderProps['renderSlotChain'];
+  const renderBlocks = (Blocks as unknown as { type: (props: unknown) => ReactNode }).type;
+  renderBlocks({ blocks, streaming, renderSlotChain });
+  return roots;
+}
+
+const marker = (root: Element) => root.props['data-reader-reasoning-block-key'];
+const shownText = (root: Element) => (root.props.children as Element).props.text;
+
+for (const mode of ['no registry', 'body only', 'translated', 'original fallback'] as const) {
+  test(`reasoning roots retain their own opaque keys and source text: ${mode}`, () => {
+    const registry = mode === 'no registry' ? undefined : createTextTransformRegistry();
+    const requests: DisplayTextRequest[] = [];
+    if (mode === 'body only') registry!.register('body', { read: () => 'unused body transform' });
+    if (mode === 'translated' || mode === 'original fallback') {
+      registry!.register('reasoning', {
+        read(request) {
+          requests.push(request);
+          return mode === 'translated' ? 'translated display' : undefined;
+        },
+      });
+    }
+    const restore = installTextTransformRegistry(registry);
+    const blocks = Object.freeze([
+      Object.freeze({ kind: 'reasoning' as const, text: 'identical original' }),
+      Object.freeze({ kind: 'reasoning' as const, text: 'identical original' }),
+    ]);
+    try {
+      const roots = reasoningRoots(blocks);
+      const keys = roots.map(marker);
+      assert.equal(keys.length, 2);
+      assert.ok(keys.every(key => typeof key === 'string' && key.length > 0));
+      assert.equal(new Set(keys).size, 2, 'identical text must not merge block ownership');
+      assert.deepEqual(roots.map(shownText), [
+        mode === 'translated' ? 'translated display' : 'identical original',
+        mode === 'translated' ? 'translated display' : 'identical original',
+      ]);
+      assert.equal(requests.length, mode === 'translated' || mode === 'original fallback' ? 2 : 0);
+      if (requests.length) {
+        assert.deepEqual(requests.map(request => request.blockKey), keys);
+        assert.ok(requests.every(request => request.text === 'identical original'));
+      }
+      assert.deepEqual(blocks.map(block => block.text), ['identical original', 'identical original']);
+      const grown = reasoningRoots(blocks.map(block => ({ ...block, text: `${block.text} grows` })), true);
+      assert.deepEqual(grown.map(marker), keys, 'streaming growth must preserve each mounted block key');
+    } finally {
+      restore();
+    }
+  });
+}
+
+test('marker keeps the existing mounted key across source growth, translated display and original override', () => {
+  const registry = createTextTransformRegistry();
+  const requests: DisplayTextRequest[] = [];
+  let original = false;
+  registry.register('reasoning', {
+    read(request) {
+      requests.push(request);
+      return original ? undefined : { text: `translated: ${request.text}`, final: !request.streaming };
+    },
+  });
+  const restore = installTextTransformRegistry(registry);
+  try {
+    const first = reasoningRoots([{ kind: 'reasoning', text: 'hello' }], true)[0];
+    const grown = reasoningRoots([{ kind: 'reasoning', text: 'hello world' }], true)[0];
+    original = true;
+    const settled = reasoningRoots([{ kind: 'reasoning', text: 'hello world' }])[0];
+    assert.deepEqual([marker(grown), marker(settled)], [marker(first), marker(first)]);
+    assert.deepEqual(requests.map(request => request.blockKey), [marker(first), marker(first), marker(first)]);
+    assert.equal(shownText(first), 'translated: hello');
+    assert.equal(shownText(grown), 'translated: hello world');
+    assert.equal(shownText(settled), 'hello world');
+  } finally {
+    restore();
+  }
+});

package/tests/stock-install.test.ts

@@ -16,19 +16,23 @@ const pkg = JSON.parse(readFileSync(resolve(root, 'package.json'), 'utf8')) as {
   peerDependencies: Record<string, string>;
 };
 
-const HARNESS_PEER = '>=0.2.0-rc.1 <0.2.1';
+const HARNESS_PEER = '>=0.2.1-rc.1 <0.2.2';
 
-test('Harness 0.2.0 peer range accepts the rc.1 and stable releases', () => {
+test('Harness 0.2.1 peer range accepts rc.5 and rejects the 0.2.0 series', () => {
   const peers = Object.entries(pkg.peerDependencies).filter(([name]) => name.startsWith('@deepseek-ai/dsh-'));
   assert.ok(peers.length >= 12);
   for (const [name, range] of peers) {
     assert.equal(range, HARNESS_PEER, name);
-    assert.equal(semver.satisfies('0.2.0-rc.2', range), true, name);
-    assert.equal(semver.satisfies('0.2.0', range), true, name);
-    assert.equal(semver.satisfies('0.2.0-alpha.1', range), false, name);
-    assert.equal(semver.satisfies('0.2.0-alpha', range), false, name);
+    assert.equal(semver.satisfies('0.2.1-rc.5', range), true, name);
+    assert.equal(semver.satisfies('0.2.1-rc.1', range), true, name);
+    assert.equal(semver.satisfies('0.2.1', range), true, name);
+    assert.equal(semver.satisfies('0.2.1-alpha.1', range), false, name);
+    assert.equal(semver.satisfies('0.2.0-rc.2', range), false, name);
+    assert.equal(semver.satisfies('0.2.0', range), false, name);
     assert.equal(semver.satisfies('0.1.7-rc.2', range), false, name);
   }
+  const manifest = JSON.parse(readFileSync(resolve(root, 'package.json'), 'utf8')) as { engines?: { dsh?: string } };
+  assert.equal(manifest.engines?.dsh, HARNESS_PEER);
 });
 
 test('declares dsh.bundle.patch so official add joins the profile layer stack', () => {

package/tsdown.config.ts

@@ -30,11 +30,20 @@ const portableOutput: TsdownPlugin = {
   generateBundle(_options, output) {
     const client = output['client.js'];
     if (client?.type !== 'chunk') this.error('client.js was not emitted');
+    const root = resolve('.').replaceAll('\\', '/').replace(/\/$/u, '');
+    // Rolldown prints `// \0dshx-css-module:<id>`. Older builds used `//#region`.
+    // Rewrite either spelling to a package-relative POSIX path before the
+    // absolute-path guard, so a checkout path cannot survive into lib/client.js.
     client.code = client.code.replace(
-      /^([ \t]*\/\/#region \\0dshx-css-module:).*[\\/]([^/\\\r\n]+\.module\.css\.mjs)(\r?)$/gmu,
-      '$1$2$3',
+      /^([ \t]*\/\/(?:#region )? ?)\\0dshx-css-module:([^\r\n]*?)(\r?)$/gmu,
+      (_match, prefix: string, rawPath: string, ending: string) => {
+        let cssPath = rawPath.replaceAll('\\', '/');
+        const rootPrefix = `${root}/`;
+        if (cssPath.startsWith(rootPrefix)) cssPath = cssPath.slice(rootPrefix.length);
+        return `${prefix}\\0dshx-css-module:${cssPath}${ending}`;
+      },
     );
-    if (/^.*\/\/#region \\0dshx-css-module:.*[\\/].*$/mu.test(client.code)) {
+    if (/^[ \t]*\/\/(?:#region )? ?\\0dshx-css-module:(?:\/|[A-Za-z]:[\\/])/mu.test(client.code)) {
       this.error('client.js contains a non-portable CSS module path');
     }
   },