@townco/debugger 0.1.23 → 0.1.24

package/src/components/UnifiedTimeline.tsx

@@ -0,0 +1,691 @@
+import { useCallback, useMemo, useRef, useState } from "react";
+import { detectSpanType } from "../lib/spanTypeDetector";
+import type { ConversationTrace, Span, SpanNode } from "../types";
+import { SpanDetailsPanel } from "./SpanDetailsPanel";
+import { SpanIcon } from "./SpanIcon";
+import { buildSpanTree } from "./SpanTimeline";
+
+interface UnifiedTimelineProps {
+  spans: Array<Span & { traceId: string; turnIndex: number }>;
+  traces: ConversationTrace[];
+  traceData: Map<string, { trace: ConversationTrace; spans: Span[] }>;
+  timelineStart: number;
+  timelineEnd: number;
+}
+
+function parseAttributes(attrs: string | null): Record<string, unknown> {
+  if (!attrs) return {};
+  try {
+    return JSON.parse(attrs);
+  } catch {
+    return {};
+  }
+}
+
+// Generate distinct colors for turns
+const TURN_COLORS = [
+  "bg-blue-500/10",
+  "bg-purple-500/10",
+  "bg-green-500/10",
+  "bg-orange-500/10",
+  "bg-pink-500/10",
+  "bg-yellow-500/10",
+  "bg-red-500/10",
+  "bg-indigo-500/10",
+  "bg-teal-500/10",
+  "bg-cyan-500/10",
+];
+
+export function UnifiedTimeline({
+  spans,
+  traces,
+  traceData,
+}: UnifiedTimelineProps) {
+  const [selectedSpan, setSelectedSpan] = useState<SpanNode | null>(null);
+  const [hoveredSpanId, setHoveredSpanId] = useState<string | null>(null);
+  const [zoom, setZoom] = useState(1);
+  const timelineRef = useRef<HTMLDivElement>(null);
+
+  // Build span tree for details panel
+  const spanTree = useMemo(() => {
+    return buildSpanTree(spans);
+  }, [spans]);
+
+  // Group spans by turn and calculate turn boundaries
+  const turnBoundaries = useMemo(() => {
+    return traces.map((trace, index) => {
+      const data = traceData.get(trace.trace_id);
+      if (!data || data.spans.length === 0) {
+        // Fallback if no spans: use trace start time for both start and end
+        return {
+          traceId: trace.trace_id,
+          turnIndex: index,
+          start: trace.start_time_unix_nano,
+          end: trace.start_time_unix_nano,
+          userInput: data?.trace.userInput ?? trace.userInput,
+          llmOutput: data?.trace.llmOutput ?? trace.llmOutput,
+          spans: [],
+        };
+      }
+
+      const startTimes = data.spans.map((s) => s.start_time_unix_nano);
+      const endTimes = data.spans.map((s) => s.end_time_unix_nano);
+      const start =
+        startTimes.length > 0
+          ? Math.min(...startTimes)
+          : trace.start_time_unix_nano;
+      const end =
+        endTimes.length > 0
+          ? Math.max(...endTimes)
+          : trace.start_time_unix_nano;
+
+      return {
+        traceId: trace.trace_id,
+        turnIndex: index,
+        start,
+        end,
+        userInput: data.trace.userInput,
+        llmOutput: data.trace.llmOutput,
+        spans: data.spans,
+      };
+    });
+  }, [traces, traceData]);
+
+  // Helper to find span node in tree
+  const findSpanNode = (nodes: SpanNode[], spanId: string): SpanNode | null => {
+    for (const node of nodes) {
+      if (node.span_id === spanId) return node;
+      const found = findSpanNode(node.children, spanId);
+      if (found) return found;
+    }
+    return null;
+  };
+
+  // Calculate cumulative width for each turn
+  const turnLayouts = useMemo(() => {
+    let cumulativePercent = 0;
+    return turnBoundaries.map((turn) => {
+      const turnDurationMs = (turn.end - turn.start) / 1_000_000;
+      // Each turn gets proportional width based on its duration
+      const totalDuration = turnBoundaries.reduce(
+        (sum, t) => sum + (t.end - t.start),
+        0,
+      );
+      const widthPercent = ((turn.end - turn.start) / totalDuration) * 100;
+
+      const layout = {
+        traceId: turn.traceId,
+        leftPercent: cumulativePercent,
+        widthPercent,
+        start: turn.start,
+        end: turn.end,
+        turnDurationMs,
+        userInput: turn.userInput,
+        llmOutput: turn.llmOutput,
+      };
+
+      cumulativePercent += widthPercent;
+      return layout;
+    });
+  }, [turnBoundaries]);
+
+  // Calculate global timeline bounds
+  const globalStart = useMemo(() => {
+    if (spans.length === 0) return 0;
+    return Math.min(...spans.map((s) => s.start_time_unix_nano));
+  }, [spans]);
+
+  const globalEnd = useMemo(() => {
+    if (spans.length === 0) return 0;
+    return Math.max(...spans.map((s) => s.end_time_unix_nano));
+  }, [spans]);
+
+  const totalDurationMs = (globalEnd - globalStart) / 1_000_000;
+
+  // Zoom handler (scroll is now native)
+  const handleWheel = useCallback((e: React.WheelEvent) => {
+    if (e.ctrlKey || e.metaKey) {
+      e.preventDefault();
+      // Zoom
+      const zoomDelta = e.deltaY > 0 ? 0.9 : 1.1;
+      setZoom((prev) => Math.max(1, Math.min(prev * zoomDelta, 10)));
+    }
+    // Otherwise let browser handle natural scroll
+  }, []);
+
+  // Flatten span tree while preserving hierarchy information
+  const flattenSpanTree = (
+    nodes: SpanNode[],
+    depth = 0,
+  ): Array<{ node: SpanNode; depth: number }> => {
+    const result: Array<{ node: SpanNode; depth: number }> = [];
+    for (const node of nodes) {
+      result.push({ node, depth });
+      if (node.children.length > 0) {
+        result.push(...flattenSpanTree(node.children, depth + 1));
+      }
+    }
+    return result;
+  };
+
+  // Get flattened spans with hierarchy information
+  const flatSpans = useMemo(() => {
+    const flattened = flattenSpanTree(spanTree);
+
+    // Filter to only include spans that:
+    // 1. Exist in the spans array
+    // 2. Have a valid turn in turnLayouts (so they can be rendered)
+    const filtered = flattened.filter(({ node }) => {
+      const span = spans.find((s) => s.span_id === node.span_id);
+      if (!span) {
+        return false;
+      }
+
+      // Check if this span has a valid turn
+      const turn = turnLayouts[span.turnIndex];
+      return turn !== undefined;
+    });
+
+    return filtered;
+  }, [spanTree, spans, turnLayouts]);
+
+  if (spans.length === 0) {
+    return (
+      <div className="text-muted-foreground text-sm">
+        No spans in this session
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <div className="space-y-4">
+        {/* Zoom controls */}
+        <div className="flex items-center gap-4 text-sm">
+          <button
+            onClick={() => setZoom((prev) => Math.max(1, prev * 0.8))}
+            className="px-3 py-1 border border-border rounded hover:bg-muted"
+          >
+            Zoom Out
+          </button>
+          <span className="text-muted-foreground">
+            {(zoom * 100).toFixed(0)}%
+          </span>
+          <button
+            onClick={() => setZoom((prev) => Math.min(10, prev * 1.2))}
+            className="px-3 py-1 border border-border rounded hover:bg-muted"
+          >
+            Zoom In
+          </button>
+          <button
+            onClick={() => setZoom(1)}
+            className="px-3 py-1 border border-border rounded hover:bg-muted"
+          >
+            Reset
+          </button>
+          <span className="text-muted-foreground text-xs ml-4">
+            Scroll horizontally to pan • Ctrl+Scroll to zoom
+          </span>
+        </div>
+
+        {/* Timeline container */}
+        <div
+          ref={timelineRef}
+          className="border border-border rounded-lg overflow-hidden bg-card flex"
+          onWheel={handleWheel}
+        >
+          {/* Fixed left column - processes labels */}
+          <div className="w-[276px] flex-shrink-0 flex flex-col border-r border-border">
+            {/* Spacer to match message bubbles section height */}
+            <div className="h-40 border-b-2 border-border bg-white dark:bg-gray-900" />
+
+            {/* Processes label */}
+            <div className="h-6 border-b border-border bg-white dark:bg-gray-900 px-4 py-1 flex items-center">
+              <span className="text-xs font-semibold">Processes</span>
+            </div>
+
+            {/* Span labels */}
+            <div className="flex-1 bg-white dark:bg-gray-900">
+              {flatSpans.map(({ node, depth }) => {
+                const span = spans.find((s) => s.span_id === node.span_id);
+                // This should never be null now due to filtering
+                if (!span) {
+                  // Render empty placeholder to maintain alignment
+                  return (
+                    <div
+                      key={`missing-${node.span_id}`}
+                      className="h-[38px] border-b border-border"
+                    />
+                  );
+                }
+
+                const attrs = parseAttributes(span.attributes);
+                const spanType = detectSpanType(span);
+
+                let displayName = span.name;
+                if (span.name === "agent.tool_call") {
+                  const toolName = attrs["tool.name"] as string;
+                  if (toolName === "Task") {
+                    try {
+                      const toolInput = attrs["tool.input"];
+                      const input =
+                        typeof toolInput === "string"
+                          ? JSON.parse(toolInput)
+                          : toolInput;
+                      if (input?.agentName) {
+                        displayName = `Subagent (${input.agentName})`;
+                      }
+                    } catch {
+                      displayName = toolName || span.name;
+                    }
+                  } else {
+                    displayName = toolName || span.name;
+                  }
+                } else if (
+                  span.name.startsWith("chat") &&
+                  "gen_ai.input.messages" in attrs
+                ) {
+                  displayName =
+                    (attrs["gen_ai.request.model"] as string) || span.name;
+                }
+
+                return (
+                  <div
+                    key={span.span_id}
+                    className={`h-[38px] px-3 py-2 border-b border-border flex items-center gap-2 cursor-pointer transition-colors ${
+                      hoveredSpanId === span.span_id ? "bg-muted" : ""
+                    }`}
+                    style={{ paddingLeft: `${12 + depth * 20}px` }}
+                    onMouseEnter={() => setHoveredSpanId(span.span_id)}
+                    onMouseLeave={() => setHoveredSpanId(null)}
+                    onClick={() => setSelectedSpan(node)}
+                  >
+                    <SpanIcon type={spanType} className="w-4 h-4 shrink-0" />
+                    <span className="text-xs truncate">{displayName}</span>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+
+          {/* Scrollable right side - message bubbles + timeline */}
+          <div
+            className="flex-1 overflow-x-auto overflow-y-hidden"
+            style={{ background: "#404040" }}
+          >
+            <div
+              className="relative"
+              style={{ width: `${zoom * 100}%`, minWidth: "100%" }}
+            >
+              {/* Message bubbles section */}
+              <div
+                className="h-40 relative border-b-2 border-border"
+                style={{
+                  background: "#fafafa",
+                  width: "100%",
+                  paddingLeft: "16px",
+                }}
+              >
+                {traces.map((trace, index) => {
+                  const data = traceData.get(trace.trace_id);
+                  if (!data) return null;
+
+                  const turn = turnLayouts[index];
+                  if (!turn) return null;
+
+                  // User message positioned at start of turn (0ms)
+                  const userPos = {
+                    left: turn.leftPercent * zoom,
+                  };
+
+                  // Agent message positioned at end of turn (100% of turn width)
+                  const agentPos = {
+                    left: (turn.leftPercent + turn.widthPercent) * zoom,
+                  };
+
+                  return (
+                    <div key={trace.trace_id}>
+                      {/* User message bubble - positioned at top, aligned to start of turn */}
+                      <div
+                        className="absolute top-4"
+                        style={{ left: `calc(${userPos.left}% + 16px)` }}
+                      >
+                        <div className="relative">
+                          <div className="bg-blue-100 dark:bg-blue-900 px-3 py-2 rounded-lg shadow-sm max-w-xs">
+                            <div className="text-xs font-medium text-blue-900 dark:text-blue-100 truncate">
+                              User
+                            </div>
+                            <div className="text-[11px] text-blue-800 dark:text-blue-200 truncate">
+                              {data.trace.userInput}
+                            </div>
+                          </div>
+                          {/* Line extending all the way to timeline, positioned to connect with bubble */}
+                          <div
+                            className="absolute top-full w-0.5 bg-blue-400"
+                            style={{ height: "94px", left: "24px" }}
+                          />
+                        </div>
+                      </div>
+
+                      {/* Agent message bubbles - group chat messages with their tool calls */}
+                      {(() => {
+                        // Group messages: each chat message with its following tool calls
+                        const messageGroups: Array<{
+                          chatMessage: (typeof data.trace.agentMessages)[0];
+                          chatIndex: number;
+                          toolCalls: Array<{
+                            message: (typeof data.trace.agentMessages)[0];
+                            index: number;
+                          }>;
+                        }> = [];
+
+                        let currentChatMessage:
+                          | (typeof data.trace.agentMessages)[0]
+                          | null = null;
+                        let currentChatIndex = -1;
+                        let currentToolCalls: Array<{
+                          message: (typeof data.trace.agentMessages)[0];
+                          index: number;
+                        }> = [];
+
+                        data.trace.agentMessages.forEach((msg, idx) => {
+                          if (msg.type === "chat") {
+                            // Save previous group if exists
+                            if (currentChatMessage) {
+                              messageGroups.push({
+                                chatMessage: currentChatMessage,
+                                chatIndex: currentChatIndex,
+                                toolCalls: currentToolCalls,
+                              });
+                            }
+                            // Start new group
+                            currentChatMessage = msg;
+                            currentChatIndex = idx;
+                            currentToolCalls = [];
+                          } else if (msg.type === "tool_call") {
+                            // Add to current group
+                            currentToolCalls.push({ message: msg, index: idx });
+                          }
+                        });
+
+                        // Don't forget the last group
+                        if (currentChatMessage) {
+                          messageGroups.push({
+                            chatMessage: currentChatMessage,
+                            chatIndex: currentChatIndex,
+                            toolCalls: currentToolCalls,
+                          });
+                        }
+
+                        return messageGroups.map((group) => {
+                          // Calculate position based on chat message timestamp
+                          const messageRelativePos =
+                            (group.chatMessage.timestamp - turn.start) /
+                            (turn.end - turn.start);
+                          const messagePosPercent =
+                            (turn.leftPercent +
+                              messageRelativePos * turn.widthPercent) *
+                            zoom;
+
+                          return (
+                            <div
+                              key={`${trace.trace_id}-agent-${group.chatIndex}`}
+                              className="absolute bottom-4"
+                              style={{
+                                left: `calc(${messagePosPercent}% + 16px)`,
+                                transform: "translateX(-100%)",
+                              }}
+                              title={group.chatMessage.content}
+                            >
+                              <div className="relative">
+                                {/* Chat message bubble */}
+                                <div className="bg-gray-100 dark:bg-gray-800 px-3 py-2 rounded-lg shadow-sm max-w-xs">
+                                  <div className="text-xs font-medium text-gray-900 dark:text-gray-100 truncate">
+                                    Agent
+                                  </div>
+                                  <div className="text-[11px] text-gray-700 dark:text-gray-300 truncate">
+                                    {group.chatMessage.content}
+                                  </div>
+                                </div>
+
+                                {/* Tool call badges below */}
+                                {group.toolCalls.length > 0 && (
+                                  <div className="mt-1 flex flex-wrap gap-1 max-w-xs">
+                                    {group.toolCalls.map((tool) => (
+                                      <div
+                                        key={`${trace.trace_id}-tool-${tool.index}`}
+                                        className="inline-flex items-center gap-1 bg-blue-100 dark:bg-blue-900 border border-blue-300 dark:border-blue-700 px-2 py-0.5 rounded text-[10px] font-mono text-blue-800 dark:text-blue-200"
+                                        title={`Tool: ${tool.message.toolName}`}
+                                      >
+                                        <span className="text-blue-600 dark:text-blue-400">
+                                          ⚡
+                                        </span>
+                                        {tool.message.content}
+                                      </div>
+                                    ))}
+                                  </div>
+                                )}
+
+                                {/* Line extending to timeline - positioned to the right */}
+                                <div
+                                  className="absolute top-full w-0.5 bg-gray-400"
+                                  style={{
+                                    height: "94px",
+                                    right: "24px",
+                                  }}
+                                />
+                              </div>
+                            </div>
+                          );
+                        });
+                      })()}
+                    </div>
+                  );
+                })}
+              </div>
+
+              {/* Time markers */}
+              <div
+                className="h-6 relative border-b border-border w-full"
+                style={{ background: "#f5f5f5", paddingLeft: "16px" }}
+              >
+                {turnLayouts.map((turn, turnIndex) => {
+                  const turnDurationMs = turn.turnDurationMs;
+                  const isLastTurn = turnIndex === turnLayouts.length - 1;
+
+                  return (
+                    <div key={turn.traceId}>
+                      {[0, 0.25, 0.5, 0.75, 1].map((fraction) => {
+                        // Skip the end marker (1.0) for all turns except the last
+                        // This prevents overlap with the next turn's 0ms marker
+                        if (fraction === 1 && !isLastTurn) {
+                          return null;
+                        }
+
+                        const timeMs = turnDurationMs * fraction;
+                        const label =
+                          timeMs < 1000
+                            ? `${timeMs.toFixed(0)}ms`
+                            : `${(timeMs / 1000).toFixed(1)}s`;
+
+                        const leftPos =
+                          (turn.leftPercent + fraction * turn.widthPercent) *
+                          zoom;
+
+                        return (
+                          <div
+                            key={`${turn.traceId}-${fraction}`}
+                            className="absolute text-[10px] text-muted-foreground top-1"
+                            style={{ left: `calc(${leftPos}% + 16px)` }}
+                          >
+                            {label}
+                          </div>
+                        );
+                      })}
+                    </div>
+                  );
+                })}
+              </div>
+
+              {/* Timeline area with rows */}
+              <div
+                className="relative w-full"
+                style={{
+                  minHeight: `${flatSpans.length * 38}px`,
+                  background: "#404040",
+                }}
+              >
+                {/* Turn dividers - extending through timeline to turn labels */}
+                {turnLayouts.map((turn, turnIndex) => {
+                  if (turnIndex === 0) return null; // No divider before first turn
+                  const dividerPos = turn.leftPercent * zoom;
+                  return (
+                    <div
+                      key={`divider-${turn.traceId}`}
+                      className="absolute w-1 bg-gray-600"
+                      style={{
+                        left: `${dividerPos}%`,
+                        marginLeft: "16px",
+                        top: "0", // Start at top of timeline area
+                        height: `calc(100% + 48px)`, // Extend through timeline + turn labels section (48px)
+                      }}
+                    />
+                  );
+                })}
+
+                {/* Span bars */}
+                {flatSpans.map(({ node }, visualIndex) => {
+                  const span = spans.find((s) => s.span_id === node.span_id);
+                  // This should never be null now due to filtering
+                  if (!span) {
+                    // Render empty placeholder to maintain alignment
+                    return (
+                      <div
+                        key={`missing-${node.span_id}`}
+                        className="absolute h-8"
+                        style={{ top: `${visualIndex * 38 + 5}px` }}
+                      />
+                    );
+                  }
+
+                  const attrs = parseAttributes(span.attributes);
+                  const spanType = detectSpanType(span);
+
+                  // Find which turn this span belongs to
+                  const turn = turnLayouts[span.turnIndex];
+                  if (!turn) {
+                    // Render empty placeholder to maintain alignment
+                    return (
+                      <div
+                        key={`no-turn-${span.span_id}`}
+                        className="absolute h-8"
+                        style={{ top: `${visualIndex * 38 + 5}px` }}
+                      />
+                    );
+                  }
+
+                  // Calculate position within turn
+                  const relativeStart =
+                    (span.start_time_unix_nano - turn.start) /
+                    (turn.end - turn.start);
+                  const relativeWidth =
+                    (span.end_time_unix_nano - span.start_time_unix_nano) /
+                    (turn.end - turn.start);
+                  const leftPos =
+                    (turn.leftPercent + relativeStart * turn.widthPercent) *
+                    zoom;
+                  const width = relativeWidth * turn.widthPercent * zoom;
+
+                  const barColor =
+                    spanType === "chat"
+                      ? "bg-orange-500"
+                      : spanType === "tool_call"
+                        ? "bg-blue-500"
+                        : spanType === "subagent"
+                          ? "bg-purple-500"
+                          : "bg-blue-500";
+
+                  const durationMs =
+                    (span.end_time_unix_nano - span.start_time_unix_nano) /
+                    1_000_000;
+
+                  return (
+                    <div
+                      key={span.span_id}
+                      className={`absolute h-6 ${barColor} rounded cursor-pointer transition-all flex items-center justify-start px-2 ${
+                        hoveredSpanId === span.span_id ? "brightness-110" : ""
+                      }`}
+                      style={{
+                        left: `calc(${leftPos}% + 16px)`,
+                        width: `calc(${Math.max(width, 0.5)}% - 16px)`,
+                        top: `${visualIndex * 38 + 7}px`,
+                      }}
+                      onMouseEnter={() => setHoveredSpanId(span.span_id)}
+                      onMouseLeave={() => setHoveredSpanId(null)}
+                      onClick={() => {
+                        setSelectedSpan(node);
+                      }}
+                    >
+                      <span className="text-[11px] text-white font-medium whitespace-nowrap">
+                        {durationMs.toFixed(2)}ms
+                      </span>
+                    </div>
+                  );
+                })}
+              </div>
+
+              {/* Turn labels at bottom */}
+              <div
+                className="h-12 relative w-full"
+                style={{ background: "#404040", paddingLeft: "16px" }}
+              >
+                {turnLayouts.map((turn, index) => {
+                  const leftPos = turn.leftPercent * zoom;
+
+                  return (
+                    <div
+                      key={turn.traceId}
+                      className="absolute bottom-2"
+                      style={{
+                        left: `calc(${leftPos}% + 20px)`,
+                      }}
+                    >
+                      <span
+                        className="font-semibold uppercase whitespace-nowrap"
+                        style={{
+                          fontFamily: "Inter, sans-serif",
+                          fontSize: "10px",
+                          letterSpacing: "0.4px",
+                          color: "#ffffff",
+                          opacity: 0.2,
+                        }}
+                      >
+                        Turn {index + 1}
+                      </span>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Session metadata */}
+        <div className="text-sm text-muted-foreground space-y-1">
+          <div>
+            Total turns: <span className="font-medium">{traces.length}</span>
+          </div>
+          <div>
+            Total spans: <span className="font-medium">{spans.length}</span>
+          </div>
+        </div>
+      </div>
+
+      <SpanDetailsPanel
+        span={selectedSpan}
+        onClose={() => setSelectedSpan(null)}
+        allSpans={spanTree}
+      />
+    </>
+  );
+}