@townco/debugger 0.1.5 → 0.1.7

package/src/pages/SessionList.tsx

@@ -0,0 +1,142 @@
+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();
+}
+
+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 SessionList() {
+  const [sessions, setSessions] = useState<Session[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // Fetch sessions function
+  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 sessions on mount
+  useEffect(() => {
+    fetchSessions();
+  }, [fetchSessions]);
+
+  if (loading) {
+    return (
+      <DebuggerLayout title="Sessions" showNav>
+        <div className="container mx-auto p-8">
+          <div className="text-muted-foreground">Loading sessions...</div>
+        </div>
+      </DebuggerLayout>
+    );
+  }
+
+  if (error) {
+    return (
+      <DebuggerLayout title="Sessions" showNav>
+        <div className="container mx-auto p-8">
+          <div className="text-red-500">Error: {error}</div>
+        </div>
+      </DebuggerLayout>
+    );
+  }
+
+  return (
+    <DebuggerLayout title="Sessions" showNav>
+      <div className="container mx-auto p-8">
+        <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) => (
+              <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>
+              </a>
+            ))}
+          </div>
+        )}
+      </div>
+    </DebuggerLayout>
+  );
+}

package/src/pages/SessionView.tsx

@@ -1,8 +1,7 @@
 import { useCallback, useState } from "react";
-import { Button } from "@/components/ui/button";
+import { DebuggerLayout } from "../components/DebuggerLayout";
 import { SessionTraceList } from "../components/SessionTraceList";
 import { TraceDetailContent } from "../components/TraceDetailContent";
-import type { Trace } from "../types";
 
 function getInitialTraceId(): string | null {
   const params = new URLSearchParams(window.location.search);
@@ -31,9 +30,10 @@ export function SessionView({ sessionId }: SessionViewProps) {
   };
 
   const handleTracesLoaded = useCallback(
-    (traces: Trace[]) => {
+    (traces: { trace_id: string }[]) => {
       // Auto-select most recent trace if none selected yet
-      const mostRecent = traces[0];
+      // 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);
@@ -48,22 +48,11 @@ export function SessionView({ sessionId }: SessionViewProps) {
   );
 
   return (
-    <div className="h-screen flex flex-col">
-      {/* Header */}
-      <div className="border-b p-4 shrink-0">
-        <Button variant="outline" asChild>
-          <a href="/">Back to Traces</a>
-        </Button>
-        <h1 className="text-xl font-bold mt-2">Session</h1>
-        <div className="text-sm text-muted-foreground font-mono truncate">
-          {sessionId}
-        </div>
-      </div>
-
+    <DebuggerLayout title={`Session: ${sessionId}`} showBackButton backHref="/">
       {/* Split pane container */}
-      <div className="flex flex-1 overflow-hidden">
+      <div className="flex flex-1 overflow-hidden h-full">
         {/* Left pane - trace list */}
-        <div className="w-80 border-r overflow-y-auto shrink-0">
+        <div className="w-[480px] border-r overflow-y-auto shrink-0">
           <SessionTraceList
             sessionId={sessionId}
             selectedTraceId={selectedTraceId}
@@ -83,6 +72,6 @@ export function SessionView({ sessionId }: SessionViewProps) {
           )}
         </div>
       </div>
-    </div>
+    </DebuggerLayout>
   );
 }

package/src/pages/TraceDetail.tsx

@@ -1,4 +1,4 @@
-import { Button } from "@/components/ui/button";
+import { DebuggerLayout } from "../components/DebuggerLayout";
 import { TraceDetailContent } from "../components/TraceDetailContent";
 
 interface TraceDetailProps {
@@ -7,13 +7,10 @@ interface TraceDetailProps {
 
 export function TraceDetail({ traceId }: TraceDetailProps) {
   return (
-    <div className="container mx-auto">
-      <div className="p-8 pb-0">
-        <Button variant="outline" asChild className="mb-4">
-          <a href="/">Back to Traces</a>
-        </Button>
+    <DebuggerLayout title="Trace Detail" showBackButton backHref="/traces">
+      <div className="container mx-auto">
+        <TraceDetailContent traceId={traceId} />
       </div>
-      <TraceDetailContent traceId={traceId} />
-    </div>
+    </DebuggerLayout>
   );
 }

package/src/pages/TraceList.tsx

@@ -8,6 +8,7 @@ import {
   CardTitle,
 } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
+import { DebuggerLayout } from "../components/DebuggerLayout";
 import type { Trace } from "../types";
 
 function formatDuration(startNano: number, endNano: number): string {
@@ -77,77 +78,81 @@ export function TraceList() {
 
   if (loading) {
     return (
-      <div className="container mx-auto p-8">
-        <div className="text-muted-foreground">Loading traces...</div>
-      </div>
+      <DebuggerLayout title="Traces" showNav>
+        <div className="container mx-auto p-8">
+          <div className="text-muted-foreground">Loading traces...</div>
+        </div>
+      </DebuggerLayout>
     );
   }
 
   if (error) {
     return (
-      <div className="container mx-auto p-8">
-        <div className="text-red-500">Error: {error}</div>
-      </div>
+      <DebuggerLayout title="Traces" showNav>
+        <div className="container mx-auto p-8">
+          <div className="text-red-500">Error: {error}</div>
+        </div>
+      </DebuggerLayout>
     );
   }
 
   return (
-    <div className="container mx-auto p-8">
-      <h1 className="text-2xl font-bold mb-6">Traces</h1>
+    <DebuggerLayout title="Traces" showNav>
+      <div className="container mx-auto p-8">
+        <div className="flex gap-2 mb-4">
+          <Input
+            placeholder="Filter by session ID..."
+            value={sessionId}
+            onChange={(e) => setSessionId(e.target.value)}
+            className="max-w-sm"
+          />
+          <Button variant="outline" onClick={fetchTraces} disabled={loading}>
+            Refresh
+          </Button>
+        </div>
 
-      <div className="flex gap-2 mb-4">
-        <Input
-          placeholder="Filter by session ID..."
-          value={sessionId}
-          onChange={(e) => setSessionId(e.target.value)}
-          className="max-w-sm"
-        />
-        <Button variant="outline" onClick={fetchTraces} disabled={loading}>
-          Refresh
-        </Button>
+        {traces.length === 0 ? (
+          <div className="text-muted-foreground">No traces found</div>
+        ) : (
+          <div className="space-y-2">
+            {traces.map((trace) => (
+              <a
+                key={trace.trace_id}
+                href={`/trace/${trace.trace_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">
+                        {trace.first_span_name || "Unknown"}
+                      </CardTitle>
+                      <span className="text-sm text-muted-foreground">
+                        {formatDuration(
+                          trace.start_time_unix_nano,
+                          trace.end_time_unix_nano,
+                        )}
+                      </span>
+                    </div>
+                    <CardDescription className="flex items-center gap-4">
+                      <span>{trace.service_name || "Unknown service"}</span>
+                      <span>{trace.span_count} spans</span>
+                    </CardDescription>
+                  </CardHeader>
+                  <CardContent className="py-2 pt-0">
+                    <div className="text-xs text-muted-foreground font-mono">
+                      {trace.trace_id}
+                    </div>
+                    <div className="text-xs text-muted-foreground">
+                      {formatTimestamp(trace.start_time_unix_nano)}
+                    </div>
+                  </CardContent>
+                </Card>
+              </a>
+            ))}
+          </div>
+        )}
       </div>
-
-      {traces.length === 0 ? (
-        <div className="text-muted-foreground">No traces found</div>
-      ) : (
-        <div className="space-y-2">
-          {traces.map((trace) => (
-            <a
-              key={trace.trace_id}
-              href={`/trace/${trace.trace_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">
-                      {trace.first_span_name || "Unknown"}
-                    </CardTitle>
-                    <span className="text-sm text-muted-foreground">
-                      {formatDuration(
-                        trace.start_time_unix_nano,
-                        trace.end_time_unix_nano,
-                      )}
-                    </span>
-                  </div>
-                  <CardDescription className="flex items-center gap-4">
-                    <span>{trace.service_name || "Unknown service"}</span>
-                    <span>{trace.span_count} spans</span>
-                  </CardDescription>
-                </CardHeader>
-                <CardContent className="py-2 pt-0">
-                  <div className="text-xs text-muted-foreground font-mono">
-                    {trace.trace_id}
-                  </div>
-                  <div className="text-xs text-muted-foreground">
-                    {formatTimestamp(trace.start_time_unix_nano)}
-                  </div>
-                </CardContent>
-              </Card>
-            </a>
-          ))}
-        </div>
-      )}
-    </div>
+    </DebuggerLayout>
   );
 }

package/src/server.ts

@@ -2,6 +2,8 @@ import { createOtlpServer } from "@townco/otlp-server/http";
 import { serve } from "bun";
 import { DebuggerDb } from "./db";
 import index from "./index.html";
+import { extractTurnMessages } from "./lib/turnExtractor";
+import type { ConversationTrace } from "./types";
 
 export const DEFAULT_DEBUGGER_PORT = 4000;
 export const DEFAULT_OTLP_PORT = 4318;
@@ -10,6 +12,7 @@ export interface DebuggerServerOptions {
   port?: number;
   otlpPort?: number;
   dbPath: string;
+  agentName?: string;
 }
 
 export interface DebuggerServerResult {
@@ -25,6 +28,7 @@ export function startDebuggerServer(
     port = DEFAULT_DEBUGGER_PORT,
     otlpPort = DEFAULT_OTLP_PORT,
     dbPath,
+    agentName = "Agent",
   } = options;
 
   // Start OTLP server (initializes database internally)
@@ -41,6 +45,22 @@ export function startDebuggerServer(
   const server = serve({
     port,
     routes: {
+      "/api/config": {
+        GET() {
+          return Response.json({ agentName });
+        },
+      },
+
+      "/api/sessions": {
+        GET(req) {
+          const url = new URL(req.url);
+          const limit = Number.parseInt(url.searchParams.get("limit") || "50");
+          const offset = Number.parseInt(url.searchParams.get("offset") || "0");
+          const sessions = db.listSessions(limit, offset);
+          return Response.json(sessions);
+        },
+      },
+
       "/api/traces": {
         GET(req) {
           const url = new URL(req.url);
@@ -59,7 +79,39 @@ export function startDebuggerServer(
           if (!data.trace) {
             return Response.json({ error: "Trace not found" }, { status: 404 });
           }
-          return Response.json(data);
+          // Extract messages on the server side
+          const messages = extractTurnMessages(data.spans, data.logs);
+          return Response.json({ ...data, messages });
+        },
+      },
+
+      "/api/session-conversation": {
+        GET(req) {
+          const url = new URL(req.url);
+          const sessionId = url.searchParams.get("sessionId");
+          if (!sessionId) {
+            return Response.json(
+              { error: "sessionId parameter is required" },
+              { status: 400 },
+            );
+          }
+
+          // Get all traces for the session (already sorted ASC)
+          const traces = db.listTraces(50, 0, sessionId);
+
+          // Extract messages for each trace
+          const conversation: ConversationTrace[] = traces.map((trace) => {
+            const data = db.getTraceById(trace.trace_id);
+            const messages = extractTurnMessages(data.spans, data.logs);
+            return {
+              trace_id: trace.trace_id,
+              start_time_unix_nano: trace.start_time_unix_nano,
+              userInput: messages.userInput,
+              llmOutput: messages.llmOutput,
+            };
+          });
+
+          return Response.json(conversation);
         },
       },
 

package/src/types.ts

@@ -1,5 +1,6 @@
 export interface Trace {
   trace_id: string;
+  session_id: string | null;
   service_name: string | null;
   first_span_name: string | null;
   start_time_unix_nano: number;
@@ -41,8 +42,29 @@ export interface SpanNode extends Span {
   durationMs: number;
 }
 
-export interface TraceDetail {
+export interface TraceDetailRaw {
   trace: Trace | null;
   spans: Span[];
   logs: Log[];
 }
+
+export interface TraceDetail extends TraceDetailRaw {
+  messages: {
+    userInput: string | null;
+    llmOutput: string | null;
+  };
+}
+
+export interface ConversationTrace {
+  trace_id: string;
+  start_time_unix_nano: number;
+  userInput: string | null;
+  llmOutput: string | null;
+}
+
+export interface Session {
+  session_id: string;
+  trace_count: number;
+  first_trace_time: number;
+  last_trace_time: number;
+}