@townco/debugger 0.1.28 → 0.1.30

package/src/pages/ComparisonView.tsx

@@ -1,3 +1,4 @@
+import { ChevronDown, ChevronUp, Loader2 } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
 import { Button } from "@/components/ui/button";
 import {
@@ -7,6 +8,7 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
+import type { SessionAnalysis } from "../analysis/types";
 import { DebuggerLayout } from "../components/DebuggerLayout";
 import { formatCost, formatDuration, formatTokens } from "../lib/metrics";
 import type { ComparisonConfig, ComparisonRun, SessionMetrics } from "../types";
@@ -33,6 +35,259 @@ const AGENT_SERVER_URL =
     ? window.location.origin.replace(":4000", ":3100")
     : "http://localhost:3100";
 
+// Expandable Session Analysis Panel
+function SessionAnalysisPanel({
+  analysis,
+  isLoading,
+  isExpanded,
+  onToggle,
+  accentColor,
+}: {
+  analysis: SessionAnalysis | null;
+  isLoading: boolean;
+  isExpanded: boolean;
+  onToggle: () => void;
+  accentColor: "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";
+
+  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";
+
+  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...
+        </div>
+      </div>
+    );
+  }
+
+  if (!analysis) {
+    return null;
+  }
+
+  return (
+    <div className={`border rounded-md overflow-hidden ${colorClasses}`}>
+      <button
+        type="button"
+        onClick={onToggle}
+        className={`w-full px-3 py-2 flex items-center justify-between text-left transition-colors ${headerColorClasses}`}
+      >
+        <div className="flex items-center gap-2">
+          <span className="text-xs font-semibold">Session Analysis</span>
+          <span
+            className={`text-[10px] px-1.5 py-0.5 rounded ${
+              analysis.outcome.status === "SUCCESS"
+                ? "bg-green-100 text-green-700 dark:bg-green-900/50 dark:text-green-300"
+                : analysis.outcome.status === "FAILURE"
+                  ? "bg-red-100 text-red-700 dark:bg-red-900/50 dark:text-red-300"
+                  : "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/50 dark:text-yellow-300"
+            }`}
+          >
+            {analysis.outcome.status}
+          </span>
+        </div>
+        {isExpanded ? (
+          <ChevronUp className="w-4 h-4 text-muted-foreground" />
+        ) : (
+          <ChevronDown className="w-4 h-4 text-muted-foreground" />
+        )}
+      </button>
+
+      {isExpanded && (
+        <div className="px-3 pb-3 space-y-3 text-xs">
+          {/* Task */}
+          <div>
+            <div className="font-semibold text-muted-foreground mb-1">
+              Task Summary
+            </div>
+            <div className="text-foreground">{analysis.task.task_summary}</div>
+          </div>
+
+          {/* Intent */}
+          <div className="flex items-center gap-2">
+            <span className="font-semibold text-muted-foreground">Intent:</span>
+            <span className="px-2 py-0.5 bg-primary/10 text-primary rounded text-[11px] font-medium">
+              {analysis.task.intent_type}
+            </span>
+          </div>
+
+          {/* Trajectory */}
+          <div>
+            <div className="font-semibold text-muted-foreground mb-1">
+              High Level Plan
+            </div>
+            <div className="text-foreground text-[11px] leading-relaxed">
+              {analysis.trajectory.high_level_plan}
+            </div>
+          </div>
+
+          {/* Outcome */}
+          <div>
+            <div className="font-semibold text-muted-foreground mb-1">
+              Assessment
+            </div>
+            <div className="text-foreground text-[11px] leading-relaxed">
+              {analysis.outcome.assessment}
+            </div>
+          </div>
+
+          {/* Answer Type */}
+          <div className="flex items-center gap-2">
+            <span className="font-semibold text-muted-foreground">
+              Answer Type:
+            </span>
+            <span className="px-2 py-0.5 bg-secondary text-secondary-foreground rounded text-[11px] font-medium">
+              {analysis.outcome.answer_type}
+            </span>
+          </div>
+
+          {/* Metrics Summary */}
+          {analysis.metrics && (
+            <div className="grid grid-cols-5 gap-2 pt-2 border-t border-border/50">
+              <div>
+                <div className="text-[10px] text-muted-foreground">
+                  Duration
+                </div>
+                <div className="font-medium">
+                  {formatDuration(analysis.metrics.durationMs)}
+                </div>
+              </div>
+              <div>
+                <div className="text-[10px] text-muted-foreground">Input</div>
+                <div className="font-medium">
+                  {formatTokens(analysis.metrics.inputTokens)}
+                </div>
+              </div>
+              <div>
+                <div className="text-[10px] text-muted-foreground">Output</div>
+                <div className="font-medium">
+                  {formatTokens(analysis.metrics.outputTokens)}
+                </div>
+              </div>
+              <div>
+                <div className="text-[10px] text-muted-foreground">Total</div>
+                <div className="font-medium">
+                  {formatTokens(analysis.metrics.totalTokens)}
+                </div>
+              </div>
+              <div>
+                <div className="text-[10px] text-muted-foreground">Cost</div>
+                <div className="font-medium text-green-600 dark:text-green-400">
+                  {formatCost(analysis.metrics.estimatedCost)}
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// Collapsible Tool Calls Panel
+function ToolCallsPanel({
+  toolCalls,
+  isExpanded,
+  onToggle,
+  accentColor,
+}: {
+  toolCalls: SessionMetrics["toolCalls"];
+  isExpanded: boolean;
+  onToggle: () => void;
+  accentColor: "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";
+
+  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";
+
+  const toolCallCount = toolCalls?.length ?? 0;
+
+  return (
+    <div className={`border rounded-md overflow-hidden ${colorClasses}`}>
+      <button
+        type="button"
+        onClick={onToggle}
+        className={`w-full px-3 py-2 flex items-center justify-between text-left transition-colors ${headerColorClasses}`}
+      >
+        <div className="flex items-center gap-2">
+          <span className="text-xs font-semibold">Tool Calls</span>
+          <span className="text-[10px] px-1.5 py-0.5 rounded bg-secondary text-secondary-foreground">
+            {toolCallCount}
+          </span>
+        </div>
+        {isExpanded ? (
+          <ChevronUp className="w-4 h-4 text-muted-foreground" />
+        ) : (
+          <ChevronDown className="w-4 h-4 text-muted-foreground" />
+        )}
+      </button>
+
+      {isExpanded && (
+        <div className="px-3 pb-3">
+          {!toolCalls || toolCalls.length === 0 ? (
+            <div className="text-xs text-muted-foreground">No tool calls</div>
+          ) : (
+            <div className="space-y-2">
+              {toolCalls.map((call, idx) => (
+                <details
+                  key={`${call.name}-${call.startTimeUnixNano ?? idx}`}
+                  className="rounded-md border px-3 py-2 bg-background/50"
+                >
+                  <summary className="text-xs font-medium cursor-pointer flex items-center justify-between">
+                    <span>
+                      {call.name}{" "}
+                      {call.startTimeUnixNano ? (
+                        <span className="text-muted-foreground">
+                          @{" "}
+                          {new Date(
+                            call.startTimeUnixNano / 1_000_000,
+                          ).toLocaleTimeString()}
+                        </span>
+                      ) : null}
+                    </span>
+                    <span className="text-muted-foreground text-[11px]">
+                      view
+                    </span>
+                  </summary>
+                  <div className="mt-2 text-[11px] space-y-1 break-words">
+                    <div>
+                      <span className="font-semibold">Args:</span>{" "}
+                      <pre className="break-words whitespace-pre-wrap bg-muted rounded p-2 mt-1 overflow-x-auto max-h-40">
+                        {JSON.stringify(call.input, null, 2)}
+                      </pre>
+                    </div>
+                    <div>
+                      <span className="font-semibold">Result:</span>{" "}
+                      <pre className="break-words whitespace-pre-wrap bg-muted rounded p-2 mt-1 overflow-x-auto max-h-40">
+                        {JSON.stringify(call.output, null, 2)}
+                      </pre>
+                    </div>
+                  </div>
+                </details>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
 export function ComparisonView({ runId }: ComparisonViewProps) {
   const [run, setRun] = useState<ComparisonRun | null>(null);
   const [config, setConfig] = useState<ComparisonConfig | null>(null);
@@ -58,6 +313,28 @@ export function ComparisonView({ runId }: ComparisonViewProps) {
   const [isRunning, setIsRunning] = useState(false);
   const [hasRun, setHasRun] = useState(false);
 
+  // Session analysis state
+  const [controlAnalysis, setControlAnalysis] =
+    useState<SessionAnalysis | null>(null);
+  const [variantAnalysis, setVariantAnalysis] =
+    useState<SessionAnalysis | null>(null);
+  const [controlAnalysisLoading, setControlAnalysisLoading] = useState(false);
+  const [variantAnalysisLoading, setVariantAnalysisLoading] = useState(false);
+  const [analysisExpanded, setAnalysisExpanded] = useState<{
+    control: boolean;
+    variant: boolean;
+  }>({
+    control: false,
+    variant: false,
+  });
+  const [toolCallsExpanded, setToolCallsExpanded] = useState<{
+    control: boolean;
+    variant: boolean;
+  }>({
+    control: false,
+    variant: false,
+  });
+
   // Fetch comparison run details and restore saved messages
   useEffect(() => {
     Promise.all([
@@ -99,8 +376,10 @@ export function ComparisonView({ runId }: ComparisonViewProps) {
           }
         }
 
-        // Fetch the config
-        return fetch(`/api/comparison-config`).then((res) => res.json());
+        // Fetch the config by the run's configId (not the latest config!)
+        return fetch(`/api/comparison-config/${runData.configId}`).then((res) =>
+          res.json(),
+        );
       })
       .then((configData) => {
         setConfig(configData);
@@ -112,6 +391,14 @@ export function ComparisonView({ runId }: ComparisonViewProps) {
       });
   }, [runId]);
 
+  const generateRequestId = (prefix: string, sessionId?: string) => {
+    const randomPart =
+      typeof crypto !== "undefined" && "randomUUID" in crypto
+        ? crypto.randomUUID()
+        : `${Math.random().toString(16).slice(2)}-${Date.now().toString(16)}`;
+    return `${prefix}-${sessionId ? `${sessionId}-` : ""}${randomPart}`;
+  };
+
   // Create a new session with the agent server
   const createSession = async (
     configOverrides?: Record<string, unknown>,
@@ -121,7 +408,7 @@ export function ComparisonView({ runId }: ComparisonViewProps) {
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({
         jsonrpc: "2.0",
-        id: `init-${Date.now()}`,
+        id: generateRequestId("init"),
         method: "initialize",
         params: {
           protocolVersion: 1,
@@ -136,7 +423,7 @@ export function ComparisonView({ runId }: ComparisonViewProps) {
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({
         jsonrpc: "2.0",
-        id: `session-${Date.now()}`,
+        id: generateRequestId("session"),
         method: "session/new",
         params: {
           cwd: "/",
@@ -154,7 +441,7 @@ export function ComparisonView({ runId }: ComparisonViewProps) {
     sessionId: string,
     message: string,
     onUpdate: (content: string) => void,
-  ): Promise<void> => {
+  ): Promise<string> => {
     let accumulatedContent = "";
     let abortController: AbortController | null = new AbortController();
 
@@ -228,7 +515,7 @@ export function ComparisonView({ runId }: ComparisonViewProps) {
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({
         jsonrpc: "2.0",
-        id: `prompt-${Date.now()}`,
+        id: generateRequestId("prompt", sessionId),
         method: "session/prompt",
         params: {
           sessionId,
@@ -243,6 +530,9 @@ export function ComparisonView({ runId }: ComparisonViewProps) {
     // Abort the SSE connection since we're done
     abortController.abort();
     abortController = null;
+
+    // Return the accumulated content
+    return accumulatedContent;
   };
 
   // Run the comparison
@@ -271,15 +561,16 @@ export function ComparisonView({ runId }: ComparisonViewProps) {
     });
 
     try {
-      // Build config overrides based on dimension
+      // Build config overrides based on all selected dimensions
       const variantOverrides: Record<string, unknown> = {};
-      if (config.dimension === "model" && config.variantModel) {
+      const dimensions = config.dimensions || [];
+      if (dimensions.includes("model") && config.variantModel) {
         variantOverrides.model = config.variantModel;
       }
-      if (config.dimension === "system_prompt" && config.variantSystemPrompt) {
+      if (dimensions.includes("system_prompt") && config.variantSystemPrompt) {
         variantOverrides.systemPrompt = config.variantSystemPrompt;
       }
-      if (config.dimension === "tools" && config.variantTools) {
+      if (dimensions.includes("tools") && config.variantTools) {
         variantOverrides.tools = config.variantTools;
       }
 
@@ -307,123 +598,157 @@ export function ComparisonView({ runId }: ComparisonViewProps) {
       const startTime = Date.now();
 
       // Track final responses and metrics
-      let finalControlResponse = "";
-      let finalVariantResponse = "";
-      let finalControlMetrics: SessionMetrics | null = null;
-      let finalVariantMetrics: SessionMetrics | null = null;
-
-      await Promise.all([
-        // Control session
-        sendMessageAndCollect(controlSessionId, firstMessage, (content) => {
-          finalControlResponse = content;
-          setControlState((prev) => ({
-            ...prev,
-            messages: [
-              { role: "user", content: firstMessage },
-              { role: "assistant", content },
-            ],
-          }));
-        })
-          .then(async () => {
-            const duration = Date.now() - startTime;
-            // Wait for telemetry data to be written to the database
-            await new Promise((r) => setTimeout(r, 2000));
-            // Fetch metrics - use control model for cost calculation
-            const controlModel =
-              config.controlModel || "claude-sonnet-4-5-20250929";
-            try {
-              const metricsRes = await fetch(
-                `/api/session-metrics/${controlSessionId}?model=${encodeURIComponent(controlModel)}`,
-              );
-              const metrics = await metricsRes.json();
-              metrics.durationMs = duration;
-              finalControlMetrics = metrics;
-              setControlState((prev) => ({
-                ...prev,
-                isStreaming: false,
-                metrics,
-              }));
-            } catch {
-              finalControlMetrics = {
+      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,
-              };
-              setControlState((prev) => ({
-                ...prev,
-                isStreaming: false,
-                metrics: finalControlMetrics,
-              }));
-            }
-          })
-          .catch((err) => {
-            setControlState((prev) => ({
-              ...prev,
-              isStreaming: false,
-              error: err.message,
-            }));
-          }),
+              }
+            );
+          };
+
+          const metrics = await fetchMetricsWithRetry();
 
-        // Variant session
-        sendMessageAndCollect(variantSessionId, firstMessage, (content) => {
-          finalVariantResponse = content;
-          setVariantState((prev) => ({
+          setState((prev) => ({
             ...prev,
-            messages: [
-              { role: "user", content: firstMessage },
-              { role: "assistant", content },
-            ],
+            isStreaming: false,
+            metrics,
           }));
-        })
-          .then(async () => {
-            const duration = Date.now() - startTime;
-            // Wait for telemetry data to be written to the database
-            await new Promise((r) => setTimeout(r, 2000));
-            // Fetch metrics - use variant model for cost calculation
-            const variantModel =
-              config.variantModel ||
-              config.controlModel ||
-              "claude-sonnet-4-5-20250929";
-            try {
-              const metricsRes = await fetch(
-                `/api/session-metrics/${variantSessionId}?model=${encodeURIComponent(variantModel)}`,
-              );
-              const metrics = await metricsRes.json();
-              metrics.durationMs = duration;
-              finalVariantMetrics = metrics;
-              setVariantState((prev) => ({
-                ...prev,
-                isStreaming: false,
-                metrics,
-              }));
-            } catch {
-              finalVariantMetrics = {
-                durationMs: duration,
-                inputTokens: 0,
-                outputTokens: 0,
-                totalTokens: 0,
-                estimatedCost: 0,
-                toolCallCount: 0,
-              };
-              setVariantState((prev) => ({
-                ...prev,
-                isStreaming: false,
-                metrics: finalVariantMetrics,
-              }));
-            }
-          })
-          .catch((err) => {
+
+          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,
-              isStreaming: false,
-              error: err.message,
+              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",
@@ -432,8 +757,8 @@ export function ComparisonView({ runId }: ComparisonViewProps) {
           status: "completed",
           controlMetrics: finalControlMetrics,
           variantMetrics: finalVariantMetrics,
-          controlResponse: finalControlResponse,
-          variantResponse: finalVariantResponse,
+          controlResponse: controlResult.response,
+          variantResponse: variantResult.response,
         }),
       });
     } catch (err) {
@@ -443,6 +768,91 @@ export function ComparisonView({ runId }: ComparisonViewProps) {
     }
   }, [run, config, runId]);
 
+  // Function to fetch existing or trigger new session analysis
+  const triggerAnalysis = useCallback(
+    async (sessionId: string, type: "control" | "variant") => {
+      const setLoading =
+        type === "control"
+          ? setControlAnalysisLoading
+          : setVariantAnalysisLoading;
+      const setAnalysis =
+        type === "control" ? setControlAnalysis : setVariantAnalysis;
+
+      setLoading(true);
+      try {
+        // First try to fetch existing analysis from cache
+        const existingRes = await fetch(
+          `/api/session-analyses?sessionId=${sessionId}`,
+        );
+        if (existingRes.ok) {
+          const existingAnalysis = await existingRes.json();
+          if (existingAnalysis && !existingAnalysis.error) {
+            setAnalysis(existingAnalysis);
+            setAnalysisExpanded((prev) => ({ ...prev, [type]: true }));
+            return;
+          }
+        }
+
+        // No existing analysis, trigger new one
+        const res = await fetch(`/api/analyze-session/${sessionId}`, {
+          method: "POST",
+        });
+        if (res.ok) {
+          const analysis = await res.json();
+          setAnalysis(analysis);
+          // Auto-expand when analysis completes
+          setAnalysisExpanded((prev) => ({ ...prev, [type]: true }));
+        }
+      } catch (err) {
+        console.error(`Failed to analyze ${type} session:`, err);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [],
+  );
+
+  // 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">
@@ -464,31 +874,49 @@ export function ComparisonView({ runId }: ComparisonViewProps) {
   }
 
   const getControlDimensionLabel = () => {
-    if (!config) return "";
-    switch (config.dimension) {
-      case "model":
-        return `Model: ${config.controlModel || "unknown"}`;
-      case "system_prompt":
-        return "System Prompt (original)";
-      case "tools":
-        return "Tools (original)";
-      default:
-        return "";
+    if (!config || !config.dimensions || config.dimensions.length === 0)
+      return "";
+    const labels: string[] = [];
+    for (const dim of config.dimensions) {
+      switch (dim) {
+        case "model":
+          labels.push(`Model: ${config.controlModel || "original"}`);
+          break;
+        case "system_prompt":
+          labels.push("System Prompt: original");
+          break;
+        case "tools":
+          labels.push("Tools: original");
+          break;
+      }
     }
+    return labels.join(" | ");
   };
 
   const getDimensionLabel = () => {
-    if (!config) return "";
-    switch (config.dimension) {
-      case "model":
-        return `Model: ${config.variantModel}`;
-      case "system_prompt":
-        return "System Prompt (modified)";
-      case "tools":
-        return `Tools: ${config.variantTools?.join(", ")}`;
-      default:
-        return "";
+    if (!config || !config.dimensions || config.dimensions.length === 0)
+      return "";
+    const labels: string[] = [];
+    for (const dim of config.dimensions) {
+      switch (dim) {
+        case "model":
+          labels.push(`Model: ${config.variantModel}`);
+          break;
+        case "system_prompt":
+          labels.push("System Prompt: modified");
+          break;
+        case "tools":
+          labels.push(`Tools: ${config.variantTools?.join(", ")}`);
+          break;
+      }
     }
+    return labels.join(" | ");
+  };
+
+  const getDimensionsSummary = () => {
+    if (!config || !config.dimensions || config.dimensions.length === 0)
+      return "";
+    return config.dimensions.map((d) => d.replace("_", " ")).join(", ");
   };
 
   return (
@@ -499,8 +927,7 @@ export function ComparisonView({ runId }: ComparisonViewProps) {
           <div>
             <h2 className="text-lg font-semibold">A/B Comparison</h2>
             <p className="text-sm text-muted-foreground">
-              Comparing: {config?.dimension?.replace("_", " ")} -{" "}
-              {getDimensionLabel()}
+              Comparing: {getDimensionsSummary()}
             </p>
           </div>
           {!hasRun && (
@@ -592,27 +1019,34 @@ export function ComparisonView({ runId }: ComparisonViewProps) {
                   </div>
                 )}
               </CardContent>
-              {/* Metrics */}
+              {/* Session Analysis & Tool Calls */}
               {controlState.metrics && (
-                <div className="border-t p-3 shrink-0 bg-muted/50">
-                  <div className="grid grid-cols-4 gap-2 text-xs">
-                    <div>
-                      <span className="text-muted-foreground">Duration:</span>{" "}
-                      {formatDuration(controlState.metrics.durationMs)}
-                    </div>
-                    <div>
-                      <span className="text-muted-foreground">Tokens:</span>{" "}
-                      {formatTokens(controlState.metrics.totalTokens)}
-                    </div>
-                    <div>
-                      <span className="text-muted-foreground">Cost:</span>{" "}
-                      {formatCost(controlState.metrics.estimatedCost)}
-                    </div>
-                    <div>
-                      <span className="text-muted-foreground">Tools:</span>{" "}
-                      {controlState.metrics.toolCallCount}
-                    </div>
-                  </div>
+                <div className="border-t p-3 shrink-0 bg-muted/50 space-y-3">
+                  {/* Session Analysis */}
+                  <SessionAnalysisPanel
+                    analysis={controlAnalysis}
+                    isLoading={controlAnalysisLoading}
+                    isExpanded={analysisExpanded.control}
+                    onToggle={() =>
+                      setAnalysisExpanded((prev) => ({
+                        ...prev,
+                        control: !prev.control,
+                      }))
+                    }
+                    accentColor="blue"
+                  />
+                  {/* Tool Calls */}
+                  <ToolCallsPanel
+                    toolCalls={controlState.metrics.toolCalls}
+                    isExpanded={toolCallsExpanded.control}
+                    onToggle={() =>
+                      setToolCallsExpanded((prev) => ({
+                        ...prev,
+                        control: !prev.control,
+                      }))
+                    }
+                    accentColor="blue"
+                  />
                 </div>
               )}
             </Card>
@@ -653,27 +1087,34 @@ export function ComparisonView({ runId }: ComparisonViewProps) {
                   </div>
                 )}
               </CardContent>
-              {/* Metrics */}
+              {/* Session Analysis & Tool Calls */}
               {variantState.metrics && (
-                <div className="border-t p-3 shrink-0 bg-muted/50">
-                  <div className="grid grid-cols-4 gap-2 text-xs">
-                    <div>
-                      <span className="text-muted-foreground">Duration:</span>{" "}
-                      {formatDuration(variantState.metrics.durationMs)}
-                    </div>
-                    <div>
-                      <span className="text-muted-foreground">Tokens:</span>{" "}
-                      {formatTokens(variantState.metrics.totalTokens)}
-                    </div>
-                    <div>
-                      <span className="text-muted-foreground">Cost:</span>{" "}
-                      {formatCost(variantState.metrics.estimatedCost)}
-                    </div>
-                    <div>
-                      <span className="text-muted-foreground">Tools:</span>{" "}
-                      {variantState.metrics.toolCallCount}
-                    </div>
-                  </div>
+                <div className="border-t p-3 shrink-0 bg-muted/50 space-y-3">
+                  {/* Session Analysis */}
+                  <SessionAnalysisPanel
+                    analysis={variantAnalysis}
+                    isLoading={variantAnalysisLoading}
+                    isExpanded={analysisExpanded.variant}
+                    onToggle={() =>
+                      setAnalysisExpanded((prev) => ({
+                        ...prev,
+                        variant: !prev.variant,
+                      }))
+                    }
+                    accentColor="orange"
+                  />
+                  {/* Tool Calls */}
+                  <ToolCallsPanel
+                    toolCalls={variantState.metrics.toolCalls}
+                    isExpanded={toolCallsExpanded.variant}
+                    onToggle={() =>
+                      setToolCallsExpanded((prev) => ({
+                        ...prev,
+                        variant: !prev.variant,
+                      }))
+                    }
+                    accentColor="orange"
+                  />
                 </div>
               )}
             </Card>