@hienlh/ppm 0.21.0 → 0.22.0

package/src/web/components/chat/message-list.tsx

@@ -1,7 +1,7 @@
-import { useEffect, useRef, useState, useMemo, useCallback, useLayoutEffect, memo, lazy, Suspense } from "react";
+import { useEffect, useRef, useState, useMemo, useCallback, useLayoutEffect, memo } from "react";
+import { userMessageOrdinals } from "@/lib/message-ordinals";
 import { useStickToBottom } from "use-stick-to-bottom";
-import { getAuthToken } from "@/lib/api-client";
-import type { ChatMessage, ChatEvent } from "../../../types/chat";
+import type { ChatMessage } from "../../../types/chat";
 import type { SessionPhase } from "../../../types/api";
 import type { BashPartialEntry } from "../../hooks/use-chat";
 import { ToolCard } from "./tool-cards";
@@ -15,50 +15,26 @@ import { TurnChangeRollup } from "./turn-change-rollup";
 import { TurnCostWarning } from "./turn-cost-warning";
 import { TaskTracker } from "./task-tracker";
 import { extractJsonlPath } from "./pre-compact-button";
-// Kick off the markdown chunk fetch at module load (not first render): Suspense
-// skeletons that resolve *after* the list mounts grow each message and shove the
-// bottom of the transcript out of view on fresh load.
-const markdownRendererImport = import("@/components/shared/markdown-renderer");
-const MarkdownRenderer = lazy(() =>
-  markdownRendererImport.then((m) => ({ default: m.MarkdownRenderer }))
-);
-import { cn, basename } from "@/lib/utils";
+import { MarkdownContent } from "./message-markdown";
+import { UserBubble } from "./message-user-bubble";
+import { InterleavedEvents, ThinkingIndicator } from "./message-events";
 import { RenderErrorBoundary } from "@/components/shared/markdown-error-boundary";
 
 import {
   AlertCircle,
   ShieldAlert,
   Bot,
-  ChevronDown,
-  ChevronRight,
-  FileText,
-  Image as ImageIcon,
   Copy,
   Check,
-  CheckCircle2,
   Loader2,
-  RotateCcw,
-  TerminalSquare,
-  ChevronUp,
-  Tag,
   XCircle,
-  ExternalLink,
-  Slash,
-  Pencil,
 } from "@/lib/icons";
 import { ChatWelcome } from "./chat-welcome";
 import { ChatScrollNav } from "./chat-scroll-nav";
-import { MessageActionBar, ActionButton } from "./message-action-bar";
-import { VersionSwitcher } from "./version-switcher";
 import type { VersionGroup } from "../../../types/api";
 import { QuestionCard } from "./question-card";
-import { parseUserMessage, type SystemTag } from "./user-message-parse";
 import type { Question } from "./question-card";
-import { useTabStore } from "@/stores/tab-store";
-import { api } from "@/lib/api-client";
-import { useProjectStore } from "@/stores/project-store";
-import { useImageOverlay } from "@/stores/image-overlay-store";
-import { collectGallery, GALLERY_ITEM_ATTR, GALLERY_ROOT_ATTR } from "@/lib/image-gallery";
+import { GALLERY_ROOT_ATTR } from "@/lib/image-gallery";
 
 interface MessageListProps {
   messages: ChatMessage[];
@@ -105,6 +81,40 @@ interface MessageListProps {
   isCompactExpanded?: (compactMessageId: string) => boolean;
 }
 
+/**
+ * Placeholder for a compaction segment being fetched.
+ *
+ * It sits in the flow rather than floating, so scrolling up lands on something
+ * the size of the turns that are coming instead of a blank gap that then jerks
+ * downward. The layout effect that preserves distance-from-bottom is what keeps
+ * inserting it from moving the messages already on screen.
+ */
+function PreCompactSkeleton() {
+  return (
+    <div
+      className="px-4 pt-4 space-y-4"
+      aria-busy="true"
+      aria-label="Loading previous conversation"
+    >
+      <div className="flex items-center justify-center gap-1.5 text-xs text-text-secondary">
+        <Loader2 className="size-3 animate-spin" />
+        Loading previous conversation…
+      </div>
+      {[0, 1, 2].map((i) => (
+        <div key={i} className={i % 2 === 0 ? "flex justify-end" : "flex justify-start"}>
+          <div
+            className={`animate-pulse space-y-2 rounded-lg bg-surface p-3 ${i % 2 === 0 ? "w-1/2" : "w-3/4"}`}
+          >
+            <div className="h-3 rounded bg-border" />
+            <div className="h-3 w-5/6 rounded bg-border" />
+            {i % 2 === 1 && <div className="h-3 w-2/3 rounded bg-border" />}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
 export function MessageList({
   messages,
   messagesLoading,
@@ -150,6 +160,10 @@ export function MessageList({
     return hasContent || hasEvents;
   }), [messages]);
 
+  // Counted once for the whole list — see `userMessageOrdinals` for why the
+  // obvious per-row form is the thing that makes a long transcript unusable.
+  const userOrdinals = useMemo(() => userMessageOrdinals(filtered), [filtered]);
+
   // The approval card + "thinking…" indicator ride at the end, inside the scrolled
   // content so stick-to-bottom keeps them in view.
   const hasTrailing = !!pendingApproval || isStreaming;
@@ -200,14 +214,26 @@ export function MessageList({
   // distance-from-bottom before the prepend, restore scrollTop after so the content
   // being read doesn't jump. Only fires for prepends — streaming appends leave the
   // ref null, so this is a no-op during normal streaming.
+  // Declared above the scroll-preserving layout effect below, which reads
+  // `autoLoadingCompact` to know whether the skeleton is still occupying space.
+  const [autoLoadingCompact, setAutoLoadingCompact] = useState(false);
+  // A failed expand used to be invisible: the fetch rejected, nothing caught it,
+  // and scrolling to the top of a long chat simply did nothing forever. Holding
+  // the reason both shows it and stops the loader retrying on every intersection.
+  const [compactLoadError, setCompactLoadError] = useState<string | null>(null);
+
   const preserveFromBottomRef = useRef<number | null>(null);
   useLayoutEffect(() => {
     const el = scrollEl;
     if (el && preserveFromBottomRef.current != null) {
       el.scrollTop = el.scrollHeight - preserveFromBottomRef.current;
-      preserveFromBottomRef.current = null;
+      // Held, not cleared, while the skeleton is up: it occupies real space at
+      // the top, so it moves `scrollHeight` without `filtered.length` changing.
+      // Clearing here would leave the view jumped by the skeleton's height for
+      // as long as the fetch takes, then jumped back when it resolved.
+      if (!autoLoadingCompact) preserveFromBottomRef.current = null;
     }
-  }, [filtered.length, scrollEl]);
+  }, [filtered.length, scrollEl, autoLoadingCompact]);
 
   // Jump to the newest message when the conversation/session swaps (initial mount is
   // handled by `initial: "instant"`). Keyed on sessionId — NOT on filtered[0].id,
@@ -295,30 +321,53 @@ export function MessageList({
   const topUnexpandedCompact = findTopUnexpandedCompact();
   const hasMore = !!topUnexpandedCompact;
 
+  // Held as two strings rather than as the object. `findTopUnexpandedCompact`
+  // runs on every render and answers with a fresh literal, so depending on that
+  // object made `loadMore` new every render — and the observer effect below
+  // tore the IntersectionObserver down and built another one with it, which
+  // during streaming is every token batch. Measured before: 1 observer at
+  // mount, +1 per re-render against an unchanged message list.
+  const topCompactId = topUnexpandedCompact?.id ?? null;
+  const topCompactPath = topUnexpandedCompact?.jsonlPath ?? null;
+
   // Fetch pre-compact history from the server (prepends older messages).
-  const [autoLoadingCompact, setAutoLoadingCompact] = useState(false);
   const loadMore = useCallback(async () => {
-    if (!topUnexpandedCompact || !onExpandCompact || autoLoadingCompact) return;
+    if (!topCompactId || !topCompactPath || !onExpandCompact || autoLoadingCompact) return;
     // Capture distance-from-bottom so the post-prepend layout effect can hold the
     // reading position steady while older messages are inserted above.
     const el = scrollEl;
     preserveFromBottomRef.current = el ? el.scrollHeight - el.scrollTop : null;
     setAutoLoadingCompact(true);
+    setCompactLoadError(null);
     try {
-      await onExpandCompact(topUnexpandedCompact.id, topUnexpandedCompact.jsonlPath);
+      await onExpandCompact(topCompactId, topCompactPath);
+    } catch (e) {
+      setCompactLoadError(e instanceof Error ? e.message : "Could not load previous conversation");
     } finally {
       setAutoLoadingCompact(false);
     }
-  }, [topUnexpandedCompact, onExpandCompact, autoLoadingCompact, scrollEl]);
-
-  // Auto-load older history when the user scrolls near the top.
+  }, [topCompactId, topCompactPath, onExpandCompact, autoLoadingCompact, scrollEl]);
+
+  // Lazy-load older history when a sentinel at the top of the transcript comes
+  // into range. This replaces a scroll listener that re-ran its check on every
+  // scroll event and — the part that actually failed — could not fire at all
+  // when the loaded history was shorter than the viewport, because there was
+  // nothing to scroll. `loadMore` guards on `autoLoadingCompact`, so repeat
+  // intersections while a fetch is in flight are free.
+  const topSentinelRef = useRef<HTMLDivElement | null>(null);
   useEffect(() => {
     const el = scrollEl;
-    if (!el || !hasMore) return;
-    const onScroll = () => { if (el.scrollTop < 200 && !autoLoadingCompact) loadMore(); };
-    el.addEventListener("scroll", onScroll, { passive: true });
-    return () => el.removeEventListener("scroll", onScroll);
-  }, [scrollEl, hasMore, autoLoadingCompact, loadMore]);
+    const sentinel = topSentinelRef.current;
+    if (!el || !sentinel || !hasMore || compactLoadError) return;
+    const io = new IntersectionObserver(
+      (entries) => { if (entries.some((e) => e.isIntersecting)) loadMore(); },
+      // Start the fetch while the top is still a screenful away, so the next
+      // segment is usually there before the user reaches the end of this one.
+      { root: el, rootMargin: "400px 0px 0px 0px" },
+    );
+    io.observe(sentinel);
+    return () => io.disconnect();
+  }, [scrollEl, hasMore, compactLoadError, loadMore]);
 
   if (messagesLoading && (!keepStaleWhileLoading || messages.length === 0)) {
     return (
@@ -353,10 +402,17 @@ export function MessageList({
           </button>
         </div>
       )}
-      {autoLoadingCompact && (
-        <div className="absolute top-2 left-0 right-0 z-10 flex items-center justify-center gap-1.5 text-xs text-text-secondary pointer-events-none">
-          <Loader2 className="size-3 animate-spin" />
-          Loading previous conversation...
+      {!autoLoadingCompact && compactLoadError && (
+        <div className="absolute top-2 left-0 right-0 z-10 flex justify-center">
+          <button
+            type="button"
+            onClick={() => { setCompactLoadError(null); loadMore(); }}
+            className="inline-flex items-center gap-1.5 rounded-md border border-border bg-surface px-3 py-2 text-xs text-text-primary hover:bg-surface-hover min-h-[44px] md:min-h-0"
+          >
+            <AlertCircle className="size-3.5 text-destructive" />
+            <span>Could not load previous conversation: {compactLoadError}</span>
+            <span className="underline">Retry</span>
+          </button>
         </div>
       )}
       <div
@@ -366,12 +422,12 @@ export function MessageList({
         style={{ WebkitOverflowScrolling: "touch", overscrollBehavior: "contain" }}
       >
         <div ref={contentRef as unknown as React.Ref<HTMLDivElement>} className="w-full">
+          {hasMore && <div ref={topSentinelRef} aria-hidden className="h-px" />}
+          {autoLoadingCompact && <PreCompactSkeleton />}
           {filtered.map((msg, globalIdx) => {
             const prevMsg = globalIdx > 0 ? filtered[globalIdx - 1] : undefined;
             // User-message ordinal (1-based) — stable version-group anchor across forks.
-            const versionOrdinal = msg.role === "user"
-              ? filtered.slice(0, globalIdx + 1).reduce((n, m) => n + (m.role === "user" ? 1 : 0), 0)
-              : 0;
+            const versionOrdinal = userOrdinals[globalIdx] ?? 0;
             // Resolved here rather than deeper down so the ordinal→group lookup
             // happens once per message instead of being threaded through bubbles.
             const versionGroup = versionOrdinal ? versionMap?.[versionOrdinal] : undefined;
@@ -533,820 +589,10 @@ const MessageBubble = memo(function MessageBubble({ message, isStreaming, isLast
   );
 });
 
-/** Image extensions that can be previewed inline */
-const IMAGE_EXTS = new Set([".png", ".jpg", ".jpeg", ".gif", ".webp"]);
-
-/** Build a preview URL for an uploaded file (served from /chat/uploads/:filename) */
-function uploadPreviewUrl(filePath: string, projectName?: string): string {
-  const filename = basename(filePath);
-  // Use a generic project name — the upload route is project-scoped but files are global
-  return `/api/project/${encodeURIComponent(projectName ?? "_")}/chat/uploads/${encodeURIComponent(filename)}`;
-}
-
-/** Check if a file path is an image based on extension */
-function isImagePath(path: string): boolean {
-  const dot = path.lastIndexOf(".");
-  if (dot === -1) return false;
-  return IMAGE_EXTS.has(path.slice(dot).toLowerCase());
-}
-
-function isPdfPath(path: string): boolean {
-  return path.toLowerCase().endsWith(".pdf");
-}
-
-/** Detect if tags contain system-injected content (not real user input) */
-const SYSTEM_TAG_NAMES = new Set(["task-notification", "environment_details", "local-command-caveat"]);
-
-/** User message bubble — full width, collapsible, with system tag badges */
-function UserBubble({ content, messageId, timestamp, projectName, onFork, onEdit, isEditing, sessionId, providerId, versionGroup, onNavigateVersion, versionNavDisabled }: {
-  content: string;
-  messageId?: string;
-  timestamp: string;
-  projectName?: string;
-  onFork?: () => void;
-  onEdit?: () => void;
-  isEditing?: boolean;
-  sessionId?: string;
-  providerId?: string;
-  versionGroup?: VersionGroup;
-  onNavigateVersion?: (sessionId: string) => void;
-  versionNavDisabled?: boolean;
-}) {
-  const { files, text, tags, command, terminalBlocks, idePath, agent } = useMemo(
-    () => parseUserMessage(content),
-    [content],
-  );
-
-  const isSystemContext = tags.some((t) => SYSTEM_TAG_NAMES.has(t.name));
-
-  const [expanded, setExpanded] = useState(false);
-  const [isOverflowing, setIsOverflowing] = useState(false);
-  const contentRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const el = contentRef.current;
-    if (!el) return;
-    const check = () => setIsOverflowing(el.scrollHeight > el.clientHeight + 2);
-    check();
-    const ro = new ResizeObserver(check);
-    ro.observe(el);
-    return () => ro.disconnect();
-  }, [text]);
-
-  return (
-    <div className={cn("flex flex-col gap-1", !isSystemContext && "items-end")}>
-    {/* Own-content bubble: accent-wash fill + custom radius (sharp bottom-right
-        corner anchors it to the sender on the right). */}
-    <div
-      data-user-message={!isSystemContext ? "true" : undefined}
-      style={!isSystemContext ? { borderRadius: "var(--rad) var(--rad) 4px var(--rad)" } : undefined}
-      className={cn(
-        "group/user relative px-3 py-2 text-sm border shadow-sm transition-all",
-      isSystemContext
-        ? "rounded-lg bg-surface/40 border-border/40 text-text-secondary"
-        : "max-w-[80%] bg-accent-wash border-accent-wash-border text-text",
-      isEditing && "ring-2 ring-primary/60 border-primary/40",
-    )}>
-      {/* System tags as badges */}
-      {tags.length > 0 && <SystemTagBadges tags={tags} />}
-
-      {/* Agent delegation chip — parsed back from the "Use the X agent to" prefix */}
-      {agent && (
-        <div className="flex items-center gap-1.5 mb-0.5">
-          <span className="inline-flex items-center gap-1 rounded-md bg-sky-500/15 border border-sky-500/25 px-2 py-0.5 text-xs font-medium text-sky-600 dark:text-sky-400">
-            <Bot className="size-3 shrink-0" />
-            {agent}
-          </span>
-        </div>
-      )}
-
-      {/* Slash command chip — args rendered in body for expand/collapse support */}
-      {command && (
-        <div className="flex items-center gap-1.5 mb-0.5">
-          <span className="inline-flex items-center gap-1 rounded-md bg-primary/15 border border-primary/20 px-2 py-0.5 text-xs font-medium text-primary">
-            <Slash className="size-3 shrink-0" />
-            {command.name}
-          </span>
-        </div>
-      )}
-
-      {/* IDE context — the file the user had open, as a clickable chip */}
-      {idePath && (
-        <div className="flex items-center gap-1.5 mb-1 text-[11px] text-text-subtle">
-          <span className="shrink-0">Opened in IDE:</span>
-          <FilePathChip path={idePath} projectName={projectName} />
-        </div>
-      )}
-
-      {/* Attached files — image thumbnails + file chips */}
-      {files.length > 0 && (
-        <div className="flex flex-wrap gap-1.5">
-          {files.map((filePath, i) =>
-            isImagePath(filePath) ? (
-              <AuthImageThumbnail key={i} filePath={filePath} projectName={projectName} />
-            ) : (
-              <div
-                key={i}
-                className="flex items-center gap-1 rounded-md border border-border/60 bg-background/40 px-1.5 py-0.5 text-[11px] text-text-secondary"
-              >
-                <FileText className="size-3 shrink-0" />
-                <span className="truncate max-w-32">{basename(filePath)}</span>
-              </div>
-            ),
-          )}
-        </div>
-      )}
-
-      {/* Terminal output previews */}
-      {terminalBlocks.length > 0 && (
-        <div className="space-y-1.5">
-          {terminalBlocks.map((block, i) => (
-            <TerminalBlockPreview key={i} content={block} />
-          ))}
-        </div>
-      )}
-
-      {/* Text content — 2-line clamp by default, expandable */}
-      {text && (
-        <div
-          ref={contentRef}
-          className={cn(
-            "whitespace-pre-wrap break-words transition-all duration-200 select-text",
-            !expanded && "line-clamp-2",
-            expanded && "max-h-[50vh] overflow-y-auto",
-          )}
-        >
-          {isSystemContext ? <TextWithFilePaths text={text} projectName={projectName} /> : <TextWithLinks text={text} />}
-        </div>
-      )}
-      {(isOverflowing || expanded) && (
-        <button
-          onClick={() => setExpanded(!expanded)}
-          className={cn(
-            "flex items-center gap-1 text-xs mt-1 transition-colors",
-            isSystemContext ? "text-text-subtle hover:text-text-secondary" : "text-primary/70 hover:text-primary",
-          )}
-        >
-          {expanded ? <><ChevronUp className="size-3" />Show less</> : <><ChevronDown className="size-3" />Show more</>}
-        </button>
-      )}
-      {/* Version switcher — only when this message has edited siblings */}
-      {!isSystemContext && onNavigateVersion && (
-        <VersionSwitcher
-          group={versionGroup}
-          onNavigate={onNavigateVersion}
-          disabled={versionNavDisabled}
-        />
-      )}
-    </div>
-      {/* Action bar below the bubble — timestamp, copy, edit/fork (real user messages only) */}
-      {!isSystemContext && (
-        <MessageActionBar timestamp={timestamp} content={content}>
-          {onEdit && (
-            <ActionButton
-              icon={<Pencil className="size-3.5" />}
-              label="Edit"
-              title="Edit this message (continue in the same tab)"
-              onClick={onEdit}
-            />
-          )}
-          {onFork && (
-            <ActionButton
-              icon={<RotateCcw className="size-3.5" />}
-              label="Fork"
-              title="Retry from this message (fork into a new tab)"
-              onClick={onFork}
-            />
-          )}
-        </MessageActionBar>
-      )}
-    </div>
-  );
-}
-
-/** Collapsible terminal output preview in user messages */
-function TerminalBlockPreview({ content }: { content: string }) {
-  const [expanded, setExpanded] = useState(false);
-  return (
-    <div>
-      <button
-        type="button"
-        onClick={() => setExpanded(!expanded)}
-        className={cn(
-          "flex items-center gap-1.5 rounded-md border px-2 py-1 text-xs transition-colors",
-          expanded
-            ? "border-primary/50 bg-surface-elevated text-text-primary"
-            : "border-border/60 bg-background/40 text-text-secondary hover:bg-surface",
-        )}
-      >
-        <TerminalSquare className="size-3.5 shrink-0" />
-        <span>Terminal output</span>
-        <ChevronDown className={cn("size-3 shrink-0 transition-transform", expanded && "rotate-180")} />
-      </button>
-      {expanded && (
-        <pre className="mt-1 max-h-40 overflow-auto rounded-md border border-border bg-background p-2 text-xs text-text-primary font-mono whitespace-pre-wrap break-words">
-          {content}
-        </pre>
-      )}
-    </div>
-  );
-}
-
-/** Render system tags as collapsible badges */
-function SystemTagBadges({ tags }: { tags: SystemTag[] }) {
-  return (
-    <div className="flex flex-wrap gap-1.5">
-      {tags.map((tag, i) => (
-        <SystemTagBadge key={i} tag={tag} />
-      ))}
-    </div>
-  );
-}
-
-function SystemTagBadge({ tag }: { tag: SystemTag }) {
-  const [open, setOpen] = useState(false);
-
-  // Task notification: render formatted instead of raw XML
-  if (tag.name === "task-notification") {
-    return <TaskNotificationBadge content={tag.content} />;
-  }
-
-  return (
-    <div className="text-xs">
-      <button
-        onClick={() => setOpen(!open)}
-        className="flex items-center gap-1 rounded-full border border-border/60 bg-surface/50 px-2 py-0.5 text-text-subtle hover:text-text-secondary hover:bg-surface transition-colors"
-      >
-        <Tag className="size-2.5" />
-        <span>{tag.label}</span>
-        <ChevronRight className={cn("size-2.5 transition-transform", open && "rotate-90")} />
-      </button>
-      {open && (
-        <div className="mt-1 rounded border border-border/40 bg-surface/30 px-2 py-1.5 text-[11px] text-text-subtle/80 whitespace-pre-wrap max-h-40 overflow-y-auto leading-relaxed">
-          {tag.content}
-        </div>
-      )}
-    </div>
-  );
-}
-
-/** Extract a sub-tag value from XML-like content */
-function xmlTag(content: string, tag: string): string | undefined {
-  const m = content.match(new RegExp(`<${tag}>([\\s\\S]*?)</${tag}>`));
-  return m?.[1]?.trim() || undefined;
-}
-
-/** Formatted badge for <task-notification> — shows status, summary, output file, result */
-function TaskNotificationBadge({ content }: { content: string }) {
-  const [open, setOpen] = useState(false);
-  const status = xmlTag(content, "status");
-  const summary = xmlTag(content, "summary");
-  const outputFile = xmlTag(content, "output-file");
-  const result = xmlTag(content, "result");
-  const isOk = status === "completed";
-
-  return (
-    <div className="text-xs">
-      <button
-        onClick={() => setOpen(!open)}
-        className="flex items-center gap-1.5 rounded-full border border-border/60 bg-surface/50 px-2 py-0.5 text-text-subtle hover:text-text-secondary hover:bg-surface transition-colors"
-      >
-        {isOk ? <CheckCircle2 className="size-2.5 text-success" /> : <XCircle className="size-2.5 text-warning" />}
-        <span className="truncate max-w-80">{summary ?? "Task notification"}</span>
-        <ChevronRight className={cn("size-2.5 transition-transform shrink-0", open && "rotate-90")} />
-      </button>
-      {open && (
-        <div className="mt-1 rounded border border-border/40 bg-surface/30 px-2 py-1.5 space-y-1.5">
-          {/* Full summary (button truncates it) */}
-          {summary && <p className="text-[11px] text-text-secondary">{summary}</p>}
-          {outputFile && <FilePathChip path={outputFile} />}
-          {result && (
-            <div className="text-[11px] text-text-subtle/80 max-h-60 overflow-y-auto leading-relaxed">
-              <MarkdownContent content={result} />
-            </div>
-          )}
-        </div>
-      )}
-    </div>
-  );
-}
-
-/** Clickable file path chip — opens file in editor tab */
-function FilePathChip({ path, projectName }: { path: string; projectName?: string }) {
-  const handleClick = useCallback(() => {
-    const openTab = useTabStore.getState().openTab;
-    const pName = projectName ?? useProjectStore.getState().activeProject?.name;
-    const fileName = basename(path);
-    const meta: Record<string, unknown> = { filePath: path };
-    if (pName) meta.projectName = pName;
-    // Try to verify file exists, then open; fallback: open directly
-    api.get(`/api/fs/read?path=${encodeURIComponent(path)}`).then(() => {
-      openTab({ type: "editor", title: fileName, metadata: meta, projectId: null, closable: true });
-    }).catch(() => {
-      openTab({ type: "editor", title: fileName, metadata: meta, projectId: null, closable: true });
-    });
-  }, [path, projectName]);
-
-  return (
-    <button
-      type="button"
-      onClick={handleClick}
-      className="inline-flex items-center gap-1 rounded border border-border/50 bg-surface/50 px-1.5 py-0.5 font-mono text-[10px] text-text-secondary hover:text-text-primary hover:bg-surface transition-colors cursor-pointer"
-    >
-      <FileText className="size-2.5 shrink-0" />
-      <span className="truncate max-w-60">{basename(path)}</span>
-      <ExternalLink className="size-2 shrink-0 opacity-50" />
-    </button>
-  );
-}
-
-/** Render plain text with http(s) URLs turned into clickable links. Preserves
- *  whitespace/newlines via the surrounding `whitespace-pre-wrap` container. */
-function TextWithLinks({ text }: { text: string }) {
-  const parts = useMemo(() => {
-    const re = /(https?:\/\/[^\s<>()]+[^\s<>().,;:!?'"])/g;
-    const result: { kind: "text" | "url"; value: string }[] = [];
-    let last = 0;
-    let m;
-    while ((m = re.exec(text)) !== null) {
-      if (m.index > last) result.push({ kind: "text", value: text.slice(last, m.index) });
-      result.push({ kind: "url", value: m[1]! });
-      last = m.index + m[0].length;
-    }
-    if (last < text.length) result.push({ kind: "text", value: text.slice(last) });
-    return result;
-  }, [text]);
-
-  // No URLs — return the raw string so nothing about the layout changes.
-  if (parts.every((p) => p.kind === "text")) return <>{text}</>;
-
-  return (
-    <>
-      {parts.map((p, i) =>
-        p.kind === "url" ? (
-          <a
-            key={i}
-            href={p.value}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-primary underline underline-offset-2 hover:text-primary/80 break-all"
-            onClick={(e) => e.stopPropagation()}
-          >
-            {p.value}
-          </a>
-        ) : (
-          <span key={i}>{p.value}</span>
-        ),
-      )}
-    </>
-  );
-}
-
-/** Render text with absolute file paths detected and turned into clickable chips */
-function TextWithFilePaths({ text, projectName }: { text: string; projectName?: string }) {
-  const parts = useMemo(() => {
-    // Match absolute file paths (at least 2 segments)
-    const re = /(\/(?:[\w.\-]+\/)+[\w.\-]+)/g;
-    const result: { kind: "text" | "path"; value: string }[] = [];
-    let last = 0;
-    let m;
-    while ((m = re.exec(text)) !== null) {
-      if (m.index > last) result.push({ kind: "text", value: text.slice(last, m.index) });
-      result.push({ kind: "path", value: m[1]! });
-      last = m.index + m[0].length;
-    }
-    if (last < text.length) result.push({ kind: "text", value: text.slice(last) });
-    return result;
-  }, [text]);
-
-  return (
-    <>
-      {parts.map((p, i) =>
-        p.kind === "path"
-          ? <FilePathChip key={i} path={p.value} projectName={projectName} />
-          : <span key={i}>{p.value}</span>,
-      )}
-    </>
-  );
-}
-
-/**
- * Session-scoped image cache: blob URL + rendered box per src. Virtualized rows
- * unmount/remount constantly while scrolling; refetching the image and re-growing
- * from the placeholder on EVERY remount changed the row height after paint — the
- * repeatable downward jerk when scrolling up through image-bearing messages.
- * URLs are intentionally never revoked (bounded by unique images per session).
- */
-const imageBlobCache = new Map<string, { url: string; w?: number; h?: number }>();
-
-/** Hook: fetch an image via auth header, return blob URL (cached across mounts) */
-function useAuthBlob(src: string): { blobUrl: string | null; error: boolean } {
-  const [blobUrl, setBlobUrl] = useState<string | null>(() => imageBlobCache.get(src)?.url ?? null);
-  const [error, setError] = useState(false);
-
-  useEffect(() => {
-    const cached = imageBlobCache.get(src);
-    if (cached) { setBlobUrl(cached.url); return; }
-    let stale = false;
-    const token = getAuthToken();
-    fetch(src, { headers: token ? { Authorization: `Bearer ${token}` } : {} })
-      .then((r) => { if (!r.ok) throw new Error("Failed"); return r.blob(); })
-      .then((blob) => {
-        if (stale) return;
-        const url = URL.createObjectURL(blob);
-        imageBlobCache.set(src, { url });
-        setBlobUrl(url);
-      })
-      .catch(() => { if (!stale) setError(true); });
-    return () => { stale = true; }; // cache owns the URL — no revoke
-  }, [src]);
-
-  return { blobUrl, error };
-}
-
-/** Fetches image with auth header, renders as blob URL — click opens lightbox */
-function AuthImage({ src, alt }: { src: string; alt: string }) {
-  const { blobUrl, error } = useAuthBlob(src);
-  const openOverlay = useImageOverlay((s) => s.open);
-  // Rendered box captured after the first load — pins the layout on remounts so
-  // the row never grows after paint (see imageBlobCache).
-  const cached = imageBlobCache.get(src);
-  const box = cached?.w && cached?.h ? { width: cached.w, height: cached.h } : undefined;
-
-  if (error) {
-    return (
-      <div className="flex items-center gap-1.5 rounded-md border border-border bg-background/50 px-2 py-1 text-xs text-text-secondary">
-        <ImageIcon className="size-3.5 shrink-0" />
-        <span className="truncate max-w-40">{alt}</span>
-      </div>
-    );
-  }
-
-  if (!blobUrl) {
-    return <div className="rounded-md bg-surface border border-border h-24 w-32 animate-pulse" style={box} />;
-  }
-
-  return (
-    <button
-      type="button"
-      onClick={(e) => openOverlay(blobUrl, alt, collectGallery(e.currentTarget))}
-      className="block text-left"
-    >
-      <img
-        src={blobUrl}
-        alt={alt}
-        style={box}
-        {...{ [GALLERY_ITEM_ATTR]: "" }}
-        onLoad={(e) => {
-          const el = e.currentTarget;
-          const c = imageBlobCache.get(src);
-          if (c && (!c.w || !c.h)) { c.w = el.offsetWidth; c.h = el.offsetHeight; }
-        }}
-        className="rounded-md max-h-48 max-w-full object-contain border border-border cursor-pointer hover:opacity-90 transition-opacity"
-      />
-    </button>
-  );
-}
-
-/** Chip for attached images in user bubble — tiny preview replaces icon, click opens lightbox */
-function AuthImageThumbnail({ filePath, projectName }: { filePath: string; projectName?: string }) {
-  const src = uploadPreviewUrl(filePath, projectName);
-  const { blobUrl, error } = useAuthBlob(src);
-  const openOverlay = useImageOverlay((s) => s.open);
-  const name = basename(filePath);
-
-  return (
-    <button
-      type="button"
-      onClick={(e) => blobUrl && openOverlay(blobUrl, name, collectGallery(e.currentTarget))}
-      className="flex items-center gap-1 rounded-md border border-border/60 bg-background/40 px-1.5 py-0.5 text-[11px] text-text-secondary hover:bg-surface transition-colors cursor-pointer"
-    >
-      {blobUrl ? (
-        <img src={blobUrl} alt={name} {...{ [GALLERY_ITEM_ATTR]: "" }} className="size-4 rounded-sm object-cover shrink-0" />
-      ) : error ? (
-        <ImageIcon className="size-3 shrink-0" />
-      ) : (
-        <div className="size-4 rounded-sm bg-surface animate-pulse shrink-0" />
-      )}
-      <span className="truncate max-w-32">{name}</span>
-    </button>
-  );
-}
-
-/** Fetches file with auth, opens in new browser tab (for PDFs, etc.) */
-function AuthFileLink({ src, filename, mimeType }: { src: string; filename: string; mimeType: string }) {
-  const [loading, setLoading] = useState(false);
-
-  const handleClick = useCallback(async () => {
-    setLoading(true);
-    try {
-      const token = getAuthToken();
-      const res = await fetch(src, { headers: token ? { Authorization: `Bearer ${token}` } : {} });
-      if (!res.ok) throw new Error("Failed to load");
-      const blob = await res.blob();
-      const url = URL.createObjectURL(new Blob([blob], { type: mimeType }));
-      window.open(url, "_blank");
-      // Revoke after a delay to let the new tab load
-      setTimeout(() => URL.revokeObjectURL(url), 60_000);
-    } catch {
-      // Fallback: try direct link
-      window.open(src, "_blank");
-    } finally {
-      setLoading(false);
-    }
-  }, [src, mimeType]);
 
-  return (
-    <button
-      type="button"
-      onClick={handleClick}
-      disabled={loading}
-      className="flex items-center gap-1.5 rounded-md border border-border bg-background/50 px-2 py-1 text-xs text-text-secondary hover:bg-surface hover:text-text-primary transition-colors cursor-pointer disabled:opacity-50"
-    >
-      <FileText className="size-3.5 shrink-0 text-error" />
-      <span className="truncate max-w-40">{filename}</span>
-      {loading && <span className="animate-spin text-[10px]">...</span>}
-    </button>
-  );
-}
 
-/**
- * Renders events in order — consecutive text events merged into one bubble,
- * tool_use/tool_result render as cards between text sections.
- * Last text group shows streaming cursor when actively streaming.
- */
-type EventGroup =
-  | { kind: "text"; content: string }
-  | { kind: "thinking"; content: string }
-  | { kind: "tool"; tool: ChatEvent; result?: ChatEvent; completed?: boolean };
 
-function InterleavedEvents({ events, isStreaming, projectName, bashPartialOutput }: {
-  events: ChatEvent[];
-  isStreaming: boolean;
-  projectName?: string;
-  bashPartialOutput?: React.RefObject<Map<string, BashPartialEntry>>;
-}) {
-  // Group: consecutive text → merged text block; tool_use + tool_result paired by toolUseId
-  const groups: EventGroup[] = [];
-  let textBuffer = "";
 
-  // First pass: create groups for text, thinking, and tool_use events
-  let thinkingBuffer = "";
-  for (let i = 0; i < events.length; i++) {
-    const event = events[i]!;
-    if (event.type === "thinking") {
-      // Flush text buffer first if any
-      if (textBuffer) { groups.push({ kind: "text", content: textBuffer }); textBuffer = ""; }
-      thinkingBuffer += event.content;
-      continue;
-    }
-    // Flush thinking buffer when non-thinking event arrives
-    if (thinkingBuffer) {
-      groups.push({ kind: "thinking", content: thinkingBuffer });
-      thinkingBuffer = "";
-    }
-    if (event.type === "account_retry") {
-      if (textBuffer) { groups.push({ kind: "text", content: textBuffer }); textBuffer = ""; }
-      const label = (event as any).accountLabel ?? "another account";
-      const reason = (event as any).reason ?? "Auth failed";
-      groups.push({ kind: "text", content: `\n\n> ↻ ${reason} — retrying with **${label}**...\n\n` });
-      continue;
-    }
-    if (event.type === "text") {
-      textBuffer += event.content;
-    } else if (event.type === "tool_use") {
-      // A call may be announced before it has anything to show and re-announced
-      // once it does — image generation starts with no file and no prompt, and
-      // only learns both when it finishes. The later event describes the same
-      // call, so it replaces the card rather than adding a second one.
-      const useId = (event as any).toolUseId;
-      const existing = useId
-        ? groups.find(
-            (g) => g.kind === "tool" && g.tool.type === "tool_use" && (g.tool as any).toolUseId === useId,
-          ) as (EventGroup & { kind: "tool" }) | undefined
-        : undefined;
-      if (existing) {
-        existing.tool = event;
-        continue;
-      }
-      if (textBuffer) {
-        groups.push({ kind: "text", content: textBuffer });
-        textBuffer = "";
-      }
-      groups.push({ kind: "tool", tool: event });
-    } else if (event.type === "tool_result") {
-      // Skip tool_results in first pass — matched below
-    } else {
-      if (textBuffer) {
-        groups.push({ kind: "text", content: textBuffer });
-        textBuffer = "";
-      }
-      groups.push({ kind: "tool", tool: event });
-    }
-  }
-  if (thinkingBuffer) {
-    groups.push({ kind: "thinking", content: thinkingBuffer });
-  }
-  if (textBuffer) {
-    groups.push({ kind: "text", content: textBuffer });
-  }
-
-  // Second pass: match tool_result events to their tool_use by toolUseId
-  const toolResults = events.filter((e) => e.type === "tool_result");
-  for (const tr of toolResults) {
-    const trId = (tr as any).toolUseId;
-    // Match by ID if available
-    if (trId) {
-      const match = groups.find(
-        (g) => g.kind === "tool" && g.tool.type === "tool_use" && (g.tool as any).toolUseId === trId,
-      ) as (EventGroup & { kind: "tool" }) | undefined;
-      if (match) {
-        match.result = tr;
-        continue;
-      }
-    }
-    // Fallback: attach to first tool group without a result
-    const unmatched = groups.find(
-      (g) => g.kind === "tool" && !g.result,
-    ) as (EventGroup & { kind: "tool" }) | undefined;
-    if (unmatched) {
-      unmatched.result = tr;
-    }
-  }
-
-  // Third pass: fallback to embedded result from buffer enrichment (reconnect).
-  // When BE buffers tool_result, it also attaches result onto the matching tool_use event.
-  for (const g of groups) {
-    if (g.kind === "tool" && !g.result && g.tool.type === "tool_use") {
-      const embedded = (g.tool as any).result;
-      if (embedded) {
-        g.result = { type: "tool_result", output: embedded.output, isError: embedded.isError, exitCode: embedded.exitCode } as ChatEvent;
-      }
-    }
-  }
-
-  // Mark tool groups without explicit tool_result as completed when:
-  // 1. It's a Read and a later Edit on the same file has a result (Edit implies Read finished)
-  // 2. Streaming is fully finished
-  for (let gi = 0; gi < groups.length; gi++) {
-    const g = groups[gi]!;
-    if (g.kind === "tool" && !g.result) {
-      let impliedDone = false;
-      if (g.tool.type === "tool_use" && g.tool.tool === "Read") {
-        const readPath = (g.tool.input as any)?.file_path;
-        if (readPath) {
-          impliedDone = groups.slice(gi + 1).some(
-            (later) => later.kind === "tool" && later.result
-              && later.tool.type === "tool_use" && later.tool.tool === "Edit"
-              && (later.tool.input as any)?.file_path === readPath,
-          );
-        }
-      }
-      g.completed = impliedDone || !isStreaming;
-    }
-  }
-
-  return (
-    <>
-      {groups.map((group, i) => {
-        if (group.kind === "thinking") {
-          return <ThinkingBlock key={`think-${i}`} content={group.content} isStreaming={isStreaming && i === groups.length - 1} />;
-        }
-        if (group.kind === "text") {
-          const isLast = isStreaming && i === groups.length - 1;
-          return (
-            <div key={`text-${i}`} className="text-sm text-text-primary select-text">
-              <StreamingText content={group.content} animate={isLast} projectName={projectName} />
-            </div>
-          );
-        }
-        return <ToolCard key={`tool-${i}`} tool={group.tool} result={group.result} completed={group.completed} projectName={projectName} bashPartialOutput={bashPartialOutput} />;
-      })}
-    </>
-  );
-}
-
-/** Collapsible thinking block — shows Claude's reasoning, collapsed by default when done */
-function ThinkingBlock({ content, isStreaming }: { content: string; isStreaming: boolean }) {
-  const [expanded, setExpanded] = useState(isStreaming);
-  const scrollRef = useRef<HTMLDivElement>(null);
-
-  // Auto-collapse when streaming finishes
-  useEffect(() => {
-    if (!isStreaming && content.length > 0) setExpanded(false);
-  }, [isStreaming, content.length]);
-
-  // Auto-scroll to bottom during streaming
-  useEffect(() => {
-    if (isStreaming && expanded && scrollRef.current) {
-      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
-    }
-  }, [content, isStreaming, expanded]);
-
-  return (
-    <div className="rounded border border-border/50 bg-surface/30 text-xs">
-      <button
-        onClick={() => setExpanded(!expanded)}
-        className="flex items-center gap-2 px-2 py-1.5 w-full text-left hover:bg-surface transition-colors text-text-subtle"
-      >
-        {isStreaming ? <Loader2 className="size-3 animate-spin" /> : <ChevronRight className={`size-3 transition-transform ${expanded ? "rotate-90" : ""}`} />}
-        <span>Thinking{isStreaming ? "..." : ""}</span>
-        {!isStreaming && <span className="text-text-subtle/50 ml-auto">{content.length > 100 ? `${Math.round(content.length / 4)} tokens` : ""}</span>}
-      </button>
-      {expanded && (
-        <div ref={scrollRef} className="max-h-60 overflow-y-auto">
-          <div className="px-2 pb-2 text-text-subtle/80 whitespace-pre-wrap text-[11px] leading-relaxed">
-            {content}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-/**
- * Text component that renders streamed content directly.
- * WebSocket already delivers tokens incrementally — no fake animation needed.
- * When `isStreaming=true`, shows a blinking cursor at the end.
- */
-function StreamingText({ content, animate: isStreaming, projectName }: { content: string; animate: boolean; projectName?: string }) {
-  return (
-    <>
-      <MarkdownContent content={content} projectName={projectName} isStreaming={isStreaming} />
-      {isStreaming && (
-        <span className="text-text-subtle text-sm animate-pulse">Thinking...</span>
-      )}
-    </>
-  );
-}
-
-/**
- * Shows streaming status with elapsed time and warnings:
- * - No assistant message: "Connecting to Claude..." with elapsed timer
- * - After tool: "Processing..."
- * - Text streaming: hidden
- */
-function ThinkingIndicator({ lastMessage, phase, elapsed, statusMessage }: { lastMessage?: ChatMessage; phase?: SessionPhase; elapsed?: number; statusMessage?: string | null }) {
-  // Show indicator when:
-  // 1. No assistant message yet (waiting for first response)
-  // 2. Last event is tool_result (Claude thinking after tool execution)
-  // 3. statusMessage is active (account routing/refreshing)
-  // Hide when text is actively streaming (text itself is the indicator)
-
-  const isWaiting = !lastMessage || lastMessage.role !== "assistant";
-  const isAfterTool = (() => {
-    if (!lastMessage?.events?.length) return false;
-    const last = lastMessage.events[lastMessage.events.length - 1]!;
-    return last.type === "tool_result";
-  })();
-
-  if (!statusMessage && !isWaiting && !isAfterTool) return null;
-
-  const label = statusMessage
-    ? statusMessage
-    : phase === "initializing" ? "Initializing"
-    : phase === "connecting" ? "Connecting"
-    : phase === "thinking" ? "Thinking"
-    : "Processing";
-
-  const isLong = phase === "connecting" && (elapsed ?? 0) >= 30;
-
-  return (
-    <div className="flex flex-col gap-1 text-sm">
-      <div className="flex items-center gap-2 text-text-subtle">
-        <Loader2 className="size-3 animate-spin" />
-        <span>
-          {label}
-          {isWaiting && (elapsed ?? 0) > 0 && <span className="text-text-subtle/60">... ({elapsed}s)</span>}
-        </span>
-      </div>
-      {isLong && (
-        <p className="text-xs text-warning/80 ml-5">
-          Taking longer than usual — may be rate-limited or API slow. Try sending a new message to retry.
-        </p>
-      )}
-    </div>
-  );
-}
-
-/** Strip SDK teammate-message XML tags from text — team popover shows these */
-const TEAMMATE_MSG_RE = /<teammate-message[^>]*>[\s\S]*?<\/teammate-message>/g;
-function stripTeammateMessages(text: string): string {
-  return text.replace(TEAMMATE_MSG_RE, "").replace(/\n{3,}/g, "\n\n").trim();
-}
-
-/** Wrapper: delegates to shared MarkdownRenderer with code actions enabled */
-function MarkdownContent({ content, projectName, isStreaming }: { content: string; projectName?: string; isStreaming?: boolean }) {
-  const cleaned = stripTeammateMessages(content);
-  if (!cleaned) return null;
-  return (
-    <RenderErrorBoundary fallbackContent={cleaned}>
-      <Suspense fallback={<div className="animate-pulse h-4 bg-muted rounded" />}>
-        <MarkdownRenderer content={cleaned} projectName={projectName} codeActions isStreaming={isStreaming} />
-      </Suspense>
-    </RenderErrorBoundary>
-  );
-}
 
 /* ToolCard, ToolSummary, ToolDetails extracted to ./tool-cards.tsx */