@townco/debugger 0.1.31 → 0.1.33

package/src/pages/ComparisonView.tsx

@@ -1,5 +1,13 @@
-import { ChevronDown, ChevronUp, Loader2 } from "lucide-react";
-import { useCallback, useEffect, useState } from "react";
+import {
+  BarChart3,
+  ChevronDown,
+  ChevronUp,
+  Loader2,
+  Play,
+  ToggleLeft,
+  ToggleRight,
+} from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { Button } from "@/components/ui/button";
 import {
   Card,
@@ -8,7 +16,10 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import type { SessionComparisonAnalysis } from "../analysis/comparison-types";
 import type { SessionAnalysis } from "../analysis/types";
+import { ComparisonAnalysisDialog } from "../components/ComparisonAnalysisDialog";
 import { DebuggerLayout } from "../components/DebuggerLayout";
 import { formatCost, formatDuration, formatTokens } from "../lib/metrics";
 import type { ComparisonConfig, ComparisonRun, SessionMetrics } from "../types";
@@ -17,17 +28,30 @@ interface ComparisonViewProps {
   runId: string;
 }
 
-interface ChatMessage {
-  role: "user" | "assistant";
+// Conversation item that can be user message, assistant message, or tool call
+interface ConversationItem {
+  type: "user" | "assistant" | "tool_call";
   content: string;
+  toolName?: string | undefined;
+  toolInput?: unknown;
+  toolOutput?: unknown;
 }
 
 interface SessionState {
   sessionId: string | null;
-  messages: ChatMessage[];
+  messages: ConversationItem[];
   isStreaming: boolean;
+  isSending: boolean; // true while sending is in progress (before streaming starts)
   metrics: SessionMetrics | null;
   error: string | null;
+  autoRun: boolean;
+  turnIndex: number; // last completed user message index for this arm
+}
+
+interface QueueState {
+  currentIndex: number; // last completed turn (both arms finished)
+  stagedIndex: number; // next user message ready to send
+  status: "idle" | "running" | "completed";
 }
 
 const AGENT_SERVER_URL =
@@ -41,37 +65,60 @@ function SessionAnalysisPanel({
   isLoading,
   isExpanded,
   onToggle,
+  onRunAnalysis,
   accentColor,
 }: {
   analysis: SessionAnalysis | null;
   isLoading: boolean;
   isExpanded: boolean;
   onToggle: () => void;
-  accentColor: "blue" | "orange";
+  onRunAnalysis: () => void;
+  accentColor: "yellow" | "blue" | "orange";
 }) {
   const colorClasses =
-    accentColor === "blue"
-      ? "border-blue-200 dark:border-blue-800 bg-blue-50/50 dark:bg-blue-950/30"
-      : "border-orange-200 dark:border-orange-800 bg-orange-50/50 dark:bg-orange-950/30";
+    accentColor === "yellow"
+      ? "border-yellow-200 dark:border-yellow-800 bg-yellow-50/50 dark:bg-yellow-950/30"
+      : accentColor === "blue"
+        ? "border-blue-200 dark:border-blue-800 bg-blue-50/50 dark:bg-blue-950/30"
+        : "border-orange-200 dark:border-orange-800 bg-orange-50/50 dark:bg-orange-950/30";
 
   const headerColorClasses =
-    accentColor === "blue"
-      ? "hover:bg-blue-100/50 dark:hover:bg-blue-900/30"
-      : "hover:bg-orange-100/50 dark:hover:bg-orange-900/30";
+    accentColor === "yellow"
+      ? "hover:bg-yellow-100/50 dark:hover:bg-yellow-900/30"
+      : accentColor === "blue"
+        ? "hover:bg-blue-100/50 dark:hover:bg-blue-900/30"
+        : "hover:bg-orange-100/50 dark:hover:bg-orange-900/30";
 
   if (isLoading) {
     return (
       <div className={`border rounded-md p-3 ${colorClasses}`}>
         <div className="flex items-center gap-2 text-xs text-muted-foreground">
           <Loader2 className="w-3 h-3 animate-spin" />
-          Loading analysis...
+          Running analysis...
         </div>
       </div>
     );
   }
 
   if (!analysis) {
-    return null;
+    return (
+      <div className={`border rounded-md p-3 ${colorClasses}`}>
+        <div className="flex items-center justify-between">
+          <span className="text-xs text-muted-foreground">
+            Session Analysis
+          </span>
+          <Button
+            size="sm"
+            variant="outline"
+            onClick={onRunAnalysis}
+            className="h-6 text-xs px-2"
+          >
+            <Play className="w-3 h-3 mr-1" />
+            Run Analysis
+          </Button>
+        </div>
+      </div>
+    );
   }
 
   return (
@@ -203,17 +250,21 @@ function ToolCallsPanel({
   toolCalls: SessionMetrics["toolCalls"];
   isExpanded: boolean;
   onToggle: () => void;
-  accentColor: "blue" | "orange";
+  accentColor: "yellow" | "blue" | "orange";
 }) {
   const colorClasses =
-    accentColor === "blue"
-      ? "border-blue-200 dark:border-blue-800 bg-blue-50/50 dark:bg-blue-950/30"
-      : "border-orange-200 dark:border-orange-800 bg-orange-50/50 dark:bg-orange-950/30";
+    accentColor === "yellow"
+      ? "border-yellow-200 dark:border-yellow-800 bg-yellow-50/50 dark:bg-yellow-950/30"
+      : accentColor === "blue"
+        ? "border-blue-200 dark:border-blue-800 bg-blue-50/50 dark:bg-blue-950/30"
+        : "border-orange-200 dark:border-orange-800 bg-orange-50/50 dark:bg-orange-950/30";
 
   const headerColorClasses =
-    accentColor === "blue"
-      ? "hover:bg-blue-100/50 dark:hover:bg-blue-900/30"
-      : "hover:bg-orange-100/50 dark:hover:bg-orange-900/30";
+    accentColor === "yellow"
+      ? "hover:bg-yellow-100/50 dark:hover:bg-yellow-900/30"
+      : accentColor === "blue"
+        ? "hover:bg-blue-100/50 dark:hover:bg-blue-900/30"
+        : "hover:bg-orange-100/50 dark:hover:bg-orange-900/30";
 
   const toolCallCount = toolCalls?.length ?? 0;
 
@@ -294,86 +345,369 @@ export function ComparisonView({ runId }: ComparisonViewProps) {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
+  // User messages from source session
+  const [userMessages, setUserMessages] = useState<string[]>([]);
+  const [initialAutoRun, setInitialAutoRun] = useState(false);
+
+  // Queue state for multi-message replay
+  const [queueState, setQueueState] = useState<QueueState>({
+    currentIndex: -1,
+    stagedIndex: 0,
+    status: "idle",
+  });
+
   // Session states
   const [controlState, setControlState] = useState<SessionState>({
     sessionId: null,
     messages: [],
     isStreaming: false,
+    isSending: false,
     metrics: null,
     error: null,
+    autoRun: false,
+    turnIndex: -1,
   });
   const [variantState, setVariantState] = useState<SessionState>({
     sessionId: null,
     messages: [],
     isStreaming: false,
+    isSending: false,
     metrics: null,
     error: null,
+    autoRun: false,
+    turnIndex: -1,
   });
 
+  // Refs for stable callbacks
+  const controlStateRef = useRef(controlState);
+  const variantStateRef = useRef(variantState);
+  const queueStateRef = useRef(queueState);
+  const userMessagesRef = useRef(userMessages);
+
+  // Separate refs for send locks - these update synchronously to prevent race conditions
+  const controlSendingRef = useRef(false);
+  const variantSendingRef = useRef(false);
+
+  useEffect(() => {
+    controlStateRef.current = controlState;
+  }, [controlState]);
+  useEffect(() => {
+    variantStateRef.current = variantState;
+  }, [variantState]);
+  useEffect(() => {
+    queueStateRef.current = queueState;
+  }, [queueState]);
+  useEffect(() => {
+    userMessagesRef.current = userMessages;
+  }, [userMessages]);
+
   const [isRunning, setIsRunning] = useState(false);
   const [hasRun, setHasRun] = useState(false);
 
+  // Original source session state (read-only, for reference)
+  const [originalMessages, setOriginalMessages] = useState<ConversationItem[]>(
+    [],
+  );
+  const [originalMetrics, setOriginalMetrics] = useState<SessionMetrics | null>(
+    null,
+  );
+
   // Session analysis state
+  const [originalAnalysis, setOriginalAnalysis] =
+    useState<SessionAnalysis | null>(null);
   const [controlAnalysis, setControlAnalysis] =
     useState<SessionAnalysis | null>(null);
   const [variantAnalysis, setVariantAnalysis] =
     useState<SessionAnalysis | null>(null);
+  const [originalAnalysisLoading, setOriginalAnalysisLoading] = useState(false);
   const [controlAnalysisLoading, setControlAnalysisLoading] = useState(false);
   const [variantAnalysisLoading, setVariantAnalysisLoading] = useState(false);
   const [analysisExpanded, setAnalysisExpanded] = useState<{
+    original: boolean;
     control: boolean;
     variant: boolean;
   }>({
+    original: false,
     control: false,
     variant: false,
   });
   const [toolCallsExpanded, setToolCallsExpanded] = useState<{
+    original: boolean;
     control: boolean;
     variant: boolean;
   }>({
+    original: false,
     control: false,
     variant: false,
   });
 
-  // Fetch comparison run details and restore saved messages
+  // Comparison analysis state
+  const [comparisonAnalysis, setComparisonAnalysis] =
+    useState<SessionComparisonAnalysis | null>(null);
+  const [comparisonAnalysisLoading, setComparisonAnalysisLoading] =
+    useState(false);
+  const [comparisonAnalysisDialogOpen, setComparisonAnalysisDialogOpen] =
+    useState(false);
+  const [hasComparisonAnalysis, setHasComparisonAnalysis] = useState(false);
+
+  // Check if comparison analysis exists
   useEffect(() => {
-    Promise.all([
-      fetch(`/api/comparison-run/${runId}`).then((res) => res.json()),
-    ])
-      .then(([runData]) => {
+    if (runId) {
+      fetch(`/api/comparison-analysis/${runId}/exists`)
+        .then((res) => res.json())
+        .then((data) => {
+          setHasComparisonAnalysis(data.exists);
+        })
+        .catch(() => {
+          setHasComparisonAnalysis(false);
+        });
+    }
+  }, [runId]);
+
+  // Function to run comparison analysis
+  const runComparisonAnalysis = async () => {
+    setComparisonAnalysisLoading(true);
+    try {
+      const res = await fetch(`/api/analyze-comparison/${runId}`, {
+        method: "POST",
+      });
+      if (!res.ok) {
+        const error = await res.json();
+        throw new Error(error.error || "Analysis failed");
+      }
+      const analysis = await res.json();
+      setComparisonAnalysis(analysis);
+      setHasComparisonAnalysis(true);
+      setComparisonAnalysisDialogOpen(true);
+    } catch (error) {
+      console.error("Comparison analysis error:", error);
+      alert(
+        `Analysis failed: ${error instanceof Error ? error.message : "Unknown error"}`,
+      );
+    } finally {
+      setComparisonAnalysisLoading(false);
+    }
+  };
+
+  // Function to show existing comparison analysis
+  const showComparisonAnalysis = async () => {
+    if (comparisonAnalysis) {
+      setComparisonAnalysisDialogOpen(true);
+      return;
+    }
+
+    setComparisonAnalysisLoading(true);
+    try {
+      const res = await fetch(`/api/comparison-analysis/${runId}`);
+      if (!res.ok) {
+        throw new Error("Analysis not found");
+      }
+      const analysis = await res.json();
+      setComparisonAnalysis(analysis);
+      setComparisonAnalysisDialogOpen(true);
+    } catch (error) {
+      console.error("Error fetching comparison analysis:", error);
+    } finally {
+      setComparisonAnalysisLoading(false);
+    }
+  };
+
+  // Fetch comparison run details, conversation, and restore saved messages
+  useEffect(() => {
+    let runData: ComparisonRun;
+
+    fetch(`/api/comparison-run/${runId}`)
+      .then((res) => res.json())
+      .then(async (data) => {
+        runData = data;
         setRun(runData);
 
-        // Restore saved messages if the run has been completed
+        // Fetch conversation from source session to get all user messages
+        const conversationRes = await fetch(
+          `/api/session-conversation?sessionId=${runData.sourceSessionId}`,
+        );
+        const conversation = await conversationRes.json();
+
+        // Extract user messages in order AND build original conversation with tool calls
+        const messages: string[] = [];
+        const origMessages: ConversationItem[] = [];
+        for (const trace of conversation) {
+          if (trace.userInput) {
+            messages.push(trace.userInput);
+            origMessages.push({
+              type: "user" as const,
+              content: trace.userInput,
+            });
+          }
+          // Use agentMessages which includes both tool_calls and chat messages in order
+          if (trace.agentMessages && Array.isArray(trace.agentMessages)) {
+            for (const msg of trace.agentMessages) {
+              if (msg.type === "tool_call") {
+                origMessages.push({
+                  type: "tool_call" as const,
+                  content: msg.toolName || msg.content,
+                  toolName: msg.toolName,
+                  toolInput: msg.toolInput,
+                  toolOutput: msg.toolOutput,
+                });
+              } else if (msg.type === "chat" && msg.content?.trim()) {
+                origMessages.push({
+                  type: "assistant" as const,
+                  content: msg.content,
+                });
+              }
+            }
+          } else if (trace.llmOutput) {
+            // Fallback if no agentMessages
+            origMessages.push({
+              type: "assistant" as const,
+              content: trace.llmOutput,
+            });
+          }
+        }
+
+        // If no messages found in conversation, fall back to firstUserMessage
+        if (messages.length === 0 && runData.firstUserMessage) {
+          messages.push(runData.firstUserMessage);
+        }
+
+        setUserMessages(messages);
+        setOriginalMessages(origMessages);
+
+        // Fetch metrics for the original source session
+        if (runData.sourceSessionId) {
+          try {
+            const metricsRes = await fetch(
+              `/api/session-metrics/${runData.sourceSessionId}?model=${encodeURIComponent(config?.controlModel || "claude-sonnet-4-5-20250929")}`,
+            );
+            if (metricsRes.ok) {
+              const metrics = await metricsRes.json();
+              setOriginalMetrics(metrics);
+            }
+          } catch (err) {
+            console.error("Failed to fetch original session metrics:", err);
+          }
+        }
+
+        // Restore saved messages if the run has been completed or running
         if (runData.status === "completed" || runData.status === "running") {
           setHasRun(true);
 
+          // Fetch full conversation history from control and variant sessions
+          const [controlConversation, variantConversation] = await Promise.all([
+            runData.controlSessionId
+              ? fetch(
+                  `/api/session-conversation?sessionId=${runData.controlSessionId}`,
+                ).then((res) => res.json())
+              : Promise.resolve([]),
+            runData.variantSessionId
+              ? fetch(
+                  `/api/session-conversation?sessionId=${runData.variantSessionId}`,
+                ).then((res) => res.json())
+              : Promise.resolve([]),
+          ]);
+
+          // Convert traces to conversation items (including tool calls)
+          const tracesToConversationItems = (
+            traces: Array<{
+              userInput?: string;
+              llmOutput?: string;
+              agentMessages?: Array<{
+                type: string;
+                content?: string;
+                toolName?: string;
+                toolInput?: unknown;
+                toolOutput?: unknown;
+              }>;
+            }>,
+          ): ConversationItem[] => {
+            const items: ConversationItem[] = [];
+            for (const trace of traces) {
+              if (trace.userInput) {
+                items.push({
+                  type: "user" as const,
+                  content: trace.userInput,
+                });
+              }
+              // Use agentMessages which includes both tool_calls and chat messages in order
+              if (trace.agentMessages && Array.isArray(trace.agentMessages)) {
+                for (const msg of trace.agentMessages) {
+                  if (msg.type === "tool_call") {
+                    items.push({
+                      type: "tool_call" as const,
+                      content: msg.toolName || msg.content || "",
+                      toolName: msg.toolName,
+                      toolInput: msg.toolInput,
+                      toolOutput: msg.toolOutput,
+                    });
+                  } else if (msg.type === "chat" && msg.content?.trim()) {
+                    items.push({
+                      type: "assistant" as const,
+                      content: msg.content,
+                    });
+                  }
+                }
+              } else if (trace.llmOutput) {
+                // Fallback if no agentMessages
+                items.push({
+                  type: "assistant" as const,
+                  content: trace.llmOutput,
+                });
+              }
+            }
+            return items;
+          };
+
           // Restore control messages
-          if (runData.controlResponse) {
-            setControlState({
+          if (runData.controlSessionId) {
+            const controlMessages =
+              tracesToConversationItems(controlConversation);
+            // Count user messages for turnIndex
+            const controlUserCount = controlMessages.filter(
+              (m) => m.type === "user",
+            ).length;
+            setControlState((prev) => ({
+              ...prev,
               sessionId: runData.controlSessionId,
-              messages: [
-                { role: "user", content: runData.firstUserMessage },
-                { role: "assistant", content: runData.controlResponse },
-              ],
+              messages: controlMessages,
               isStreaming: false,
               metrics: runData.controlMetrics,
               error: null,
-            });
+              turnIndex: controlUserCount - 1,
+            }));
           }
 
           // Restore variant messages
-          if (runData.variantResponse) {
-            setVariantState({
+          if (runData.variantSessionId) {
+            const variantMessages =
+              tracesToConversationItems(variantConversation);
+            // Count user messages for turnIndex
+            const variantUserCount = variantMessages.filter(
+              (m) => m.type === "user",
+            ).length;
+            setVariantState((prev) => ({
+              ...prev,
               sessionId: runData.variantSessionId,
-              messages: [
-                { role: "user", content: runData.firstUserMessage },
-                { role: "assistant", content: runData.variantResponse },
-              ],
+              messages: variantMessages,
               isStreaming: false,
               metrics: runData.variantMetrics,
               error: null,
-            });
+              turnIndex: variantUserCount - 1,
+            }));
           }
+
+          // Set queue state based on completed messages
+          const controlItems = tracesToConversationItems(controlConversation);
+          const variantItems = tracesToConversationItems(variantConversation);
+          const completedTurns = Math.min(
+            controlItems.filter((m) => m.type === "user").length,
+            variantItems.filter((m) => m.type === "user").length,
+          );
+          setQueueState({
+            currentIndex: completedTurns - 1,
+            stagedIndex: completedTurns,
+            status: runData.status === "completed" ? "completed" : "running",
+          });
         }
 
         // Fetch the config by the run's configId (not the latest config!)
@@ -389,7 +723,7 @@ export function ComparisonView({ runId }: ComparisonViewProps) {
         setError(err.message);
         setLoading(false);
       });
-  }, [runId]);
+  }, [runId, config?.controlModel]);
 
   const generateRequestId = (prefix: string, sessionId?: string) => {
     const randomPart =
@@ -446,7 +780,7 @@ export function ComparisonView({ runId }: ComparisonViewProps) {
     let abortController: AbortController | null = new AbortController();
 
     // Start SSE connection (don't await - runs in background)
-    const ssePromise = fetch(`${AGENT_SERVER_URL}/events`, {
+    const _ssePromise = fetch(`${AGENT_SERVER_URL}/events`, {
       headers: {
         "X-Session-ID": sessionId,
       },
@@ -535,29 +869,371 @@ export function ComparisonView({ runId }: ComparisonViewProps) {
     return accumulatedContent;
   };
 
-  // Run the comparison
+  // Helper to fetch metrics with retry
+  const fetchMetricsWithRetry = useCallback(
+    async (
+      sessionId: string,
+      model: string,
+      duration: number,
+    ): Promise<SessionMetrics> => {
+      const maxWaitMs = 60_000;
+      const pollIntervalMs = 2_000;
+      let elapsed = 0;
+      let previousTokens = -1;
+      let previousTools = -1;
+      let lastMetrics: SessionMetrics | null = null;
+
+      while (elapsed <= maxWaitMs) {
+        try {
+          const metricsRes = await fetch(
+            `/api/session-metrics/${sessionId}?model=${encodeURIComponent(model)}`,
+          );
+          const metrics = await metricsRes.json();
+          lastMetrics = { ...metrics, durationMs: duration };
+
+          // If tokens/tool calls stopped changing and we have data, treat as final.
+          if (
+            metrics.totalTokens > 0 &&
+            metrics.totalTokens === previousTokens &&
+            metrics.toolCallCount === previousTools
+          ) {
+            // biome-ignore lint/style/noNonNullAssertion: lastMetrics is set in the loop
+            return lastMetrics!;
+          }
+
+          previousTokens = metrics.totalTokens ?? 0;
+          previousTools = metrics.toolCallCount ?? 0;
+        } catch {
+          // swallow and retry
+        }
+
+        await new Promise((r) => setTimeout(r, pollIntervalMs));
+        elapsed += pollIntervalMs;
+      }
+
+      // Return whatever we last saw (or zeros if nothing ever arrived)
+      return (
+        lastMetrics ?? {
+          durationMs: duration,
+          inputTokens: 0,
+          outputTokens: 0,
+          totalTokens: 0,
+          estimatedCost: 0,
+          toolCallCount: 0,
+        }
+      );
+    },
+    [],
+  );
+
+  // Send a single message to one arm and handle the response
+  const sendMessageToArm = useCallback(
+    async (
+      sessionId: string,
+      message: string,
+      messageIndex: number,
+      model: string,
+      arm: "control" | "variant",
+      startTime: number,
+    ): Promise<{ response: string; metrics: SessionMetrics }> => {
+      const setState = arm === "control" ? setControlState : setVariantState;
+
+      try {
+        // Add user message and set streaming
+        setState((prev) => ({
+          ...prev,
+          isStreaming: true,
+          messages: [...prev.messages, { type: "user", content: message }],
+        }));
+
+        const response = await sendMessageAndCollect(
+          sessionId,
+          message,
+          (content) => {
+            setState((prev) => {
+              // Find the last assistant message or add one
+              const messages = [...prev.messages];
+              const lastMsg = messages[messages.length - 1];
+              if (lastMsg && lastMsg.type === "assistant") {
+                messages[messages.length - 1] = {
+                  type: "assistant",
+                  content,
+                };
+              } else {
+                messages.push({ type: "assistant", content });
+              }
+              return { ...prev, messages };
+            });
+          },
+        );
+
+        const duration = Date.now() - startTime;
+        const metrics = await fetchMetricsWithRetry(sessionId, model, duration);
+
+        setState((prev) => ({
+          ...prev,
+          isStreaming: false,
+          turnIndex: messageIndex,
+          metrics,
+          error: null,
+        }));
+
+        return { response, metrics };
+      } catch (err) {
+        setState((prev) => ({
+          ...prev,
+          isStreaming: false,
+          error: err instanceof Error ? err.message : "Unknown error",
+        }));
+        return {
+          response: "",
+          metrics: {
+            durationMs: 0,
+            inputTokens: 0,
+            outputTokens: 0,
+            totalTokens: 0,
+            estimatedCost: 0,
+            toolCallCount: 0,
+          },
+        };
+      }
+    },
+    // biome-ignore lint/correctness/useExhaustiveDependencies: sendMessageAndCollect is stable
+    [fetchMetricsWithRetry, sendMessageAndCollect],
+  );
+
+  // Send staged message to a specific arm
+  const sendStagedToArm = useCallback(
+    async (arm: "control" | "variant") => {
+      const state =
+        arm === "control" ? controlStateRef.current : variantStateRef.current;
+      const setState = arm === "control" ? setControlState : setVariantState;
+      const sendingRef =
+        arm === "control" ? controlSendingRef : variantSendingRef;
+      const queue = queueStateRef.current;
+      const messages = userMessagesRef.current;
+
+      // Check the synchronous ref first to prevent duplicate sends
+      if (sendingRef.current) return;
+      if (!state.sessionId || state.isStreaming) return;
+      if (queue.stagedIndex >= messages.length) return;
+
+      const message = messages[queue.stagedIndex];
+      if (!message) return;
+
+      // Set sending lock immediately (synchronously) to prevent race conditions
+      sendingRef.current = true;
+      setState((prev) => ({ ...prev, isSending: true }));
+
+      const model =
+        arm === "control"
+          ? config?.controlModel || "claude-sonnet-4-5-20250929"
+          : config?.variantModel ||
+            config?.controlModel ||
+            "claude-sonnet-4-5-20250929";
+
+      try {
+        await sendMessageToArm(
+          state.sessionId,
+          message,
+          queue.stagedIndex,
+          model,
+          arm,
+          Date.now(),
+        );
+      } finally {
+        // Clear sending lock after completion
+        sendingRef.current = false;
+        setState((prev) => ({ ...prev, isSending: false }));
+      }
+    },
+    [config, sendMessageToArm],
+  );
+
+  // Send staged message to both arms
+  const sendStagedToBoth = useCallback(async () => {
+    const control = controlStateRef.current;
+    const variant = variantStateRef.current;
+
+    if (!control.sessionId || !variant.sessionId) return;
+    if (control.isStreaming || variant.isStreaming) return;
+    if (controlSendingRef.current || variantSendingRef.current) return;
+
+    await Promise.all([sendStagedToArm("control"), sendStagedToArm("variant")]);
+  }, [sendStagedToArm]);
+
+  // Check and advance queue after both arms complete a turn
+  useEffect(() => {
+    // Both arms must have completed the same turn and not be in the middle of sending
+    if (
+      controlState.isStreaming ||
+      variantState.isStreaming ||
+      controlState.isSending ||
+      variantState.isSending ||
+      queueState.status !== "running"
+    )
+      return;
+    if (controlState.turnIndex !== variantState.turnIndex) return;
+
+    const completedIndex = controlState.turnIndex;
+
+    // Advance currentIndex if both completed
+    if (completedIndex > queueState.currentIndex) {
+      const nextIndex = completedIndex + 1;
+
+      if (nextIndex >= userMessages.length) {
+        // All messages completed
+        setQueueState((prev) => ({
+          ...prev,
+          currentIndex: completedIndex,
+          status: "completed",
+        }));
+        setIsRunning(false);
+
+        // Persist final state
+        if (run && controlState.sessionId && variantState.sessionId) {
+          // Get last responses from messages
+          const controlMsgs = controlState.messages;
+          const variantMsgs = variantState.messages;
+          const lastControlResponse =
+            controlMsgs[controlMsgs.length - 1]?.type === "assistant"
+              ? controlMsgs[controlMsgs.length - 1]?.content
+              : "";
+          const lastVariantResponse =
+            variantMsgs[variantMsgs.length - 1]?.type === "assistant"
+              ? variantMsgs[variantMsgs.length - 1]?.content
+              : "";
+
+          fetch(`/api/comparison-run/${runId}/update`, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+              status: "completed",
+              controlMetrics: controlState.metrics,
+              variantMetrics: variantState.metrics,
+              controlResponse: lastControlResponse,
+              variantResponse: lastVariantResponse,
+            }),
+          });
+        }
+      } else {
+        // Stage next message
+        setQueueState((prev) => ({
+          ...prev,
+          currentIndex: completedIndex,
+          stagedIndex: nextIndex,
+        }));
+      }
+    }
+  }, [
+    controlState.isStreaming,
+    controlState.isSending,
+    controlState.turnIndex,
+    controlState.messages,
+    controlState.metrics,
+    controlState.sessionId,
+    variantState.isStreaming,
+    variantState.isSending,
+    variantState.turnIndex,
+    variantState.messages,
+    variantState.metrics,
+    variantState.sessionId,
+    queueState.status,
+    queueState.currentIndex,
+    userMessages.length,
+    run,
+    runId,
+  ]);
+
+  // Auto-send staged message when conditions are met
+  useEffect(() => {
+    if (queueState.status !== "running") return;
+    if (queueState.stagedIndex >= userMessages.length) return;
+
+    const message = userMessages[queueState.stagedIndex];
+    if (!message) return;
+
+    // Check if control should auto-send
+    if (
+      controlState.autoRun &&
+      !controlState.isStreaming &&
+      !controlState.isSending &&
+      controlState.sessionId &&
+      controlState.turnIndex === queueState.currentIndex
+    ) {
+      sendStagedToArm("control");
+    }
+
+    // Check if variant should auto-send
+    if (
+      variantState.autoRun &&
+      !variantState.isStreaming &&
+      !variantState.isSending &&
+      variantState.sessionId &&
+      variantState.turnIndex === queueState.currentIndex
+    ) {
+      sendStagedToArm("variant");
+    }
+  }, [
+    queueState.status,
+    queueState.stagedIndex,
+    queueState.currentIndex,
+    userMessages,
+    controlState.autoRun,
+    controlState.isStreaming,
+    controlState.isSending,
+    controlState.sessionId,
+    controlState.turnIndex,
+    variantState.autoRun,
+    variantState.isStreaming,
+    variantState.isSending,
+    variantState.sessionId,
+    variantState.turnIndex,
+    sendStagedToArm,
+  ]);
+
+  // Toggle auto-run for an arm
+  const toggleAutoRun = useCallback((arm: "control" | "variant") => {
+    const setState = arm === "control" ? setControlState : setVariantState;
+    setState((prev) => ({ ...prev, autoRun: !prev.autoRun }));
+  }, []);
+
+  // Start the comparison (initialize sessions, first message sent by auto-send effect)
   const runComparison = useCallback(async () => {
-    if (!run || !config) return;
+    if (!run || !config || userMessages.length === 0) return;
 
     setIsRunning(true);
     setHasRun(true);
 
-    const firstMessage = run.firstUserMessage;
+    // Reset sending refs
+    controlSendingRef.current = false;
+    variantSendingRef.current = false;
 
-    // Reset states
+    // Reset states with initial autoRun setting
     setControlState({
       sessionId: null,
-      messages: [{ role: "user", content: firstMessage }],
-      isStreaming: true,
+      messages: [],
+      isStreaming: false,
+      isSending: false,
       metrics: null,
       error: null,
+      autoRun: initialAutoRun,
+      turnIndex: -1,
     });
     setVariantState({
       sessionId: null,
-      messages: [{ role: "user", content: firstMessage }],
-      isStreaming: true,
+      messages: [],
+      isStreaming: false,
+      isSending: false,
       metrics: null,
       error: null,
+      autoRun: initialAutoRun,
+      turnIndex: -1,
+    });
+    setQueueState({
+      currentIndex: -1,
+      stagedIndex: 0,
+      status: "running",
     });
 
     try {
@@ -594,189 +1270,30 @@ export function ComparisonView({ runId }: ComparisonViewProps) {
         }),
       });
 
-      // Run both sessions in parallel
-      const startTime = Date.now();
-
-      // Track final responses and metrics
-      let finalControlMetrics: SessionMetrics = {
-        durationMs: 0,
-        inputTokens: 0,
-        outputTokens: 0,
-        totalTokens: 0,
-        estimatedCost: 0,
-        toolCallCount: 0,
-      };
-      let finalVariantMetrics: SessionMetrics = {
-        durationMs: 0,
-        inputTokens: 0,
-        outputTokens: 0,
-        totalTokens: 0,
-        estimatedCost: 0,
-        toolCallCount: 0,
-      };
-
-      // Helper to run a session and fetch metrics
-      const runSession = async (
-        sessionId: string,
-        model: string,
-        setState: typeof setControlState,
-        onContentUpdate: (content: string) => void,
-      ): Promise<{ response: string; metrics: SessionMetrics }> => {
-        try {
-          const response = await sendMessageAndCollect(
-            sessionId,
-            firstMessage,
-            onContentUpdate,
-          );
-
-          const duration = Date.now() - startTime;
-
-          // Poll metrics until they stabilize or we hit a max wait window.
-          const fetchMetricsWithRetry = async (): Promise<SessionMetrics> => {
-            const maxWaitMs = 60_000;
-            const pollIntervalMs = 2_000;
-            let elapsed = 0;
-            let previousTokens = -1;
-            let previousTools = -1;
-            let lastMetrics: SessionMetrics | null = null;
-
-            while (elapsed <= maxWaitMs) {
-              try {
-                const metricsRes = await fetch(
-                  `/api/session-metrics/${sessionId}?model=${encodeURIComponent(model)}`,
-                );
-                const metrics = await metricsRes.json();
-                lastMetrics = { ...metrics, durationMs: duration };
-
-                // If tokens/tool calls stopped changing and we have data, treat as final.
-                if (
-                  metrics.totalTokens > 0 &&
-                  metrics.totalTokens === previousTokens &&
-                  metrics.toolCallCount === previousTools
-                ) {
-                  return lastMetrics!;
-                }
-
-                previousTokens = metrics.totalTokens ?? 0;
-                previousTools = metrics.toolCallCount ?? 0;
-              } catch {
-                // swallow and retry
-              }
-
-              await new Promise((r) => setTimeout(r, pollIntervalMs));
-              elapsed += pollIntervalMs;
-            }
-
-            // Return whatever we last saw (or zeros if nothing ever arrived)
-            return (
-              lastMetrics ?? {
-                durationMs: duration,
-                inputTokens: 0,
-                outputTokens: 0,
-                totalTokens: 0,
-                estimatedCost: 0,
-                toolCallCount: 0,
-              }
-            );
-          };
-
-          const metrics = await fetchMetricsWithRetry();
-
-          setState((prev) => ({
-            ...prev,
-            isStreaming: false,
-            metrics,
-          }));
-
-          return { response, metrics };
-        } catch (err) {
-          setState((prev) => ({
-            ...prev,
-            isStreaming: false,
-            error: err instanceof Error ? err.message : "Unknown error",
-          }));
-          return {
-            response: "",
-            metrics: {
-              durationMs: 0,
-              inputTokens: 0,
-              outputTokens: 0,
-              totalTokens: 0,
-              estimatedCost: 0,
-              toolCallCount: 0,
-            },
-          };
-        }
-      };
-
-      const controlModel = config.controlModel || "claude-sonnet-4-5-20250929";
-      const variantModel =
-        config.variantModel ||
-        config.controlModel ||
-        "claude-sonnet-4-5-20250929";
-
-      const [controlResult, variantResult] = await Promise.all([
-        runSession(
-          controlSessionId,
-          controlModel,
-          setControlState,
-          (content) => {
-            setControlState((prev) => ({
-              ...prev,
-              messages: [
-                { role: "user", content: firstMessage },
-                { role: "assistant", content },
-              ],
-            }));
-          },
-        ),
-        runSession(
-          variantSessionId,
-          variantModel,
-          setVariantState,
-          (content) => {
-            setVariantState((prev) => ({
-              ...prev,
-              messages: [
-                { role: "user", content: firstMessage },
-                { role: "assistant", content },
-              ],
-            }));
-          },
-        ),
-      ]);
-
-      finalControlMetrics = controlResult.metrics;
-      finalVariantMetrics = variantResult.metrics;
-
-      // Update run status with responses and metrics
-      await fetch(`/api/comparison-run/${runId}/update`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          status: "completed",
-          controlMetrics: finalControlMetrics,
-          variantMetrics: finalVariantMetrics,
-          controlResponse: controlResult.response,
-          variantResponse: variantResult.response,
-        }),
-      });
+      // Don't send first message here - let the auto-send effect handle it
+      // This ensures all messages go through the same code path and prevents duplicates
     } catch (err) {
       setError(err instanceof Error ? err.message : "Failed to run comparison");
-    } finally {
       setIsRunning(false);
     }
-  }, [run, config, runId]);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: stable refs
+  }, [run, config, userMessages, initialAutoRun, runId, createSession]);
 
   // Function to fetch existing or trigger new session analysis
   const triggerAnalysis = useCallback(
-    async (sessionId: string, type: "control" | "variant") => {
+    async (sessionId: string, type: "original" | "control" | "variant") => {
       const setLoading =
-        type === "control"
-          ? setControlAnalysisLoading
-          : setVariantAnalysisLoading;
+        type === "original"
+          ? setOriginalAnalysisLoading
+          : type === "control"
+            ? setControlAnalysisLoading
+            : setVariantAnalysisLoading;
       const setAnalysis =
-        type === "control" ? setControlAnalysis : setVariantAnalysis;
+        type === "original"
+          ? setOriginalAnalysis
+          : type === "control"
+            ? setControlAnalysis
+            : setVariantAnalysis;
 
       setLoading(true);
       try {
@@ -812,47 +1329,6 @@ export function ComparisonView({ runId }: ComparisonViewProps) {
     [],
   );
 
-  // Auto-trigger analysis when sessions complete
-  useEffect(() => {
-    // Control session completed
-    if (
-      controlState.sessionId &&
-      !controlState.isStreaming &&
-      controlState.metrics &&
-      !controlAnalysis &&
-      !controlAnalysisLoading
-    ) {
-      triggerAnalysis(controlState.sessionId, "control");
-    }
-  }, [
-    controlState.sessionId,
-    controlState.isStreaming,
-    controlState.metrics,
-    controlAnalysis,
-    controlAnalysisLoading,
-    triggerAnalysis,
-  ]);
-
-  useEffect(() => {
-    // Variant session completed
-    if (
-      variantState.sessionId &&
-      !variantState.isStreaming &&
-      variantState.metrics &&
-      !variantAnalysis &&
-      !variantAnalysisLoading
-    ) {
-      triggerAnalysis(variantState.sessionId, "variant");
-    }
-  }, [
-    variantState.sessionId,
-    variantState.isStreaming,
-    variantState.metrics,
-    variantAnalysis,
-    variantAnalysisLoading,
-    triggerAnalysis,
-  ]);
-
   if (loading) {
     return (
       <DebuggerLayout title="Comparison" showBackButton backHref="/town-hall">
@@ -924,38 +1400,216 @@ export function ComparisonView({ runId }: ComparisonViewProps) {
       <div className="container mx-auto p-4 h-[calc(100vh-4rem)] flex flex-col overflow-hidden">
         {/* Header */}
         <div className="flex items-center justify-between mb-4">
-          <div>
-            <h2 className="text-lg font-semibold">A/B Comparison</h2>
-            <p className="text-sm text-muted-foreground">
-              Comparing: {getDimensionsSummary()}
-            </p>
+          <div className="flex items-center gap-3">
+            <div>
+              <h2 className="text-lg font-semibold">A/B Comparison</h2>
+              <p className="text-sm text-muted-foreground">
+                Comparing: {getDimensionsSummary()}
+              </p>
+            </div>
+            {/* Message count badge when running */}
+            {hasRun && userMessages.length > 1 && (
+              <div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-muted text-sm">
+                <span className="font-medium">
+                  {queueState.currentIndex + 1}/{userMessages.length}
+                </span>
+                <span className="text-muted-foreground">messages</span>
+                {queueState.status === "completed" && (
+                  <span className="text-green-600 dark:text-green-400 text-xs">
+                    Complete
+                  </span>
+                )}
+              </div>
+            )}
+          </div>
+          <div className="flex items-center gap-2">
+            {/* Comparison Analysis button - shown when comparison is complete */}
+            {hasRun &&
+              queueState.status === "completed" &&
+              (hasComparisonAnalysis ? (
+                <>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={showComparisonAnalysis}
+                    disabled={comparisonAnalysisLoading}
+                  >
+                    {comparisonAnalysisLoading ? (
+                      <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                    ) : (
+                      <BarChart3 className="w-4 h-4 mr-2" />
+                    )}
+                    Show Analysis
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={runComparisonAnalysis}
+                    disabled={comparisonAnalysisLoading}
+                  >
+                    Re-analyze
+                  </Button>
+                </>
+              ) : (
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={runComparisonAnalysis}
+                  disabled={comparisonAnalysisLoading}
+                >
+                  {comparisonAnalysisLoading ? (
+                    <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                  ) : (
+                    <BarChart3 className="w-4 h-4 mr-2" />
+                  )}
+                  Analyze Comparison
+                </Button>
+              ))}
+            {!hasRun && (
+              <Button
+                onClick={runComparison}
+                disabled={isRunning || userMessages.length === 0}
+              >
+                {isRunning ? "Running..." : "Start Comparison"}
+              </Button>
+            )}
           </div>
-          {!hasRun && (
-            <Button onClick={runComparison} disabled={isRunning}>
-              {isRunning ? "Running..." : "Run Comparison"}
-            </Button>
-          )}
         </div>
 
+        {/* Queue Banner - shown when there's a staged message waiting */}
+        {hasRun &&
+          queueState.status === "running" &&
+          queueState.stagedIndex > queueState.currentIndex &&
+          queueState.stagedIndex < userMessages.length &&
+          !controlState.isStreaming &&
+          !variantState.isStreaming && (
+            <div className="mb-4 p-3 rounded-lg border bg-muted/50 flex items-center gap-4">
+              <div className="flex-1">
+                <div className="text-xs font-medium text-muted-foreground mb-1">
+                  Next message ready (#{queueState.stagedIndex + 1})
+                </div>
+                <div className="text-sm truncate">
+                  {userMessages[queueState.stagedIndex]?.slice(0, 100)}
+                  {(userMessages[queueState.stagedIndex]?.length ?? 0) > 100
+                    ? "..."
+                    : ""}
+                </div>
+              </div>
+              <div className="flex items-center gap-2 shrink-0">
+                {/* Per-arm send buttons when that arm is not auto-running */}
+                {!controlState.autoRun &&
+                  controlState.turnIndex === queueState.currentIndex && (
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      onClick={() => sendStagedToArm("control")}
+                      className="text-blue-600 border-blue-300 hover:bg-blue-50 dark:text-blue-400 dark:border-blue-700 dark:hover:bg-blue-950"
+                    >
+                      <Play className="w-3 h-3 mr-1" />
+                      Control
+                    </Button>
+                  )}
+                {!variantState.autoRun &&
+                  variantState.turnIndex === queueState.currentIndex && (
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      onClick={() => sendStagedToArm("variant")}
+                      className="text-orange-600 border-orange-300 hover:bg-orange-50 dark:text-orange-400 dark:border-orange-700 dark:hover:bg-orange-950"
+                    >
+                      <Play className="w-3 h-3 mr-1" />
+                      Variant
+                    </Button>
+                  )}
+                {/* Send to both button */}
+                {!controlState.autoRun &&
+                  !variantState.autoRun &&
+                  controlState.turnIndex === queueState.currentIndex &&
+                  variantState.turnIndex === queueState.currentIndex && (
+                    <Button size="sm" onClick={sendStagedToBoth}>
+                      <Play className="w-3 h-3 mr-1" />
+                      Send to Both
+                    </Button>
+                  )}
+              </div>
+            </div>
+          )}
+
         {/* Pre-run state */}
         {!hasRun && (
           <div className="flex-1 flex items-center justify-center">
-            <Card className="max-w-md w-full">
+            <Card className="max-w-lg w-full">
               <CardHeader className="text-center">
                 <CardTitle>Ready to Compare</CardTitle>
                 <CardDescription>
-                  This comparison will send the same prompt to both
-                  configurations and display the results side by side.
+                  This comparison will replay {userMessages.length} user message
+                  {userMessages.length !== 1 ? "s" : ""} to both configurations
+                  and display the results side by side.
                 </CardDescription>
               </CardHeader>
               <CardContent className="space-y-4">
-                <div className="bg-muted rounded-lg p-4">
+                {/* User messages list */}
+                <div className="bg-muted rounded-lg p-4 max-h-64 overflow-y-auto">
                   <div className="text-xs font-medium uppercase text-muted-foreground mb-2">
-                    First message
+                    User Messages ({userMessages.length})
+                  </div>
+                  <div className="space-y-2">
+                    {userMessages.map((msg, idx) => (
+                      <details
+                        key={`user-msg-${msg.slice(0, 50)}-${idx}`}
+                        className="group"
+                      >
+                        <summary className="text-sm cursor-pointer flex items-center gap-2 hover:text-foreground">
+                          <span className="text-xs font-mono text-muted-foreground w-5">
+                            {idx + 1}.
+                          </span>
+                          <span className="truncate flex-1">
+                            {msg.slice(0, 80)}
+                            {msg.length > 80 ? "..." : ""}
+                          </span>
+                          <ChevronDown className="w-3 h-3 text-muted-foreground group-open:rotate-180 transition-transform" />
+                        </summary>
+                        <div className="mt-2 ml-7 text-sm whitespace-pre-wrap bg-background/50 rounded p-2 text-muted-foreground">
+                          {msg}
+                        </div>
+                      </details>
+                    ))}
                   </div>
-                  <div className="text-sm">{run?.firstUserMessage}</div>
                 </div>
-                <div className="grid grid-cols-2 gap-4 text-sm">
+
+                {/* Auto-run checkbox */}
+                {userMessages.length > 1 && (
+                  <div className="flex items-center gap-3 p-3 rounded-lg border bg-background">
+                    <Checkbox
+                      id="auto-run"
+                      checked={initialAutoRun}
+                      onCheckedChange={(checked) => setInitialAutoRun(checked)}
+                    />
+                    <div className="flex-1">
+                      <label
+                        htmlFor="auto-run"
+                        className="text-sm font-medium cursor-pointer"
+                      >
+                        Auto run all messages
+                      </label>
+                      <p className="text-xs text-muted-foreground">
+                        If off, next messages are enqueued after each turn.
+                      </p>
+                    </div>
+                  </div>
+                )}
+
+                {/* Original vs Control vs Variant labels */}
+                <div className="grid grid-cols-3 gap-4 text-sm">
+                  <div className="space-y-1">
+                    <div className="flex items-center gap-2">
+                      <span className="w-2 h-2 rounded-full bg-yellow-500" />
+                      <span className="font-medium">Original</span>
+                    </div>
+                    <div className="text-muted-foreground text-xs">
+                      Source session
+                    </div>
+                  </div>
                   <div className="space-y-1">
                     <div className="flex items-center gap-2">
                       <span className="w-2 h-2 rounded-full bg-blue-500" />
@@ -980,16 +1634,165 @@ export function ComparisonView({ runId }: ComparisonViewProps) {
           </div>
         )}
 
-        {/* Side-by-side comparison */}
+        {/* Side-by-side comparison - 3 panes: Original, Control, Variant */}
         {hasRun && (
-          <div className="grid grid-cols-2 gap-4 flex-1 min-h-0">
-            {/* Control */}
+          <div className="grid grid-cols-3 gap-4 flex-1 min-h-0">
+            {/* Original (Source Session - Read Only) */}
             <Card className="flex flex-col h-full min-h-0 overflow-hidden">
               <CardHeader className="py-3 border-b shrink-0">
                 <CardTitle className="text-sm flex items-center gap-2">
-                  <span className="w-2 h-2 rounded-full bg-blue-500" />
-                  Control (Original)
+                  <span className="w-2 h-2 rounded-full bg-yellow-500" />
+                  Original Session
                 </CardTitle>
+                <CardDescription className="text-xs">
+                  Source session (read-only)
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="flex-1 overflow-auto py-4">
+                {originalMessages.map((msg, i) => (
+                  <div
+                    key={`original-${msg.type}-${i}`}
+                    className={`mb-4 ${
+                      msg.type === "user"
+                        ? "text-yellow-600 dark:text-yellow-400"
+                        : msg.type === "tool_call"
+                          ? ""
+                          : ""
+                    }`}
+                  >
+                    {msg.type === "tool_call" ? (
+                      <details className="rounded bg-muted/50 border text-xs group">
+                        <summary className="flex items-center gap-2 py-1.5 px-2 cursor-pointer list-none">
+                          <span className="text-muted-foreground">🔧</span>
+                          <span className="font-medium flex-1">
+                            {msg.toolName || msg.content}
+                          </span>
+                          <ChevronDown className="w-3 h-3 text-muted-foreground group-open:rotate-180 transition-transform" />
+                        </summary>
+                        <div className="px-2 pb-2 space-y-2 border-t mt-1 pt-2">
+                          {msg.toolInput !== null &&
+                            msg.toolInput !== undefined && (
+                              <div>
+                                <div className="text-[10px] font-semibold text-muted-foreground mb-1">
+                                  Args
+                                </div>
+                                <pre className="text-[11px] bg-background/50 rounded p-1.5 overflow-x-auto max-h-32 whitespace-pre-wrap break-words">
+                                  {typeof msg.toolInput === "string"
+                                    ? msg.toolInput
+                                    : JSON.stringify(msg.toolInput, null, 2)}
+                                </pre>
+                              </div>
+                            )}
+                          {msg.toolOutput !== null &&
+                            msg.toolOutput !== undefined && (
+                              <div>
+                                <div className="text-[10px] font-semibold text-muted-foreground mb-1">
+                                  Result
+                                </div>
+                                <pre className="text-[11px] bg-background/50 rounded p-1.5 overflow-x-auto max-h-32 whitespace-pre-wrap break-words">
+                                  {typeof msg.toolOutput === "string"
+                                    ? msg.toolOutput
+                                    : JSON.stringify(msg.toolOutput, null, 2)}
+                                </pre>
+                              </div>
+                            )}
+                          {(msg.toolInput === null ||
+                            msg.toolInput === undefined) &&
+                            (msg.toolOutput === null ||
+                              msg.toolOutput === undefined) && (
+                              <div className="text-muted-foreground text-[11px]">
+                                No input/output data available
+                              </div>
+                            )}
+                        </div>
+                      </details>
+                    ) : (
+                      <>
+                        <div className="text-xs font-medium uppercase mb-1">
+                          {msg.type === "user" ? "USER" : "ASSISTANT"}
+                        </div>
+                        <div className="text-sm whitespace-pre-wrap">
+                          {msg.content}
+                        </div>
+                      </>
+                    )}
+                  </div>
+                ))}
+                {originalMessages.length === 0 && (
+                  <div className="text-sm text-muted-foreground">
+                    No messages in source session
+                  </div>
+                )}
+              </CardContent>
+              {/* Session Analysis & Tool Calls for Original */}
+              {originalMetrics && (
+                <div className="border-t p-3 shrink-0 bg-muted/50 space-y-3">
+                  {/* Session Analysis */}
+                  <SessionAnalysisPanel
+                    analysis={originalAnalysis}
+                    isLoading={originalAnalysisLoading}
+                    isExpanded={analysisExpanded.original}
+                    onToggle={() =>
+                      setAnalysisExpanded((prev) => ({
+                        ...prev,
+                        original: !prev.original,
+                      }))
+                    }
+                    onRunAnalysis={() =>
+                      run?.sourceSessionId &&
+                      triggerAnalysis(run.sourceSessionId, "original")
+                    }
+                    accentColor="yellow"
+                  />
+                  {/* Tool Calls */}
+                  <ToolCallsPanel
+                    toolCalls={originalMetrics.toolCalls}
+                    isExpanded={toolCallsExpanded.original}
+                    onToggle={() =>
+                      setToolCallsExpanded((prev) => ({
+                        ...prev,
+                        original: !prev.original,
+                      }))
+                    }
+                    accentColor="yellow"
+                  />
+                </div>
+              )}
+            </Card>
+
+            {/* Control */}
+            <Card className="flex flex-col h-full min-h-0 overflow-hidden">
+              <CardHeader className="py-3 border-b shrink-0">
+                <div className="flex items-center justify-between">
+                  <CardTitle className="text-sm flex items-center gap-2">
+                    <span className="w-2 h-2 rounded-full bg-blue-500" />
+                    Control (Rerun)
+                    {controlState.isStreaming && (
+                      <Loader2 className="w-3 h-3 animate-spin text-blue-500" />
+                    )}
+                  </CardTitle>
+                  {/* Auto-run toggle for Control */}
+                  {userMessages.length > 1 &&
+                    queueState.status === "running" && (
+                      <button
+                        type="button"
+                        onClick={() => toggleAutoRun("control")}
+                        className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors"
+                        title={
+                          controlState.autoRun
+                            ? "Disable auto-run"
+                            : "Enable auto-run"
+                        }
+                      >
+                        {controlState.autoRun ? (
+                          <ToggleRight className="w-4 h-4 text-blue-500" />
+                        ) : (
+                          <ToggleLeft className="w-4 h-4" />
+                        )}
+                        <span>Auto</span>
+                      </button>
+                    )}
+                </div>
                 <CardDescription className="text-xs">
                   {getControlDimensionLabel()}
                 </CardDescription>
@@ -997,25 +1800,96 @@ export function ComparisonView({ runId }: ComparisonViewProps) {
               <CardContent className="flex-1 overflow-auto py-4">
                 {controlState.messages.map((msg, i) => (
                   <div
-                    key={i}
-                    className={`mb-4 ${msg.role === "user" ? "text-blue-600 dark:text-blue-400" : ""}`}
+                    key={`control-${msg.type}-${i}`}
+                    className={`mb-4 ${
+                      msg.type === "user"
+                        ? "text-blue-600 dark:text-blue-400"
+                        : msg.type === "tool_call"
+                          ? ""
+                          : ""
+                    }`}
                   >
-                    <div className="text-xs font-medium uppercase mb-1">
-                      {msg.role}
-                    </div>
-                    <div className="text-sm whitespace-pre-wrap">
-                      {msg.content}
-                      {controlState.isStreaming &&
-                        msg.role === "assistant" &&
-                        i === controlState.messages.length - 1 && (
-                          <span className="animate-pulse">▊</span>
-                        )}
-                    </div>
+                    {msg.type === "tool_call" ? (
+                      <details className="rounded bg-muted/50 border text-xs group">
+                        <summary className="flex items-center gap-2 py-1.5 px-2 cursor-pointer list-none">
+                          <span className="text-muted-foreground">🔧</span>
+                          <span className="font-medium flex-1">
+                            {msg.toolName || msg.content}
+                          </span>
+                          <ChevronDown className="w-3 h-3 text-muted-foreground group-open:rotate-180 transition-transform" />
+                        </summary>
+                        <div className="px-2 pb-2 space-y-2 border-t mt-1 pt-2">
+                          {msg.toolInput !== null &&
+                            msg.toolInput !== undefined && (
+                              <div>
+                                <div className="text-[10px] font-semibold text-muted-foreground mb-1">
+                                  Args
+                                </div>
+                                <pre className="text-[11px] bg-background/50 rounded p-1.5 overflow-x-auto max-h-32 whitespace-pre-wrap break-words">
+                                  {typeof msg.toolInput === "string"
+                                    ? msg.toolInput
+                                    : JSON.stringify(msg.toolInput, null, 2)}
+                                </pre>
+                              </div>
+                            )}
+                          {msg.toolOutput !== null &&
+                            msg.toolOutput !== undefined && (
+                              <div>
+                                <div className="text-[10px] font-semibold text-muted-foreground mb-1">
+                                  Result
+                                </div>
+                                <pre className="text-[11px] bg-background/50 rounded p-1.5 overflow-x-auto max-h-32 whitespace-pre-wrap break-words">
+                                  {typeof msg.toolOutput === "string"
+                                    ? msg.toolOutput
+                                    : JSON.stringify(msg.toolOutput, null, 2)}
+                                </pre>
+                              </div>
+                            )}
+                          {(msg.toolInput === null ||
+                            msg.toolInput === undefined) &&
+                            (msg.toolOutput === null ||
+                              msg.toolOutput === undefined) && (
+                              <div className="text-muted-foreground text-[11px]">
+                                No input/output data available
+                              </div>
+                            )}
+                        </div>
+                      </details>
+                    ) : (
+                      <>
+                        <div className="text-xs font-medium uppercase mb-1">
+                          {msg.type === "user" ? "USER" : "ASSISTANT"}
+                        </div>
+                        <div className="text-sm whitespace-pre-wrap">
+                          {msg.content}
+                          {controlState.isStreaming &&
+                            msg.type === "assistant" &&
+                            i === controlState.messages.length - 1 && (
+                              <span className="animate-pulse">▊</span>
+                            )}
+                        </div>
+                      </>
+                    )}
                   </div>
                 ))}
                 {controlState.error && (
-                  <div className="text-red-500 text-sm">
-                    Error: {controlState.error}
+                  <div className="p-3 rounded-lg border border-red-200 bg-red-50 dark:border-red-800 dark:bg-red-950/30">
+                    <div className="text-red-600 dark:text-red-400 text-sm mb-2">
+                      Error: {controlState.error}
+                    </div>
+                    {queueState.status === "running" && (
+                      <Button
+                        size="sm"
+                        variant="outline"
+                        onClick={() => {
+                          setControlState((prev) => ({ ...prev, error: null }));
+                          sendStagedToArm("control");
+                        }}
+                        className="text-red-600 border-red-300 hover:bg-red-100 dark:text-red-400"
+                      >
+                        Retry
+                      </Button>
+                    )}
                   </div>
                 )}
               </CardContent>
@@ -1033,6 +1907,10 @@ export function ComparisonView({ runId }: ComparisonViewProps) {
                         control: !prev.control,
                       }))
                     }
+                    onRunAnalysis={() =>
+                      controlState.sessionId &&
+                      triggerAnalysis(controlState.sessionId, "control")
+                    }
                     accentColor="blue"
                   />
                   {/* Tool Calls */}
@@ -1054,10 +1932,36 @@ export function ComparisonView({ runId }: ComparisonViewProps) {
             {/* Variant */}
             <Card className="flex flex-col h-full min-h-0 overflow-hidden">
               <CardHeader className="py-3 border-b shrink-0">
-                <CardTitle className="text-sm flex items-center gap-2">
-                  <span className="w-2 h-2 rounded-full bg-orange-500" />
-                  Variant
-                </CardTitle>
+                <div className="flex items-center justify-between">
+                  <CardTitle className="text-sm flex items-center gap-2">
+                    <span className="w-2 h-2 rounded-full bg-orange-500" />
+                    Variant
+                    {variantState.isStreaming && (
+                      <Loader2 className="w-3 h-3 animate-spin text-orange-500" />
+                    )}
+                  </CardTitle>
+                  {/* Auto-run toggle for Variant */}
+                  {userMessages.length > 1 &&
+                    queueState.status === "running" && (
+                      <button
+                        type="button"
+                        onClick={() => toggleAutoRun("variant")}
+                        className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors"
+                        title={
+                          variantState.autoRun
+                            ? "Disable auto-run"
+                            : "Enable auto-run"
+                        }
+                      >
+                        {variantState.autoRun ? (
+                          <ToggleRight className="w-4 h-4 text-orange-500" />
+                        ) : (
+                          <ToggleLeft className="w-4 h-4" />
+                        )}
+                        <span>Auto</span>
+                      </button>
+                    )}
+                </div>
                 <CardDescription className="text-xs">
                   {getDimensionLabel()}
                 </CardDescription>
@@ -1065,25 +1969,96 @@ export function ComparisonView({ runId }: ComparisonViewProps) {
               <CardContent className="flex-1 overflow-auto py-4">
                 {variantState.messages.map((msg, i) => (
                   <div
-                    key={i}
-                    className={`mb-4 ${msg.role === "user" ? "text-orange-600 dark:text-orange-400" : ""}`}
+                    key={`variant-${msg.type}-${i}`}
+                    className={`mb-4 ${
+                      msg.type === "user"
+                        ? "text-orange-600 dark:text-orange-400"
+                        : msg.type === "tool_call"
+                          ? ""
+                          : ""
+                    }`}
                   >
-                    <div className="text-xs font-medium uppercase mb-1">
-                      {msg.role}
-                    </div>
-                    <div className="text-sm whitespace-pre-wrap">
-                      {msg.content}
-                      {variantState.isStreaming &&
-                        msg.role === "assistant" &&
-                        i === variantState.messages.length - 1 && (
-                          <span className="animate-pulse">▊</span>
-                        )}
-                    </div>
+                    {msg.type === "tool_call" ? (
+                      <details className="rounded bg-muted/50 border text-xs group">
+                        <summary className="flex items-center gap-2 py-1.5 px-2 cursor-pointer list-none">
+                          <span className="text-muted-foreground">🔧</span>
+                          <span className="font-medium flex-1">
+                            {msg.toolName || msg.content}
+                          </span>
+                          <ChevronDown className="w-3 h-3 text-muted-foreground group-open:rotate-180 transition-transform" />
+                        </summary>
+                        <div className="px-2 pb-2 space-y-2 border-t mt-1 pt-2">
+                          {msg.toolInput !== null &&
+                            msg.toolInput !== undefined && (
+                              <div>
+                                <div className="text-[10px] font-semibold text-muted-foreground mb-1">
+                                  Args
+                                </div>
+                                <pre className="text-[11px] bg-background/50 rounded p-1.5 overflow-x-auto max-h-32 whitespace-pre-wrap break-words">
+                                  {typeof msg.toolInput === "string"
+                                    ? msg.toolInput
+                                    : JSON.stringify(msg.toolInput, null, 2)}
+                                </pre>
+                              </div>
+                            )}
+                          {msg.toolOutput !== null &&
+                            msg.toolOutput !== undefined && (
+                              <div>
+                                <div className="text-[10px] font-semibold text-muted-foreground mb-1">
+                                  Result
+                                </div>
+                                <pre className="text-[11px] bg-background/50 rounded p-1.5 overflow-x-auto max-h-32 whitespace-pre-wrap break-words">
+                                  {typeof msg.toolOutput === "string"
+                                    ? msg.toolOutput
+                                    : JSON.stringify(msg.toolOutput, null, 2)}
+                                </pre>
+                              </div>
+                            )}
+                          {(msg.toolInput === null ||
+                            msg.toolInput === undefined) &&
+                            (msg.toolOutput === null ||
+                              msg.toolOutput === undefined) && (
+                              <div className="text-muted-foreground text-[11px]">
+                                No input/output data available
+                              </div>
+                            )}
+                        </div>
+                      </details>
+                    ) : (
+                      <>
+                        <div className="text-xs font-medium uppercase mb-1">
+                          {msg.type === "user" ? "USER" : "ASSISTANT"}
+                        </div>
+                        <div className="text-sm whitespace-pre-wrap">
+                          {msg.content}
+                          {variantState.isStreaming &&
+                            msg.type === "assistant" &&
+                            i === variantState.messages.length - 1 && (
+                              <span className="animate-pulse">▊</span>
+                            )}
+                        </div>
+                      </>
+                    )}
                   </div>
                 ))}
                 {variantState.error && (
-                  <div className="text-red-500 text-sm">
-                    Error: {variantState.error}
+                  <div className="p-3 rounded-lg border border-red-200 bg-red-50 dark:border-red-800 dark:bg-red-950/30">
+                    <div className="text-red-600 dark:text-red-400 text-sm mb-2">
+                      Error: {variantState.error}
+                    </div>
+                    {queueState.status === "running" && (
+                      <Button
+                        size="sm"
+                        variant="outline"
+                        onClick={() => {
+                          setVariantState((prev) => ({ ...prev, error: null }));
+                          sendStagedToArm("variant");
+                        }}
+                        className="text-red-600 border-red-300 hover:bg-red-100 dark:text-red-400"
+                      >
+                        Retry
+                      </Button>
+                    )}
                   </div>
                 )}
               </CardContent>
@@ -1101,6 +2076,10 @@ export function ComparisonView({ runId }: ComparisonViewProps) {
                         variant: !prev.variant,
                       }))
                     }
+                    onRunAnalysis={() =>
+                      variantState.sessionId &&
+                      triggerAnalysis(variantState.sessionId, "variant")
+                    }
                     accentColor="orange"
                   />
                   {/* Tool Calls */}
@@ -1121,6 +2100,15 @@ export function ComparisonView({ runId }: ComparisonViewProps) {
           </div>
         )}
       </div>
+
+      {/* Comparison Analysis Dialog */}
+      {comparisonAnalysis && (
+        <ComparisonAnalysisDialog
+          open={comparisonAnalysisDialogOpen}
+          onClose={() => setComparisonAnalysisDialogOpen(false)}
+          analysis={comparisonAnalysis}
+        />
+      )}
     </DebuggerLayout>
   );
 }