@drscrewdriver/dsh-better-display 0.3.3-fork.1

package/src/client/ToolActivity.tsx

@@ -0,0 +1,274 @@
+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,
+  IconApiOutlineRegular, IconBrowseOutlineRegular, IconEditOutlineRegular, IconSearchOutlineRegular, IconSkillOutlineRegular, IconSparkleRegular } from '@deepseek-ai/dsh-client-ui-primitives';
+import { Blocks, contentBlocks } from './Blocks.js';
+import { OfficialTool } from './OfficialContent.js';
+import { ProcessFragment } from './motion.js';
+import { activityPhase, activitySummary, callDiffHunks, diffTotals, executionFacts, objectValue, toolIdentity } from './tool-activity.js';
+import type { ToolActivityEntry, ToolCategory, ToolPhase } from './tool-activity.js';
+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: IconEditOutlineRegular, read: IconBrowseOutlineRegular, terminal: IconApiOutlineRegular, search: IconSearchOutlineRegular, web: IconSearchOutlineRegular, code: IconApiOutlineRegular, other: IconSparkleRegular } satisfies Record<ToolCategory, unknown>;
+const number = new Intl.NumberFormat('zh-CN');
+const language = (path: string | undefined) => path?.split('.').at(-1);
+const duration = (ms: number) => ms < 1000 ? `${Math.round(ms)} 毫秒` : `${(ms / 1000).toFixed(ms < 10000 ? 1 : 0)} 秒`;
+
+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;
+}
+
+/** A step past this reads as slow rather than merely in progress. */
+const SLOW_TOOL_MS = 10_000;
+
+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(props: BlockRenderProps & { entry: ToolActivityEntry; model: ReturnType<typeof activitySummary>; phase: ToolPhase }) {
+  const { official, entry, model } = props;
+  const fallback = <ResultFallback {...props} />;
+  if (!official || !entry.block || model.name === 'render_ui' || model.name === 'show_widget') return fallback;
+  return <OfficialTool {...props} official={official} block={entry.block} toolName={model.name} cwd={props.cwd ?? model.cwd} fallback={fallback} />;
+}
+
+function ResultFallback({ entry, model, phase, ...render }: BlockRenderProps & { entry: ToolActivityEntry; model: ReturnType<typeof activitySummary>; phase: ToolPhase }) {
+  if ((model.name === 'render_ui' || model.name === 'show_widget') && typeof model.args?.html === 'string') {
+    return <McpAppFrame html={model.args.html as string} title={typeof model.args.title === 'string' ? (model.args.title as string) : undefined} fillComposer={render.fillComposer} />;
+  }
+  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>;
+  // The host's own hunks when it sent them; otherwise derive them from the call's
+  // arguments, which is also what the official row does while a write is pending.
+  // Both the counts and this card read the same source, so they cannot disagree.
+  const diffs = diffHunks(meta?.diffs) ?? callDiffHunks(block, model.args, model.name);
+  if (diffs.length) 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;
+  // A code interpreter's product is its result, not prose. Without this branch
+  // the output fell through to the generic document path below, which emits it
+  // as reader answer text — so a run_code card sat in the transcript outside
+  // every fold, the exact block the reader wanted to be able to close.
+  if (model.category === 'code') {
+    const output = content.filter(item => item.type === 'text').map(item => item.text).join('\n');
+    const facts = executionFacts(block);
+    if (output.trim()) return <div data-reader-tool-code>
+      <TerminalBlock command={model.command ?? model.name} cwd={model.cwd} output={output}
+        exitCode={facts.exitCode} signal={facts.signal} maxLines={18} labels={terminalBlockLabels} />
+    </div>;
+    return <p className={css.toolDetailNote}>代码已执行，没有可展示的输出。</p>;
+  }
+  if (content.some(item => item.type === 'text')) return <div className={css.toolDocument}><Blocks {...render} blocks={contentBlocks(content).filter(item => item.kind === 'text')} source="tool" /></div>;
+  if (content.length) return <p className={css.toolDetailNote}>图片或扩展内容已在对话中单独展示。</p>;
+  return <p className={css.toolDetailNote}>工具没有返回可展示的内容。</p>;
+}
+
+/** 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' ? IconSkillOutlineRegular : ICONS[model.category];
+  const block = entry.block;
+  const native = block ? toolRowModel(model.name, block) : null;
+  const skillName = typeof model.args?.name === 'string' ? model.args.name.split('\n')[0] : model.raw.split('\n')[0];
+  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);
+  // Files that changed get the same +/- line counts the official tool row shows,
+  // read straight from the diff the host attached to the result.
+  const diff = useMemo(() => diffTotals(block, model.args, model.name), [block, model.args, model.name]);
+  // The changed lines ride in the row's own expansion, the way the official tool
+  // row shows them — one disclosure, not a second floating widget.
+  const showState = phase === 'preparing' || phase === 'running' || phase === 'failed' || phase === 'interrupted';
+  const running = phase === 'preparing' || phase === 'running';
+  // A step that has not returned yet counts its own seconds, so a long command
+  // reads as progress rather than as a stall. The clock is idle-rendered off the
+  // row's own call time, and disappears the moment the result arrives.
+  const [liveMs, setLiveMs] = useState<number | null>(null);
+  const openedAt = useRef<number | null>(null);
+  useEffect(() => {
+    if (!running) { openedAt.current = null; setLiveMs(null); return; }
+    const stamped = block && 'kind' in block && block.callTime != null ? block.callTime : null;
+    const base = stamped ?? (openedAt.current ??= Date.now());
+    const tick = () => setLiveMs(Math.max(0, Date.now() - base));
+    tick();
+    const timer = setInterval(tick, 200);
+    return () => clearInterval(timer);
+  }, [running, block]);
+  const elapsed = block && 'kind' in block && block.callTime != null ? Math.max(0, block.time - block.callTime) : null;
+  // A step that ran long keeps showing how long it took after it returns: the
+  // number is the point of the readout. A fast step shows nothing once it is done.
+  const shownMs = liveMs ?? (elapsed !== null && elapsed >= SLOW_TOOL_MS ? elapsed : 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
+        {...(running ? { 'data-running': '' } : {})}>{rowSummary}</span>
+        {shownMs !== null && <span className={css.toolElapsed} data-reader-tool-elapsed
+          {...(shownMs >= SLOW_TOOL_MS ? { 'data-slow': '' } : {})}>
+          {(shownMs / 1000).toFixed(shownMs < 10000 ? 1 : 0)}s</span>}
+        {diff && <span className={css.diffStat} data-reader-diff-stat>
+          {diff.added > 0 && <span className={css.diffAdded}>+{number.format(diff.added)}</span>}
+          {diff.removed > 0 && <span className={css.diffRemoved}>-{number.format(diff.removed)}</span>}
+        </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
+  && previous.official === next.official && previous.cwd === next.cwd && previous.openFile === next.openFile);
+
+/** Rich media (images, MCP widgets) rendered outside the folded tool ledger. */
+export function ToolMedia({ block, depth = 0, ...render }: BlockRenderProps & { block: ToolCallBlock; depth?: number }) {
+  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} />)}
+  </>;
+}

package/src/client/TurnMetrics.module.css

@@ -0,0 +1,139 @@
+.container {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  position: relative;
+  font-size: 13px;
+  line-height: 24px;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.pillButton {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 2px 8px;
+  border-radius: 12px;
+  border: 1px solid var(--dsw-alias-border-l1);
+  background: var(--dsw-alias-bg-module-platform);
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 11px;
+  cursor: pointer;
+  outline: none;
+  transition: all 140ms ease;
+  font-family: inherit;
+}
+
+.pillButton:hover, .pillButton[data-active=true] {
+  color: var(--dsw-alias-label-primary);
+  border-color: var(--dsw-alias-border-l2);
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.timeButton {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  height: 28px;
+  padding: 6px 8px;
+  border: none;
+  border-radius: 28px;
+  background: transparent;
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 13px;
+  font-variant-numeric: tabular-nums;
+  line-height: 24px;
+  white-space: nowrap;
+  cursor: pointer;
+  font-family: inherit;
+}
+
+.timeButton:hover, .timeButton[data-active=true] {
+  background: var(--dsw-alias-interactive-bg-hover);
+  color: var(--dsw-alias-label-secondary);
+}
+
+.pillIcon {
+  width: 12px;
+  height: 12px;
+  flex: none;
+  opacity: .8;
+}
+
+.metricsPop {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 0;
+  width: 260px;
+  padding: 12px 14px;
+  border-radius: 10px;
+  background: var(--dsw-alias-bg-base);
+  border: 1px solid var(--dsw-alias-border-l2);
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
+  backdrop-filter: blur(10px);
+  z-index: 50;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  text-align: left;
+  animation: popIn 140ms ease-out;
+}
+
+@keyframes popIn {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.popHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--dsw-alias-label-primary);
+  padding-bottom: 6px;
+  border-bottom: 1px solid var(--dsw-alias-border-l1);
+}
+
+.popSection {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.popSectionTitle {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: .5px;
+  color: var(--dsw-alias-label-tertiary);
+  margin-top: 2px;
+}
+
+.popGrid {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 3px 12px;
+  font-size: 11px;
+  line-height: 18px;
+}
+
+.popLabel {
+  color: var(--dsw-alias-label-secondary);
+}
+
+.popValue {
+  color: var(--dsw-alias-label-primary);
+  font-variant-numeric: tabular-nums;
+  font-weight: 500;
+  text-align: right;
+}
+
+.popBadge {
+  font-size: 10px;
+  padding: 0 4px;
+  border-radius: 3px;
+  background: var(--dsw-alias-border-l1);
+  color: var(--dsw-alias-label-secondary);
+  margin-left: 4px;
+}

package/src/client/TurnMetrics.tsx

@@ -0,0 +1,160 @@
+import { memo, useEffect, useRef, useState } from 'react';
+import type { TurnTailChatData } from '@deepseek-ai/dsh-client-ui-chat/client';
+import { formatRanFor, formatRunDuration } from './message-chrome.js';
+import css from './TurnMetrics.module.css';
+
+type TurnTokenUsage = NonNullable<TurnTailChatData['tokenUsage']>;
+
+export interface TurnMetricsProps {
+  usage?: TurnTokenUsage;
+  runMs?: number;
+  tokensPerSecond?: number;
+  ttftMs?: number;
+}
+
+function formatTokens(count: number): string {
+  if (count >= 1_000_000) return `${(count / 1_000_000).toFixed(2)}M tok`;
+  if (count >= 1000) return `${(count / 1000).toFixed(1)}k tok`;
+  return `${count} tok`;
+}
+
+export const TurnMetrics = memo(function TurnMetrics({
+  usage,
+  runMs,
+  tokensPerSecond,
+  ttftMs,
+}: TurnMetricsProps) {
+  const [open, setOpen] = useState(false);
+  const containerRef = useRef<HTMLSpanElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const onClickOutside = (e: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    };
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setOpen(false);
+    };
+    document.addEventListener('pointerdown', onClickOutside);
+    document.addEventListener('keydown', onKeyDown);
+    return () => {
+      document.removeEventListener('pointerdown', onClickOutside);
+      document.removeEventListener('keydown', onKeyDown);
+    };
+  }, [open]);
+
+  const totalTokens = usage?.totalTokens;
+  const hasTiming = typeof runMs === 'number' && runMs > 0;
+  const hasTokens = typeof totalTokens === 'number' && totalTokens > 0;
+  if (!hasTiming && !hasTokens) return null;
+
+  const cacheHitPercent = usage && usage.cacheReadTokens && usage.totalTokens > usage.outputTokens
+    ? Math.round((usage.cacheReadTokens / (usage.totalTokens - usage.outputTokens)) * 100)
+    : null;
+
+  return (
+    <span ref={containerRef} className={css.container}>
+      {hasTokens && typeof totalTokens === 'number' && (
+        <button
+          type="button"
+          className={css.pillButton}
+          data-active={open}
+          onClick={() => setOpen(v => !v)}
+          aria-expanded={open}
+          title="查看本轮 Token 消耗"
+        >
+          <svg className={css.pillIcon} viewBox="0 0 16 16" fill="none" stroke="currentColor">
+            <ellipse cx="8" cy="4.2" rx="5" ry="2.2" strokeWidth="1.2" />
+            <path d="M3 4.2v7.6c0 1.2 2.2 2.2 5 2.2s5-1 5-2.2V4.2" strokeWidth="1.2" />
+            <path d="M3 8c0 1.2 2.2 2.2 5 2.2s5-1 5-2.2" strokeWidth="1.2" />
+          </svg>
+          <span>用量 {formatTokens(totalTokens)}</span>
+        </button>
+      )}
+      {hasTiming && typeof runMs === 'number' && (
+        <button
+          type="button"
+          className={css.timeButton}
+          data-active={open}
+          onClick={() => setOpen(v => !v)}
+          aria-expanded={open}
+          aria-label={formatRanFor(runMs)}
+          title="查看本轮用时和速度"
+        >
+          <svg className={css.pillIcon} viewBox="0 0 16 16" fill="none" stroke="currentColor">
+            <circle cx="8" cy="8" r="6.5" strokeWidth="1.2" />
+            <path d="M8 4.5v3.8l2.5 1.5" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
+          </svg>
+          <span>{formatRanFor(runMs)}</span>
+        </button>
+      )}
+
+      {open && (
+        <div className={css.metricsPop} role="dialog" aria-label="本轮概况">
+          <div className={css.popHeader}>
+            <span>本轮性能与用量概况</span>
+          </div>
+
+          {hasTiming && typeof runMs === 'number' && (
+            <div className={css.popSection}>
+              <div className={css.popSectionTitle}>耗时与生成速度</div>
+              <div className={css.popGrid}>
+                <span className={css.popLabel}>总用时</span>
+                <span className={css.popValue}>{formatRunDuration(runMs)}</span>
+
+                {typeof tokensPerSecond === 'number' && tokensPerSecond > 0 && (
+                  <>
+                    <span className={css.popLabel}>生成吞吐 (TPS)</span>
+                    <span className={css.popValue}>{tokensPerSecond.toFixed(1)} tok/s</span>
+                  </>
+                )}
+
+                {typeof ttftMs === 'number' && ttftMs > 0 && (
+                  <>
+                    <span className={css.popLabel}>首字延迟 (TTFT)</span>
+                    <span className={css.popValue}>{(ttftMs / 1000).toFixed(2)}s</span>
+                  </>
+                )}
+              </div>
+            </div>
+          )}
+
+          {hasTokens && usage && (
+            <div className={css.popSection}>
+              <div className={css.popSectionTitle}>Token 消耗分解</div>
+              <div className={css.popGrid}>
+                <span className={css.popLabel}>总消耗</span>
+                <span className={css.popValue}>{usage.totalTokens.toLocaleString()} tok</span>
+
+                <span className={css.popLabel}>
+                  输入
+                  {cacheHitPercent !== null && (
+                    <span className={css.popBadge}>命中 {cacheHitPercent}%</span>
+                  )}
+                </span>
+                <span className={css.popValue}>{(usage.totalTokens - usage.outputTokens).toLocaleString()} tok</span>
+
+                {typeof usage.cacheReadTokens === 'number' && usage.cacheReadTokens > 0 && (
+                  <>
+                    <span className={css.popLabel}>缓存读取</span>
+                    <span className={css.popValue}>{usage.cacheReadTokens.toLocaleString()} tok</span>
+                  </>
+                )}
+
+                <span className={css.popLabel}>
+                  输出
+                  {typeof usage.reasoningTokens === 'number' && usage.reasoningTokens > 0 && (
+                    <span className={css.popBadge}>思考 {usage.reasoningTokens.toLocaleString()}</span>
+                  )}
+                </span>
+                <span className={css.popValue}>{usage.outputTokens?.toLocaleString() ?? 0} tok</span>
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </span>
+  );
+});

package/src/client/WaitClock.tsx

@@ -0,0 +1,33 @@
+import { useEffect, useState } from 'react';
+import { formatRunDuration } from './message-chrome.js';
+import css from './Reader.module.css';
+
+/** Past this, a wait stops being a pause and reads as the model not answering. */
+export const WAIT_OVERTIME_MS = 10_000;
+
+/**
+ * How long the model has been given the turn, counted in plain seconds.
+ *
+ * Just the number and, past ten seconds, a「暂未响应」badge — no bar, because the
+ * question the reader has is「how long has this been hanging」, not「how far
+ * along」: there is no known total to be a fraction of.
+ *
+ * The clock restarts whenever the anchor changes, so each wait is timed from the
+ * event that started it rather than from the beginning of the turn.
+ */
+export function WaitClock({ startTime }: { startTime: number | null }) {
+  const [mountedAt] = useState(() => Date.now());
+  const [now, setNow] = useState(() => Date.now());
+  const anchor = startTime ?? mountedAt;
+  useEffect(() => {
+    const id = setInterval(() => setNow(Date.now()), 250);
+    return () => clearInterval(id);
+  }, []);
+  const waited = Math.max(0, now - anchor);
+  const overtime = waited >= WAIT_OVERTIME_MS;
+  return <span className={css.waitClock} data-reader-wait-clock
+    {...(overtime ? { 'data-overtime': '' } : {})}>
+    <span className={css.waitSeconds}>{formatRunDuration(waited)}</span>
+    {overtime && <span className={css.waitOvertime} data-reader-wait-badge>暂未响应</span>}
+  </span>;
+}

package/src/client/WaitingStatus.tsx

@@ -0,0 +1,13 @@
+import { WaitClock } from './WaitClock.js';
+import type { WaitingAnchor } from './waiting-clock.js';
+import css from './Reader.module.css';
+
+export function WaitingStatus({ anchor, label }: { anchor: WaitingAnchor; label: string }) {
+  // A new input gets its own clock even if the waiting indicator stays mounted;
+  // the readout itself is shared with the group status so the two never disagree.
+  return <div className={css.turnStatus} role="status" aria-live="polite" data-reader-turn-status
+    data-reader-wait-start={anchor.time ?? ''}>
+    <span className={css.turnStatusLabel}>{label}</span>
+    <WaitClock key={anchor.key} startTime={anchor.time} />
+  </div>;
+}

package/src/client/conversation-scroll.ts

@@ -0,0 +1,28 @@
+/**
+ * Conversation-column scroll helpers. Official ChatView lands Turns by writing
+ * the enclosing `[data-conversation-scroll]` box; `Element.scrollIntoView`
+ * also walks ancestor scrollers and can lift the sticky composer off the
+ * bottom of the viewport (rail jump to top, then to bottom).
+ */
+
+/** Reading-line offset used by ui-chat ChatView.landOnRow. */
+export const READING_LINE_OFFSET_PX = 24;
+
+/** Active column host when present; otherwise the view-local scroller. */
+export function scrollerOf(from: HTMLElement): HTMLElement {
+  return from.closest('[data-conversation-scroll]') ?? from;
+}
+
+/** Row position in scrollport coordinates (viewport-independent). */
+export function flowTop(row: HTMLElement, scrollport: HTMLElement): number {
+  return row.getBoundingClientRect().top - scrollport.getBoundingClientRect().top;
+}
+
+/**
+ * Place `row` on the conversation scroller only. Never calls scrollIntoView.
+ * @param row - a rendered `[data-reader-turn]` row.
+ * @param scrollport - `scrollerOf` of the reader root.
+ */
+export function landTurn(row: HTMLElement, scrollport: HTMLElement, offsetPx = READING_LINE_OFFSET_PX): void {
+  scrollport.scrollTop += flowTop(row, scrollport) - offsetPx;
+}