dsh-better-display 0.3.7 → 0.3.8

package/src/client/open-file.ts

@@ -1,3 +1,5 @@
+import { isAbsoluteWorkspacePath } from '../workspace-path.js';
+
 export type DeliverableOpenMode = 'external' | 'sidebar';
 
 export interface OpenModeSnapshot {
@@ -22,14 +24,6 @@ export function isFolderOpenPath(path: string): boolean {
   return path === '.' || path === '';
 }
 
-function isWindowsStylePath(value: string): boolean {
-  return /^[A-Za-z]:[/\\]/.test(value) || value.startsWith('\\\\');
-}
-
-function isAbsoluteWorkspacePath(path: string): boolean {
-  return path.startsWith('/') || isWindowsStylePath(path);
-}
-
 function encodeSegment(segment: string): string {
   return encodeURIComponent(segment).replace(/%3A/gi, ':');
 }

package/src/client/styles.ts

@@ -0,0 +1,22 @@
+const plugin = 'dsh-better-display';
+const styles = new Map<string, string>();
+
+/** Retain injected CSS across host cleanup and restore it before Reader paints. */
+export function ensureStyles(): void {
+  if (typeof document === 'undefined') return;
+  const live = new Set<string>();
+  for (const tag of document.querySelectorAll<HTMLStyleElement>(`style[data-plugin="${plugin}"][data-plugin-css]`)) {
+    const id = tag.dataset.pluginCss;
+    if (id === undefined) continue;
+    styles.set(id, tag.textContent ?? '');
+    live.add(id);
+  }
+  for (const [id, text] of styles) {
+    if (live.has(id)) continue;
+    const tag = document.createElement('style');
+    tag.dataset.plugin = plugin;
+    tag.dataset.pluginCss = id;
+    tag.textContent = text;
+    document.head.appendChild(tag);
+  }
+}

package/src/client/tool-activity.ts

@@ -53,10 +53,15 @@ export function stringValue(record: Record<string, unknown> | null, ...keys: str
   return undefined;
 }
 
+/** Top-level fields from complete or in-flight JSON tool arguments. */
+type ParsedInputFields =
+  | { kind: 'complete'; fields: Record<string, unknown> }
+  | { kind: 'partial'; fields: Record<string, unknown> };
+
 /** Read only top-level JSON string values, including an unfinished final string.
  * This never executes input or mistakes escaped/nested content for a path field. */
-export function inputFields(raw: string): Record<string, unknown> {
-  try { return objectValue(JSON.parse(raw)) ?? {}; } catch { /* an in-flight argument is normally incomplete */ }
+function parseInputFields(raw: string): ParsedInputFields {
+  try { return { kind: 'complete', fields: objectValue(JSON.parse(raw)) ?? {} }; } catch { /* an in-flight argument is normally incomplete */ }
   const fields: Record<string, unknown> = Object.create(null);
   const prefix = raw.slice(0, 262144);
   let depth = 0;
@@ -88,14 +93,19 @@ export function inputFields(raw: string): Record<string, unknown> {
     if (closed && /^\s*:/.test(prefix.slice(index + 1))) key = value;
     else if (key !== undefined) { fields[key] = value; key = undefined; }
   }
-  return fields;
+  return { kind: 'partial', fields };
+}
+
+export function inputFields(raw: string): Record<string, unknown> {
+  return parseInputFields(raw).fields;
 }
 
+/** Name and raw arguments of any call block, whether it has landed or is pending. */
 export function toolIdentity(entry: Pick<ToolActivityEntry, 'block' | 'draft'>) {
   const block = entry.block;
   return {
     name: block ? 'kind' in block ? block.call?.name ?? entry.draft?.name ?? '工具调用' : block.name : entry.draft?.name ?? '工具调用',
-    raw: block ? 'kind' in block ? block.call?.argsRaw ?? entry.draft?.argsRaw ?? '' : ('argsRaw' in block ? block.argsRaw : '') : entry.draft?.argsRaw ?? '',
+    raw: block ? 'kind' in block ? block.call?.argsRaw ?? entry.draft?.argsRaw ?? '' : ('argsRaw' in block ? block.argsRaw : entry.draft?.argsRaw ?? '') : entry.draft?.argsRaw ?? '',
   };
 }
 
@@ -254,7 +264,7 @@ export function foldDiffHunks(steps: readonly { kind: string; entry?: ToolActivi
 
 export function activityPhase(entry: Pick<ToolActivityEntry, 'block' | 'draft'>, turnClosed = false): ToolPhase {
   if (!entry.block) return turnClosed ? 'interrupted' : 'preparing';
-  if (!('kind' in entry.block)) return turnClosed ? 'interrupted' : 'running';
+  if (!('kind' in entry.block)) return turnClosed ? 'interrupted' : entry.block.phase === 'preparing' ? 'preparing' : 'running';
   // RC1 publishes canonical cancellation as an error result with a typed code.
   if (entry.block.error?.code === 'ABORTED' || entry.block.error?.code === 'interrupted') return 'interrupted';
   const facts = executionFacts(entry.block);
@@ -308,7 +318,8 @@ export function forgetCallClock(callId: string): void {
 
 export function activitySummary(entry: Pick<ToolActivityEntry, 'block' | 'draft'>) {
   const { name, raw } = toolIdentity(entry);
-  const args = inputFields(raw);
+  const parsed = parseInputFields(raw);
+  const args = parsed.fields;
   const target = stringValue(args, 'file_path', 'path', 'filename', 'filePath');
   const command = stringValue(args, 'command', 'cmd', 'script');
   const description = stringValue(args, 'description');
@@ -331,7 +342,7 @@ export function activitySummary(entry: Pick<ToolActivityEntry, 'block' | 'draft'
     : category === 'web' ? name === 'web_search' ? '搜索网页' : '读取网页'
     : category === 'code' ? (description || '运行代码')
     : name;
-  return { name, raw, args, category, title, target: target ?? command ?? stringValue(args, 'query', 'pattern', 'url'), command,
+  return { name, raw, args, argsState: parsed.kind, category, title, target: target ?? command ?? stringValue(args, 'query', 'pattern', 'url'), command,
     cwd: stringValue(args, 'workdir', 'cwd'), content: stringValue(args, 'content', 'new_string', 'newText', 'file_text') };
 }
 

package/src/dsh-better-display.ts

@@ -1,8 +1,8 @@
-import { spawn } from 'node:child_process';
 import type { IncomingMessage, ServerResponse } from 'node:http';
 import type { Context } from '@deepseek-ai/cordis';
 import { scanGenerativeMcpappsStatus } from './skill-roots.js';
 import { skillsFromListResult, toPublicSkillStatus } from './skill-status.js';
+import { createRevealHandler, revealRoots } from './reveal.js';
 
 declare module '@deepseek-ai/cordis' {
   interface Context {
@@ -39,43 +39,7 @@ export function apply(ctx: Context): void {
       const disposeReveal = ctx.webServer!.register({
         kind: 'exact',
         path: '/better-display/reveal',
-        handler: async (req, res) => {
-          if (req.method !== 'POST') {
-            res.statusCode = 405;
-            res.end();
-            return;
-          }
-          let body = '';
-          req.on('data', chunk => { body += chunk; });
-          req.on('end', () => {
-            try {
-              const data = JSON.parse(body);
-              const targetPath = typeof data.path === 'string' ? data.path.trim() : '';
-              if (!targetPath) {
-                res.statusCode = 400;
-                res.end(JSON.stringify({ ok: false, error: 'Empty path' }));
-                return;
-              }
-
-              if (process.platform === 'darwin') {
-                // Exact file reveal in macOS Finder with selection highlight
-                spawn('open', ['-R', targetPath], { detached: true, stdio: 'ignore' });
-              } else if (process.platform === 'win32') {
-                // Exact file selection in Windows Explorer
-                spawn('explorer.exe', [`/select,${targetPath}`], { detached: true, stdio: 'ignore' });
-              } else {
-                spawn('xdg-open', [targetPath], { detached: true, stdio: 'ignore' });
-              }
-
-              res.setHeader('Content-Type', 'application/json');
-              res.statusCode = 200;
-              res.end(JSON.stringify({ ok: true }));
-            } catch (err) {
-              res.statusCode = 400;
-              res.end(JSON.stringify({ ok: false, error: String(err) }));
-            }
-          });
-        },
+        handler: createRevealHandler({ roots: sessionId => revealRoots(ctx, sessionId) }),
       });
       const disposeSkill = ctx.webServer!.register({
         kind: 'exact',

package/src/reveal.ts

@@ -0,0 +1,90 @@
+import { spawn, type SpawnOptions } from 'node:child_process';
+import { existsSync } from 'node:fs';
+import type { IncomingMessage, ServerResponse } from 'node:http';
+import { posix, win32 } from 'node:path';
+import type { Context } from '@deepseek-ai/cordis';
+import { isAbsoluteWorkspacePath } from './workspace-path.js';
+
+export async function revealRoots(ctx: Context, sessionId: string | undefined): Promise<readonly string[]> {
+  if (sessionId !== undefined) {
+    const sessions = ctx.get?.('sessions') as { get: (id: string) => { header: { cwd?: string } } | undefined } | undefined;
+    const cwd = sessions?.get(sessionId)?.header.cwd;
+    if (cwd) return [cwd];
+    const query = ctx.get?.('sessionQuery') as {
+      observeSession: (id: string, options: { projectionMode: 'none' }) => Promise<{ header: { cwd?: string } } & Disposable>;
+    } | undefined;
+    if (query) {
+      using observation = await query.observeSession(sessionId, { projectionMode: 'none' });
+      if (observation.header.cwd) return [observation.header.cwd];
+    }
+  }
+  const registry = ctx.get?.('workspaceRegistry') as {
+    list: () => readonly { path: string; sessionIds: readonly string[] }[];
+  } | undefined;
+  return (registry?.list() ?? [])
+    .filter(workspace => sessionId === undefined || workspace.sessionIds.includes(sessionId))
+    .map(workspace => workspace.path);
+}
+
+export function resolveRevealPath(path: string, roots: readonly string[], exists = existsSync): string {
+  if (isAbsoluteWorkspacePath(path)) return path;
+  // Drive-relative and root-relative Windows paths do not identify a workspace.
+  if (/^[A-Za-z]:|^\\/.test(path)) throw new Error('Path is not workspace-relative');
+  const matches = new Set<string>();
+  for (const root of roots) {
+    if (!isAbsoluteWorkspacePath(root)) continue;
+    const paths = /^[A-Za-z]:[/\\]|^\\\\/.test(root) ? win32 : posix;
+    const candidate = paths.resolve(root, path);
+    if (exists(candidate)) matches.add(candidate);
+  }
+  if (matches.size !== 1) throw new Error(matches.size === 0 ? 'Workspace path not found' : 'Workspace path is ambiguous');
+  return [...matches][0];
+}
+
+export function revealPath(
+  path: string,
+  platform = process.platform,
+  spawnProcess: (command: string, args: string[], options: SpawnOptions) => unknown = spawn,
+): void {
+  const options = { detached: true, stdio: 'ignore' } satisfies SpawnOptions;
+  if (platform === 'darwin') {
+    spawnProcess('open', ['-R', path], options);
+  } else if (platform === 'win32') {
+    spawnProcess('explorer.exe', [`/select,"${path}"`], { ...options, windowsVerbatimArguments: true });
+  } else {
+    spawnProcess('xdg-open', [path], options);
+  }
+}
+
+export function createRevealHandler({ roots, reveal = revealPath }: {
+  roots: (sessionId: string | undefined) => Promise<readonly string[]>;
+  reveal?: (path: string) => void;
+}): (req: IncomingMessage, res: ServerResponse) => void {
+  return (req, res) => {
+    if (req.method !== 'POST') {
+      res.statusCode = 405;
+      res.end();
+      return;
+    }
+    let body = '';
+    req.on('data', chunk => { body += chunk; });
+    req.on('end', async () => {
+      res.setHeader('Content-Type', 'application/json');
+      try {
+        const data: unknown = JSON.parse(body);
+        const path = typeof data === 'object' && data !== null && 'path' in data && typeof data.path === 'string'
+          ? data.path.trim() : '';
+        if (!path) throw new Error('Empty path');
+        const sessionId = typeof data === 'object' && data !== null && 'sessionId' in data && typeof data.sessionId === 'string'
+          ? data.sessionId : undefined;
+        const targetPath = resolveRevealPath(path, isAbsoluteWorkspacePath(path) ? [] : await roots(sessionId));
+        reveal(targetPath);
+        res.statusCode = 200;
+        res.end(JSON.stringify({ ok: true }));
+      } catch (err) {
+        res.statusCode = 400;
+        res.end(JSON.stringify({ ok: false, error: String(err) }));
+      }
+    });
+  };
+}

package/src/workspace-path.ts

@@ -0,0 +1,4 @@
+/** Absolute paths accepted by both POSIX and Windows hosts. */
+export function isAbsoluteWorkspacePath(path: string): boolean {
+  return /^(?:\/|[A-Za-z]:[/\\]|\\\\)/.test(path);
+}

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

@@ -0,0 +1,170 @@
+import { Context } from '@deepseek-ai/cordis';
+import * as React from 'react';
+import * as Primitives from '@deepseek-ai/dsh-client-ui-primitives';
+import { createRoot } from 'react-dom/client';
+import { flushSync } from 'react-dom';
+import { SlotRegistry } from '@fixture/registry';
+import { createSlotRenderer } from '@fixture/renderer';
+import { Reader } from '../../src/client/Reader.js';
+import { createReaderStore } from '../../src/client/store.js';
+import { installOfficialSlots, officialChildren, OFFICIAL_SEATS } from '../../src/client/official-slots.js';
+import type { ReaderProps } from '../../src/client/types.js';
+
+// Real Reader, registry, scope binding and slot renderer. Only session data is synthetic.
+function equal(actual: unknown, expected: unknown) {
+  if (!Object.is(actual, expected)) throw new Error(`Expected ${String(expected)}, got ${String(actual)}`);
+}
+const assert = {
+  equal,
+  ok(value: unknown) { equal(Boolean(value), true); },
+  deepEqual(actual: unknown, expected: unknown) { equal(JSON.stringify(actual), JSON.stringify(expected)); },
+};
+async function verify() {
+  const root = new Context();
+  await root.plugin(SlotRegistry);
+  let run = async () => {};
+  await root.plugin({ name: 'reader-user-test', 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-users', ctx: new Context(), hooks: {}, keyedHooks: {}, props: { sessionId: 'session-users' } };
+    slots.installScope('session', {
+      current: source(binding), bindingSource: () => source(binding), renderArea: (_: unknown, props: any) => props.children,
+    });
+    slots.installLocale({ ...source({}), bind: () => (key: string) => key });
+    const turn = { turn: 1, status: 'closed', start: { seq: 1, time: 1 },
+      end: { time: 2, data: { reason: { kind: 'completed' } } }, data: new Map(), steps: [] };
+    const nodes = new Map(['user', 'steering', 'hidden'].map((kind, index) => {
+      const key = `${kind}-key`;
+      return [key, { key, kind: kind === 'hidden' ? 'user' : kind, anchorSeq: index + 1,
+        visibility: kind === 'hidden' ? 'hidden' : 'visible', location: { kind: 'turn', turn },
+        data: { seq: index + 1, time: 1, content: [{ type: 'text', text: `${kind} content` }] } }];
+    }));
+    const chat = { order: [...nodes.keys()], nodes, timeline: { turns: new Map([[1, turn]]) } };
+    const session = { running: false, openState: 'ready', pendingSubmissions: [], hasMore: false, loadingOlder: false };
+    const store = createReaderStore().create('session-users');
+    const props = {
+      sessionId: 'session-users', useChat: (select: any) => select(chat),
+      useSession: (select: any) => select(session), useSessions: (select: any) => select({ byId: { 'session-users': { cwd: '/fixture' } } }),
+      useSessionStatus: (select: any) => select(new Map()), useStore: (select: any) => 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: () => {},
+    };
+    slots.register({ name: 'root', children: {
+      'conversation.chat.node': { kind: 'keyed', scope: 'session', inject: { hooks: {
+        turnData: (_: unknown, context: any) => () => context.turnData,
+        disclosure: (_: unknown, context: any) => () => context.disclosureReset,
+      } } },
+      'fixture.reader': { kind: 'single', scope: 'session' },
+    } }, ({ SessionProvider, renderSlot }: any) => <SessionProvider>{renderSlot('fixture.reader', {})}</SessionProvider>);
+    slots.register({ name: 'fixture.reader', children: { ...officialChildren(slots), 'dsh-better-display.block': { kind: 'chain', scope: 'session' } } }, ({ renderSlot, renderSlotChain }: any) =>
+      <Reader {...{ ...props, renderSlot, renderSlotChain } as ReaderProps} />);
+    const stopMirror = installOfficialSlots(ctx);
+    run = async () => {
+      const container = document.getElementById('app')!;
+      const reactRoot = createRoot(container);
+      const render = () => {
+        flushSync(() => reactRoot.render(slots.renderSlot('root', {})));
+        return container.innerHTML;
+      };
+      const count = (html: string, text: string) => html.split(text).length - 1;
+      const assertSeats = (html: string) => {
+        for (const kind of ['user', 'steering']) {
+          assert.equal(count(html, `data-reader-key="${kind}-key"`), 1);
+          assert.equal(count(html, `data-chat-anchor-key="${kind}-key"`), 1);
+          assert.equal(count(html, `data-chat-flow-key="${kind}-key"`), 1);
+          assert.equal(count(html, `data-chat-node-key="${kind}-key"`), 1);
+          assert.equal(count(html, `data-chat-flow-kind="${kind}"`), 1);
+        }
+        assert.equal(count(html, 'data-reader-anchor="true"'), 2);
+        assert.ok(!html.includes('hidden content'));
+      };
+
+      // The real renderSlot returns an outlet element for an unoccupied key.
+      let html = render();
+      assertSeats(html);
+      assert.equal(count(html, 'user content'), 1);
+      assert.equal(count(html, 'steering content'), 1);
+      assert.ok(html.includes('补充消息'));
+      const seen: any[] = [];
+      const official = ({ node, sessionId, injectedSession, useTurnData, useDisclosure }: any) => {
+        assert.equal(sessionId, 'session-users');
+        assert.equal(injectedSession, 'session-users');
+        assert.equal(useTurnData(), turn.data);
+        assert.equal(useDisclosure().getSnapshot(), 0);
+        assert.equal(node, nodes.get(node.key));
+        seen.push(node.kind);
+        return <div data-official-user={node.kind}>{node.data.content[0].text}<button>Official recall</button></div>;
+      };
+      const removeUser = slots.register({ name: 'conversation.chat.node', key: 'user',
+        inject: (sessionId: string) => ({ injectedSession: sessionId }), locale: 'chat' }, official);
+      const removeSteering = slots.register({ name: 'conversation.chat.node', key: 'steering',
+        inject: (sessionId: string) => ({ injectedSession: sessionId }), locale: 'chat' }, official);
+      const removeAssistant = slots.register({ name: 'conversation.chat.node', key: 'assistant-step' }, () => <span>Duplicate assistant</span>);
+      await new Promise(resolve => queueMicrotask(resolve));
+      assert.deepEqual(slots.entriesOfSlot(OFFICIAL_SEATS.nodes).map((entry: any) => entry.options.key).sort(), ['steering', 'user']);
+      html = render();
+      assertSeats(html);
+      assert.equal(count(html, 'Official recall'), 2);
+      assert.equal(count(html, 'user content'), 1);
+      assert.equal(count(html, 'steering content'), 1);
+      assert.deepEqual(seen, ['user', 'steering']);
+
+      // A winner intentionally returning null must keep its row hidden.
+      const removeWinner = slots.register({ name: 'conversation.chat.node', key: 'user', priority: -1 }, () => null);
+      await new Promise(resolve => queueMicrotask(resolve));
+      html = render();
+      assertSeats(html);
+      assert.equal(count(html, 'user content'), 0);
+      assert.equal(count(html, 'Official recall'), 1);
+      removeWinner();
+      await new Promise(resolve => queueMicrotask(resolve));
+      assert.equal(count(render(), 'Official recall'), 2);
+      removeUser(); removeSteering(); removeAssistant();
+      await new Promise(resolve => queueMicrotask(resolve));
+      html = render();
+      assertSeats(html);
+      assert.equal(count(html, 'user content'), 1);
+      assert.equal(count(html, 'steering content'), 1);
+      assert.equal(count(html, 'Official recall'), 0);
+      const module = Reflect.get(window, 'easyrewriteModule');
+      if (module) {
+        const plugin = module.factory((name: string) => {
+          if (name === 'react') return React;
+          if (name === '@deepseek-ai/dsh-client-ui-primitives') return Primitives;
+          throw new Error(`Unexpected easyrewrite dependency: ${name}`);
+        });
+        const disposers: Array<() => void> = [];
+        plugin.apply({
+          effect: (effect: () => () => void) => disposers.push(effect()),
+          slots: {
+            inject: (key: string, effect: () => () => void) => key === 'conversation.chat.node' ? effect() : () => {},
+            register: (options: object, component: unknown) => slots.register(options, component),
+          },
+          sessions: { list: source({ current: 'session-users' }), scope: () => ({ get: () => undefined }) },
+          workspaces: {},
+        });
+        await new Promise(resolve => queueMicrotask(resolve));
+        html = render();
+        assertSeats(html);
+        assert.equal(count(html, 'data-dsh-easyrewrite="user"'), 1);
+        assert.equal(count(html, 'data-dsh-easyrewrite="recall-key"'), 1);
+        assert.equal(count(html, 'user content'), 1);
+        assert.equal(count(html, 'steering content'), 1);
+        const recall = container.querySelector<HTMLButtonElement>('[data-dsh-easyrewrite="recall-key"]');
+        assert.ok(recall);
+        flushSync(() => recall!.click());
+        assert.equal(container.querySelectorAll('[data-dsh-easyrewrite="confirm-capsule"]').length, 1);
+        for (const dispose of disposers) dispose();
+      }
+      stopMirror();
+      reactRoot.unmount();
+      Object.assign(window, { readerUserResult: 'passed' });
+    };
+  } });
+  await run();
+}
+verify().catch(error => { console.error(error); Object.assign(window, { readerUserResult: `${error.stack}\n${document.getElementById('app')?.innerHTML}` }); });

package/tests/footer-precedence.test.ts

@@ -21,6 +21,7 @@ const HOST_FOOTER_Z = 7;
 
 /** Lanes a scroll can clamp into the footer band. */
 const CLAMPED_LANES = [
+  '.turnStickyLanes',
   '.turnProcessSticky',
   '.liveFoldContainer',
   '.flowCell[data-flow-summary]',
@@ -85,6 +86,13 @@ test('the top toolbar lane stays at 7 and pins to the scrollport top', () => {
   assert.equal(declarations.get('top'), '0');
 });
 
+test('official code block banners stay beneath Reader sticky lanes', () => {
+  const blockZ = Number(mergedDeclarations(css, '.root :global(.md-code-block)').get('z-index'));
+  const summaryZ = Number(mergedDeclarations(css, '.flowCell[data-flow-summary]').get('z-index'));
+  assert.ok(Number.isFinite(blockZ), 'Reader scopes official markdown code blocks into a stacking context');
+  assert.ok(blockZ < summaryZ, `code block banner context (${blockZ}) must stay below the summary lane (${summaryZ})`);
+});
+
 test('the live status lane pins below the toolbar lane instead of over it', () => {
   const declarations = mergedDeclarations(css, '.turnProcessSticky');
   assert.match(

package/tests/reader-glass-css.test.ts

@@ -0,0 +1,28 @@
+import assert from 'node:assert/strict';
+import { resolve } from 'node:path';
+import { test } from 'node:test';
+import { externalClientBundle } from '../tools/client-build.js';
+
+// Exercise the actual build plugin so options cannot drift from production.
+async function readerCss(): Promise<string> {
+  const configs = externalClientBundle('dsh-better-display', [], { clientEntry: 'src/client/index.tsx' });
+  const client = configs.find(config => config.name === 'dsh-better-display/client');
+  const plugin = client?.plugins.find(plugin => plugin.name === 'dshx-css-modules-inline');
+  assert.ok(plugin);
+  const source = await plugin.load.call({}, `\0dshx-css-module:${resolve('src/client/Reader.module.css')}.mjs`);
+  const literal = /^const css = (.+);$/m.exec(source)?.[1];
+  assert.ok(literal, 'the build emits an inline CSS string');
+  const css: unknown = JSON.parse(literal);
+  assert.equal(typeof css, 'string');
+  if (typeof css !== 'string') throw new Error('Expected CSS text');
+  return css;
+}
+
+test('built Reader CSS retains Chromium blur and the older Safari fallback', async () => {
+  const css = await readerCss();
+  assert.match(css, /(?<![\w-])backdrop-filter:blur\(12px\)/);
+  assert.match(css, /-webkit-backdrop-filter:blur\(12px\)/);
+  const prefixed = [...css.matchAll(/-webkit-backdrop-filter:([^;}]+)/g)].map(match => match[1]);
+  const standard = [...css.matchAll(/(?<![\w-])backdrop-filter:([^;}]+)/g)].map(match => match[1]);
+  assert.deepEqual(standard, prefixed, 'every Safari fallback also has a working standard declaration');
+});

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

@@ -0,0 +1,81 @@
+import assert from 'node:assert/strict';
+import { existsSync, mkdtempSync, readFileSync, rmSync } 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 test from 'node:test';
+
+// Needs the Harness source tree and a local pinned Chromium; CI (which builds the
+// release) has neither browser runtime, so the test skips there instead of failing.
+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;
+
+test('headless Reader users retain official renderers, anchors and empty-key fallback', { skip }, 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-official-users-'));
+  try {
+    const { launchPinnedChromium } = await import(pathToFileURL(browserRuntime).href);
+    await build({
+      entryPoints: [join(root, 'tests/fixtures/reader-official-users.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'),
+        '@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'),
+        // The published store lib leaves zustand/immer to the host; the source
+        // package resolves them from the Harness workspace.
+        '@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: { '.css': 'empty', '.woff2': 'empty', '.woff': 'empty', '.ttf': 'empty', '.svg': 'empty' },
+      logLevel: 'silent',
+    });
+    const server = createServer((request, response) => {
+      if (request.url === '/easyrewrite.js' && process.env.DSH_EASYREWRITE_CLIENT) {
+        response.setHeader('Content-Type', 'text/javascript');
+        response.end(readFileSync(process.env.DSH_EASYREWRITE_CLIENT));
+      } else if (request.url === '/fixture.js') {
+        response.setHeader('Content-Type', 'text/javascript');
+        response.end(readFileSync(join(out, 'fixture.js')));
+      } else {
+        response.setHeader('Content-Type', 'text/html');
+        const easyrewrite = process.env.DSH_EASYREWRITE_CLIENT
+          ? '<script>window.__ModuleLoader__={load:m=>window.easyrewriteModule=m}</script><script src="/easyrewrite.js"></script>' : '';
+        response.end(`<!doctype html><div id="app"></div>${easyrewrite}<script type="module" src="/fixture.js"></script>`);
+      }
+    });
+    await new Promise<void>(resolve => server.listen(0, '127.0.0.1', resolve));
+    let browser;
+    try {
+      browser = await launchPinnedChromium();
+      const page = await browser.newPage();
+      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(() => 'readerUserResult' in window, undefined, { timeout: 10000 });
+      assert.equal(await page.evaluate(() => Reflect.get(window, 'readerUserResult')), 'passed');
+      assert.deepEqual(errors, []);
+    } finally {
+      await browser?.close();
+      await new Promise<void>(resolve => server.close(() => resolve()));
+    }
+  } finally {
+    rmSync(out, { recursive: true, force: true });
+  }
+});