@seqyuan/annodex 0.1.10 → 0.1.12

package/components/MessageView.tsx

@@ -0,0 +1,1141 @@
+"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>
+  );
+}