dsh-better-display 0.2.1 → 0.3.0

package/tests/browser-auto-fold.tsx

@@ -0,0 +1,64 @@
+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 and real root/session stores; only conversation data is synthetic.
+const store = createReaderStore();
+const prefs = store.create();
+const session = store.create('auto-fold-fixture');
+const nodes = new Map();
+const turns = new Map();
+for (const [number, closed] of [[1, true], [2, false]] as const) {
+  const turn = {
+    turn: number, status: closed ? 'closed' : 'open',
+    start: { seq: number * 10, time: 1 },
+    end: closed ? { time: 1001, data: { reason: { kind: 'completed' } } } : undefined,
+    data: new Map(closed ? [['turn-tail', { closing: { step: 1 } }]] : []),
+    steps: [] as any[],
+  };
+  for (let step = 0; step < 2; step++) {
+    const key = `turn-${number}-step-${step}`;
+    const data = { turn: number, step, status: closed || step === 0 ? 'settled' : 'running', time: 1,
+      blocks: [
+        { kind: 'reasoning', text: closed ? `已完成思考 ${step}` : `进行中思考 ${step}` },
+        { kind: 'text', text: closed && step === 1 ? '最终回答始终保留' : `过程说明 ${number}-${step}` },
+      ],
+    };
+    const location = { step, start: { seq: number * 10 + step }, data: new Map([['assistant-step', data]]) };
+    turn.steps.push(location);
+    nodes.set(key, { key, kind: 'assistant-step', visibility: 'visible', anchorSeq: number * 10 + step,
+      location: { kind: 'step', turn, step: location }, data });
+  }
+  turns.set(number, turn);
+}
+const chat = { order: [...nodes.keys()], nodes, timeline: { turns } } as unknown as ChatSnapshot;
+const sessionSnapshot = { running: true, openState: 'ready', pendingSubmissions: [], hasMore: false, loadingOlder: false };
+const sessionsSnapshot = { byId: { 'auto-fold-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: 'auto-fold-fixture', useChat: selector => selector(chat),
+  useSession: selector => selector(sessionSnapshot), useSessions: selector => selector(sessionsSnapshot),
+  useSessionPendingInteraction: selector => selector(pending),
+  useStore: useReaderStore, actions: session.actions, openPrefs: prefs,
+  t: key => key, renderSlot: (_name, _owner, options) => options?.fallback ?? null,
+  renderSlotChain: (_name, _owner, options) => 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 ReaderProps;
+
+Object.assign(window, { autoFoldFixture: {
+  // Exercise Settings' root preference path without recreating the Reader.
+  preference: (value: boolean) => prefs.actions.setAutoFold(value),
+  state: () => session.getSnapshot(),
+} });
+createRoot(document.getElementById('app')!).render(
+  <div data-conversation-scroll style={{ height: '100vh', overflow: 'auto' }}><Reader {...props} /></div>,
+);

package/tests/browser-official-bridge.tsx

@@ -0,0 +1,144 @@
+/** Test-only imports resolve to the selected Harness; none enter client.js. */
+import { Context } from '@deepseek-ai/cordis';
+import { createRoot } from 'react-dom/client';
+import { memo, useState } from 'react';
+import { SlotRegistry } from '@fixture/registry';
+import { createSlotRenderer } from '@fixture/renderer';
+import { apply as applyFeedback } from '@fixture/feedback';
+import { ReadRow } from '@fixture/read-row';
+import { readImageToolview } from '@fixture/read-image-row';
+import { en as conversationEn } from '@fixture/tool-locale';
+import { officialChildren, installOfficialSlots, OFFICIAL_SEATS } from '../src/client/official-slots.js';
+import { OfficialActions, OfficialTool } from '../src/client/OfficialContent.js';
+import { Deliverables } from '@fixture/deliverables';
+import { zh as deliverablesZh, en as deliverablesEn } from '@fixture/deliverables-locale';
+import { CopyAnswer } from '../src/client/Blocks.js';
+import { MotionMarkdown } from '../src/client/word-motion.js';
+import css from '../src/client/Reader.module.css';
+
+const rootContext = new Context();
+await rootContext.plugin(SlotRegistry);
+await rootContext.plugin({ name: 'bridge-fixture', inject: ['slots'], async apply(ctx: Context) {
+const slots = ctx.slots as any;
+slots.install(createSlotRenderer());
+const observations: any = { opens: [], requests: [], mounts: 0, subscriptions: 0 };
+const source = <T,>(initial: T) => {
+  let value = initial;
+  const listeners = new Set<() => void>();
+  return { getSnapshot: () => value, subscribe: (fn: () => void) => {
+    listeners.add(fn); observations.subscriptions++;
+    return () => { if (listeners.delete(fn)) observations.subscriptions--; };
+  }, set(next: T) { value = next; for (const fn of [...listeners]) fn(); } };
+};
+const localeSource = source({ revision: 0 });
+let language = 'zh';
+const dictionaries: Record<string, any> = { deliverables: { zh: deliverablesZh, en: deliverablesEn }, conversation: { zh: conversationEn, en: conversationEn } };
+const locale = {
+  ...localeSource,
+  register(ns: string, dictionary: any) { dictionaries[ns] = dictionary; return () => { delete dictionaries[ns]; }; },
+  bind(ns: string) { return (key: string, values?: Record<string, any>) => {
+    let text = dictionaries[ns]?.[language]?.[key] ?? dictionaries[ns]?.en?.[key] ?? key;
+    for (const [name, value] of Object.entries(values ?? {})) text = text.replaceAll(`{${name}}`, String(value));
+    return text;
+  }; },
+};
+ctx.provide('locale', locale);
+slots.installLocale(locale);
+const messageItems = new Map();
+ctx.provide('remote', {
+  messageFeedback: {
+    async list(request: any) { observations.requests.push(['list', request]); return { ok: true, value: { ok: true, value: { items: [...messageItems.values()] } } }; },
+    async put(request: any) {
+      observations.requests.push(['put', request]);
+      const item = { messageId: request.messageId, rating: request.rating, version: (messageItems.get(request.messageId)?.version ?? 0) + 1, ...request.entry };
+      messageItems.set(request.messageId, item);
+      return { ok: true, value: { ok: true, value: item } };
+    },
+    async delete(request: any) { observations.requests.push(['delete', request]); messageItems.delete(request.messageId); return { ok: true, value: { ok: true, value: { item: null } } }; },
+  },
+  sessionFeedback: { record: async () => { throw new Error('Unexpected session feedback'); } },
+});
+const binding = { key: 'session-a', ctx: new Context(), hooks: {}, keyedHooks: {}, props: { sessionId: 'session-a' } };
+const current = source(binding);
+slots.installScope('session', { current, resolve: (id: string) => id === binding.key ? binding : undefined, renderArea: (_b: any, props: any) => props.children });
+const toolBlock = {
+  kind: 'tool-result', callId: 'read-1', call: { name: 'read', args: { file_path: '/fixture/sample.ts', offset: 12 }, argsRaw: '{"file_path":"/fixture/sample.ts","offset":12}' },
+  content: [{ type: 'text', text: '<path>/fixture/sample.ts</path>\n<type>file</type>\n<content>\n12: export const value = 1;\n</content>' }], isError: false, subCalls: [], time: 100, callTime: 10,
+  meta: { path: '/fixture/sample.ts', offset: 12, totalLines: 20, lines: [{ number: 12, text: 'export const value = 1;' }], lang: 'typescript' },
+};
+const host = source({ home: '/fixture' });
+const loadImage = Object.assign(async () => '/pixel.png', { peek: () => '/pixel.png' });
+const blockProps = { loadImage: async () => ({ data: new Uint8Array(), mediaType: 'image/png' }), fillComposer: () => true, cwd: '/fixture', openFile: (path: string, options?: any) => observations.opens.push({ path, options }) };
+let stopReader = () => {};
+let stopMirror = () => {};
+slots.register({ name: 'root', children: {
+  'conversation.chat.assistant-actions': { kind: 'list', scope: 'session' },
+  'tool.call.toolview': { kind: 'keyed', scope: 'session' },
+  'conversation.chat.turnTail': { kind: 'chain', 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.input.overlay': { kind: 'list', scope: 'session' },
+  'fixture.reader': { kind: 'single', scope: 'session' },
+} }, ({ SessionProvider, renderSlot }: any) => <SessionProvider>
+  {renderSlot('fixture.reader', {}, { fallback: <div data-unmounted>Reader unloaded</div> })}
+  {renderSlot('conversation.input.overlay', {})}
+</SessionProvider>);
+await ctx.plugin({ name: 'fixture-official-feedback', inject: ['slots', 'remote', 'locale'], apply: applyFeedback });
+slots.register({ name: 'tool.call.toolview', key: 'read', locale: 'conversation' }, ReadRow);
+readImageToolview.apply(ctx);
+slots.provideRoot({ hooks: { sessions: source({ byId: { 'session-a': { cwd: '/fixture' } } }) } });
+const artifact = { path: '/fixture/report.pdf', description: '演示报告', seq: 42, index: 0 };
+const presentedOpen = source({});
+const presentedHost = source({ available: true, fileManager: 'finder' });
+slots.register({ name: 'conversation.chat.turnTail', locale: 'deliverables',
+  select: () => ({ produced: ['/fixture/sample.ts'], presented: [artifact] }),
+  inject: () => ({ hooks: { presentedOpen, presentedHost }, reloadPresentedHost: async () => {},
+    openPresented: async (...args: any[]) => { observations.opens.push(['presented', ...args]); },
+  }),
+}, Deliverables);
+let liveDetail = source('initial');
+const storeHandle = { create: () => {
+  observations.mounts++;
+  const value = source(0);
+  return { ...value, actions: { increment: () => value.set(value.getSnapshot() + 1) }, clearPersisted() {} };
+} };
+slots.register({ name: 'conversation.chat.node', key: 'future-widget', store: storeHandle,
+  children: { 'future.detail': { kind: 'single', scope: 'session' } },
+  inject: (sessionId: string, actions: any) => ({ hooks: { detail: liveDetail }, injectedSession: sessionId, increment: actions.increment }),
+}, memo(function FutureWidget({ useStore, useDetail, useTurnData, injectedSession, increment, renderSlot }: any) {
+  const value = useStore((n: number) => n);
+  const detail = useDetail((s: string) => s);
+  const context = useTurnData();
+  return <div data-memo-widget><button onClick={increment}>Count {value}</button><span>{injectedSession} / {detail} / {context}</span>{renderSlot('future.detail', {})}</div>;
+}));
+slots.register({ name: 'future.detail' }, memo(() => <span data-nested>nested official child</span>));
+
+function ReaderFixture({ renderSlot, renderSlotChain }: any) {
+  const official = { renderSlot, renderSlotChain, officialHost: host, officialImageLoader: loadImage, officialFileMentions: () => undefined, officialPreviewFile: blockProps.openFile, openView: (...args: any[]) => observations.opens.push(args) };
+  const [text, setText] = useState('本地图片：\n\n![本地样例](/fixture/image.png)\n\n普通正文 **加粗** 与 `sample.ts`。');
+  return <main className={css.root} data-dsh-better-display="official-fixture"><div className={css.column} data-chat-flow="">
+    <article className={css.answer} data-reader-answer>
+      <MotionMarkdown text={text} streaming={false} enabled={false} revision={0} />
+      <CopyAnswer blocks={[{ kind: 'text', text }]} extraActions={<OfficialActions official={official} messageId={'message-1' as any} />} />
+    </article>
+    <div data-reader-tool><OfficialTool {...blockProps} official={official} renderSlotChain={renderSlotChain} block={toolBlock as any} toolName="read" fallback={<span>fallback</span>} /></div>
+    {renderSlotChain(OFFICIAL_SEATS.tail, { openFile: blockProps.openFile, readerProducedPaths: ['/fixture/sample.ts'] })}
+    {renderSlot(OFFICIAL_SEATS.nodes, {}, { entryKey: 'future-widget', hookContext: 'turn-context' })}
+    <button onClick={() => setText(text + '\n\n继续输出。')}>Append text</button>
+  </div></main>;
+}
+function mountReader() {
+  stopReader = slots.register({ name: 'fixture.reader', children: officialChildren(slots) }, ReaderFixture);
+  stopMirror = installOfficialSlots(ctx);
+}
+mountReader();
+const root = createRoot(document.getElementById('app')!);
+root.render(slots.renderSlot('root', {}));
+(window as any).fixture = {
+  observations, update: () => liveDetail.set('updated'),
+  language: () => { language = 'en'; localeSource.set({ revision: 1 }); },
+  addAction: () => slots.register({ name: 'conversation.chat.assistant-actions', id: 'future-action', order: 20 }, memo(() => <button>Future official action</button>)),
+  unmount: () => { stopMirror(); stopReader(); }, mount: mountReader,
+};
+
+} });

package/tests/official-slots.test.ts

@@ -0,0 +1,112 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+import { memo } from 'react';
+import { SlotCore } from '@deepseek-ai/dsh-client-ui-slots';
+import { mirrorOfficialSlot, readerTailMatch, type CompositionRegistry } from '../src/client/official-slots.js';
+
+function registry(kind: 'keyed' | 'chain' | 'list' = 'keyed') {
+  const core = new SlotCore();
+  const register = (options: object, component: unknown) => (core.register as Function)(options, component) as () => void;
+  register({ name: 'root', children: {
+    source: { kind, scope: 'session' },
+    reader: { kind, scope: 'session' },
+  } }, () => null);
+  const slots: CompositionRegistry = {
+    register,
+    spec: key => core.spec(key as never),
+    entriesOfSlot: key => core.entriesOfSlot(key),
+    subscribe: (key, fn) => core.subscribe(key, fn),
+    inject: () => { throw new Error('not used by the subtree test'); },
+  };
+  return { core, slots, register };
+}
+const changed = () => new Promise(resolve => queueMicrotask(resolve));
+
+test('official present cards retain their data while the existing Reader produced row stays unique', () => {
+  const original = Object.freeze({ produced: Object.freeze(['/work/code.ts']), presented: Object.freeze([{ path: '/work/report.pdf', seq: 42 }]), future: 'retained' });
+  assert.deepEqual(readerTailMatch(original, ['/work/code.ts']), { produced: [], presented: original.presented, future: 'retained' });
+  assert.equal(readerTailMatch(original), original);
+  assert.deepEqual(readerTailMatch({ produced: ['/work/code.ts', '/work/new.ts'], presented: [] }, ['/work/code.ts']), { produced: ['/work/new.ts'], presented: [] });
+  assert.deepEqual(original.produced, ['/work/code.ts']);
+  const future = { artifacts: ['/work/report.pdf'] };
+  assert.equal(readerTailMatch(future), future);
+});
+
+test('official memo components retain injection, store, locale and selector metadata', () => {
+  const { core, slots, register } = registry('chain');
+  const component = memo(() => null);
+  const inject = () => ({ hooks: { status: { getSnapshot: () => 1, subscribe: () => () => {} } } });
+  const select = (owner: unknown) => owner;
+  const store = { create: () => ({}) };
+  register({ name: 'source', select, inject, store, locale: 'feedback', priority: -7 }, component);
+  const before = core.entriesOfSlot('source')[0];
+  const stop = mirrorOfficialSlot(slots, 'source', 'reader', 'reader.children');
+  const mirrored = core.entriesOfSlot('reader')[0];
+  assert.equal(mirrored.component, component);
+  assert.equal(mirrored.inject, inject);
+  assert.equal(mirrored.select, select);
+  assert.equal(mirrored.store, store);
+  assert.equal(mirrored.locale, 'feedback');
+  assert.equal(mirrored.options.priority, -7);
+  assert.equal(core.entriesOfSlot('source')[0], before);
+  stop();
+  assert.equal(core.entriesOfSlot('reader').length, 0);
+  assert.equal(core.entriesOfSlot('source')[0], before);
+});
+
+test('nested declarations use distinct seats and are disposed without touching the source', () => {
+  const { core, slots, register } = registry();
+  const hookContext = { hooks: { turnData: () => () => 'live' } };
+  register({ name: 'source', key: 'read-image', children: { images: { kind: 'single', scope: 'session', inject: hookContext } } }, () => null);
+  const child = memo(() => null);
+  register({ name: 'images', locale: 'images' }, child);
+  const before = core.snapshot('source');
+  const stop = mirrorOfficialSlot(slots, 'source', 'reader', 'reader.children');
+  assert.equal(core.entriesOfSlot('reader.children/images')[0].component, child);
+  assert.equal(slots.spec('reader.children/images')?.inject, hookContext);
+  assert.deepEqual(core.snapshot('source'), before);
+  stop();
+  assert.equal(slots.spec('reader.children/images'), undefined);
+  assert.equal(core.entriesOfSlot('images')[0].component, child);
+});
+
+test('new registrations do not remount existing cards; winner changes and unload reconcile', async () => {
+  const { core, slots, register } = registry();
+  const first = memo(() => null);
+  const second = memo(() => null);
+  const fallback = memo(() => null);
+  register({ name: 'source', key: 'read' }, first);
+  const stop = mirrorOfficialSlot(slots, 'source', 'reader', 'reader.children');
+  const originalSeat = core.entriesOfSlot('reader')[0];
+  const removeNew = register({ name: 'source', key: 'new-official-tool' }, second);
+  await changed();
+  assert.equal(core.entriesOfSlot('reader').find(e => e.options.key === 'read'), originalSeat);
+  assert.equal(core.entriesOfSlot('reader').length, 2);
+  const restore = register({ name: 'source', key: 'read', priority: -1 }, fallback);
+  await changed();
+  assert.equal(core.entriesOfSlot('reader').find(e => e.options.key === 'read')?.component, fallback);
+  restore();
+  removeNew();
+  await changed();
+  assert.equal(core.entriesOfSlot('reader').length, 1);
+  assert.equal(core.entriesOfSlot('reader')[0].component, first);
+  stop();
+  register({ name: 'source', key: 'after-reader-unload' }, second);
+  await changed();
+  assert.equal(core.entriesOfSlot('reader').length, 0);
+});
+
+test('partial setup rolls back its own registrations on a nested contract failure', () => {
+  const { core, slots, register } = registry();
+  register({ name: 'source', key: 'nested', children: { detail: { kind: 'single', scope: 'session' } } }, () => null);
+  register({ name: 'detail' }, () => null);
+  const failing = { ...slots, register(options: Parameters<CompositionRegistry['register']>[0], component: unknown) {
+    if (options.name === 'reader.children/detail') throw new Error('fixture failure');
+    return slots.register(options, component);
+  } };
+  assert.throws(() => mirrorOfficialSlot(failing, 'source', 'reader', 'reader.children'), /fixture failure/);
+  assert.equal(core.entriesOfSlot('reader').length, 0);
+  assert.equal(slots.spec('reader.children/detail'), undefined);
+  assert.equal(core.entriesOfSlot('source').length, 1);
+  assert.equal(core.entriesOfSlot('detail').length, 1);
+});

package/tests/platform-media.test.ts

@@ -0,0 +1,17 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import { localPathMediaUrl } from '../src/client/platform-media.js';
+
+test('absolute local image paths use the authenticated Host file API without losing authored bytes', () => {
+  for (const path of ['/tmp/a.png', '/tmp/中文 图 #1.png', '/tmp/a%20b.png', '/tmp/a?x=1&y=2.png']) {
+    const url = localPathMediaUrl('http:', 'http://127.0.0.1:43127', path)!;
+    assert.equal(new URL(url).pathname, '/api/file');
+    assert.equal(new URL(url).searchParams.get('path'), path);
+  }
+});
+test('relative, protocol-relative and non-HTTP page paths are not sent to the Host file API', () => {
+  for (const path of ['', 'relative.png', '//host/image.png', 'https://host/image.png', 'data:image/png,x', 'javascript:alert(1)']) {
+    assert.equal(localPathMediaUrl('http:', 'http://local', path), undefined);
+  }
+  assert.equal(localPathMediaUrl('file:', 'null', '/tmp/image.png'), undefined);
+});