@seqyuan/annodex 0.1.12 → 0.1.13

package/components/MessageView.tsx

@@ -1,1141 +0,0 @@
-"use client";
-
-import { useState, useRef, useEffect, useMemo } from "react";
-import { WidgetRenderer } from "@/components/WidgetRenderer";
-import { MarkdownRenderer } from "@/components/MarkdownRenderer";
-import { hasWidgetFence, parseShowWidgets } from "@/lib/widget-utils";
-import { hasReportUpdateFence, stripReportUpdateFences } from "@/lib/report-update-parser";
-import { encodeFilePathForApi, getFileName, normalizeFilePathSlashes } from "@/lib/file-paths";
-import type {
-  AgentMessage,
-  UserMessage,
-  AssistantMessage,
-  ToolResultMessage,
-  CustomMessage,
-  AssistantContentBlock,
-  TextContent,
-  ImageContent,
-  ToolCallContent,
-  ThinkingContent,
-} from "@/lib/types";
-
-interface Props {
-  message: AgentMessage;
-  isStreaming?: boolean;
-  toolResults?: Map<string, ToolResultMessage>;
-  modelNames?: Record<string, string>;
-  entryId?: string;
-  onFork?: (entryId: string) => void;
-  forking?: boolean;
-  onSendMessage?: (content: string) => void;
-  showTimestamp?: boolean;
-  prevTimestamp?: number;
-  renderVisualCodeBlocks?: boolean;
-  cwd?: string;
-}
-
-function formatTime(ts?: number): string | null {
-  if (!ts) return null;
-  const d = new Date(ts);
-  const now = new Date();
-  const isToday = d.getFullYear() === now.getFullYear() &&
-    d.getMonth() === now.getMonth() &&
-    d.getDate() === now.getDate();
-  const time = d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
-  if (isToday) return time;
-  const date = d.toLocaleDateString([], { month: "short", day: "numeric", year: d.getFullYear() !== now.getFullYear() ? "numeric" : undefined });
-  return `${date} ${time}`;
-}
-
-function copyText(text: string): Promise<void> {
-  if (navigator.clipboard?.writeText) {
-    return navigator.clipboard.writeText(text);
-  }
-  try {
-    const ta = document.createElement("textarea");
-    ta.value = text;
-    ta.style.position = "fixed";
-    ta.style.opacity = "0";
-    document.body.appendChild(ta);
-    ta.select();
-    document.execCommand("copy");
-    document.body.removeChild(ta);
-    return Promise.resolve();
-  } catch {
-    return Promise.reject();
-  }
-}
-
-function imageContentSrc(image: ImageContent): string | null {
-  if (image.source?.type === "base64" && image.source.data) {
-    return `data:${image.source.media_type ?? "image/png"};base64,${image.source.data}`;
-  }
-  if (image.source?.type === "url" && image.source.url) return image.source.url;
-  if (image.data) return `data:${image.mimeType ?? "image/png"};base64,${image.data}`;
-  return null;
-}
-
-const PREVIEW_PATH_RE = /(?:file:\/\/)?(?:(?:[A-Za-z]:[\\/])|\/|~\/|\.{1,2}[\\/]|[A-Za-z0-9_.-]+[\\/])[^`"'<>|\s{}\[\]]+?\.(?:png|jpe?g|webp|gif|svg|bmp|avif|pdf)(?=$|[\s`"'<>|{}\[\]),.;:!?])/gi;
-const IMAGE_EXT_RE = /\.(?:png|jpe?g|webp|gif|svg|bmp|avif)$/i;
-const PDF_EXT_RE = /\.pdf$/i;
-const WINDOWS_ABSOLUTE_RE = /^[A-Za-z]:[\\/]/;
-const MAX_LOCAL_PREVIEW_PATHS = 24;
-
-function fileReadUrl(filePath: string): string {
-  return `/api/files/${encodeFilePathForApi(filePath)}?type=read`;
-}
-
-function normalizeResolvedPath(filePath: string): string {
-  const normalized = normalizeFilePathSlashes(filePath);
-  const absolute = normalized.startsWith("/") || WINDOWS_ABSOLUTE_RE.test(normalized);
-  if (WINDOWS_ABSOLUTE_RE.test(normalized)) return normalized;
-
-  const parts: string[] = [];
-  for (const part of normalized.split("/")) {
-    if (!part || part === ".") continue;
-    if (part === "..") {
-      if (parts.length > 0 && parts[parts.length - 1] !== "..") parts.pop();
-      else if (!absolute) parts.push(part);
-      continue;
-    }
-    parts.push(part);
-  }
-  return `${absolute ? "/" : ""}${parts.join("/")}`;
-}
-
-function resolveLocalPreviewPath(rawPath: string, cwd?: string): string | null {
-  let value = rawPath
-    .trim()
-    .replace(/^file:\/\//i, "")
-    .replace(/[),.;:!?]+$/g, "");
-
-  if (!value || value.startsWith("//")) return null;
-  value = normalizeFilePathSlashes(value);
-
-  if (value.startsWith("/") || WINDOWS_ABSOLUTE_RE.test(value)) {
-    return normalizeResolvedPath(value);
-  }
-  if (value.startsWith("~/")) {
-    const homeMatch = cwd?.match(/^(\/Users\/[^/]+|\/home\/[^/]+)(?:\/|$)/);
-    return homeMatch ? normalizeResolvedPath(`${homeMatch[1]}/${value.slice(2)}`) : null;
-  }
-  if (!cwd) return null;
-  return normalizeResolvedPath(`${cwd.replace(/\/+$/, "")}/${value.replace(/^\.?\//, "")}`);
-}
-
-function extractLocalImagePreviewPaths(text: string | null | undefined, cwd?: string): string[] {
-  if (!text) return [];
-  const paths: string[] = [];
-  const seen = new Set<string>();
-  const markdownImageUrls = new Set<string>();
-  for (const match of text.matchAll(/!\[[^\]]*]\(([^)]+)\)/g)) {
-    if (match[1]) markdownImageUrls.add(match[1].trim());
-  }
-
-  const add = (path: string | null) => {
-    if (!path || seen.has(path) || paths.length >= MAX_LOCAL_PREVIEW_PATHS) return;
-    seen.add(path);
-    paths.push(path);
-  };
-
-  PREVIEW_PATH_RE.lastIndex = 0;
-  for (const match of text.matchAll(PREVIEW_PATH_RE)) {
-    const raw = match[0];
-    if (/^[a-z][a-z\d+.-]*:\/\//i.test(raw) && !/^file:\/\//i.test(raw)) continue;
-    const preceding = text.slice(Math.max(0, match.index - 12), match.index);
-    if (/[A-Za-z][A-Za-z\d+.-]*:\/?$/.test(preceding) || raw.startsWith("//")) continue;
-    if (markdownImageUrls.has(raw)) continue;
-
-    const resolved = resolveLocalPreviewPath(raw, cwd);
-    if (!resolved) continue;
-    if (IMAGE_EXT_RE.test(resolved)) {
-      add(resolved);
-    } else if (PDF_EXT_RE.test(resolved)) {
-      add(resolved.replace(PDF_EXT_RE, ".png"));
-    }
-  }
-  return paths;
-}
-
-function uniqueImagePaths(paths: string[]): string[] {
-  const seen = new Set<string>();
-  const result: string[] = [];
-  for (const path of paths) {
-    if (seen.has(path)) continue;
-    seen.add(path);
-    result.push(path);
-  }
-  return result;
-}
-
-function ImagePreviewGrid({ images, maxHeight = 360 }: { images: ImageContent[]; maxHeight?: number }) {
-  if (images.length === 0) return null;
-  return (
-    <div
-      style={{
-        display: "grid",
-        gridTemplateColumns: images.length === 1 ? "minmax(0, 1fr)" : "repeat(auto-fit, minmax(180px, 1fr))",
-        gap: 8,
-        minWidth: 0,
-      }}
-    >
-      {images.map((image, index) => {
-        const src = imageContentSrc(image);
-        if (!src) return null;
-        return (
-          <a
-            key={index}
-            href={src}
-            target="_blank"
-            rel="noreferrer"
-            title="Open image"
-            style={{
-              display: "block",
-              minWidth: 0,
-              border: "1px solid var(--border)",
-              borderRadius: 6,
-              overflow: "hidden",
-              background: "var(--bg)",
-            }}
-          >
-            {/* eslint-disable-next-line @next/next/no-img-element */}
-            <img
-              src={src}
-              alt=""
-              loading="lazy"
-              style={{
-                display: "block",
-                width: "100%",
-                maxHeight,
-                objectFit: "contain",
-              }}
-            />
-          </a>
-        );
-      })}
-    </div>
-  );
-}
-
-function LocalImagePathPreviewGrid({ imagePaths, maxHeight = 360 }: { imagePaths: string[]; maxHeight?: number }) {
-  const [failed, setFailed] = useState<Set<string>>(() => new Set());
-  const attemptsRef = useRef<Map<string, number>>(new Map());
-  const imagePathsKey = imagePaths.join("\0");
-
-  useEffect(() => {
-    const active = new Set(imagePaths);
-    attemptsRef.current = new Map([...attemptsRef.current].filter(([path]) => active.has(path)));
-    setFailed((prev) => {
-      const next = new Set([...prev].filter((path) => active.has(path)));
-      return next.size === prev.size ? prev : next;
-    });
-  }, [imagePaths, imagePathsKey]);
-
-  useEffect(() => {
-    const retryable = [...failed].some((path) => (attemptsRef.current.get(path) ?? 0) < 3);
-    if (!retryable) return;
-    const timer = window.setTimeout(() => {
-      setFailed((prev) => {
-        const next = new Set(prev);
-        for (const path of prev) {
-          if ((attemptsRef.current.get(path) ?? 0) < 3) next.delete(path);
-        }
-        return next;
-      });
-    }, 2500);
-    return () => window.clearTimeout(timer);
-  }, [failed]);
-
-  const visiblePaths = imagePaths.filter((path) => !failed.has(path));
-  if (visiblePaths.length === 0) return null;
-
-  return (
-    <div
-      style={{
-        display: "grid",
-        gridTemplateColumns: visiblePaths.length === 1 ? "minmax(0, 1fr)" : "repeat(auto-fit, minmax(180px, 1fr))",
-        gap: 8,
-        minWidth: 0,
-      }}
-    >
-      {visiblePaths.map((path) => {
-        const src = fileReadUrl(path);
-        const name = getFileName(path);
-        return (
-          <a
-            key={path}
-            href={src}
-            target="_blank"
-            rel="noreferrer"
-            title={path}
-            style={{
-              display: "block",
-              minWidth: 0,
-              border: "1px solid var(--border)",
-              borderRadius: 6,
-              overflow: "hidden",
-              background: "var(--bg)",
-            }}
-          >
-            {/* eslint-disable-next-line @next/next/no-img-element */}
-            <img
-              src={src}
-              alt={name}
-              loading="lazy"
-              onError={() => {
-                attemptsRef.current.set(path, (attemptsRef.current.get(path) ?? 0) + 1);
-                setFailed((prev) => {
-                  const next = new Set(prev);
-                  next.add(path);
-                  return next;
-                });
-              }}
-              style={{
-                display: "block",
-                width: "100%",
-                maxHeight,
-                objectFit: "contain",
-              }}
-            />
-            <div
-              style={{
-                padding: "4px 6px",
-                borderTop: "1px solid var(--border)",
-                color: "var(--text-dim)",
-                fontSize: 10,
-                fontFamily: "var(--font-mono)",
-                overflow: "hidden",
-                textOverflow: "ellipsis",
-                whiteSpace: "nowrap",
-              }}
-            >
-              {name}
-            </div>
-          </a>
-        );
-      })}
-    </div>
-  );
-}
-
-function visibleToolResultText(text: string | null, hasImages: boolean): string | null {
-  if (!text || !hasImages) return text;
-  return text
-    .replace(/\n?\[Current model does not support images\. The image will be omitted from this request\.\]\s*/g, "")
-    .trim();
-}
-
-function assistantModelLabel(message: AssistantMessage, modelNames?: Record<string, string>): string | null {
-  const provider = message.provider?.trim();
-  const model = message.model?.trim();
-  if (provider && model && model !== "unknown") {
-    return modelNames?.[`${provider}:${model}`] ?? modelNames?.[model] ?? model;
-  }
-  if (provider && provider !== "codex" && provider !== "unknown") return provider;
-  return model && model !== "unknown" ? (modelNames?.[model] ?? model) : null;
-}
-
-export function MessageView({ message, isStreaming, toolResults, modelNames, entryId, onFork, forking, onSendMessage, showTimestamp, prevTimestamp, renderVisualCodeBlocks, cwd }: Props) {
-  if (message.role === "user") {
-    return <UserMessageView message={message as UserMessage} entryId={entryId} onFork={onFork} forking={forking} />;
-  }
-  if (message.role === "assistant") {
-    return <AssistantMessageView message={message as AssistantMessage} isStreaming={isStreaming} toolResults={toolResults} modelNames={modelNames} onSendMessage={onSendMessage} showTimestamp={showTimestamp} prevTimestamp={prevTimestamp} renderVisualCodeBlocks={renderVisualCodeBlocks} cwd={cwd} />;
-  }
-  if (message.role === "toolResult") {
-    // Rendered inline under its toolCall — skip standalone rendering if paired
-    return null;
-  }
-  if (message.role === "custom") {
-    return <CustomMessageView message={message as CustomMessage} showTimestamp={showTimestamp} />;
-  }
-  return null;
-}
-
-function UserMessageView({ message, entryId, onFork, forking }: {
-  message: UserMessage;
-  entryId?: string;
-  onFork?: (entryId: string) => void;
-  forking?: boolean;
-}) {
-  const [hovered, setHovered] = useState(false);
-  const [copied, setCopied] = useState(false);
-
-  const content =
-    typeof message.content === "string"
-      ? message.content
-      : message.content
-          .filter((b): b is TextContent => b.type === "text")
-          .map((b) => b.text)
-          .join("\n");
-
-  const imageBlocks: ImageContent[] =
-    typeof message.content === "string"
-      ? []
-      : message.content.filter((b): b is ImageContent => b.type === "image");
-
-  const time = formatTime(message.timestamp);
-  const canFork = !!entryId && !!onFork;
-
-  const copyContent = () => {
-    copyText(content).then(() => {
-      setCopied(true);
-      setTimeout(() => setCopied(false), 1500);
-    });
-  };
-
-  return (
-    <div
-      style={{ marginBottom: 16, display: "flex", flexDirection: "column", alignItems: "flex-end" }}
-      onMouseEnter={() => setHovered(true)}
-      onMouseLeave={() => setHovered(false)}
-    >
-      <div style={{ display: "flex", alignItems: "flex-end", gap: 6, maxWidth: "85%" }}>
-        <div
-          style={{
-            flex: 1,
-            minWidth: 0,
-            background: "var(--user-bg)",
-            border: "1px solid rgba(59,130,246,0.2)",
-            borderRadius: 12,
-            padding: "8px 12px",
-            fontSize: 14,
-            lineHeight: 1.6,
-            color: "var(--text)",
-            whiteSpace: "pre-wrap",
-            wordBreak: "break-word",
-          }}
-        >
-          {imageBlocks.length > 0 && (
-            <div style={{ display: "flex", gap: 6, flexWrap: "wrap", marginBottom: content ? 8 : 0 }}>
-              {imageBlocks.map((img, i) => {
-                const src = imageContentSrc(img);
-                if (!src) return null;
-                return (
-                  // eslint-disable-next-line @next/next/no-img-element
-                  <img
-                    key={i}
-                    src={src}
-                    alt=""
-                    style={{ maxWidth: 240, maxHeight: 240, borderRadius: 6, objectFit: "contain", display: "block", border: "1px solid rgba(59,130,246,0.15)" }}
-                  />
-                );
-              })}
-            </div>
-          )}
-          {content}
-        </div>
-
-      </div>
-
-      {/* Bottom row: action buttons + timestamp */}
-      <div style={{
-        display: "flex", alignItems: "center", justifyContent: "flex-end",
-        gap: 6, marginTop: 3,
-      }}>
-        <div style={{
-          display: "flex", gap: 3,
-          opacity: hovered ? 1 : 0,
-          pointerEvents: hovered ? "auto" : "none",
-          transition: "opacity 0.12s",
-        }}>
-          <button
-            onClick={copyContent}
-            title="Copy message"
-            style={{
-              display: "flex", alignItems: "center", gap: 4,
-              padding: "3px 8px", height: 22,
-              background: "none", border: "none",
-              borderRadius: 5,
-              color: copied ? "var(--accent)" : "var(--text-dim)",
-              cursor: "pointer",
-              fontSize: 11, fontWeight: 400,
-              whiteSpace: "nowrap",
-              transition: "color 0.12s",
-            }}
-            onMouseEnter={(e) => { if (!copied) e.currentTarget.style.color = "var(--accent)"; }}
-            onMouseLeave={(e) => { if (!copied) e.currentTarget.style.color = "var(--text-dim)"; }}
-          >
-            {copied ? (
-              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
-                <polyline points="20 6 9 17 4 12" />
-              </svg>
-            ) : (
-              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
-                <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
-                <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
-              </svg>
-            )}
-            {copied ? "Copied" : "Copy"}
-          </button>
-        </div>
-        {canFork && (
-          <div style={{
-            display: "flex", gap: 3,
-            opacity: (hovered || forking) ? 1 : 0,
-            pointerEvents: (hovered || forking) ? "auto" : "none",
-            transition: "opacity 0.12s",
-          }}>
-            <button
-              onClick={() => { onFork!(entryId!); }}
-              disabled={forking}
-              title={forking ? "Creating new session..." : "New session - creates an independent copy from here"}
-              style={{
-                display: "flex", alignItems: "center", gap: 4,
-                padding: "3px 8px", height: 22,
-                background: "none", border: "none",
-                borderRadius: 5,
-                color: forking ? "var(--accent)" : "var(--text-dim)",
-                cursor: forking ? "not-allowed" : "pointer",
-                fontSize: 11, fontWeight: 400,
-                whiteSpace: "nowrap",
-                transition: "color 0.12s",
-              }}
-              onMouseEnter={(e) => { if (!forking) e.currentTarget.style.color = "var(--accent)"; }}
-              onMouseLeave={(e) => { if (!forking) e.currentTarget.style.color = "var(--text-dim)"; }}
-            >
-              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
-                <line x1="6" y1="3" x2="6" y2="15" />
-                <circle cx="18" cy="6" r="3" />
-                <circle cx="6" cy="18" r="3" />
-                <path d="M18 9a9 9 0 0 1-9 9" />
-              </svg>
-              {forking ? "Creating..." : "New session"}
-            </button>
-          </div>
-        )}
-        {time && <span style={{ fontSize: 10, color: "var(--text-dim)" }}>{time}</span>}
-      </div>
-    </div>
-  );
-}
-
-function AssistantMessageView({
-  message,
-  isStreaming,
-  toolResults,
-  modelNames,
-  onSendMessage,
-  showTimestamp,
-  prevTimestamp,
-  renderVisualCodeBlocks,
-  cwd,
-}: {
-  message: AssistantMessage;
-  isStreaming?: boolean;
-  toolResults?: Map<string, ToolResultMessage>;
-  modelNames?: Record<string, string>;
-  onSendMessage?: (content: string) => void;
-  showTimestamp?: boolean;
-  prevTimestamp?: number;
-  renderVisualCodeBlocks?: boolean;
-  cwd?: string;
-}) {
-  const time = showTimestamp ? formatTime(message.timestamp) : null;
-  const blocks = message.content ?? [];
-  const [hovered, setHovered] = useState(false);
-  const [copied, setCopied] = useState(false);
-  const streamStartRef = useRef<number | null>(null);
-  const [tps, setTps] = useState<number | null>(null);
-  const blocksRef = useRef(blocks);
-  blocksRef.current = blocks;
-
-  // Streaming-based timing for thinking blocks
-  const blockStartTimesRef = useRef<Map<number, number>>(new Map());
-  const [streamingDurations, setStreamingDurations] = useState<Map<number, number>>(new Map());
-
-  // Thinking duration derived from file timestamps: time from prev message end to this message end
-  // This is the total generation time (thinking + any text before first tool call)
-  const thinkingDurationFromFile = useMemo<number | undefined>(() => {
-    if (!message.timestamp || !prevTimestamp) return undefined;
-    const secs = Math.round((message.timestamp - prevTimestamp) / 1000);
-    return secs > 0 ? secs : undefined;
-  }, [message.timestamp, prevTimestamp]);
-
-  // Tool call durations derived from session file timestamps (accurate for completed messages)
-  // assistant message timestamp = when generation ended = when tools started running
-  // toolResult timestamp = when tool execution finished
-  const toolCallDurations = useMemo<Map<string, number>>(() => {
-    const map = new Map<string, number>();
-    if (!toolResults || !message.timestamp) return map;
-    for (const [callId, result] of toolResults) {
-      if (result.timestamp && message.timestamp) {
-        const secs = Math.round((result.timestamp - message.timestamp) / 1000);
-        if (secs > 0) map.set(callId, secs);
-      }
-    }
-    return map;
-  }, [toolResults, message.timestamp]);
-
-  const textContent = blocks
-    .filter((b): b is TextContent => b.type === "text")
-    .map((b) => b.text)
-    .join("\n");
-
-  const copyContent = () => {
-    copyText(textContent).then(() => {
-      setCopied(true);
-      setTimeout(() => setCopied(false), 1500);
-    });
-  };
-
-  useEffect(() => {
-    if (!isStreaming) {
-      // Finalise any un-finished thinking block durations on stream end
-      const now = Date.now();
-      setStreamingDurations((prev: Map<number, number>) => {
-        const next = new Map(prev);
-        for (const [idx, start] of blockStartTimesRef.current) {
-          if (!next.has(idx)) next.set(idx, Math.round((now - start) / 1000));
-        }
-        return next;
-      });
-      streamStartRef.current = null;
-      setTps(null);
-      return;
-    }
-    const tick = () => {
-      const bs = blocksRef.current;
-      const now = Date.now();
-
-      // Record start time for each block the first time we see it
-      bs.forEach((_, i) => {
-        if (!blockStartTimesRef.current.has(i)) blockStartTimesRef.current.set(i, now);
-      });
-
-      // When a non-last block has a successor already started, finalise its duration
-      setStreamingDurations((prev: Map<number, number>) => {
-        let changed = false;
-        const next = new Map(prev);
-        for (let i = 0; i < bs.length - 1; i++) {
-          if (!next.has(i) && blockStartTimesRef.current.has(i)) {
-            const start = blockStartTimesRef.current.get(i)!;
-            const nextStart = blockStartTimesRef.current.get(i + 1) ?? now;
-            next.set(i, Math.round((nextStart - start) / 1000));
-            changed = true;
-          }
-        }
-        return changed ? next : prev;
-      });
-
-      let chars = 0;
-      for (const b of bs) {
-        if (b.type === "text") chars += (b as TextContent).text?.length ?? 0;
-        else if (b.type === "thinking") chars += (b as ThinkingContent).thinking?.length ?? 0;
-        else if (b.type === "toolCall") chars += JSON.stringify((b as ToolCallContent).input ?? {}).length;
-      }
-      if (chars === 0) return;
-      if (streamStartRef.current === null) streamStartRef.current = now;
-      const elapsed = (now - streamStartRef.current) / 1000;
-      if (elapsed > 0.5) setTps(chars / 4 / elapsed);
-    };
-    const id = setInterval(tick, 300);
-    return () => clearInterval(id);
-  }, [isStreaming]);
-  const modelLabel = assistantModelLabel(message, modelNames);
-
-  return (
-    <div
-      style={{ marginBottom: 16 }}
-      onMouseEnter={() => setHovered(true)}
-      onMouseLeave={() => setHovered(false)}
-    >
-      {/* Model label */}
-      <div
-        style={{
-          fontSize: 11,
-          color: "var(--text-dim)",
-          marginBottom: 4,
-          display: "flex",
-          alignItems: "center",
-          gap: 6,
-        }}
-      >
-        {modelLabel && <span>{modelLabel}</span>}
-        {isStreaming && (() => {
-          let chars = 0;
-          for (const b of blocks) {
-            if (b.type === "text") chars += (b as TextContent).text?.length ?? 0;
-            else if (b.type === "thinking") chars += (b as ThinkingContent).thinking?.length ?? 0;
-            else if (b.type === "toolCall") chars += JSON.stringify((b as ToolCallContent).input ?? {}).length;
-          }
-          const est = Math.round(chars / 4);
-          return (
-            <>
-
-              {est > 0 && (
-                <span style={{ display: "flex", alignItems: "center", gap: 4, color: "var(--text)" }} title="预估 token 数（流式接收中）">
-                  <span style={{ display: "flex", alignItems: "center", gap: 2, fontSize: 11, fontWeight: 400 }}>
-                    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
-                      <line x1="5" y1="1.5" x2="5" y2="8.5" /><polyline points="2 6 5 8.5 8 6" />
-                    </svg>
-                    {est}
-                  </span>
-                  {tps !== null && (() => {
-                    const bg = tps >= 50 ? "#53b3cb" : tps >= 30 ? "#9bc53d" : tps >= 15 ? "#f9c22e" : "#e01a4f";
-                    return (
-                      <span style={{ marginLeft: 6, padding: "1px 6px", borderRadius: 4, background: bg, color: "#fff", fontSize: 11, fontWeight: 400 }}>
-                        {tps.toFixed(1)} t/s
-                      </span>
-                    );
-                  })()}
-                </span>
-              )}
-            </>
-          );
-        })()}
-      </div>
-
-      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
-        {blocks.map((block, i) => (
-          <BlockView key={i} block={block} toolResults={toolResults} isStreaming={isStreaming} streamingDuration={streamingDurations.get(i) ?? (block.type === "thinking" ? thinkingDurationFromFile : undefined)} toolCallDurations={toolCallDurations} onSendMessage={onSendMessage} renderVisualCodeBlocks={renderVisualCodeBlocks} cwd={cwd} />
-        ))}
-      </div>
-
-      <div style={{
-        display: "flex", alignItems: "center", gap: 8, marginTop: 4,
-      }}>
-        {message.usage && !isStreaming && (
-          <div style={{ fontSize: 11, color: "var(--text-dim)" }}>
-            {formatUsage(message.usage)}
-          </div>
-        )}
-        {textContent && !isStreaming && (
-          <button
-            onClick={copyContent}
-            title="Copy message"
-            style={{
-              display: "flex", alignItems: "center", gap: 4,
-              padding: "3px 8px", height: 22,
-              background: "none", border: "none",
-              borderRadius: 5,
-              color: copied ? "var(--accent)" : "var(--text-dim)",
-              cursor: "pointer",
-              fontSize: 11, fontWeight: 400,
-              whiteSpace: "nowrap",
-              opacity: hovered ? 1 : 0,
-              pointerEvents: hovered ? "auto" : "none",
-              transition: "opacity 0.12s, color 0.12s",
-            }}
-            onMouseEnter={(e) => { if (!copied) e.currentTarget.style.color = "var(--accent)"; }}
-            onMouseLeave={(e) => { if (!copied) e.currentTarget.style.color = "var(--text-dim)"; }}
-          >
-            {copied ? (
-              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
-                <polyline points="20 6 9 17 4 12" />
-              </svg>
-            ) : (
-              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
-                <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
-                <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
-              </svg>
-            )}
-            {copied ? "Copied" : "Copy"}
-          </button>
-        )}
-        {time && !isStreaming && (
-          <span style={{ fontSize: 10, color: "var(--text-dim)", marginLeft: "auto" }}>{time}</span>
-        )}
-      </div>
-    </div>
-  );
-}
-
-function BlockView({ block, toolResults, isStreaming, streamingDuration, toolCallDurations, onSendMessage, renderVisualCodeBlocks, cwd }: { block: AssistantContentBlock; toolResults?: Map<string, ToolResultMessage>; isStreaming?: boolean; streamingDuration?: number; toolCallDurations?: Map<string, number>; onSendMessage?: (content: string) => void; renderVisualCodeBlocks?: boolean; cwd?: string }) {
-  if (block.type === "text") {
-    return <TextBlock block={block as TextContent} isStreaming={isStreaming} onSendMessage={onSendMessage} renderVisualCodeBlocks={renderVisualCodeBlocks} cwd={cwd} />;
-  }
-  if (block.type === "image") {
-    return <ImagePreviewGrid images={[block as ImageContent]} />;
-  }
-  if (block.type === "thinking") {
-    return <ThinkingBlock block={block as ThinkingContent} duration={streamingDuration} />;
-  }
-  if (block.type === "toolCall") {
-    const tc = block as ToolCallContent;
-    const result = toolResults?.get(tc.toolCallId);
-    const duration = toolCallDurations?.get(tc.toolCallId);
-    return <ToolCallBlock block={tc} result={result} duration={duration} cwd={cwd} />;
-  }
-  return null;
-}
-
-function TextBlock({ block, isStreaming, onSendMessage, renderVisualCodeBlocks, cwd }: { block: TextContent; isStreaming?: boolean; onSendMessage?: (content: string) => void; renderVisualCodeBlocks?: boolean; cwd?: string }) {
-  const displayText = stripReportUpdateFences(block.text);
-  const segments = parseShowWidgets(displayText);
-  const hasWidgets = segments.some((s) => s.type === "widget");
-  const hasReportUpdate = hasReportUpdateFence(block.text);
-
-  if (!hasWidgets) {
-    if (hasReportUpdate && !displayText.trim()) {
-      return <ReportUpdatePlaceholder isStreaming={isStreaming} />;
-    }
-    if (isStreaming && hasWidgetFence(displayText)) {
-      const text = segments
-        .filter((seg) => seg.type === "text")
-        .map((seg) => seg.content)
-        .join("\n\n");
-      return (
-        <>
-          {text && <TextBlockMarkdown text={text} onSendMessage={onSendMessage} renderVisualCodeBlocks={renderVisualCodeBlocks} cwd={cwd} />}
-          <WidgetLoadingPlaceholder />
-        </>
-      );
-    }
-    return <TextBlockMarkdown text={displayText} onSendMessage={onSendMessage} renderVisualCodeBlocks={renderVisualCodeBlocks} cwd={cwd} />;
-  }
-
-  return (
-    <>
-      {segments.map((seg, i) =>
-        seg.type === "text" ? (
-          <TextBlockMarkdown key={i} text={seg.content} onSendMessage={onSendMessage} renderVisualCodeBlocks={renderVisualCodeBlocks} cwd={cwd} />
-        ) : (
-          <WidgetRenderer
-            key={i}
-            code={seg.code}
-            isStreaming={!!seg.partial}
-            title={seg.title}
-            showOverlay={seg.showOverlay}
-            onSendMessage={onSendMessage}
-          />
-        )
-      )}
-    </>
-  );
-}
-
-function ReportUpdatePlaceholder({ isStreaming }: { isStreaming?: boolean }) {
-  return (
-    <div style={{
-      border: "1px solid var(--border)",
-      borderRadius: 6,
-      padding: "8px 10px",
-      background: "var(--bg-panel)",
-      color: "var(--text-muted)",
-      fontSize: 12,
-    }}>
-      {isStreaming ? "Updating analysis report..." : "Analysis report updated"}
-    </div>
-  );
-}
-
-function TextBlockMarkdown({ text, onSendMessage, renderVisualCodeBlocks, cwd }: { text: string; onSendMessage?: (content: string) => void; renderVisualCodeBlocks?: boolean; cwd?: string }) {
-  const imagePaths = useMemo(() => extractLocalImagePreviewPaths(text, cwd), [cwd, text]);
-  return (
-    <div style={{ display: "flex", flexDirection: "column", gap: imagePaths.length > 0 ? 8 : 0 }}>
-      <MarkdownRenderer content={text} onWidgetSendMessage={onSendMessage} renderVisualCodeBlocks={renderVisualCodeBlocks} />
-      {imagePaths.length > 0 && <LocalImagePathPreviewGrid imagePaths={imagePaths} />}
-    </div>
-  );
-}
-
-function WidgetLoadingPlaceholder() {
-  return (
-    <div
-      style={{
-        position: "relative",
-        height: 88,
-        border: "1px solid var(--border)",
-        borderRadius: 6,
-        overflow: "hidden",
-        background: "var(--bg-panel)",
-      }}
-    >
-      <div className="widget-shimmer" style={{ position: "absolute", inset: 0 }} />
-    </div>
-  );
-}
-
-function ThinkingBlock({ block, duration }: { block: ThinkingContent; duration?: number }) {
-  const [expanded, setExpanded] = useState(false);
-  return (
-    <div
-      style={{
-        border: "1px solid var(--border)",
-        borderRadius: 6,
-        overflow: "hidden",
-        fontSize: 13,
-      }}
-    >
-      <button
-        onClick={() => setExpanded((v) => !v)}
-        style={{
-          display: "flex",
-          alignItems: "center",
-          gap: 6,
-          width: "100%",
-          padding: "6px 10px",
-          background: "var(--bg-panel)",
-          border: "none",
-          color: "var(--text-muted)",
-          cursor: "pointer",
-          fontSize: 12,
-          textAlign: "left",
-        }}
-      >
-        <span>Thinking</span>
-        {duration !== undefined && (
-          <span style={{ marginLeft: "auto", fontSize: 11, color: "var(--text-dim)", fontVariantNumeric: "tabular-nums" }}>{duration}s</span>
-        )}
-      </button>
-      {expanded && (
-        <div
-          style={{
-            padding: "8px 10px",
-            color: "var(--text-muted)",
-            fontSize: 12,
-            lineHeight: 1.6,
-            whiteSpace: "pre-wrap",
-            background: "var(--bg-panel)",
-            borderTop: "1px solid var(--border)",
-          }}
-        >
-          {block.thinking}
-        </div>
-      )}
-    </div>
-  );
-}
-
-
-function ToolCallBlock({ block, result, duration, cwd }: { block: ToolCallContent; result?: ToolResultMessage; duration?: number; cwd?: string }) {
-  const [expanded, setExpanded] = useState(false);
-  const inputStr = JSON.stringify(block.input, null, 2);
-
-  // Result display
-  const resultText = result
-    ? result.content.filter((b): b is { type: "text"; text: string } => b.type === "text").map((b) => b.text).join("\n")
-    : null;
-  const resultImages = result
-    ? result.content.filter((b): b is ImageContent => b.type === "image")
-    : [];
-  const displayResultText = visibleToolResultText(resultText, resultImages.length > 0);
-  const resultIsEmpty = displayResultText === null ? false : (displayResultText.trim() === "(no output)" || displayResultText.trim() === "");
-  const isError = result?.isError ?? false;
-  const inputImagePaths = useMemo(() => extractLocalImagePreviewPaths(inputStr, cwd), [cwd, inputStr]);
-  const resultImagePaths = useMemo(() => extractLocalImagePreviewPaths(displayResultText, cwd), [cwd, displayResultText]);
-  const collapsedPathPreviews = resultImagePaths.length > 0 ? resultImagePaths : inputImagePaths;
-
-  return (
-    <div
-      style={{
-        borderRadius: 7,
-        overflow: "hidden",
-        fontSize: 12,
-        border: isError ? "1px solid rgba(248,113,113,0.45)" : "1px solid rgba(34,197,94,0.25)",
-        background: isError ? "rgba(248,113,113,0.05)" : "rgba(34,197,94,0.04)",
-      }}
-    >
-      {/* ── Tool call header ── */}
-      <button
-        onClick={() => setExpanded((v) => !v)}
-        style={{
-          display: "flex",
-          alignItems: "center",
-          gap: 7,
-          width: "100%",
-          padding: "6px 10px",
-          background: "none",
-          border: "none",
-          color: "var(--text-muted)",
-          cursor: "pointer",
-          fontSize: 12,
-          textAlign: "left",
-          minWidth: 0,
-        }}
-      >
-        <span style={{ color: isError ? "#f87171" : "#16a34a", fontFamily: "var(--font-mono)", fontWeight: 600, fontSize: 11, flexShrink: 0 }}>
-          {block.toolName}
-        </span>
-        <span style={{ color: "var(--text-dim)", fontFamily: "var(--font-mono)", fontSize: 11, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", flex: 1, minWidth: 0 }}>
-          {getToolPreview(block)}
-        </span>
-        {duration !== undefined && (
-          <span style={{ fontSize: 11, color: "var(--text-dim)", flexShrink: 0, fontVariantNumeric: "tabular-nums" }}>{duration}s</span>
-        )}
-        <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="var(--text-dim)" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0, transform: expanded ? "rotate(180deg)" : "none", transition: "transform 0.15s" }}>
-          <polyline points="2 3.5 5 6.5 8 3.5" />
-        </svg>
-      </button>
-
-      {!expanded && (resultImages.length > 0 || collapsedPathPreviews.length > 0) && (
-        <div
-          style={{
-            padding: "0 10px 10px",
-            background: isError ? "rgba(248,113,113,0.04)" : "rgba(34,197,94,0.02)",
-          }}
-        >
-          {resultImages.length > 0 && <ImagePreviewGrid images={resultImages} maxHeight={280} />}
-          {collapsedPathPreviews.length > 0 && <LocalImagePathPreviewGrid imagePaths={collapsedPathPreviews} maxHeight={280} />}
-        </div>
-      )}
-
-      {/* ── Expanded: input args ── */}
-      {expanded && (
-        <pre
-          style={{
-            margin: 0,
-            padding: "8px 10px",
-            color: "var(--text-muted)",
-            fontSize: 12,
-            lineHeight: 1.5,
-            overflow: "auto",
-            background: "var(--bg-subtle)",
-            borderTop: isError ? "1px solid rgba(248,113,113,0.25)" : "1px solid rgba(34,197,94,0.2)",
-            whiteSpace: "pre-wrap",
-            wordBreak: "break-all",
-          }}
-        >
-          {inputStr}
-        </pre>
-      )}
-
-      {/* ── Paired result — only shown when expanded ── */}
-      {expanded && result && (
-        <PairedResult
-          text={displayResultText ?? ""}
-          isEmpty={resultIsEmpty}
-          isError={isError}
-          images={resultImages}
-          imagePaths={uniqueImagePaths([...resultImagePaths, ...inputImagePaths])}
-        />
-      )}
-    </div>
-  );
-}
-
-function PairedResult({ text, isEmpty, isError, images, imagePaths }: {
-  text: string;
-  isEmpty: boolean;
-  isError: boolean;
-  images: ImageContent[];
-  imagePaths: string[];
-}) {
-  const hasText = !isEmpty || text.trim().length > 0;
-  return (
-    <div
-      style={{
-        borderTop: `1px solid ${isError ? "rgba(248,113,113,0.3)" : "rgba(34,197,94,0.15)"}`,
-        background: isError ? "rgba(248,113,113,0.04)" : "var(--bg-subtle)",
-      }}
-    >
-      {images.length > 0 && (
-        <div style={{ padding: "10px 10px 0", background: "var(--bg)" }}>
-          <ImagePreviewGrid images={images} />
-        </div>
-      )}
-      {imagePaths.length > 0 && (
-        <div style={{ padding: "10px 10px 0", background: "var(--bg)" }}>
-          <LocalImagePathPreviewGrid imagePaths={imagePaths} />
-        </div>
-      )}
-      {hasText && (
-        <pre
-          style={{
-            margin: 0,
-            padding: "8px 10px",
-            color: isError ? "#f87171" : (isEmpty ? "var(--text-dim)" : "var(--text-muted)"),
-            fontSize: 12,
-            lineHeight: 1.5,
-            overflow: "auto",
-            maxHeight: 400,
-            background: "var(--bg)",
-            whiteSpace: "pre-wrap",
-            wordBreak: "break-all",
-            fontStyle: isEmpty ? "italic" : "normal",
-            opacity: isEmpty ? 0.6 : 1,
-          }}
-        >
-          {isEmpty ? "(no output)" : text}
-        </pre>
-      )}
-    </div>
-  );
-}
-
-
-function getToolPreview(block: ToolCallContent): string {
-  const input = block.input;
-  if (!input || typeof input !== "object") return "";
-  const keys = Object.keys(input);
-  if (keys.length === 0) return "";
-
-  // Common tool input patterns
-  if ("command" in input) return String(input.command).slice(0, 120);
-  if ("path" in input) return String(input.path).slice(0, 120);
-  if ("file_path" in input) return String(input.file_path).slice(0, 120);
-  if ("pattern" in input) return String(input.pattern).slice(0, 120);
-  if ("query" in input) return String(input.query).slice(0, 120);
-
-  const first = input[keys[0]];
-  return String(first).slice(0, 120);
-}
-
-function formatUsage(usage: {
-  input: number;
-  output: number;
-  cacheRead: number;
-  cacheWrite: number;
-  cost: { total: number };
-}): string {
-  const parts = [];
-  if (usage.input) parts.push(`${usage.input.toLocaleString()} in`);
-  if (usage.output) parts.push(`${usage.output.toLocaleString()} out`);
-  if (usage.cacheRead) parts.push(`${usage.cacheRead.toLocaleString()} cache`);
-  if (usage.cost?.total) parts.push(`$${usage.cost.total.toFixed(4)}`);
-  return parts.join(" · ");
-}
-
-
-
-function CustomMessageView({ message, showTimestamp }: {
-  message: CustomMessage;
-  showTimestamp?: boolean;
-}) {
-  if (!message.display) return null;
-
-  const time = showTimestamp ? formatTime(message.timestamp) : null;
-  const content = typeof message.content === "string"
-    ? message.content
-    : message.content.filter((b): b is TextContent => b.type === "text").map((b) => b.text).join("\n");
-
-  const isSubagentNotify = message.customType === "subagent-notify";
-  const bgTaskMatch = content.match(/^Background task (completed|failed|paused):\s*\*\*(.+?)\*\*/);
-  const statusIcon = bgTaskMatch
-    ? (bgTaskMatch[1] === "completed" ? "✅" : bgTaskMatch[1] === "failed" ? "❌" : "⏸")
-    : isSubagentNotify ? "🤖" : "ℹ";
-
-  return (
-    <div style={{ marginBottom: 12 }}>
-      <div
-        style={{
-          padding: "8px 14px",
-          borderRadius: 8,
-          border: `1px solid ${isSubagentNotify ? "rgba(99,102,241,0.25)" : "var(--border)"}`,
-          background: isSubagentNotify ? "rgba(99,102,241,0.05)" : "var(--bg-panel)",
-          fontSize: 13,
-          lineHeight: 1.6,
-          color: "var(--text-muted)",
-        }}
-      >
-        <div style={{ display: "flex", alignItems: "flex-start", gap: 8 }}>
-          <span style={{ flexShrink: 0, fontSize: 14 }}>{statusIcon}</span>
-          <div style={{ flex: 1, minWidth: 0 }}>
-            <MarkdownRenderer content={content} style={{ fontSize: 13 }} />
-          </div>
-        </div>
-      </div>
-      {(time || bgTaskMatch) && (
-        <div style={{ display: "flex", alignItems: "center", justifyContent: "flex-end", gap: 6, marginTop: 3 }}>
-          {bgTaskMatch && (
-            <span style={{ fontSize: 10, color: "var(--text-dim)" }}>
-              {bgTaskMatch[2]}
-            </span>
-          )}
-          {time && <span style={{ fontSize: 10, color: "var(--text-dim)" }}>{time}</span>}
-        </div>
-      )}
-    </div>
-  );
-}