dsh-better-display 0.1.1

package/src/client/TimelineRail.module.css

@@ -0,0 +1,170 @@
+/* Zero-height sticky slot: floats over the transcript right gutter */
+.slot {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  height: 0;
+  pointer-events: none;
+}
+
+.frame {
+  --turn-rail-band: calc(
+    var(--dsh-conversation-viewport-height, 100dvh) - var(--dsh-composer-height, 152px)
+  );
+  --turn-preview-height: 100px;
+
+  position: absolute;
+  top: calc(var(--turn-rail-band) / 2);
+  /* .root is the containing block (container-type creates layout containment)
+     and already reserves the right gutter via its own padding, so a small
+     positive inset keeps the rail inside the gutter, clear of the text. */
+  right: 6px;
+  width: 26px;
+  height: min(
+    var(--turn-natural-height),
+    max(0px, calc(var(--turn-rail-band) - 64px)),
+    420px
+  );
+  cursor: pointer;
+  pointer-events: auto;
+  transform: translateY(-50%);
+  transition: height 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.scroller {
+  position: absolute;
+  inset: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: none;
+}
+
+.scroller::-webkit-scrollbar {
+  display: none;
+}
+
+.fadeTop {
+  mask-image: linear-gradient(to bottom, transparent 0, #000 24px, #000 100%);
+  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24px, #000 100%);
+}
+
+.fadeBottom {
+  mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 24px), transparent 100%);
+  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 24px), transparent 100%);
+}
+
+.fadeTop.fadeBottom {
+  mask-image: linear-gradient(to bottom, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
+  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
+}
+
+.marks {
+  position: relative;
+  height: var(--turn-natural-height);
+}
+
+.markPosition {
+  position: absolute;
+  top: calc(var(--turn-natural-position) + var(--turn-rail-inset));
+  right: 0;
+  left: 0;
+  height: 12px;
+  transform: translateY(-50%);
+  transition: top 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.mark {
+  position: absolute;
+  inset: 0 0 0 auto;
+  width: 24px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  pointer-events: none;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.tick {
+  border-radius: 2px;
+  flex: none;
+  transition: width 100ms cubic-bezier(0.16, 1, 0.3, 1),
+              height 100ms cubic-bezier(0.16, 1, 0.3, 1),
+              opacity 100ms ease,
+              background-color 140ms ease;
+}
+
+.markBusy .tick {
+  animation: markBusyPulse 1s ease-in-out infinite alternate;
+}
+
+@keyframes markBusyPulse {
+  from { width: 8px; opacity: 0.4; }
+  to { width: 18px; opacity: 1; }
+}
+
+.preview {
+  position: absolute;
+  top: clamp(
+    0px,
+    calc(
+      var(--turn-natural-position) + var(--turn-rail-inset)
+      - var(--turn-scroll-top, 0px) - var(--turn-preview-height) / 2
+    ),
+    calc(100% - var(--turn-preview-height))
+  );
+  right: calc(100% + 10px);
+  box-sizing: border-box;
+  width: min(280px, calc(100cqw - 120px));
+  max-height: var(--turn-preview-height);
+  overflow: hidden;
+  padding: 10px 12px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 10px;
+  color: var(--dsw-alias-label-primary);
+  background: var(--dsw-alias-bg-base);
+  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
+  backdrop-filter: blur(12px);
+  pointer-events: none;
+  animation: previewFadeIn 120ms ease-out;
+  transition: top 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
+  z-index: 40;
+}
+
+@keyframes previewFadeIn {
+  from { opacity: 0; transform: translateX(4px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+
+.previewPrompt {
+  font-size: 12px;
+  line-height: 18px;
+  font-weight: 500;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-word;
+}
+
+.previewResponse {
+  margin-top: 4px;
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 11px;
+  line-height: 16px;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-word;
+}
+
+@media (max-width: 960px) {
+  .slot {
+    display: none !important;
+  }
+}

package/src/client/TimelineRail.tsx

@@ -0,0 +1,262 @@
+import {
+  memo, useEffect, useId, useRef, useState,
+  type CSSProperties, type MouseEvent, type PointerEvent,
+} from 'react';
+import type { TimelineItem } from './timeline.js';
+import css from './TimelineRail.module.css';
+
+interface TimelineRailProps {
+  items: readonly TimelineItem[];
+  activeTurn: number | null;
+  busyTurn?: number | null;
+  onNavigate: (item: TimelineItem) => void;
+}
+
+const TURN_SPACING_PX = 12;
+const RAIL_INSET_PX = 6;
+const FADE_PX = 24;
+
+type TurnPositionStyle = CSSProperties & {
+  readonly '--turn-natural-position': string;
+};
+
+type TurnFrameStyle = CSSProperties & {
+  readonly '--turn-natural-height': string;
+  readonly '--turn-rail-inset': string;
+  readonly '--turn-scroll-top': string;
+};
+
+function itemPosition(index: number): TurnPositionStyle {
+  return { '--turn-natural-position': `${index * TURN_SPACING_PX}px` };
+}
+
+function frameStyle(count: number, scrollTop: number): TurnFrameStyle {
+  return {
+    '--turn-natural-height': `${(count - 1) * TURN_SPACING_PX + 2 * RAIL_INSET_PX}px`,
+    '--turn-rail-inset': `${RAIL_INSET_PX}px`,
+    '--turn-scroll-top': `${scrollTop}px`,
+  };
+}
+
+function itemIndexAtPointer(
+  items: readonly TimelineItem[],
+  frame: HTMLElement,
+  scrollTop: number,
+  clientY: number,
+): number {
+  const rect = frame.getBoundingClientRect();
+  const offset = clientY - rect.top + scrollTop - RAIL_INSET_PX;
+  return Math.max(0, Math.min(items.length - 1, Math.round(offset / TURN_SPACING_PX)));
+}
+
+interface RailScrollState {
+  readonly top: number;
+  readonly canScrollUp: boolean;
+  readonly canScrollDown: boolean;
+}
+
+const RAIL_AT_REST: RailScrollState = { top: 0, canScrollUp: false, canScrollDown: false };
+
+function railScrollState(scroller: HTMLElement): RailScrollState {
+  const top = scroller.scrollTop;
+  return {
+    top,
+    canScrollUp: top > 1,
+    canScrollDown: top < scroller.scrollHeight - scroller.clientHeight - 1,
+  };
+}
+
+export const TimelineRail = memo(function TimelineRail({
+  items,
+  activeTurn,
+  busyTurn,
+  onNavigate,
+}: TimelineRailProps) {
+  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
+  const [scrollState, setScrollState] = useState<RailScrollState>(RAIL_AT_REST);
+  const scrollerRef = useRef<HTMLDivElement | null>(null);
+  const pointerInsideRef = useRef(false);
+  const previewId = useId();
+
+  const syncScrollState = () => {
+    const scroller = scrollerRef.current;
+    if (!scroller) return;
+    const next = railScrollState(scroller);
+    setScrollState(cur => (cur.top === next.top && cur.canScrollUp === next.canScrollUp && cur.canScrollDown === next.canScrollDown ? cur : next));
+  };
+
+  useEffect(() => {
+    const scroller = scrollerRef.current;
+    if (!scroller || typeof ResizeObserver === 'undefined') return;
+    const observer = new ResizeObserver(syncScrollState);
+    observer.observe(scroller);
+    return () => observer.disconnect();
+  }, []);
+
+  useEffect(syncScrollState, [items.length]);
+
+  // Keep active mark visible
+  useEffect(() => {
+    const scroller = scrollerRef.current;
+    const index = items.findIndex(item => item.turn === activeTurn);
+    if (!scroller || index < 0 || pointerInsideRef.current) return;
+    const markTop = index * TURN_SPACING_PX + RAIL_INSET_PX;
+    const viewTop = scroller.scrollTop;
+    const viewHeight = scroller.clientHeight;
+    if (viewHeight <= 0 || (markTop >= viewTop + FADE_PX && markTop <= viewTop + viewHeight - FADE_PX)) return;
+    const target = Math.max(0, markTop - viewHeight / 2);
+    if (typeof scroller.scrollTo === 'function') {
+      scroller.scrollTo({ top: target, behavior: 'smooth' });
+    } else {
+      scroller.scrollTop = target;
+    }
+    syncScrollState();
+  }, [activeTurn, items]);
+
+  if (items.length < 2) return null;
+
+  const preview = hoveredIndex !== null && hoveredIndex >= 0 ? items[hoveredIndex] : undefined;
+  const previewPosition = hoveredIndex !== null && hoveredIndex >= 0 ? itemPosition(hoveredIndex) : undefined;
+
+  const onPointerMove = (event: PointerEvent<HTMLElement>) => {
+    const scroller = scrollerRef.current;
+    const scrollTop = scroller?.scrollTop ?? 0;
+    const idx = itemIndexAtPointer(items, event.currentTarget, scrollTop, event.clientY);
+    setHoveredIndex(idx);
+  };
+
+  const onPointerLeave = () => {
+    pointerInsideRef.current = false;
+    setHoveredIndex(null);
+  };
+
+  const navigateAtPointer = (event: MouseEvent<HTMLElement>) => {
+    const scroller = scrollerRef.current;
+    const scrollTop = scroller?.scrollTop ?? 0;
+    const idx = itemIndexAtPointer(items, event.currentTarget, scrollTop, event.clientY);
+    const item = items[idx];
+    if (item !== undefined) onNavigate(item);
+  };
+
+  const fadeClasses = [css.scroller];
+  if (scrollState.canScrollUp) fadeClasses.push(css.fadeTop);
+  if (scrollState.canScrollDown) fadeClasses.push(css.fadeBottom);
+
+  return (
+    <div className={css.slot}>
+      <nav
+        className={css.frame}
+        style={frameStyle(items.length, scrollState.top)}
+        aria-label="轮次导航时间轴"
+        onClick={navigateAtPointer}
+        onPointerMove={onPointerMove}
+        onPointerEnter={() => { pointerInsideRef.current = true; }}
+        onPointerLeave={onPointerLeave}
+        onMouseDown={event => { event.preventDefault(); }}
+      >
+        <div
+          ref={scrollerRef}
+          className={fadeClasses.join(' ')}
+          onScroll={syncScrollState}
+        >
+          <div className={css.marks}>
+            {items.map((item, index) => {
+              const isBusy = busyTurn === item.turn;
+              const isActive = activeTurn === item.turn;
+              const isUnloaded = item.anchor.kind === 'unloaded';
+
+              // Wave calculation: peak at cursor, smoothly tapering off in width and height
+              let width = isUnloaded ? 6 : 8;
+              let height = 2;
+              let opacity = isUnloaded ? 0.3 : 0.45;
+              let background = 'var(--dsw-alias-label-tertiary)';
+
+              if (hoveredIndex !== null) {
+                const diff = Math.abs(index - hoveredIndex);
+                if (diff === 0) {
+                  // Cursor peak (最长最高)
+                  width = 26;
+                  height = 2.8;
+                  opacity = 1.0;
+                  background = 'var(--dsw-alias-label-primary)';
+                } else if (diff === 1) {
+                  // 旁边第 1 阶 (次长次高)
+                  width = 18;
+                  height = 2.2;
+                  opacity = 0.8;
+                  background = 'var(--dsw-alias-label-primary)';
+                } else if (diff === 2) {
+                  // 旁边第 2 阶 (继续变矮变短)
+                  width = 13;
+                  height = 1.8;
+                  opacity = 0.6;
+                  background = 'var(--dsw-alias-label-secondary)';
+                } else if (diff === 3) {
+                  // 旁边第 3 阶 (平缓过渡)
+                  width = 9;
+                  height = 1.6;
+                  opacity = 0.45;
+                  background = 'var(--dsw-alias-label-tertiary)';
+                } else {
+                  // 远离光标的基线
+                  width = 8;
+                  height = 2;
+                  opacity = 0.35;
+                  background = 'var(--dsw-alias-label-tertiary)';
+                }
+              } else if (isActive) {
+                width = 20;
+                height = 2.4;
+                opacity = 0.95;
+                background = 'var(--dsw-alias-label-primary)';
+              }
+
+              const tickStyle: CSSProperties = {
+                width: `${width}px`,
+                height: `${height}px`,
+                opacity,
+                backgroundColor: background,
+              };
+
+              const markClasses = [css.mark];
+              if (isBusy) markClasses.push(css.markBusy);
+
+              return (
+                <div key={item.turn} className={css.markPosition} style={itemPosition(index)}>
+                  <button
+                    type="button"
+                    className={markClasses.join(' ')}
+                    aria-label={`第 ${item.turn + 1} 轮`}
+                    aria-current={isActive ? 'true' : undefined}
+                    aria-busy={isBusy ? 'true' : undefined}
+                    aria-describedby={hoveredIndex === index ? previewId : undefined}
+                    onMouseDown={event => { event.preventDefault(); }}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onNavigate(item);
+                    }}
+                    onFocus={() => setHoveredIndex(index)}
+                    onBlur={() => setHoveredIndex(null)}
+                  >
+                    <span className={css.tick} style={tickStyle} />
+                  </button>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+
+        {preview !== undefined && previewPosition !== undefined && (
+          <div id={previewId} role="tooltip" className={css.preview} style={previewPosition}>
+            <div className={css.previewPrompt}>
+              {preview.prompt || `第 ${preview.turn + 1} 轮`}
+            </div>
+            {preview.response !== '' && (
+              <div className={css.previewResponse}>{preview.response}</div>
+            )}
+          </div>
+        )}
+      </nav>
+    </div>
+  );
+});

package/src/client/ToolActivity.tsx

@@ -0,0 +1,214 @@
+import { memo, useEffect, useId, useMemo, useRef, useState } from 'react';
+import type { ToolCallBlock, ToolResultNode } from '@deepseek-ai/dsh-client-ui-conversation/client';
+import type { DiffHunk, ReadBlockLine, SearchFileGroup } from '@deepseek-ai/dsh-client-ui-primitives';
+import { DiffBlock, DisclosureRow, JsonTree, ReadBlock, SearchBlock, TerminalBlock, WebBlock,
+  IconApiOutline14, IconBrowseOutline16, IconEditOutline16, IconSearchOutline16, IconSkillOutline16, IconSparkle16 } from '@deepseek-ai/dsh-client-ui-primitives';
+import { Blocks, contentBlocks } from './Blocks.js';
+import { ProcessFragment } from './motion.js';
+import { activityPhase, activitySummary, executionFacts, objectValue, toolIdentity } 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';
+import { McpAppFrame, StreamingMcpAppPlaceholder } from './McpAppFrame.js';
+import { diffBlockLabels, jsonTreeLabels, readBlockLabels, searchBlockLabels, terminalBlockLabels, webBlockLabels } from './primitive-labels.js';
+import css from './Reader.module.css';
+
+const LABEL: Record<ToolPhase, string> = { preparing: '输入生成中', running: '执行中', returned: '已返回', succeeded: '已完成', failed: '失败', interrupted: '已中断' };
+const ICONS = { write: IconEditOutline16, read: IconBrowseOutline16, terminal: IconApiOutline14, search: IconSearchOutline16, web: IconSearchOutline16, other: IconSparkle16 } satisfies Record<ToolCategory, unknown>;
+const number = new Intl.NumberFormat('zh-CN');
+const language = (path: string | undefined) => path?.split('.').at(-1);
+const duration = (ms: number) => ms < 1000 ? `${Math.round(ms)} 毫秒` : `${(ms / 1000).toFixed(ms < 10000 ? 1 : 0)} 秒`;
+
+function generatedInput(content: string, target: string | undefined, preparing: boolean) {
+  const lines = content.split('\n').map((text, index) => ({ number: index + 1, text }));
+  const visible = preparing ? lines.slice(-12) : lines.slice(0, 1600);
+  return <div data-reader-tool-file><p className={css.toolDetailNote}>{preparing ? '正在生成的输入 · 尚未执行 · 末尾 12 行' : '工具输入中的文件内容'}{!preparing && lines.length > visible.length ? ' · 预览前 1,600 行，完整内容在原始数据中' : ''}</p>
+    <ReadBlock label={target ?? '文件内容'} lang={language(target)} lines={visible} totalLines={lines.length} maxLines={16} labels={readBlockLabels} />
+  </div>;
+}
+
+function InputView({ model, preparing, fillComposer }: { model: ReturnType<typeof activitySummary>; preparing: boolean; fillComposer: BlockRenderProps['fillComposer'] }) {
+  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>;
+  return <JsonTree data={model.args} label={preparing ? '已收到的输入字段' : '工具输入'} labels={jsonTreeLabels} />;
+}
+
+function readLines(value: unknown): ReadBlockLine[] | null {
+  if (!Array.isArray(value)) return null;
+  const lines: ReadBlockLine[] = [];
+  for (const item of value) {
+    const row = objectValue(item);
+    if (typeof row?.number !== 'number' || !Number.isInteger(row.number) || typeof row.text !== 'string') return null;
+    lines.push({ number: row.number, text: row.text });
+  }
+  return lines;
+}
+
+function diffHunks(value: unknown): DiffHunk[] | null {
+  if (!Array.isArray(value) || value.length === 0) return null;
+  const diffs: DiffHunk[] = [];
+  for (const item of value) {
+    const row = objectValue(item);
+    if (typeof row?.path !== 'string' || (row.oldText !== null && typeof row.oldText !== 'string') || typeof row.newText !== 'string') return null;
+    diffs.push({ path: row.path, oldText: row.oldText, newText: row.newText });
+  }
+  return diffs;
+}
+
+function searchFiles(value: unknown): SearchFileGroup[] | null {
+  if (!Array.isArray(value)) return null;
+  const files: SearchFileGroup[] = [];
+  for (const item of value) {
+    const row = objectValue(item);
+    if (typeof row?.path !== 'string' || !Array.isArray(row.matches)) return null;
+    const matches: { lineNumber: number; line: string }[] = [];
+    for (const itemMatch of row.matches) {
+      const match = objectValue(itemMatch);
+      if (typeof match?.lineNumber !== 'number' || !Number.isInteger(match.lineNumber) || typeof match.line !== 'string') return null;
+      matches.push({ lineNumber: match.lineNumber, line: match.line });
+    }
+    files.push({ path: row.path, matches });
+  }
+  return files;
+}
+
+function ResultView({ entry, model, phase, ...render }: BlockRenderProps & { entry: ToolActivityEntry; model: ReturnType<typeof activitySummary>; phase: ToolPhase }) {
+  if ((model.name === 'render_ui' || model.name === 'show_widget') && typeof model.args?.html === 'string') {
+    return <McpAppFrame html={model.args.html as string} title={typeof model.args.title === 'string' ? (model.args.title as string) : undefined} fillComposer={render.fillComposer} />;
+  }
+  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} />
+  </>;
+  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 (model.category === 'terminal') {
+    const facts = executionFacts(block);
+    const output = text.replace(/\n\[(?:exit code: \d+|killed by signal: [^\]\n]+)\]$/, '');
+    return <div data-reader-tool-terminal><TerminalBlock command={model.command ?? model.name} cwd={model.cwd}
+      output={output} exitCode={facts.exitCode} signal={facts.signal} maxLines={18} labels={terminalBlockLabels} /></div>;
+  }
+  const lines = readLines(meta?.lines);
+  if (model.category === 'read' && typeof meta?.path === 'string' && typeof meta.totalLines === 'number' && lines) return <div data-reader-tool-file><ReadBlock label={meta.path} lang={typeof meta.lang === 'string' ? meta.lang : undefined} lines={lines} totalLines={meta.totalLines} maxLines={18} labels={readBlockLabels} /></div>;
+  const diffs = diffHunks(meta?.diffs);
+  if (model.category === 'write' && diffs) return <div data-reader-tool-diff><DiffBlock diffs={diffs} maxLines={18} labels={diffBlockLabels} /></div>;
+  if (model.category === 'search' && typeof meta?.total === 'number' && typeof meta.truncated === 'boolean') {
+    if (meta.shape === 'paths' && Array.isArray(meta.paths) && meta.paths.every((path): path is string => typeof path === 'string')) return <div data-reader-tool-search><SearchBlock kind="paths" paths={meta.paths} total={meta.total} truncated={meta.truncated} maxLines={18} labels={searchBlockLabels} /></div>;
+    const files = searchFiles(meta.files);
+    if (meta.shape === 'matches' && files) return <div data-reader-tool-search><SearchBlock kind="matches" files={files} total={meta.total} truncated={meta.truncated} maxLines={18} labels={searchBlockLabels} /></div>;
+  }
+  if (model.category === 'web' && typeof meta?.truncated === 'boolean') {
+    if (model.name === 'web_fetch' && typeof meta.url === 'string' && typeof meta.statusCode === 'number') return <div data-reader-tool-web><WebBlock kind="fetch" url={meta.url} statusCode={meta.statusCode} truncated={meta.truncated} labels={webBlockLabels} /></div>;
+    if (model.name === 'web_search' && Array.isArray(meta.sources)) {
+      const sources = meta.sources.flatMap(source => {
+        const item = objectValue(source);
+        return typeof item?.url === 'string' ? [{ url: item.url, ...(typeof item.title === 'string' ? { title: item.title } : {}), ...(typeof item.snippet === 'string' ? { snippet: item.snippet } : {}), ...(typeof item.publishedAt === 'string' ? { publishedAt: item.publishedAt } : {}) }] : [];
+      });
+      if (sources.length === meta.sources.length) return <div data-reader-tool-web><WebBlock kind="search" sources={sources} answer={typeof meta.answer === 'string' ? meta.answer : undefined} truncated={meta.truncated} labels={webBlockLabels} /></div>;
+    }
+  }
+  // A trace/export may omit wire presentation. Keep the generated input clearly
+  // labelled; it is not proof of an applied diff or a successful file mutation.
+  if (model.category === 'write' && model.content && !block.isError) return <>
+    <p className={css.toolDetailNote}>文件工具已返回。以下为提交的内容；完整返回记录可在「原始数据」查看。</p>
+    {generatedInput(model.content, model.target, false)}
+  </>;
+  const content: ToolResultNode['content'] = block.content;
+  if (content.some(item => item.type === 'text')) return <div className={css.toolDocument}><Blocks {...render} blocks={contentBlocks(content).filter(item => item.kind === 'text')} source="tool" /></div>;
+  if (content.length) return <p className={css.toolDetailNote}>图片或扩展内容已在对话中单独展示。</p>;
+  return <p className={css.toolDetailNote}>工具没有返回可展示的内容。</p>;
+}
+
+/** One occurrence, keyed by call id all the way from generation to result. */
+export const ToolActivity = memo(function ToolActivityView({ entry, motion, turnClosed, onRead, depth = 0, ...render }: BlockRenderProps & {
+  entry: ToolActivityEntry; motion: boolean; turnClosed: boolean; onRead: () => void; depth?: number;
+}) {
+  const [open, setOpen] = useState(false);
+  const [tab, setTab] = useState<'result' | 'input' | 'raw'>('result');
+  const control = useRef<HTMLElement | null>(null);
+  const panel = useRef<HTMLDivElement>(null);
+  const [selected, setSelected] = useState(false);
+  const detailId = useId();
+  const tabRefs = useRef<(HTMLButtonElement | null)[]>([]);
+  const model = useMemo(() => activitySummary(entry), [entry.block, entry.draft]);
+  const phase = activityPhase(entry, turnClosed);
+  const heldPreview = useRef({ entry, model, phase });
+  if (!selected) heldPreview.current = { entry, model, phase };
+  const preview = heldPreview.current;
+  useEffect(() => {
+    const track = () => {
+      const selection = document.getSelection();
+      setSelected(!!selection && !selection.isCollapsed && !!selection.anchorNode && !!panel.current?.contains(selection.anchorNode));
+    };
+    document.addEventListener('selectionchange', track);
+    return () => document.removeEventListener('selectionchange', track);
+  }, []);
+  const facts = executionFacts(entry.block);
+  const Icon = model.name === 'skill' ? IconSkillOutline16 : ICONS[model.category];
+  const block = entry.block;
+  const native = block ? toolRowModel(model.name, block) : null;
+  const skillName = typeof model.args?.name === 'string' ? model.args.name.split('\n')[0] : model.raw.split('\n')[0];
+  const rowTitle = model.name === 'skill' ? 'Skill' : native?.title ?? VARIANT_TITLES[classifyTool(model.name)];
+  const rowSummary = phase === 'interrupted' ? '已停止 · 调用记录保留' : model.name === 'skill' ? skillName : native?.errorSummary ?? native?.summary
+    ?? (classifyTool(model.name) === 'others' ? `${model.name} · ${model.target ?? model.title}` : model.target ?? model.title);
+  const showState = phase === 'preparing' || phase === 'running' || phase === 'failed' || phase === 'interrupted';
+  const elapsed = block && 'kind' in block && block.callTime != null ? Math.max(0, block.time - block.callTime) : null;
+  const rawResult = useMemo(() => {
+    const value = preview.entry.block;
+    return value && 'kind' in value ? JSON.stringify({ content: value.content, isError: value.isError, meta: value.meta }, null, 2) : '';
+  }, [preview.entry.block]);
+  const tabs = [['result', phase === 'preparing' ? '生成预览' : '结果'], ['input', '输入'], ['raw', '原始数据']] as const;
+  const activate = (index: number) => { const item = tabs[(index + tabs.length) % tabs.length]!; setTab(item[0]); tabRefs.current[(index + tabs.length) % tabs.length]?.focus(); };
+  if (depth > 6) return <p className={css.meta}>更深的嵌套调用可在原对话查看。</p>;
+  return <div ref={element => { control.current = element?.querySelector<HTMLElement>('[data-disclosure-row]') ?? null; }} className={css.toolActivity} data-reader-tool-call={entry.callId} data-tool-phase={phase} data-tool-args-length={model.raw.length} data-tool-category={model.category} data-expanded={open} data-ud-check="reader-tool-activity">
+    <DisclosureRow icon={<Icon size={14} />} title={rowTitle} open={open} expandable expandOnRowClick keepContentWhenOpen
+      onToggle={() => { onRead(); setOpen(value => !value); }} rowClassName={css.nativeToolRow}
+      collapsedContent={<><span className={css.rowSeparator} aria-hidden /><span className={css.nativeToolSummary} title={rowSummary} data-reader-tool-summary>{rowSummary}</span>
+        {showState && <span className={css.toolState} data-phase={phase}>{LABEL[phase]}</span>}</>} />
+    <ProcessFragment open={open} motion={motion} onRead={onRead} returnFocusTo={control} nodeKey={`${entry.key}:detail`} framed>
+      <div id={detailId} className={css.toolDetails}>
+        <div className={css.toolLedger} aria-live="off">
+          <span>工具 · <span className={css.toolEngine}>{model.name}</span></span>
+          <span data-reader-tool-progress>{phase === 'preparing' ? `已接收 ${number.format(model.raw.length)} 字符输入` : phase === 'running' ? '已提交 · 等待工具返回' : phase === 'interrupted' ? '已停止 · 输入记录保留' : elapsed !== null ? `执行 ${duration(elapsed)}` : '结果已记录'}</span>
+          {facts.exitCode !== undefined && <span>退出码 {facts.exitCode}</span>}
+          {facts.signal && <span>信号 {facts.signal}</span>}
+        </div>
+        <div className={css.toolTabs} role="tablist" aria-label={`${model.title}的执行数据`} onKeyDown={event => {
+          const index = tabs.findIndex(item => item[0] === tab);
+          if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') { event.preventDefault(); activate(index + (event.key === 'ArrowRight' ? 1 : -1)); }
+          else if (event.key === 'Home' || event.key === 'End') { event.preventDefault(); activate(event.key === 'Home' ? 0 : tabs.length - 1); }
+        }}>{tabs.map(([id, title], index) => <button key={id} ref={element => { tabRefs.current[index] = element; }} type="button" role="tab" id={`${detailId}-${id}`} aria-selected={tab === id} aria-controls={`${detailId}-panel`} tabIndex={tab === id ? 0 : -1} onClick={() => setTab(id)}>{title}</button>)}</div>
+        <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 === '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>
+    </ProcessFragment>
+    {!!block?.subCalls.length && <div className={css.toolChildren} aria-label="子调用">{block.subCalls.map((child, index) => <ToolActivity key={child.callId} {...render}
+      entry={{ kind: 'tool', key: `reader-tool:${child.callId}`, callId: child.callId, step: entry.step, order: index, block: child }}
+      motion={motion} turnClosed={turnClosed} onRead={onRead} depth={depth + 1} />)}</div>}
+  </div>;
+}, (previous, next) => previous.entry.callId === next.entry.callId && previous.entry.block === next.entry.block
+  && previous.entry.draft === next.entry.draft && previous.entry.step === next.entry.step
+  && previous.motion === next.motion && previous.turnClosed === next.turnClosed && previous.depth === next.depth
+  && previous.onRead === next.onRead && previous.renderSlotChain === next.renderSlotChain && previous.loadImage === next.loadImage && previous.fillComposer === next.fillComposer);
+
+/** Rich media (images, MCP widgets) rendered outside the folded tool ledger. */
+export function ToolMedia({ block, depth = 0, ...render }: BlockRenderProps & { block: ToolCallBlock; depth?: number }) {
+  if (depth > 6) return null;
+  const settled = 'kind' in block;
+  const visible = settled ? contentBlocks(block.content).filter(item => item.kind === 'image' || item.kind === 'other') : [];
+  return <>
+    {visible.length > 0 && <Blocks {...render} blocks={visible} source="tool" />}
+    {block.subCalls.map(child => <ToolMedia key={child.callId} {...render} block={child} depth={depth + 1} />)}
+  </>;
+}