@townco/debugger 0.1.22 → 0.1.24

package/src/pages/SessionList.tsx

@@ -1,24 +1,13 @@
 import { useCallback, useEffect, useState } from "react";
 import { Button } from "@/components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
 import { DebuggerLayout } from "../components/DebuggerLayout";
 import type { 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`;
-}
-
-function formatTimestamp(nanoseconds: number): string {
-  return new Date(nanoseconds / 1_000_000).toLocaleString();
+  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 {
@@ -35,21 +24,59 @@ function formatRelativeTime(nanoseconds: number): string {
   return "just now";
 }
 
+interface SessionWithMessage extends Session {
+  firstMessage?: string;
+}
+
 export function SessionList() {
-  const [sessions, setSessions] = useState<Session[]>([]);
+  const [sessions, setSessions] = useState<SessionWithMessage[]>([]);
+  const [comparisonSessionIds, setComparisonSessionIds] = useState<Set<string>>(
+    new Set(),
+  );
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
-  // Fetch sessions function
+  // Fetch sessions, comparison session IDs, and first messages
   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();
+      }),
+    ])
+      .then(async ([sessionsData, comparisonData]) => {
+        const comparisonIds = new Set<string>(comparisonData.sessionIds || []);
+        setComparisonSessionIds(comparisonIds);
+
+        // Filter sessions first, then fetch first messages only for filtered sessions
+        const filtered = (sessionsData as Session[]).filter(
+          (s) => !comparisonIds.has(s.session_id),
+        );
+
+        // Fetch first messages for all filtered sessions in parallel
+        const sessionsWithMessages = await Promise.all(
+          filtered.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) => {
@@ -63,6 +90,11 @@ export function SessionList() {
     fetchSessions();
   }, [fetchSessions]);
 
+  // Filter out comparison sessions (already filtered during fetch, but keep for safety)
+  const filteredSessions = sessions.filter(
+    (session) => !comparisonSessionIds.has(session.session_id),
+  );
+
   if (loading) {
     return (
       <DebuggerLayout title="Sessions" showNav>
@@ -85,53 +117,42 @@ export function SessionList() {
 
   return (
     <DebuggerLayout title="Sessions" showNav>
-      <div className="container mx-auto p-8">
-        <div className="flex gap-2 mb-4">
+      <div className="h-[calc(100vh-4rem)] flex flex-col p-8">
+        <div className="flex gap-2 mb-4 shrink-0">
           <Button variant="outline" onClick={fetchSessions} disabled={loading}>
             Refresh
           </Button>
         </div>
 
-        {sessions.length === 0 ? (
+        {filteredSessions.length === 0 ? (
           <div className="text-muted-foreground">No sessions found</div>
         ) : (
-          <div className="space-y-2">
-            {sessions.map((session) => (
+          <div className="space-y-1 overflow-y-auto flex-1">
+            {filteredSessions.map((session) => (
               <a
                 key={session.session_id}
                 href={`/sessions/${session.session_id}`}
                 className="block"
               >
-                <Card className="hover:bg-muted/50 transition-colors cursor-pointer">
-                  <CardHeader className="py-3">
-                    <div className="flex items-center justify-between">
-                      <CardTitle className="text-base font-medium font-mono">
-                        {session.session_id}
-                      </CardTitle>
-                      <span className="text-sm text-muted-foreground">
-                        {formatRelativeTime(session.last_trace_time)}
-                      </span>
-                    </div>
-                    <CardDescription className="flex items-center gap-4">
-                      <span>{session.trace_count} traces</span>
-                      <span>
-                        Duration:{" "}
-                        {formatDuration(
-                          session.first_trace_time,
-                          session.last_trace_time,
-                        )}
-                      </span>
-                    </CardDescription>
-                  </CardHeader>
-                  <CardContent className="py-2 pt-0">
-                    <div className="text-xs text-muted-foreground">
-                      Started: {formatTimestamp(session.first_trace_time)}
-                    </div>
-                    <div className="text-xs text-muted-foreground">
-                      Last activity: {formatTimestamp(session.last_trace_time)}
-                    </div>
-                  </CardContent>
-                </Card>
+                <div className="flex items-center gap-3 px-3 py-2 rounded-md hover:bg-muted/50 transition-colors cursor-pointer 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">
+                    {session.trace_count}{" "}
+                    {session.trace_count === 1 ? "trace" : "traces"} ·{" "}
+                    {formatDuration(
+                      session.first_trace_time,
+                      session.last_trace_time,
+                    )}
+                  </span>
+                  <span className="text-xs text-muted-foreground shrink-0">
+                    {formatRelativeTime(session.last_trace_time)}
+                  </span>
+                </div>
               </a>
             ))}
           </div>

package/src/pages/SessionView.tsx

@@ -1,76 +1,15 @@
-import { useCallback, useState } from "react";
 import { DebuggerLayout } from "../components/DebuggerLayout";
-import { SessionTraceList } from "../components/SessionTraceList";
-import { TraceDetailContent } from "../components/TraceDetailContent";
-
-function getInitialTraceId(): string | null {
-  const params = new URLSearchParams(window.location.search);
-  return params.get("traceId");
-}
+import { SessionTimelineView } from "../components/SessionTimelineView";
 
 interface SessionViewProps {
   sessionId: string;
 }
 
 export function SessionView({ sessionId }: SessionViewProps) {
-  const [selectedTraceId, setSelectedTraceId] = useState<string | null>(
-    getInitialTraceId,
-  );
-  const [autoSelectDone, setAutoSelectDone] = useState(
-    () => getInitialTraceId() !== null,
-  );
-
-  const handleSelectTrace = (traceId: string) => {
-    setSelectedTraceId(traceId);
-
-    // Update URL without navigation
-    const url = new URL(window.location.href);
-    url.searchParams.set("traceId", traceId);
-    window.history.replaceState({}, "", url);
-  };
-
-  const handleTracesLoaded = useCallback(
-    (traces: { trace_id: string }[]) => {
-      // Auto-select most recent trace if none selected yet
-      // Most recent is now last in array due to ASC ordering
-      const mostRecent = traces[traces.length - 1];
-      if (!autoSelectDone && mostRecent) {
-        setSelectedTraceId(mostRecent.trace_id);
-        setAutoSelectDone(true);
-
-        // Update URL
-        const url = new URL(window.location.href);
-        url.searchParams.set("traceId", mostRecent.trace_id);
-        window.history.replaceState({}, "", url);
-      }
-    },
-    [autoSelectDone],
-  );
-
   return (
     <DebuggerLayout title={`Session: ${sessionId}`} showBackButton backHref="/">
-      {/* Split pane container */}
-      <div className="flex flex-1 overflow-hidden h-full">
-        {/* Left pane - trace list */}
-        <div className="w-[480px] border-r overflow-y-auto shrink-0">
-          <SessionTraceList
-            sessionId={sessionId}
-            selectedTraceId={selectedTraceId}
-            onSelectTrace={handleSelectTrace}
-            onTracesLoaded={handleTracesLoaded}
-          />
-        </div>
-
-        {/* Right pane - trace detail */}
-        <div className="flex-1 overflow-y-auto">
-          {selectedTraceId ? (
-            <TraceDetailContent traceId={selectedTraceId} compact />
-          ) : (
-            <div className="p-8 text-muted-foreground">
-              Select a trace to view details
-            </div>
-          )}
-        </div>
+      <div className="flex-1 overflow-y-auto">
+        <SessionTimelineView sessionId={sessionId} />
       </div>
     </DebuggerLayout>
   );

package/src/pages/TownHall.tsx

@@ -0,0 +1,406 @@
+import { useCallback, useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import { DebuggerLayout } from "../components/DebuggerLayout";
+import type {
+  AgentConfig,
+  ComparisonConfig,
+  ComparisonDimension,
+  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`;
+}
+
+function formatRelativeTime(nanoseconds: number): string {
+  const ms = Date.now() - nanoseconds / 1_000_000;
+  const seconds = Math.floor(ms / 1000);
+  const minutes = Math.floor(seconds / 60);
+  const hours = Math.floor(minutes / 60);
+  const days = Math.floor(hours / 24);
+
+  if (days > 0) return `${days}d ago`;
+  if (hours > 0) return `${hours}h ago`;
+  if (minutes > 0) return `${minutes}m ago`;
+  if (seconds > 5) return `${seconds}s ago`;
+  return "just now";
+}
+
+export function TownHall() {
+  const [sessions, setSessions] = useState<Session[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // Comparison config state
+  const [dimension, setDimension] = useState<ComparisonDimension | null>(null);
+  const [availableModels, setAvailableModels] = useState<string[]>([]);
+  const [agentConfig, setAgentConfig] = useState<AgentConfig | null>(null);
+
+  // Variant values
+  const [variantModel, setVariantModel] = useState<string | null>(null);
+  const [variantSystemPrompt, setVariantSystemPrompt] = useState<string>("");
+  const [variantTools, setVariantTools] = useState<string[]>([]);
+
+  // Running comparison state
+  const [runningComparison, setRunningComparison] = useState<string | null>(
+    null,
+  );
+
+  // Fetch sessions
+  const fetchSessions = useCallback(() => {
+    setLoading(true);
+    fetch("/api/sessions")
+      .then((res) => {
+        if (!res.ok) throw new Error("Failed to fetch sessions");
+        return res.json();
+      })
+      .then((data) => {
+        setSessions(data);
+        setLoading(false);
+      })
+      .catch((err) => {
+        setError(err.message);
+        setLoading(false);
+      });
+  }, []);
+
+  // Fetch available models and agent config
+  useEffect(() => {
+    fetch("/api/available-models")
+      .then((res) => res.json())
+      .then((data) => setAvailableModels(data.models || []))
+      .catch(console.error);
+
+    fetch("/api/agent-config")
+      .then((res) => res.json())
+      .then((data) => {
+        setAgentConfig(data);
+        // Initialize variant system prompt with current
+        if (data.systemPrompt) {
+          setVariantSystemPrompt(data.systemPrompt);
+        }
+        // Initialize variant tools with current
+        if (data.tools) {
+          setVariantTools(data.tools.map((t: { name: string }) => t.name));
+        }
+      })
+      .catch(console.error);
+  }, []);
+
+  // Fetch sessions on mount
+  useEffect(() => {
+    fetchSessions();
+  }, [fetchSessions]);
+
+  // Check if comparison is ready
+  const isComparisonReady = () => {
+    if (!dimension) return false;
+
+    switch (dimension) {
+      case "model":
+        return !!variantModel && variantModel !== agentConfig?.model;
+      case "system_prompt":
+        return (
+          variantSystemPrompt !== "" &&
+          variantSystemPrompt !== agentConfig?.systemPrompt
+        );
+      case "tools":
+        const currentToolNames =
+          agentConfig?.tools?.map((t) => t.name).sort() || [];
+        const variantToolNames = [...variantTools].sort();
+        return (
+          JSON.stringify(currentToolNames) !== JSON.stringify(variantToolNames)
+        );
+      default:
+        return false;
+    }
+  };
+
+  // Start comparison
+  const startComparison = async (sessionId: string) => {
+    if (!dimension || !isComparisonReady()) return;
+
+    setRunningComparison(sessionId);
+
+    try {
+      // Create comparison config
+      const config: Partial<ComparisonConfig> = {
+        dimension,
+        ...(dimension === "model" && { controlModel: agentConfig?.model }),
+        ...(dimension === "model" && variantModel && { variantModel }),
+        ...(dimension === "system_prompt" &&
+          variantSystemPrompt && {
+            variantSystemPrompt,
+          }),
+        ...(dimension === "tools" &&
+          variantTools.length > 0 && { variantTools }),
+      };
+
+      // Save config
+      const configRes = await fetch("/api/comparison-config", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(config),
+      });
+      const { id: configId } = await configRes.json();
+
+      // Start comparison run
+      const runRes = await fetch("/api/run-comparison", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ sessionId, configId }),
+      });
+      const { runId } = await runRes.json();
+
+      // Navigate to comparison view
+      window.location.href = `/town-hall/compare/${runId}`;
+    } catch (err) {
+      console.error("Failed to start comparison:", err);
+      setRunningComparison(null);
+    }
+  };
+
+  if (loading) {
+    return (
+      <DebuggerLayout title="Town Hall" showNav>
+        <div className="container mx-auto p-8">
+          <div className="text-muted-foreground">Loading sessions...</div>
+        </div>
+      </DebuggerLayout>
+    );
+  }
+
+  if (error) {
+    return (
+      <DebuggerLayout title="Town Hall" showNav>
+        <div className="container mx-auto p-8">
+          <div className="text-red-500">Error: {error}</div>
+        </div>
+      </DebuggerLayout>
+    );
+  }
+
+  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}
+                      >
+                        {model}
+                        {model === agentConfig?.model && " (current)"}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </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>
+            )}
+
+            {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>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* Status indicator */}
+            {dimension && (
+              <div className="text-sm">
+                {isComparisonReady() ? (
+                  <span className="text-green-600 dark:text-green-400">
+                    Ready to compare. Click "Compare" on a session below.
+                  </span>
+                ) : (
+                  <span className="text-yellow-600 dark:text-yellow-400">
+                    Configure a different variant to enable comparison.
+                  </span>
+                )}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        {/* Session list */}
+        <div className="flex gap-2 mb-4">
+          <Button variant="outline" onClick={fetchSessions} disabled={loading}>
+            Refresh
+          </Button>
+        </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">
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() =>
+                          (window.location.href = `/sessions/${session.session_id}`)
+                        }
+                      >
+                        View
+                      </Button>
+                      <Button
+                        size="sm"
+                        disabled={
+                          !isComparisonReady() ||
+                          runningComparison === session.session_id
+                        }
+                        onClick={() => startComparison(session.session_id)}
+                        title={
+                          !isComparisonReady()
+                            ? "Configure comparison first"
+                            : "Start comparison"
+                        }
+                      >
+                        {runningComparison === session.session_id
+                          ? "Starting..."
+                          : "Compare"}
+                      </Button>
+                    </div>
+                  </div>
+                </CardHeader>
+              </Card>
+            ))}
+          </div>
+        )}
+      </div>
+    </DebuggerLayout>
+  );
+}

package/src/schemas.ts

@@ -0,0 +1,15 @@
+import { z } from "zod";
+
+export const VariantToolsSchema = z.array(z.string());
+
+export const SessionMetricsSchema = z.object({
+  durationMs: z.number(),
+  inputTokens: z.number(),
+  outputTokens: z.number(),
+  totalTokens: z.number(),
+  estimatedCost: z.number(),
+  toolCallCount: z.number(),
+});
+
+export type VariantTools = z.infer<typeof VariantToolsSchema>;
+export type SessionMetrics = z.infer<typeof SessionMetricsSchema>;