@thaut/claude-ide 0.0.0-stage → 1.0.0

package/web/src/components/Markdown.tsx

@@ -0,0 +1,73 @@
+import { Children, cloneElement, isValidElement, memo, useState, type ComponentProps, type ReactElement, type ReactNode } from "react";
+import ReactMarkdown, { type Components } from "react-markdown";
+import remarkGfm from "remark-gfm";
+import rehypeRaw from "rehype-raw";
+import rehypeSanitize from "rehype-sanitize";
+import { markdownHtmlSchema, markdownUrlTransform, rehypeSvgImages } from "../markdown-html.ts";
+import { resolveMarkdownAsset, type MarkdownAssetContext } from "../markdown-assets.ts";
+import { CopyButton } from "./CopyButton.tsx";
+import { remarkCopyTables } from "../markdown-tables.ts";
+import { remarkInlineSvg } from "../markdown-svg.ts";
+import { SvgPreview } from "./SvgPreview.tsx";
+
+/** Code blocks longer than this show their first lines until "show all". */
+const CODE_LINES = 150;
+
+/** A fenced code block: long ones render their start first. */
+function Pre({ children, node: _node, ...rest }: ComponentProps<"pre"> & { node?: unknown }) {
+  const [all, setAll] = useState(false);
+  const kids = Children.toArray(children);
+  const code = kids.length === 1 ? kids[0] : undefined;
+  const text = isValidElement(code) ? (code as ReactElement<{ children?: ReactNode }>).props.children : undefined;
+  const language = isValidElement(code) ? (code as ReactElement<{ className?: string }>).props.className : undefined;
+  const svg = typeof text === "string" && language === "language-svg" && /^\s*<svg\b/i.test(text);
+  let at = -1;
+  if (!all && typeof text === "string") {
+    for (let n = 0; n < CODE_LINES; n++) {
+      at = text.indexOf("\n", at + 1);
+      if (at === -1) break;
+    }
+  }
+  const clipped = typeof text === "string" && at !== -1 && at < text.trimEnd().length;
+  return (
+    <div className="markdown-copy-block markdown-code-block" data-testid="markdown-code-block">
+      {typeof text === "string" && <CopyButton text={text} label="复制代码" className="markdown-copy-button" />}
+      {svg && <div className="rounded-lg border border-border p-4 pt-10"><SvgPreview markup={text} /></div>}
+      {svg ? <details className="mt-2"><summary className="cursor-pointer text-xs text-muted">SVG 源码</summary><pre {...rest}>{children}</pre></details>
+        : <pre {...rest}>{clipped ? cloneElement(code as ReactElement<{ children?: ReactNode }>, { children: text.slice(0, at) }) : children}</pre>}
+      {clipped && !svg && <button className="mt-1 text-xs text-accent hover:underline" onClick={() => setAll(true)} data-testid="show-all">
+        显示全部（共 {text.trimEnd().split("\n").length} 行）
+      </button>}
+    </div>
+  );
+}
+
+function Table({ children, node: _node, "data-copy-markdown": text, ...rest }: ComponentProps<"table"> & { node?: unknown; "data-copy-markdown"?: string }) {
+  return <div className="markdown-copy-block markdown-table-block" data-testid="markdown-table-block">
+    {text !== undefined && <CopyButton text={text} label="复制表格" className="markdown-copy-button" />}
+    <div className="overflow-x-auto"><table {...rest}>{children}</table></div>
+  </div>;
+}
+
+function Image({ node: _node, "data-inline-svg": svg, assetContext, ...rest }: ComponentProps<"img"> & { node?: unknown; "data-inline-svg"?: string; assetContext?: MarkdownAssetContext }) {
+  if (svg) return <SvgPreview markup={svg} alt={rest.alt} />;
+  const src = resolveMarkdownAsset(rest.src ?? "", assetContext);
+  return <img {...rest} src={src} loading="lazy" />;
+}
+
+const components: Components = { pre: Pre, table: Table };
+
+export const Markdown = memo(function Markdown({ text, assetContext }: { text: string; assetContext?: MarkdownAssetContext }) {
+  return (
+    <div className="prose-claude">
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm, remarkCopyTables, remarkInlineSvg]}
+        rehypePlugins={[rehypeRaw, rehypeSvgImages, [rehypeSanitize, markdownHtmlSchema]]}
+        urlTransform={markdownUrlTransform}
+        components={{ ...components, img: (props) => <Image {...props} assetContext={assetContext} /> }}
+      >
+        {text}
+      </ReactMarkdown>
+    </div>
+  );
+});

package/web/src/components/MessageList.tsx

@@ -0,0 +1,458 @@
+import { memo, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, type ReactNode, type RefObject } from "react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import type { Item } from "../transcript.ts";
+import { ItemView, TranscriptContext } from "./Items.tsx";
+import type { useTurnChangeSlots } from "./ProjectExtras.tsx";
+import { Button } from "../ui/Button.tsx";
+import { ChevronDownIcon } from "../ui/icons.tsx";
+import { ChevronIcon } from "./icons.tsx";
+import { defaultTurnCollapsed, groupTurns, visibleTurnItems, turnRebases, rebaseTurnRow, rebaseTurnFolds, setTurnFold, type TranscriptTurn, type TurnFold } from "../turns.ts";
+import { MESSAGE_FONT_OPTIONS, useMessageFontSize, type MessageFontSize } from "../message-font-size.ts";
+import { formatMessageTime, isNewMessageTime } from "../message-time.ts";
+
+/**
+ * The session transcript. Short transcripts render in normal flow; long ones are
+ * virtualized (only rows near the viewport are in the DOM, heights measured as they
+ * render). Either way the list sticks to the bottom while new output arrives, unless
+ * the user has scrolled up.
+ */
+
+/** Above this many rows the list is virtualized. */
+const VIRTUALIZE_FROM = 150;
+/** Distance from the bottom (px) that still counts as "at the bottom". */
+const STICK_SLACK = 80;
+
+type Row = { key: string; item?: Item; showTime?: boolean; before?: ReactNode; node?: ReactNode; nested?: boolean; turn?: { key: string; number: number; expanded: boolean } };
+type ScrollAnchor = { key: string; offset: number; focus?: boolean };
+let savedTurnFolds = new Map<string, TurnFold>();
+let foldRevision = 0;
+type HistoryControls = { older: boolean; newer: boolean; historical: boolean; loading: boolean; error?: string; load: (direction: "latest" | "older" | "newer") => Promise<void> };
+
+export function MessageList({
+  items,
+  loading,
+  running,
+  waiting = false,
+  turnSlots,
+  history,
+}: {
+  items: Item[];
+  loading: boolean;
+  running: boolean;
+  waiting?: boolean;
+  turnSlots: ReturnType<typeof useTurnChangeSlots>;
+  history?: HistoryControls;
+}) {
+  const ref = useRef<HTMLDivElement>(null);
+  const stick = useRef(true);
+  const scrollAnchor = useRef<ScrollAnchor | null>(null);
+  const visibleFrame = useRef<number | null>(null);
+  const preserveFontAnchor = useCallback(() => {
+    const el = ref.current;
+    if (!el || stick.current) return;
+    const top = el.getBoundingClientRect().top;
+    const row = [...el.querySelectorAll<HTMLElement>("[data-row-key]")].find((row) => row.getBoundingClientRect().bottom > top);
+    if (row) scrollAnchor.current = { key: row.dataset.rowKey!, offset: row.getBoundingClientRect().top - top };
+  }, []);
+  const fontSize = useMessageFontSize(preserveFontAnchor);
+  const [visibleTurn, setVisibleTurn] = useState<{ key: string; number: number } | null>(null);
+  const [away, setAway] = useState(false);
+  const { sessionUrl = "", viewKey } = useContext(TranscriptContext);
+  const foldNamespace = viewKey ?? sessionUrl;
+  const [folds, setFolds] = useState(() => new Map(savedTurnFolds));
+  const atLatest = !history?.newer;
+  const turns = useMemo(() => groupTurns(items, running || waiting, atLatest), [items, running, waiting, atLatest]);
+  const previousTurns = useRef<{ namespace: string; turns: TranscriptTurn[] }>({ namespace: foldNamespace, turns: [] });
+  const rebases = useMemo(() => turnRebases(previousTurns.current.namespace === foldNamespace ? previousTurns.current.turns : [], turns), [turns, foldNamespace]);
+  const effectiveFolds = useMemo(() => rebaseTurnFolds(folds, foldNamespace, rebases), [folds, rebases, foldNamespace]);
+  useLayoutEffect(() => {
+    previousTurns.current = { namespace: foldNamespace, turns };
+    // Commit each operation once against the saved cache, then render that exact
+    // snapshot. Replaying changed keys separately changes eviction order at cap.
+    savedTurnFolds = rebaseTurnFolds(savedTurnFolds, foldNamespace, rebases);
+    if (savedTurnFolds !== folds) setFolds(savedTurnFolds);
+  }, [turns, foldNamespace, effectiveFolds, folds]);
+  const loadHistory = (direction: "latest" | "older" | "newer") => {
+    const el = ref.current;
+    if (direction === "latest") { stick.current = true; scrollAnchor.current = null; }
+    else if (el) {
+      stick.current = false;
+      const top = el.getBoundingClientRect().top;
+      const visible = [...el.querySelectorAll<HTMLElement>("[data-row-key]")].find((row) => row.getBoundingClientRect().bottom > top && !row.dataset.rowKey?.startsWith("history-"));
+      if (visible) scrollAnchor.current = { key: visible.dataset.rowKey!, offset: visible.getBoundingClientRect().top - top };
+    }
+    void history?.load(direction);
+  };
+  const rows = useMemo(() => {
+    const out: Row[] = [];
+    // Items from one SDK message share its timestamp: label the run once.
+    let previousItem: Item | undefined;
+    if (history) out.push({ key: "history-controls", node: <div className="flex flex-wrap items-center justify-center gap-2 text-xs text-muted">
+      {history.older && <Button size="sm" disabled={history.loading} onClick={() => loadHistory("older")}>加载更早消息</Button>}
+      {history.historical && <><span>正在查看历史</span><Button size="sm" disabled={history.loading} onClick={() => loadHistory("latest")}>返回最新消息</Button></>}
+      {history.loading && <span>加载中…</span>}
+      {history.error && <><span className="text-danger">{history.error}</span><Button size="sm" onClick={() => loadHistory("latest")}>重新加载</Button></>}
+    </div> });
+    turns.forEach((turn, index) => {
+      const key = `${foldNamespace}:${turn.key}`;
+      // Follow turn lifecycle until the user explicitly chooses an open/closed state.
+      const folded = effectiveFolds.get(key)?.collapsed;
+      const collapsed = folded ?? defaultTurnCollapsed(turn);
+      const visibleItems = visibleTurnItems(turn, folded);
+      // The floating action collapses any visible body, including a final reply
+      // whose process is folded by default. The header still toggles the process.
+      // An explicit fold hides the whole turn, so there is no body to collapse again.
+      const owner = { key: turn.key, number: index + 1, expanded: visibleItems.length > 0 };
+      const add = (row: Row) => out.push({ ...row, turn: owner });
+      const toggle = (button: HTMLButtonElement) => {
+        stick.current = false;
+        scrollAnchor.current = { key: `turn-${turn.key}`, offset: Math.max(0, button.getBoundingClientRect().top - (ref.current?.getBoundingClientRect().top ?? 0)), focus: true };
+        const choice = { collapsed: !collapsed, revision: ++foldRevision };
+        savedTurnFolds = setTurnFold(savedTurnFolds, foldNamespace, key, choice);
+        setFolds(savedTurnFolds);
+      };
+      add({ key: `turn-${turn.key}`, node: <TurnHeader turn={turn} number={index + 1} collapsed={collapsed} waiting={waiting && turn.active && !turn.queued} onToggle={toggle} /> });
+      visibleItems.forEach((item, itemIndex) => {
+        const showTime = isNewMessageTime(item.ts, previousItem?.ts);
+        previousItem = item;
+        add({ key: item.key, item, showTime, before: !collapsed && itemIndex ? turnSlots.before(item.key) : null, nested: true });
+      });
+      if (collapsed) return;
+      // Change bars preceding the next prompt belong inside the preceding turn.
+      const next = turns[index + 1]?.items[0];
+      const changes = next ? turnSlots.before(next.key) : turnSlots.tail;
+      if (changes) add({ key: `changes-${turn.key}`, node: changes, nested: true });
+      if (turn.active && !turn.queued && running) add({ key: `running-${turn.key}`, node: <RunningIndicator />, nested: true });
+    });
+    if (!turns.length && running) out.push({ key: "running", node: <RunningIndicator /> });
+    if (history?.historical) out.push({ key: "history-newer", node: <div className="flex justify-center gap-2">
+      {history.newer && <Button size="sm" disabled={history.loading} onClick={() => loadHistory("newer")}>加载后续消息</Button>}
+      <Button size="sm" disabled={history.loading} onClick={() => loadHistory("latest")}>返回最新消息</Button>
+    </div> });
+    return out;
+  }, [turns, effectiveFolds, foldNamespace, turnSlots, running, waiting, history]);
+  const virtual = rows.length > VIRTUALIZE_FROM;
+
+  // Read the turn near the top of the reading viewport, including a single
+  // very tall row. Only mounted rows are inspected when the list is virtualized.
+  const scheduleVisibleTurn = useCallback(() => {
+    if (visibleFrame.current !== null) return;
+    visibleFrame.current = requestAnimationFrame(() => {
+      visibleFrame.current = null;
+      const el = ref.current;
+      if (!el) return;
+      const viewport = el.getBoundingClientRect();
+      const probe = viewport.top + Math.min(80, viewport.height / 4);
+      let next: { key: string; number: number } | null = null;
+      for (const row of el.querySelectorAll<HTMLElement>("[data-turn-key]")) {
+        const rect = row.getBoundingClientRect();
+        if (rect.bottom <= probe || rect.top >= viewport.bottom) continue;
+        if (row.dataset.turnExpanded === "true") next = { key: row.dataset.turnKey!, number: Number(row.dataset.turnNumber) };
+        break;
+      }
+      setVisibleTurn((current) => current?.key === next?.key && current?.number === next?.number ? current : next);
+    });
+  }, []);
+
+  useLayoutEffect(scheduleVisibleTurn, [rows, fontSize, scheduleVisibleTurn]);
+  useEffect(() => () => {
+    if (visibleFrame.current !== null) cancelAnimationFrame(visibleFrame.current);
+    visibleFrame.current = null;
+  }, []);
+
+  // Collapsing removes the content around the reader. Keep the folded
+  // header in view rather than leaving the reader somewhere in the next turn.
+  useLayoutEffect(() => {
+    if (virtual || history?.loading || !scrollAnchor.current || !ref.current) return;
+    const el = ref.current;
+    const anchor = scrollAnchor.current;
+    const row = el.querySelector<HTMLElement>(`[data-row-key="${CSS.escape(rebaseTurnRow(anchor.key, rebases))}"]`);
+    if (!row) { scrollAnchor.current = null; return; }
+    scrollAnchor.current = null;
+    el.scrollTop += row.getBoundingClientRect().top - el.getBoundingClientRect().top - anchor.offset;
+    if (anchor.focus) row.querySelector<HTMLButtonElement>("button")?.focus({ preventScroll: true });
+  }, [rows, virtual, history?.loading, rebases, fontSize]);
+
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (el && stick.current) el.scrollTop = el.scrollHeight;
+  }, [items, running, fontSize]);
+
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const observer = new ResizeObserver(() => {
+      if (stick.current) el.scrollTop = el.scrollHeight;
+      const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < STICK_SLACK;
+      stick.current = atBottom;
+      setAway(!atBottom);
+      scheduleVisibleTurn();
+    });
+    observer.observe(el);
+    if (el.firstElementChild) observer.observe(el.firstElementChild);
+    return () => observer.disconnect();
+  }, [virtual, scheduleVisibleTurn]);
+
+  const scrollToBottom = () => {
+    const el = ref.current;
+    if (!el) return;
+    stick.current = true;
+    setAway(false);
+    el.scrollTop = el.scrollHeight;
+  };
+
+  const collapseVisibleTurn = () => {
+    if (!visibleTurn) return;
+    const turn = turns.find((turn) => turn.key === visibleTurn.key);
+    const key = `${foldNamespace}:${visibleTurn.key}`;
+    const folded = effectiveFolds.get(key)?.collapsed;
+    if (!turn || !visibleTurnItems(turn, folded).length) return;
+    stick.current = false;
+    scrollAnchor.current = { key: `turn-${turn.key}`, offset: 12, focus: true };
+    const choice = { collapsed: true, revision: ++foldRevision };
+    savedTurnFolds = setTurnFold(savedTurnFolds, foldNamespace, key, choice);
+    setFolds(savedTurnFolds);
+    setVisibleTurn(null);
+  };
+
+  return (
+    <div className="relative flex min-h-0 flex-1 flex-col">
+    <div
+      ref={ref}
+      className={`message-transcript min-h-0 flex-1 overflow-y-auto overflow-x-hidden ${virtual ? "[overflow-anchor:none]" : ""}`}
+      onScroll={(e) => {
+        scheduleVisibleTurn();
+        const el = e.currentTarget;
+        const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < STICK_SLACK;
+        if (!history?.loading) {
+          const top = el.getBoundingClientRect().top;
+          const row = [...el.querySelectorAll<HTMLElement>("[data-row-key]")].find((r) => r.getBoundingClientRect().bottom > top);
+          scrollAnchor.current = !atBottom && row ? { key: row.dataset.rowKey!, offset: row.getBoundingClientRect().top - top } : null;
+        }
+        if (atBottom !== stick.current) {
+          stick.current = atBottom;
+          setAway(!atBottom);
+        }
+      }}
+      data-testid="message-list"
+      data-virtual={virtual ? "true" : undefined}
+      data-message-font-size={fontSize}
+    >
+      {virtual ? (
+        <VirtualRows rows={rows} scrollRef={ref} stick={stick} scrollAnchor={scrollAnchor} anchoringPaused={history?.loading} rebases={rebases} fontSize={fontSize} />
+      ) : (
+        <div className="mx-auto max-w-4xl space-y-4 pb-20 pl-12 pr-4 pt-6 md:pl-14 md:pr-6">
+          {loading && <p className="text-sm text-muted">加载中…</p>}
+          {!loading && items.length === 0 && !running && <EmptyConversation />}
+          {rows.map((row) => <div key={row.key} data-row-key={row.key} data-turn-key={row.turn?.key} data-turn-number={row.turn?.number} data-turn-expanded={row.turn?.expanded} className={`relative ${row.nested ? "ml-2 border-l border-border/70 pl-4" : ""}`}>
+            {row.item && row.showTime && <MessageTime item={row.item} />}
+            {row.item ? <ItemRow item={row.item} before={row.before} /> : row.node}
+          </div>)}
+        </div>
+      )}
+    </div>
+    {(visibleTurn || away) && <div className="pointer-events-none absolute inset-x-3 bottom-3 z-10 flex flex-wrap justify-center gap-2">
+      {visibleTurn && <Button icon={<ChevronDownIcon className="rotate-180" />} className="pointer-events-auto gap-1.5! rounded-full! bg-bg/95 font-normal! shadow-lg backdrop-blur-sm" aria-label={`收起第 ${visibleTurn.number} 轮`} data-testid="turn-collapse" onClick={collapseVisibleTurn}>
+        <span className="inline-flex items-baseline gap-2"><span>收起</span><span className="text-xs text-muted">第 {visibleTurn.number} 轮</span></span>
+      </Button>}
+      {away && <Button icon={<ChevronDownIcon />} className="pointer-events-auto rounded-full! bg-bg/95 shadow-lg backdrop-blur-sm" aria-label="回到底部" onClick={scrollToBottom}>回到底部</Button>}
+    </div>}
+    </div>
+  );
+}
+
+function VirtualRows({
+  rows,
+  scrollRef,
+  stick,
+  scrollAnchor,
+  anchoringPaused,
+  rebases,
+  fontSize,
+}: {
+  rows: Row[];
+  scrollRef: RefObject<HTMLDivElement | null>;
+  stick: RefObject<boolean>;
+  scrollAnchor: RefObject<ScrollAnchor | null>;
+  anchoringPaused?: boolean;
+  rebases: ReadonlyMap<string, string>;
+  fontSize: MessageFontSize;
+}) {
+  const fontScale = MESSAGE_FONT_OPTIONS.find((option) => option.value === fontSize)!.bodyRem;
+  const v = useVirtualizer({
+    count: rows.length,
+    getScrollElement: () => scrollRef.current,
+    estimateSize: (i) => estimateRow(rows[i]!) * fontScale,
+    getItemKey: (i) => rows[i]!.key,
+    overscan: 6,
+    paddingStart: 24,
+    paddingEnd: 80,
+    gap: 16,
+    // Opened at the bottom: start with the last rows instead of measuring the first ones.
+    initialOffset: () => (stick.current ? Number.MAX_SAFE_INTEGER : 0),
+  });
+
+  useLayoutEffect(() => {
+    // Cached heights belong to the previous font. Read mounted rows immediately;
+    // offscreen rows get the new estimates until they are measured again.
+    v.measure();
+    scrollRef.current?.querySelectorAll<HTMLElement>("[data-index]").forEach((row) => v.measureElement(row));
+    // Track the changing maximum while the virtualizer replaces its estimates;
+    // one direct scrollTop write would target the previous total height.
+    if (stick.current) v.scrollToEnd();
+  }, [fontSize, v, scrollRef, stick]);
+
+  useLayoutEffect(() => {
+    if (anchoringPaused || !scrollAnchor.current) return;
+    const anchor = scrollAnchor.current;
+    const key = rebaseTurnRow(anchor.key, rebases);
+    const index = rows.findIndex((row) => row.key === key);
+    if (index < 0) { scrollAnchor.current = null; return; }
+    const offset = v.getOffsetForIndex(index, "start");
+    if (!offset) return;
+    scrollAnchor.current = { ...anchor, key };
+    v.scrollToOffset(Math.max(0, offset[0] - anchor.offset));
+    const frame = requestAnimationFrame(() => {
+      const el = scrollRef.current;
+      const row = el?.querySelector<HTMLElement>(`[data-row-key="${CSS.escape(key)}"]`);
+      if (!el || !row) return;
+      scrollAnchor.current = null;
+      el.scrollTop += row.getBoundingClientRect().top - el.getBoundingClientRect().top - anchor.offset;
+      if (anchor.focus) row.querySelector<HTMLButtonElement>("button")?.focus({ preventScroll: true });
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [rows, v, scrollAnchor, scrollRef, anchoringPaused, rebases, fontSize]);
+
+  // Heights settle after rows are measured (and grow while text streams): stay at the bottom.
+  const inner = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const box = inner.current;
+    const el = scrollRef.current;
+    if (!box || !el) return;
+    const ro = new ResizeObserver(() => {
+      if (stick.current) el.scrollTop = el.scrollHeight;
+    });
+    ro.observe(box);
+    return () => ro.disconnect();
+  }, [scrollRef, stick]);
+
+  return (
+    <div className="mx-auto max-w-4xl pl-12 pr-4 md:pl-14 md:pr-6">
+      <div ref={inner} className="relative w-full" style={{ height: v.getTotalSize() }}>
+        {v.getVirtualItems().map((vi) => {
+          const row = rows[vi.index]!;
+          return (
+            <div key={vi.key} data-row-key={row.key} data-turn-key={row.turn?.key} data-turn-number={row.turn?.number} data-turn-expanded={row.turn?.expanded} data-index={vi.index} ref={v.measureElement} className={`absolute top-0 ${row.nested ? "left-2 w-[calc(100%-0.5rem)] border-l border-border/70 pl-4" : "left-0 w-full"}`} style={{ transform: `translateY(${vi.start}px)` }}>
+              {row.item && row.showTime && <MessageTime item={row.item} />}
+              {row.item ? <ItemRow item={row.item} before={row.before} /> : row.node}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+function TurnHeader({ turn, number, collapsed, waiting, onToggle }: { turn: TranscriptTurn; number: number; collapsed: boolean; waiting: boolean; onToggle: (button: HTMLButtonElement) => void }) {
+  const tools = turn.items.filter((item) => item.kind === "tool").length;
+  const result = turn.result;
+  const status = turn.error ? result?.subtype === "error_during_execution" ? "已中断" : "失败" : turn.active ? turn.queued ? "排队中" : waiting ? "等待回答" : "执行中" : "已结束";
+  return (
+    <button type="button" className="flex w-full min-w-0 items-center gap-2 rounded-lg border border-border bg-surface/70 px-3 py-2 text-left text-sm hover:bg-surface-2" aria-expanded={!collapsed} aria-label={`${collapsed ? "展开" : "折叠"}第 ${number} 轮`} onClick={(event) => onToggle(event.currentTarget)} data-testid="turn-header">
+      <ChevronIcon open={!collapsed} />
+      <span className="shrink-0 font-medium">第 {number} 轮</span>
+      <span className="min-w-0 flex-1 truncate text-muted" title={turn.summary}>{turn.summary}</span>
+      {tools > 0 && <span className="hidden shrink-0 text-xs text-muted sm:inline">{tools} 次工具调用</span>}
+      {collapsed && result?.durationMs !== undefined && <span className="hidden shrink-0 text-xs text-muted sm:inline">{(result.durationMs / 1000).toFixed(1)}s</span>}
+      <span className={`shrink-0 text-xs ${turn.error ? "text-danger" : turn.active ? "text-accent" : "text-muted"}`}>{status}</span>
+    </button>
+  );
+}
+
+const MessageTime = memo(function MessageTime({ item }: { item: Item }) {
+  const time = formatMessageTime(item.ts);
+  if (!time) return null;
+  return (
+    <time
+      className="absolute top-0 flex w-max select-none flex-col items-end gap-0.5 text-right text-[10px] leading-none tabular-nums text-muted/80"
+      style={{ right: "calc(100% + 0.5rem)" }}
+      dateTime={time.dateTime}
+      title={time.title}
+      data-testid="message-time"
+    >
+      {time.lines.map((line, index) => <span key={index} className="whitespace-nowrap">{line}</span>)}
+    </time>
+  );
+});
+
+const ItemRow = memo(function ItemRow({ item, before }: { item: Item; before?: ReactNode }) {
+  if (!before) return <ItemView item={item} />;
+  return (
+    <div className="space-y-4">
+      {before}
+      <ItemView item={item} />
+    </div>
+  );
+});
+
+/** A rough height before a row is measured; closer guesses mean less movement while scrolling. */
+function estimateRow(row: Row): number {
+  const it = row.item;
+  const extra = row.before ? 56 : 0;
+  if (!it) return 40;
+  const lines = (text: string, perLine: number) => text.split("\n").reduce((n, l) => n + Math.max(1, Math.ceil(l.length / perLine)), 0);
+  switch (it.kind) {
+    case "user":
+      return extra + 48 + 24 * lines(it.text, 60);
+    case "text":
+      return extra + 32 + 26 * lines(it.text, 80);
+    case "thinking":
+      return extra + 40;
+    case "tool": {
+      if (it.name === "Agent" || it.name === "Task") return extra + 40;
+      if (it.name.startsWith("Task") || it.name === "TodoWrite") return extra + 20;
+      return extra + 40;
+    }
+    case "result":
+      return extra + 28;
+    case "bash":
+      return extra + 80;
+    case "local":
+      return extra + 16 + 18 * lines(it.text, 100);
+    case "notice":
+      return extra + 20;
+  }
+}
+
+function RunningIndicator() {
+  return (
+    <div className="flex items-center gap-2 text-sm text-muted" data-testid="running-indicator">
+      <span className="inline-block size-2 animate-pulse rounded-full bg-accent" />
+      Claude 正在工作…
+    </div>
+  );
+}
+
+const TIPS: [string, string][] = [
+  ["/", "斜杠命令和技能，例如 /init、/review、/goal"],
+  ["@", "引用项目里的文件"],
+  ["!", "直接在项目目录执行一条命令，输出带进对话"],
+  ["图片", "粘贴、拖进来，或点输入框左下角的按钮"],
+];
+
+function EmptyConversation() {
+  return (
+    <div className="mx-auto max-w-md py-[10vh] text-center" data-testid="empty-conversation">
+      <h2 className="text-2xl">有什么要做的？</h2>
+      <p className="mt-2 text-sm text-muted">描述任务，Claude 会在这个项目里读代码、改文件、跑命令。关掉页面也会继续运行。</p>
+      <ul className="mt-6 space-y-2 text-left text-sm">
+        {TIPS.map(([k, v]) => (
+          <li key={k} className="flex items-baseline gap-3 rounded-lg border border-border bg-surface px-3 py-2">
+            <kbd className="min-w-8 shrink-0 rounded border border-border bg-surface-2 px-1.5 text-center font-mono text-xs">{k}</kbd>
+            <span className="text-muted">{v}</span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

package/web/src/components/Modal.tsx

@@ -0,0 +1,72 @@
+import { useEffect, useRef, type ReactNode } from "react";
+import { ActionMenu, MenuItem as UiMenuItem } from "../ui/Controls.tsx";
+import { Button } from "../ui/Button.tsx";
+import { XIcon } from "../ui/icons.tsx";
+
+export function Modal({ title, onClose, children, testId, scrollBody = true, panelClassName = "" }: { title: string; onClose: () => void; children: ReactNode; testId?: string; scrollBody?: boolean; panelClassName?: string }) {
+  const root = useRef<HTMLDivElement>(null);
+  const returnFocus = useRef(document.activeElement);
+  const close = useRef(onClose);
+  useEffect(() => { close.current = onClose; }, [onClose]);
+  useEffect(() => {
+    const dialog = root.current!;
+    const previous = returnFocus.current;
+    if (!dialog.contains(document.activeElement)) dialog.focus({ preventScroll: true });
+    const onKey = (e: KeyboardEvent) => {
+      if (e.defaultPrevented) return;
+      const dialogs = document.querySelectorAll('[role="dialog"][aria-modal="true"]');
+      if (dialogs[dialogs.length - 1] !== dialog) return;
+      if (e.key === "Escape") {
+        e.preventDefault();
+        close.current();
+      } else if (e.key === "Tab") {
+        // A portalled picker has its own dialog layer. Let it handle navigation
+        // while open instead of moving focus back behind that picker.
+        const layers = document.querySelectorAll('[role="dialog"]');
+        const top = layers[layers.length - 1];
+        if (top !== dialog && !dialog.contains(top)) return;
+        const controls = [...dialog.querySelectorAll<HTMLElement>('button:not([disabled]), a[href], input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])')]
+          .filter((element) => element.tabIndex >= 0 && !element.matches(":disabled") && !element.closest("[inert]")
+            && element.getClientRects().length > 0 && getComputedStyle(element).visibility !== "hidden");
+        const first = controls[0], last = controls.at(-1), active = document.activeElement;
+        if (!first || active === dialog || !dialog.contains(active) || (e.shiftKey ? active === first : active === last)) {
+          e.preventDefault();
+          (e.shiftKey ? last : first)?.focus({ preventScroll: true });
+        }
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => {
+      window.removeEventListener("keydown", onKey);
+      // StrictMode replays effects while the same DOM remains mounted. Only a
+      // real unmount should return focus, or replay would erase child autofocus.
+      if (!dialog.isConnected && previous instanceof HTMLElement && previous.isConnected
+        && (dialog.contains(document.activeElement) || document.activeElement === document.body)) previous.focus({ preventScroll: true });
+    };
+  }, []);
+  return (
+    <div ref={root} tabIndex={-1} className="safe-overlay fixed inset-0 z-50 flex items-end justify-center outline-none sm:items-center" role="dialog" aria-modal="true" aria-label={title} data-testid={testId}>
+      <div className="absolute inset-0 bg-black/30 backdrop-blur-[1px]" onClick={onClose} />
+      <div className={`safe-overlay-panel relative flex w-full max-w-lg flex-col overflow-hidden rounded-2xl border border-border bg-bg shadow-2xl sm:rounded-xl ${panelClassName}`}>
+        <header className="flex shrink-0 items-center gap-2 border-b border-border py-2.5 pl-5 pr-2.5">
+          <h2 className="min-w-0 flex-1 truncate text-lg">{title}</h2>
+          <Button variant="ghost" size="sm" iconOnly onClick={onClose} aria-label="关闭">
+            <XIcon />
+          </Button>
+        </header>
+        <div className={`min-h-0 px-4 py-4 sm:px-5 ${scrollBody ? "overflow-y-auto overscroll-contain" : "flex flex-1 flex-col overflow-hidden"}`}>{children}</div>
+      </div>
+    </div>
+  );
+}
+
+/** "⋯" menu; shared MenuItem owns closing before running an action. */
+export function Menu({ label, children, testId }: { label: string; children: ReactNode; testId?: string }) {
+  return (
+    <ActionMenu label={label} testId={testId}>
+      {() => children}
+    </ActionMenu>
+  );
+}
+
+export const MenuItem = UiMenuItem;

package/web/src/components/NotificationEntry.tsx

@@ -0,0 +1,31 @@
+import { lazy, Suspense, useState } from "react";
+import { Modal } from "./Modal.tsx";
+import { Button } from "../ui/Button.tsx";
+import { BellIcon } from "../ui/icons.tsx";
+
+const NotificationSettings = lazy(() => import("./NotificationSettings.tsx").then((m) => ({ default: m.NotificationSettings })));
+
+/** Sidebar footer button that opens the notification settings. */
+export function NotificationEntry() {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <button
+        onClick={() => setOpen(true)}
+        className="flex h-10 w-full items-center gap-2 rounded-md px-2.5 text-left text-sm text-muted transition-colors hover:bg-surface hover:text-text md:h-8"
+      >
+        <BellIcon size={16} /> 通知
+      </button>
+      {open && (
+        <Modal title="通知" onClose={() => setOpen(false)}>
+          <Suspense fallback={<p className="py-6 text-center text-sm text-muted">加载中…</p>}>
+            <NotificationSettings />
+          </Suspense>
+          <div className="mt-5 flex justify-end">
+            <Button onClick={() => setOpen(false)}>完成</Button>
+          </div>
+        </Modal>
+      )}
+    </>
+  );
+}