@townco/debugger 0.1.5 → 0.1.6

package/src/components/SpanTimeline.tsx

@@ -0,0 +1,450 @@
+import { useState } from "react";
+import { detectSpanType } from "../lib/spanTypeDetector";
+import { calculateTimelineBar } from "../lib/timelineCalculator";
+import type { Span, SpanNode } from "../types";
+import { AttributeViewer } from "./AttributeViewer";
+import { SpanDetailsPanel } from "./SpanDetailsPanel";
+import { SpanIcon } from "./SpanIcon";
+
+function parseAttributes(attrs: string | null): Record<string, unknown> {
+  if (!attrs) return {};
+  try {
+    return JSON.parse(attrs);
+  } catch {
+    return {};
+  }
+}
+
+export function buildSpanTree(spans: Span[]): SpanNode[] {
+  const spanMap = new Map<string, SpanNode>();
+  const roots: SpanNode[] = [];
+
+  // First pass: create nodes
+  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 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) {
+        node.depth = parent.depth + 1;
+        parent.children.push(node);
+      }
+    } else {
+      roots.push(node);
+    }
+  }
+
+  return roots;
+}
+
+interface SpanRowProps {
+  span: SpanNode;
+  traceStart: number;
+  traceEnd: number;
+}
+
+function SpanRow({ span, traceStart, traceEnd }: SpanRowProps) {
+  const [expanded, setExpanded] = useState(false);
+  const [showRaw, setShowRaw] = useState(false);
+
+  const attrs = parseAttributes(span.attributes);
+  const spanType = detectSpanType(span);
+
+  // Determine span type
+  const isToolCall = span.name === "agent.tool_call";
+  const isChatSpan =
+    span.name.startsWith("chat") && "gen_ai.input.messages" in attrs;
+  const isSpecialSpan = isToolCall || isChatSpan;
+
+  // Helper to get display name for tool calls (with special handling for Task/subagent)
+  const getToolDisplayName = (): string => {
+    const toolName = attrs["tool.name"] as string;
+    if (toolName !== "Task") return toolName || span.name;
+
+    // Parse tool.input to extract agentName for subagent spans
+    try {
+      const toolInput = attrs["tool.input"];
+      const input =
+        typeof toolInput === "string" ? JSON.parse(toolInput) : toolInput;
+      if (input?.agentName) {
+        return `Subagent (${input.agentName})`;
+      }
+    } catch {
+      // Fall back to "Task" if parsing fails
+    }
+    return toolName || span.name;
+  };
+
+  // Get display name based on span type
+  const displayName = isToolCall
+    ? getToolDisplayName()
+    : isChatSpan
+      ? (attrs["gen_ai.request.model"] as string) || span.name
+      : span.name;
+
+  const hasDetails =
+    (span.attributes && span.attributes !== "{}") ||
+    (span.events && span.events !== "[]") ||
+    (span.resource_attributes && span.resource_attributes !== "{}");
+
+  // Calculate timeline bar position and width
+  const timeline = calculateTimelineBar(
+    span.start_time_unix_nano,
+    span.end_time_unix_nano,
+    traceStart,
+    traceEnd,
+  );
+
+  // Color for timeline bar based on span type
+  const timelineColor =
+    spanType === "chat"
+      ? "bg-blue-500/30"
+      : spanType === "tool_call"
+        ? "bg-purple-500/30"
+        : spanType === "subagent"
+          ? "bg-green-500/30"
+          : "bg-gray-500/30";
+
+  return (
+    <div>
+      <div
+        className={`py-1 px-2 ${hasDetails ? "cursor-pointer" : ""}`}
+        style={{ paddingLeft: span.depth * 20 + 8 }}
+        onClick={() => hasDetails && setExpanded(!expanded)}
+      >
+        <div className="flex items-center hover:bg-muted rounded">
+          <SpanIcon type={spanType} className="mr-2" />
+          <span className="font-medium flex-1 truncate">{displayName}</span>
+          <span className="text-muted-foreground text-sm ml-2">
+            {span.durationMs.toFixed(2)}ms
+          </span>
+        </div>
+
+        {/* Timeline bar */}
+        <div
+          className="mt-1 h-2 bg-muted/30 rounded relative"
+          style={{ marginLeft: span.depth * 20 }}
+        >
+          <div
+            className={`absolute h-full rounded ${timelineColor}`}
+            style={{
+              left: `${timeline.leftPercent}%`,
+              width: `${timeline.widthPercent}%`,
+            }}
+            title={`Start: ${new Date(span.start_time_unix_nano / 1_000_000).toLocaleString()}\nEnd: ${new Date(span.end_time_unix_nano / 1_000_000).toLocaleString()}`}
+          />
+        </div>
+      </div>
+
+      {expanded && (
+        <div
+          className="py-2 px-4 bg-muted/50 rounded mb-1"
+          style={{ marginLeft: span.depth * 20 + 28 }}
+        >
+          <div className="text-xs text-muted-foreground mb-2">
+            {span.span_id}
+          </div>
+
+          {/* Tool call span: show input/output */}
+          {isToolCall && (
+            <>
+              <AttributeViewer
+                label="Input"
+                data={attrs["tool.input"] as string}
+              />
+              <AttributeViewer
+                label="Output"
+                data={attrs["tool.output"] as string}
+              />
+            </>
+          )}
+
+          {/* Chat span: show system instructions, input/output messages */}
+          {isChatSpan && (
+            <>
+              <AttributeViewer
+                label="System Instructions"
+                data={attrs["gen_ai.system_instructions"] as string}
+              />
+              <AttributeViewer
+                label="Input Messages"
+                data={attrs["gen_ai.input.messages"] as string}
+              />
+              <AttributeViewer
+                label="Output Messages"
+                data={attrs["gen_ai.output.messages"] as string}
+              />
+            </>
+          )}
+
+          {/* For special spans, show raw attributes collapsed; for default, show them directly */}
+          {isSpecialSpan ? (
+            <div className="mt-2">
+              <button
+                type="button"
+                className="text-xs text-muted-foreground hover:text-foreground"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setShowRaw(!showRaw);
+                }}
+              >
+                {showRaw ? "▼ Hide" : "▶ Show"} raw attributes
+              </button>
+              {showRaw && (
+                <div className="mt-2">
+                  <AttributeViewer label="Attributes" data={span.attributes} />
+                  <AttributeViewer label="Events" data={span.events} />
+                  <AttributeViewer
+                    label="Resource"
+                    data={span.resource_attributes}
+                  />
+                </div>
+              )}
+            </div>
+          ) : (
+            <>
+              <AttributeViewer label="Attributes" data={span.attributes} />
+              <AttributeViewer label="Events" data={span.events} />
+              <AttributeViewer
+                label="Resource"
+                data={span.resource_attributes}
+              />
+            </>
+          )}
+
+          {span.status_message && (
+            <div className="text-xs">
+              <span className="text-muted-foreground uppercase font-medium">
+                Status Message
+              </span>
+              <div className="text-red-500">{span.status_message}</div>
+            </div>
+          )}
+        </div>
+      )}
+
+      {span.children.map((child) => (
+        <SpanRow
+          key={child.span_id}
+          span={child}
+          traceStart={traceStart}
+          traceEnd={traceEnd}
+        />
+      ))}
+    </div>
+  );
+}
+
+interface SpanTimelineProps {
+  spans: Span[];
+  traceStart: number;
+  traceEnd: number;
+}
+
+export function SpanTimeline({
+  spans,
+  traceStart,
+  traceEnd,
+}: SpanTimelineProps) {
+  const tree = buildSpanTree(spans);
+  const traceDurationMs = (traceEnd - traceStart) / 1_000_000;
+  const [selectedSpan, setSelectedSpan] = useState<SpanNode | null>(null);
+
+  if (tree.length === 0) {
+    return <div className="text-muted-foreground text-sm">No spans</div>;
+  }
+
+  // Generate time markers for the timeline header
+  const timeMarkers = [0, 0.25, 0.5, 0.75, 1].map((fraction) => {
+    const timeMs = traceDurationMs * fraction;
+    return timeMs < 1000
+      ? `${timeMs.toFixed(0)}ms`
+      : `${(timeMs / 1000).toFixed(1)}s`;
+  });
+
+  return (
+    <>
+      <div className="border border-border rounded-lg overflow-hidden bg-card">
+        {/* Table layout */}
+        <div className="flex">
+          {/* Left column: Process names */}
+          <div className="w-[276px] border-r border-border flex-shrink-0">
+            {/* Header */}
+            <div className="h-6 px-4 py-1 bg-muted border-b border-border flex items-center">
+              <span className="text-xs font-medium text-foreground">
+                Processes
+              </span>
+            </div>
+            {/* Rows */}
+            {tree.map((span) => (
+              <RenderSpanTreeRow
+                key={span.span_id}
+                span={span}
+                onSpanClick={setSelectedSpan}
+              />
+            ))}
+          </div>
+
+          {/* Right column: Timeline */}
+          <div className="flex-1 overflow-x-auto">
+            {/* Timeline header with time markers */}
+            <div className="h-6 px-4 py-1 bg-muted border-b border-border flex items-center text-[10px] text-muted-foreground gap-16">
+              {timeMarkers.map((marker, i) => (
+                <span key={i} className="w-[260px]">
+                  {marker}
+                </span>
+              ))}
+            </div>
+            {/* Timeline rows */}
+            <div className="relative">
+              {tree.map((span) => (
+                <RenderSpanTreeTimeline
+                  key={span.span_id}
+                  span={span}
+                  traceStart={traceStart}
+                  traceEnd={traceEnd}
+                  onSpanClick={setSelectedSpan}
+                />
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <SpanDetailsPanel
+        span={selectedSpan}
+        onClose={() => setSelectedSpan(null)}
+        allSpans={tree}
+      />
+    </>
+  );
+}
+
+// Render the left column (process names) recursively
+function RenderSpanTreeRow({
+  span,
+  onSpanClick,
+}: {
+  span: SpanNode;
+  onSpanClick: (span: SpanNode) => void;
+}) {
+  const attrs = parseAttributes(span.attributes);
+  const spanType = detectSpanType(span);
+
+  const isToolCall = span.name === "agent.tool_call";
+  const isChatSpan =
+    span.name.startsWith("chat") && "gen_ai.input.messages" in attrs;
+
+  const getToolDisplayName = (): string => {
+    const toolName = attrs["tool.name"] as string;
+    if (toolName !== "Task") return toolName || span.name;
+
+    try {
+      const toolInput = attrs["tool.input"];
+      const input =
+        typeof toolInput === "string" ? JSON.parse(toolInput) : toolInput;
+      if (input?.agentName) {
+        return `Subagent (${input.agentName})`;
+      }
+    } catch {
+      // Fall back
+    }
+    return toolName || span.name;
+  };
+
+  const displayName = isToolCall
+    ? getToolDisplayName()
+    : isChatSpan
+      ? (attrs["gen_ai.request.model"] as string) || span.name
+      : span.name;
+
+  return (
+    <>
+      <div
+        className="h-[38px] px-4 py-2 border-b border-border flex items-center gap-2 hover:bg-muted/50 cursor-pointer"
+        style={{ paddingLeft: `${span.depth * 20 + 16}px` }}
+        onClick={() => onSpanClick(span)}
+      >
+        <SpanIcon type={spanType} className="shrink-0" />
+        <span className="text-sm truncate flex-1">{displayName}</span>
+      </div>
+      {span.children.map((child) => (
+        <RenderSpanTreeRow
+          key={child.span_id}
+          span={child}
+          onSpanClick={onSpanClick}
+        />
+      ))}
+    </>
+  );
+}
+
+// Render the right column (timeline bars) recursively
+function RenderSpanTreeTimeline({
+  span,
+  traceStart,
+  traceEnd,
+  onSpanClick,
+}: {
+  span: SpanNode;
+  traceStart: number;
+  traceEnd: number;
+  onSpanClick: (span: SpanNode) => void;
+}) {
+  const spanType = detectSpanType(span);
+  const timeline = calculateTimelineBar(
+    span.start_time_unix_nano,
+    span.end_time_unix_nano,
+    traceStart,
+    traceEnd,
+  );
+
+  const barColor =
+    spanType === "chat"
+      ? "bg-orange-400"
+      : spanType === "tool_call"
+        ? "bg-purple-500"
+        : spanType === "subagent"
+          ? "bg-purple-500"
+          : "bg-blue-400";
+
+  return (
+    <>
+      <div className="h-[38px] border-b border-border relative flex items-center px-4 hover:bg-muted/50 cursor-pointer">
+        <div
+          className={`absolute h-[18px] rounded ${barColor} flex items-center px-1`}
+          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
+          </span>
+        </div>
+      </div>
+      {span.children.map((child) => (
+        <RenderSpanTreeTimeline
+          key={child.span_id}
+          span={child}
+          traceStart={traceStart}
+          traceEnd={traceEnd}
+          onSpanClick={onSpanClick}
+        />
+      ))}
+    </>
+  );
+}

package/src/components/SpanTree.tsx

@@ -1,6 +1,7 @@
 import { useState } from "react";
 import type { Span, SpanNode } from "../types";
 import { AttributeViewer } from "./AttributeViewer";
+import { SpanDetailsPanel } from "./SpanDetailsPanel";
 
 function parseAttributes(attrs: string | null): Record<string, unknown> {
   if (!attrs) return {};
@@ -45,7 +46,13 @@ export function buildSpanTree(spans: Span[]): SpanNode[] {
   return roots;
 }
 
-function SpanRow({ span }: { span: SpanNode }) {
+function SpanRow({
+  span,
+  onSpanClick,
+}: {
+  span: SpanNode;
+  onSpanClick: (span: SpanNode) => void;
+}) {
   const [expanded, setExpanded] = useState(false);
   const [showRaw, setShowRaw] = useState(false);
 
@@ -100,7 +107,7 @@ function SpanRow({ span }: { span: SpanNode }) {
       <div
         className={`flex items-center py-1 px-2 hover:bg-muted rounded ${hasDetails ? "cursor-pointer" : ""}`}
         style={{ paddingLeft: span.depth * 20 + 8 }}
-        onClick={() => hasDetails && setExpanded(!expanded)}
+        onClick={() => onSpanClick(span)}
       >
         <span className={`${statusColor} mr-2`}>●</span>
         <span className="font-medium flex-1 truncate">{displayName}</span>
@@ -197,7 +204,7 @@ function SpanRow({ span }: { span: SpanNode }) {
       )}
 
       {span.children.map((child) => (
-        <SpanRow key={child.span_id} span={child} />
+        <SpanRow key={child.span_id} span={child} onSpanClick={onSpanClick} />
       ))}
     </div>
   );
@@ -209,16 +216,29 @@ interface SpanTreeProps {
 
 export function SpanTree({ spans }: SpanTreeProps) {
   const tree = buildSpanTree(spans);
+  const [selectedSpan, setSelectedSpan] = useState<SpanNode | null>(null);
 
   if (tree.length === 0) {
     return <div className="text-muted-foreground text-sm">No spans</div>;
   }
 
   return (
-    <div className="font-mono text-sm">
-      {tree.map((span) => (
-        <SpanRow key={span.span_id} span={span} />
-      ))}
-    </div>
+    <>
+      <div className="font-mono text-sm">
+        {tree.map((span) => (
+          <SpanRow
+            key={span.span_id}
+            span={span}
+            onSpanClick={setSelectedSpan}
+          />
+        ))}
+      </div>
+
+      <SpanDetailsPanel
+        span={selectedSpan}
+        onClose={() => setSelectedSpan(null)}
+        allSpans={tree}
+      />
+    </>
   );
 }