@townco/debugger 0.1.29 → 0.1.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@townco/debugger",
-  "version": "0.1.29",
+  "version": "0.1.30",
   "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.29",
-    "@townco/ui": "0.1.74",
+    "@townco/otlp-server": "0.1.30",
+    "@townco/ui": "0.1.75",
     "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.71",
+    "@townco/tsconfig": "0.1.72",
     "@types/bun": "latest",
     "@types/react": "^19",
     "@types/react-dom": "^19",

package/src/analysis/analyzer.ts

@@ -5,6 +5,8 @@
 import Anthropic from "@anthropic-ai/sdk";
 import { LLMAnalysisOutputSchema, SessionAnalysisSchema } from "./schema";
 import type {
+  AnalysisMetrics,
+  DetailedToolCall,
   LLMAnalysisOutput,
   PreComputedFields,
   SessionAnalysis,
@@ -168,12 +170,23 @@ function extractJSON(text: string): string {
   return text.trim();
 }
 
+/**
+ * Options for session analysis
+ */
+export interface AnalyzeSessionOptions {
+  session: StoredSession;
+  metrics?: AnalysisMetrics;
+  toolCalls?: DetailedToolCall[];
+}
+
 /**
  * Analyze a session using Claude
  */
 export async function analyzeSession(
-  session: StoredSession,
+  options: AnalyzeSessionOptions,
 ): Promise<SessionAnalysis> {
+  const { session, metrics, toolCalls } = options;
+
   // 1. Pre-compute extractable fields
   const preComputed = extractPreComputedFields(session);
 
@@ -206,6 +219,19 @@ export async function analyzeSession(
   const parsed = JSON.parse(jsonText);
   const llmOutput = LLMAnalysisOutputSchema.parse(parsed);
 
+  // Use provided metrics or create defaults
+  const sessionDurationMs = metrics?.durationMs ?? calculateDurationMs(session);
+  const analysisMetrics: AnalysisMetrics = metrics ?? {
+    inputTokens: 0,
+    outputTokens: 0,
+    totalTokens: 0,
+    estimatedCost: 0,
+    durationMs: sessionDurationMs,
+  };
+
+  // Use provided tool calls or empty array
+  const detailedToolCalls: DetailedToolCall[] = toolCalls ?? [];
+
   // 6. Combine pre-computed and LLM data
   const analysis: SessionAnalysis = {
     session_id: session.sessionId,
@@ -222,14 +248,25 @@ export async function analyzeSession(
       tools_used: preComputed.toolsUsed,
       num_steps: preComputed.numSteps,
       num_tool_calls: preComputed.numToolCalls,
+      tool_calls: detailedToolCalls,
     },
     outcome: {
       status: llmOutput.status,
       answer_type: llmOutput.answer_type,
       assessment: llmOutput.assessment,
     },
+    metrics: analysisMetrics,
   };
 
   // 7. Validate final schema
   return SessionAnalysisSchema.parse(analysis);
 }
+
+/**
+ * Calculate duration from session timestamps
+ */
+function calculateDurationMs(session: StoredSession): number {
+  const startTime = new Date(session.metadata.createdAt).getTime();
+  const endTime = new Date(session.metadata.updatedAt).getTime();
+  return endTime - startTime;
+}

package/src/analysis/schema.ts

@@ -40,6 +40,28 @@ export const LLMAnalysisOutputSchema = z.object({
     .describe("Explanation of why the status and answer_type were chosen"),
 });
 
+/**
+ * Detailed tool call schema
+ */
+export const DetailedToolCallSchema = z.object({
+  name: z.string(),
+  input: z.unknown(),
+  output: z.unknown(),
+  startTimeUnixNano: z.number().optional(),
+  endTimeUnixNano: z.number().optional(),
+});
+
+/**
+ * Metrics schema
+ */
+export const AnalysisMetricsSchema = z.object({
+  inputTokens: z.number(),
+  outputTokens: z.number(),
+  totalTokens: z.number(),
+  estimatedCost: z.number(),
+  durationMs: z.number(),
+});
+
 /**
  * Complete session analysis schema
  */
@@ -58,10 +80,12 @@ export const SessionAnalysisSchema = z.object({
     tools_used: z.array(z.string()),
     num_steps: z.number(),
     num_tool_calls: z.number(),
+    tool_calls: z.array(DetailedToolCallSchema),
   }),
   outcome: z.object({
     status: OutcomeStatusSchema,
     answer_type: AnswerTypeSchema,
     assessment: z.string(),
   }),
+  metrics: AnalysisMetricsSchema,
 });

package/src/analysis/types.ts

@@ -80,6 +80,28 @@ export enum OutcomeStatus {
   PARTIAL_SUCCESS = "PARTIAL_SUCCESS", // Some goals achieved
 }
 
+/**
+ * Detailed tool call with input/output
+ */
+export interface DetailedToolCall {
+  name: string;
+  input: unknown;
+  output: unknown;
+  startTimeUnixNano?: number | undefined;
+  endTimeUnixNano?: number | undefined;
+}
+
+/**
+ * Session metrics (tokens, cost, etc.)
+ */
+export interface AnalysisMetrics {
+  inputTokens: number;
+  outputTokens: number;
+  totalTokens: number;
+  estimatedCost: number;
+  durationMs: number;
+}
+
 /**
  * Complete session analysis result
  */
@@ -100,6 +122,7 @@ export interface SessionAnalysis {
     tools_used: string[]; // Pre-computed from tool calls
     num_steps: number; // Pre-computed (count assistant messages)
     num_tool_calls: number; // Pre-computed
+    tool_calls: DetailedToolCall[]; // Detailed tool call info with args/results
   };
 
   outcome: {
@@ -107,6 +130,8 @@ export interface SessionAnalysis {
     answer_type: AnswerType; // LLM-selected from enum
     assessment: string; // LLM-generated explanation of status and answer_type
   };
+
+  metrics: AnalysisMetrics; // Token counts, cost, duration
 }
 
 /**

package/src/components/SessionAnalysisDialog.tsx

@@ -1,4 +1,5 @@
-import type { SessionAnalysis } from "../analysis/types";
+import type { DetailedToolCall, SessionAnalysis } from "../analysis/types";
+import { formatCost, formatDuration, formatTokens } from "../lib/metrics";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "./ui/dialog";
 
 interface Props {
@@ -11,22 +12,9 @@ function formatDate(isoString: string): string {
   return new Date(isoString).toLocaleString();
 }
 
-function calculateDuration(start: string, end: string): string {
-  const startTime = new Date(start).getTime();
-  const endTime = new Date(end).getTime();
-  const durationMs = endTime - startTime;
-
-  const seconds = Math.floor(durationMs / 1000);
-  const minutes = Math.floor(seconds / 60);
-  const hours = Math.floor(minutes / 60);
-
-  if (hours > 0) {
-    return `${hours}h ${minutes % 60}m ${seconds % 60}s`;
-  }
-  if (minutes > 0) {
-    return `${minutes}m ${seconds % 60}s`;
-  }
-  return `${seconds}s`;
+function formatToolTime(ns?: number): string {
+  if (!ns) return "";
+  return new Date(ns / 1_000_000).toLocaleTimeString();
 }
 
 function Section({
@@ -75,6 +63,49 @@ function Metric({ label, value }: { label: string; value: number }) {
   );
 }
 
+function ToolCallDetails({ toolCalls }: { toolCalls: DetailedToolCall[] }) {
+  if (!toolCalls || toolCalls.length === 0) {
+    return <div className="text-xs text-muted-foreground">No tool calls</div>;
+  }
+
+  return (
+    <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-muted/50"
+        >
+          <summary className="text-xs font-medium cursor-pointer flex items-center justify-between">
+            <span>
+              {call.name}{" "}
+              {call.startTimeUnixNano ? (
+                <span className="text-muted-foreground">
+                  @ {formatToolTime(call.startTimeUnixNano)}
+                </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>
+  );
+}
+
 export function SessionAnalysisDialog({ open, onClose, analysis }: Props) {
   return (
     <Dialog open={open} onOpenChange={onClose}>
@@ -121,6 +152,16 @@ export function SessionAnalysisDialog({ open, onClose, analysis }: Props) {
                 </div>
               </div>
             )}
+            {/* Detailed Tool Calls */}
+            {analysis.trajectory.tool_calls &&
+              analysis.trajectory.tool_calls.length > 0 && (
+                <div className="space-y-2 pt-2">
+                  <div className="text-xs font-medium text-muted-foreground">
+                    Tool Call Details
+                  </div>
+                  <ToolCallDetails toolCalls={analysis.trajectory.tool_calls} />
+                </div>
+              )}
           </Section>
 
           {/* Outcome Section */}
@@ -132,16 +173,60 @@ export function SessionAnalysisDialog({ open, onClose, analysis }: Props) {
             <Field label="Assessment" value={analysis.outcome.assessment} />
           </Section>
 
+          {/* Metrics Section */}
+          {analysis.metrics && (
+            <Section title="Metrics">
+              <div className="grid grid-cols-5 gap-4">
+                <div className="space-y-1">
+                  <div className="text-xs font-medium text-muted-foreground">
+                    Duration
+                  </div>
+                  <div className="text-lg font-semibold">
+                    {formatDuration(analysis.metrics.durationMs)}
+                  </div>
+                </div>
+                <div className="space-y-1">
+                  <div className="text-xs font-medium text-muted-foreground">
+                    Input Tokens
+                  </div>
+                  <div className="text-lg font-semibold">
+                    {formatTokens(analysis.metrics.inputTokens)}
+                  </div>
+                </div>
+                <div className="space-y-1">
+                  <div className="text-xs font-medium text-muted-foreground">
+                    Output Tokens
+                  </div>
+                  <div className="text-lg font-semibold">
+                    {formatTokens(analysis.metrics.outputTokens)}
+                  </div>
+                </div>
+                <div className="space-y-1">
+                  <div className="text-xs font-medium text-muted-foreground">
+                    Total Tokens
+                  </div>
+                  <div className="text-lg font-semibold">
+                    {formatTokens(analysis.metrics.totalTokens)}
+                  </div>
+                </div>
+                <div className="space-y-1">
+                  <div className="text-xs font-medium text-muted-foreground">
+                    Estimated Cost
+                  </div>
+                  <div className="text-lg font-semibold text-green-600 dark:text-green-400">
+                    {formatCost(analysis.metrics.estimatedCost)}
+                  </div>
+                </div>
+              </div>
+            </Section>
+          )}
+
           {/* Metadata Section */}
           <Section title="Metadata">
             <div className="grid grid-cols-2 gap-4">
               <Field label="Started" value={formatDate(analysis.started_at)} />
               <Field label="Ended" value={formatDate(analysis.ended_at)} />
             </div>
-            <Field
-              label="Duration"
-              value={calculateDuration(analysis.started_at, analysis.ended_at)}
-            />
             <Field label="Agent" value={analysis.agent_name} />
             <Field
               label="Session ID"

package/src/lib/metrics.ts

@@ -136,10 +136,15 @@ export function extractMetricsFromSpans(
   const totalTokens = inputTokens + outputTokens;
   const estimatedCost = calculateCost(model, inputTokens, outputTokens);
   // Dedupe tool calls using name + start time to avoid double counting when captured in multiple places
+  // Prefer entries with actual output over entries with null output
   const deduped = new Map<string, ToolCall>();
   for (const call of toolCalls) {
     const key = `${call.name}-${call.startTimeUnixNano ?? ""}`;
-    if (!deduped.has(key)) {
+    const existing = deduped.get(key);
+    if (!existing) {
+      deduped.set(key, call);
+    } else if (existing.output == null && call.output != null) {
+      // Replace null-output entry with one that has actual output
       deduped.set(key, call);
     }
   }
@@ -163,8 +168,10 @@ export function extractSessionMetrics(
   spans: Span[],
   model: string,
 ): SessionMetrics {
-  // Calculate total duration from traces
-  let minStartTime = Number.MAX_SAFE_INTEGER;
+  // Calculate total duration from traces first
+  // Note: Using Infinity instead of Number.MAX_SAFE_INTEGER because nanosecond
+  // timestamps exceed MAX_SAFE_INTEGER and JS number comparison doesn't work correctly
+  let minStartTime = Infinity;
   let maxEndTime = 0;
 
   for (const trace of traces) {
@@ -176,10 +183,27 @@ export function extractSessionMetrics(
     }
   }
 
-  const durationMs =
-    minStartTime < Number.MAX_SAFE_INTEGER
-      ? (maxEndTime - minStartTime) / 1_000_000
-      : 0;
+  let durationMs =
+    minStartTime < Infinity ? (maxEndTime - minStartTime) / 1_000_000 : 0;
+
+  // If traces didn't give us duration, calculate from spans as fallback
+  if (durationMs === 0 && spans.length > 0) {
+    let spanMinStart = Infinity;
+    let spanMaxEnd = 0;
+
+    for (const span of spans) {
+      if (span.start_time_unix_nano < spanMinStart) {
+        spanMinStart = span.start_time_unix_nano;
+      }
+      if (span.end_time_unix_nano > spanMaxEnd) {
+        spanMaxEnd = span.end_time_unix_nano;
+      }
+    }
+
+    if (spanMinStart < Infinity) {
+      durationMs = (spanMaxEnd - spanMinStart) / 1_000_000;
+    }
+  }
 
   // Extract token metrics from spans
   const tokenMetrics = extractMetricsFromSpans(spans, model);

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);
@@ -489,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">
@@ -555,54 +919,6 @@ export function ComparisonView({ runId }: ComparisonViewProps) {
     return config.dimensions.map((d) => d.replace("_", " ")).join(", ");
   };
 
-  const formatToolTime = (ns?: number) => {
-    if (!ns) return "";
-    return new Date(ns / 1_000_000).toLocaleTimeString();
-  };
-
-  const renderToolCalls = (toolCalls?: SessionMetrics["toolCalls"]) => {
-    if (!toolCalls || toolCalls.length === 0) {
-      return <div className="text-xs text-muted-foreground">No tool calls</div>;
-    }
-
-    return (
-      <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-muted/50"
-          >
-            <summary className="text-xs font-medium cursor-pointer flex items-center justify-between">
-              <span>
-                {call.name}{" "}
-                {call.startTimeUnixNano ? (
-                  <span className="text-muted-foreground">
-                    @ {formatToolTime(call.startTimeUnixNano)}
-                  </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>{" "}
-                <code className="break-words">
-                  {JSON.stringify(call.input, null, 2)}
-                </code>
-              </div>
-              <div>
-                <span className="font-semibold">Result:</span>{" "}
-                <code className="break-words">
-                  {JSON.stringify(call.output, null, 2)}
-                </code>
-              </div>
-            </div>
-          </details>
-        ))}
-      </div>
-    );
-  };
-
   return (
     <DebuggerLayout title="Comparison" showBackButton backHref="/town-hall">
       <div className="container mx-auto p-4 h-[calc(100vh-4rem)] flex flex-col overflow-hidden">
@@ -703,33 +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="mt-3">
-                    <div className="text-[11px] font-semibold mb-1">
-                      Tool calls
-                    </div>
-                    {renderToolCalls(controlState.metrics.toolCalls)}
-                  </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>
@@ -770,33 +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="mt-3">
-                    <div className="text-[11px] font-semibold mb-1">
-                      Tool calls
-                    </div>
-                    {renderToolCalls(variantState.metrics.toolCalls)}
-                  </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>

package/src/pages/FindSessions.tsx

@@ -21,6 +21,7 @@ import {
 interface SimilarSession {
   session_id: string;
   distance: number;
+  analysis?: SessionAnalysis;
 }
 
 export function FindSessions() {
@@ -65,7 +66,26 @@ export function FindSessions() {
       }
 
       const data = await response.json();
-      setSimilarSessions(data.similar);
+
+      // Fetch full analysis data for each similar session
+      const similarWithAnalysis = await Promise.all(
+        data.similar.map(async (similar: SimilarSession) => {
+          try {
+            const analysisRes = await fetch(
+              `/api/session-analyses?sessionId=${similar.session_id}`,
+            );
+            if (analysisRes.ok) {
+              const analysis = await analysisRes.json();
+              return { ...similar, analysis };
+            }
+          } catch (err) {
+            console.error(`Failed to fetch analysis for ${similar.session_id}:`, err);
+          }
+          return similar;
+        }),
+      );
+
+      setSimilarSessions(similarWithAnalysis);
     } catch (err) {
       setError(err instanceof Error ? err.message : "Unknown error");
     } finally {
@@ -179,10 +199,7 @@ export function FindSessions() {
               <CardContent>
                 <div className="space-y-3">
                   {similarSessions.map((similar) => {
-                    const session = sessions.find(
-                      (s) => s.session_id === similar.session_id,
-                    );
-                    if (!session) return null;
+                    if (!similar.analysis) return null;
 
                     return (
                       <a
@@ -197,14 +214,14 @@ export function FindSessions() {
                                 {similar.session_id}
                               </span>
                               <span className="text-xs px-2 py-0.5 bg-primary/10 text-primary rounded">
-                                {session.task.intent_type}
+                                {similar.analysis.task.intent_type}
                               </span>
                             </div>
                             <p className="text-sm line-clamp-2">
-                              {session.task.user_query}
+                              {similar.analysis.task.user_query}
                             </p>
                             <p className="text-xs text-muted-foreground line-clamp-1">
-                              {session.task.task_summary}
+                              {similar.analysis.task.task_summary}
                             </p>
                           </div>
                           <div className="flex flex-col items-end gap-1">

package/src/server.ts

@@ -285,6 +285,20 @@ export function startDebuggerServer(
         },
       },
 
+      "/api/comparison-config/:configId": {
+        GET(req) {
+          const configId = req.params.configId;
+          const config = comparisonDb.getConfig(configId);
+          if (!config) {
+            return Response.json(
+              { error: "Comparison config not found" },
+              { status: 404 },
+            );
+          }
+          return Response.json(config);
+        },
+      },
+
       "/api/comparison-session-ids": {
         GET() {
           const sessionIds = comparisonDb.getComparisonSessionIds();
@@ -530,8 +544,43 @@ export function startDebuggerServer(
 
             const sessionData = await sessionResponse.json();
 
+            // Fetch agent config to get model for cost calculation
+            const agentConfig = await fetchAgentConfig();
+            const model = agentConfig?.model || "unknown";
+
+            // Fetch metrics from OTLP spans
+            const allSpans = db.getSpansBySessionAttribute(sessionId);
+            const traces = db.listTraces(100, 0, sessionId);
+            const sessionMetrics = extractSessionMetrics(
+              traces,
+              allSpans,
+              model,
+            );
+
+            // Convert to AnalysisMetrics format
+            const metrics = {
+              inputTokens: sessionMetrics.inputTokens,
+              outputTokens: sessionMetrics.outputTokens,
+              totalTokens: sessionMetrics.totalTokens,
+              estimatedCost: sessionMetrics.estimatedCost,
+              durationMs: sessionMetrics.durationMs,
+            };
+
+            // Convert tool calls to DetailedToolCall format
+            const toolCalls = (sessionMetrics.toolCalls || []).map((tc) => ({
+              name: tc.name,
+              input: tc.input,
+              output: tc.output,
+              startTimeUnixNano: tc.startTimeUnixNano,
+              endTimeUnixNano: tc.endTimeUnixNano,
+            }));
+
             // Analyze with LLM
-            const analysis = await analyzeSession(sessionData);
+            const analysis = await analyzeSession({
+              session: sessionData,
+              metrics,
+              toolCalls,
+            });
 
             // Persist to database
             analysisDb.saveAnalysis(analysis);
@@ -581,6 +630,10 @@ export function startDebuggerServer(
             // Import analyzer dynamically
             const { analyzeSession } = await import("./analysis/analyzer.js");
 
+            // Fetch agent config once for all sessions
+            const agentConfig = await fetchAgentConfig();
+            const model = agentConfig?.model || "unknown";
+
             // Process in batches of 25
             const BATCH_SIZE = 25;
             const results: Array<{
@@ -616,8 +669,41 @@ export function startDebuggerServer(
 
                   const sessionData = await sessionResponse.json();
 
+                  // Fetch metrics from OTLP spans
+                  const allSpans = db.getSpansBySessionAttribute(sessionId);
+                  const traces = db.listTraces(100, 0, sessionId);
+                  const sessionMetrics = extractSessionMetrics(
+                    traces,
+                    allSpans,
+                    model,
+                  );
+
+                  // Convert to AnalysisMetrics format
+                  const metrics = {
+                    inputTokens: sessionMetrics.inputTokens,
+                    outputTokens: sessionMetrics.outputTokens,
+                    totalTokens: sessionMetrics.totalTokens,
+                    estimatedCost: sessionMetrics.estimatedCost,
+                    durationMs: sessionMetrics.durationMs,
+                  };
+
+                  // Convert tool calls to DetailedToolCall format
+                  const toolCalls = (sessionMetrics.toolCalls || []).map(
+                    (tc) => ({
+                      name: tc.name,
+                      input: tc.input,
+                      output: tc.output,
+                      startTimeUnixNano: tc.startTimeUnixNano,
+                      endTimeUnixNano: tc.endTimeUnixNano,
+                    }),
+                  );
+
                   // Analyze
-                  const analysis = await analyzeSession(sessionData);
+                  const analysis = await analyzeSession({
+                    session: sessionData,
+                    metrics,
+                    toolCalls,
+                  });
 
                   // Persist
                   analysisDb.saveAnalysis(analysis);