@townco/debugger 0.1.31 → 0.1.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@townco/debugger",
-  "version": "0.1.31",
+  "version": "0.1.32",
   "type": "module",
   "engines": {
     "bun": ">=1.3.0"
@@ -22,8 +22,8 @@
     "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-tabs": "^1.1.0",
-    "@townco/otlp-server": "0.1.31",
-    "@townco/ui": "0.1.76",
+    "@townco/otlp-server": "0.1.32",
+    "@townco/ui": "0.1.77",
     "bun-plugin-tailwind": "^0.1.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -35,7 +35,7 @@
     "zod": "^4.1.13"
   },
   "devDependencies": {
-    "@townco/tsconfig": "0.1.73",
+    "@townco/tsconfig": "0.1.74",
     "@types/bun": "latest",
     "@types/react": "^19",
     "@types/react-dom": "^19",

package/src/components/ui/checkbox.tsx

@@ -0,0 +1,42 @@
+import { Check } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+interface CheckboxProps {
+  id?: string;
+  checked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  disabled?: boolean;
+  className?: string;
+}
+
+const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(
+  ({ id, checked = false, onCheckedChange, disabled, className }, ref) => {
+    return (
+      <button
+        ref={ref}
+        type="button"
+        role="checkbox"
+        id={id}
+        aria-checked={checked}
+        disabled={disabled}
+        onClick={() => onCheckedChange?.(!checked)}
+        className={cn(
+          "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          checked && "bg-primary text-primary-foreground",
+          className,
+        )}
+      >
+        {checked && (
+          <span className="flex items-center justify-center text-current">
+            <Check className="h-3.5 w-3.5" />
+          </span>
+        )}
+      </button>
+    );
+  },
+);
+Checkbox.displayName = "Checkbox";
+
+export { Checkbox };

package/src/pages/ComparisonView.tsx

@@ -1,5 +1,12 @@
-import { ChevronDown, ChevronUp, Loader2 } from "lucide-react";
-import { useCallback, useEffect, useState } from "react";
+import {
+  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,6 +15,7 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
 import type { SessionAnalysis } from "../analysis/types";
 import { DebuggerLayout } from "../components/DebuggerLayout";
 import { formatCost, formatDuration, formatTokens } from "../lib/metrics";
@@ -26,8 +34,17 @@ interface SessionState {
   sessionId: string | null;
   messages: ChatMessage[];
   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,12 +58,14 @@ function SessionAnalysisPanel({
   isLoading,
   isExpanded,
   onToggle,
+  onRunAnalysis,
   accentColor,
 }: {
   analysis: SessionAnalysis | null;
   isLoading: boolean;
   isExpanded: boolean;
   onToggle: () => void;
+  onRunAnalysis: () => void;
   accentColor: "blue" | "orange";
 }) {
   const colorClasses =
@@ -64,14 +83,31 @@ function SessionAnalysisPanel({
       <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 (
@@ -294,22 +330,62 @@ 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);
 
@@ -335,45 +411,115 @@ export function ComparisonView({ runId }: ComparisonViewProps) {
     variant: false,
   });
 
-  // Fetch comparison run details and restore saved messages
+  // Fetch comparison run details, conversation, and restore saved messages
   useEffect(() => {
-    Promise.all([
-      fetch(`/api/comparison-run/${runId}`).then((res) => res.json()),
-    ])
-      .then(([runData]) => {
+    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
+        const messages: string[] = [];
+        for (const trace of conversation) {
+          if (trace.userInput) {
+            messages.push(trace.userInput);
+          }
+        }
+
+        // If no messages found in conversation, fall back to firstUserMessage
+        if (messages.length === 0 && runData.firstUserMessage) {
+          messages.push(runData.firstUserMessage);
+        }
+
+        setUserMessages(messages);
+
+        // 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 chat messages
+          const tracesToChatMessages = (
+            traces: Array<{ userInput?: string; llmOutput?: string }>,
+          ): ChatMessage[] => {
+            const chatMessages: ChatMessage[] = [];
+            for (const trace of traces) {
+              if (trace.userInput) {
+                chatMessages.push({
+                  role: "user" as const,
+                  content: trace.userInput,
+                });
+              }
+              if (trace.llmOutput) {
+                chatMessages.push({
+                  role: "assistant" as const,
+                  content: trace.llmOutput,
+                });
+              }
+            }
+            return chatMessages;
+          };
+
           // Restore control messages
-          if (runData.controlResponse) {
-            setControlState({
+          if (runData.controlSessionId) {
+            const controlMessages = tracesToChatMessages(controlConversation);
+            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: Math.floor(controlMessages.length / 2) - 1,
+            }));
           }
 
           // Restore variant messages
-          if (runData.variantResponse) {
-            setVariantState({
+          if (runData.variantSessionId) {
+            const variantMessages = tracesToChatMessages(variantConversation);
+            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: Math.floor(variantMessages.length / 2) - 1,
+            }));
           }
+
+          // Set queue state based on completed messages
+          const completedTurns = Math.min(
+            Math.floor(tracesToChatMessages(controlConversation).length / 2),
+            Math.floor(tracesToChatMessages(variantConversation).length / 2),
+          );
+          setQueueState({
+            currentIndex: completedTurns - 1,
+            stagedIndex: completedTurns,
+            status: runData.status === "completed" ? "completed" : "running",
+          });
         }
 
         // Fetch the config by the run's configId (not the latest config!)
@@ -535,29 +681,372 @@ 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
+          ) {
+            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, { role: "user", content: message }],
+        }));
+
+        let accumulatedContent = "";
+
+        const response = await sendMessageAndCollect(
+          sessionId,
+          message,
+          (content) => {
+            accumulatedContent = content;
+            setState((prev) => {
+              // Find the last assistant message or add one
+              const messages = [...prev.messages];
+              const lastMsg = messages[messages.length - 1];
+              if (lastMsg && lastMsg.role === "assistant") {
+                messages[messages.length - 1] = {
+                  role: "assistant",
+                  content,
+                };
+              } else {
+                messages.push({ role: "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,
+          },
+        };
+      }
+    },
+    [fetchMetricsWithRetry],
+  );
+
+  // 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]?.role === "assistant"
+              ? controlMsgs[controlMsgs.length - 1]?.content
+              : "";
+          const lastVariantResponse =
+            variantMsgs[variantMsgs.length - 1]?.role === "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,179 +1083,13 @@ 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]);
+  }, [run, config, userMessages, initialAutoRun, runId, createSession]);
 
   // Function to fetch existing or trigger new session analysis
   const triggerAnalysis = useCallback(
@@ -812,47 +1135,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,37 +1206,159 @@ 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>
           {!hasRun && (
-            <Button onClick={runComparison} disabled={isRunning}>
-              {isRunning ? "Running..." : "Run Comparison"}
+            <Button
+              onClick={runComparison}
+              disabled={isRunning || userMessages.length === 0}
+            >
+              {isRunning ? "Running..." : "Start 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={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>
+
+                {/* 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>
+                )}
+
+                {/* Control vs Variant labels */}
                 <div className="grid grid-cols-2 gap-4 text-sm">
                   <div className="space-y-1">
                     <div className="flex items-center gap-2">
@@ -986,10 +1390,36 @@ export function ComparisonView({ runId }: ComparisonViewProps) {
             {/* Control */}
             <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)
-                </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-blue-500" />
+                    Control (Original)
+                    {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>
@@ -1014,8 +1444,23 @@ export function ComparisonView({ runId }: ComparisonViewProps) {
                   </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 +1478,10 @@ export function ComparisonView({ runId }: ComparisonViewProps) {
                         control: !prev.control,
                       }))
                     }
+                    onRunAnalysis={() =>
+                      controlState.sessionId &&
+                      triggerAnalysis(controlState.sessionId, "control")
+                    }
                     accentColor="blue"
                   />
                   {/* Tool Calls */}
@@ -1054,10 +1503,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>
@@ -1082,8 +1557,23 @@ export function ComparisonView({ runId }: ComparisonViewProps) {
                   </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 +1591,10 @@ export function ComparisonView({ runId }: ComparisonViewProps) {
                         variant: !prev.variant,
                       }))
                     }
+                    onRunAnalysis={() =>
+                      variantState.sessionId &&
+                      triggerAnalysis(variantState.sessionId, "variant")
+                    }
                     accentColor="orange"
                   />
                   {/* Tool Calls */}