dsh-better-display 0.2.1 → 0.3.2

package/src/client/native/ContextInjectionRow.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import type { ContextMessageNode } from '@deepseek-ai/dsh-client-ui-conversation/client'
 import type { TranslateNS } from '@deepseek-ai/dsh-client-ui-slots'
-import { DisclosureRow, IconBrowseOutline16 } from '@deepseek-ai/dsh-client-ui-primitives'
+import { DisclosureRow, IconBrowseOutlineRegular } from '@deepseek-ai/dsh-client-ui-primitives'
 import { ReferenceIcon } from './ReferenceIcon.js'
 import { contextBody } from './ContextBody.js'
 import css from './ContextInjectionRow.module.css'
@@ -10,8 +10,17 @@ import css from './ContextInjectionRow.module.css'
 export interface ContextInjectionRowProps {
   content: ContextMessageNode['content']
   source: ContextMessageNode['source']
-  /** Role and producer name projected from the durable source. */
-  provenance: ContextMessageNode['provenance']
+  /**
+   * Role and producer name projected from the durable source.
+   *
+   * Host generations disagree on the field name: newer builds project
+   * `provenance`, the 0.1.6-alpha generations project `producer`. Both are
+   * optional here and resolved below, so the row renders on either host instead
+   * of throwing on `undefined.role` and degrading its whole block boundary.
+   */
+  provenance?: ContextMessageNode['producer'] | null
+  /** Alpha-generation spelling of {@link provenance}. */
+  producer?: ContextMessageNode['producer'] | null
   /** Producer-declared information form; null renders the opaque body. */
   form: ContextMessageNode['form']
   /** The owning view's locale seat, passed down as a plain prop. */
@@ -29,8 +38,11 @@ export interface ContextInjectionRowProps {
  * @param props - Durable content, its projected producer role/name and form, and the locale seat.
  * @returns A collapsed context row with a bounded, form-specific body.
  */
-export function ContextInjectionRow({ content, source, provenance, form, t }: ContextInjectionRowProps) {
+export function ContextInjectionRow({ content, source, provenance, producer, form, t }: ContextInjectionRowProps) {
   const [open, setOpen] = useState(false)
+  // Two host generations, one component. A row whose projection is absent
+  // entirely still renders: the marker falls back to a plain injection.
+  const view = provenance ?? producer ?? { role: 'inject' as const, label: null }
   // Resolved rather than declared: a form whose fields are unreadable renders
   // the opaque body, and the marker must say what the row actually shows.
   const { rendered, summary, body } = contextBody(form, { content, source, t })
@@ -38,18 +50,18 @@ export function ContextInjectionRow({ content, source, provenance, form, t }: Co
   return (
     <DisclosureRow
       className={css.root}
-      icon={provenance.role === 'recall'
+      icon={view.role === 'recall'
         ? <span data-context-recall-icon><ReferenceIcon kind="session" /></span>
-        : <IconBrowseOutline16 size={14} />}
+        : <IconBrowseOutlineRegular size={14} />}
       chevronClassName={css.chevron}
-      title={t(provenance.role === 'recall' ? 'message.contextRecall' : 'message.contextInjection')}
-      collapsedContent={provenance.label === null ? undefined : (
+      title={t(view.role === 'recall' ? 'message.contextRecall' : 'message.contextInjection')}
+      collapsedContent={view.label === null ? undefined : (
         /* ToolRow's separator shape: an aria-hidden dot, so the accessible name
            stays the two readable parts and the two disclosure rows expose one
            name shape. A source that names no producer drops the dot with it. */
         <>
           <span className={css.sep} aria-hidden />
-          <span className={css.source} data-context-source>{provenance.label}</span>
+          <span className={css.source} data-context-source>{view.label}</span>
           {summary !== null && (
             <>
               <span className={css.sep} aria-hidden />

package/src/client/native/ReferenceIcon.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react'
 import {
-  IconBrowseOutline16, IconFolderClose16,
+  IconBrowseOutlineRegular, IconFolderCloseRegular,
 } from '@deepseek-ai/dsh-client-ui-primitives'
 
 /** Reference domains with distinct composer and transcript glyphs. */
@@ -29,7 +29,7 @@ export function ReferenceIcon({ kind, size = 16, className }: ReferenceIconProps
           />
         </svg>
       )
-    case 'file': return <IconBrowseOutline16 size={size} className={className} />
-    case 'folder': return <IconFolderClose16 size={size} className={className} />
+    case 'file': return <IconBrowseOutlineRegular size={size} className={className} />
+    case 'folder': return <IconFolderCloseRegular size={size} className={className} />
   }
 }

package/src/client/native/tool-call-model.ts

@@ -217,7 +217,7 @@ function deriveBody(variant: ToolRowVariant, argsRaw: string): string | null {
 export function toolRowModel(toolName: string, block: ToolCallBlock, cwd?: string, home?: string): ToolRowModel {
   const variant = classifyTool(toolName)
   const done = 'kind' in block
-  const argsRaw = (done ? block.call?.argsRaw : block.argsRaw) ?? ''
+  const argsRaw = (done ? block.call?.argsRaw : ('argsRaw' in block ? block.argsRaw : '')) ?? ''
   const state: ToolRowState = !done ? 'running'
     : block.error?.code === 'interrupted' ? 'stopped'
       : block.isError ? 'error' : 'ok'

package/src/client/official-slots.tsx

@@ -0,0 +1,211 @@
+import { createElement, memo, useMemo, type ComponentType, type ReactNode } from 'react';
+import type { Context } from '@deepseek-ai/cordis';
+import type { SlotEntryDef, SlotMap, SlotSpec, StoredEntry } from '@deepseek-ai/dsh-client-ui-slots';
+import type {} from '@deepseek-ai/dsh-client-ui-renderer/client';
+
+/**
+ * RC2 composition adapter. Only public registry operations are used. We lend
+ * registrations a Reader-owned seat, not a second implementation of their UI.
+ * The platform still binds injection, hooks, locale, stores and boundaries.
+ * Original entries, declarations and components are never changed.
+ *
+ * Child seats have unique names because RC2 declarations have one owner. The
+ * sole component wrapper translates those names before delegating to the
+ * framework-provided renderSlot. It does not implement a slot renderer.
+ */
+export const OFFICIAL_SLOTS = {
+  actions: 'conversation.chat.assistant-actions',
+  tools: 'tool.call.toolview',
+  tail: 'conversation.chat.turnTail',
+  nodes: 'conversation.chat.node',
+  images: 'conversation.message.images',
+} as const;
+export type OfficialFamily = keyof typeof OFFICIAL_SLOTS;
+export const OFFICIAL_SEATS = {
+  actions: 'dsh-better-display.official.actions/conversation.chat.assistant-actions',
+  tools: 'dsh-better-display.official.tools/tool.call.toolview',
+  tail: 'dsh-better-display.official.tail/conversation.chat.turnTail',
+  nodes: 'dsh-better-display.official.nodes/conversation.chat.node',
+  images: 'dsh-better-display.official.images/conversation.message.images',
+} as const;
+export type OfficialSeat = typeof OFFICIAL_SEATS[OfficialFamily];
+export const officialSeat = (family: OfficialFamily, source: string = OFFICIAL_SLOTS[family]) =>
+  `dsh-better-display.official.${family}/${source}`;
+
+type Spec = SlotSpec<SlotEntryDef>;
+type Render = (key: string, owner: object, options?: object) => ReactNode;
+type RenderProps = { renderSlot: Render; renderSlotChain?: Render } & Record<string, unknown>;
+type Registration = StoredEntry['options'] & Omit<StoredEntry, 'options' | 'component'> & { name: string };
+
+/** The documented, type-erased registry inspection/registration boundary. */
+export interface CompositionRegistry {
+  spec(key: string): Spec | undefined;
+  entriesOfSlot(key: string): readonly StoredEntry[];
+  subscribe(key: string, listener: () => void): () => void;
+  inject(key: string, effect: () => () => void): () => void;
+  register(options: Registration, component: unknown): () => void;
+}
+
+declare module '@deepseek-ai/dsh-client-ui-slots' {
+  interface SlotMap {
+    'dsh-better-display.official.actions/conversation.chat.assistant-actions': SlotMap['conversation.chat.assistant-actions'];
+    'dsh-better-display.official.tools/tool.call.toolview': SlotMap['tool.call.toolview'];
+    'dsh-better-display.official.tail/conversation.chat.turnTail': SlotMap['conversation.chat.turnTail'];
+    'dsh-better-display.official.nodes/conversation.chat.node': SlotMap['conversation.chat.node'];
+    'dsh-better-display.official.images/conversation.message.images': SlotMap['conversation.message.images'];
+  }
+}
+
+// Existing Reader presentations own these rows. All other node kinds, including
+// future registrations, reach the official renderer through the fallback seat.
+const READER_NODES = new Set(['user', 'steering', 'assistant-step', 'tool-call', 'turn-tail', 'turn-process']);
+const EXPECTED: Record<OfficialFamily, Spec> = {
+  actions: { kind: 'list', scope: 'session' },
+  tools: { kind: 'keyed', scope: 'session' },
+  tail: { kind: 'list', scope: 'session' },
+  nodes: { kind: 'keyed', scope: 'session' },
+  images: { kind: 'single', scope: 'session' },
+};
+
+/**
+ * Reader already presents produced paths with its copy/reveal actions. RC2's
+ * official tail additionally owns explicit `present` artifacts. Leave those
+ * cards, actions and state intact, and omit only the duplicate produced chips.
+ * This changes a presentation prop, never the source match or session data.
+ * Unrecognized shapes pass through intact for safe forward degradation.
+ */
+export function readerTailMatch(value: unknown, displayedPaths?: readonly string[]): unknown {
+  if (!value || typeof value !== 'object') return value;
+  const match = value as Record<string, unknown>;
+  const displayed = new Set(displayedPaths ?? []);
+  return displayed.size > 0 && Array.isArray(match.produced) && Array.isArray(match.presented)
+    ? { ...match, produced: match.produced.filter(path => !displayed.has(path)) }
+    : value;
+}
+
+function tailPresentation(component: unknown) {
+  const Original = component as ComponentType<Record<string, unknown>>;
+  return memo(function ReaderTailPresentation(props: Record<string, unknown>) {
+    const matched = useMemo(() => readerTailMatch(props.matched, props.readerProducedPaths as readonly string[] | undefined), [props.matched, props.readerProducedPaths]);
+    return createElement(Original, { ...props, matched });
+  });
+}
+
+export function officialChildren(slots: Pick<CompositionRegistry, 'spec'>): { [K in OfficialSeat]: SlotSpec<SlotMap[K]> } {
+  return Object.fromEntries(Object.entries(OFFICIAL_SLOTS).map(([name, source]) => {
+    const family = name as OfficialFamily;
+    const spec = slots.spec(source);
+    if (spec && (spec.kind !== EXPECTED[family].kind || spec.scope !== EXPECTED[family].scope)) {
+      throw new Error(`Official slot contract changed: ${source} (${spec.kind}/${spec.scope})`);
+    }
+    // In particular, retain conversation.chat.node's contextual turn-data hook.
+    return [officialSeat(family), spec ?? EXPECTED[family]];
+  })) as { [K in OfficialSeat]: SlotSpec<SlotMap[K]> };
+}
+
+function translatedComponent(entry: StoredEntry, names: ReadonlyMap<string, string>) {
+  if (names.size === 0) return entry.component;
+  const Original = entry.component as ComponentType<Record<string, unknown>>;
+  return memo(function OfficialSlotChildren(props: RenderProps) {
+    const renders = useMemo(() => {
+      const translate = (render: Render | undefined): Render => (key, owner, options) => {
+        const seat = names.get(key);
+        if (!seat || !render) throw new Error(`Undeclared official child slot: ${key}`);
+        return render(seat, owner, options);
+      };
+      return {
+        renderSlot: translate(props.renderSlot),
+        ...(props.renderSlotChain ? { renderSlotChain: translate(props.renderSlotChain) } : {}),
+      };
+    }, [props.renderSlot, props.renderSlotChain]);
+    return createElement(Original, { ...props, ...renders });
+  });
+}
+
+/**
+ * Mirror one elected contribution set incrementally. Unrelated additions do not
+ * remount existing cards or recreate their subscriptions. A source unload/HMR
+ * disposes the corresponding subtree and closures before its replacement.
+ */
+export function mirrorOfficialSlot(
+  slots: CompositionRegistry,
+  source: string,
+  target: string,
+  namespace: string,
+  accept: (entry: StoredEntry) => boolean = () => true,
+): () => void {
+  const mounted = new Map<StoredEntry, () => void>();
+  let stopped = false;
+  const reconcile = () => {
+    if (stopped) return;
+    const entries = slots.entriesOfSlot(source).filter(accept);
+    const wanted = new Set(entries);
+    for (const [entry, dispose] of mounted) {
+      if (wanted.has(entry)) continue;
+      dispose();
+      mounted.delete(entry);
+    }
+    for (const entry of entries) {
+      if (mounted.has(entry)) continue;
+      const names = new Map(Object.keys(entry.children ?? {}).map(key => [key, `${namespace}/${key}`]));
+      const children = Object.fromEntries([...names].map(([key, seat]) => [seat, entry.children![key]]));
+      const disposers: (() => void)[] = [];
+      const dispose = () => { for (const stop of disposers.splice(0).reverse()) stop(); };
+      try {
+        const { component: _component, options, children: _children, ...metadata } = entry;
+        const presentation = source === OFFICIAL_SLOTS.tail && entry.locale === 'deliverables'
+          ? { ...entry, component: tailPresentation(entry.component) }
+          : entry;
+        disposers.push(slots.register({
+          ...options, ...metadata, name: target,
+          ...(names.size ? { children } : {}),
+          registrant: `dsh-better-display → ${entry.registrant ?? source}`,
+        }, translatedComponent(presentation, names)));
+        for (const [key, seat] of names) {
+          disposers.push(mirrorOfficialSlot(slots, key, seat, namespace));
+        }
+        mounted.set(entry, dispose);
+      } catch (error) {
+        dispose();
+        throw error;
+      }
+    }
+  };
+  const unsubscribe = slots.subscribe(source, reconcile);
+  const dispose = () => {
+    stopped = true;
+    unsubscribe();
+    for (const stop of [...mounted.values()].reverse()) stop();
+    mounted.clear();
+  };
+  try { reconcile(); } catch (error) { dispose(); throw error; }
+  return dispose;
+}
+
+export function installOfficialSlots(ctx: Context): () => void {
+  // The SlotMap overloads are for statically declared keys. Aliases are a
+  // runtime composition, using exactly the public erased metadata contract.
+  const slots = ctx.slots as unknown as CompositionRegistry;
+  const disposers: (() => void)[] = [];
+  try {
+    for (const [name, source] of Object.entries(OFFICIAL_SLOTS)) {
+      const family = name as OfficialFamily;
+      disposers.push(slots.inject(source, () => {
+        const spec = slots.spec(source)!;
+        const target = officialSeat(family);
+        const declared = slots.spec(target);
+        if (spec.kind !== declared?.kind || spec.scope !== declared.scope) {
+          throw new Error(`Official slot contract changed: ${source}`);
+        }
+        return mirrorOfficialSlot(slots, source, target, `dsh-better-display.official.${family}`,
+          family === 'nodes' ? entry => !READER_NODES.has(entry.options.key ?? '') : undefined);
+      }));
+    }
+  } catch (error) {
+    for (const stop of disposers.reverse()) stop();
+    throw error;
+  }
+  return () => { for (const stop of disposers.splice(0).reverse()) stop(); };
+}
+
+export type OfficialSlotKey = typeof OFFICIAL_SLOTS[OfficialFamily] & keyof SlotMap;

package/src/client/platform-media.ts

@@ -0,0 +1,11 @@
+/** RC2 Chat's same-origin local media contract. Authorization stays Host-side. */
+export function localPathMediaUrl(protocol: string, origin: string, value: string): string | undefined {
+  if (protocol !== 'http:' && protocol !== 'https:') return undefined;
+  if (!value.startsWith('/') || value.startsWith('//')) return undefined;
+  return `${origin}/api/file?path=${encodeURIComponent(value)}`;
+}
+
+export const readerPathImages = {
+  resolve: (value: string) => typeof window === 'undefined' ? undefined
+    : localPathMediaUrl(window.location.protocol, window.location.origin, value),
+};

package/src/client/primitive-labels.ts

@@ -14,22 +14,23 @@ export const markdownLabels: MarkdownLabels = {
 };
 
 export const readBlockLabels: ReadBlockLabels = {
+  codeLabel: '代码', wrapLabel: '自动换行', unwrapLabel: '不换行',
   window: (shown, total) => `显示 ${shown} / ${total} 行`,
   copy: '复制', copied: '已复制', collapseAria: '收起文件内容',
   expandAria: hidden => `展开其余 ${hidden} 行`, collapse: '收起', expand: hidden => `展开其余 ${hidden} 行`,
 };
 
 export const terminalBlockLabels: TerminalBlockLabels = {
-  signal: signal => `信号 ${signal}`, exitCode: code => `退出码 ${code}`,
+  signal: signal => `信号 ${signal}`, exitCode: code => `退出码 ${code}`, noExitCode: '无退出码',
   running: '执行中', failed: '失败', done: '已完成', copy: '复制', copied: '已复制',
   noOutput: '没有输出', collapseAria: '收起命令输出', collapse: '收起',
   expandAria: hidden => `展开其余 ${hidden} 行`, expand: hidden => `展开其余 ${hidden} 行`,
 };
 
 export const diffBlockLabels: DiffBlockLabels = {
+  codeLabel: '代码', wrapLabel: '自动换行', unwrapLabel: '不换行',
   copy: '复制', copied: '已复制', collapseAria: '收起差异', collapse: '收起',
   expandAria: hidden => `展开其余 ${hidden} 行`, expand: hidden => `展开其余 ${hidden} 行`,
-  files: count => `${count} 个文件`,
 };
 
 export const searchBlockLabels: SearchBlockLabels = {

package/src/client/settings.tsx

@@ -38,7 +38,7 @@ function createSkillProbe(ctx: Context): SkillStatusProbe {
       return await res.json() as HostSkillStatus;
     },
     listRemoteSkills: async () => {
-      const remote = ctx.remote as { skills?: RemoteSkillsFace } | undefined;
+      const remote = ctx.remote as unknown as { skills?: RemoteSkillsFace } | undefined;
       const skills = remote?.skills
         ?? (ctx.get?.('remote.skills') as RemoteSkillsFace | undefined)
         ?? ((ctx.get?.('remote') as { skills?: RemoteSkillsFace } | undefined)?.skills);

package/src/client/store.ts

@@ -27,6 +27,7 @@ export interface ReaderState {
 }
 type ReaderActions = {
   setExpanded: (draft: ReaderState, key: string, value: boolean) => void;
+  resetExpanded: (draft: ReaderState) => void;
   setMotion: (draft: ReaderState, value: boolean) => void;
   setAutoFold: (draft: ReaderState, value: boolean) => void;
   setDeliverableOpenMode: (draft: ReaderState, value: DeliverableOpenMode) => void;
@@ -54,6 +55,7 @@ export function createReaderStore(): EngineStoreHandle<ReaderState, ReaderAction
     persist: 'dsh.reader.v1',
     actions: {
       setExpanded: (draft, key: string, value: boolean) => { draft.expanded[key] = value; },
+      resetExpanded: draft => { draft.expanded = {}; },
       setMotion: (draft, value: boolean) => { draft.motion = value; },
       setAutoFold: (draft, value: boolean) => {
         applyFoldIntensity(draft, value

package/src/client/tool-activity.ts

@@ -5,7 +5,7 @@ import type { ReaderGroup } from './projection.js';
 
 export type ToolDraft = Extract<AssistantBlock, { kind: 'tool-call' }>;
 export type ToolPhase = 'preparing' | 'running' | 'returned' | 'succeeded' | 'failed' | 'interrupted';
-export type ToolCategory = 'write' | 'read' | 'terminal' | 'search' | 'web' | 'other';
+export type ToolCategory = 'write' | 'read' | 'terminal' | 'search' | 'web' | 'code' | 'other';
 export interface ToolActivityEntry {
   kind: 'tool'; key: string; callId: string; step: number; order: number;
   draft?: ToolDraft; block?: ToolCallBlock;
@@ -95,13 +95,13 @@ 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 ?? '' : block.argsRaw : entry.draft?.argsRaw ?? '',
+    raw: block ? 'kind' in block ? block.call?.argsRaw ?? entry.draft?.argsRaw ?? '' : ('argsRaw' in block ? block.argsRaw : '') : entry.draft?.argsRaw ?? '',
   };
 }
 
 /** Name and raw arguments of any call block, whether it has landed or is pending. */
 function childIdentity(block: ToolCallBlock): { name?: string; raw: string } {
-  if (!block || !('kind' in block)) return { name: block?.name, raw: block?.argsRaw ?? '' };
+  if (!block || !('kind' in block)) return { name: block?.name, raw: block && 'argsRaw' in block ? block.argsRaw : '' };
   return { name: block.call?.name, raw: block.call?.argsRaw ?? '' };
 }
 
@@ -275,12 +275,19 @@ export function activitySummary(entry: Pick<ToolActivityEntry, 'block' | 'draft'
     : /^(read|read_file)$/.test(name) ? 'read'
     : /^(bash|shell|terminal|terminal_send|exec_command|pwsh)$/.test(name) ? 'terminal'
     : /^(grep|glob|find|search)$/.test(name) ? 'search'
-    : /^(web_search|web_fetch|web_open)$/.test(name) ? 'web' : 'other';
+    : /^(web_search|web_fetch|web_open)$/.test(name) ? 'web'
+    // Code interpreters: no file, no shell, no query — the call is a program.
+    // Without this branch `run_code` fell through to `other`, which has no
+    // renderer of its own, so its result text was emitted as ordinary prose
+    // and stayed outside every fold.
+    : /^(run_code|execute_code|code_interpreter|python|node|eval|repl)$/.test(name) ? 'code'
+    : 'other';
   const title = category === 'write' ? `${name === 'write' ? '写入' : '修改'}${file ? ` ${file}` : name === 'apply_patch' ? '代码补丁' : '文件'}`
     : category === 'read' ? `读取${file ? ` ${file}` : '文件'}`
     : category === 'terminal' ? description || '运行命令'
     : category === 'search' ? name === 'glob' ? '查找文件' : '搜索内容'
     : category === 'web' ? name === 'web_search' ? '搜索网页' : '读取网页'
+    : category === 'code' ? (description || '运行代码')
     : name;
   return { name, raw, args, 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/client/types.ts

@@ -1,12 +1,14 @@
-import type { ComponentType } from 'react';
 import type { ImageAttachmentRef } from '@deepseek-ai/dsh-attachment';
-import type { AssistantBlock } from '@deepseek-ai/dsh-client-ui-conversation/client';
+import type { AssistantBlock, MessageImageLoader } from '@deepseek-ai/dsh-client-ui-conversation/client';
 import type { MarkdownFileMentions } from '@deepseek-ai/dsh-client-ui-primitives';
 import type { PropsLocale, PropsRenderSlots, PropsRuntime, PropsStore } from '@deepseek-ai/dsh-client-ui-slots';
 import type {} from '@deepseek-ai/dsh-client-ui-chat/client';
 import type {} from '@deepseek-ai/dsh-client-ui-conversation/client';
 import type {} from '@deepseek-ai/dsh-client-ui-session/client';
 import type { createReaderStore } from './store.js';
+import type { OfficialSeat } from './official-slots.js';
+import type { OpenFileOptions, TurnTailOwnerProps } from '@deepseek-ai/dsh-client-ui-chat/client';
+import type {} from '@deepseek-ai/dsh-client-ui-tool/client';
 
 export interface ReaderBlockOwner {
   block: AssistantBlock;
@@ -31,7 +33,11 @@ export interface ReaderInjected {
    */
   fillComposer: (text: string) => boolean;
   /** Open a workspace file or directory; mode comes from the Better Display setting. */
-  openFile: (path: string) => Promise<void> | void;
+  openFile: (path: string, options?: OpenFileOptions) => Promise<void> | void;
+  officialImageLoader: MessageImageLoader;
+  officialFileMentions: (owner: TurnTailOwnerProps) => MarkdownFileMentions | undefined;
+  officialPreviewFile: (path: string) => void;
+  officialHost: { getSnapshot: () => { home?: string }; subscribe: (listener: () => void) => () => void };
   /** Root-scoped Better Display prefs (`dsh.reader.v1`), shared with Settings. */
   openPrefs?: {
     getSnapshot: () => {
@@ -55,16 +61,16 @@ export interface ReaderInjected {
   forkAt?: (seq: number) => void;
   /** Load session history through a target sequence number. */
   loadThrough?: (seq: unknown) => Promise<void>;
-  /** Resolve a custom tool view registered in the `tool.call.toolview` slot (e.g. diff cards). */
-  getToolView?: (toolName: string) => ComponentType<any> | null;
 }
 export type ReaderProps = PropsRuntime<'conversation.view'>
   & PropsLocale<'chat'>
-  & PropsRenderSlots<'dsh-better-display.block'>
+  & PropsRenderSlots<'dsh-better-display.block' | OfficialSeat>
   & PropsStore<ReturnType<typeof createReaderStore>>
   & ReaderInjected;
-export type BlockRenderProps = Pick<ReaderProps, 'renderSlotChain' | 'loadImage' | 'fillComposer' | 'getToolView'> & {
-  openFile?: (path: string) => Promise<void> | void;
+export type BlockRenderProps = Pick<ReaderProps, 'renderSlotChain' | 'loadImage' | 'fillComposer'> & {
+  official?: Pick<ReaderProps, 'renderSlot' | 'renderSlotChain' | 'officialImageLoader' | 'officialFileMentions' | 'officialPreviewFile' | 'officialHost' | 'openView'>;
+  cwd?: string;
+  openFile?: (path: string, options?: OpenFileOptions) => Promise<void> | void;
   revealFile?: (path: string) => Promise<void> | void;
   forkAt?: (seq: number) => void;
   /** Durable closing-message seq of this turn (turn-tail closing), used as the fork anchor. */

package/src/client/word-motion.tsx

@@ -2,6 +2,7 @@ import { createContext, useContext, useLayoutEffect, useMemo, useRef } from 'rea
 import type { ReactNode, RefObject } from 'react';
 import type { MarkdownFileMentions } from '@deepseek-ai/dsh-client-ui-primitives';
 import { MarkdownText } from './markdown/MarkdownText.js';
+import { readerPathImages } from './platform-media.js';
 import { WORD_MOTION, WordTimeline } from './word-timeline.js';
 import css from './Reader.module.css';
 
@@ -86,6 +87,6 @@ export function MotionMarkdown({ text, streaming, enabled, revision, fileMention
     return current.hasLiveText ? <MotionAtom born={current.bornAt(offset)} generation={current.generation} offset={offset}>{children}</MotionAtom> : children;
   }, []);
   return <WordScope.Provider value={scope}>
-    <MarkdownText text={text} streaming={streaming} codeLabels={CODE_LABELS} fileMentions={fileMentions} renderText={renderText} renderAtom={renderAtom} />
+    <MarkdownText text={text} streaming={streaming} codeLabels={CODE_LABELS} fileMentions={fileMentions} pathImages={readerPathImages} renderText={renderText} renderAtom={renderAtom} />
   </WordScope.Provider>;
 }

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>,
+);