dsh-better-display 0.3.8 → 0.3.10

package/src/client/Reader.tsx

@@ -5,15 +5,15 @@ import type { ReactNode, RefObject } from 'react';
 import type { ChatConversationViewNode, ChatNode, ChatNodeKind, ChatNodeOwnerProps } from '@deepseek-ai/dsh-client-ui-chat/client';
 import { createSnapshotStore } from '@deepseek-ai/dsh-client-store';
 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 { BlockBoundary, Blocks, contentBlocks, UserMessageActions } from './Blocks.js';
+import { AssistantNode } from './AssistantNode.js';
 import { ToolActivity, ToolMedia } from './ToolActivity.js';
-import { OfficialActions, OfficialNode, OfficialTail } from './OfficialContent.js';
-import { OFFICIAL_SEATS } from './official-slots.js';
+import { OfficialNode, OfficialTail } from './OfficialContent.js';
+import { OFFICIAL_SEATS, readerGroupAction } from './official-slots.js';
 import { preparingLabel, readerFlow } from './tool-activity.js';
-import { Disclosure, ProcessFragment, RetiringContent, StatusText, useMotionAllowed, usePinnedSelection, useReadingScroll } from './motion.js';
+import { Disclosure, ProcessFragment, RetiringTurns, StatusText, useMotionAllowed, usePinnedSelection, useReadingScroll } from './motion.js';
 import { StreamMotionContext } from './streaming.js';
-import { assistantSegments, boundaryOf, forkAnchorSeq, groupNodes, hasProcessContent, hasVisibleBody, isEarlierNarration, processChoiceKey, processExpanded, terminalLabel } from './projection.js';
+import { boundaryOf, forkAnchorSeq, groupNodes, hasProcessContent, processChoiceKey, processExpanded, terminalLabel } from './projection.js';
 import { basename, createProducedFileMentions, dirname, getTurnDeliverables, showDeliverablesRow } from './deliverables.js';
 import { deliverableOpenModeOf, type DeliverableOpenMode } from './open-file.js';
 import { asReadonlyArray, pendingSubmissionImages, type PendingSubmissionEcho } from './pending-submission.js';
@@ -23,17 +23,18 @@ import { ContextInjectionRow } from './native/ContextInjectionRow.js';
 import { TimelineRail } from './TimelineRail.js';
 import { landTurn, scrollerOf } from './conversation-scroll.js';
 import { mergeTimelineItems, type TimelineItem } from './timeline.js';
-import { presentLiveTurn, segmentLiveTurn } from './live-turn.js';
+import { planProcessSeams, presentLiveTurn, segmentLiveTurn } from './live-turn.js';
 import type { LiveStep } from './live-turn.js';
 import { frostedGlassOf } from './fold-intensity.js';
 import { ChoreographedFlow, useFlowChat } from './ChoreographedFlow.js';
 import { ClosedProcessSummary } from './ClosedProcessSummary.js';
-import { StickyLane } from './StickyLane.js';
+import { ReaderLaneScope, StickyLane } from './StickyLane.js';
 import type { ReaderGroup, TurnBoundary } from './projection.js';
 import type { BlockRenderProps, ReaderProps } from './types.js';
 import css from './Reader.module.css';
 import { markdownLabels, truncatedJsonLabel } from './primitive-labels.js';
 import { chatSeatProps } from './chat-seat.js';
+import { visibleChatKeys, visibleChatSignature } from './rewind-cut.js';
 import { ensureStyles } from './styles.js';
 
 function isNode<K extends ChatNodeKind>(node: ChatConversationViewNode, kind: K): node is ChatNode<K> {
@@ -170,52 +171,7 @@ const ProcessNode = memo(function ProcessNode({ useChat, t, nodeKey, open, motio
   return content && <ProcessFragment open={open} motion={motion} onRead={onRead} returnFocusTo={returnFocusTo} nodeKey={nodeKey} framed>{content}</ProcessFragment>;
 });
 
-const AssistantNode = memo(function AssistantNode({ useChat, nodeKey, boundary, processOpen = false, pinned = false, folded = false, partStart, motion, onRead, returnFocusTo, ...render }: SeatProps & {
-  motion: boolean; onRead: () => void; returnFocusTo: RefObject<HTMLButtonElement>; partStart?: number; folded?: 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);
-  return <>{visible.map(part => {
-    const index = parts.findIndex(item => item.start === part.start);
-    const last = index === parts.length - 1;
-    return part.kind === 'reasoning'
-    ? <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>
-    : isProcessStep ? <ProcessFragment key={part.start} open={processOpen} motion={motion} onRead={onRead} returnFocusTo={returnFocusTo} nodeKey={nodeKey}>
-      <article className={css.processCommentary}>
-        <Blocks {...render} blocks={part.blocks} streaming={data.status === 'running'} holdFormatting={pinned} startedAt={data.time} interrupted={data.status === 'interrupted'} liveText />
-      </article>
-    </ProcessFragment>
-    : hasVisibleBody(part.blocks) && <RetiringContent key={part.start} visible={pinned || processOpen || (!earlier && !folded)}>
-      <article className={css.answer} data-reader-answer data-reader-anchor data-reader-key={nodeKey} data-reader-source-start={part.start} data-answer-status={data.status} data-answer-phase={earlier || folded ? 'process' : 'body'}>
-        <Blocks {...render} blocks={part.blocks} streaming={data.status === 'running'} holdFormatting={pinned} startedAt={data.time} interrupted={data.status === 'interrupted'} liveText />
-        {last && data.status === 'interrupted' && <span className={css.stopped}>已停止</span>}
-        {last && !earlier && !folded && 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>
-    </RetiringContent>;
-  })}</>;
-});
-
-const MainNode = memo(function MainNode({ useChat, nodeKey, boundary, pinned, processOpen = false, ...render }: SeatProps) {
+const MainNode = memo(function MainNode({ useChat, nodeKey, boundary, pinned, processOpen: _processOpen = false, ...render }: SeatProps) {
   const node = useChat(snapshot => snapshot.nodes.get(nodeKey));
   const [disclosureReset] = useState(() => createSnapshotStore(0));
   if (!node || node.visibility === 'hidden') return null;
@@ -242,17 +198,13 @@ const MainNode = memo(function MainNode({ useChat, nodeKey, boundary, pinned, pr
       const owner: ChatNodeOwnerProps & Pick<ReaderProps, 'sessionId'> = {
         cwd: render.cwd,
         openFile: render.openFile ?? (() => {}),
-        openSkill: () => {},
         forkAt: render.forkAt ?? (() => {}),
         inspectCall: callId => official.openView('trajectory', callId),
         loadImage: official.officialImageLoader,
-        renderMessageImages: images => official.renderSlot(OFFICIAL_SEATS.images, {
-          ...images, loadImage: official.officialImageLoader,
-        }),
         fileMentions: official.officialFileMentions,
         sessionId: render.sessionId,
       };
-      const options = { hookContext: { turnData: turn?.data, disclosureReset }, fallback };
+      const options = { hookContext: { turnData: turn?.data, disclosureReset, useGroupAction: readerGroupAction }, fallback };
       rendered = node.kind === 'user'
         ? official.renderSlot(OFFICIAL_SEATS.nodes, { ...owner, node }, { ...options, entryKey: 'user' })
         : official.renderSlot(OFFICIAL_SEATS.nodes, { ...owner, node }, { ...options, entryKey: 'steering' });
@@ -322,7 +274,7 @@ function subagentCount(snapshot: { nodes: { get(key: string): ChatConversationVi
   return 0;
 }
 
-function GroupStatus({ group, sessionId, useChat, pending, motion }: Pick<ReaderProps, 'sessionId' | 'useChat'> & { group: ReaderGroup; motion: boolean; pending: { kind?: string } | undefined }) {
+function GroupStatus({ group, useChat, pending, motion }: Pick<ReaderProps, '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') {
@@ -538,7 +490,7 @@ const TurnGroup = memo(function TurnGroup({ group, motion, autoFold, pinnedKeys,
   const firstKind = props.useChat(snapshot => snapshot.nodes.get(group.keys[0])?.kind);
   const startsWithUser = firstKind === 'user';
   const mainKeys = startsWithUser ? group.keys.slice(1) : group.keys;
-  const flow = useMemo(() => readerFlow({ ...group, keys: mainKeys }, turn, key => nodes.get(key)), [nodes, group, mainKeys, turn]);
+  const flow = useMemo(() => readerFlow({ ...group, keys: mainKeys }, turn, key => nodes.get(key), snapshot.order), [nodes, group, mainKeys, turn, snapshot.order]);
   const steps = useMemo(() => segmentLiveTurn(flow, key => nodes.get(key)), [flow, nodes]);
   const liveItems = useMemo(() => presentLiveTurn(steps, boundary, autoFold), [steps, boundary, autoFold]);
   const openMode = deliverableOpenModeOf(useSyncExternalStore(
@@ -557,6 +509,12 @@ const TurnGroup = memo(function TurnGroup({ group, motion, autoFold, pinnedKeys,
       ? item.key === key || item.steps.some(step => step.key === key || ('nodeKey' in step && step.nodeKey === key))
       : item.key === key || ('nodeKey' in item.step && item.step.nodeKey === key)));
   const expanded = !autoFold || holdingSelection || processExpanded(expansionChoice, boundary);
+  // Seam between narration blocks. Skip a run a live-fold cell already
+  // covers, and do not drop the previous body's bottom spacing.
+  const seamPlan = useMemo(
+    () => planProcessSeams(steps, liveItems, expanded),
+    [steps, liveItems, expanded],
+  );
   const [foldOpenByKey, setFoldOpenByKey] = useState<Record<string, boolean>>({});
   useLayoutEffect(() => {
     // Restoring automatic folding also releases live "prior steps" disclosures.
@@ -630,7 +588,9 @@ const TurnGroup = memo(function TurnGroup({ group, motion, autoFold, pinnedKeys,
   const renderStep = (step: LiveStep, folded: boolean) => {
     const processOpen = folded || expanded;
     if (step.kind === 'reasoning' || step.kind === 'body') return <BlockBoundary>
-      <AssistantNode {...shared} boundary={boundary} nodeKey={step.nodeKey} partStart={step.start} pinned={pinnedKeys.includes(step.nodeKey)} processOpen={processOpen} folded={folded} motion={motion} onRead={pinProcess} returnFocusTo={processButton} />
+      <AssistantNode {...shared} boundary={boundary} nodeKey={step.nodeKey} partStart={step.start} pinned={pinnedKeys.includes(step.nodeKey)} processOpen={processOpen} folded={folded} motion={motion} onRead={pinProcess} returnFocusTo={processButton}
+        seamSummary={step.kind === 'body' ? seamPlan.before.get(step.key) : undefined}
+        seamAfter={step.kind === 'body' && seamPlan.after.has(step.key)} />
     </BlockBoundary>;
     if (step.kind === 'tool') return <BlockBoundary><ProcessFragment open={processOpen} motion={motion} onRead={pinProcess} returnFocusTo={processButton} nodeKey={step.key} framed>
       <ToolActivity {...shared} entry={step.entry} motion={motion} turnClosed={boundary.status === 'closed'} onRead={pinProcess} />
@@ -648,17 +608,10 @@ const TurnGroup = memo(function TurnGroup({ group, motion, autoFold, pinnedKeys,
       {(showStatusLane || showClosedSummary) && <div className={css.turnStickyLanes}>
         {showStatusLane && <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} pending={interaction} motion={motion} />} />
+            label={<GroupStatus group={group} useChat={props.useChat} pending={interaction} motion={motion} />} />
         </StickyLane>}
         {showClosedSummary && <ClosedProcessSummary open={expanded} onChange={setExpanded} controls={flowId}
-          steps={steps.filter(step => {
-            if (step.kind === 'user') return false;
-            if (step.kind !== 'body') return true;
-            const node = nodes.get(step.nodeKey);
-            return !!node && isNode(node, 'assistant-step') && (isEarlierNarration(node.data, boundary)
-              || node.data.blocks.some(block => block.kind === 'tool-call')
-              || (boundary.latestStep > 0 && node.data.step < boundary.latestStep));
-          })} />}
+          steps={steps.filter(step => step.kind !== 'user' && step.kind !== 'body')} />}
       </div>}
       <ChoreographedFlow id={flowId} frame={presentation} motion={motion} enabled={autoFold && boundary.status === 'open' && !holdingSelection}
         urgent={hasTurnError || interaction !== undefined || !sessionRunning} open={foldOpenByKey} processOpen={expanded}
@@ -666,7 +619,7 @@ const TurnGroup = memo(function TurnGroup({ group, motion, autoFold, pinnedKeys,
     </div>
     {/* 状态指示永远排在流程之后：AI 的响应永远出现在最新消息（含补充消息）的下方 */}
     {!hasProcess && boundary.status === 'open' && !isAwaitingModel && <div className={css.disclosure} data-reader-status-only>
-      <GroupStatus group={group} sessionId={props.sessionId} useChat={props.useChat} pending={interaction} motion={motion} />
+      <GroupStatus group={group} 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>}
@@ -680,6 +633,9 @@ export function Reader(props: ReaderProps) {
   const activatedAt = useRef(Date.now());
   const order = props.useChat(snapshot => snapshot.order);
   const nodes = props.useChat(snapshot => snapshot.nodes);
+  // A rewind upserts the command row in place, so order and nodes keep their identity.
+  const rewindSignature = props.useChat(snapshot => visibleChatSignature(snapshot));
+  const renderKeys = useMemo(() => visibleChatKeys({ order, nodes }), [order, nodes, rewindSignature]);
   const timeline = props.useChat(snapshot => snapshot.timeline);
   const running = props.useSession(snapshot => snapshot.running);
   const pending = props.useSessionStatus(snapshot => snapshot.get(props.sessionId)?.pendingInteraction);
@@ -708,7 +664,7 @@ export function Reader(props: ReaderProps) {
     rows.push(...local.values());
     return rows;
   }, [inboxSteering, pendingList, visibleSubmissions]);
-  const waitAnchor = waitingAnchor(order, key => nodes.get(key), pendingList);
+  const waitAnchor = waitingAnchor(renderKeys, key => nodes.get(key), pendingList);
   const motionPreference = props.useStore(state => state.motion);
   const motion = useMotionAllowed(motionPreference);
   const prefsSnap = useSyncExternalStore(
@@ -728,14 +684,14 @@ export function Reader(props: ReaderProps) {
   }, [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]);
+  const groups = useMemo(() => groupNodes(renderKeys, key => nodes.get(key)), [renderKeys, nodes, timeline]);
   const isAwaitingModel = useMemo(() => {
     // 状态机铁律：「深度求索中」与「正在处理/思考」永远互斥。
     // 1. 仅空闲发送（!running）的本地回显窗口：用户按下回车第 0 毫秒立即反馈。
     //    忙碌时的 queued/steering 回显不算等待——模型本来就在工作。
     if (!running && pendingList.length > 0) return true;
 
-    const lastKey = order.at(-1);
+    const lastKey = renderKeys.at(-1);
     const lastNode = lastKey ? nodes.get(lastKey) : undefined;
     if (!lastKey || !lastNode) return false;
 
@@ -760,7 +716,7 @@ export function Reader(props: ReaderProps) {
     const lastGroup = groups.at(-1);
     const turn = lastGroup?.turn === null || lastGroup?.turn === undefined ? undefined : timeline.turns.get(lastGroup.turn);
     return turn?.status !== 'closed';
-  }, [running, pendingList, order, nodes, groups, timeline]);
+  }, [running, pendingList, renderKeys, nodes, groups, timeline]);
   const scroll = useReadingScroll(root, motion);
   const pinnedKeys = usePinnedSelection(root);
   const selectedProcessKeys = usePinnedSelection(root, '[data-reader-process]');
@@ -868,7 +824,7 @@ export function Reader(props: ReaderProps) {
     }
   }, [props.loadThrough, props.loadOlder, scroll.jump, scroll.release, timelineItems]);
 
-  const lastKey = order.at(-1);
+  const lastKey = renderKeys.at(-1);
   const lastNode = lastKey ? nodes.get(lastKey) : undefined;
   const lastSubmissionId = pendingList.length ? pendingList[pendingList.length - 1].requestId : null;
   const lastOrderKeyRef = useRef<string | undefined>(lastKey);
@@ -887,9 +843,9 @@ 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-reader-build="0.3.4" data-dsh-better-display="0.3.4" 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}><ReaderLaneScope><div ref={root} className={css.root} data-reader-build="0.3.4" data-dsh-better-display="0.3.4" 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="">
+    <div className={css.column} data-chat-flow="" tabIndex={-1}>
       <StickyLane kind="toolbar" className={css.toolbar}>
         <button
           type="button"
@@ -911,12 +867,12 @@ export function Reader(props: ReaderProps) {
       {historyError && <div className={css.notice}>历史记录加载失败，可再次尝试；现有内容未改变。</div>}
       {openError && <div className={css.error} role="alert">会话暂时无法读取：{openError.message}</div>}
       {loading && groups.length === 0 && <p className={css.empty} role="status">正在读取会话…</p>}
-      {groups.map(group => <TurnGroup key={group.key} {...props} group={group} motion={motion} autoFold={autoFold} pinnedKeys={pinnedKeys} selectedProcessKeys={selectedProcessKeys} isAwaitingModel={isAwaitingModel && group.key === groups.at(-1)?.key} />)}
+      <RetiringTurns groups={groups} render={group => <TurnGroup {...props} group={group} motion={motion} autoFold={autoFold} pinnedKeys={pinnedKeys} selectedProcessKeys={selectedProcessKeys} isAwaitingModel={isAwaitingModel && group.key === groups.at(-1)?.key} />} />
       {pendingInputs.map((item, index) => {
          const submission = 'requestId' in item ? item : undefined;
          const text = submission?.text ?? inboxText(item as PendingInboxItem);
          const images = submission ? pendingSubmissionImages(submission) : [];
-         const attachmentCount = images.length;
+         const attachmentCount = submission ? images.length : inboxAttachmentCount(item as PendingInboxItem);
         const requestId = submission?.requestId ?? `inbox-${index}`;
         return (
         <div key={requestId} className={css.userCluster} data-reader-pending-submission data-pending-steering={submission ? undefined : ''} data-pending-attachment-count={attachmentCount}>
@@ -949,5 +905,5 @@ export function Reader(props: ReaderProps) {
         <svg viewBox="0 0 14 14" width="14" height="14" aria-hidden="true"><path d="M3 5.5 7 9.5 11 5.5" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" /></svg>
       </button></div>}
     </div>
-  </div></StreamMotionContext.Provider>;
+  </div></ReaderLaneScope></StreamMotionContext.Provider>;
 }

package/src/client/SettingsSection.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useState, useSyncExternalStore } from 'react';
-import { foldIntensityOf, frostedGlassOf, type FoldIntensity } from './fold-intensity.js';
+import { frostedGlassOf, type FoldIntensity } from './fold-intensity.js';
 import { deliverableOpenModeOf, type DeliverableOpenMode } from './open-file.js';
 import { settingsCopyFor, type SettingsCopy, type SettingsCopyKey } from './settings-copy.js';
 import { CONVENTIONAL_SKILL_ROOTS, detectGenerativeMcpappsSkill, shortestInstallCommand, type SkillStatusProbe, type SkillStatusSnapshot } from './skill-status.js';
@@ -49,12 +49,6 @@ function text(props: SettingsProps, copy: SettingsCopy, key: keyof SettingsCopy)
   return copy[key];
 }
 
-const FOLD_STOPS: { value: FoldIntensity; key: 'foldNone' | 'foldStandard' | 'foldSummary' }[] = [
-  { value: 0, key: 'foldNone' },
-  { value: 1, key: 'foldStandard' },
-  { value: 2, key: 'foldSummary' },
-];
-
 export function SettingsSection(props: SettingsProps) {
   const copy = props.copy ?? settingsCopyFor(props.languageTag);
   const snap = useSyncExternalStore(

package/src/client/StickyLane.tsx

@@ -1,6 +1,85 @@
-import { useLayoutEffect, useRef } from 'react';
+import { createContext, useContext, useLayoutEffect, useRef } from 'react';
 import type { ReactNode } from 'react';
 
+const MIN_LANE_PX = 40;
+type LaneOwners = Map<string, HTMLElement>;
+
+const LaneOwnerContext = createContext<LaneOwners | null>(null);
+const ownersByRoot = new WeakMap<HTMLElement, LaneOwners>();
+
+/** One map per Reader, so two roots that both contain turn 1 do not share a writer. */
+export function ReaderLaneScope({ children }: { children: ReactNode }) {
+  const owners = useRef<LaneOwners>(new Map());
+  useLayoutEffect(() => {
+    const map = owners.current;
+    return () => { map.clear(); };
+  }, []);
+  return <LaneOwnerContext.Provider value={owners.current}>{children}</LaneOwnerContext.Provider>;
+}
+
+function laneScope(el: HTMLElement) {
+  return el.closest<HTMLElement>('[data-reader-turn]') ?? el.closest<HTMLElement>('[data-dsh-better-display]');
+}
+
+function ownersFor(el: HTMLElement, scoped: LaneOwners | null) {
+  if (scoped) return scoped;
+  const root = el.closest<HTMLElement>('[data-dsh-better-display]') ?? el;
+  let owners = ownersByRoot.get(root);
+  if (!owners) {
+    owners = new Map();
+    ownersByRoot.set(root, owners);
+  }
+  return owners;
+}
+
+function publishedLanePx(el: HTMLElement) {
+  return Math.max(MIN_LANE_PX, Math.ceil(el.getBoundingClientRect().height));
+}
+
+/** One writer per turn inside a single Reader. A retiring summary cannot clear the lane that replaced it. */
+export function publishLaneHeight(el: HTMLElement, property: string, scoped: LaneOwners | null = null) {
+  const scope = laneScope(el);
+  if (!scope) return () => {};
+  const owners = ownersFor(el, scoped);
+  const root = el.closest<HTMLElement>('[data-dsh-better-display]');
+  const key = `${property}\0${scope.getAttribute('data-reader-turn') ?? 'root'}`;
+  const update = () => {
+    if (owners.get(key) !== el) return;
+    scope.style.setProperty(property, `${publishedLanePx(el)}px`);
+  };
+  owners.set(key, el);
+  update();
+  const observer = new ResizeObserver(update);
+  observer.observe(el);
+  return () => {
+    observer.disconnect();
+    if (owners.get(key) !== el) return;
+    owners.delete(key);
+    scope.style.removeProperty(property);
+    if (!scoped && root && owners.size === 0) ownersByRoot.delete(root);
+  };
+}
+
+export function usePublishedHeight(property: string) {
+  const owners = useContext(LaneOwnerContext);
+  const ref = useRef<HTMLDivElement>(null);
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    return publishLaneHeight(el, property, owners);
+  }, [owners, property]);
+  return ref;
+}
+
+export function useSummaryLane(ref: { readonly current: HTMLElement | null }, active: boolean) {
+  const owners = useContext(LaneOwnerContext);
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!active || !el) return;
+    return publishLaneHeight(el, '--reader-summary-height', owners);
+  }, [active, owners, ref]);
+}
+
 /** Publish real lane geometry; wrapped labels must not collide with statistics. */
 export function StickyLane({ kind, className, children }: { kind: 'toolbar' | 'status'; className: string; children: ReactNode }) {
   const ref = useRef<HTMLDivElement>(null);
@@ -10,7 +89,7 @@ export function StickyLane({ kind, className, children }: { kind: 'toolbar' | 's
     if (!el || !scope) return;
     const property = kind === 'toolbar' ? '--reader-toolbar-height' : '--reader-status-height';
     const update = () => {
-      scope.style.setProperty(property, `${el.getBoundingClientRect().height}px`);
+      scope.style.setProperty(property, `${Math.max(MIN_LANE_PX, el.getBoundingClientRect().height)}px`);
       if (kind !== 'toolbar') return;
       // The status lane is sized as calc(100% - --reader-control-width), so this
       // must reserve the WHOLE control group. Measuring only the first button

package/src/client/ToolActivity.tsx

@@ -6,7 +6,7 @@ import { DiffBlock, DisclosureRow, JsonTree, ReadBlock, SearchBlock, TerminalBlo
 import { Blocks, contentBlocks } from './Blocks.js';
 import { OfficialTool } from './OfficialContent.js';
 import { ProcessFragment } from './motion.js';
-import { activityPhase, activitySummary, callDiffHunks, diffTotals, executionFacts, forgetCallClock, objectValue, runningClockBase, toolIdentity } from './tool-activity.js';
+import { activityPhase, activitySummary, callDiffHunks, diffTotals, executionFacts, forgetCallClock, objectValue, runningClockBase } from './tool-activity.js';
 import type { ToolActivityEntry, ToolCategory, ToolPhase } from './tool-activity.js';
 import type { BlockRenderProps } from './types.js';
 import { classifyTool, toolRowModel, VARIANT_TITLES } from './native/tool-call-model.js';

package/src/client/index.tsx

@@ -19,6 +19,7 @@ import { fileAddressFor, modeFromSnapshot, openDeliverableFile } from './open-fi
 import type { ReaderInjected } from './types.js';
 import type { ImageAttachmentRef } from '@deepseek-ai/dsh-attachment';
 import { installOfficialSlots, officialChildren, type CompositionRegistry } from './official-slots.js';
+import { TEXT_TRANSFORM_SERVICE, createTextTransformRegistry, installTextTransformRegistry } from './text-transform.js';
 
 /** Structural face of the sanctioned per-session composer writer. */
 interface ComposerShell {
@@ -54,8 +55,10 @@ async function openWorkspacePath(
   }
 }
 
-export type { ReaderBlockOwner } from './types.js';
+export type { ReaderBlockOwner, ReaderBlockPresentation } from './types.js';
+export type { DisplayCursor, DisplayText, DisplayTextKind, DisplayTextRequest, DisplayTextTransformer, TextTransformRegistry } from './text-transform.js';
 export { McpAppFrame } from './McpAppFrame.js';
+export { TEXT_TRANSFORM_SERVICE, createTextTransformRegistry, originalAnswerText } from './text-transform.js';
 export const name = 'dsh-better-display-client';
 export const inject = ['slots', 'sessions', 'conversation', 'uiConversation', 'remote', 'remote.session'];
 
@@ -63,6 +66,10 @@ export const inject = ['slots', 'sessions', 'conversation', 'uiConversation', 'r
 ensureStyles();
 
 export function apply(ctx: Context): void {
+  const textTransform = createTextTransformRegistry();
+  const restoreTextTransform = installTextTransformRegistry(textTransform);
+  ctx.provide(TEXT_TRANSFORM_SERVICE, textTransform);
+  ctx.effect(() => restoreTextTransform);
   const store = createReaderStore();
   // conversation.view is session-scoped, so session persist keys are
   // `dsh.reader.v1.<sessionId>`. One root instance keeps glass, fold

package/src/client/live-turn.ts

@@ -2,7 +2,6 @@ import type { AssistantChatData, ChatConversationViewNode } from '@deepseek-ai/d
 import type { AssistantBlock } from '@deepseek-ai/dsh-client-ui-conversation/client';
 import { assistantSegments, hasVisibleBody } from './projection.js';
 import type { TurnBoundary } from './projection.js';
-import { activitySummary, stringValue } from './tool-activity.js';
 import type { ReaderFlowEntry, ToolActivityEntry } from './tool-activity.js';
 
 export type LiveStep =
@@ -40,17 +39,6 @@ export function foldSummary(steps: readonly LiveStep[]): string {
   return parts.join(' · ') || '此前步骤';
 }
 
-/** One chain: fold only when a new reasoning step has prior body/tool/reasoning. */
-export function splitChain(chain: readonly LiveStep[]): { fold: readonly LiveStep[] | null; open: readonly LiveStep[] } {
-  const lastReasoning = chain.findLastIndex(step => step.kind === 'reasoning');
-  if (lastReasoning < 0) return { fold: null, open: chain };
-  const prior = chain.slice(0, lastReasoning);
-  if (!prior.length) return { fold: null, open: chain };
-  const trigger = prior.some(step => step.kind === 'reasoning' || step.kind === 'body' || step.kind === 'tool');
-  if (!trigger) return { fold: null, open: chain };
-  return { fold: prior, open: chain.slice(lastReasoning) };
-}
-
 function skipReasoning(part: { kind: string; blocks: AssistantBlock[] }): boolean {
   return part.kind === 'reasoning' && !part.blocks.some(block => block.kind === 'reasoning' && block.text.trim() !== '');
 }
@@ -125,74 +113,117 @@ export function segmentLiveTurn(
   return steps;
 }
 
-/** One finished tool call, described by what it actually did. */
-function toolSummary(entry: ToolActivityEntry): string {
-  const info = activitySummary(entry);
-  const clip = (value: string | undefined, max = 38): string | undefined => {
-    if (!value) return undefined;
-    const flat = value.replace(/\s+/gu, ' ').trim();
-    if (!flat) return undefined;
-    return flat.length > max ? flat.slice(0, max - 1) + '\u2026' : flat;
-  };
-  const base = info.target ? clip(info.target.split(/[/\\]/u).at(-1), 28) : undefined;
-  const said = clip(stringValue(info.args, 'description'), 40);
-  switch (info.category) {
-    case 'read': return '读取 ' + (base ?? '文件');
-    case 'write': return clip(info.title, 40) ?? '写入文件';
-    case 'terminal': {
-      const cmd = clip(info.command, 32);
-      return said ?? (cmd ? '运行 ' + cmd : '运行命令');
-    }
-    case 'search': {
-      const needle = clip(stringValue(info.args, 'pattern', 'query'), 26);
-      return info.name === 'glob' ? '查找 ' + (needle ?? '文件') : '搜索 ' + (needle ?? '内容');
-    }
-    case 'web': {
-      const query = clip(info.target, 30);
-      return (info.name === 'web_search' ? '搜索网页' : '读取网页') + (query ? ' ' + query : '');
-    }
-    default: {
-      // Schema-less tools (run_code and friends) describe themselves in an
-      // argument rather than a known field: prefer the model's own
-      // description, then the first meaningful line of the code it ran.
-      if (said) return said;
-      const code = stringValue(info.args, 'code', 'source', 'script');
-      if (code) {
-        const line = code.split('\n').map(part => part.trim())
-          .find(part => part && !/^[)\]}]/.test(part) && !/^(\/\/|\*|\/\*|#)/.test(part));
-        if (line) return clip(line.replace(/\s+/gu, ' '), 44) ?? '运行代码';
-      }
-      return clip(info.title ?? info.name, 32) ?? '工具调用';
-    }
-  }
+/** Only a run that contains real thinking/tool work is worth folding. */
+function foldableRun(run: readonly LiveStep[]): boolean {
+  return run.some(step => step.kind === 'reasoning' || step.kind === 'tool');
 }
 
+/**
+ * One live chain: narration stays visible, while every earlier reasoning/tool
+ * run collapses into its own box at its original position.
+ */
 export function presentLiveTurn(steps: readonly LiveStep[], boundary: TurnBoundary, autoFold = true): LiveTurnItem[] {
   const live = autoFold && liveFoldEnabled(boundary);
   const items: LiveTurnItem[] = [];
-  let chain: LiveStep[] = [];
-  const flush = () => {
-    if (!chain.length) return;
-    if (!live) {
-      for (const step of chain) items.push({ kind: 'open', key: step.key, step });
-      chain = [];
-      return;
-    }
-    const { fold, open } = splitChain(chain);
-    if (fold?.length) {
-      items.push({ kind: 'fold', key: `live-fold:${chain[0]!.key}`, steps: fold, summary: foldSummary(fold) });
+  const open = (step: LiveStep) => items.push({ kind: 'open', key: step.key, step });
+  const fold = (run: readonly LiveStep[]) => {
+    if (!run.length) return;
+    if (live && foldableRun(run)) {
+      items.push({ kind: 'fold', key: `live-fold:${run[0]!.key}`, steps: run, summary: foldSummary(run) });
+    } else {
+      for (const step of run) open(step);
     }
-    for (const step of open) items.push({ kind: 'open', key: step.key, step });
-    chain = [];
   };
+  let run: LiveStep[] = [];
+  const flush = () => { fold(run); run = []; };
+
+  // A user insert resets the chain: steps before it are never folded by
+  // reasoning after it. Split into user-delimited segments and walk each one.
+  const segments: LiveStep[][] = [];
+  let segment: LiveStep[] = [];
   for (const step of steps) {
     if (step.kind === 'user') {
-      flush();
-      items.push({ kind: 'user', key: step.key, step });
+      segments.push(segment); segments.push([step]); segment = [];
     } else {
-      chain.push(step);
+      segment.push(step);
     }
   }
-  flush();
+  segments.push(segment);
+
+  for (const part of segments) {
+    if (!part.length) continue;
+    const first = part[0]!;
+    if (part.length === 1 && first.kind === 'user') {
+      items.push({ kind: 'user', key: first.key, step: first });
+      continue;
+    }
+    if (!live) {
+      for (const step of part) open(step);
+      continue;
+    }
+    // Narration is never folded. Once a later reasoning step exists, every
+    // reasoning/tool run before it folds at its own position, so the latest
+    // thinking and everything after it stay open while earlier steps collapse —
+    // even across narration blocks, which the reader still renders in place.
+    const lastReasoning = part.findLastIndex(step => step.kind === 'reasoning');
+    if (lastReasoning <= 0) {
+      for (const step of part) open(step);
+      continue;
+    }
+    for (let index = 0; index < part.length; index++) {
+      const step = part[index]!;
+      if (index < lastReasoning) {
+        if (step.kind === 'body') { flush(); open(step); }
+        else run.push(step);
+      } else {
+        if (index === lastReasoning) flush();
+        open(step);
+      }
+    }
+    flush();
+  }
   return items;
 }
+
+/**
+ * Summaries for collapsed process that sits between two narration blocks.
+ *
+ * A live-fold cell already shows that summary while the turn is open. Drawing
+ * the seam as well repeats the same counts, so a run whose every step is
+ * already inside a fold cell contributes neither a seam nor `after`. `after`
+ * is what marks the previous body with `data-reader-seam-after` and drops its
+ * bottom padding; skipping the seam must leave that spacing alone.
+ */
+export function planProcessSeams(
+  steps: readonly LiveStep[],
+  liveItems: readonly LiveTurnItem[],
+  expanded: boolean,
+): { before: Map<string, string>; after: Set<string> } {
+  const before = new Map<string, string>();
+  const after = new Set<string>();
+  if (expanded) return { before, after };
+  const liveFolded = new Set(
+    liveItems.flatMap(item => item.kind === 'fold' ? item.steps.map(step => step.key) : []),
+  );
+  let previousBody: Extract<LiveStep, { kind: 'body' }> | undefined;
+  let process: LiveStep[] = [];
+  for (const step of steps) {
+    if (step.kind === 'body') {
+      const folded = process.filter(item => item.kind !== 'user');
+      const coveredByLiveFold = folded.length > 0 && folded.every(item => liveFolded.has(item.key));
+      if (!coveredByLiveFold && previousBody
+        && folded.some(item => item.kind === 'reasoning' || item.kind === 'tool' || item.kind === 'other')) {
+        before.set(step.key, foldSummary(folded));
+        after.add(previousBody.key);
+      }
+      previousBody = step;
+      process = [];
+    } else if (step.kind === 'user') {
+      previousBody = undefined;
+      process = [];
+    } else {
+      process.push(step);
+    }
+  }
+  return { before, after };
+}