iris-chatbot 0.2.4

package/template/src/components/MessageCard.tsx

@@ -0,0 +1,955 @@
+"use client";
+
+import ReactMarkdown from "react-markdown";
+import rehypeKatex from "rehype-katex";
+import remarkGfm from "remark-gfm";
+import remarkMath from "remark-math";
+import {
+  ChevronDown,
+  ChevronUp,
+  Check,
+  Copy,
+  Pencil,
+  PlusCircle,
+  X,
+} from "lucide-react";
+import { memo, useMemo, useState } from "react";
+import type { MessageNode, Thread, ToolApproval, ToolEvent } from "../lib/types";
+import { splitContentAndSources } from "../lib/utils";
+
+const MAX_VISIBLE_TOOL_ITEMS = 8;
+const HIDDEN_TIMELINE_TOOLS = new Set(["tooling", "workflow_run"]);
+const TOOL_TIMELINE_DATE_FORMATTER = new Intl.DateTimeFormat("en-US", {
+  month: "short",
+  day: "numeric",
+  hour: "numeric",
+  minute: "2-digit",
+});
+
+function MarkdownTable({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="md-table-wrap">
+      <table>{children}</table>
+    </div>
+  );
+}
+
+function normalizeMathDelimiters(content: string) {
+  // Convert TeX delimiters to remark-math compatible delimiters.
+  return content
+    .replace(/\\\\\[([\s\S]+?)\\\\\]/g, (_, expr: string) => `$$${expr}$$`)
+    .replace(/\\\[([\s\S]+?)\\\]/g, (_, expr: string) => `$$${expr}$$`)
+    .replace(/\\\\\(([\s\S]+?)\\\\\)/g, (_, expr: string) => `$${expr}$`)
+    .replace(/\\\(([\s\S]+?)\\\)/g, (_, expr: string) => `$${expr}$`);
+}
+
+function normalizeMarkdownStructure(content: string) {
+  if (!content) {
+    return "";
+  }
+
+  const lines = content.replace(/\r\n?/g, "\n").split("\n");
+  const normalized: string[] = [];
+
+  for (let index = 0; index < lines.length; index += 1) {
+    const line = lines[index];
+    const trimmed = line.trim();
+
+    if (!trimmed) {
+      normalized.push("");
+      continue;
+    }
+
+    const isHeading = /^#{1,6}\s+/.test(trimmed);
+    const isListItem = /^([-*+]|\d+\.)\s+/.test(trimmed);
+    const isQuotedOrCode = /^(```|>|---|~~~)/.test(trimmed);
+    const previous = index > 0 ? lines[index - 1].trim() : "";
+    const next = index < lines.length - 1 ? lines[index + 1].trim() : "";
+    const nextIsList = /^([-*+]|\d+\.)\s+/.test(next);
+    const isStandaloneTitleCaseLine =
+      !isHeading &&
+      !isListItem &&
+      !isQuotedOrCode &&
+      trimmed.length >= 3 &&
+      trimmed.length <= 72 &&
+      !/[.!?;:]$/.test(trimmed) &&
+      /^[A-Z0-9][A-Za-z0-9 '"’&/(),-]+$/.test(trimmed) &&
+      previous === "" &&
+      (nextIsList || next === "");
+
+    if (isStandaloneTitleCaseLine) {
+      normalized.push(`### ${trimmed}`);
+      continue;
+    }
+
+    const labelMatch = trimmed.match(/^([A-Z][A-Za-z0-9 '&/(),-]{2,40}):\s+(.+)$/);
+    if (labelMatch && !isListItem && !isHeading) {
+      normalized.push(`**${labelMatch[1].trim()}:** ${labelMatch[2].trim()}`);
+      continue;
+    }
+
+    normalized.push(line);
+  }
+
+  return normalized.join("\n").replace(/\n{3,}/g, "\n\n").trim();
+}
+
+function stabilizeStreamingMarkdown(content: string) {
+  let stable = content;
+  const fenceMatches = stable.match(/```/g);
+  const fenceCount = fenceMatches ? fenceMatches.length : 0;
+  if (fenceCount % 2 === 1) {
+    stable += "\n```";
+  }
+  const boldAsteriskCount = (stable.match(/\*\*/g) || []).length;
+  if (boldAsteriskCount % 2 === 1) {
+    stable += "**";
+  }
+  const boldUnderscoreCount = (stable.match(/__/g) || []).length;
+  if (boldUnderscoreCount % 2 === 1) {
+    stable += "__";
+  }
+  const withoutFences = stable.replace(/```[\s\S]*?```/g, "");
+  const inlineCodeTickCount = (withoutFences.match(/`/g) || []).length;
+  if (inlineCodeTickCount % 2 === 1) {
+    stable += "`";
+  }
+  const lastLine = stable.split("\n").pop()?.trim() || "";
+  if ((/^#{1,6}\s+\S/.test(lastLine) || /\|/.test(lastLine)) && !stable.endsWith("\n")) {
+    stable += "\n";
+  }
+  return stable;
+}
+
+function parsePayload(payloadJson?: string): Record<string, unknown> | null {
+  if (!payloadJson) {
+    return null;
+  }
+
+  try {
+    const parsed = JSON.parse(payloadJson) as unknown;
+    if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) {
+      return parsed as Record<string, unknown>;
+    }
+  } catch {
+    return null;
+  }
+
+  return null;
+}
+
+function humanizeToolName(toolName: string): string {
+  const labels: Record<string, string> = {
+    file_list: "Browse Files",
+    file_move: "Move Item",
+    file_copy: "Copy Item",
+    file_mkdir: "Create Folder",
+    file_delete_to_trash: "Move to Trash",
+    notes_create_or_append: "Update Note",
+    notes_find: "Search Notes",
+    app_open: "Open App",
+    app_focus: "Focus App",
+    calendar_create_event: "Create Calendar Event",
+    calendar_list_events: "Check Calendar",
+    reminder_create: "Create Reminder",
+    reminder_list: "Check Reminders",
+    music_play: "Play Music",
+    music_get_now_playing: "Now Playing",
+    music_pause: "Pause Music",
+    music_next: "Next Track",
+    music_previous: "Previous Track",
+    music_set_volume: "Set Music Volume",
+    system_set_volume: "Set System Volume",
+    numbers_read_selection: "Read Numbers Selection",
+    numbers_set_cell: "Edit Numbers Cell",
+  };
+
+  if (labels[toolName]) {
+    return labels[toolName];
+  }
+
+  return toolName
+    .replace(/[_-]+/g, " ")
+    .replace(/\b\w/g, (char) => char.toUpperCase());
+}
+
+function shortenPath(input: string): string {
+  return input.replace(/^\/Users\/[^/]+/, "~");
+}
+
+function getString(object: Record<string, unknown>, key: string): string | null {
+  const value = object[key];
+  return typeof value === "string" && value.trim() ? value.trim() : null;
+}
+
+function getNumber(object: Record<string, unknown>, key: string): number | null {
+  const value = object[key];
+  return typeof value === "number" && Number.isFinite(value) ? value : null;
+}
+
+function getBoolean(object: Record<string, unknown>, key: string): boolean | null {
+  const value = object[key];
+  return typeof value === "boolean" ? value : null;
+}
+
+function formatCount(value: number): string {
+  return value.toLocaleString("en-US");
+}
+
+function joinDetailParts(parts: Array<string | null | undefined>): string | undefined {
+  const compact = parts.filter((value): value is string => Boolean(value));
+  if (compact.length === 0) {
+    return undefined;
+  }
+  return compact.join(" · ");
+}
+
+function formatDateTime(value: string | null): string | null {
+  if (!value) {
+    return null;
+  }
+  const parsed = new Date(value);
+  if (Number.isNaN(parsed.getTime())) {
+    return value;
+  }
+  return TOOL_TIMELINE_DATE_FORMATTER.format(parsed);
+}
+
+function formatTrackLabel(title: string | null, artist: string | null): string {
+  if (title && artist) {
+    return `"${title}" by ${artist}`;
+  }
+  if (title) {
+    return `"${title}"`;
+  }
+  if (artist) {
+    return `track by ${artist}`;
+  }
+  return "track";
+}
+
+function cleanTechnicalError(message: string): string {
+  return message
+    .trim()
+    .replace(/^\d+:\d+:\s*/i, "")
+    .replace(/^execution error:\s*/i, "")
+    .replace(/\s+\(-\d+\)\s*$/, "")
+    .replace(/^error:\s*/i, "")
+    .replace(/\s+/g, " ");
+}
+
+function summarizeToolError(toolName: string, rawError: string): {
+  title: string;
+  detail?: string;
+} {
+  const cleaned = cleanTechnicalError(rawError);
+  const normalized = cleaned.toLowerCase().replace(/[\u2019]/g, "'");
+
+  if (toolName === "calendar_create_event" && normalized.includes("can't get date")) {
+    const requestedDateMatch = cleaned.match(/can't get date "([^"]+)"/i);
+    const requestedDate = requestedDateMatch?.[1] ? formatDateTime(requestedDateMatch[1]) : null;
+    return {
+      title: "Could not add the calendar event",
+      detail:
+        requestedDate
+          ? `Calendar could not read the date/time (${requestedDate}). Try a format like "Feb 12 at 9:00 AM".`
+          : 'Calendar could not read the date/time. Try a format like "Feb 12 at 9:00 AM".',
+    };
+  }
+
+  if (normalized.includes("missing required")) {
+    return {
+      title: "Missing required information",
+      detail: "The action did not include all required fields.",
+    };
+  }
+
+  if (normalized.includes("timed out")) {
+    return {
+      title: "Timed out",
+      detail: "The app did not respond in time.",
+    };
+  }
+
+  return {
+    title: "Could not complete",
+    detail: cleaned || "An unknown error occurred.",
+  };
+}
+
+function summarizeToolCall(toolName: string, payload: Record<string, unknown> | null): {
+  title: string;
+  detail?: string;
+} {
+  if (!payload) {
+    return { title: "Preparing action" };
+  }
+
+  if (toolName === "file_list") {
+    const targetPath = getString(payload, "path");
+    const pattern = getString(payload, "pattern");
+    const recursive = getBoolean(payload, "recursive");
+    const parts = [
+      recursive ? "Including subfolders" : "Current folder only",
+      pattern ? `Filter: ${pattern}` : null,
+    ].filter(Boolean);
+    return {
+      title: targetPath ? `Searching ${shortenPath(targetPath)}` : "Searching files",
+      detail: parts.length > 0 ? parts.join(" · ") : undefined,
+    };
+  }
+
+  if (toolName === "workflow_run") {
+    const summary = getString(payload, "summary");
+    if (summary) {
+      return { title: summary };
+    }
+  }
+
+  if (toolName === "music_play") {
+    const query = getString(payload, "query");
+    const title = getString(payload, "title");
+    const artist = getString(payload, "artist");
+    const requested = title || artist ? formatTrackLabel(title, artist) : query ? `"${query}"` : null;
+    return {
+      title: requested ? `Starting ${requested}` : "Starting playback",
+    };
+  }
+
+  if (toolName === "calendar_create_event") {
+    const title = getString(payload, "title");
+    const start = formatDateTime(getString(payload, "start"));
+    return {
+      title: title ? `Adding "${title}" to Calendar` : "Adding calendar event",
+      detail: start ? `When: ${start}` : undefined,
+    };
+  }
+
+  if (toolName === "reminder_create") {
+    const title = getString(payload, "title");
+    const due = formatDateTime(getString(payload, "due"));
+    return {
+      title: title ? `Adding reminder "${title}"` : "Adding reminder",
+      detail: due ? `Due: ${due}` : undefined,
+    };
+  }
+
+  if (toolName === "music_set_volume" || toolName === "system_set_volume") {
+    const level = getNumber(payload, "level");
+    return {
+      title: level !== null ? `Setting volume to ${level}%` : "Setting volume",
+    };
+  }
+
+  if (toolName === "file_move" || toolName === "file_copy") {
+    const source = getString(payload, "source");
+    const destination = getString(payload, "destination");
+    return {
+      title: toolName === "file_move" ? "Preparing move" : "Preparing copy",
+      detail:
+        source && destination
+          ? `${shortenPath(source)} -> ${shortenPath(destination)}`
+          : undefined,
+    };
+  }
+
+  if (toolName === "file_mkdir") {
+    const targetPath = getString(payload, "path");
+    return {
+      title: targetPath ? `Creating ${shortenPath(targetPath)}` : "Creating folder",
+    };
+  }
+
+  return { title: "Preparing action" };
+}
+
+function summarizeToolResult(toolName: string, payload: Record<string, unknown> | null): {
+  title: string;
+  detail?: string;
+} {
+  if (!payload) {
+    return { title: "Completed successfully" };
+  }
+
+  const error = getString(payload, "error");
+  if (error) {
+    return summarizeToolError(toolName, error);
+  }
+
+  if (toolName === "music_play") {
+    const playing = getBoolean(payload, "playing");
+    const matched = getBoolean(payload, "matched");
+    const title = getString(payload, "title");
+    const artist = getString(payload, "artist");
+    const album = getString(payload, "album");
+    const reason = getString(payload, "reason");
+    const nearestTitle = getString(payload, "matchedTitle");
+    const nearestArtist = getString(payload, "matchedArtist");
+
+    if (playing) {
+      if (matched === false) {
+        return {
+          title: "Playing a close match",
+          detail: joinDetailParts([
+            `Now playing ${formatTrackLabel(title, artist)}`,
+            album ? `Album: ${album}` : null,
+            reason,
+          ]),
+        };
+      }
+
+      return {
+        title: `Now playing ${formatTrackLabel(title, artist)}`,
+        detail: album ? `Album: ${album}` : undefined,
+      };
+    }
+
+    return {
+      title: "Could not start playback",
+      detail: joinDetailParts([
+        reason ?? "No matching track was found.",
+        nearestTitle ? `Closest match: ${formatTrackLabel(nearestTitle, nearestArtist)}` : null,
+      ]),
+    };
+  }
+
+  if (toolName === "music_get_now_playing") {
+    const state = getString(payload, "state");
+    const title = getString(payload, "title");
+    const artist = getString(payload, "artist");
+    const album = getString(payload, "album");
+    if (state === "stopped") {
+      return { title: "Nothing is currently playing" };
+    }
+    return {
+      title: `Now playing ${formatTrackLabel(title, artist)}`,
+      detail: joinDetailParts([state ? `State: ${state}` : null, album ? `Album: ${album}` : null]),
+    };
+  }
+
+  if (toolName === "calendar_create_event" && payload.created === true) {
+    const title = getString(payload, "title");
+    const calendar = getString(payload, "calendar");
+    const location = getString(payload, "location");
+    const start = formatDateTime(getString(payload, "startResolved") ?? getString(payload, "start"));
+    const end = formatDateTime(getString(payload, "endResolved") ?? getString(payload, "end"));
+    return {
+      title: title
+        ? `Added "${title}"${calendar ? ` to ${calendar}` : ""}`
+        : "Calendar event added",
+      detail: joinDetailParts([
+        start ? `Starts: ${start}` : null,
+        end ? `Ends: ${end}` : null,
+        location ? `Location: ${location}` : null,
+      ]),
+    };
+  }
+
+  if (toolName === "calendar_list_events") {
+    const count = getNumber(payload, "count");
+    const from = formatDateTime(getString(payload, "from"));
+    const to = formatDateTime(getString(payload, "to"));
+    if (count !== null) {
+      return {
+        title:
+          count === 0
+            ? "No events found"
+            : `Found ${formatCount(count)} calendar ${count === 1 ? "event" : "events"}`,
+        detail: joinDetailParts([from ? `From: ${from}` : null, to ? `To: ${to}` : null]),
+      };
+    }
+  }
+
+  if (toolName === "reminder_create" && payload.created === true) {
+    const title = getString(payload, "title");
+    const list = getString(payload, "list");
+    const dueResolved = getString(payload, "dueResolved");
+    return {
+      title: title ? `Added reminder "${title}"` : "Reminder added",
+      detail: joinDetailParts([
+        list ? `List: ${list}` : null,
+        dueResolved ? `Due: ${dueResolved}` : null,
+      ]),
+    };
+  }
+
+  if (toolName === "reminder_list") {
+    const count = getNumber(payload, "count");
+    const list = getString(payload, "list");
+    if (count !== null) {
+      return {
+        title:
+          count === 0
+            ? "No reminders found"
+            : `Found ${formatCount(count)} reminder${count === 1 ? "" : "s"}`,
+        detail: list ? `List: ${list}` : undefined,
+      };
+    }
+  }
+
+  if (toolName === "music_set_volume" || toolName === "system_set_volume") {
+    const level = getNumber(payload, "level");
+    const target = getString(payload, "target");
+    if (level !== null) {
+      return {
+        title: `Volume set to ${level}%`,
+        detail: target ? `Target: ${target}` : undefined,
+      };
+    }
+  }
+
+  if (toolName === "system_open_url" && payload.opened === true) {
+    const url = getString(payload, "url");
+    return {
+      title: "Opened URL",
+      detail: url ?? undefined,
+    };
+  }
+
+  if (toolName === "file_list") {
+    const count = getNumber(payload, "count");
+    const returnedCount = getNumber(payload, "returnedCount");
+    const truncated = getBoolean(payload, "truncated");
+    if (count !== null && returnedCount !== null) {
+      return {
+        title:
+          count === 0
+            ? "No items found"
+            : `Found ${formatCount(count)} ${count === 1 ? "item" : "items"}`,
+        detail: truncated
+          ? `Showing first ${formatCount(returnedCount)} results`
+          : `${formatCount(returnedCount)} results shown`,
+      };
+    }
+  }
+
+  if (toolName === "file_move" && payload.moved === true) {
+    const destination = getString(payload, "destination");
+    return {
+      title: "Moved successfully",
+      detail: destination ? shortenPath(destination) : undefined,
+    };
+  }
+
+  if (toolName === "file_copy" && payload.copied === true) {
+    const destination = getString(payload, "destination");
+    return {
+      title: "Copied successfully",
+      detail: destination ? shortenPath(destination) : undefined,
+    };
+  }
+
+  if (toolName === "file_mkdir" && payload.created === true) {
+    const targetPath = getString(payload, "path");
+    return {
+      title: "Folder created",
+      detail: targetPath ? shortenPath(targetPath) : undefined,
+    };
+  }
+
+  return { title: "Completed successfully" };
+}
+
+function sourceBadgeLabel(url: string, title?: string): string {
+  if (title && title.trim()) {
+    return title.trim();
+  }
+  try {
+    const parsed = new URL(url);
+    return parsed.hostname.replace(/^www\./, "") || url;
+  } catch {
+    return url;
+  }
+}
+
+function getTimelineVisual(event: ToolEvent): {
+  chipLabel: string;
+  chipClassName: string;
+  title: string;
+  detail?: string;
+} {
+  const payload = parsePayload(event.payloadJson);
+  const cleanedMessage = event.message?.replace(/^(started|running|warning|info|completed):\s*/i, "");
+
+  if (event.stage === "call") {
+    const summary = summarizeToolCall(event.toolName, payload);
+    return {
+      chipLabel: "Queued",
+      chipClassName: "border-[var(--border)] text-[var(--text-muted)]",
+      title: summary.title,
+      detail: summary.detail,
+    };
+  }
+
+  if (event.stage === "progress") {
+    return {
+      chipLabel: "Working",
+      chipClassName: "border-[var(--accent)]/50 text-[var(--text-secondary)]",
+      title: cleanedMessage || "Working on it",
+    };
+  }
+
+  const summary = summarizeToolResult(event.toolName, payload);
+  const isError = event.message?.toLowerCase().includes("failure") || Boolean(payload?.error);
+  return {
+    chipLabel: isError ? "Needs attention" : "Done",
+    chipClassName: isError
+      ? "border-[var(--danger)]/50 text-[var(--danger)]"
+      : "border-[var(--accent)]/50 text-[var(--accent)]",
+    title: summary.title,
+    detail: summary.detail,
+  };
+}
+
+function MessageCard({
+  message,
+  onAddThread,
+  threads,
+  baseThreadId,
+  activeThreadId,
+  onSelectThread,
+  onDeleteThread,
+  isStreaming,
+  toolEvents,
+  approvals,
+  onResolveApproval,
+  approvalBusyIds,
+}: {
+  message: MessageNode;
+  onAddThread: (message: MessageNode) => void;
+  threads: Thread[];
+  baseThreadId: string | null;
+  activeThreadId: string | null;
+  onSelectThread: (id: string) => void;
+  onDeleteThread: (threadId: string, fallbackThreadId: string | null) => void;
+  isStreaming?: boolean;
+  toolEvents?: ToolEvent[];
+  approvals?: ToolApproval[];
+  onResolveApproval?: (approvalId: string, decision: "approve" | "deny") => void;
+  approvalBusyIds?: Record<string, boolean>;
+}) {
+  const [copied, setCopied] = useState(false);
+  const [threadAdded, setThreadAdded] = useState(false);
+  const [assistantCollapsed, setAssistantCollapsed] = useState(false);
+  const [threadEditMode, setThreadEditMode] = useState(false);
+  const isAssistant = message.role === "assistant";
+  const canAddThread = threads.length < 4;
+  const shelfThreads = [
+    ...(baseThreadId ? [{ id: baseThreadId, title: "Thread 1", isBase: true }] : []),
+    ...threads.map((thread) => ({
+      id: thread.id,
+      title: thread.title,
+      isBase: false,
+    })),
+  ];
+  const showShelf = isAssistant && threads.length > 0;
+  const canEditThreads = isAssistant && shelfThreads.length >= 2;
+  const { content: messageTextContent, sources: messageSources } = useMemo(
+    () => splitContentAndSources(message.content || ""),
+    [message.content],
+  );
+  const isStreamingPlaceholder = isAssistant && isStreaming && !messageTextContent;
+  const assistantContent = useMemo(
+    () => normalizeMathDelimiters(normalizeMarkdownStructure(messageTextContent)),
+    [messageTextContent],
+  );
+  const renderedAssistantContent = isStreaming
+    ? stabilizeStreamingMarkdown(assistantContent)
+    : assistantContent;
+
+  const timelineItems = useMemo(
+    () =>
+      (toolEvents ?? [])
+        .filter((event) => !HIDDEN_TIMELINE_TOOLS.has(event.toolName))
+        .slice()
+        .sort((a, b) => a.createdAt - b.createdAt),
+    [toolEvents],
+  );
+  const visibleTimelineItems = useMemo(
+    () => timelineItems.slice(-MAX_VISIBLE_TOOL_ITEMS),
+    [timelineItems],
+  );
+  const hiddenTimelineCount = Math.max(0, timelineItems.length - visibleTimelineItems.length);
+  const approvalItems = useMemo(
+    () =>
+      (approvals ?? [])
+        .filter((approval) => approval.status === "requested")
+        .slice()
+        .sort((a, b) => a.requestedAt - b.requestedAt),
+    [approvals],
+  );
+  const collapsedPreviewText = useMemo(() => {
+    if (messageTextContent.trim()) {
+      return messageTextContent.trim();
+    }
+
+    const firstToolEvent = timelineItems[0];
+    if (firstToolEvent) {
+      const summary = getTimelineVisual(firstToolEvent);
+      return `${humanizeToolName(firstToolEvent.toolName)}: ${summary.title}`;
+    }
+
+    const firstApproval = approvalItems[0];
+    if (firstApproval) {
+      const summary = summarizeToolCall(firstApproval.toolName, parsePayload(firstApproval.argsJson));
+      return `${humanizeToolName(firstApproval.toolName)}: ${summary.title}`;
+    }
+
+    return "Working on your request.";
+  }, [messageTextContent, timelineItems, approvalItems]);
+
+  return (
+    <div className="message-stack group">
+      <div className={`${isAssistant ? "assistant-card" : "message-card user"} group`}>
+        {isAssistant ? (
+          <div className="assistant-collapse-row">
+            <button
+              className="assistant-collapse-toggle"
+              onClick={() => setAssistantCollapsed((prev) => !prev)}
+              aria-label={assistantCollapsed ? "Expand message" : "Collapse message"}
+            >
+              {assistantCollapsed ? (
+                <ChevronDown className="h-4 w-4" />
+              ) : (
+                <ChevronUp className="h-4 w-4" />
+              )}
+            </button>
+          </div>
+        ) : null}
+        <div className="message-content">
+          {message.role === "assistant" && assistantCollapsed ? (
+            <p
+              className="assistant-collapsed-preview"
+              onClick={() => setAssistantCollapsed(false)}
+              role="button"
+              tabIndex={0}
+              onKeyDown={(event) => {
+                if (event.key === "Enter" || event.key === " ") {
+                  event.preventDefault();
+                  setAssistantCollapsed(false);
+                }
+              }}
+            >
+              {collapsedPreviewText.slice(0, 160)}
+              {collapsedPreviewText.length > 160 ? "..." : ""}
+            </p>
+          ) : message.role === "assistant" ? (
+            isStreamingPlaceholder ? (
+              <div
+                className="message-loading-spinner"
+                role="status"
+                aria-label="Assistant is responding"
+              />
+            ) : (
+              <ReactMarkdown
+                remarkPlugins={[remarkGfm, remarkMath]}
+                rehypePlugins={[rehypeKatex]}
+                components={{
+                  table: ({ children }) => <MarkdownTable>{children}</MarkdownTable>,
+                }}
+              >
+                {renderedAssistantContent}
+              </ReactMarkdown>
+            )
+          ) : (
+            <p>{messageTextContent}</p>
+          )}
+
+          {message.role === "assistant" && !assistantCollapsed && messageSources.length > 0 ? (
+            <div className="source-badge-row" aria-label="Sources">
+              {messageSources.map((source, index) => (
+                <a
+                  key={`${source.url}-${index}`}
+                  className="source-badge"
+                  href={source.url}
+                  target="_blank"
+                  rel="noreferrer noopener"
+                  title={source.title || source.url}
+                >
+                  <span className="source-badge-index">{index + 1}</span>
+                  <span className="source-badge-title">{sourceBadgeLabel(source.url, source.title)}</span>
+                </a>
+              ))}
+            </div>
+          ) : null}
+
+          {isAssistant && !assistantCollapsed && (timelineItems.length > 0 || approvalItems.length > 0) ? (
+            <div className="assistant-tool-timeline mt-4 space-y-2 rounded-2xl border border-[var(--border)] bg-[var(--panel-2)] p-3">
+              {hiddenTimelineCount > 0 ? (
+                <div className="rounded-xl border border-[var(--border)] bg-[var(--panel)] px-3 py-2 text-xs text-[var(--text-muted)]">
+                  Showing latest {visibleTimelineItems.length} of {timelineItems.length} tool actions
+                </div>
+              ) : null}
+
+              {visibleTimelineItems.map((event) => {
+                const visual = getTimelineVisual(event);
+                return (
+                  <div key={event.id} className="rounded-xl border border-[var(--border)] bg-[var(--panel)] px-3 py-2.5">
+                    <div className="flex items-center justify-between gap-3">
+                      <div className="text-[11px] font-medium text-[var(--text-secondary)]">
+                        {humanizeToolName(event.toolName)}
+                      </div>
+                      <span className={`rounded-full border px-2 py-0.5 text-[10px] ${visual.chipClassName}`}>
+                        {visual.chipLabel}
+                      </span>
+                    </div>
+                    <div className="mt-1 text-sm text-[var(--text-primary)]">{visual.title}</div>
+                    {visual.detail ? (
+                      <div className="mt-1 text-xs text-[var(--text-muted)]">{visual.detail}</div>
+                    ) : null}
+                  </div>
+                );
+              })}
+
+              {approvalItems.map((approval) => {
+                const isPending = approval.status === "requested";
+                const isBusy = Boolean(approvalBusyIds?.[approval.id]);
+                const callSummary = summarizeToolCall(approval.toolName, parsePayload(approval.argsJson));
+                const approvalLabel =
+                  approval.status === "requested"
+                    ? "Needs approval"
+                    : approval.status === "approved"
+                      ? "Approved"
+                      : approval.status === "denied"
+                        ? "Declined"
+                        : "Timed out";
+                return (
+                  <div key={approval.id} className="rounded-xl border border-[var(--border)] bg-[var(--panel)] px-3 py-2.5">
+                    <div className="flex items-center justify-between gap-3">
+                      <div className="text-[11px] font-medium text-[var(--text-secondary)]">
+                        {humanizeToolName(approval.toolName)}
+                      </div>
+                      <span className="rounded-full border border-[var(--border)] px-2 py-0.5 text-[10px] text-[var(--text-muted)]">
+                        {approvalLabel}
+                      </span>
+                    </div>
+                    <div className="mt-1 text-sm text-[var(--text-primary)]">{callSummary.title}</div>
+                    {callSummary.detail ? (
+                      <div className="mt-1 text-xs text-[var(--text-muted)]">{callSummary.detail}</div>
+                    ) : null}
+                    {approval.reason ? (
+                      <div className="mt-1 text-xs text-[var(--text-muted)]">{approval.reason}</div>
+                    ) : null}
+                    <div className="mt-2 flex items-center gap-2">
+                      {isPending && onResolveApproval ? (
+                        <>
+                          <button
+                            className="rounded-full border border-[var(--border)] bg-[var(--panel-2)] px-3 py-1 text-[10px] text-[var(--text-secondary)] hover:border-[var(--border-strong)]"
+                            onClick={() => onResolveApproval(approval.id, "approve")}
+                            disabled={isBusy}
+                          >
+                            Approve
+                          </button>
+                          <button
+                            className="rounded-full border border-[var(--border)] bg-[var(--panel-2)] px-3 py-1 text-[10px] text-[var(--text-secondary)] hover:border-[var(--border-strong)]"
+                            onClick={() => onResolveApproval(approval.id, "deny")}
+                            disabled={isBusy}
+                          >
+                            Deny
+                          </button>
+                        </>
+                      ) : null}
+                    </div>
+                  </div>
+                );
+              })}
+
+            </div>
+          ) : null}
+        </div>
+        {showShelf && !assistantCollapsed ? (
+          <div className="thread-shelf">
+            {shelfThreads.map((thread) => (
+              <div key={thread.id} className="thread-box-wrap">
+                <button
+                  className={`thread-box ${
+                    activeThreadId === thread.id ? "active" : ""
+                  }`}
+                  onClick={() => onSelectThread(thread.id)}
+                >
+                  {thread.title}
+                </button>
+                {threadEditMode && !thread.isBase ? (
+                  <button
+                    className="thread-delete"
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      onDeleteThread(thread.id, baseThreadId);
+                    }}
+                    aria-label={`Delete ${thread.title}`}
+                  >
+                    <X className="h-3 w-3" />
+                  </button>
+                ) : null}
+              </div>
+            ))}
+          </div>
+        ) : null}
+      </div>
+      <div
+        className={`message-actions ${isAssistant ? "assistant opacity-0 pointer-events-none transition-opacity duration-150 group-hover:opacity-100 group-hover:pointer-events-auto" : "user"}`}
+      >
+        {isAssistant ? (
+          <button
+            className={`flex items-center justify-center gap-2 rounded-full border border-[var(--border)] px-4 py-2 text-xs text-[var(--text-muted)] transition ${
+              canAddThread
+                ? "hover:border-[var(--border-strong)] hover:text-[var(--text-secondary)]"
+                : "opacity-60 cursor-not-allowed"
+            }`}
+            onClick={async () => {
+              if (!canAddThread) return;
+              await onAddThread(message);
+              setThreadAdded(true);
+              window.setTimeout(() => setThreadAdded(false), 1200);
+            }}
+            disabled={!canAddThread}
+          >
+            {threadAdded ? (
+              <Check className="h-4 w-4 text-[var(--accent)]" />
+            ) : (
+              <>
+                <PlusCircle className="h-4 w-4" />
+                Thread
+              </>
+            )}
+          </button>
+        ) : null}
+        <button
+          className={`flex items-center gap-2 rounded-full border border-[var(--border)] px-4 py-2 text-xs text-[var(--text-muted)] transition hover:border-[var(--border-strong)] hover:text-[var(--text-secondary)] ${
+            isAssistant ? "" : "opacity-0 group-hover:opacity-100"
+          }`}
+          onClick={async () => {
+            await navigator.clipboard.writeText(messageTextContent);
+            setCopied(true);
+            window.setTimeout(() => setCopied(false), 1200);
+          }}
+        >
+          {copied ? (
+            <Check className="h-4 w-4 text-[var(--accent)]" />
+          ) : (
+            <Copy className="h-4 w-4" />
+          )}
+        </button>
+        {canEditThreads ? (
+          <button
+            className={`flex items-center gap-2 rounded-full border px-4 py-2 text-xs transition ${
+              threadEditMode
+                ? "border-[var(--accent)] text-[var(--text-primary)]"
+                : "border-[var(--border)] text-[var(--text-muted)] hover:border-[var(--border-strong)] hover:text-[var(--text-secondary)]"
+            }`}
+            onClick={() => setThreadEditMode((prev) => !prev)}
+            aria-label="Edit threads"
+          >
+            <Pencil className="h-4 w-4" />
+          </button>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+export default memo(MessageCard);