@townco/debugger 0.1.28 → 0.1.30

package/src/pages/TownHall.tsx

@@ -1,12 +1,6 @@
 import { useCallback, useEffect, useState } from "react";
 import { Button } from "@/components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
+import { Card, CardContent } from "@/components/ui/card";
 import { Label } from "@/components/ui/label";
 import {
   Select,
@@ -21,14 +15,15 @@ import type {
   AgentConfig,
   ComparisonConfig,
   ComparisonDimension,
+  ComparisonRun,
   Session,
 } from "../types";
 
 function formatDuration(startNano: number, endNano: number): string {
   const ms = (endNano - startNano) / 1_000_000;
-  if (ms < 1000) return `${ms.toFixed(2)}ms`;
-  if (ms < 60000) return `${(ms / 1000).toFixed(2)}s`;
-  return `${(ms / 60000).toFixed(2)}m`;
+  if (ms < 1000) return `${ms.toFixed(0)}ms`;
+  if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`;
+  return `${(ms / 60000).toFixed(1)}m`;
 }
 
 function formatRelativeTime(nanoseconds: number): string {
@@ -45,13 +40,23 @@ function formatRelativeTime(nanoseconds: number): string {
   return "just now";
 }
 
+interface SessionWithMessage extends Session {
+  firstMessage?: string;
+}
+
 export function TownHall() {
-  const [sessions, setSessions] = useState<Session[]>([]);
+  const [sessions, setSessions] = useState<SessionWithMessage[]>([]);
+  const [comparisonRuns, setComparisonRuns] = useState<ComparisonRun[]>([]);
+  const [comparisonSessionIds, setComparisonSessionIds] = useState<Set<string>>(
+    new Set(),
+  );
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
-  // Comparison config state
-  const [dimension, setDimension] = useState<ComparisonDimension | null>(null);
+  // Comparison config state - now supports multiple dimensions
+  const [selectedDimensions, setSelectedDimensions] = useState<
+    Set<ComparisonDimension>
+  >(new Set());
   const [availableModels, setAvailableModels] = useState<string[]>([]);
   const [agentConfig, setAgentConfig] = useState<AgentConfig | null>(null);
 
@@ -64,17 +69,53 @@ export function TownHall() {
   const [runningComparison, setRunningComparison] = useState<string | null>(
     null,
   );
+  const [comparisonError, setComparisonError] = useState<string | null>(null);
 
-  // Fetch sessions
+  // Fetch sessions, comparison runs, and comparison session IDs
   const fetchSessions = useCallback(() => {
     setLoading(true);
-    fetch("/api/sessions")
-      .then((res) => {
+    Promise.all([
+      fetch("/api/sessions").then((res) => {
         if (!res.ok) throw new Error("Failed to fetch sessions");
         return res.json();
-      })
-      .then((data) => {
-        setSessions(data);
+      }),
+      fetch("/api/comparison-session-ids").then((res) => {
+        if (!res.ok) return { sessionIds: [] };
+        return res.json();
+      }),
+      fetch("/api/comparison-runs").then((res) => {
+        if (!res.ok) return [];
+        return res.json();
+      }),
+    ])
+      .then(async ([sessionsData, comparisonData, runsData]) => {
+        const comparisonIds = new Set<string>(comparisonData.sessionIds || []);
+        setComparisonSessionIds(comparisonIds);
+        setComparisonRuns(runsData || []);
+
+        // Filter out comparison sessions, then fetch first messages
+        const filteredSessions = (sessionsData as Session[]).filter(
+          (s) => !comparisonIds.has(s.session_id),
+        );
+
+        // Fetch first messages for filtered sessions in parallel
+        const sessionsWithMessages = await Promise.all(
+          filteredSessions.map(async (session) => {
+            try {
+              const res = await fetch(
+                `/api/session-first-message/${session.session_id}`,
+              );
+              if (res.ok) {
+                const data = await res.json();
+                return { ...session, firstMessage: data.message };
+              }
+            } catch {
+              // Ignore errors fetching first message
+            }
+            return session;
+          }),
+        );
+        setSessions(sessionsWithMessages);
         setLoading(false);
       })
       .catch((err) => {
@@ -111,11 +152,22 @@ export function TownHall() {
     fetchSessions();
   }, [fetchSessions]);
 
-  // Check if comparison is ready
-  const isComparisonReady = () => {
-    if (!dimension) return false;
+  // Toggle a dimension on/off
+  const toggleDimension = (dim: ComparisonDimension) => {
+    setSelectedDimensions((prev) => {
+      const next = new Set(prev);
+      if (next.has(dim)) {
+        next.delete(dim);
+      } else {
+        next.add(dim);
+      }
+      return next;
+    });
+  };
 
-    switch (dimension) {
+  // Check if a specific dimension is valid
+  const isDimensionValid = (dim: ComparisonDimension): boolean => {
+    switch (dim) {
       case "model":
         return !!variantModel && variantModel !== agentConfig?.model;
       case "system_prompt":
@@ -135,23 +187,42 @@ export function TownHall() {
     }
   };
 
+  // Check if comparison is ready - at least one dimension selected and all selected dimensions are valid
+  const isComparisonReady = () => {
+    if (selectedDimensions.size === 0) return false;
+
+    // All selected dimensions must be valid
+    for (const dim of selectedDimensions) {
+      if (!isDimensionValid(dim)) return false;
+    }
+    return true;
+  };
+
   // Start comparison
   const startComparison = async (sessionId: string) => {
-    if (!dimension || !isComparisonReady()) return;
+    if (selectedDimensions.size === 0 || !isComparisonReady()) return;
 
     setRunningComparison(sessionId);
+    setComparisonError(null);
 
     try {
-      // Create comparison config
+      // Create comparison config with all selected dimensions
+      const dimensions = Array.from(selectedDimensions);
       const config: Partial<ComparisonConfig> = {
-        dimension,
-        ...(dimension === "model" && { controlModel: agentConfig?.model }),
-        ...(dimension === "model" && variantModel && { variantModel }),
-        ...(dimension === "system_prompt" &&
+        dimensions,
+        // Include model if selected
+        ...(selectedDimensions.has("model") && {
+          controlModel: agentConfig?.model,
+        }),
+        ...(selectedDimensions.has("model") &&
+          variantModel && { variantModel }),
+        // Include system prompt if selected
+        ...(selectedDimensions.has("system_prompt") &&
           variantSystemPrompt && {
             variantSystemPrompt,
           }),
-        ...(dimension === "tools" &&
+        // Include tools if selected
+        ...(selectedDimensions.has("tools") &&
           variantTools.length > 0 && { variantTools }),
       };
 
@@ -161,7 +232,11 @@ export function TownHall() {
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify(config),
       });
-      const { id: configId } = await configRes.json();
+      const configData = await configRes.json();
+      if (!configRes.ok || !configData.id) {
+        throw new Error(configData.error || "Failed to save comparison config");
+      }
+      const configId = configData.id;
 
       // Start comparison run
       const runRes = await fetch("/api/run-comparison", {
@@ -169,12 +244,18 @@ export function TownHall() {
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ sessionId, configId }),
       });
-      const { runId } = await runRes.json();
+      const runData = await runRes.json();
+      if (!runRes.ok || !runData.runId) {
+        throw new Error(runData.error || "Failed to start comparison run");
+      }
 
       // Navigate to comparison view
-      window.location.href = `/town-hall/compare/${runId}`;
+      window.location.href = `/town-hall/compare/${runData.runId}`;
     } catch (err) {
       console.error("Failed to start comparison:", err);
+      setComparisonError(
+        err instanceof Error ? err.message : "Failed to start comparison",
+      );
       setRunningComparison(null);
     }
   };
@@ -201,175 +282,251 @@ export function TownHall() {
 
   return (
     <DebuggerLayout title="Town Hall" showNav>
-      <div className="container mx-auto p-8">
-        {/* Comparison Config Bar */}
-        <Card className="mb-6">
-          <CardHeader className="py-4">
-            <CardTitle className="text-lg">Comparison Configuration</CardTitle>
-            <CardDescription>
-              Select what dimension to compare and configure the variant
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            {/* Dimension selector */}
-            <div className="space-y-2">
-              <Label>Compare by</Label>
-              <Select
-                value={dimension || ""}
-                onValueChange={(v) =>
-                  setDimension(v as ComparisonDimension | null)
-                }
-              >
-                <SelectTrigger className="w-[200px]">
-                  <SelectValue placeholder="Select dimension" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="model">Model</SelectItem>
-                  <SelectItem value="system_prompt">System Prompt</SelectItem>
-                  <SelectItem value="tools">Tools</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-
-            {/* Variant configuration */}
-            {dimension === "model" && (
-              <div className="space-y-2">
-                <Label>
-                  Variant Model{" "}
-                  <span className="text-muted-foreground text-xs">
-                    (Control: {agentConfig?.model || "unknown"})
-                  </span>
-                </Label>
-                <Select
-                  value={variantModel || ""}
-                  onValueChange={setVariantModel}
-                >
-                  <SelectTrigger className="w-[300px]">
-                    <SelectValue placeholder="Select variant model" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {availableModels.map((model) => (
-                      <SelectItem
-                        key={model}
-                        value={model}
-                        disabled={model === agentConfig?.model}
+      <div className="h-[calc(100vh-4rem)] flex flex-col p-8 overflow-hidden">
+        <div className="flex gap-2 mb-4 shrink-0">
+          <Button variant="outline" onClick={fetchSessions} disabled={loading}>
+            Refresh
+          </Button>
+        </div>
+
+        {/* Two-column layout for comparisons and sessions */}
+        <div className="grid grid-cols-2 gap-6 flex-1 min-h-0 overflow-hidden">
+          {/* Recent Comparisons */}
+          <div className="flex flex-col min-h-0">
+            <h3 className="text-sm font-medium mb-2 shrink-0">
+              Recent Comparisons ({comparisonRuns.length})
+            </h3>
+            {comparisonRuns.length === 0 ? (
+              <div className="text-muted-foreground text-sm">
+                No comparisons yet
+              </div>
+            ) : (
+              <div className="space-y-1 overflow-y-auto flex-1">
+                {comparisonRuns.map((run) => (
+                  <a
+                    key={run.id}
+                    href={`/town-hall/compare/${run.id}`}
+                    className="block"
+                  >
+                    <div className="flex items-center gap-3 px-3 py-2 rounded-md hover:bg-muted/50 transition-colors border border-l-2 border-l-orange-500">
+                      <span
+                        className={`text-[10px] px-1.5 py-0.5 rounded shrink-0 ${
+                          run.status === "completed"
+                            ? "bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300"
+                            : run.status === "running"
+                              ? "bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300"
+                              : run.status === "failed"
+                                ? "bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300"
+                                : "bg-gray-100 text-gray-700 dark:bg-gray-900 dark:text-gray-300"
+                        }`}
                       >
-                        {model}
-                        {model === agentConfig?.model && " (current)"}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
+                        {run.status}
+                      </span>
+                      <span className="text-sm truncate flex-1">
+                        {run.firstUserMessage}
+                      </span>
+                      <span className="text-xs text-muted-foreground shrink-0">
+                        {formatRelativeTime(
+                          new Date(run.startedAt).getTime() * 1_000_000,
+                        )}
+                      </span>
+                    </div>
+                  </a>
+                ))}
               </div>
             )}
+          </div>
 
-            {dimension === "system_prompt" && (
-              <div className="space-y-2">
-                <Label>
-                  Variant System Prompt{" "}
-                  <span className="text-muted-foreground text-xs">
-                    (Edit to create variant)
-                  </span>
-                </Label>
-                <Textarea
-                  value={variantSystemPrompt}
-                  onChange={(e) => setVariantSystemPrompt(e.target.value)}
-                  className="min-h-[150px] font-mono text-sm"
-                  placeholder="Enter variant system prompt..."
-                />
-              </div>
-            )}
+          {/* Sessions column with config and list */}
+          <div className="flex flex-col min-h-0 overflow-hidden">
+            <h3 className="text-sm font-medium mb-2 shrink-0">
+              Sessions ({sessions.length})
+            </h3>
 
-            {dimension === "tools" && agentConfig?.tools && (
-              <div className="space-y-2">
-                <Label>
-                  Variant Tools{" "}
-                  <span className="text-muted-foreground text-xs">
-                    (Select tools to enable)
-                  </span>
-                </Label>
-                <div className="flex flex-wrap gap-2">
-                  {agentConfig.tools.map((tool) => (
-                    <Button
-                      key={tool.name}
-                      variant={
-                        variantTools.includes(tool.name) ? "default" : "outline"
-                      }
-                      size="sm"
-                      onClick={() => {
-                        if (variantTools.includes(tool.name)) {
-                          setVariantTools(
-                            variantTools.filter((t) => t !== tool.name),
-                          );
-                        } else {
-                          setVariantTools([...variantTools, tool.name]);
-                        }
-                      }}
-                    >
-                      {tool.name}
-                    </Button>
-                  ))}
+            {/* Comparison Config */}
+            <Card className="mb-4 shrink-0">
+              <CardContent className="py-3 space-y-3">
+                {/* Dimension checkboxes */}
+                <div className="space-y-2">
+                  <Label className="text-xs text-muted-foreground">
+                    Compare by (select one or more)
+                  </Label>
+                  <div className="flex gap-4">
+                    <label className="flex items-center gap-2 cursor-pointer">
+                      <input
+                        type="checkbox"
+                        checked={selectedDimensions.has("model")}
+                        onChange={() => toggleDimension("model")}
+                        className="h-4 w-4 rounded border-gray-300 accent-primary cursor-pointer"
+                      />
+                      <span className="text-sm">Model</span>
+                    </label>
+                    <label className="flex items-center gap-2 cursor-pointer">
+                      <input
+                        type="checkbox"
+                        checked={selectedDimensions.has("system_prompt")}
+                        onChange={() => toggleDimension("system_prompt")}
+                        className="h-4 w-4 rounded border-gray-300 accent-primary cursor-pointer"
+                      />
+                      <span className="text-sm">System Prompt</span>
+                    </label>
+                    <label className="flex items-center gap-2 cursor-pointer">
+                      <input
+                        type="checkbox"
+                        checked={selectedDimensions.has("tools")}
+                        onChange={() => toggleDimension("tools")}
+                        className="h-4 w-4 rounded border-gray-300 accent-primary cursor-pointer"
+                      />
+                      <span className="text-sm">Tools</span>
+                    </label>
+                  </div>
                 </div>
-              </div>
-            )}
 
-            {/* Status indicator */}
-            {dimension && (
-              <div className="text-sm">
+                {/* Model configuration */}
+                {selectedDimensions.has("model") && (
+                  <div className="space-y-1">
+                    <Label className="text-xs text-muted-foreground">
+                      Variant Model
+                    </Label>
+                    <Select
+                      value={variantModel || ""}
+                      onValueChange={setVariantModel}
+                    >
+                      <SelectTrigger className="w-full">
+                        <SelectValue placeholder="Select variant model" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {availableModels.map((model) => (
+                          <SelectItem
+                            key={model}
+                            value={model}
+                            disabled={model === agentConfig?.model}
+                          >
+                            {model}
+                            {model === agentConfig?.model && " (current)"}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    {selectedDimensions.has("model") &&
+                      !isDimensionValid("model") && (
+                        <p className="text-xs text-yellow-600 dark:text-yellow-400">
+                          Select a different model than current
+                        </p>
+                      )}
+                  </div>
+                )}
+
+                {/* System prompt configuration */}
+                {selectedDimensions.has("system_prompt") && (
+                  <div className="space-y-1">
+                    <Label className="text-xs text-muted-foreground">
+                      Variant System Prompt
+                    </Label>
+                    <Textarea
+                      value={variantSystemPrompt}
+                      onChange={(e) => setVariantSystemPrompt(e.target.value)}
+                      className="min-h-[80px] font-mono text-xs"
+                      placeholder="Enter variant system prompt..."
+                    />
+                    {selectedDimensions.has("system_prompt") &&
+                      !isDimensionValid("system_prompt") && (
+                        <p className="text-xs text-yellow-600 dark:text-yellow-400">
+                          Modify the system prompt
+                        </p>
+                      )}
+                  </div>
+                )}
+
+                {/* Tools configuration */}
+                {selectedDimensions.has("tools") && agentConfig?.tools && (
+                  <div className="space-y-1">
+                    <Label className="text-xs text-muted-foreground">
+                      Variant Tools (click to toggle)
+                    </Label>
+                    <div className="flex flex-wrap gap-1">
+                      {agentConfig.tools.map((tool) => (
+                        <Button
+                          key={tool.name}
+                          variant={
+                            variantTools.includes(tool.name)
+                              ? "default"
+                              : "outline"
+                          }
+                          size="sm"
+                          className="h-6 text-xs"
+                          onClick={() => {
+                            if (variantTools.includes(tool.name)) {
+                              setVariantTools(
+                                variantTools.filter((t) => t !== tool.name),
+                              );
+                            } else {
+                              setVariantTools([...variantTools, tool.name]);
+                            }
+                          }}
+                        >
+                          {tool.name}
+                        </Button>
+                      ))}
+                    </div>
+                    {selectedDimensions.has("tools") &&
+                      !isDimensionValid("tools") && (
+                        <p className="text-xs text-yellow-600 dark:text-yellow-400">
+                          Change tool selection from current
+                        </p>
+                      )}
+                  </div>
+                )}
+              </CardContent>
+            </Card>
+            {/* Status indicator - inline below card */}
+            {selectedDimensions.size > 0 && (
+              <div className="text-xs mb-2 -mt-2">
                 {isComparisonReady() ? (
                   <span className="text-green-600 dark:text-green-400">
-                    Ready to compare. Click "Compare" on a session below.
+                    ✓ Ready to compare ({selectedDimensions.size} dimension
+                    {selectedDimensions.size > 1 ? "s" : ""})
                   </span>
                 ) : (
                   <span className="text-yellow-600 dark:text-yellow-400">
-                    Configure a different variant to enable comparison.
+                    Configure all selected dimensions
                   </span>
                 )}
               </div>
             )}
-          </CardContent>
-        </Card>
-
-        {/* Session list */}
-        <div className="flex gap-2 mb-4">
-          <Button variant="outline" onClick={fetchSessions} disabled={loading}>
-            Refresh
-          </Button>
-        </div>
+            {/* Error display */}
+            {comparisonError && (
+              <div className="text-xs mb-2 p-2 bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400 rounded">
+                Error: {comparisonError}
+              </div>
+            )}
 
-        {sessions.length === 0 ? (
-          <div className="text-muted-foreground">No sessions found</div>
-        ) : (
-          <div className="space-y-2">
-            {sessions.map((session) => (
-              <Card
-                key={session.session_id}
-                className="hover:bg-muted/50 transition-colors"
-              >
-                <CardHeader className="py-3">
-                  <div className="flex items-center justify-between">
-                    <div className="flex-1">
-                      <CardTitle className="text-base font-medium font-mono">
-                        {session.session_id}
-                      </CardTitle>
-                      <CardDescription className="flex items-center gap-4 mt-1">
-                        <span>{session.trace_count} traces</span>
-                        <span>
-                          Duration:{" "}
-                          {formatDuration(
-                            session.first_trace_time,
-                            session.last_trace_time,
-                          )}
-                        </span>
-                        <span>
-                          {formatRelativeTime(session.last_trace_time)}
-                        </span>
-                      </CardDescription>
-                    </div>
-                    <div className="flex items-center gap-2">
+            {/* Sessions list */}
+            {sessions.length === 0 ? (
+              <div className="text-muted-foreground text-sm">
+                No sessions found
+              </div>
+            ) : (
+              <div className="space-y-1 overflow-y-auto flex-1">
+                {sessions.map((session) => (
+                  <div
+                    key={session.session_id}
+                    className="flex items-center gap-3 px-3 py-2 rounded-md hover:bg-muted/50 transition-colors border"
+                  >
+                    <code className="text-xs text-muted-foreground shrink-0">
+                      {session.session_id.slice(0, 8)}
+                    </code>
+                    <span className="text-sm truncate flex-1">
+                      {session.firstMessage || "No message"}
+                    </span>
+                    <span className="text-xs text-muted-foreground shrink-0">
+                      {formatRelativeTime(session.last_trace_time)}
+                    </span>
+                    <div className="flex items-center gap-1 shrink-0">
                       <Button
                         variant="outline"
                         size="sm"
+                        className="h-7 px-2 text-xs"
                         onClick={() =>
                           (window.location.href = `/sessions/${session.session_id}`)
                         }
@@ -378,6 +535,7 @@ export function TownHall() {
                       </Button>
                       <Button
                         size="sm"
+                        className="h-7 px-2 text-xs"
                         disabled={
                           !isComparisonReady() ||
                           runningComparison === session.session_id
@@ -390,16 +548,16 @@ export function TownHall() {
                         }
                       >
                         {runningComparison === session.session_id
-                          ? "Starting..."
+                          ? "..."
                           : "Compare"}
                       </Button>
                     </div>
                   </div>
-                </CardHeader>
-              </Card>
-            ))}
+                ))}
+              </div>
+            )}
           </div>
-        )}
+        </div>
       </div>
     </DebuggerLayout>
   );