@townco/debugger 0.1.66 → 0.1.68

package/src/pages/SessionLogsView.tsx

@@ -0,0 +1,585 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { ConversationPanel } from "../components/ConversationPanel";
+import { DiagnosticDetailsPanel } from "../components/DiagnosticDetailsPanel";
+import {
+  DiagnosticPanel,
+  type DiagnosticViewMode,
+} from "../components/DiagnosticPanel";
+import { NavBar } from "../components/NavBar";
+import { buildSpanTree } from "../components/SpanTimeline";
+import { segmentByTurn, type TraceData } from "../lib/segmentation";
+import type { ConversationTrace, Log, Span, SpanNode } from "../types";
+
+interface SessionLogsViewProps {
+  sessionId: string;
+}
+
+/**
+ * Build a hierarchical span tree from flat spans (duplicated from SpansLogsList for navigation)
+ */
+function buildSpanTreeLocal(spans: Span[]): SpanNode[] {
+  const spanMap = new Map<string, SpanNode>();
+  const roots: SpanNode[] = [];
+
+  // First pass: create SpanNode objects
+  for (const span of spans) {
+    spanMap.set(span.span_id, {
+      ...span,
+      children: [],
+      depth: 0,
+      durationMs:
+        (span.end_time_unix_nano - span.start_time_unix_nano) / 1_000_000,
+    });
+  }
+
+  // Second pass: build the tree
+  for (const span of spans) {
+    const node = spanMap.get(span.span_id);
+    if (!node) continue;
+
+    if (span.parent_span_id && spanMap.has(span.parent_span_id)) {
+      const parent = spanMap.get(span.parent_span_id);
+      if (parent) {
+        parent.children.push(node);
+      }
+    } else {
+      roots.push(node);
+    }
+  }
+
+  // Third pass: set depths
+  const setDepth = (nodes: SpanNode[], depth: number) => {
+    for (const node of nodes) {
+      node.depth = depth;
+      setDepth(node.children, depth + 1);
+    }
+  };
+  setDepth(roots, 0);
+
+  return roots;
+}
+
+/**
+ * Flatten span tree for navigation (same order as rendered)
+ */
+function flattenSpanTree(nodes: SpanNode[]): SpanNode[] {
+  const result: SpanNode[] = [];
+  for (const node of nodes) {
+    result.push(node);
+    if (node.children.length > 0) {
+      result.push(...flattenSpanTree(node.children));
+    }
+  }
+  return result;
+}
+
+export function SessionLogsView({ sessionId }: SessionLogsViewProps) {
+  // Data state
+  const [traces, setTraces] = useState<ConversationTrace[]>([]);
+  const [traceDataMap, setTraceDataMap] = useState<Map<string, TraceData>>(
+    new Map(),
+  );
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // UI state
+  const [viewMode, setViewMode] = useState<DiagnosticViewMode>("spans");
+  const [highlightedItemId, setHighlightedItemId] = useState<string | null>(
+    null,
+  );
+  const [highlightedSpanId, setHighlightedSpanId] = useState<string | null>(
+    null,
+  );
+
+  // Selected span/log for the details panel
+  const [selectedSpan, setSelectedSpan] = useState<SpanNode | null>(null);
+  const [selectedLog, setSelectedLog] = useState<Log | null>(null);
+
+  // State for conversation item <-> span linking
+  const [selectedConversationItemId, setSelectedConversationItemId] = useState<
+    string | null
+  >(null);
+  const [selectedConversationSpanId, setSelectedConversationSpanId] = useState<
+    string | null
+  >(null);
+
+  // Scroll targets - only set when selection comes from ConversationPanel
+  const [scrollToSpanId, setScrollToSpanId] = useState<string | null>(null);
+  const [scrollToLogId, setScrollToLogId] = useState<number | null>(null);
+
+  // Refs for scroll sync
+  const conversationRef = useRef<HTMLDivElement>(null);
+
+  // Fetch conversation traces
+  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 detailed trace data
+  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();
+            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);
+          }
+        }),
+      );
+
+      setTraceDataMap(dataMap);
+    };
+
+    fetchAllTraceData();
+  }, [traces]);
+
+  // Compute segments using per-turn mode
+  const segments = useMemo(() => {
+    if (traces.length === 0 || traceDataMap.size === 0) return [];
+    return segmentByTurn(traces, traceDataMap);
+  }, [traces, traceDataMap]);
+
+  // Combine all spans for timeline view and span tree
+  const allSpans = useMemo(() => {
+    const spans: Array<Span & { traceId: string; turnIndex: number }> = [];
+    traces.forEach((trace, index) => {
+      const data = traceDataMap.get(trace.trace_id);
+      if (data) {
+        data.spans.forEach((span) => {
+          spans.push({
+            ...span,
+            traceId: trace.trace_id,
+            turnIndex: index,
+          });
+        });
+      }
+    });
+    return spans;
+  }, [traces, traceDataMap]);
+
+  // All logs combined
+  const allLogs = useMemo(() => {
+    const logs: Log[] = [];
+    for (const segment of segments) {
+      logs.push(...segment.logs);
+    }
+    return logs.sort((a, b) => a.timestamp_unix_nano - b.timestamp_unix_nano);
+  }, [segments]);
+
+  // Build span tree for the details panel
+  const spanTree = useMemo(() => {
+    return buildSpanTree(allSpans);
+  }, [allSpans]);
+
+  // Flattened span list for navigation (in render order)
+  const flattenedSpans = useMemo(() => {
+    const result: SpanNode[] = [];
+    for (const segment of segments) {
+      const segmentTree = buildSpanTreeLocal(segment.spans);
+      result.push(...flattenSpanTree(segmentTree));
+    }
+    return result;
+  }, [segments]);
+
+  // Compute the set of span IDs to highlight (selected span + all its children)
+  const selectedSpanIds = useMemo(() => {
+    const ids = new Set<string>();
+    if (!selectedConversationSpanId) return ids;
+
+    // Build a map of parent -> children
+    const childrenMap = new Map<string, string[]>();
+    for (const span of allSpans) {
+      if (span.parent_span_id) {
+        const children = childrenMap.get(span.parent_span_id) || [];
+        children.push(span.span_id);
+        childrenMap.set(span.parent_span_id, children);
+      }
+    }
+
+    // Add the target span
+    ids.add(selectedConversationSpanId);
+
+    // Recursively add all children
+    const addChildren = (spanId: string) => {
+      const children = childrenMap.get(spanId) || [];
+      for (const childId of children) {
+        ids.add(childId);
+        addChildren(childId);
+      }
+    };
+    addChildren(selectedConversationSpanId);
+
+    return ids;
+  }, [allSpans, selectedConversationSpanId]);
+
+  // Compute the set of log IDs that correspond to the selected conversation item
+  const selectedLogIds = useMemo(() => {
+    const ids = new Set<number>();
+    if (selectedSpanIds.size === 0) return ids;
+
+    // Find logs that belong to any of the selected spans
+    for (const log of allLogs) {
+      if (log.span_id && selectedSpanIds.has(log.span_id)) {
+        ids.add(log.id);
+      }
+    }
+
+    return ids;
+  }, [allLogs, selectedSpanIds]);
+
+  // Handle conversation item selection
+  const handleConversationItemSelect = useCallback(
+    (itemId: string | null, spanId: string | null) => {
+      if (spanId === null) {
+        // Deselecting
+        setSelectedConversationItemId(null);
+        setSelectedConversationSpanId(null);
+        setSelectedSpan(null);
+        setSelectedLog(null);
+        setScrollToSpanId(null);
+        setScrollToLogId(null);
+      } else {
+        setSelectedConversationItemId(itemId);
+        setSelectedConversationSpanId(spanId);
+
+        // Auto-open the first span in the details panel and scroll to it
+        const span = flattenedSpans.find((s) => s.span_id === spanId);
+        if (span) {
+          setSelectedSpan(span);
+          setSelectedLog(null);
+          // Only scroll when selection comes from ConversationPanel
+          setScrollToSpanId(spanId);
+          setScrollToLogId(null);
+        }
+      }
+    },
+    [flattenedSpans],
+  );
+
+  // Handle span click from DiagnosticPanel
+  const handleSpanClick = useCallback(
+    (span: SpanNode) => {
+      setSelectedSpan(span);
+      setSelectedLog(null);
+      // Clear scroll targets - no auto-scroll for direct clicks
+      setScrollToSpanId(null);
+      setScrollToLogId(null);
+
+      // Check if this span is in the highlighted set from conversation selection
+      if (selectedSpanIds.size > 0 && !selectedSpanIds.has(span.span_id)) {
+        // Clear conversation selection since user selected a different span
+        setSelectedConversationItemId(null);
+        setSelectedConversationSpanId(null);
+      }
+    },
+    [selectedSpanIds],
+  );
+
+  // Handle log click from DiagnosticPanel
+  const handleLogClick = useCallback(
+    (log: Log) => {
+      setSelectedLog(log);
+      setSelectedSpan(null);
+      // Clear scroll targets - no auto-scroll for direct clicks
+      setScrollToSpanId(null);
+      setScrollToLogId(null);
+
+      // Check if this log is in the highlighted set from conversation selection
+      if (selectedLogIds.size > 0 && !selectedLogIds.has(log.id)) {
+        // Clear conversation selection since user selected a different log
+        setSelectedConversationItemId(null);
+        setSelectedConversationSpanId(null);
+      }
+    },
+    [selectedLogIds],
+  );
+
+  // Handle closing the details panel
+  const handleCloseDetails = useCallback(() => {
+    setSelectedSpan(null);
+    setSelectedLog(null);
+    setScrollToSpanId(null);
+    setScrollToLogId(null);
+  }, []);
+
+  // Handle view mode change with selection sync
+  const handleViewModeChange = useCallback(
+    (newMode: DiagnosticViewMode) => {
+      setViewMode(newMode);
+
+      // Sync selection when switching views
+      if (newMode === "logs" && selectedSpan) {
+        // Switching to logs view - find a corresponding log
+        const correspondingLog = allLogs.find(
+          (log) =>
+            log.span_id === selectedSpan.span_id ||
+            (selectedSpanIds.size > 0 &&
+              log.span_id &&
+              selectedSpanIds.has(log.span_id)),
+        );
+        if (correspondingLog) {
+          setSelectedLog(correspondingLog);
+          setSelectedSpan(null);
+          // Scroll to the corresponding log in the new view
+          setScrollToLogId(correspondingLog.id);
+          setScrollToSpanId(null);
+        }
+      } else if (newMode === "spans" && selectedLog) {
+        // Switching to spans view - find a corresponding span
+        if (selectedLog.span_id) {
+          const correspondingSpan = flattenedSpans.find(
+            (s) => s.span_id === selectedLog.span_id,
+          );
+          if (correspondingSpan) {
+            setSelectedSpan(correspondingSpan);
+            setSelectedLog(null);
+            // Scroll to the corresponding span in the new view
+            setScrollToSpanId(correspondingSpan.span_id);
+            setScrollToLogId(null);
+          }
+        }
+      }
+    },
+    [selectedSpan, selectedLog, allLogs, flattenedSpans, selectedSpanIds],
+  );
+
+  // Handle keyboard navigation
+  const handleNavigate = useCallback(
+    (direction: "up" | "down") => {
+      if (viewMode === "spans") {
+        // Navigate spans
+        if (!selectedSpan) {
+          // No span selected, select first or last
+          if (flattenedSpans.length > 0) {
+            const span =
+              direction === "down"
+                ? flattenedSpans[0]
+                : flattenedSpans[flattenedSpans.length - 1];
+            if (span) {
+              setSelectedSpan(span);
+              setSelectedLog(null);
+              // Scroll to the newly selected span
+              setScrollToSpanId(span.span_id);
+              setScrollToLogId(null);
+            }
+          }
+          return;
+        }
+
+        const currentIndex = flattenedSpans.findIndex(
+          (s) => s.span_id === selectedSpan.span_id,
+        );
+        if (currentIndex === -1) return;
+
+        const newIndex =
+          direction === "down"
+            ? Math.min(currentIndex + 1, flattenedSpans.length - 1)
+            : Math.max(currentIndex - 1, 0);
+
+        if (newIndex !== currentIndex) {
+          const newSpan = flattenedSpans[newIndex];
+          if (newSpan) {
+            setSelectedSpan(newSpan);
+            setSelectedLog(null);
+            // Scroll to the newly selected span
+            setScrollToSpanId(newSpan.span_id);
+            setScrollToLogId(null);
+
+            // Check if leaving the highlighted set
+            if (
+              selectedSpanIds.size > 0 &&
+              !selectedSpanIds.has(newSpan.span_id)
+            ) {
+              setSelectedConversationItemId(null);
+              setSelectedConversationSpanId(null);
+            }
+          }
+        }
+      } else {
+        // Navigate logs
+        if (!selectedLog) {
+          // No log selected, select first or last
+          if (allLogs.length > 0) {
+            const log =
+              direction === "down" ? allLogs[0] : allLogs[allLogs.length - 1];
+            if (log) {
+              setSelectedLog(log);
+              setSelectedSpan(null);
+              // Scroll to the newly selected log
+              setScrollToLogId(log.id);
+              setScrollToSpanId(null);
+            }
+          }
+          return;
+        }
+
+        const currentIndex = allLogs.findIndex((l) => l.id === selectedLog.id);
+        if (currentIndex === -1) return;
+
+        const newIndex =
+          direction === "down"
+            ? Math.min(currentIndex + 1, allLogs.length - 1)
+            : Math.max(currentIndex - 1, 0);
+
+        if (newIndex !== currentIndex) {
+          const newLog = allLogs[newIndex];
+          if (newLog) {
+            setSelectedLog(newLog);
+            setSelectedSpan(null);
+            // Scroll to the newly selected log
+            setScrollToLogId(newLog.id);
+            setScrollToSpanId(null);
+
+            // Check if leaving the highlighted set
+            if (selectedLogIds.size > 0 && !selectedLogIds.has(newLog.id)) {
+              setSelectedConversationItemId(null);
+              setSelectedConversationSpanId(null);
+            }
+          }
+        }
+      }
+    },
+    [
+      viewMode,
+      selectedSpan,
+      selectedLog,
+      flattenedSpans,
+      allLogs,
+      selectedSpanIds,
+      selectedLogIds,
+    ],
+  );
+
+  // Handle Enter key to confirm selection (open details panel)
+  const handleEnterSelect = useCallback(() => {
+    // The current selection is already shown in the details panel
+    // This callback is here in case we need additional behavior on Enter
+    // Currently, selection already opens the details panel, so this is a no-op
+  }, []);
+
+  // Determine if details panel is open
+  const isDetailsPanelOpen = selectedSpan !== null || selectedLog !== null;
+
+  // Get the selected item ID for highlighting in the list
+  const selectedDiagnosticItemId =
+    selectedSpan?.span_id ?? (selectedLog ? String(selectedLog.id) : null);
+
+  if (loading) {
+    return (
+      <div className="h-screen flex flex-col bg-background">
+        <NavBar sessionId={sessionId} />
+        <div className="flex-1 flex items-center justify-center">
+          <div className="text-muted-foreground">Loading session...</div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="h-screen flex flex-col bg-background">
+        <NavBar sessionId={sessionId} />
+        <div className="flex-1 flex items-center justify-center">
+          <div className="text-red-500">Error: {error}</div>
+        </div>
+      </div>
+    );
+  }
+
+  if (traces.length === 0) {
+    return (
+      <div className="h-screen flex flex-col bg-background">
+        <NavBar sessionId={sessionId} />
+        <div className="flex-1 flex items-center justify-center">
+          <div className="text-muted-foreground">No data for this session</div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-screen flex flex-col bg-background">
+      <NavBar sessionId={sessionId} />
+
+      {/* Main content - 2 or 3 panel layout */}
+      <div className="flex-1 flex min-h-0">
+        {/* Left panel - Conversation */}
+        <div ref={conversationRef} className="flex-1 overflow-y-auto">
+          <ConversationPanel
+            segments={segments}
+            highlightedItemId={highlightedItemId}
+            onItemHover={setHighlightedItemId}
+            selectedItemId={selectedConversationItemId}
+            onItemSelect={handleConversationItemSelect}
+          />
+        </div>
+
+        {/* Middle panel - Diagnostic (Spans/Logs) */}
+        <div className="flex-1 min-h-0">
+          <DiagnosticPanel
+            segments={segments}
+            viewMode={viewMode}
+            onViewModeChange={handleViewModeChange}
+            highlightedSpanId={highlightedSpanId}
+            selectedSpanIds={selectedSpanIds}
+            selectedLogIds={selectedLogIds}
+            onSpanHover={setHighlightedSpanId}
+            onSpanClick={handleSpanClick}
+            onLogClick={handleLogClick}
+            scrollToSpanId={scrollToSpanId}
+            scrollToLogId={scrollToLogId}
+            selectedItemId={selectedDiagnosticItemId}
+            onNavigate={handleNavigate}
+            onEnterSelect={handleEnterSelect}
+          />
+        </div>
+
+        {/* Right panel - Details (conditional) */}
+        {isDetailsPanelOpen && (
+          <div className="flex-1 min-h-0">
+            <DiagnosticDetailsPanel
+              span={selectedSpan}
+              log={selectedLog}
+              onClose={handleCloseDetails}
+              allSpans={spanTree}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/pages/SessionView.tsx

@@ -1,8 +1,10 @@
+import { List } from "lucide-react";
 import { useEffect, useState } from "react";
 import type { SessionAnalysis } from "../analysis/types";
-import { DebuggerLayout } from "../components/DebuggerLayout";
+import { NavBar } from "../components/NavBar";
 import { SessionAnalysisButton } from "../components/SessionAnalysisButton";
 import { SessionTimelineView } from "../components/SessionTimelineView";
+import { Button } from "../components/ui/button";
 
 interface SessionViewProps {
   sessionId: string;
@@ -30,19 +32,28 @@ export function SessionView({ sessionId }: SessionViewProps) {
   }, [sessionId]);
 
   return (
-    <DebuggerLayout title={`Session: ${sessionId}`} showBackButton backHref="/">
-      <div className="relative flex-1 flex flex-col overflow-hidden">
-        <div className="absolute top-4 right-4 z-10">
-          {!loadingAnalysis && (
-            <SessionAnalysisButton
-              sessionId={sessionId}
-              existingAnalysis={existingAnalysis}
-              onAnalysisComplete={(analysis) => setExistingAnalysis(analysis)}
-            />
-          )}
+    <div className="h-screen flex flex-col">
+      <NavBar sessionId={sessionId} />
+      <div className="flex-1 flex flex-col overflow-hidden">
+        <div className="relative flex-1 flex flex-col overflow-hidden">
+          <div className="absolute top-4 right-4 z-10 flex items-center gap-2">
+            <Button variant="outline" size="sm" asChild>
+              <a href={`/sessions/${sessionId}/logs`}>
+                <List className="size-4 mr-2" />
+                Logs View
+              </a>
+            </Button>
+            {!loadingAnalysis && (
+              <SessionAnalysisButton
+                sessionId={sessionId}
+                existingAnalysis={existingAnalysis}
+                onAnalysisComplete={(analysis) => setExistingAnalysis(analysis)}
+              />
+            )}
+          </div>
+          <SessionTimelineView sessionId={sessionId} />
         </div>
-        <SessionTimelineView sessionId={sessionId} />
       </div>
-    </DebuggerLayout>
+    </div>
   );
 }