dsh-better-display 0.3.8 → 0.3.9

package/src/client/AssistantNode.tsx

@@ -0,0 +1,72 @@
+import { Fragment, memo } from 'react';
+import type { RefObject } from 'react';
+import type { ChatConversationViewNode, ChatNode, ChatNodeKind } from '@deepseek-ai/dsh-client-ui-chat/client';
+import { Blocks, CopyAnswer } from './Blocks.js';
+import { ReasoningCard } from './ReasoningCard.js';
+import { OfficialActions, OfficialAssistantBody } from './OfficialContent.js';
+import { Disclosure, ProcessFragment } from './motion.js';
+import { FoldSummaryText } from './LiveFold.js';
+import { assistantSegments, forkAnchorSeq, hasVisibleBody, isEarlierNarration } from './projection.js';
+import type { TurnBoundary } from './projection.js';
+import type { BlockRenderProps, ReaderProps } from './types.js';
+import css from './Reader.module.css';
+
+function isNode<K extends ChatNodeKind>(node: ChatConversationViewNode, kind: K): node is ChatNode<K> {
+  return node.kind === kind;
+}
+
+type SeatProps = BlockRenderProps & Pick<ReaderProps, 'useChat' | 'sessionId'> & {
+  nodeKey: string; boundary: TurnBoundary; pinned?: boolean; processOpen?: boolean;
+};
+
+export const AssistantNode = memo(function AssistantNode({ useChat, nodeKey, boundary, processOpen = false, pinned = false, folded = false, partStart, seamSummary, seamAfter = false, motion, onRead, returnFocusTo, ...render }: SeatProps & {
+  motion: boolean; onRead: () => void; returnFocusTo: RefObject<HTMLButtonElement>; partStart?: number; folded?: boolean;
+  seamSummary?: string; seamAfter?: boolean;
+}) {
+  const node = useChat(snapshot => snapshot.nodes.get(nodeKey));
+  if (!node || node.visibility === 'hidden' || !isNode(node, 'assistant-step')) return null;
+  const data = node.data;
+  const parts = assistantSegments(data.blocks);
+  const earlier = isEarlierNarration(data, boundary);
+  const hasToolCalls = data.blocks.some(block => block.kind === 'tool-call');
+  const isProcessStep = earlier || folded || hasToolCalls || (boundary.latestStep > 0 && data.step < boundary.latestStep);
+  const body = data.blocks.filter(block => block.kind !== 'reasoning' && block.kind !== 'tool-call');
+  const visible = partStart === undefined ? parts : parts.filter(part => part.start === partStart);
+  const bodyProps = { streaming: data.status === 'running', holdFormatting: pinned, startedAt: data.time, interrupted: data.status === 'interrupted', liveText: true as const };
+  return <>{visible.map(part => {
+    const index = parts.findIndex(item => item.start === part.start);
+    const last = index === parts.length - 1;
+    if (part.kind === 'reasoning') return <ProcessFragment key={part.start} open={processOpen} motion={motion} onRead={onRead} returnFocusTo={returnFocusTo} nodeKey={nodeKey} framed>
+      <ReasoningCard step={data.step} active={processOpen && boundary.status === 'open' && data.step === boundary.latestStep} motion={motion} selected={pinned} onRead={onRead}>
+        <Blocks {...render} blocks={part.blocks} streaming={data.status === 'running' && last && data.blocks.at(-1)?.kind === 'reasoning'}
+          holdFormatting={pinned} startedAt={data.time} interrupted={data.status === 'interrupted'} liveText />
+      </ReasoningCard>
+    </ProcessFragment>;
+    if (!hasVisibleBody(part.blocks)) return null;
+    // Narration stays body prose and never enters a disclosure. The seam in
+    // the gap summarises folded process between two body blocks. A foreign
+    // assistant-step renderer receives these original blocks; Reader markdown,
+    // including the text transform, is only the fallback.
+    const isFinalAnswer = !isProcessStep;
+    return <Fragment key={part.start}>
+      {seamSummary && <div className={css.processSeamRow} data-reader-process-seam data-reader-process-seam-summary={seamSummary}>
+        <Disclosure open={false} onChange={() => onRead()} ariaLabel="被折叠的过程"
+          label={<FoldSummaryText summary={seamSummary} motion={false} />} />
+      </div>}
+      <article className={css.answer} data-reader-body data-reader-anchor data-reader-key={nodeKey} data-reader-source-start={part.start}
+        data-reader-seam-after={seamAfter || undefined} data-answer-status={data.status} data-answer-phase={isFinalAnswer ? 'body' : 'process'}>
+        <OfficialAssistantBody {...render} node={node} blocks={part.blocks} {...bodyProps} />
+        {isFinalAnswer && last && data.status === 'interrupted' && <span className={css.stopped}>已停止</span>}
+        {isFinalAnswer && last && data.status !== 'running' && boundary.status === 'closed' && (
+          <CopyAnswer blocks={body} onFork={(() => {
+            // The fork anchor must be the durable closing message seq (same as
+            // the official turn-tail branch). AssistantChatData carries no seq
+            // 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} extraActions={<OfficialActions official={render.official} messageId={data.finalNode?.messageId} />} />
+        )}
+      </article>
+    </Fragment>;
+  })}</>;
+});

package/src/client/Blocks.tsx

@@ -1,4 +1,4 @@
-import { Component, Fragment, memo, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { Component, Fragment, memo, useEffect, useId, useLayoutEffect, useRef, useState } from 'react';
 import type { ReactNode } from 'react';
 import type { ImageAttachmentRef } from '@deepseek-ai/dsh-attachment';
 import type { AssistantBlock, UserMessageNode } from '@deepseek-ai/dsh-client-ui-conversation/client';
@@ -9,6 +9,8 @@ import { markdownLabels, truncatedJsonLabel } from './primitive-labels.js';
 import type { BlockRenderProps, ReaderBlockOwner } from './types.js';
 import { useStreamingText } from './streaming.js';
 import { MotionMarkdown, MotionPlainText } from './word-motion.js';
+import { activeTextTransform, displayStreaming, originalAnswerText, readerBlockOwner, useDisplayText } from './text-transform.js';
+import type { TextTransformRegistry } from './text-transform.js';
 import css from './Reader.module.css';
 
 const IMAGE_TYPES = new Set(['image/png', 'image/jpeg', 'image/webp', 'image/gif']);
@@ -82,7 +84,16 @@ export function contentBlocks(content: UserMessageNode['content']): AssistantBlo
 
 type TextPresentation = { startedAt?: number; interrupted?: boolean; liveText?: boolean };
 
-function ReadingMarkdown({ text, streaming, holdFormatting, startedAt, interrupted = false, liveText = false, kind = 'body', fileMentions }: { text: string; streaming: boolean; holdFormatting: boolean; kind?: 'body' | 'reasoning'; fileMentions?: BlockRenderProps['fileMentions'] } & TextPresentation) {
+type MarkdownStreamProps = {
+  text: string;
+  streaming: boolean;
+  holdFormatting: boolean;
+  kind?: 'body' | 'reasoning';
+  fileMentions?: BlockRenderProps['fileMentions'];
+  transformed?: boolean;
+} & TextPresentation;
+
+function MarkdownStream({ text, streaming, holdFormatting, startedAt, interrupted = false, liveText = false, kind = 'body', fileMentions, transformed = false }: MarkdownStreamProps) {
   const root = useRef<HTMLDivElement>(null);
   const presentation = useStreamingText(text, streaming, { startedAt, interrupted: interrupted || !liveText, selected: holdFormatting });
   // Native Markdown changes block keys for its full final parse. Keep the last
@@ -92,24 +103,50 @@ function ReadingMarkdown({ text, streaming, holdFormatting, startedAt, interrupt
   const effectiveMode = holdFormatting ? committedMode.current : presentation.formatStreaming;
   useLayoutEffect(() => { committedMode.current = effectiveMode; }, [effectiveMode]);
   return <div ref={root} className={css.readingText} data-reader-text data-reader-text-kind={kind} data-received-length={text.length} data-shown-length={presentation.text.length}
-    data-presentation-pending={presentation.pending || undefined} data-motion-style="opacity-blur" data-ud-motion="reader-text-arrival" data-ud-motion-type="reveal" data-ud-motion-no-flash="true">
+    data-presentation-pending={presentation.pending || undefined} data-motion-style="opacity-blur" data-ud-motion="reader-text-arrival" data-ud-motion-type="reveal" data-ud-motion-no-flash="true"
+    data-text-transform={transformed ? (streaming ? 'live' : 'final') : undefined}>
     <MotionMarkdown text={presentation.text} streaming={effectiveMode} enabled={liveText && presentation.reveal && effectiveMode} revision={presentation.revision} fileMentions={fileMentions} />
   </div>;
 }
 
-function ReadingReasoning({ text, streaming, holdFormatting, startedAt, interrupted = false, liveText = false }: { text: string; streaming: boolean; holdFormatting: boolean } & TextPresentation) {
+function TransformedMarkdown({ registry, blockKey, source, text, streaming, ...props }: MarkdownStreamProps & { registry: TextTransformRegistry; blockKey: string; source: ReaderBlockOwner['source'] }) {
+  const shown = useDisplayText(registry, { text, streaming, blockKey, kind: 'body', source });
+  return <MarkdownStream {...props} text={shown.text} streaming={displayStreaming(streaming, shown, true)} transformed />;
+}
+
+function ReadingMarkdown({ blockKey, source, ...props }: MarkdownStreamProps & { blockKey: string; source: ReaderBlockOwner['source'] }) {
+  const registry = activeTextTransform();
+  if (registry?.has('body')) return <TransformedMarkdown registry={registry} blockKey={blockKey} source={source} {...props} />;
+  return <MarkdownStream {...props} />;
+}
+
+type ReasoningStreamProps = { text: string; streaming: boolean; holdFormatting: boolean; transformed?: boolean } & TextPresentation;
+
+function ReasoningStream({ text, streaming, holdFormatting, startedAt, interrupted = false, liveText = false, transformed = false }: ReasoningStreamProps) {
   const presentation = useStreamingText(text, streaming, { startedAt, interrupted: interrupted || !liveText, selected: holdFormatting });
   return <div className={css.readingText} data-reader-text data-reader-text-kind="reasoning" data-received-length={text.length} data-shown-length={presentation.text.length}
-    data-presentation-pending={presentation.pending || undefined} data-motion-style="opacity-blur" data-ud-motion="reader-text-arrival" data-ud-motion-type="reveal" data-ud-motion-no-flash="true">
+    data-presentation-pending={presentation.pending || undefined} data-motion-style="opacity-blur" data-ud-motion="reader-text-arrival" data-ud-motion-type="reveal" data-ud-motion-no-flash="true"
+    data-text-transform={transformed ? (streaming ? 'live' : 'final') : undefined}>
     <MotionPlainText text={presentation.text} enabled={liveText && presentation.reveal} revision={presentation.revision} />
   </div>;
 }
 
-function fallback(block: AssistantBlock, streaming: boolean, source: ReaderBlockOwner['source'], loadImage: BlockRenderProps['loadImage'], fillComposer: BlockRenderProps['fillComposer'], holdFormatting: boolean, presentation: TextPresentation, fileMentions?: BlockRenderProps['fileMentions']): ReactNode {
+function TransformedReasoning({ registry, blockKey, source, text, streaming, ...props }: ReasoningStreamProps & { registry: TextTransformRegistry; blockKey: string; source: ReaderBlockOwner['source'] }) {
+  const shown = useDisplayText(registry, { text, streaming, blockKey, kind: 'reasoning', source });
+  return <ReasoningStream {...props} text={shown.text} streaming={displayStreaming(streaming, shown, true)} transformed />;
+}
+
+function ReadingReasoning({ blockKey, source, ...props }: ReasoningStreamProps & { blockKey: string; source: ReaderBlockOwner['source'] }) {
+  const registry = activeTextTransform();
+  if (registry?.has('reasoning')) return <TransformedReasoning registry={registry} blockKey={blockKey} source={source} {...props} />;
+  return <ReasoningStream {...props} />;
+}
+
+function fallback(block: AssistantBlock, streaming: boolean, source: ReaderBlockOwner['source'], loadImage: BlockRenderProps['loadImage'], fillComposer: BlockRenderProps['fillComposer'], holdFormatting: boolean, presentation: TextPresentation, blockKey: string, fileMentions?: BlockRenderProps['fileMentions']): ReactNode {
   switch (block.kind) {
-    case 'text': return source === 'user' ? <MarkdownText text={block.text} labels={markdownLabels} /> : <ReadingMarkdown text={block.text} streaming={streaming} holdFormatting={holdFormatting} {...presentation} fileMentions={fileMentions} />;
+    case 'text': return source === 'user' ? <MarkdownText text={block.text} labels={markdownLabels} /> : <ReadingMarkdown text={block.text} streaming={streaming} holdFormatting={holdFormatting} {...presentation} fileMentions={fileMentions} blockKey={blockKey} source={source} />;
     case 'image': return <ImageBlock attachment={block.attachment} loadImage={loadImage} />;
-    case 'reasoning': return <ReadingReasoning text={block.text} streaming={streaming} holdFormatting={holdFormatting} {...presentation} />;
+    case 'reasoning': return <ReadingReasoning text={block.text} streaming={streaming} holdFormatting={holdFormatting} {...presentation} blockKey={blockKey} source={source} />;
     case 'tool-call': return <JsonBlock label={`工具参数 · ${block.name}`} payload={block.argsRaw} truncatedLabel={truncatedJsonLabel} />;
     case 'other': {
       const raw = block.block;
@@ -130,10 +167,11 @@ function fallback(block: AssistantBlock, streaming: boolean, source: ReaderBlock
 export const Blocks = memo(function Blocks({ blocks, streaming = false, source = 'assistant', holdFormatting = false, startedAt, interrupted, liveText, renderSlotChain, loadImage, fillComposer, fileMentions }: BlockRenderProps & TextPresentation & {
   blocks: readonly AssistantBlock[]; streaming?: boolean; source?: ReaderBlockOwner['source']; holdFormatting?: boolean;
 }) {
+  const reactId = useId();
   return <ComposerFillContext.Provider value={fillComposer}>
     <div className={css.blocks} data-streaming={streaming || undefined}>
       {blocks.map((block, index) => <BlockBoundary key={block.kind === 'image' ? `image:${block.attachment.attachmentId}:${index}` : `${index}:${block.kind}`}>
-        <Fragment>{renderSlotChain('dsh-better-display.block', { block, streaming, source }, { fallback: fallback(block, streaming, source, loadImage, fillComposer, holdFormatting, { startedAt, interrupted, liveText }, fileMentions) })}</Fragment>
+        <Fragment>{renderSlotChain('dsh-better-display.block', readerBlockOwner(block, streaming, source, { startedAt, interrupted, liveText }, holdFormatting), { fallback: fallback(block, streaming, source, loadImage, fillComposer, holdFormatting, { startedAt, interrupted, liveText }, `${reactId}:${index}:${block.kind}`, fileMentions) })}</Fragment>
       </BlockBoundary>)}
     </div>
   </ComposerFillContext.Provider>;
@@ -164,7 +202,8 @@ function MessageClock({ time }: { time: number }) {
 
 export function CopyAnswer({ blocks, onFork, metrics, extraActions }: { blocks: readonly AssistantBlock[]; onFork?: () => void; metrics?: BlockRenderProps['metrics']; extraActions?: ReactNode }) {
   const { receipt, copy } = useCopyReceipt();
-  const text = blocks.filter((block): block is Extract<AssistantBlock, { kind: 'text' }> => block.kind === 'text').map(block => block.text).join('\n\n');
+  // Session text. A display transformer does not write these blocks.
+  const text = originalAnswerText(blocks);
   const endedAt = metrics?.endedAt;
   const hasMetrics = metrics !== undefined && (metrics.usage !== undefined || metrics.runMs !== undefined || endedAt !== undefined);
   if (!text.trim() && !onFork && !hasMetrics) return null;

package/src/client/ChoreographedFlow.tsx

@@ -1,5 +1,5 @@
 import { createContext, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';
-import type { ReactNode, RefObject } from 'react';
+import type { ReactNode } from 'react';
 import type { ChatSnapshot } from '@deepseek-ai/dsh-client-ui-chat/client';
 import type { ReaderProps } from './types.js';
 import type { LiveStep, LiveTurnItem } from './live-turn.js';
@@ -10,6 +10,7 @@ import { FoldSummaryText } from './LiveFold.js';
 import { DiffStat } from './DiffPanel.js';
 import { StreamMotionContext } from './streaming.js';
 import css from './Reader.module.css';
+import { useSummaryLane } from './StickyLane.js';
 
 const FlowSnapshot = createContext<ChatSnapshot | null>(null);
 /** Public projection only. Descendants cannot leak live data through a frozen frame. */
@@ -44,6 +45,7 @@ function FlowCell({ hidden, instant, motion, rowKey, children, summary = false }
   hidden: boolean; instant: boolean; motion: boolean; rowKey: string; children: ReactNode; summary?: boolean;
 }) {
   const ref = useRef<HTMLDivElement>(null);
+  useSummaryLane(ref, summary);
   const [present, setPresent] = useState(!hidden);
   const previous = useRef(hidden);
   if (!hidden && !present) setPresent(true);

package/src/client/ClosedProcessSummary.tsx

@@ -4,6 +4,7 @@ import { Disclosure } from './motion.js';
 import { FoldSummaryText } from './LiveFold.js';
 import { foldSummary } from './live-turn.js';
 import { DiffStat } from './DiffPanel.js';
+import { usePublishedHeight } from './StickyLane.js';
 import type { LiveStep } from './live-turn.js';
 
 /** Keep process counts discoverable after the live-fold presentation retires. */
@@ -11,9 +12,10 @@ export function ClosedProcessSummary({ steps, open, onChange, controls }: {
   steps: readonly LiveStep[]; open: boolean; onChange: (value: boolean) => void; controls: string;
 }) {
   const button = useRef<HTMLButtonElement>(null);
+  const lane = usePublishedHeight('--reader-summary-height');
   if (!steps.length) return null;
   const summary = foldSummary(steps);
-  return <div className={css.closedProcessSummary} data-reader-closed-summary={summary}>
+  return <div ref={lane} className={css.closedProcessSummary} data-reader-closed-summary={summary}>
     <div className={css.summaryRow}>
       <Disclosure open={open} onChange={onChange} controls={controls} buttonRef={button} ariaLabel="本轮过程详情"
         label={<FoldSummaryText summary={summary} motion={false} />} />

package/src/client/McpAppFrame.tsx

@@ -44,7 +44,6 @@ export const McpAppFrame = memo(function McpAppFrame({
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const lastParamsRef = useRef<Record<string, unknown>>({});
   const [height, setHeight] = useState(() => Math.max(60, Math.min(2400, initialHeight)));
-  const [ready, setReady] = useState(false);
   const [receipt, setReceipt] = useState<string | null>(null);
   const [lastPrompt, setLastPrompt] = useState<string | null>(null);
   const [reloadNonce, setReloadNonce] = useState(0);
@@ -81,7 +80,7 @@ export const McpAppFrame = memo(function McpAppFrame({
 
   const handleUserSubmit = useCallback((params: Record<string, unknown>) => {
     lastParamsRef.current = params;
-    let summary = '';
+    let summary: string;
     if (typeof params.choice === 'string') {
       const desc = typeof params.desc === 'string' ? ` (${params.desc})` : '';
       summary = `选择: ${params.choice}${desc}`;
@@ -127,17 +126,13 @@ export const McpAppFrame = memo(function McpAppFrame({
           },
         };
         iframe.contentWindow?.postMessage(response, '*');
-        setReady(true);
         return;
       }
 
-      // 2. ui/ready or initialized notification
-      if (data.method === 'ui/ready' || data.method === 'ui/notifications/initialized') {
-        setReady(true);
-        return;
-      }
+      // ui/ready is a notification. The frame has no ready flag to flip.
+      if (data.method === 'ui/ready' || data.method === 'ui/notifications/initialized') return;
 
-      // 3. ui/resize
+      // ui/resize
       if (data.method === 'ui/resize' && data.params?.height) {
         const h = Number(data.params.height);
         if (Number.isFinite(h) && h > 0) {
@@ -146,7 +141,7 @@ export const McpAppFrame = memo(function McpAppFrame({
         return;
       }
 
-      // 4. ui/submit or ui/update-model-context
+      // ui/submit or ui/update-model-context
       if (data.method === 'ui/submit' || data.method === 'ui/update-model-context') {
         const params = (data.params as Record<string, unknown>) || {};
         handleUserSubmit(params);
@@ -209,13 +204,10 @@ export const McpAppFrame = memo(function McpAppFrame({
         },
       },
     }, '*');
-
-    setReady(true);
   }, []);
 
   const handleReload = useCallback(() => {
     setReloadNonce(n => n + 1);
-    setReady(false);
     setReceipt(null);
   }, []);
 

package/src/client/OfficialContent.tsx

@@ -1,12 +1,12 @@
 import { useCallback, useState, useSyncExternalStore, type ReactNode } from 'react';
-import type { ChatConversationViewNode, ChatNodeOwnerProps, TurnTailOwnerProps, UseDisclosure } from '@deepseek-ai/dsh-client-ui-chat/client';
+import type { AssistantActionOwnerProps, ChatConversationViewNode, ChatNode, ChatNodeOwnerProps, TurnTailOwnerProps, UseDisclosure } from '@deepseek-ai/dsh-client-ui-chat/client';
 import { createSnapshotStore } from '@deepseek-ai/dsh-client-store';
-import type { ToolCallBlock } from '@deepseek-ai/dsh-client-ui-conversation/client';
-import type { AssistantActionOwnerProps } from '@deepseek-ai/dsh-client-ui-chat/client';
+import type { AssistantBlock, ToolCallBlock } from '@deepseek-ai/dsh-client-ui-conversation/client';
 type MessageId = AssistantActionOwnerProps['messageId'];
 import { OFFICIAL_SEATS } from './official-slots.js';
 import type { BlockRenderProps } from './types.js';
 import { chatSeatProps } from './chat-seat.js';
+import { Blocks } from './Blocks.js';
 
 export function OfficialActions({ official, messageId }: Pick<BlockRenderProps, 'official'> & { messageId?: MessageId }) {
   if (!official || !messageId) return null;
@@ -38,11 +38,8 @@ export function OfficialTool({ official, block, toolName, cwd, openFile, fallbac
   </div>;
 }
 
-export function OfficialNode({ node, fallback, ...render }: BlockRenderProps & { node: ChatConversationViewNode; fallback: ReactNode }) {
-  const official = render.official;
-  const [disclosureReset] = useState(() => createSnapshotStore(0));
-  if (!official) return fallback;
-  const owner: ChatNodeOwnerProps = {
+function chatNodeOwner(render: BlockRenderProps, official: NonNullable<BlockRenderProps['official']>): ChatNodeOwnerProps {
+  return {
     cwd: render.cwd,
     openFile: render.openFile ?? (() => {}),
     openSkill: () => {},
@@ -54,14 +51,55 @@ export function OfficialNode({ node, fallback, ...render }: BlockRenderProps & {
     }),
     fileMentions: official.officialFileMentions,
   };
+}
+
+export function OfficialNode({ node, fallback, ...render }: BlockRenderProps & { node: ChatConversationViewNode; fallback: ReactNode }) {
+  const official = render.official;
+  const [disclosureReset] = useState(() => createSnapshotStore(0));
+  if (!official) return fallback;
   const turn = node.location.kind === 'turn' || node.location.kind === 'step' ? node.location.turn : undefined;
   // The runtime node domain is open; the public SlotMap enumerates the known kinds.
   const renderNode = official.renderSlot as unknown as (key: string, owner: object, options: object) => ReactNode;
   return <div data-reader-official-node={node.kind} {...(node.kind === 'user' || node.kind === 'steering' ? chatSeatProps(node.kind, node.key) : {})}>
-    {renderNode(OFFICIAL_SEATS.nodes, { ...owner, node }, { entryKey: node.kind, hookContext: { turnData: turn?.data, disclosureReset }, fallback })}
+    {renderNode(OFFICIAL_SEATS.nodes, { ...chatNodeOwner(render, official), node }, { entryKey: node.kind, hookContext: { turnData: turn?.data, disclosureReset }, fallback })}
   </div>;
 }
 
+type AssistantBodyProps = BlockRenderProps & {
+  node: ChatNode<'assistant-step'>;
+  blocks: readonly AssistantBlock[];
+  streaming?: boolean;
+  holdFormatting?: boolean;
+  startedAt?: number;
+  interrupted?: boolean;
+  liveText?: boolean;
+};
+
+/**
+ * Body of one assistant segment. A mirrored assistant-step replacement draws
+ * it; Reader markdown is the fallback when no replacement is registered.
+ * The caller keeps reasoning blocks on the reading card.
+ */
+export function OfficialAssistantBody({
+  node, blocks, streaming = false, holdFormatting = false, startedAt, interrupted = false, liveText = false, ...render
+}: AssistantBodyProps) {
+  const official = render.official;
+  const [disclosureReset] = useState(() => createSnapshotStore(0));
+  const fallback = <Blocks {...render} blocks={blocks} streaming={streaming} holdFormatting={holdFormatting} startedAt={startedAt} interrupted={interrupted} liveText={liveText} />;
+  if (!official) return fallback;
+  const turn = node.location.kind === 'turn' || node.location.kind === 'step' ? node.location.turn : undefined;
+  const sameBlocks = blocks.length === node.data.blocks.length && blocks.every((block, index) => block === node.data.blocks[index]);
+  const view = sameBlocks ? node : { ...node, data: { ...node.data, blocks } };
+  const renderNode = official.renderSlot as unknown as (key: string, owner: object, options: object) => ReactNode;
+  // groupPart matches the host split: response skips reasoning. The block
+  // slice is what a replacement that ignores groupPart actually receives.
+  return renderNode(OFFICIAL_SEATS.nodes, { ...chatNodeOwner(render, official), node: view, groupPart: 'response' }, {
+    entryKey: 'assistant-step',
+    hookContext: { turnData: turn?.data, disclosureReset },
+    fallback,
+  });
+}
+
 export function OfficialTail({ official, owner, produced }: Pick<BlockRenderProps, 'official'> & { owner?: TurnTailOwnerProps; produced: readonly string[] }) {
   const tailOwner = owner && official ? { ...owner, openFile: official.officialPreviewFile, readerProducedPaths: produced } : undefined;
   return official && tailOwner ? <div data-reader-official-tail style={{ display: 'contents' }}>

package/src/client/Reader.module.css

@@ -8,8 +8,20 @@
   flex: 0 0 auto;
   overflow-anchor: auto;
   container-type: inline-size;
+  /* 40px at the host's default 14px content size. A smaller content size
+     must not shrink the lane under that floor. Positive font delta still
+     grows it, or the next sticky band lands on the previous one. */
+  --reader-lane-block: max(40px, calc(40px + var(--dsh-content-font-delta, 0px)));
+  /* Wallpaper themes clear --dsw-alias-bg-base, or leave it only partly
+     opaque. The token and the inner surface paint above Canvas, the page
+     surface colour (it follows color-scheme). An opaque stock token covers
+     that underlay, so the stock theme does not change. */
+  --reader-lane-plate: linear-gradient(var(--dsw-alias-bg-base), var(--dsw-alias-bg-base)), linear-gradient(var(--dsw-alias-bg-layer-1, transparent), var(--dsw-alias-bg-layer-1, transparent));
 }
 .column { max-width: var(--dsh-chat-content-width, 748px); width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; min-width: 0; }
+/* The column is only a programmatic focus-restore target (tabIndex -1), never a
+   Tab stop, so it must not draw a ring around the whole transcript. */
+.column:focus, .column:focus-visible { outline: none; }
 .toolbar { position: sticky; top: 0; display: flex; justify-content: flex-end; align-items: center; gap: 6px; min-height: 32px; padding: 0; color: var(--dsw-alias-label-tertiary); font-size: 12px; background: var(--dsw-alias-bg-base); backdrop-filter: blur(12px); }
 /* 吸顶带第二车道：左「正在处理」+ 右「自动折叠」共享同一条 40px 水平基线。
    top / z-index 由下方 measured-flow 段统一定义：这一道永远钉在工具栏车道
@@ -24,12 +36,24 @@
 .turn { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
 /* Keep pinned process lanes inside the process/answer block, before turn-tail UI. */
 .turnStickyRegion { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
-.turnStickyLanes { position: sticky; top: max(var(--reader-toolbar-height, 40px), var(--reader-status-height, 40px)); z-index: 6; display: flex; flex-direction: column; min-width: 0; }
-.turn + .turn { margin-top: 12px; }
-.userCluster { display: flex; flex-direction: column; align-self: flex-end; align-items: flex-end; max-width: min(525px, 82%); gap: 8px; min-width: 0; margin-bottom: 4px; }
-.userImages { display: flex; flex-direction: column; align-items: flex-end; max-width: 100%; min-width: 0; }
+.turnStickyLanes { position: sticky; top: var(--reader-toolbar-height, var(--reader-lane-block, 40px)); z-index: 6; display: flex; flex-direction: column; min-width: 0; }
+/* Every turn renders through its own retiring lane, so the sibling rule has to
+   reach one level in: the margin still lands between two consecutive turns. */
+.turn + .turn, .retiringContent + .retiringContent > .turn { margin-top: 12px; }
+/* Host .userStack caps itself with min(axis * 0.702, 82%). In the native column
+   that percentage resolves against a .userRow stretched across the column. The
+   slot outlet is display:contents, so the host row is this cluster's flex item.
+   Naming the official slot here misses the mirrored seat
+   (dsh-better-display.official.nodes/…), the row shrink-wraps to the text, and
+   the same 82% is applied again. The cluster fills the column. The direct child
+   of its own slot — the host row, not a nested image slot — stretches with it.
+   The host .userStack is left alone. Pending bubbles are not that row, so they
+   carry the same cap themselves. */
+.userCluster { display: flex; flex-direction: column; align-self: stretch; align-items: flex-end; width: 100%; max-width: 100%; gap: 8px; min-width: 0; margin-bottom: 4px; }
+.userCluster > [data-slot] > * { align-self: stretch; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
+.userImages { display: flex; flex-direction: column; align-items: flex-end; align-self: flex-end; width: fit-content; max-width: 100%; min-width: 0; }
 .userImages .imageFigure { align-self: flex-end; }
-.user { align-self: flex-end; max-width: 100%; padding: 10px 16px; border-radius: 22px; background: var(--dsw-specific-bubble); color: var(--dsw-alias-label-primary); line-height: 24px; overflow-wrap: anywhere; box-sizing: border-box; }
+.user { align-self: flex-end; width: fit-content; max-width: min(calc(var(--dsh-chat-content-width, 748px) * 0.702), 82%); margin-left: auto; padding: 10px 16px; border-radius: var(--dsw-radius-xl, 22px); background: var(--dsw-specific-bubble); color: var(--dsw-alias-label-primary); font-size: var(--dsh-content-font-size, 14px); line-height: calc(22px + var(--dsh-content-font-delta, 0px)); font-weight: 400; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; box-sizing: border-box; }
 .user .blocks { gap: 10px; }
 .answer { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
 .readingText { min-width: 0; }
@@ -48,9 +72,9 @@
 .blocks > :last-child { margin-bottom: 0; }
 .blocks :global(.md-table-wide) { max-width: 100%; }
 .disclosure { min-width: 0; }
-.disclosureButton { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 32px; border: 0; background: transparent; border-radius: 7px; color: var(--dsw-alias-label-tertiary); font-size: 14px; line-height: 24px; font-weight: 400; padding: 4px 6px; margin-left: -6px; text-align: left; }
+.disclosureButton { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 32px; border: 0; background: transparent; border-radius: 7px; color: var(--dsw-alias-label-tertiary); font-size: calc(14px + var(--dsh-content-font-delta, 0px)); line-height: calc(24px + var(--dsh-content-font-delta, 0px)); font-weight: 400; padding: 4px 6px; margin-left: -6px; text-align: left; }
 .disclosure[data-reader-status-only] { display: flex; align-items: center; min-height: 32px; }
-.statusText { display: inline-flex; min-width: 0; max-width: 100%; font-size: 14px; line-height: 24px; font-weight: 400; color: var(--dsw-alias-label-secondary); }
+.statusText { display: inline-flex; min-width: 0; max-width: 100%; font-size: calc(14px + var(--dsh-content-font-delta, 0px)); line-height: calc(24px + var(--dsh-content-font-delta, 0px)); font-weight: 400; color: var(--dsw-alias-label-secondary); }
 .srOnly { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
 /* Transitions.dev — Thinking states, supplied by the user. Native DSH colors;
    the hidden sizer shares this font and the short phases share a left edge. */
@@ -109,7 +133,20 @@
    rail width, same gutter, so a column of nested rows reads as one line. */
 .processContents { display: flow-root; border-left: 1px solid var(--dsw-alias-border-l2); padding: 3px 0 2px var(--reader-gutter, 16px); margin: 0 0 0 var(--reader-rail, 6px); color: var(--dsw-alias-label-secondary); font-size: 14px; line-height: 24px; }
 .processContents > :last-child { margin-bottom: 0; }
-.processCommentary { color: var(--dsw-alias-label-secondary); font-size: 14px; line-height: 24px; margin: 4px 0 8px var(--reader-rail, 6px); padding-left: var(--reader-gutter, 16px); border-left: 1px solid var(--dsw-alias-border-l2); }
+/* Narration stays ordinary body text (the `.answer` typography) and carries no
+   left rule of its own. When collapsed reasoning/tool rows sat between two
+   narration blocks, the gap carries a compact folded-process summary in the
+   process-chain language: a 1px left rail plus the familiar `思考×N · 工具×K`
+   label with its chevron. The preceding narration cell drops its outer bottom
+   gap so the seam row owns exactly that space. */
+.processSeamRow {
+  display: flex; align-items: center; min-height: 40px;
+  margin-left: var(--reader-rail, 6px); padding-left: var(--reader-gutter, 16px);
+  border-left: 1px solid var(--dsw-alias-border-l2); box-sizing: border-box;
+}
+.processSeamRow > .disclosure { display: flex; align-items: center; min-height: 24px; }
+.processSeamRow .disclosureButton { min-height: 24px; padding-block: 2px; font-size: 12px; line-height: 20px; color: var(--dsw-alias-label-tertiary); }
+.flowCell:has(> .flowCellInner > [data-reader-seam-after]) > .flowCellInner { padding-bottom: 0; }
 .processFrame { min-width: 0; }
 .toolActivity { min-width: 0; color: var(--dsw-alias-label-secondary); }
 .nativeToolRow { min-width: 0; }
@@ -476,7 +513,7 @@
 .morphDrawer { overflow: hidden; height: 0; transform-origin: top center; will-change: height, opacity, transform; }
 .liveFoldImpact { animation: liveFoldElastic 180ms cubic-bezier(0.2, 0, 0, 1) both; }
 @keyframes liveFoldElastic { 0% { transform: scale(1); } 50% { transform: scale(1.015); } 100% { transform: scale(1); } }
-.liveFoldContainer { position: sticky; top: calc(max(var(--reader-toolbar-height, 40px), var(--reader-status-height, 40px)) + var(--reader-sticky-lane, 40px) * 2); z-index: 4; background: var(--dsw-alias-bg-base); backdrop-filter: blur(12px); padding: 4px 0; margin-bottom: 6px; animation: liveFoldPulse 320ms cubic-bezier(0.16, 1, 0.3, 1) both; transform-origin: left center; will-change: transform, opacity; }
+.liveFoldContainer { position: sticky; top: calc(var(--reader-toolbar-height, var(--reader-lane-block, 40px)) + var(--reader-status-height, var(--reader-lane-block, 40px)) + var(--reader-summary-height, var(--reader-lane-block, 40px))); z-index: 4; background: var(--dsw-alias-bg-base); backdrop-filter: blur(12px); padding: 4px 0; margin-bottom: 6px; animation: liveFoldPulse 320ms cubic-bezier(0.16, 1, 0.3, 1) both; transform-origin: left center; will-change: transform, opacity; }
 @keyframes liveFoldPulse { 0% { transform: translateY(-4px) scale(0.98); opacity: 0.8; } 50% { transform: translateY(0) scale(1.02); opacity: 1; } 100% { transform: translateY(0) scale(1); opacity: 1; } }
 [data-motion=off] .liveFoldContainer { animation: none !important; }
 @media (prefers-reduced-motion: reduce) { .liveFoldContainer { animation: none !important; } }
@@ -514,7 +551,7 @@
 [data-motion=off] .turnStatusLabel { animation: none !important; color: var(--dsw-static-deepseek-500, #4d6bfe) !important; -webkit-text-fill-color: var(--dsw-static-deepseek-500, #4d6bfe) !important; }
 @media (prefers-reduced-motion: reduce) { .turnStatusLabel { animation: none !important; color: var(--dsw-static-deepseek-500, #4d6bfe) !important; -webkit-text-fill-color: var(--dsw-static-deepseek-500, #4d6bfe) !important; } }
 @media (pointer: coarse) { .disclosureButton { min-height: 44px; } }
-@media (max-width: 600px) { .root { padding-inline: 20px; } .column { gap: 18px; } .toolbar { font-size: 11px; } .user { max-width: 90%; } }
+@media (max-width: 600px) { .root { padding-inline: 20px; } .column { gap: 18px; } .toolbar { font-size: 11px; } }
 
 /* Measured flow owns geometry; steps never change React parents when folded. */
 .choreographedFlow { display: flex; flex-direction: column; min-width: 0; overflow-anchor: none; }
@@ -535,7 +572,7 @@
    input card. Only the top toolbar lane may use 7: it pins to the scrollport's
    first lane and its containing block always ends above the seat, so it can
    never reach the band, and 7 keeps it above the host's code-block banners. */
-.toolbar { width: 100%; max-width: 100%; align-self: stretch; box-sizing: border-box; min-height: 40px; z-index: 7; border-bottom: 0; backdrop-filter: none; }
+.toolbar { width: 100%; max-width: 100%; align-self: stretch; box-sizing: border-box; min-height: var(--reader-lane-block, 40px); z-index: 7; border-bottom: 0; backdrop-filter: none; }
 /* Every sticky lane used to pin to the SAME top: the status row, the folded
    summary row and the live-fold container all sat at
    max(toolbar-height, status-height) with z-index 6. Three siblings competing
@@ -543,7 +580,7 @@
    内容被盖住、看不见" was: the disclosure opened, and the row that followed
    pinned straight on top of it. Give each lane its own band instead, stacked
    from the measured top: status first, then the summary, then the fold body. */
-.turnProcessSticky { box-sizing: border-box; width: calc(100% - var(--reader-control-width, 148px)); top: max(var(--reader-toolbar-height, 40px), var(--reader-status-height, 40px)); min-height: 40px; padding-right: 0; z-index: 6; border-bottom: 1px solid transparent; background-clip: padding-box; backdrop-filter: none; }
+.turnProcessSticky { box-sizing: border-box; width: calc(100% - var(--reader-control-width, 148px)); top: var(--reader-toolbar-height, var(--reader-lane-block, 40px)); min-height: var(--reader-lane-block, 40px); padding-right: 0; z-index: 6; border-bottom: 1px solid transparent; background-clip: padding-box; backdrop-filter: none; }
 /* A pinned lane's in-flow gap stays visible as an uncovered scrollport strip
    while the lane itself paints opaque. Cast each plate upward over its strip
    (the .turn 14px gap / the prior cell's 16px flowCellInner padding) so the
@@ -552,17 +589,17 @@
    toolbar's control group, which leaves the same kind of strip there; paint
    it too. The toolbar is z-index 7, above the lane's 6, so its buttons still
    render on top of the extension. */
-.turnProcessSticky { box-shadow: 0 -14px 0 var(--dsw-alias-bg-base), var(--reader-control-width, 148px) 0 0 var(--dsw-alias-bg-base); }
+.turnProcessSticky { box-shadow: 0 -14px 0 var(--dsw-alias-bg-base), var(--reader-control-width, 148px) 0 0 var(--dsw-alias-bg-base), 0 -14px 0 var(--dsw-alias-bg-layer-1, transparent), var(--reader-control-width, 148px) 0 0 var(--dsw-alias-bg-layer-1, transparent), 0 -14px 0 Canvas, var(--reader-control-width, 148px) 0 0 Canvas; }
 .turnStickyLanes .turnProcessSticky, .turnStickyLanes .closedProcessSummary { position: static; top: auto; z-index: auto; }
 /* The same summary row stays in flow until it reaches the measured top lane. */
-.flowCell[data-flow-summary], .closedProcessSummary { position: sticky; top: calc(max(var(--reader-toolbar-height, 40px), var(--reader-status-height, 40px)) + var(--reader-sticky-lane, 40px)); z-index: 5; overflow: visible; box-sizing: border-box; min-height: 40px; padding-block: 4px; background: var(--dsw-alias-bg-base); border-bottom: 0; }
+.flowCell[data-flow-summary], .closedProcessSummary { position: sticky; top: calc(var(--reader-toolbar-height, var(--reader-lane-block, 40px)) + var(--reader-status-height, var(--reader-lane-block, 40px))); z-index: 5; overflow: visible; box-sizing: border-box; min-height: var(--reader-lane-block, 40px); padding-block: 4px; background: var(--dsw-alias-bg-base); border-bottom: 0; }
 /* Keep the official CodeBlock banner's internal z-index inside its wrapper so Reader lanes stay above it. */
 .root :global(.md-code-block) { z-index: 0; }
 /* Keep native code actions below the pinned Reader lanes. */
-.turnStickyRegion:has(> .turnStickyLanes > .closedProcessSummary), .turnStickyRegion:has(.flowCell[data-flow-summary]) { --reader-code-summary-height: var(--reader-sticky-lane, 40px); }
+.turnStickyRegion:has(> .turnStickyLanes > .closedProcessSummary), .turnStickyRegion:has(.flowCell[data-flow-summary]) { --reader-code-summary-height: var(--reader-summary-height, var(--reader-lane-block, 40px)); }
 .root :global(.md-code-block > :has(+ [data-code-block-content])) { top: calc(max(var(--reader-toolbar-height, 40px), var(--reader-status-height, 0px)) + var(--reader-status-height, 0px) + var(--reader-code-summary-height, 0px)); }
-.flowCell[data-flow-summary] { box-shadow: 0 -16px 0 var(--dsw-alias-bg-base); }
-.closedProcessSummary { box-shadow: 0 -14px 0 var(--dsw-alias-bg-base); }
+.flowCell[data-flow-summary] { box-shadow: 0 -16px 0 var(--dsw-alias-bg-base), 0 -16px 0 var(--dsw-alias-bg-layer-1, transparent), 0 -16px 0 Canvas; }
+.closedProcessSummary { box-shadow: 0 -14px 0 var(--dsw-alias-bg-base), 0 -14px 0 var(--dsw-alias-bg-layer-1, transparent), 0 -14px 0 Canvas; }
 .foldControl { display: inline-flex; align-items: center; gap: 0; padding: 2px; border-radius: 8px; background: var(--dsw-alias-bg-module-platform); }
 .foldStop { border: 0; background: transparent; color: var(--dsw-alias-label-secondary); padding: 2px 8px; border-radius: 6px; white-space: nowrap; font: inherit; font-size: 12px; line-height: 18px; cursor: pointer; }
 .foldStop[data-on] { background: var(--dsw-alias-bg-base); color: var(--dsw-alias-label-primary); }
@@ -576,6 +613,19 @@
 .thinkSizer { white-space: normal; overflow-wrap: anywhere; }
 .thinkText { white-space: normal; overflow-wrap: anywhere; overflow: visible; text-overflow: clip; }
 
+/* Theme layers sit on an opaque page surface. A cleared token, or one at
+   10% opacity, composites over Canvas instead of the text colour, and the
+   heading underneath cannot show through. */
+.toolbar,
+.turnStickyLanes,
+.turnProcessSticky,
+.liveFoldContainer,
+.flowCell[data-flow-summary],
+.closedProcessSummary {
+  background-color: Canvas;
+  background-image: var(--reader-lane-plate);
+  background-repeat: no-repeat;
+}
 /* Skin mode is opt-in, and it has one job: some readers run a skinned host
    (wallpaper / theme), and the reader's own opaque rows hide that skin. On =
    every surface the reader paints becomes a thin token-derived wash and the
@@ -631,7 +681,7 @@
 }
 .root[data-reader-glass] .turnStickyLanes { display: contents; position: static; top: auto; z-index: auto; }
 .root[data-reader-glass] .turnStickyRegion { --reader-code-summary-height: 0px; }
-.root[data-reader-glass] .turnStickyLanes .turnProcessSticky { position: sticky; top: max(var(--reader-toolbar-height, 40px), var(--reader-status-height, 40px)); z-index: 6; }
+.root[data-reader-glass] .turnStickyLanes .turnProcessSticky { position: sticky; top: var(--reader-toolbar-height, var(--reader-lane-block, 40px)); z-index: 6; }
 /* User bubble becomes a sleek translucent frosted pill in skin mode */
 .root[data-reader-glass] .user {
   background: color-mix(in srgb, var(--dsw-specific-bubble, rgba(0,0,0,.08)) 25%, transparent);