dsh-better-display 0.3.7 → 0.3.9

package/src/client/Reader.tsx

@@ -1,17 +1,19 @@
 import type {} from '@deepseek-ai/dsh-session-turn-outline/types';
 import type {} from '@deepseek-ai/dsh-agent/types';
-import { Fragment, memo, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
+import { Fragment, memo, useCallback, useEffect, useId, useInsertionEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
 import type { ReactNode, RefObject } from 'react';
-import type { ChatConversationViewNode, ChatNode, ChatNodeKind } from '@deepseek-ai/dsh-client-ui-chat/client';
+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 { OfficialNode, OfficialTail } from './OfficialContent.js';
+import { OFFICIAL_SEATS } 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';
@@ -21,17 +23,19 @@ 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> {
   return node.kind === kind;
@@ -74,7 +78,7 @@ function cleanErrorMessage(raw: string | undefined): string {
   return str;
 }
 
-type SeatProps = BlockRenderProps & Pick<ReaderProps, 'useChat'> & {
+type SeatProps = BlockRenderProps & Pick<ReaderProps, 'useChat' | 'sessionId'> & {
   nodeKey: string; boundary: TurnBoundary; pinned?: boolean; processOpen?: boolean;
 };
 
@@ -167,53 +171,9 @@ 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;
   if (isNode(node, 'user') || isNode(node, 'steering')) {
     const blocks = contentBlocks(node.data.content);
@@ -221,7 +181,7 @@ const MainNode = memo(function MainNode({ useChat, nodeKey, boundary, pinned, pr
     const otherBlocks = blocks.filter(b => b.kind !== 'image');
     const text = otherBlocks.filter((block): block is Extract<typeof block, { kind: 'text' }> => block.kind === 'text').map(block => block.text).join('\n\n');
     const time = node.data.time;
-    return <div className={css.userCluster} data-reader-anchor data-reader-key={nodeKey} {...chatSeatProps(node.kind, nodeKey)}>
+    const fallback = <>
       {node.kind === 'steering' && <p className={css.meta}>补充消息</p>}
       {imageBlocks.length > 0 && <div className={css.userImages}>
         <Blocks {...render} blocks={imageBlocks} source="user" />
@@ -230,7 +190,30 @@ const MainNode = memo(function MainNode({ useChat, nodeKey, boundary, pinned, pr
         <Blocks {...render} blocks={otherBlocks} source="user" />
       </div>}
       <UserMessageActions text={text} time={time} />
-    </div>;
+    </>;
+    const official = render.official;
+    let rendered: ReactNode = fallback;
+    if (official) {
+      const turn = node.location.kind === 'turn' || node.location.kind === 'step' ? node.location.turn : undefined;
+      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 };
+      rendered = node.kind === 'user'
+        ? official.renderSlot(OFFICIAL_SEATS.nodes, { ...owner, node }, { ...options, entryKey: 'user' })
+        : official.renderSlot(OFFICIAL_SEATS.nodes, { ...owner, node }, { ...options, entryKey: 'steering' });
+    }
+    return <div className={css.userCluster} data-reader-anchor data-reader-key={nodeKey} {...chatSeatProps(node.kind, nodeKey)}>{rendered}</div>;
   }
   if (isNode(node, 'assistant-step')) return null;
   if (isNode(node, 'tool-call')) return <ToolMedia {...render} block={node.data.root} />;
@@ -295,7 +278,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') {
@@ -511,7 +494,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(
@@ -520,6 +503,8 @@ const TurnGroup = memo(function TurnGroup({ group, motion, autoFold, pinnedKeys,
     () => 'external',
   ));
   const hasProcess = flow.some(item => item.kind === 'tool' || hasProcessContent(nodes.get(item.nodeKey), boundary));
+  const showStatusLane = hasProcess && !isAwaitingModel;
+  const showClosedSummary = boundary.status === 'closed' && hasProcess && autoFold;
   // Only a real, still-active text selection delays folding. Merely clicking,
   // focusing or scrolling the live card does not create a permanent override.
   const holdingSelection = selectedProcessKeys.some(key =>
@@ -528,6 +513,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.
@@ -586,6 +577,7 @@ const TurnGroup = memo(function TurnGroup({ group, motion, autoFold, pinnedKeys,
     fileMentions,
     metrics,
     official,
+    sessionId: props.sessionId,
     cwd,
   };
   const terminal = terminalLabel(boundary.reason);
@@ -600,7 +592,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} />
@@ -614,25 +608,22 @@ const TurnGroup = memo(function TurnGroup({ group, motion, autoFold, pinnedKeys,
   };
   return <section className={css.turn} data-reader-turn={group.turn ?? 'unresolved'} data-reader-turn-state={boundary.status} data-reader-turn-result={boundary.reason ?? undefined}>
     {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} pending={interaction} motion={motion} />} />
-    </StickyLane>}
-    {boundary.status === 'closed' && hasProcess && autoFold && <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));
-      })} />}
-    <ChoreographedFlow id={flowId} frame={presentation} motion={motion} enabled={autoFold && boundary.status === 'open' && !holdingSelection}
-      urgent={hasTurnError || interaction !== undefined || !sessionRunning} open={foldOpenByKey} processOpen={expanded}
-      onOpenChange={(key, value) => { pinProcess(); setFoldOpenByKey(current => ({ ...current, [key]: value })); }} renderStep={renderStep} />
+    <div className={css.turnStickyRegion} data-reader-sticky-region>
+      {(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} useChat={props.useChat} pending={interaction} motion={motion} />} />
+        </StickyLane>}
+        {showClosedSummary && <ClosedProcessSummary open={expanded} onChange={setExpanded} controls={flowId}
+          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}
+        onOpenChange={(key, value) => { pinProcess(); setFoldOpenByKey(current => ({ ...current, [key]: value })); }} renderStep={renderStep} />
+    </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>}
@@ -641,10 +632,14 @@ const TurnGroup = memo(function TurnGroup({ group, motion, autoFold, pinnedKeys,
 });
 
 export function Reader(props: ReaderProps) {
+  useInsertionEffect(() => { ensureStyles(); }, []);
   const root = useRef<HTMLDivElement>(null);
   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);
@@ -673,7 +668,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(
@@ -693,14 +688,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;
 
@@ -725,7 +720,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]');
@@ -833,7 +828,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);
@@ -852,9 +847,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"
@@ -876,12 +871,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}>
@@ -914,5 +909,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';
@@ -17,6 +17,7 @@ import css from './Reader.module.css';
 const LABEL: Record<ToolPhase, string> = { preparing: '输入生成中', running: '执行中', returned: '已返回', succeeded: '已完成', failed: '失败', interrupted: '已中断' };
 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 preparingTerminalLabels = { ...terminalBlockLabels, running: '正在生成命令' };
 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)} 秒`;
 
@@ -28,14 +29,17 @@ function generatedInput(content: string, target: string | undefined, preparing:
   </div>;
 }
 
-function InputView({ model, preparing, fillComposer }: { model: ReturnType<typeof activitySummary>; preparing: boolean; fillComposer: BlockRenderProps['fillComposer'] }) {
+function InputView({ model, phase, fillComposer }: { model: ReturnType<typeof activitySummary>; phase: ToolPhase; fillComposer: BlockRenderProps['fillComposer'] }) {
+  const preparing = phase === 'preparing';
+  const inProgress = preparing || phase === 'running';
   if ((model.name === 'render_ui' || model.name === 'show_widget') && typeof model.args?.html === 'string') {
     return preparing
       ? <StreamingMcpAppPlaceholder title={typeof model.args.title === 'string' ? (model.args.title as string) : undefined} />
       : <McpAppFrame html={model.args.html as string} title={typeof model.args.title === 'string' ? (model.args.title as string) : undefined} fillComposer={fillComposer} />;
   }
   if (model.content) return generatedInput(model.content, model.target, preparing);
-  if (model.command) return <div data-reader-tool-terminal><p className={css.toolDetailNote}>{preparing ? '正在生成命令 · 尚未执行' : '提交的命令'}</p><TerminalBlock command={model.command} cwd={model.cwd} labels={terminalBlockLabels} /></div>;
+  if (model.command) return <div data-reader-tool-terminal><p className={css.toolDetailNote}>{preparing ? '正在生成命令 · 尚未执行' : '提交的命令'}</p><TerminalBlock command={model.command} cwd={model.cwd} running={inProgress} labels={preparing ? preparingTerminalLabels : terminalBlockLabels} /></div>;
+  if (model.category === 'terminal' && preparing && model.argsState === 'partial') return <p className={css.toolDetailNote} data-reader-tool-command-pending>命令仍在生成，收到可识别的命令文本后会显示预览。</p>;
   return <JsonTree data={model.args} label={preparing ? '已收到的输入字段' : '工具输入'} labels={jsonTreeLabels} />;
 }
 
@@ -95,11 +99,11 @@ function ResultFallback({ entry, model, phase, ...render }: BlockRenderProps & {
   const block = entry.block;
   if (!block || !('kind' in block)) return <>
     <p className={css.toolDetailNote}>{phase === 'interrupted' ? '已中断，没有工具结果。已生成的输入仍可查看。' : phase === 'preparing' ? '模型正在生成工具输入，工具还未开始执行。' : '工具已开始执行，正在等待结果。'}</p>
-    <InputView model={model} preparing={phase === 'preparing'} fillComposer={render.fillComposer} />
+    <InputView model={model} phase={phase} fillComposer={render.fillComposer} />
   </>;
   const meta = objectValue(block.meta);
   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></>;
+  if (phase === 'interrupted') return <><p className={css.toolDetailNote}>工具已取消，未正常完成。输入和原始返回记录仍可查看。</p><InputView model={model} phase={phase} fillComposer={render.fillComposer} /><pre className={css.toolRaw}>{text}</pre></>;
 
   if (model.category === 'terminal') {
     const facts = executionFacts(block);
@@ -247,7 +251,7 @@ export const ToolActivity = memo(function ToolActivityView({ entry, motion, turn
         <div ref={panel} id={`${detailId}-panel`} className={css.toolPanel} role="tabpanel" aria-labelledby={`${detailId}-${tab}`} tabIndex={0}>
           {selected && <p className={css.toolDetailNote}>为保留选区，预览暂停更新；当前状态见卡片标题。</p>}
           {tab === 'result' && <ResultView {...render} {...preview} />}
-          {tab === 'input' && <><InputView model={preview.model} preparing={preview.phase === 'preparing'} fillComposer={render.fillComposer} /><details className={css.detail}><summary>全部输入字段</summary><JsonTree data={preview.model.args} label="输入字段" labels={jsonTreeLabels} /></details></>}
+          {tab === 'input' && <><InputView model={preview.model} phase={preview.phase} fillComposer={render.fillComposer} /><details className={css.detail}><summary>全部输入字段</summary><JsonTree data={preview.model.args} label="输入字段" labels={jsonTreeLabels} /></details></>}
           {tab === 'raw' && <><p className={css.toolDetailNote}>完整记录 · 只读 · 不执行其中的代码</p><h4 className={css.toolRawLabel}>工具输入</h4><pre className={css.toolRaw}>{preview.model.raw || '输入尚未到达'}</pre>{rawResult && <><h4 className={css.toolRawLabel}>工具结果</h4><pre className={css.toolRaw}>{rawResult}</pre></>}</>}
         </div>
       </div>

package/src/client/deliverables.ts

@@ -23,6 +23,7 @@ export function basename(path: string): string {
 export function dirname(path: string): string {
   const normalized = path.replace(/[/\\]+$/, '');
   const at = Math.max(normalized.lastIndexOf('/'), normalized.lastIndexOf('\\'));
+  if (at === 0 || (at === 2 && /^[A-Za-z]:/.test(normalized))) return normalized.slice(0, at + 1);
   return at === -1 ? '.' : normalized.slice(0, at) || '.';
 }
 

package/src/client/index.tsx

@@ -6,6 +6,8 @@ import type { SessionId } from '@deepseek-ai/dsh-session/types';
 import { resolveWorkspacePath } from '@deepseek-ai/dsh-util-workspace-path';
 import * as workspacePathPkg from '@deepseek-ai/dsh-util-workspace-path';
 import { dirname } from './deliverables.js';
+import { isAbsoluteWorkspacePath } from '../workspace-path.js';
+import { ensureStyles } from './styles.js';
 import type {} from '@deepseek-ai/dsh-client-ui-conversation/client';
 import type {} from '@deepseek-ai/dsh-client-ui-renderer/client';
 import { Reader } from './Reader.js';
@@ -17,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 {
@@ -52,12 +55,21 @@ 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'];
 
+// All CSS imports have injected their nodes before this module's body runs.
+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
@@ -138,7 +150,7 @@ export function apply(ctx: Context): void {
               const res = await fetch('/better-display/reveal', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ path: targetPath }),
+                body: JSON.stringify({ path: targetPath, sessionId }),
               });
               if (res.ok) {
                 const data = await res.json();
@@ -150,6 +162,10 @@ export function apply(ctx: Context): void {
 
             // 2. Fallback to official opener with parent directory
             const parentDir = dirname(targetPath);
+            if (!isAbsoluteWorkspacePath(parentDir)) {
+              console.warn('[dsh-better-display] reveal failed; refusing to open a relative parent:', targetPath);
+              return;
+            }
             const remote = ctx.remote as unknown as { session?: { openWorkspacePath: (arg: { path: string }) => Promise<{ ok: boolean; error?: { message: string } }> } } | undefined;
             const remoteSession = remote?.session
               ?? (ctx.get?.('remote.session') as unknown as { openWorkspacePath: (arg: { path: string }) => Promise<{ ok: boolean; error?: { message: string } }> } | undefined);