@townco/debugger 0.1.23 → 0.1.24

package/src/components/SessionTimelineView.tsx

@@ -0,0 +1,173 @@
+import { useEffect, useMemo, useState } from "react";
+import { Card, CardContent } from "@/components/ui/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import type { ConversationTrace, Log, Span } from "../types";
+import { LogList } from "./LogList";
+import { UnifiedTimeline } from "./UnifiedTimeline";
+
+interface SessionTimelineViewProps {
+  sessionId: string;
+}
+
+interface TraceData {
+  trace: ConversationTrace;
+  spans: Span[];
+  logs: Log[];
+}
+
+export function SessionTimelineView({ sessionId }: SessionTimelineViewProps) {
+  const [traces, setTraces] = useState<ConversationTrace[]>([]);
+  const [traceData, setTraceData] = useState<Map<string, TraceData>>(new Map());
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // Fetch all traces for the session
+  useEffect(() => {
+    const params = new URLSearchParams();
+    params.set("sessionId", sessionId);
+    fetch(`/api/session-conversation?${params}`)
+      .then((res) => {
+        if (!res.ok) throw new Error("Failed to fetch conversation");
+        return res.json();
+      })
+      .then((data: ConversationTrace[]) => {
+        setTraces(data);
+        setLoading(false);
+      })
+      .catch((err) => {
+        setError(err.message);
+        setLoading(false);
+      });
+  }, [sessionId]);
+
+  // Fetch spans and logs for each trace
+  useEffect(() => {
+    if (traces.length === 0) return;
+
+    const fetchAllTraceData = async () => {
+      const dataMap = new Map<string, TraceData>();
+
+      await Promise.all(
+        traces.map(async (trace) => {
+          try {
+            const res = await fetch(`/api/traces/${trace.trace_id}`);
+            if (!res.ok) return;
+            const data = await res.json();
+            // Use the detailed trace data with updated messages
+            const updatedTrace: ConversationTrace = {
+              trace_id: trace.trace_id,
+              start_time_unix_nano: trace.start_time_unix_nano,
+              userInput: data.messages?.userInput ?? trace.userInput,
+              llmOutput: data.messages?.llmOutput ?? trace.llmOutput,
+              agentMessages:
+                data.messages?.agentMessages ?? trace.agentMessages,
+            };
+            dataMap.set(trace.trace_id, {
+              trace: updatedTrace,
+              spans: data.spans || [],
+              logs: data.logs || [],
+            });
+          } catch (err) {
+            console.error(`Failed to fetch trace ${trace.trace_id}:`, err);
+          }
+        }),
+      );
+
+      setTraceData(dataMap);
+    };
+
+    fetchAllTraceData();
+  }, [traces]);
+
+  // Combine all spans and logs
+  const allSpans = useMemo(() => {
+    const spans: Array<Span & { traceId: string; turnIndex: number }> = [];
+    traces.forEach((trace, index) => {
+      const data = traceData.get(trace.trace_id);
+      if (data) {
+        data.spans.forEach((span) => {
+          spans.push({
+            ...span,
+            traceId: trace.trace_id,
+            turnIndex: index,
+          });
+        });
+      }
+    });
+    return spans;
+  }, [traces, traceData]);
+
+  const allLogs = useMemo(() => {
+    const logs: Log[] = [];
+    traces.forEach((trace) => {
+      const data = traceData.get(trace.trace_id);
+      if (data) {
+        logs.push(...data.logs);
+      }
+    });
+    return logs;
+  }, [traces, traceData]);
+
+  // Calculate global timeline bounds
+  const timelineBounds = useMemo(() => {
+    if (allSpans.length === 0) return { start: 0, end: 0 };
+
+    const start = Math.min(...allSpans.map((s) => s.start_time_unix_nano));
+    const end = Math.max(...allSpans.map((s) => s.end_time_unix_nano));
+
+    return { start, end };
+  }, [allSpans]);
+
+  if (loading) {
+    return (
+      <div className="p-6">
+        <div className="text-muted-foreground">Loading session...</div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="p-6">
+        <div className="text-red-500">Error: {error}</div>
+      </div>
+    );
+  }
+
+  if (traces.length === 0) {
+    return (
+      <div className="p-6">
+        <div className="text-muted-foreground">No turns in this session</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-6 space-y-6 bg-background min-h-screen">
+      <Tabs defaultValue="timeline">
+        <TabsList>
+          <TabsTrigger value="timeline">Timeline</TabsTrigger>
+          <TabsTrigger value="logs">Logs</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="timeline" className="mt-6">
+          <UnifiedTimeline
+            spans={allSpans}
+            traces={traces}
+            traceData={traceData}
+            timelineStart={timelineBounds.start}
+            timelineEnd={timelineBounds.end}
+          />
+        </TabsContent>
+
+        <TabsContent value="logs" className="mt-6">
+          <Card>
+            <CardContent className="p-4">
+              <LogList logs={allLogs} />
+            </CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}

package/src/components/SpanTimeline.tsx

@@ -373,7 +373,7 @@ function RenderSpanTreeRow({
   return (
     <>
       <div
-        className="h-[38px] px-4 py-2 border-b border-border flex items-center gap-2 hover:bg-muted/50 cursor-pointer"
+        className="h-[38px] px-4 py-2 border-b border-border flex items-center gap-2 hover:bg-muted/50 cursor-pointer transition-colors"
         style={{ paddingLeft: `${span.depth * 20 + 16}px` }}
         onClick={() => onSpanClick(span)}
       >
@@ -422,14 +422,16 @@ function RenderSpanTreeTimeline({
 
   return (
     <>
-      <div className="h-[38px] border-b border-border relative flex items-center px-4 hover:bg-muted/50 cursor-pointer">
+      <div
+        className="h-[38px] border-b border-border relative flex items-center px-4 hover:bg-muted/50 cursor-pointer transition-colors"
+        onClick={() => onSpanClick(span)}
+      >
         <div
-          className={`absolute h-[18px] rounded ${barColor} flex items-center px-1`}
+          className={`absolute h-[18px] rounded ${barColor} flex items-center px-1 pointer-events-none`}
           style={{
             left: `calc(${timeline.leftPercent}% + 16px)`,
             width: `calc(${Math.max(timeline.widthPercent, 0.5)}% - 32px)`,
           }}
-          onClick={() => onSpanClick(span)}
         >
           <span className="text-xs text-white whitespace-nowrap">
             {span.durationMs.toFixed(2)}ms