@townco/debugger 0.1.67 → 0.1.69

package/src/components/SpansLogsList.tsx

@@ -0,0 +1,477 @@
+import { useEffect, useRef } from "react";
+import { cn } from "@/lib/utils";
+import {
+  formatDuration,
+  getSpanDurationMs,
+  getSpanTokens,
+  type Segment,
+} from "../lib/segmentation";
+import { detectSpanType } from "../lib/spanTypeDetector";
+import type { Log, Span, SpanNode } from "../types";
+import { SpanIcon } from "./SpanIcon";
+
+interface SpansLogsListProps {
+  segments: Segment[];
+  viewMode: "spans" | "logs";
+  highlightedSpanId: string | null;
+  /** Set of span IDs that should be highlighted (from selected conversation item) */
+  selectedSpanIds: Set<string>;
+  /** Set of log IDs that should be highlighted (from selected conversation item) */
+  selectedLogIds: Set<number>;
+  onSpanHover: (spanId: string | null) => void;
+  onSpanClick: (span: SpanNode) => void;
+  onLogClick: (log: Log) => void;
+  /** Ref to scroll to a specific span */
+  scrollToSpanId: string | null;
+  /** Ref to scroll to a specific log */
+  scrollToLogId: number | null;
+  /** The currently selected item ID (span_id or log id) for highlighting */
+  selectedItemId: string | null;
+}
+
+function parseAttributes(attrs: string | null): Record<string, unknown> {
+  if (!attrs) return {};
+  try {
+    return JSON.parse(attrs);
+  } catch {
+    return {};
+  }
+}
+
+/**
+ * Get a short identifier from a span_id (last 4 characters)
+ */
+function getShortId(spanId: string): string {
+  return spanId.slice(-4);
+}
+
+/**
+ * Check if a span is a subagent (Task) span
+ */
+function isSubagentSpan(span: Span): boolean {
+  if (span.name !== "agent.tool_call") return false;
+  const attrs = parseAttributes(span.attributes);
+  const toolName = attrs["tool.name"];
+
+  if (typeof toolName !== "string") return false;
+
+  // Check for Task or any tool name containing "subagent" (case-insensitive)
+  const isSubagent =
+    toolName === "Task" || toolName.toLowerCase().includes("subagent");
+
+  return isSubagent;
+}
+
+interface SubagentInfo {
+  spanId: string;
+  shortId: string;
+}
+
+/**
+ * Build a map of span_id -> subagent info for all spans that are descendants of a Task span
+ */
+function buildSubagentMap(spans: Span[]): Map<string, SubagentInfo> {
+  const subagentMap = new Map<string, SubagentInfo>();
+
+  // Find all Task (subagent) spans
+  const taskSpans = spans.filter(isSubagentSpan);
+
+  // For each Task span, mark it and all its descendants
+  for (const taskSpan of taskSpans) {
+    const subagentInfo: SubagentInfo = {
+      spanId: taskSpan.span_id,
+      shortId: getShortId(taskSpan.span_id),
+    };
+
+    // Mark the Task span itself
+    subagentMap.set(taskSpan.span_id, subagentInfo);
+
+    // Find all descendants using BFS
+    const queue: string[] = [taskSpan.span_id];
+    while (queue.length > 0) {
+      const currentId = queue.shift();
+      if (!currentId) break;
+      // Find children of current span
+      for (const span of spans) {
+        if (span.parent_span_id === currentId) {
+          subagentMap.set(span.span_id, subagentInfo);
+          queue.push(span.span_id);
+        }
+      }
+    }
+  }
+
+  return subagentMap;
+}
+
+function getSpanDisplayName(span: Span, subagentInfo?: SubagentInfo): string {
+  const attrs = parseAttributes(span.attributes);
+  const spanType = detectSpanType(span);
+
+  let baseName = span.name;
+
+  if (spanType === "subagent") {
+    // Task/Subagent span - include the short span ID for identification
+    const shortId = getShortId(span.span_id);
+    try {
+      const toolInput = attrs["tool.input"];
+      const input =
+        typeof toolInput === "string" ? JSON.parse(toolInput) : toolInput;
+      if (input?.agentName) {
+        baseName = `Subagent .${shortId} (${input.agentName})`;
+      } else {
+        baseName = `Subagent .${shortId}`;
+      }
+    } catch {
+      baseName = `Subagent .${shortId}`;
+    }
+  } else if (spanType === "tool_call") {
+    const toolName = attrs["tool.name"] as string;
+    baseName = toolName || span.name;
+  } else if (spanType === "chat") {
+    baseName = (attrs["gen_ai.request.model"] as string) || span.name;
+  }
+
+  // If this span is part of a subagent (but not the Task span itself), prefix with subagent ID
+  if (subagentInfo && !isSubagentSpan(span)) {
+    return `[.${subagentInfo.shortId}] ${baseName}`;
+  }
+
+  return baseName;
+}
+
+/**
+ * Build a hierarchical span tree from flat spans
+ */
+function buildSpanTree(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: getSpanDurationMs(span),
+    });
+  }
+
+  // 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 rendering
+ */
+function flattenSpanTree(
+  nodes: SpanNode[],
+): Array<{ node: SpanNode; depth: number }> {
+  const result: Array<{ node: SpanNode; depth: number }> = [];
+  for (const node of nodes) {
+    result.push({ node, depth: node.depth });
+    if (node.children.length > 0) {
+      result.push(...flattenSpanTree(node.children));
+    }
+  }
+  return result;
+}
+
+interface SpanRowProps {
+  span: SpanNode;
+  depth: number;
+  isHighlighted: boolean;
+  isSelected: boolean;
+  onHover: (spanId: string | null) => void;
+  onClick: (span: SpanNode) => void;
+  spanRef?: (el: HTMLButtonElement | null) => void;
+  subagentInfo?: SubagentInfo | undefined;
+}
+
+function SpanRow({
+  span,
+  depth,
+  isHighlighted: _isHighlighted,
+  isSelected,
+  onHover,
+  onClick,
+  spanRef,
+  subagentInfo,
+}: SpanRowProps) {
+  const displayName = getSpanDisplayName(span, subagentInfo);
+  const durationMs = getSpanDurationMs(span);
+  const tokens = getSpanTokens(span);
+
+  return (
+    <button
+      ref={spanRef}
+      type="button"
+      className={cn(
+        "flex items-center gap-2 h-[38px] w-full px-4 py-2 text-left border-b border-border hover:bg-accent",
+        isSelected && "bg-blue-50 hover:bg-blue-100/70",
+      )}
+      style={{ paddingLeft: `${16 + depth * 20}px` }}
+      onMouseEnter={() => onHover(span.span_id)}
+      onMouseLeave={() => onHover(null)}
+      onClick={() => onClick(span)}
+    >
+      {/* Span icon */}
+      <SpanIcon span={span} />
+
+      {/* Span name */}
+      <span className="flex-1 text-sm truncate">{displayName}</span>
+
+      {/* Duration */}
+      <span className="w-[120px] text-xs text-muted-foreground shrink-0">
+        {formatDuration(durationMs)}
+      </span>
+
+      {/* Tokens */}
+      <span className="w-[120px] text-xs text-muted-foreground shrink-0">
+        {tokens > 0 ? tokens.toLocaleString() : "-"}
+      </span>
+    </button>
+  );
+}
+
+interface LogRowProps {
+  log: Log;
+  isHighlighted: boolean;
+  isSelected: boolean;
+  onClick: (log: Log) => void;
+  logRef?: (el: HTMLButtonElement | null) => void;
+}
+
+function LogRow({
+  log,
+  isHighlighted,
+  isSelected,
+  onClick,
+  logRef,
+}: LogRowProps) {
+  const timestamp = new Date(log.timestamp_unix_nano / 1_000_000);
+  const timeStr = timestamp.toLocaleTimeString("en-US", {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    hour12: false,
+  });
+
+  const severityColor =
+    log.severity_number >= 17
+      ? "text-red-500" // ERROR+
+      : log.severity_number >= 13
+        ? "text-yellow-500" // WARN
+        : "text-muted-foreground"; // INFO and below
+
+  return (
+    <button
+      ref={logRef}
+      type="button"
+      onClick={() => onClick(log)}
+      className={cn(
+        "flex items-center gap-2 h-[38px] w-full px-4 py-2 border-b border-border transition-colors text-left hover:bg-muted/50",
+        isHighlighted && "bg-accent",
+        isSelected && "bg-blue-50",
+      )}
+    >
+      {/* Timestamp */}
+      <span className="w-[100px] text-xs text-muted-foreground font-mono shrink-0">
+        {timeStr}
+      </span>
+
+      {/* Severity */}
+      <span
+        className={cn("w-[60px] text-xs font-medium shrink-0", severityColor)}
+      >
+        {log.severity_text || `LVL${log.severity_number}`}
+      </span>
+
+      {/* Body */}
+      <span className="flex-1 text-sm truncate">{log.body || "-"}</span>
+    </button>
+  );
+}
+
+export function SpansLogsList({
+  segments,
+  viewMode,
+  highlightedSpanId,
+  selectedSpanIds,
+  selectedLogIds,
+  onSpanHover,
+  onSpanClick,
+  onLogClick,
+  scrollToSpanId,
+  scrollToLogId,
+  selectedItemId,
+}: SpansLogsListProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const spanRefs = useRef<Map<string, HTMLButtonElement>>(new Map());
+  const logRefs = useRef<Map<number, HTMLButtonElement>>(new Map());
+
+  // Scroll to selected span
+  useEffect(() => {
+    if (scrollToSpanId && spanRefs.current.has(scrollToSpanId)) {
+      const element = spanRefs.current.get(scrollToSpanId);
+      element?.scrollIntoView({ behavior: "smooth", block: "center" });
+    }
+  }, [scrollToSpanId]);
+
+  // Scroll to selected log
+  useEffect(() => {
+    if (scrollToLogId !== null && logRefs.current.has(scrollToLogId)) {
+      const element = logRefs.current.get(scrollToLogId);
+      element?.scrollIntoView({ behavior: "smooth", block: "center" });
+    }
+  }, [scrollToLogId]);
+
+  const setSpanRef = (spanId: string, el: HTMLButtonElement | null) => {
+    if (el) {
+      spanRefs.current.set(spanId, el);
+    } else {
+      spanRefs.current.delete(spanId);
+    }
+  };
+
+  const setLogRef = (logId: number, el: HTMLButtonElement | null) => {
+    if (el) {
+      logRefs.current.set(logId, el);
+    } else {
+      logRefs.current.delete(logId);
+    }
+  };
+
+  // Get all spans and logs from all segments
+  const getVisibleData = () => {
+    const allSpans: Span[] = [];
+    const allLogs: Log[] = [];
+    for (const segment of segments) {
+      allSpans.push(...segment.spans);
+      allLogs.push(...segment.logs);
+    }
+    return { spans: allSpans, logs: allLogs };
+  };
+
+  const { spans, logs } = getVisibleData();
+
+  if (viewMode === "logs") {
+    if (logs.length === 0) {
+      return (
+        <div className="flex-1 flex items-center justify-center text-muted-foreground bg-muted/30">
+          No logs for this segment
+        </div>
+      );
+    }
+
+    return (
+      <div ref={containerRef} className="flex-1 overflow-y-auto bg-muted/30">
+        {/* Header */}
+        <div className="flex items-center gap-2 h-[38px] px-4 py-2 border-b border-border bg-muted/50 sticky top-0">
+          <span className="w-[100px] text-xs font-medium text-muted-foreground shrink-0">
+            Time
+          </span>
+          <span className="w-[60px] text-xs font-medium text-muted-foreground shrink-0">
+            Level
+          </span>
+          <span className="flex-1 text-xs font-medium text-muted-foreground">
+            Message
+          </span>
+        </div>
+
+        {/* Log rows */}
+        {logs
+          .sort((a, b) => a.timestamp_unix_nano - b.timestamp_unix_nano)
+          .map((log) => (
+            <LogRow
+              key={`${log.trace_id}-${log.id}`}
+              log={log}
+              isHighlighted={selectedLogIds.has(log.id)}
+              isSelected={selectedItemId === String(log.id)}
+              onClick={onLogClick}
+              logRef={(el) => setLogRef(log.id, el)}
+            />
+          ))}
+      </div>
+    );
+  }
+
+  // Spans view
+  if (spans.length === 0) {
+    return (
+      <div className="flex-1 flex items-center justify-center text-muted-foreground bg-muted/30">
+        No spans for this segment
+      </div>
+    );
+  }
+
+  return (
+    <div ref={containerRef} className="flex-1 overflow-y-auto bg-muted/30">
+      {/* Header */}
+      <div className="flex items-center gap-2 h-[38px] px-4 py-2 border-b border-border bg-muted/50 sticky top-0">
+        <span className="flex-1 text-xs font-medium text-muted-foreground">
+          Process
+        </span>
+        <span className="w-[120px] text-xs font-medium text-muted-foreground shrink-0">
+          Duration
+        </span>
+        <span className="w-[120px] text-xs font-medium text-muted-foreground shrink-0">
+          Tokens
+        </span>
+      </div>
+
+      {/* Span rows grouped by segment */}
+      {segments.map((segment) => {
+        const segmentSpanTree = buildSpanTree(segment.spans);
+        const segmentFlatSpans = flattenSpanTree(segmentSpanTree);
+        const subagentMap = buildSubagentMap(segment.spans);
+
+        if (segmentFlatSpans.length === 0) return null;
+
+        return (
+          <div key={segment.id}>
+            {segmentFlatSpans.map(({ node, depth }) => (
+              <SpanRow
+                key={node.span_id}
+                span={node}
+                depth={depth}
+                isHighlighted={highlightedSpanId === node.span_id}
+                isSelected={
+                  selectedSpanIds.has(node.span_id) ||
+                  selectedItemId === node.span_id
+                }
+                onHover={onSpanHover}
+                onClick={onSpanClick}
+                spanRef={(el) => setSpanRef(node.span_id, el)}
+                subagentInfo={subagentMap.get(node.span_id)}
+              />
+            ))}
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/UnifiedTimeline.tsx

@@ -238,7 +238,6 @@ export function UnifiedTimeline({
                 }
 
                 const attrs = parseAttributes(span.attributes);
-                const spanType = detectSpanType(span);
 
                 let displayName = span.name;
                 if (span.name === "agent.tool_call") {
@@ -287,7 +286,7 @@ export function UnifiedTimeline({
                       }
                     }}
                   >
-                    <SpanIcon type={spanType} className="w-4 h-4 shrink-0" />
+                    <SpanIcon span={span} className="w-4 h-4 shrink-0" />
                     <span className="text-xs truncate">{displayName}</span>
                   </div>
                 );

package/src/components/ViewControlBar.tsx

@@ -0,0 +1,79 @@
+import { ArrowDown, ArrowUp, Settings } from "lucide-react";
+import { Button } from "./ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "./ui/select";
+
+export type ViewMode = "spans" | "logs" | "timeline";
+
+interface ViewControlBarProps {
+  viewMode: ViewMode;
+  onViewModeChange: (mode: ViewMode) => void;
+  onScrollUp?: () => void;
+  onScrollDown?: () => void;
+  onSettings?: () => void;
+}
+
+export function ViewControlBar({
+  viewMode,
+  onViewModeChange,
+  onScrollUp,
+  onScrollDown,
+  onSettings,
+}: ViewControlBarProps) {
+  return (
+    <div className="h-[60px] border-b border-border bg-muted/50 flex items-center justify-between px-4">
+      {/* Left side - View mode dropdown */}
+      <div className="flex items-center gap-4">
+        <Select
+          value={viewMode}
+          onValueChange={(value) => onViewModeChange(value as ViewMode)}
+        >
+          <SelectTrigger className="w-[160px] bg-background">
+            <SelectValue placeholder="Select view" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="spans">Spans</SelectItem>
+            <SelectItem value="logs">Logs</SelectItem>
+            <SelectItem value="timeline">Timeline</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* Right side - Icon buttons */}
+      <div className="flex items-center gap-2">
+        <Button
+          variant="outline"
+          size="icon"
+          className="h-9 w-9 shadow-sm"
+          onClick={onScrollUp}
+          title="Scroll up"
+        >
+          <ArrowUp className="size-4" />
+        </Button>
+        <Button
+          variant="outline"
+          size="icon"
+          className="h-9 w-9 shadow-sm"
+          onClick={onScrollDown}
+          title="Scroll down"
+        >
+          <ArrowDown className="size-4" />
+        </Button>
+        <Button
+          variant="outline"
+          size="icon"
+          className="h-9 w-9 shadow-sm"
+          onClick={onSettings}
+          title="Settings"
+        >
+          <Settings className="size-4" />
+        </Button>
+      </div>
+    </div>
+  );
+}