@townco/debugger 0.1.31 → 0.1.33

package/src/components/ComparisonAnalysisDialog.tsx

@@ -0,0 +1,591 @@
+import { useState } from "react";
+import type { SessionComparisonAnalysis } from "../analysis/comparison-types";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "./ui/dialog";
+
+interface Props {
+  open: boolean;
+  onClose: () => void;
+  analysis: SessionComparisonAnalysis;
+}
+
+function Section({
+  title,
+  children,
+}: {
+  title: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="space-y-3">
+      <h3 className="text-sm font-semibold text-foreground border-b pb-2">
+        {title}
+      </h3>
+      <div className="space-y-3">{children}</div>
+    </div>
+  );
+}
+
+function Field({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="space-y-1">
+      <div className="text-xs font-medium text-muted-foreground">{label}</div>
+      <div className="text-sm text-foreground whitespace-pre-wrap break-words">
+        {value}
+      </div>
+    </div>
+  );
+}
+
+function VerdictBadge({ verdict }: { verdict: string }) {
+  const colors: Record<string, string> = {
+    // Reproducibility verdicts
+    STABLE: "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200",
+    UNSTABLE: "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200",
+    PARTIALLY_STABLE:
+      "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200",
+    // Impact verdicts
+    IMPROVED:
+      "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200",
+    DEGRADED: "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200",
+    NEUTRAL: "bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200",
+    MIXED:
+      "bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200",
+  };
+
+  return (
+    <span
+      className={`inline-flex items-center px-3 py-1 rounded-full text-sm font-semibold ${colors[verdict] || "bg-gray-100 text-gray-800"}`}
+    >
+      {verdict.replace(/_/g, " ")}
+    </span>
+  );
+}
+
+function ConfidenceBadge({ confidence }: { confidence: string }) {
+  const colors: Record<string, string> = {
+    HIGH: "text-green-600 dark:text-green-400",
+    MEDIUM: "text-yellow-600 dark:text-yellow-400",
+    LOW: "text-red-600 dark:text-red-400",
+  };
+
+  return (
+    <span
+      className={`text-xs font-medium ${colors[confidence] || "text-gray-600"}`}
+    >
+      {confidence} confidence
+    </span>
+  );
+}
+
+function PriorityBadge({ priority }: { priority: string }) {
+  const colors: Record<string, string> = {
+    HIGH: "bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300",
+    MEDIUM:
+      "bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-300",
+    LOW: "bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300",
+  };
+
+  return (
+    <span
+      className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${colors[priority] || "bg-gray-100"}`}
+    >
+      {priority}
+    </span>
+  );
+}
+
+function AssessmentBadge({ assessment }: { assessment: string }) {
+  const colors: Record<string, string> = {
+    ACHIEVED:
+      "bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300",
+    PARTIALLY_ACHIEVED:
+      "bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-300",
+    NOT_ACHIEVED: "bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300",
+    OPPOSITE_EFFECT:
+      "bg-purple-100 text-purple-700 dark:bg-purple-900 dark:text-purple-300",
+  };
+
+  return (
+    <span
+      className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${colors[assessment] || "bg-gray-100"}`}
+    >
+      {assessment.replace(/_/g, " ")}
+    </span>
+  );
+}
+
+function SignificanceBadge({ significance }: { significance: string }) {
+  const colors: Record<string, string> = {
+    CRITICAL: "text-red-600 dark:text-red-400",
+    NOTABLE: "text-yellow-600 dark:text-yellow-400",
+    MINOR: "text-gray-500 dark:text-gray-400",
+  };
+
+  return (
+    <span className={`text-xs font-medium ${colors[significance]}`}>
+      {significance}
+    </span>
+  );
+}
+
+function MetricDelta({ value, label }: { value: number; label: string }) {
+  const isPositive = value > 0;
+  const isNegative = value < 0;
+  const color = isPositive
+    ? "text-red-600 dark:text-red-400"
+    : isNegative
+      ? "text-green-600 dark:text-green-400"
+      : "text-gray-600 dark:text-gray-400";
+
+  return (
+    <div className="text-center">
+      <div className={`text-lg font-semibold ${color}`}>
+        {isPositive ? "+" : ""}
+        {value.toFixed(1)}%
+      </div>
+      <div className="text-xs text-muted-foreground">{label}</div>
+    </div>
+  );
+}
+
+function TabButton({
+  active,
+  onClick,
+  children,
+}: {
+  active: boolean;
+  onClick: () => void;
+  children: React.ReactNode;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={`px-4 py-2 text-sm font-medium rounded-t-lg transition-colors ${
+        active
+          ? "bg-background text-foreground border-b-2 border-primary"
+          : "text-muted-foreground hover:text-foreground hover:bg-muted/50"
+      }`}
+    >
+      {children}
+    </button>
+  );
+}
+
+export function ComparisonAnalysisDialog({ open, onClose, analysis }: Props) {
+  const [activeTab, setActiveTab] = useState<
+    "reproducibility" | "impact" | "experiments"
+  >("reproducibility");
+
+  return (
+    <Dialog open={open} onOpenChange={onClose}>
+      <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-3">
+            Comparison Analysis
+            <span className="text-sm font-normal text-muted-foreground">
+              Run: {analysis.comparison_run_id.slice(0, 8)}...
+            </span>
+          </DialogTitle>
+        </DialogHeader>
+
+        {/* Hypothesis Banner */}
+        {analysis.hypothesis && (
+          <div className="bg-blue-50 dark:bg-blue-950 border border-blue-200 dark:border-blue-800 rounded-lg p-3">
+            <div className="text-xs font-medium text-blue-600 dark:text-blue-400 mb-1">
+              Hypothesis
+            </div>
+            <div className="text-sm text-blue-900 dark:text-blue-100">
+              {analysis.hypothesis}
+            </div>
+          </div>
+        )}
+
+        {/* Tab Navigation */}
+        <div className="flex gap-1 border-b">
+          <TabButton
+            active={activeTab === "reproducibility"}
+            onClick={() => setActiveTab("reproducibility")}
+          >
+            Reproducibility Report
+          </TabButton>
+          <TabButton
+            active={activeTab === "impact"}
+            onClick={() => setActiveTab("impact")}
+          >
+            Change Impact Report
+          </TabButton>
+          <TabButton
+            active={activeTab === "experiments"}
+            onClick={() => setActiveTab("experiments")}
+          >
+            Next Experiments
+          </TabButton>
+        </div>
+
+        {/* Tab Content */}
+        <div className="space-y-6 pt-2">
+          {activeTab === "reproducibility" && (
+            <ReproducibilityTab report={analysis.reproducibility} />
+          )}
+          {activeTab === "impact" && (
+            <ChangeImpactTab
+              report={analysis.change_impact}
+              configSummary={analysis.config_summary}
+            />
+          )}
+          {activeTab === "experiments" && (
+            <ExperimentsTab experiments={analysis.next_experiments} />
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function ReproducibilityTab({
+  report,
+}: {
+  report: SessionComparisonAnalysis["reproducibility"];
+}) {
+  return (
+    <div className="space-y-6">
+      {/* Header with verdict */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <VerdictBadge verdict={report.verdict} />
+          <ConfidenceBadge confidence={report.confidence} />
+        </div>
+      </div>
+
+      {/* Summary */}
+      <Section title="Summary">
+        <p className="text-sm text-foreground">{report.summary}</p>
+      </Section>
+
+      {/* Behavioral Differences */}
+      {report.behavioral_differences.length > 0 && (
+        <Section title="Behavioral Differences">
+          <div className="space-y-3">
+            {report.behavioral_differences.map((diff) => (
+              <div
+                key={`diff-${diff.category}-${diff.significance}`}
+                className="border rounded-lg p-3 bg-muted/30"
+              >
+                <div className="flex items-center justify-between mb-2">
+                  <span className="text-xs font-medium px-2 py-0.5 bg-secondary rounded">
+                    {diff.category.replace(/_/g, " ")}
+                  </span>
+                  <SignificanceBadge significance={diff.significance} />
+                </div>
+                <p className="text-sm mb-2">{diff.observation}</p>
+                <div className="text-xs text-muted-foreground bg-muted/50 rounded p-2 font-mono">
+                  {diff.evidence}
+                </div>
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {/* Metrics Comparison */}
+      <Section title="Metrics (Original vs Control)">
+        <div className="grid grid-cols-4 gap-4 mb-3">
+          <MetricDelta
+            value={report.metric_comparison.duration_delta_pct}
+            label="Duration"
+          />
+          <MetricDelta
+            value={report.metric_comparison.token_delta_pct}
+            label="Tokens"
+          />
+          <MetricDelta
+            value={report.metric_comparison.cost_delta_pct}
+            label="Cost"
+          />
+          <div className="text-center">
+            <div className="text-lg font-semibold">
+              {report.metric_comparison.tool_call_delta > 0 ? "+" : ""}
+              {report.metric_comparison.tool_call_delta}
+            </div>
+            <div className="text-xs text-muted-foreground">Tool Calls</div>
+          </div>
+        </div>
+        <p className="text-sm text-muted-foreground italic">
+          {report.metric_comparison.interpretation}
+        </p>
+      </Section>
+
+      {/* Recommendations */}
+      {report.recommendations.length > 0 && (
+        <Section title="Recommendations">
+          <div className="space-y-2">
+            {report.recommendations.map((rec) => (
+              <div key={`rec-${rec.action}`} className="border rounded-lg p-3">
+                <div className="flex items-start gap-2 mb-2">
+                  <PriorityBadge priority={rec.priority} />
+                  <span className="text-sm font-medium">{rec.action}</span>
+                </div>
+                <p className="text-xs text-muted-foreground">{rec.rationale}</p>
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+    </div>
+  );
+}
+
+function ChangeImpactTab({
+  report,
+  configSummary,
+}: {
+  report: SessionComparisonAnalysis["change_impact"];
+  configSummary: SessionComparisonAnalysis["config_summary"];
+}) {
+  return (
+    <div className="space-y-6">
+      {/* Header with verdict */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <VerdictBadge verdict={report.verdict} />
+          <ConfidenceBadge confidence={report.confidence} />
+        </div>
+      </div>
+
+      {/* Config Changes Summary */}
+      <div className="bg-muted/30 rounded-lg p-3">
+        <div className="text-xs font-medium text-muted-foreground mb-2">
+          Changes Applied
+        </div>
+        <div className="flex flex-wrap gap-2">
+          {configSummary.model_change && (
+            <span className="text-xs px-2 py-1 bg-purple-100 dark:bg-purple-900 text-purple-700 dark:text-purple-300 rounded">
+              Model: {configSummary.model_change.from} →{" "}
+              {configSummary.model_change.to}
+            </span>
+          )}
+          {configSummary.system_prompt_changed && (
+            <span className="text-xs px-2 py-1 bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 rounded">
+              System Prompt Modified
+            </span>
+          )}
+          {configSummary.tools_added.length > 0 && (
+            <span className="text-xs px-2 py-1 bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-300 rounded">
+              +{configSummary.tools_added.length} tools
+            </span>
+          )}
+          {configSummary.tools_removed.length > 0 && (
+            <span className="text-xs px-2 py-1 bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-300 rounded">
+              -{configSummary.tools_removed.length} tools
+            </span>
+          )}
+        </div>
+      </div>
+
+      {/* Hypothesis Assessment */}
+      <Section title="Hypothesis Assessment">
+        <p className="text-sm text-foreground">
+          {report.hypothesis_assessment}
+        </p>
+      </Section>
+
+      {/* Summary */}
+      <Section title="Summary">
+        <p className="text-sm text-foreground">{report.summary}</p>
+      </Section>
+
+      {/* Intended Effects */}
+      {report.intended_effects.length > 0 && (
+        <Section title="Intended Effects">
+          <div className="space-y-3">
+            {report.intended_effects.map((effect) => (
+              <div
+                key={`effect-${effect.expected_change}`}
+                className="border rounded-lg p-3 bg-muted/30"
+              >
+                <div className="flex items-center justify-between mb-2">
+                  <span className="text-sm font-medium">
+                    {effect.expected_change}
+                  </span>
+                  <AssessmentBadge assessment={effect.assessment} />
+                </div>
+                <p className="text-sm mb-2">{effect.observed_outcome}</p>
+                <div className="text-xs text-muted-foreground bg-muted/50 rounded p-2 font-mono">
+                  {effect.evidence}
+                </div>
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {/* Unintended Effects */}
+      {report.unintended_effects.length > 0 && (
+        <Section title="Unintended Effects">
+          <div className="space-y-3">
+            {report.unintended_effects.map((effect) => (
+              <div
+                key={`unintended-${effect.observation}`}
+                className={`border rounded-lg p-3 ${
+                  effect.impact === "NEGATIVE"
+                    ? "border-red-200 dark:border-red-800 bg-red-50 dark:bg-red-950"
+                    : effect.impact === "POSITIVE"
+                      ? "border-green-200 dark:border-green-800 bg-green-50 dark:bg-green-950"
+                      : "bg-muted/30"
+                }`}
+              >
+                <div className="flex items-center justify-between mb-2">
+                  <span className="text-xs font-medium px-2 py-0.5 bg-secondary rounded">
+                    {effect.impact}
+                  </span>
+                  <SignificanceBadge significance={effect.severity} />
+                </div>
+                <p className="text-sm mb-2">{effect.observation}</p>
+                <div className="text-xs text-muted-foreground bg-muted/50 rounded p-2 font-mono">
+                  {effect.evidence}
+                </div>
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {/* Tool Usage Changes */}
+      {report.tool_usage_changes.length > 0 && (
+        <Section title="Tool Usage Changes">
+          <div className="overflow-x-auto">
+            <table className="w-full text-sm">
+              <thead>
+                <tr className="border-b">
+                  <th className="text-left py-2 font-medium">Tool</th>
+                  <th className="text-center py-2 font-medium">Control</th>
+                  <th className="text-center py-2 font-medium">Variant</th>
+                  <th className="text-left py-2 font-medium">Change</th>
+                </tr>
+              </thead>
+              <tbody>
+                {report.tool_usage_changes.map((change) => (
+                  <tr key={change.tool_name} className="border-b border-muted">
+                    <td className="py-2 font-mono text-xs">
+                      {change.tool_name}
+                    </td>
+                    <td className="py-2 text-center">{change.control_calls}</td>
+                    <td className="py-2 text-center">{change.variant_calls}</td>
+                    <td className="py-2 text-xs text-muted-foreground">
+                      {change.pattern_change}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </Section>
+      )}
+
+      {/* Metrics Comparison */}
+      <Section title="Metrics (Control vs Variant)">
+        <div className="grid grid-cols-4 gap-4 mb-3">
+          <MetricDelta
+            value={report.metric_comparison.duration_delta_pct}
+            label="Duration"
+          />
+          <MetricDelta
+            value={report.metric_comparison.token_delta_pct}
+            label="Tokens"
+          />
+          <MetricDelta
+            value={report.metric_comparison.cost_delta_pct}
+            label="Cost"
+          />
+          <div className="text-center">
+            <div className="text-lg font-semibold">
+              {report.metric_comparison.tool_call_delta > 0 ? "+" : ""}
+              {report.metric_comparison.tool_call_delta}
+            </div>
+            <div className="text-xs text-muted-foreground">Tool Calls</div>
+          </div>
+        </div>
+        <p className="text-sm text-muted-foreground italic">
+          {report.metric_comparison.interpretation}
+        </p>
+      </Section>
+
+      {/* Recommendations */}
+      {report.recommendations.length > 0 && (
+        <Section title="Recommendations">
+          <div className="space-y-2">
+            {report.recommendations.map((rec) => (
+              <div key={`rec-${rec.action}`} className="border rounded-lg p-3">
+                <div className="flex items-start gap-2 mb-2">
+                  <PriorityBadge priority={rec.priority} />
+                  <span className="text-sm font-medium">{rec.action}</span>
+                </div>
+                <p className="text-xs text-muted-foreground mb-1">
+                  {rec.rationale}
+                </p>
+                {rec.expected_impact && (
+                  <p className="text-xs text-green-600 dark:text-green-400">
+                    Expected: {rec.expected_impact}
+                  </p>
+                )}
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+    </div>
+  );
+}
+
+function ExperimentsTab({
+  experiments,
+}: {
+  experiments: SessionComparisonAnalysis["next_experiments"];
+}) {
+  if (experiments.length === 0) {
+    return (
+      <div className="text-center py-8 text-muted-foreground">
+        No suggested experiments
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      <p className="text-sm text-muted-foreground">
+        Based on the analysis, here are suggested next experiments to try:
+      </p>
+      {experiments.map((exp, idx) => (
+        <div key={`exp-${exp.hypothesis}`} className="border rounded-lg p-4">
+          <div className="flex items-center gap-2 mb-3">
+            <span className="text-lg font-semibold text-primary">
+              #{idx + 1}
+            </span>
+            <span className="text-xs px-2 py-0.5 bg-secondary rounded">
+              {exp.suggested_change.dimension.replace(/_/g, " ")}
+            </span>
+          </div>
+          <div className="space-y-3">
+            <Field label="Hypothesis" value={exp.hypothesis} />
+            <Field
+              label="Suggested Change"
+              value={exp.suggested_change.description}
+            />
+            {exp.suggested_change.example && (
+              <div className="space-y-1">
+                <div className="text-xs font-medium text-muted-foreground">
+                  Example
+                </div>
+                <pre className="text-xs bg-muted rounded p-2 whitespace-pre-wrap font-mono">
+                  {exp.suggested_change.example}
+                </pre>
+              </div>
+            )}
+            <Field label="Expected Outcome" value={exp.expected_outcome} />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/components/DebuggerHeader.tsx

@@ -4,7 +4,6 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
-  DropdownMenuSeparator,
   DropdownMenuTrigger,
   ThemeToggle,
 } from "@townco/ui/gui";

package/src/components/LogList.tsx

@@ -47,9 +47,18 @@ function LogRow({ log }: { log: Log }) {
 
   return (
     <div>
+      {/* biome-ignore lint/a11y/useSemanticElements: log row with expandable content */}
       <div
+        role="button"
+        tabIndex={hasDetails ? 0 : undefined}
         className={`flex items-start gap-2 py-1.5 px-2 hover:bg-muted rounded ${hasDetails ? "cursor-pointer" : ""}`}
         onClick={() => hasDetails && setExpanded(!expanded)}
+        onKeyDown={(e) => {
+          if (hasDetails && (e.key === "Enter" || e.key === " ")) {
+            e.preventDefault();
+            setExpanded(!expanded);
+          }
+        }}
       >
         <span
           className={`${getSeverityColor(log.severity_number)} font-medium text-xs w-12 shrink-0`}

package/src/components/SessionTraceList.tsx

@@ -89,13 +89,22 @@ export function SessionTraceList({
       {traces.map((trace) => {
         const isSelected = trace.trace_id === selectedTraceId;
         return (
+          // biome-ignore lint/a11y/useSemanticElements: trace item with complex children
           <div
             key={trace.trace_id}
+            role="button"
+            tabIndex={0}
             className={cn(
               "space-y-2 cursor-pointer p-3 rounded-lg transition-all",
               isSelected && "bg-blue-500/10 border-2 border-blue-500/30",
             )}
             onClick={() => onSelectTrace(trace.trace_id)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onSelectTrace(trace.trace_id);
+              }
+            }}
           >
             {/* User message - left aligned */}
             <div className="flex justify-start">