@townco/debugger 0.1.5 → 0.1.7

package/src/components/SpanDetailsPanel.tsx

@@ -0,0 +1,371 @@
+import * as Dialog from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import { useState } from "react";
+import { cn } from "@/lib/utils";
+import { detectSpanType } from "../lib/spanTypeDetector";
+import type { SpanNode } from "../types";
+import { SpanIcon } from "./SpanIcon";
+
+interface SpanDetailsPanelProps {
+  span: SpanNode | null;
+  onClose: () => void;
+  allSpans: SpanNode[];
+}
+
+function parseAttributes(attrs: string | null): Record<string, unknown> {
+  if (!attrs) return {};
+  try {
+    return JSON.parse(attrs);
+  } catch {
+    return {};
+  }
+}
+
+function getDisplayName(span: SpanNode): string {
+  const attrs = parseAttributes(span.attributes);
+  const spanType = detectSpanType(span);
+
+  if (spanType === "tool_call") {
+    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;
+  }
+
+  if (spanType === "chat") {
+    return (attrs["gen_ai.request.model"] as string) || span.name;
+  }
+
+  return span.name;
+}
+
+function findParentSpan(span: SpanNode, allSpans: SpanNode[]): SpanNode | null {
+  if (!span.parent_span_id) return null;
+
+  const findSpan = (spans: SpanNode[]): SpanNode | null => {
+    for (const s of spans) {
+      if (s.span_id === span.parent_span_id) return s;
+      const found = findSpan(s.children);
+      if (found) return found;
+    }
+    return null;
+  };
+
+  return findSpan(allSpans);
+}
+
+function formatDuration(durationMs: number): string {
+  if (durationMs < 1) {
+    return `${(durationMs * 1000).toFixed(2)}μs`;
+  }
+  if (durationMs < 1000) {
+    return `${durationMs.toFixed(2)}ms`;
+  }
+  return `${(durationMs / 1000).toFixed(2)}s`;
+}
+
+function formatTimestamp(timestampNano: number): string {
+  const date = new Date(timestampNano / 1_000_000);
+  return date.toLocaleString("en-US", {
+    month: "numeric",
+    day: "numeric",
+    year: "numeric",
+    hour: "numeric",
+    minute: "numeric",
+    second: "numeric",
+    hour12: true,
+  });
+}
+
+function countToolUsage(span: SpanNode): {
+  toolCount: number;
+  callCount: number;
+} {
+  const uniqueTools = new Set<string>();
+  let totalCalls = 0;
+
+  const traverse = (node: SpanNode) => {
+    const attrs = parseAttributes(node.attributes);
+    if (node.name === "agent.tool_call") {
+      const toolName = attrs["tool.name"] as string;
+      if (toolName) {
+        uniqueTools.add(toolName);
+        totalCalls++;
+      }
+    }
+    for (const child of node.children) {
+      traverse(child);
+    }
+  };
+
+  traverse(span);
+  return { toolCount: uniqueTools.size, callCount: totalCalls };
+}
+
+function countLogs(span: SpanNode): number {
+  let count = 0;
+  const traverse = (node: SpanNode) => {
+    if (node.events) {
+      try {
+        const events = JSON.parse(node.events);
+        count += Array.isArray(events) ? events.length : 0;
+      } catch {
+        // Ignore parse errors
+      }
+    }
+    for (const child of node.children) {
+      traverse(child);
+    }
+  };
+  traverse(span);
+  return count;
+}
+
+function countTokens(span: SpanNode): number {
+  let tokens = 0;
+  const traverse = (node: SpanNode) => {
+    const attrs = parseAttributes(node.attributes);
+    const inputTokens = attrs["gen_ai.usage.input_tokens"] as number;
+    const outputTokens = attrs["gen_ai.usage.output_tokens"] as number;
+    if (inputTokens) tokens += inputTokens;
+    if (outputTokens) tokens += outputTokens;
+    for (const child of node.children) {
+      traverse(child);
+    }
+  };
+  traverse(span);
+  return tokens;
+}
+
+export function SpanDetailsPanel({
+  span,
+  onClose,
+  allSpans,
+}: SpanDetailsPanelProps) {
+  const [activeTab, setActiveTab] = useState<"run" | "logs" | "feedback">(
+    "run",
+  );
+
+  if (!span) return null;
+
+  const spanType = detectSpanType(span);
+  const displayName = getDisplayName(span);
+  const parentSpan = findParentSpan(span, allSpans);
+  const attrs = parseAttributes(span.attributes);
+  const resourceAttrs = parseAttributes(span.resource_attributes);
+  const { toolCount, callCount } = countToolUsage(span);
+  const logCount = countLogs(span);
+  const tokenCount = countTokens(span);
+
+  return (
+    <Dialog.Root open={!!span} onOpenChange={(open) => !open && onClose()}>
+      <Dialog.Portal>
+        <Dialog.Overlay className="fixed inset-0 bg-black/30 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" />
+        <Dialog.Content className="fixed right-0 top-0 h-full w-[600px] bg-background shadow-xl data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right duration-200 overflow-y-auto border-l border-border">
+          <div className="flex flex-col gap-6 px-6 py-8">
+            {/* Header */}
+            <div className="flex items-start gap-2">
+              <SpanIcon type={spanType} className="size-6" />
+              <h2 className="flex-1 text-xl font-semibold text-foreground tracking-[-0.02em] leading-tight overflow-hidden text-ellipsis">
+                {displayName}
+              </h2>
+              <Dialog.Close asChild>
+                <button
+                  className="size-6 flex items-center justify-center rounded hover:bg-muted transition-colors"
+                  aria-label="Close"
+                >
+                  <X className="size-4 text-muted-foreground" />
+                </button>
+              </Dialog.Close>
+            </div>
+
+            {/* Tabs */}
+            <div className="flex items-center gap-2">
+              <button
+                onClick={() => setActiveTab("run")}
+                className={cn(
+                  "px-3 py-1 text-sm font-medium rounded-lg transition-colors",
+                  activeTab === "run"
+                    ? "bg-muted text-foreground"
+                    : "text-muted-foreground hover:text-foreground",
+                )}
+              >
+                Run
+              </button>
+              <button
+                onClick={() => setActiveTab("logs")}
+                className={cn(
+                  "px-3 py-1 text-sm font-medium rounded-lg transition-colors",
+                  activeTab === "logs"
+                    ? "bg-muted text-foreground"
+                    : "text-muted-foreground hover:text-foreground",
+                )}
+              >
+                Logs
+              </button>
+              <button
+                onClick={() => setActiveTab("feedback")}
+                className={cn(
+                  "px-3 py-1 text-sm font-medium rounded-lg transition-colors",
+                  activeTab === "feedback"
+                    ? "bg-muted text-foreground"
+                    : "text-muted-foreground hover:text-foreground",
+                )}
+              >
+                Feedback
+              </button>
+            </div>
+
+            {/* Content */}
+            {activeTab === "run" && (
+              <div className="flex flex-col gap-4">
+                {/* Details section */}
+                <div className="flex flex-col">
+                  {/* Parent Span */}
+                  {parentSpan && (
+                    <div className="border-t border-border flex items-center gap-6 h-9">
+                      <span className="text-xs text-muted-foreground w-24 shrink-0">
+                        Parent Span
+                      </span>
+                      <div className="flex items-center gap-2 flex-1 overflow-hidden">
+                        <SpanIcon
+                          type={detectSpanType(parentSpan)}
+                          className="size-5 shrink-0"
+                        />
+                        <span className="text-sm text-foreground truncate">
+                          {getDisplayName(parentSpan)}
+                        </span>
+                      </div>
+                    </div>
+                  )}
+
+                  {/* Span ID */}
+                  <div className="border-t border-border flex items-center gap-6 h-9">
+                    <span className="text-xs text-muted-foreground w-24 shrink-0">
+                      Span ID
+                    </span>
+                    <span className="text-sm text-foreground truncate flex-1">
+                      {span.span_id}
+                    </span>
+                  </div>
+
+                  {/* Duration */}
+                  <div className="border-t border-border flex items-center gap-6 h-9">
+                    <span className="text-xs text-muted-foreground w-24 shrink-0">
+                      Duration
+                    </span>
+                    <span className="text-sm text-foreground">
+                      {formatDuration(span.durationMs)}
+                    </span>
+                  </div>
+
+                  {/* Started */}
+                  <div className="border-t border-border flex items-center gap-6 h-9">
+                    <span className="text-xs text-muted-foreground w-24 shrink-0">
+                      Started
+                    </span>
+                    <span className="text-sm text-foreground">
+                      {formatTimestamp(span.start_time_unix_nano)}
+                    </span>
+                  </div>
+
+                  {/* Tokens */}
+                  {tokenCount > 0 && (
+                    <div className="border-t border-border flex items-center gap-6 h-9">
+                      <span className="text-xs text-muted-foreground w-24 shrink-0">
+                        Tokens
+                      </span>
+                      <span className="text-sm text-foreground">
+                        {tokenCount.toLocaleString()}
+                      </span>
+                    </div>
+                  )}
+
+                  {/* Tool Usage */}
+                  {callCount > 0 && (
+                    <div className="border-t border-border flex items-center gap-6 h-9">
+                      <span className="text-xs text-muted-foreground w-24 shrink-0">
+                        Tool Usage
+                      </span>
+                      <span className="text-sm text-foreground">
+                        {toolCount} {toolCount === 1 ? "tool" : "tools"},{" "}
+                        {callCount} tool {callCount === 1 ? "call" : "calls"}
+                      </span>
+                    </div>
+                  )}
+
+                  {/* Logs */}
+                  {logCount > 0 && (
+                    <div className="border-t border-border flex items-center gap-6 h-9">
+                      <span className="text-xs text-muted-foreground w-24 shrink-0">
+                        Logs
+                      </span>
+                      <span className="text-sm text-foreground">
+                        {logCount}
+                      </span>
+                    </div>
+                  )}
+                </div>
+
+                {/* Attributes */}
+                {attrs && Object.keys(attrs).length > 0 && (
+                  <div className="bg-muted/50 border border-border rounded-lg overflow-hidden">
+                    <div className="p-3 border-b border-border">
+                      <h3 className="text-[8px] font-bold text-muted-foreground uppercase tracking-wider">
+                        Attributes
+                      </h3>
+                    </div>
+                    <div className="p-3">
+                      <pre className="text-[11px] font-mono text-foreground leading-[14px] whitespace-pre-wrap break-all">
+                        {JSON.stringify(attrs, null, 2)}
+                      </pre>
+                    </div>
+                  </div>
+                )}
+
+                {/* Resource */}
+                {resourceAttrs && Object.keys(resourceAttrs).length > 0 && (
+                  <div className="bg-muted/50 border border-border rounded-lg overflow-hidden">
+                    <div className="p-3 border-b border-border">
+                      <h3 className="text-[8px] font-bold text-muted-foreground uppercase tracking-wider">
+                        Resource
+                      </h3>
+                    </div>
+                    <div className="p-3">
+                      <pre className="text-[11px] font-mono text-foreground leading-[14px] whitespace-pre-wrap break-all">
+                        {JSON.stringify(resourceAttrs, null, 2)}
+                      </pre>
+                    </div>
+                  </div>
+                )}
+              </div>
+            )}
+
+            {activeTab === "logs" && (
+              <div className="text-sm text-muted-foreground">
+                Logs view - Coming soon
+              </div>
+            )}
+
+            {activeTab === "feedback" && (
+              <div className="text-sm text-muted-foreground">
+                Feedback view - Coming soon
+              </div>
+            )}
+          </div>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}

package/src/components/SpanIcon.tsx

@@ -0,0 +1,42 @@
+import { ListChecks, Search, Settings, Sparkles } from "lucide-react";
+import { cn } from "@/lib/utils";
+import type { SpanType } from "../lib/spanTypeDetector";
+
+interface SpanIconProps {
+  type: SpanType;
+  className?: string;
+}
+
+export function SpanIcon({ type, className }: SpanIconProps) {
+  // Background color for the icon box
+  const bgColor =
+    type === "chat"
+      ? "bg-orange-400"
+      : type === "tool_call"
+        ? "bg-blue-500"
+        : type === "subagent"
+          ? "bg-purple-500"
+          : "bg-blue-500";
+
+  // Choose icon based on type
+  const Icon =
+    type === "chat"
+      ? Sparkles
+      : type === "tool_call"
+        ? ListChecks
+        : type === "subagent"
+          ? Search
+          : Settings;
+
+  return (
+    <div
+      className={cn(
+        "size-5 rounded flex items-center justify-center",
+        bgColor,
+        className,
+      )}
+    >
+      <Icon className="size-3 text-white" />
+    </div>
+  );
+}