dsh-better-display 0.2.1 → 0.3.2

package/src/client/Reader.tsx

@@ -6,6 +6,7 @@ import { JsonBlock, MarkdownText } from '@deepseek-ai/dsh-client-ui-primitives';
 import { BlockBoundary, Blocks, contentBlocks, CopyAnswer, UserMessageActions } from './Blocks.js';
 import { ReasoningCard } from './ReasoningCard.js';
 import { ToolActivity, ToolMedia } from './ToolActivity.js';
+import { OfficialActions, OfficialNode, OfficialTail } from './OfficialContent.js';
 import { preparingLabel, readerFlow } from './tool-activity.js';
 import { Disclosure, ProcessFragment, RetiringContent, StatusText, useMotionAllowed, usePinnedSelection, useReadingScroll } from './motion.js';
 import { StreamMotionContext } from './streaming.js';
@@ -181,7 +182,7 @@ const AssistantNode = memo(function AssistantNode({ useChat, nodeKey, boundary,
             // of its own; passing it would fork the whole session instead.
             const anchor = forkAnchorSeq([data.finalNode, { seq: render.forkSeq }]);
             return render.forkAt && anchor !== undefined ? () => render.forkAt!(anchor) : undefined;
-          })()} metrics={render.metrics} />
+          })()} metrics={render.metrics} extraActions={<OfficialActions official={render.official} messageId={data.finalNode?.messageId} />} />
         )}
       </article>
     </RetiringContent>;
@@ -226,6 +227,7 @@ const MainNode = memo(function MainNode({ useChat, nodeKey, boundary, pinned, pr
   if (isNode(node, 'turn-max-tokens')) return <div className={css.notice}>已到达输出长度限制，回答尚未完整。</div>;
   if (isNode(node, 'model-retry')) return node.data.current.retryState === 'scheduled'
     ? <div className={css.notice} role="status">模型请求未成功，正在等待重试。详情保留在执行过程中。</div> : null;
+  if (isNode(node, 'command') && render.official) return <OfficialNode {...render} node={node} fallback={<JsonBlock label="命令记录" payload={node.data} truncatedLabel={truncatedJsonLabel} />} />;
   if (isNode(node, 'command')) {
     if (node.data.outcome?.kind === 'error') return <div className={css.error} role="alert">
       <svg className={css.errorIcon} viewBox="0 0 16 16" fill="none" stroke="currentColor">
@@ -245,10 +247,11 @@ const MainNode = memo(function MainNode({ useChat, nodeKey, boundary, pinned, pr
   // host (it appears nowhere in the installed packages), so a slash command arrives
   // as 'command' above and is rendered there. Keeping the branch only made the file
   // look like it handled a case that cannot occur.
-  return <div className={css.unknown} data-reader-anchor>
+  return <OfficialNode {...render} node={node} fallback={<div className={css.unknown} data-reader-anchor>
     <p>此记录类型暂未接入阅读页：{node.kind}</p>
+    {render.official && <button type="button" className={css.textButton} onClick={() => render.official!.openView('chat', node.key)}>在对话中查看</button>}
     <JsonBlock label="查看原始记录" payload={node.data} truncatedLabel={truncatedJsonLabel} />
-  </div>;
+  </div>} />;
 });
 
 /**
@@ -269,8 +272,7 @@ function subagentCount(snapshot: { nodes: { get(key: string): ChatConversationVi
   return 0;
 }
 
-function GroupStatus({ group, sessionId, useChat, useSessionPendingInteraction, motion }: Pick<ReaderProps, 'sessionId' | 'useChat' | 'useSessionPendingInteraction'> & { group: ReaderGroup; motion: boolean }) {
-  const pending = useSessionPendingInteraction(snapshot => snapshot.get(sessionId));
+function GroupStatus({ group, sessionId, useChat, pending, motion }: Pick<ReaderProps, 'sessionId' | 'useChat'> & { group: ReaderGroup; motion: boolean; pending: { kind?: string } | undefined }) {
   const text = useChat(snapshot => {
     const turn = group.turn === null ? undefined : snapshot.timeline.turns.get(group.turn);
     if (turn?.status === 'closed') {
@@ -474,7 +476,7 @@ const TurnGroup = memo(function TurnGroup({ group, motion, autoFold, pinnedKeys,
   const snapshot = props.useChat(snapshot => snapshot);
   const nodes = snapshot.nodes;
   const turn = group.turn === null ? undefined : snapshot.timeline.turns.get(group.turn);
-  const interaction = props.useSessionPendingInteraction(snapshot => snapshot.get(props.sessionId));
+  const interaction = props.useSessionStatus(snapshot => snapshot.get(props.sessionId)?.pendingInteraction);
   const sessionRunning = props.useSession(snapshot => snapshot.running);
   const boundary = useMemo(() => boundaryOf(turn), [turn]);
   const choiceKey = processChoiceKey(group.key, boundary);
@@ -504,11 +506,11 @@ const TurnGroup = memo(function TurnGroup({ group, motion, autoFold, pinnedKeys,
       : item.key === key || ('nodeKey' in item.step && item.step.nodeKey === key)));
   const expanded = !autoFold || holdingSelection || processExpanded(expansionChoice, boundary);
   const [foldOpenByKey, setFoldOpenByKey] = useState<Record<string, boolean>>({});
+  useLayoutEffect(() => {
+    // Restoring automatic folding also releases live "prior steps" disclosures.
+    if (autoFold) setFoldOpenByKey(current => Object.keys(current).length ? {} : current);
+  }, [autoFold]);
   const deliverables = useMemo(() => getTurnDeliverables(turn, flow), [turn, flow]);
-  const fileMentions = useMemo(
-    () => deliverables.length > 0 && props.openFile ? createProducedFileMentions(deliverables, props.openFile) : undefined,
-    [deliverables, props.openFile],
-  );
   const tailData = useMemo(() => {
     for (const key of group.keys) {
       const n = nodes.get(key);
@@ -516,12 +518,27 @@ const TurnGroup = memo(function TurnGroup({ group, motion, autoFold, pinnedKeys,
     }
     return undefined;
   }, [group.keys, nodes]);
+  const tailOwner = useMemo(() => turn && tailData ? {
+    turn, seq: tailData.closing?.finalNode.seq ?? tailData.seq, openFile: props.openFile,
+  } : undefined, [turn, tailData, props.openFile]);
+  const fileMentions = useMemo(() => {
+    const official = tailOwner ? props.officialFileMentions(tailOwner) : undefined;
+    const reader = deliverables.length > 0 ? createProducedFileMentions(deliverables, props.openFile) : undefined;
+    return official || reader ? { resolve: (value: string) => official?.resolve(value) ?? reader?.resolve(value) } : undefined;
+  }, [tailOwner, props.officialFileMentions, deliverables, props.openFile]);
+  const official = useMemo(() => ({
+    renderSlot: props.renderSlot, renderSlotChain: props.renderSlotChain,
+    officialImageLoader: props.officialImageLoader, officialFileMentions: props.officialFileMentions,
+    officialPreviewFile: props.officialPreviewFile,
+    officialHost: props.officialHost, openView: props.openView,
+  }), [props.renderSlot, props.renderSlotChain, props.officialImageLoader, props.officialFileMentions, props.officialPreviewFile, props.officialHost, props.openView]);
+  const cwd = props.useSessions(state => state.byId[props.sessionId]?.cwd);
   const runMs = turn?.start && turn?.end ? Math.max(0, turn.end.time - turn.start.time) : undefined;
   const metrics = useMemo(() => ({
     usage: tailData?.tokenUsage,
     runMs,
-    tokensPerSecond: tailData?.tokensPerSecond,
-    ttftMs: tailData?.ttftMs,
+    tokensPerSecond: (tailData as { tokensPerSecond?: number } | undefined)?.tokensPerSecond,
+    ttftMs: (tailData as { ttftMs?: number } | undefined)?.ttftMs,
     endedAt: tailData?.closing?.time ?? turn?.end?.time,
   }), [tailData, runMs, turn?.end?.time]);
   const forkSeq = forkAnchorSeq([tailData?.closing?.finalNode]);
@@ -545,7 +562,8 @@ const TurnGroup = memo(function TurnGroup({ group, motion, autoFold, pinnedKeys,
     forkSeq,
     fileMentions,
     metrics,
-    getToolView: props.getToolView,
+    official,
+    cwd,
   };
   const terminal = terminalLabel(boundary.reason);
   const hasTurnError = flow.some(item => item.kind === 'node' && nodes.get(item.nodeKey)?.kind === 'turn-error');
@@ -575,7 +593,7 @@ const TurnGroup = memo(function TurnGroup({ group, motion, autoFold, pinnedKeys,
     {startsWithUser && <BlockBoundary><MainNode {...shared} useChat={props.useChat} boundary={boundary} nodeKey={group.keys[0]} /></BlockBoundary>}
     {hasProcess && !isAwaitingModel && <StickyLane kind="status" className={css.turnProcessSticky}>
       <Disclosure open={expanded} onChange={setExpanded} controls={flowId} buttonRef={processButton}
-        label={<GroupStatus group={group} sessionId={props.sessionId} useChat={props.useChat} useSessionPendingInteraction={props.useSessionPendingInteraction} motion={motion} />} />
+        label={<GroupStatus group={group} sessionId={props.sessionId} useChat={props.useChat} pending={interaction} motion={motion} />} />
     </StickyLane>}
     {boundary.status === 'closed' && hasProcess && autoFold && <ClosedProcessSummary open={expanded} onChange={setExpanded} controls={flowId}
       steps={steps.filter(step => {
@@ -591,9 +609,10 @@ const TurnGroup = memo(function TurnGroup({ group, motion, autoFold, pinnedKeys,
       onOpenChange={(key, value) => { pinProcess(); setFoldOpenByKey(current => ({ ...current, [key]: value })); }} renderStep={renderStep} />
     {/* 状态指示永远排在流程之后：AI 的响应永远出现在最新消息（含补充消息）的下方 */}
     {!hasProcess && boundary.status === 'open' && !isAwaitingModel && <div className={css.disclosure} data-reader-status-only>
-      <GroupStatus group={group} sessionId={props.sessionId} useChat={props.useChat} useSessionPendingInteraction={props.useSessionPendingInteraction} motion={motion} />
+      <GroupStatus group={group} sessionId={props.sessionId} useChat={props.useChat} pending={interaction} motion={motion} />
     </div>}
     {showDeliverablesRow(boundary.status, deliverables) && <DeliverablesRow deliverables={deliverables} openFile={props.openFile} revealFile={props.revealFile} openMode={openMode} />}
+    {boundary.status === 'closed' && <BlockBoundary><OfficialTail official={official} owner={tailOwner} produced={deliverables} /></BlockBoundary>}
     {showTerminalNotice && <div className={css.notice} data-reader-terminal>{terminal}</div>}
   </section>;
 });
@@ -605,7 +624,7 @@ export function Reader(props: ReaderProps) {
   const nodes = props.useChat(snapshot => snapshot.nodes);
   const timeline = props.useChat(snapshot => snapshot.timeline);
   const running = props.useSession(snapshot => snapshot.running);
-  const pending = props.useSessionPendingInteraction(snapshot => snapshot.get(props.sessionId));
+  const pending = props.useSessionStatus(snapshot => snapshot.get(props.sessionId)?.pendingInteraction);
   const openError = props.useSession(snapshot => snapshot.openError);
   const loading = props.useSession(snapshot => snapshot.openState === 'loading');
   const hasMore = props.useSession(snapshot => snapshot.hasMore);
@@ -622,6 +641,14 @@ export function Reader(props: ReaderProps) {
   );
   const storeAutoFold = props.useStore(state => state.autoFold);
   const autoFold = prefsSnap?.autoFold ?? (prefsSnap?.foldIntensity !== undefined ? prefsSnap.foldIntensity !== 0 : undefined) ?? storeAutoFold ?? true;
+  const previousAutoFold = useRef(autoFold);
+  useLayoutEffect(() => {
+    const restored = autoFold && !previousAutoFold.current;
+    previousAutoFold.current = autoFold;
+    // Watch the effective preference so toolbar and Settings changes behave alike.
+    // Reading while folding is off must not pin completed process content forever.
+    if (restored) props.actions.resetExpanded();
+  }, [autoFold, props.actions]);
   const frostedGlass = frostedGlassOf(prefsSnap);
   const streamMotion = useMemo(() => ({ enabled: motion, activatedAt: activatedAt.current }), [motion]);
   const groups = useMemo(() => groupNodes(order, key => nodes.get(key)), [order, nodes, timeline]);
@@ -788,7 +815,7 @@ export function Reader(props: ReaderProps) {
 
   // ChatView publishes data-chat-flow="" on its column. Skins treat a
   // scrollport without that hook as inspect-only and hide [data-composer-seat].
-  return <StreamMotionContext.Provider value={streamMotion}><div ref={root} className={css.root} data-dsh-better-display="0.2.1" data-reader-wait-clock-version="input-v1" data-reader-wait-start={waitAnchor.time ?? undefined} data-motion={motion ? 'on' : 'off'} data-reader-glass={frostedGlass || undefined} data-reader-auto-fold={autoFold ? 'on' : 'off'}>
+  return <StreamMotionContext.Provider value={streamMotion}><div ref={root} className={css.root} data-reader-build="0.3.1" data-dsh-better-display="0.3.1" data-reader-wait-clock-version="input-v1" data-reader-wait-start={waitAnchor.time ?? undefined} data-motion={motion ? 'on' : 'off'} data-reader-glass={frostedGlass || undefined} data-reader-auto-fold={autoFold ? 'on' : 'off'}>
     <TimelineRail items={timelineItems} activeTurn={activeTurn} busyTurn={busyTurn} onNavigate={onNavigateTurn} />
     <div className={css.column} data-chat-flow="">
       <StickyLane kind="toolbar" className={css.toolbar}>

package/src/client/ToolActivity.tsx

@@ -2,8 +2,9 @@ import { memo, useEffect, useId, useMemo, useRef, useState } from 'react';
 import type { ToolCallBlock, ToolResultNode } from '@deepseek-ai/dsh-client-ui-conversation/client';
 import type { DiffHunk, ReadBlockLine, SearchFileGroup } from '@deepseek-ai/dsh-client-ui-primitives';
 import { DiffBlock, DisclosureRow, JsonTree, ReadBlock, SearchBlock, TerminalBlock, WebBlock,
-  IconApiOutline14, IconBrowseOutline16, IconEditOutline16, IconSearchOutline16, IconSkillOutline16, IconSparkle16 } from '@deepseek-ai/dsh-client-ui-primitives';
+  IconApiOutlineRegular, IconBrowseOutlineRegular, IconEditOutlineRegular, IconSearchOutlineRegular, IconSkillOutlineRegular, IconSparkleRegular } from '@deepseek-ai/dsh-client-ui-primitives';
 import { Blocks, contentBlocks } from './Blocks.js';
+import { OfficialTool } from './OfficialContent.js';
 import { ProcessFragment } from './motion.js';
 import { activityPhase, activitySummary, callDiffHunks, diffTotals, executionFacts, objectValue, toolIdentity } from './tool-activity.js';
 import type { ToolActivityEntry, ToolCategory, ToolPhase } from './tool-activity.js';
@@ -14,7 +15,7 @@ import { diffBlockLabels, jsonTreeLabels, readBlockLabels, searchBlockLabels, te
 import css from './Reader.module.css';
 
 const LABEL: Record<ToolPhase, string> = { preparing: '输入生成中', running: '执行中', returned: '已返回', succeeded: '已完成', failed: '失败', interrupted: '已中断' };
-const ICONS = { write: IconEditOutline16, read: IconBrowseOutline16, terminal: IconApiOutline14, search: IconSearchOutline16, web: IconSearchOutline16, other: IconSparkle16 } satisfies Record<ToolCategory, unknown>;
+const ICONS = { write: IconEditOutlineRegular, read: IconBrowseOutlineRegular, terminal: IconApiOutlineRegular, search: IconSearchOutlineRegular, web: IconSearchOutlineRegular, code: IconApiOutlineRegular, other: IconSparkleRegular } satisfies Record<ToolCategory, unknown>;
 const number = new Intl.NumberFormat('zh-CN');
 const language = (path: string | undefined) => path?.split('.').at(-1);
 const duration = (ms: number) => ms < 1000 ? `${Math.round(ms)} 毫秒` : `${(ms / 1000).toFixed(ms < 10000 ? 1 : 0)} 秒`;
@@ -80,28 +81,14 @@ function searchFiles(value: unknown): SearchFileGroup[] | null {
   return files;
 }
 
-function CustomToolWrapper({ Component, block, toolName, cwd, openFile }: {
-  Component: any;
-  block: any;
-  toolName: string;
-  cwd?: string;
-  openFile?: (path: string) => Promise<void> | void;
-}) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  useEffect(() => {
-    // If the component renders a collapsed disclosure row (like DiffCard with role="button" and aria-expanded="false"),
-    // expand it automatically once so details are immediately visible inside ResultView.
-    const row = containerRef.current?.querySelector<HTMLElement>('[role="button"][aria-expanded="false"]');
-    if (row) row.click();
-  }, []);
-  return (
-    <div ref={containerRef} data-reader-tool-custom>
-      <Component block={block} toolName={toolName} cwd={cwd} openFile={openFile} />
-    </div>
-  );
+function ResultView(props: BlockRenderProps & { entry: ToolActivityEntry; model: ReturnType<typeof activitySummary>; phase: ToolPhase }) {
+  const { official, entry, model } = props;
+  const fallback = <ResultFallback {...props} />;
+  if (!official || !entry.block || model.name === 'render_ui' || model.name === 'show_widget') return fallback;
+  return <OfficialTool {...props} official={official} block={entry.block} toolName={model.name} cwd={props.cwd ?? model.cwd} fallback={fallback} />;
 }
 
-function ResultView({ entry, model, phase, ...render }: BlockRenderProps & { entry: ToolActivityEntry; model: ReturnType<typeof activitySummary>; phase: ToolPhase }) {
+function ResultFallback({ entry, model, phase, ...render }: BlockRenderProps & { entry: ToolActivityEntry; model: ReturnType<typeof activitySummary>; phase: ToolPhase }) {
   if ((model.name === 'render_ui' || model.name === 'show_widget') && typeof model.args?.html === 'string') {
     return <McpAppFrame html={model.args.html as string} title={typeof model.args.title === 'string' ? (model.args.title as string) : undefined} fillComposer={render.fillComposer} />;
   }
@@ -114,11 +101,6 @@ function ResultView({ entry, model, phase, ...render }: BlockRenderProps & { ent
   const text = block.content.filter(item => item.type === 'text').map(item => item.text).join('\n');
   if (phase === 'interrupted') return <><p className={css.toolDetailNote}>工具已取消，未正常完成。输入和原始返回记录仍可查看。</p><InputView model={model} preparing={false} fillComposer={render.fillComposer} /><pre className={css.toolRaw}>{text}</pre></>;
 
-  const CustomToolView = render.getToolView?.(model.name);
-  if (CustomToolView) {
-    return <CustomToolWrapper Component={CustomToolView} block={block} toolName={model.name} cwd={model.cwd} openFile={render.openFile} />;
-  }
-
   if (model.category === 'terminal') {
     const facts = executionFacts(block);
     const output = text.replace(/\n\[(?:exit code: \d+|killed by signal: [^\]\n]+)\]$/, '');
@@ -154,6 +136,19 @@ function ResultView({ entry, model, phase, ...render }: BlockRenderProps & { ent
     {generatedInput(model.content, model.target, false)}
   </>;
   const content: ToolResultNode['content'] = block.content;
+  // A code interpreter's product is its result, not prose. Without this branch
+  // the output fell through to the generic document path below, which emits it
+  // as reader answer text — so a run_code card sat in the transcript outside
+  // every fold, the exact block the reader wanted to be able to close.
+  if (model.category === 'code') {
+    const output = content.filter(item => item.type === 'text').map(item => item.text).join('\n');
+    const facts = executionFacts(block);
+    if (output.trim()) return <div data-reader-tool-code>
+      <TerminalBlock command={model.command ?? model.name} cwd={model.cwd} output={output}
+        exitCode={facts.exitCode} signal={facts.signal} maxLines={18} labels={terminalBlockLabels} />
+    </div>;
+    return <p className={css.toolDetailNote}>代码已执行，没有可展示的输出。</p>;
+  }
   if (content.some(item => item.type === 'text')) return <div className={css.toolDocument}><Blocks {...render} blocks={contentBlocks(content).filter(item => item.kind === 'text')} source="tool" /></div>;
   if (content.length) return <p className={css.toolDetailNote}>图片或扩展内容已在对话中单独展示。</p>;
   return <p className={css.toolDetailNote}>工具没有返回可展示的内容。</p>;
@@ -184,7 +179,7 @@ export const ToolActivity = memo(function ToolActivityView({ entry, motion, turn
     return () => document.removeEventListener('selectionchange', track);
   }, []);
   const facts = executionFacts(entry.block);
-  const Icon = model.name === 'skill' ? IconSkillOutline16 : ICONS[model.category];
+  const Icon = model.name === 'skill' ? IconSkillOutlineRegular : ICONS[model.category];
   const block = entry.block;
   const native = block ? toolRowModel(model.name, block) : null;
   const skillName = typeof model.args?.name === 'string' ? model.args.name.split('\n')[0] : model.raw.split('\n')[0];
@@ -265,7 +260,7 @@ export const ToolActivity = memo(function ToolActivityView({ entry, motion, turn
   && previous.entry.draft === next.entry.draft && previous.entry.step === next.entry.step
   && previous.motion === next.motion && previous.turnClosed === next.turnClosed && previous.depth === next.depth
   && previous.onRead === next.onRead && previous.renderSlotChain === next.renderSlotChain && previous.loadImage === next.loadImage && previous.fillComposer === next.fillComposer
-  && previous.getToolView === next.getToolView);
+  && previous.official === next.official && previous.cwd === next.cwd && previous.openFile === next.openFile);
 
 /** Rich media (images, MCP widgets) rendered outside the folded tool ledger. */
 export function ToolMedia({ block, depth = 0, ...render }: BlockRenderProps & { block: ToolCallBlock; depth?: number }) {

package/src/client/index.tsx

@@ -13,6 +13,8 @@ import { installBetterDisplaySettings } from './settings.js';
 import { fillComposerDom } from './mcp-app.js';
 import { fileAddressFor, modeFromSnapshot, openDeliverableFile } from './open-file.js';
 import type { ReaderInjected } from './types.js';
+import type { ImageAttachmentRef } from '@deepseek-ai/dsh-attachment';
+import { installOfficialSlots, officialChildren, type CompositionRegistry } from './official-slots.js';
 
 /** Structural face of the sanctioned per-session composer writer. */
 interface ComposerShell {
@@ -51,7 +53,7 @@ async function openWorkspacePath(
 export type { ReaderBlockOwner } from './types.js';
 export { McpAppFrame } from './McpAppFrame.js';
 export const name = 'dsh-better-display-client';
-export const inject = ['slots', 'sessions', 'conversation', 'remote', 'remote.session'];
+export const inject = ['slots', 'sessions', 'conversation', 'uiConversation', 'remote', 'remote.session'];
 
 export function apply(ctx: Context): void {
   const store = createReaderStore();
@@ -60,14 +62,17 @@ export function apply(ctx: Context): void {
   // intensity, and open-mode on the unsuffixed `dsh.reader.v1` key.
   const prefs = store.create();
   installBetterDisplaySettings(ctx, prefs);
-  ctx.slots.inject('conversation.view', function* () {
+  ctx.slots.inject('conversation.chat.node', function* () {
     yield ctx.slots.register({
     name: 'conversation.view',
     id: 'reader',
     order: -5,
     label: () => '阅读',
     locale: 'chat',
-    children: { 'dsh-better-display.block': { kind: 'chain', scope: 'session' } },
+    children: {
+      'dsh-better-display.block': { kind: 'chain', scope: 'session' },
+      ...officialChildren(ctx.slots as unknown as CompositionRegistry),
+    },
     store,
     inject: (sessionId: SessionId): ReaderInjected => {
       const session = () => {
@@ -77,13 +82,28 @@ export function apply(ctx: Context): void {
       };
       return {
         openPrefs: prefs,
+        officialImageLoader: Object.assign(
+          (attachment: ImageAttachmentRef) => ctx.uiConversation.imageUrl(sessionId, attachment),
+          { peek: (attachment: ImageAttachmentRef) => ctx.uiConversation.peekImageUrl(sessionId, attachment) },
+        ),
+        officialFileMentions: owner => ctx.get('chatFileMentions')?.forClosing(owner, sessionId),
+        officialPreviewFile: path => {
+          const cwd = ctx.sessions.list.getSnapshot().byId[sessionId]?.cwd;
+          const sidebar = ctx.get('sidebarRight') as SidebarRightFace | undefined;
+          if (!sidebar?.openResource) throw new Error('文件预览面板不可用。');
+          sidebar.openResource((officialFileAddressFor ?? fileAddressFor)(sessionId, cwd, path));
+        },
+        officialHost: {
+          getSnapshot: () => ctx.remote.$host,
+          subscribe: listener => ctx.on('connection/reset', listener),
+        },
         loadOlder: async () => { await session().loadOlder(); },
         loadImage: async attachment => {
           const receipt = await session().readAttachment(attachment.attachmentId);
           if (!receipt.ok) throw new Error(receipt.error.message);
           return { data: Uint8Array.from(receipt.value.data), mediaType: receipt.value.attachment.mediaType };
         },
-        openFile: async (path: string) => {
+        openFile: async (path, options) => {
           try {
             const cwd = ctx.sessions?.list?.getSnapshot?.()?.byId[sessionId]?.cwd;
             const sidebar = (
@@ -98,7 +118,7 @@ export function apply(ctx: Context): void {
               resolveWorkspacePath,
               openExternal: async (absolutePath) => { await openWorkspacePath(ctx, absolutePath); },
               openSidebar: typeof sidebar?.openResource === 'function'
-                ? (address) => { sidebar.openResource!(address); }
+                ? (address) => { sidebar.openResource!(address, options?.line === undefined ? undefined : { params: { line: options.line } }); }
                 : undefined,
               fileAddressFor: officialFileAddressFor ?? fileAddressFor,
               warn: (message, extra) => { console.warn(message, extra); },
@@ -190,35 +210,11 @@ export function apply(ctx: Context): void {
             return false;
           }
         },
-        getToolView: (toolName: string) => {
-          try {
-            const slotsService = ctx.slots as unknown as { entriesOfSlot?: (name: string) => unknown[] };
-            const entries = slotsService?.entriesOfSlot?.('tool.call.toolview') ?? [];
-            const matches = entries.filter((e: any) => {
-              const key = e?.options?.key ?? e?.key;
-              const comp = e?.component ?? e?.view ?? e?.render ?? (typeof e === 'function' ? e : null);
-              return key === toolName && typeof comp === 'function';
-            });
-            if (matches.length === 0) return null;
-            matches.sort((a: any, b: any) => {
-              const prioA = a?.options?.priority ?? a?.priority ?? 0;
-              const prioB = b?.options?.priority ?? b?.priority ?? 0;
-              return prioA - prioB;
-            });
-            const best = matches[0] as any;
-            const prio = best?.options?.priority ?? best?.priority ?? 0;
-            const comp = best?.component ?? best?.view ?? best?.render ?? (typeof best === 'function' ? best : null);
-            if (prio < 0 || (toolName !== 'edit' && toolName !== 'write')) {
-              return comp;
-            }
-            return null;
-          } catch {
-            return null;
-          }
-        },
+
       };
     },
     }, Reader);
+    yield installOfficialSlots(ctx);
     yield installReaderEntry(ctx);
   });
 }

package/src/client/markdown/MarkdownText.tsx

@@ -14,6 +14,7 @@
 
 import { memo, useMemo, useRef } from 'react'
 import type { ReactNode } from 'react'
+import type { MarkdownPathImages } from '@deepseek-ai/dsh-client-ui-primitives'
 import { IncrementalMarkdownParser } from './incremental.js'
 import { parseGfm, parseGfmWithMath } from './parse.js'
 import {
@@ -31,6 +32,7 @@ function renderSettled(
   text: string,
   codeLabels: MarkdownCodeLabels | undefined,
   fileMentions: MarkdownFileMentions | undefined,
+  pathImages: MarkdownPathImages | undefined,
   renderText: MarkdownRenderContext['renderText'],
   renderAtom: MarkdownRenderContext['renderAtom'],
 ): ReactNode[] {
@@ -43,6 +45,7 @@ function renderSettled(
     streaming: false,
     codeLabels,
     fileMentions,
+    pathImages,
     targets,
     footnoteOrder: [],
     footnoteCounts: new Map(),
@@ -73,7 +76,7 @@ class StreamingRenderer {
   private lastRendered: ReactNode[] = []
 
   /** @param codeLabels - Fence copy labels baked into cached elements; the owner replaces the renderer when they change. */
-  constructor(private readonly codeLabels: MarkdownCodeLabels | undefined, private readonly renderText: MarkdownRenderContext['renderText'], private readonly renderAtom: MarkdownRenderContext['renderAtom']) {}
+  constructor(private readonly codeLabels: MarkdownCodeLabels | undefined, private readonly renderText: MarkdownRenderContext['renderText'], private readonly renderAtom: MarkdownRenderContext['renderAtom'], private readonly pathImages: MarkdownPathImages | undefined) {}
 
   /**
    * Render the current accumulated text. Idempotent per text value, so React
@@ -109,6 +112,7 @@ class StreamingRenderer {
         streaming: true,
         codeLabels: this.codeLabels,
         fileMentions: undefined,
+        pathImages: this.pathImages,
         targets: frameTargets,
         footnoteOrder: this.frozenFootnoteOrder,
         footnoteCounts: this.frozenFootnoteCounts,
@@ -129,6 +133,7 @@ class StreamingRenderer {
       streaming: true,
       codeLabels: this.codeLabels,
       fileMentions: undefined,
+        pathImages: this.pathImages,
       targets: frameTargets,
       footnoteOrder: [...this.frozenFootnoteOrder],
       footnoteCounts: new Map(this.frozenFootnoteCounts),
@@ -162,26 +167,29 @@ class StreamingRenderer {
  * relative links, and unsafe protocols are disabled, while absolute HTTP(S)
  * images render directly.
  */
-export const MarkdownText = memo(function MarkdownText({ text, streaming = false, codeLabels, fileMentions, renderText, renderAtom }: {
+export const MarkdownText = memo(function MarkdownText({ text, streaming = false, codeLabels, fileMentions, pathImages, renderText, renderAtom }: {
   text: string
   streaming?: boolean
   codeLabels?: MarkdownCodeLabels | undefined
   fileMentions?: MarkdownFileMentions | undefined
+  pathImages?: MarkdownPathImages | undefined
   renderText?: MarkdownRenderContext['renderText']
   renderAtom?: MarkdownRenderContext['renderAtom']
 }) {
   const streamRef = useRef<StreamingRenderer | null>(null)
+  const streamImagesRef = useRef(pathImages)
   const streamLabelsRef = useRef<MarkdownCodeLabels | undefined>(codeLabels)
   const children = useMemo(() => {
     if (!streaming) {
       streamRef.current = null
-      return renderSettled(text, codeLabels, fileMentions, renderText, renderAtom)
+      return renderSettled(text, codeLabels, fileMentions, pathImages, renderText, renderAtom)
     }
-    if (streamRef.current === null || streamLabelsRef.current !== codeLabels) {
-      streamRef.current = new StreamingRenderer(codeLabels, renderText, renderAtom)
+    if (streamRef.current === null || streamLabelsRef.current !== codeLabels || streamImagesRef.current !== pathImages) {
+      streamRef.current = new StreamingRenderer(codeLabels, renderText, renderAtom, pathImages)
       streamLabelsRef.current = codeLabels
+      streamImagesRef.current = pathImages
     }
     return streamRef.current.render(text)
-  }, [text, streaming, codeLabels, fileMentions, renderText, renderAtom])
+  }, [text, streaming, codeLabels, fileMentions, pathImages, renderText, renderAtom])
   return <div className={css.markdown}>{children}</div>
 })

package/src/client/markdown/render.tsx

@@ -17,7 +17,7 @@
  * may add node types this renderer has no mapping for.
  */
 
-import { Fragment, createElement } from 'react'
+import { Fragment, createElement, useState } from 'react'
 import type { Key, ReactNode } from 'react'
 import clsx from 'clsx'
 import type * as Md from 'mdast'
@@ -27,6 +27,7 @@ import { CodeBlock } from '@deepseek-ai/dsh-client-ui-primitives'
 import { renderTexToReact } from './katex.js'
 import { McpAppCodeBlock, StreamingMcpAppPlaceholder } from '../McpAppFrame.js'
 import { isMcpAppCodeBlock, extractMcpAppTitle, extractMcpAppHeight } from '../mcp-app.js'
+import type { MarkdownPathImages } from '@deepseek-ai/dsh-client-ui-primitives'
 import type { PositionedBlock } from './incremental.js'
 import css from './MarkdownText.module.css'
 
@@ -136,6 +137,7 @@ export interface MarkdownRenderContext {
   readonly inBlockquote?: boolean
   /** Inline-code file mentions; absent wherever no opener vocabulary exists. */
   readonly fileMentions: MarkdownFileMentions | undefined
+  readonly pathImages?: MarkdownPathImages
   /** Inside an anchor's children: interactive mentions must not nest there. */
   readonly inLink?: boolean
   /** Reference targets visible to this pass. */
@@ -301,7 +303,7 @@ function renderNode(node: Md.RootContent, key: Key, context: MarkdownRenderConte
     case 'linkReference':
       return renderLinkReference(node, key, context)
     case 'image':
-      return renderImage(node.url, node.alt ?? '', key)
+      return renderImage(node.url, node.alt ?? '', key, context)
     case 'imageReference':
       return renderImageReference(node, key, context)
     case 'footnoteReference':
@@ -515,17 +517,31 @@ function inlineCodeHttpUrl(value: string): string | undefined {
   }
 }
 
-function renderImage(url: string, alt: string, key: Key): ReactNode {
-  const imageSrc = remoteImageUrl(sanitizeUrl(normalizeUri(url)))
+function renderImage(url: string, alt: string, key: Key, context: MarkdownRenderContext): ReactNode {
+  // RC2 semantics, including the revalidation of a trusted vocabulary result.
+  const remote = remoteImageUrl(sanitizeUrl(normalizeUri(url)))
+  const rewritten = remote === undefined ? context.pathImages?.resolve(url) : undefined
+  let imageSrc = remote
+  if (rewritten !== undefined) {
+    try {
+      if (['http:', 'https:', 'blob:', 'data:'].includes(new URL(rewritten).protocol)) imageSrc = rewritten
+    } catch { /* A vocabulary result must be an absolute URL. */ }
+  }
   if (imageSrc === undefined) {
     return <span key={key} className={css.imageAlt}>{alt}</span>
   }
+  return <MarkdownImage key={`${key}:${imageSrc}`} src={imageSrc} alt={alt} destination={url} />
+}
+
+function MarkdownImage({ src, alt, destination }: { src: string; alt: string; destination: string }): ReactNode {
+  const [failed, setFailed] = useState(false)
+  if (failed) return <span className={css.imageAlt}>{alt || destination}</span>
   return (
     <img
-      key={key}
       className={css.image}
-      src={imageSrc}
+      src={src}
       alt={alt}
+      onError={() => { setFailed(true) }}
       loading="lazy"
       decoding="async"
       referrerPolicy="no-referrer"
@@ -563,7 +579,7 @@ function renderImageReference(
 ): ReactNode {
   const definition = context.targets.definitions.get(node.identifier.toUpperCase())
   if (definition === undefined) return `![${node.alt ?? ''}${referenceSuffix(node)}`
-  return renderImage(definition.url, node.alt ?? '', key)
+  return renderImage(definition.url, node.alt ?? '', key, context)
 }
 
 function renderFootnoteReference(

package/src/client/motion.tsx

@@ -126,9 +126,6 @@ export function ProcessFragment({ open, motion, onRead, returnFocusTo, nodeKey,
       setPresent(open);
       return;
     }
-    if (from > target && motion) {
-      document.body.dataset.readerFolding = 'true';
-    }
     const animation = element.animate(
       from > target
         ? [
@@ -149,7 +146,6 @@ export function ProcessFragment({ open, motion, onRead, returnFocusTo, nodeKey,
       if (settled) return;
       settled = true;
       if (running.current === animation) running.current = null;
-      delete document.body.dataset.readerFolding;
       animation.cancel();
       setPresent(open);
     };
@@ -164,7 +160,6 @@ export function ProcessFragment({ open, motion, onRead, returnFocusTo, nodeKey,
     return () => {
       window.clearTimeout(deadline);
       running.current?.cancel();
-      delete document.body.dataset.readerFolding;
     };
   }, [open, motion, returnFocusTo]);
   if (!open && !present) return null;
@@ -299,16 +294,28 @@ export function useReadingScroll(root: RefObject<HTMLElement>, motion: boolean):
       if (followFrame !== 0 || layoutDepth > 0) return;
       // Our easing frames must not be mistaken for a user leaving the bottom.
       if (lastWrittenTop !== null && Math.abs(scroll.scrollTop - lastWrittenTop) < 1) return;
+      // Bind the follow intent to the position observed HERE. Every scroll that
+      // reaches this point is the viewport moving under someone else's hand: a
+      // wheel, a drag, a key, or the browser clamping the offset after a shrink.
+      //
+      // The previous form inferred detaching from a strictly upward delta against
+      // lastWrittenTop, which left two holes. That baseline is nulled by
+      // cancelFollow/onWheel/onTouch/onKey, and the guard above already returned
+      // for any scroll whose delta is under 1px — so a reader parked mid-transcript
+      // by a scrollbar drag stayed following === true AND pinned === true. The next
+      // content growth then took the re-attach branch and yanked the viewport to
+      // the bottom, discarding what they were reading. Reading the position
+      // directly needs no baseline: a fold's clamp lands at the very bottom and
+      // still keeps following, while any other offset detaches.
+      const bottom = atBottom();
+      pinned.current = bottom;
+      if (!bottom) { cancelAnimationFrame(followFrame); followFrame = 0; scheduleCapture(); }
       if (!following.current) {
         // Only an explicit return to the bottom resumes following.
-        if (atBottom()) { following.current = true; setDetached(false); }
+        if (bottom) { following.current = true; setDetached(false); }
         return;
       }
-      // Content growth and our own easing also change scrollTop; only a real
-      // upward move by the reader detaches the tail.
-      if (lastWrittenTop !== null && scroll.scrollTop < lastWrittenTop - 1) {
-        following.current = false; setDetached(true); pinned.current = false; cancelAnimationFrame(followFrame); followFrame = 0; scheduleCapture();
-      }
+      if (!bottom) { following.current = false; setDetached(true); }
     };
     const onWheel = (event: WheelEvent) => {
       cancelAnimationFrame(followFrame); followFrame = 0; lastWrittenTop = null;