@townco/debugger 0.1.32 → 0.1.33

package/src/pages/ComparisonView.tsx

@@ -1,4 +1,5 @@
 import {
+  BarChart3,
   ChevronDown,
   ChevronUp,
   Loader2,
@@ -16,7 +17,9 @@ import {
   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";
@@ -25,14 +28,18 @@ 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;
@@ -66,17 +73,21 @@ function SessionAnalysisPanel({
   isExpanded: boolean;
   onToggle: () => void;
   onRunAnalysis: () => 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";
 
   if (isLoading) {
     return (
@@ -239,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;
 
@@ -389,28 +404,114 @@ export function ComparisonView({ runId }: ComparisonViewProps) {
   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,
   });
 
+  // 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(() => {
+    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;
@@ -427,11 +528,41 @@ export function ComparisonView({ runId }: ComparisonViewProps) {
         );
         const conversation = await conversationRes.json();
 
-        // Extract user messages in order
+        // 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,
+            });
           }
         }
 
@@ -441,6 +572,22 @@ export function ComparisonView({ runId }: ComparisonViewProps) {
         }
 
         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") {
@@ -460,31 +607,65 @@ export function ComparisonView({ runId }: ComparisonViewProps) {
               : Promise.resolve([]),
           ]);
 
-          // Convert traces to chat messages
-          const tracesToChatMessages = (
-            traces: Array<{ userInput?: string; llmOutput?: string }>,
-          ): ChatMessage[] => {
-            const chatMessages: ChatMessage[] = [];
+          // 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) {
-                chatMessages.push({
-                  role: "user" as const,
+                items.push({
+                  type: "user" as const,
                   content: trace.userInput,
                 });
               }
-              if (trace.llmOutput) {
-                chatMessages.push({
-                  role: "assistant" as const,
+              // 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 chatMessages;
+            return items;
           };
 
           // Restore control messages
           if (runData.controlSessionId) {
-            const controlMessages = tracesToChatMessages(controlConversation);
+            const controlMessages =
+              tracesToConversationItems(controlConversation);
+            // Count user messages for turnIndex
+            const controlUserCount = controlMessages.filter(
+              (m) => m.type === "user",
+            ).length;
             setControlState((prev) => ({
               ...prev,
               sessionId: runData.controlSessionId,
@@ -492,13 +673,18 @@ export function ComparisonView({ runId }: ComparisonViewProps) {
               isStreaming: false,
               metrics: runData.controlMetrics,
               error: null,
-              turnIndex: Math.floor(controlMessages.length / 2) - 1,
+              turnIndex: controlUserCount - 1,
             }));
           }
 
           // Restore variant messages
           if (runData.variantSessionId) {
-            const variantMessages = tracesToChatMessages(variantConversation);
+            const variantMessages =
+              tracesToConversationItems(variantConversation);
+            // Count user messages for turnIndex
+            const variantUserCount = variantMessages.filter(
+              (m) => m.type === "user",
+            ).length;
             setVariantState((prev) => ({
               ...prev,
               sessionId: runData.variantSessionId,
@@ -506,14 +692,16 @@ export function ComparisonView({ runId }: ComparisonViewProps) {
               isStreaming: false,
               metrics: runData.variantMetrics,
               error: null,
-              turnIndex: Math.floor(variantMessages.length / 2) - 1,
+              turnIndex: variantUserCount - 1,
             }));
           }
 
           // Set queue state based on completed messages
+          const controlItems = tracesToConversationItems(controlConversation);
+          const variantItems = tracesToConversationItems(variantConversation);
           const completedTurns = Math.min(
-            Math.floor(tracesToChatMessages(controlConversation).length / 2),
-            Math.floor(tracesToChatMessages(variantConversation).length / 2),
+            controlItems.filter((m) => m.type === "user").length,
+            variantItems.filter((m) => m.type === "user").length,
           );
           setQueueState({
             currentIndex: completedTurns - 1,
@@ -535,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 =
@@ -592,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,
       },
@@ -709,6 +897,7 @@ export function ComparisonView({ runId }: ComparisonViewProps) {
             metrics.totalTokens === previousTokens &&
             metrics.toolCallCount === previousTools
           ) {
+            // biome-ignore lint/style/noNonNullAssertion: lastMetrics is set in the loop
             return lastMetrics!;
           }
 
@@ -754,27 +943,24 @@ export function ComparisonView({ runId }: ComparisonViewProps) {
         setState((prev) => ({
           ...prev,
           isStreaming: true,
-          messages: [...prev.messages, { role: "user", content: message }],
+          messages: [...prev.messages, { type: "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") {
+              if (lastMsg && lastMsg.type === "assistant") {
                 messages[messages.length - 1] = {
-                  role: "assistant",
+                  type: "assistant",
                   content,
                 };
               } else {
-                messages.push({ role: "assistant", content });
+                messages.push({ type: "assistant", content });
               }
               return { ...prev, messages };
             });
@@ -812,7 +998,8 @@ export function ComparisonView({ runId }: ComparisonViewProps) {
         };
       }
     },
-    [fetchMetricsWithRetry],
+    // biome-ignore lint/correctness/useExhaustiveDependencies: sendMessageAndCollect is stable
+    [fetchMetricsWithRetry, sendMessageAndCollect],
   );
 
   // Send staged message to a specific arm
@@ -909,11 +1096,11 @@ export function ComparisonView({ runId }: ComparisonViewProps) {
           const controlMsgs = controlState.messages;
           const variantMsgs = variantState.messages;
           const lastControlResponse =
-            controlMsgs[controlMsgs.length - 1]?.role === "assistant"
+            controlMsgs[controlMsgs.length - 1]?.type === "assistant"
               ? controlMsgs[controlMsgs.length - 1]?.content
               : "";
           const lastVariantResponse =
-            variantMsgs[variantMsgs.length - 1]?.role === "assistant"
+            variantMsgs[variantMsgs.length - 1]?.type === "assistant"
               ? variantMsgs[variantMsgs.length - 1]?.content
               : "";
 
@@ -1089,17 +1276,24 @@ export function ComparisonView({ runId }: ComparisonViewProps) {
       setError(err instanceof Error ? err.message : "Failed to run comparison");
       setIsRunning(false);
     }
+    // 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 {
@@ -1228,14 +1422,58 @@ export function ComparisonView({ runId }: ComparisonViewProps) {
               </div>
             )}
           </div>
-          {!hasRun && (
-            <Button
-              onClick={runComparison}
-              disabled={isRunning || userMessages.length === 0}
-            >
-              {isRunning ? "Running..." : "Start Comparison"}
-            </Button>
-          )}
+          <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>
         </div>
 
         {/* Queue Banner - shown when there's a staged message waiting */}
@@ -1317,7 +1555,10 @@ export function ComparisonView({ runId }: ComparisonViewProps) {
                   </div>
                   <div className="space-y-2">
                     {userMessages.map((msg, idx) => (
-                      <details key={idx} className="group">
+                      <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}.
@@ -1358,8 +1599,17 @@ export function ComparisonView({ runId }: ComparisonViewProps) {
                   </div>
                 )}
 
-                {/* Control vs Variant labels */}
-                <div className="grid grid-cols-2 gap-4 text-sm">
+                {/* 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" />
@@ -1384,16 +1634,139 @@ 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">
+          <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-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 (Original)
+                    Control (Rerun)
                     {controlState.isStreaming && (
                       <Loader2 className="w-3 h-3 animate-spin text-blue-500" />
                     )}
@@ -1427,20 +1800,76 @@ 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 && (
@@ -1540,20 +1969,76 @@ 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 && (
@@ -1615,6 +2100,15 @@ export function ComparisonView({ runId }: ComparisonViewProps) {
           </div>
         )}
       </div>
+
+      {/* Comparison Analysis Dialog */}
+      {comparisonAnalysis && (
+        <ComparisonAnalysisDialog
+          open={comparisonAnalysisDialogOpen}
+          onClose={() => setComparisonAnalysisDialogOpen(false)}
+          analysis={comparisonAnalysis}
+        />
+      )}
     </DebuggerLayout>
   );
 }