@drscrewdriver/dsh-better-display 0.3.3-fork.1

package/src/skill-status.ts

@@ -0,0 +1,81 @@
+/** Shared generative-mcpapps identity. Plugin-tree presence is not installation. */
+
+export const GENERATIVE_MCPAPPS_SKILL = 'generative-mcpapps';
+
+/** Conventional relative roots only. Never expand $HOME or dump host `root.path`. */
+export const CONVENTIONAL_SKILL_ROOTS = ['.dsh/skills', '.agents/skills'] as const;
+
+/** Copy source relative to the plugin / checkout, not an absolute pack path. */
+export const SKILL_PACK_RELATIVE = `skills/${GENERATIVE_MCPAPPS_SKILL}`;
+
+export type SkillRootSource =
+  | 'project-dsh'
+  | 'project-agents'
+  | 'user-dsh'
+  | 'user-agents'
+  | 'custom'
+  | 'bundled'
+  | (string & {});
+
+export interface SkillRootInfo {
+  readonly source: SkillRootSource;
+  readonly path: string;
+  readonly present?: boolean;
+}
+
+export interface HostSkillStatus {
+  readonly name: typeof GENERATIVE_MCPAPPS_SKILL;
+  readonly installed: boolean;
+  readonly via: 'skills.list' | 'skill-root' | null;
+  readonly roots: readonly SkillRootInfo[];
+  /** Plugin-shipped pack path for copy guidance. Not a harness skill root. */
+  readonly packPath?: string;
+}
+
+export function skillNameMatches(name: unknown): boolean {
+  return typeof name === 'string' && name === GENERATIVE_MCPAPPS_SKILL;
+}
+
+export function skillListIncludes(entries: readonly { readonly name?: string }[] | undefined): boolean {
+  return Array.isArray(entries) && entries.some(entry => skillNameMatches(entry?.name));
+}
+
+/** Directory bundle `name/SKILL.md` or flat `name.md` at a scanned root. */
+export function skillRootEntryMatches(entryName: string): boolean {
+  return entryName === GENERATIVE_MCPAPPS_SKILL || entryName === `${GENERATIVE_MCPAPPS_SKILL}.md`;
+}
+
+export function skillsFromListResult(result: unknown): { name?: string }[] {
+  if (Array.isArray(result)) return result;
+  if (result === null || typeof result !== 'object') return [];
+  const record = result as {
+    ok?: boolean;
+    value?: { skills?: unknown } | unknown;
+    skills?: unknown;
+  };
+  if (record.ok === false) return [];
+  if (Array.isArray(record.skills)) return record.skills as { name?: string }[];
+  if (record.value && typeof record.value === 'object') {
+    const value = record.value as { skills?: unknown };
+    if (Array.isArray(value.skills)) return value.skills as { name?: string }[];
+    if (Array.isArray(record.value)) return record.value as { name?: string }[];
+  }
+  return [];
+}
+
+export function publicSkillRoots(): readonly SkillRootInfo[] {
+  return CONVENTIONAL_SKILL_ROOTS.map(path => ({ source: 'conventional', path }));
+}
+
+/**
+ * Strip host home / pack absolutes before anything user-facing (HTTP or Settings).
+ * Detection still uses the raw scan; this is the public face.
+ */
+export function toPublicSkillStatus(status: HostSkillStatus): HostSkillStatus {
+  return {
+    name: status.name,
+    installed: status.installed,
+    via: status.via,
+    roots: publicSkillRoots(),
+  };
+}

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),
+  useSessionStatus: selector => selector(new Map([['auto-fold-fixture', { running: true, pendingInteraction: pending.get('auto-fold-fixture'), completionUnread: false }]])),
+  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-closed-gap.tsx

@@ -0,0 +1,20 @@
+import React, { useMemo, useRef, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import type { ChatSnapshot } from '@deepseek-ai/dsh-client-ui-chat/client';
+import { ChoreographedFlow } from '../src/client/ChoreographedFlow.js';
+import { ClosedProcessSummary } from '../src/client/ClosedProcessSummary.js';
+import { ProcessFragment } from '../src/client/motion.js';
+import { presentLiveTurn } from '../src/client/live-turn.js';
+import type { LiveStep } from '../src/client/live-turn.js';
+function Fixture() {
+ const [open,setOpen]=useState(false);const button=useRef<HTMLButtonElement>(null);
+ const steps=useMemo(()=>Array.from({length:500},(_,i):LiveStep=>({kind:'reasoning',key:`r${i}`,nodeKey:`r${i}`,step:i,start:0,blocks:[]})),[]);
+ const frame=useMemo(()=>({items:presentLiveTurn(steps,{status:'closed',reason:'completed',closingStep:501,latestStep:501}),snapshot:{} as ChatSnapshot}),[steps]);
+ return <main style={{padding:30}}><h1>完成后 500 条过程记录：实际组件回归</h1>
+ <button ref={button} onClick={()=>setOpen(v=>!v)}>切换过程展开</button>
+ <ClosedProcessSummary steps={steps} open={open} onChange={setOpen} controls="closed-flow"/>
+ <ChoreographedFlow id="closed-flow" frame={frame} motion enabled={false} urgent={false} processOpen={open} open={{}} onOpenChange={()=>{}}
+ renderStep={step=><ProcessFragment open={open} motion onRead={()=>{}} returnFocusTo={button} nodeKey={step.key}><p>过程内容 {step.key}</p></ProcessFragment>}/>
+ <article data-final-answer>最终回答必须紧随统计，不能隔着 8000px 空白；展开、收起以后仍应如此。</article></main>;
+}
+createRoot(document.getElementById('app')!).render(<Fixture/>);

package/tests/browser-motion.tsx

@@ -0,0 +1,65 @@
+import React, { useMemo, useRef, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import type { ChatSnapshot } from '@deepseek-ai/dsh-client-ui-chat/client';
+import { ChoreographedFlow, useFlowChat } from '../src/client/ChoreographedFlow.js';
+import { presentLiveTurn } from '../src/client/live-turn.js';
+import type { LiveStep } from '../src/client/live-turn.js';
+import { Disclosure, StatusText, useMotionAllowed, useReadingScroll } from '../src/client/motion.js';
+import { ReasoningCard } from '../src/client/ReasoningCard.js';
+import { StreamMotionContext, useStreamingText } from '../src/client/streaming.js';
+import css from '../src/client/Reader.module.css';
+
+const sample = '旧内容保持原位，先完成连续收拢，再确认数字，最后继续输出。This is a real component regression fixture, not a replacement animation. ';
+function Text({ step }: { step: LiveStep }) {
+  const node = useFlowChat(s => 'nodeKey' in step ? s.nodes.get(step.nodeKey) : undefined);
+  const source = (node?.data as { text?: string })?.text ?? '';
+  const text = useStreamingText(source, true, { startedAt: 0, interrupted: false, selected: false });
+  if (step.kind === 'reasoning') return <ReasoningCard step={step.step} active motion selected={false} onRead={() => {}}>
+    <div data-test-text={step.key} style={{ whiteSpace: 'pre-wrap' }}>{text.text}</div>
+  </ReasoningCard>;
+  return <div data-reader-anchor style={{ padding: '10px 0' }} data-test-text={step.key}>{step.kind === 'body' ? sample : '工具 · 读取源文件，等待下一个步骤'}</div>;
+}
+function Demo() {
+  const [n, setN] = useState(1);
+  const [tail, setTail] = useState(0);
+  const [auto, setAuto] = useState(true);
+  const [motionSetting, setMotion] = useState(true);
+  const motion = useMotionAllowed(motionSetting);
+  const [urgent, setUrgent] = useState(false);
+  const [expanded, setExpanded] = useState(true);
+  const [open, setOpen] = useState<Record<string, boolean>>({});
+  const root = useRef<HTMLDivElement>(null); const button=useRef<HTMLButtonElement>(null);
+  useReadingScroll(root, motion);
+  const frame = useMemo(() => {
+    const steps: LiveStep[] = [];
+    const nodes = new Map();
+    for (let i=1; i<=n; i++) {
+      steps.push({ kind: 'reasoning', key: `r${i}`, nodeKey:`r${i}`, start:0, blocks:[], step:i });
+      nodes.set(`r${i}`, { data: { text: sample.repeat(i===n && n>1 ? 3 + tail : 5) } });
+      if (i<n || n===1) {
+        steps.push({kind:'body',key:`b${i}`,nodeKey:`b${i}`,start:1,blocks:[],step:i});
+        steps.push({kind:'other',key:`t${i}`,nodeKey:`t${i}`});
+      }
+    }
+    return {items:presentLiveTurn(steps,{status:'open'},auto),snapshot:{nodes:{get:(key:string)=>nodes.get(key)}} as unknown as ChatSnapshot};
+  }, [n,tail,auto]);
+  (window as any).fixture = { next:()=>setN(v=>v+1), burst:()=>{setN(v=>v+1); setTimeout(()=>setN(v=>v+2),100); setTimeout(()=>setTail(v=>v+2),180);}, stop:()=>setUrgent(true), reduce:()=>setMotion(false), reset:()=>{setN(1);setTail(0);setUrgent(false);setOpen({});setMotion(true);setAuto(true);} };
+  return <><nav style={{padding:12,display:'flex',gap:12,flexWrap:'wrap'}}>
+    <b>转场验收 · 真实组件 / 模拟数据</b>
+    <button onClick={()=>(window as any).fixture.next()}>下一步</button>
+    <button onClick={()=>(window as any).fixture.burst()}>突发三步</button>
+    <button onClick={()=>(window as any).fixture.stop()}>停止</button>
+    <button onClick={()=>(window as any).fixture.reset()}>重置</button>
+    <button onClick={()=>setMotion(v=>!v)}>动效{motion?'开':'关'}</button>
+  </nav><div data-conversation-scroll style={{height:'calc(100vh - 70px)',overflow:'auto'}}>
+    <StreamMotionContext.Provider value={{enabled:motion,activatedAt:Date.now()}}>
+    <div ref={root} className={css.root} data-motion={motion?'on':'off'}><div className={css.column} data-chat-flow="">
+      <div className={css.toolbar}><button className={css.textButton} onClick={()=>setAuto(v=>!v)}>自动折叠{auto?'开':'关'}</button></div>
+      <div className={css.turnProcessSticky}><Disclosure open={expanded} onChange={setExpanded} buttonRef={button} label={<StatusText text="正在处理" motion={motion}/>} /></div>
+      <ChoreographedFlow id="fixture-flow" frame={frame} motion={motion} enabled={auto} urgent={urgent} processOpen={expanded}
+        open={open} onOpenChange={(key,value)=>setOpen(s=>({...s,[key]:value}))} renderStep={step=><Text step={step}/>} />
+      <div data-test-footer style={{height:72}}>输入区位置参照 · 后台数据不会被修改</div>
+    </div></div></StreamMotionContext.Provider>
+  </div></>;
+}
+createRoot(document.getElementById('app')!).render(<Demo />);

package/tests/browser-official-bridge.tsx

@@ -0,0 +1,152 @@
+/** 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 { DeliverablesTail } from '@fixture/deliverables';
+import { zh as deliverablesZh, en as deliverablesEn } from '@fixture/deliverables-locale';
+import { FileRouteAction } from '@fixture/open-in-app-action';
+import { zh as openInAppZh, en as openInAppEn } from '@fixture/open-in-app-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 }, 'open-in-app': { zh: openInAppZh, en: openInAppEn }, 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, bindingSource: (target: any) => source(target === 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: '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.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' });
+const changesDiff = source({});
+const changesSummary = source({});
+const showCodeDiff = source(false);
+slots.register({ name: 'conversation.chat.turnTail', id: '@deepseek-ai/dsh-client-ui-deliverables', locale: 'deliverables',
+  children: { 'deliverables.file.actions': { kind: 'list', scope: 'session' } },
+  inject: () => ({ hooks: { changesDiff, showCodeDiff, presentedOpen, presentedHost, changesSummary },
+    loadChangesDiff: async () => {}, reloadPresentedHost: async () => {}, loadChangesSummary: async () => {},
+    openPresented: async (...args: any[]) => { observations.opens.push(['presented', ...args]); },
+    openChanged: async () => {}, openChangesReview: () => {},
+  }),
+}, DeliverablesTail);
+slots.register({ name: 'deliverables.file.actions', id: 'open-in-app', locale: 'open-in-app' }, FileRouteAction);
+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>
+    {renderSlot(OFFICIAL_SEATS.tail, { turn: { data: new Map([['deliverables', { changes: null, presented: [artifact] }]]) }, seq: 43, 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/browser-sticky-lanes.tsx

@@ -0,0 +1,22 @@
+import React, { useMemo, useRef, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import type { ChatSnapshot } from '@deepseek-ai/dsh-client-ui-chat/client';
+import { StickyLane } from '../src/client/StickyLane.js';
+import { ChoreographedFlow } from '../src/client/ChoreographedFlow.js';
+import { ClosedProcessSummary } from '../src/client/ClosedProcessSummary.js';
+import { Disclosure, StatusText } from '../src/client/motion.js';
+import { presentLiveTurn } from '../src/client/live-turn.js';
+import type { LiveStep } from '../src/client/live-turn.js';
+import css from '../src/client/Reader.module.css';
+const steps:LiveStep[]=[...Array.from({length:6},(_,i):LiveStep=>({kind:'reasoning',key:`r${i}`,nodeKey:`r${i}`,step:i,start:0,blocks:[]})),{kind:'body',key:'body',nodeKey:'body',step:6,start:0,blocks:[]},{kind:'other',key:'extra',nodeKey:'extra'},{kind:'reasoning',key:'latest',nodeKey:'latest',step:7,start:0,blocks:[]},{kind:'body',key:'answer',nodeKey:'answer',step:7,start:0,blocks:[]}];
+function Fixture(){
+ const [expanded,setExpanded]=useState(true),[open,setOpen]=useState<Record<string,boolean>>({}),[closed,setClosed]=useState(false);const button=useRef<HTMLButtonElement>(null);
+ const frame=useMemo(()=>({items:presentLiveTurn(steps,{status:'open',reason:null,latestStep:7,closingStep:null}),snapshot:{} as ChatSnapshot}),[]);
+ return <><button onClick={()=>setClosed(v=>!v)}>切换完成状态</button><div data-conversation-scroll style={{height:'calc(100vh - 32px)',overflow:'auto'}}><div className={css.root} data-dsh-better-display="fixture"><div className={css.column} data-chat-flow="">
+ <StickyLane kind="toolbar" className={css.toolbar}><button className={css.textButton}>自动折叠开</button></StickyLane>
+ <section className={css.turn} data-reader-turn="1"><div style={{height:240,background:'#eef2ff',alignSelf:'flex-end',width:'65%'}}>用户消息：滚动抵达顶部才吸顶。</div>
+ <StickyLane kind="status" className={css.turnProcessSticky}><Disclosure open={expanded} onChange={setExpanded} buttonRef={button} label={<StatusText text="正在使用工具" motion={false}/>} /></StickyLane>
+ {closed?<><ClosedProcessSummary steps={steps.slice(0,-1)} open={expanded} onChange={setExpanded} controls="body"/><div id="body" style={{height:1600}}>最终回答占位，验证完成后统计仍然吸顶。</div></>:<ChoreographedFlow id="flow" frame={frame} motion={false} enabled={false} urgent={false} processOpen={expanded} open={open} onOpenChange={(k,v)=>{setExpanded(true);setOpen(x=>({...x,[k]:v}));}} renderStep={s=>s.key==='answer'?<div style={{height:1600}}>当前输出保持完整，统计不应被推出视野。</div>:expanded?<div style={{height:s.key==='latest'?300:100}}>过程 {s.key}</div>:null}/>}
+ </section><div style={{height:180}}>下一轮之前</div></div></div></div></>;
+}
+createRoot(document.getElementById('app')!).render(<Fixture/>);

package/tests/browser-waiting-clock.tsx

@@ -0,0 +1,14 @@
+import React, { useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import { WaitingStatus } from '../src/client/WaitingStatus.js';
+import { waitingAnchor } from '../src/client/waiting-clock.js';
+function Fixture() {
+ const [inputs,setInputs]=useState([{key:'u1',kind:'user',data:{time:Date.now()-300000}}]);
+ const [renders,setRenders]=useState(0);
+ const anchor=waitingAnchor(inputs.map(x=>x.key),key=>inputs.find(x=>x.key===key));
+ return <main style={{padding:30}}><h1>等待计时回归：真实组件、模拟输入</h1>
+ <button onClick={()=>setInputs(x=>[...x,{key:`s${x.length}`,kind:'steering',data:{time:Date.now()}}])}>追加 steering</button>
+ <button onClick={()=>setRenders(x=>x+1)}>普通输出更新</button><span>更新次数 {renders}</span>
+ <WaitingStatus anchor={anchor} label="深度求索中..."/></main>;
+}
+createRoot(document.getElementById('app')!).render(<Fixture/>);

package/tests/chat-flow-hook.test.ts

@@ -0,0 +1,66 @@
+import assert from 'node:assert/strict';
+import { readFileSync } from 'node:fs';
+import { dirname, resolve } from 'node:path';
+import { test } from 'node:test';
+import { fileURLToPath } from 'node:url';
+
+const root = resolve(dirname(fileURLToPath(import.meta.url)), '..');
+
+/** Maid-atelier / phoebe-atelier hide rule, reduced to the :has() predicate. */
+const SKIN_HIDE = '[data-conversation-scroll]:not(:has([data-chat-flow])) > [data-composer-seat]';
+
+interface AttrNode {
+  attrs: Record<string, string>;
+  children: AttrNode[];
+}
+
+function hasAttr(node: AttrNode, name: string): boolean {
+  if (Object.hasOwn(node.attrs, name)) return true;
+  return node.children.some(child => hasAttr(child, name));
+}
+
+/** True when the skin rule would set the seat to display:none. */
+function skinHidesComposerSeat(scroll: AttrNode): boolean {
+  return !hasAttr(scroll, 'data-chat-flow');
+}
+
+function readerColumn(hook: boolean): AttrNode {
+  return {
+    attrs: hook ? { 'data-chat-flow': '' } : {},
+    children: [{ attrs: { 'data-reader-turn': '1' }, children: [] }],
+  };
+}
+
+test('Reader source keeps the native ChatView chat-flow hook on its column', () => {
+  const source = readFileSync(resolve(root, 'src/client/Reader.tsx'), 'utf8');
+  const column = source.match(/<div className=\{css\.column\}[^>]*>/);
+  assert.ok(column, 'Reader still renders css.column');
+  assert.match(column[0], /data-chat-flow=""/);
+});
+
+test('committed client bundle publishes data-chat-flow for git installs', () => {
+  const client = readFileSync(resolve(root, 'lib/client.js'), 'utf8');
+  assert.match(client, /"data-chat-flow":\s*""/);
+  const compiled = readFileSync(resolve(root, 'lib/types/client/Reader.js'), 'utf8');
+  assert.match(compiled, /"data-chat-flow":\s*""/);
+});
+
+test('skin empty-state hide stays off when Reader mounts inside the scrollport', () => {
+  const inspectOnly: AttrNode = {
+    attrs: { 'data-conversation-scroll': '' },
+    children: [
+      { attrs: { 'data-reader-turn': '1' }, children: [] },
+      { attrs: { 'data-composer-seat': '' }, children: [] },
+    ],
+  };
+  const withReader: AttrNode = {
+    attrs: { 'data-conversation-scroll': '' },
+    children: [readerColumn(true), { attrs: { 'data-composer-seat': '' }, children: [] }],
+  };
+  assert.equal(skinHidesComposerSeat(inspectOnly), true, SKIN_HIDE);
+  assert.equal(skinHidesComposerSeat(withReader), false, SKIN_HIDE);
+  assert.equal(skinHidesComposerSeat({
+    attrs: { 'data-conversation-scroll': '' },
+    children: [readerColumn(false), { attrs: { 'data-composer-seat': '' }, children: [] }],
+  }), true);
+});

package/tests/cloud-gate.test.ts

@@ -0,0 +1,34 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { accessSync, constants, readFileSync } from 'node:fs';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const root = resolve(dirname(fileURLToPath(import.meta.url)), '..');
+
+test('cloud hard-gate files are committed and ban other models / computer use', () => {
+  const hooks = JSON.parse(readFileSync(resolve(root, '.cursor/hooks.json'), 'utf8')) as {
+    hooks: { subagentStart: { command: string }[] };
+  };
+  assert.equal(hooks.hooks.subagentStart[0]?.command, '.cursor/hooks/block-other-models.sh');
+
+  const script = resolve(root, '.cursor/hooks/block-other-models.sh');
+  accessSync(script, constants.X_OK);
+  const hook = readFileSync(script, 'utf8');
+  assert.match(hook, /computeruse|computerUse/);
+  assert.match(hook, /browser/);
+  assert.match(hook, /claude|sonnet|opus/);
+
+  const worker = readFileSync(resolve(root, '.cursor/agents/worker.md'), 'utf8');
+  assert.match(worker, /model: inherit/);
+  assert.match(worker, /force-default-model: true/);
+
+  const cloud = readFileSync(resolve(root, '.cursor/CLOUD.md'), 'utf8');
+  assert.match(cloud, /Only use Grok 4\.6/);
+  assert.match(cloud, /Never Claude, Sonnet, Opus, GPT, or Gemini/);
+  assert.match(cloud, /model: inherit/);
+  assert.match(cloud, /Do not spawn the Task tool, computerUse, or browser/);
+  assert.match(cloud, /Composer is the only fallback/);
+  assert.match(cloud, /Do not pass a `model` argument/);
+  assert.match(cloud, /Prefer Grok or Composer only/);
+});

package/tests/context-tool-update.test.ts

@@ -0,0 +1,33 @@
+import assert from 'node:assert/strict';
+import { test } from 'node:test';
+import { toolUpdateRows } from '../src/client/native/tool-update.js';
+
+test('a single tool addition is its own closed row', () => {
+  assert.deepEqual(toolUpdateRows([{ type: 'tool-addition', toolName: 'search' }]), {
+    added: ['search'],
+    removed: [],
+    single: { type: 'tool-addition', toolName: 'search' },
+  });
+});
+
+test('mixed tool changes stay one expandable update', () => {
+  assert.deepEqual(toolUpdateRows([
+    { type: 'tool-addition', toolName: 'search' },
+    { type: 'tool-addition', toolName: 'read_file' },
+    { type: 'tool-removal', toolName: 'old_search' },
+  ]), {
+    added: ['search', 'read_file'],
+    removed: ['old_search'],
+    single: null,
+  });
+});
+
+test('text or a missing tool name stays a generic context row', () => {
+  assert.equal(toolUpdateRows([{ type: 'text', toolName: 'search' }]), null);
+  assert.equal(toolUpdateRows([{ type: 'tool-addition' }]), null);
+  assert.equal(toolUpdateRows([]), null);
+  assert.equal(toolUpdateRows([
+    { type: 'tool-addition', toolName: 'search' },
+    { type: 'text' },
+  ]), null);
+});

package/tests/conversation-scroll.test.ts

@@ -0,0 +1,47 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { flowTop, landTurn, READING_LINE_OFFSET_PX, scrollerOf } from '../src/client/conversation-scroll.ts';
+
+interface FakeBox {
+  top: number;
+  scrollTop: number;
+  closest: (selector: string) => FakeBox | null;
+  getBoundingClientRect: () => { top: number };
+}
+
+function box(top: number, extra: Partial<FakeBox> = {}): FakeBox {
+  const node: FakeBox = {
+    top,
+    scrollTop: 0,
+    closest: () => null,
+    getBoundingClientRect: () => ({ top: node.top }),
+    ...extra,
+  };
+  return node;
+}
+
+test('scrollerOf prefers the conversation scroll host over the reader root', () => {
+  const host = box(40);
+  const root = box(80, { closest: selector => selector === '[data-conversation-scroll]' ? host : null });
+  assert.equal(scrollerOf(root as unknown as HTMLElement), host as unknown as HTMLElement);
+});
+
+test('scrollerOf falls back to the reader root when no host exists', () => {
+  const root = box(0);
+  assert.equal(scrollerOf(root as unknown as HTMLElement), root as unknown as HTMLElement);
+});
+
+test('landTurn writes only scrollport.scrollTop using the official reading-line offset', () => {
+  const scrollport = box(100, { scrollTop: 50 });
+  const row = box(300);
+  landTurn(row as unknown as HTMLElement, scrollport as unknown as HTMLElement);
+  assert.equal(flowTop(row as unknown as HTMLElement, scrollport as unknown as HTMLElement), 200);
+  assert.equal(scrollport.scrollTop, 50 + 200 - READING_LINE_OFFSET_PX);
+});
+
+test('landTurn to the last row clamps naturally via the caller scrollport assignment', () => {
+  const scrollport = box(0, { scrollTop: 900 });
+  const row = box(40);
+  landTurn(row as unknown as HTMLElement, scrollport as unknown as HTMLElement);
+  assert.equal(scrollport.scrollTop, 900 + 40 - READING_LINE_OFFSET_PX);
+});