@townco/debugger 0.1.1

package/README.md

@@ -0,0 +1,21 @@
+# bun-react-tailwind-shadcn-template
+
+To install dependencies:
+
+```bash
+bun install
+```
+
+To start a development server:
+
+```bash
+bun dev
+```
+
+To run for production:
+
+```bash
+bun start
+```
+
+This project was created using `bun init` in bun v1.3.2. [Bun](https://bun.com) is a fast all-in-one JavaScript runtime.

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@townco/debugger",
+  "version": "0.1.1",
+  "type": "module",
+  "engines": {
+    "bun": ">=1.3.0"
+  },
+  "files": [
+    "src"
+  ],
+  "scripts": {
+    "dev": "bun --hot src/index.ts",
+    "start": "NODE_ENV=production bun src/index.ts",
+    "check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@townco/otlp-server": "0.1.1",
+    "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-slot": "^1.2.3",
+    "bun-plugin-tailwind": "^0.1.2",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.545.0",
+    "react": "^19",
+    "react-dom": "^19",
+    "tailwind-merge": "^3.3.1"
+  },
+  "devDependencies": {
+    "@townco/tsconfig": "0.1.43",
+    "@types/bun": "latest",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "tailwindcss": "^4.1.11",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "^5.9.3"
+  }
+}

package/src/App.tsx

@@ -0,0 +1,103 @@
+import { Component, type ReactNode } from "react";
+import "./index.css";
+import { SessionView } from "./pages/SessionView";
+import { TraceDetail } from "./pages/TraceDetail";
+import { TraceList } from "./pages/TraceList";
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error: Error | null;
+}
+
+class ErrorBoundary extends Component<
+  { children: ReactNode },
+  ErrorBoundaryState
+> {
+  constructor(props: { children: ReactNode }) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true, error };
+  }
+
+  override render() {
+    if (this.state.hasError) {
+      return (
+        <div
+          style={{
+            padding: "2rem",
+            maxWidth: "600px",
+            margin: "4rem auto",
+            fontFamily: "system-ui, sans-serif",
+          }}
+        >
+          <h1 style={{ color: "#dc2626", marginBottom: "1rem" }}>
+            Something went wrong
+          </h1>
+          <p style={{ color: "#6b7280", marginBottom: "1rem" }}>
+            The debugger encountered an unexpected error.
+          </p>
+          <pre
+            style={{
+              background: "#f3f4f6",
+              padding: "1rem",
+              borderRadius: "0.5rem",
+              overflow: "auto",
+              fontSize: "0.875rem",
+              color: "#374151",
+            }}
+          >
+            {this.state.error?.message}
+          </pre>
+          <button
+            onClick={() => window.location.reload()}
+            style={{
+              marginTop: "1rem",
+              padding: "0.5rem 1rem",
+              background: "#3b82f6",
+              color: "white",
+              border: "none",
+              borderRadius: "0.375rem",
+              cursor: "pointer",
+            }}
+          >
+            Reload
+          </button>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+function AppContent() {
+  const pathname = window.location.pathname;
+
+  // Route: /sessions/:sessionId
+  const sessionMatch = pathname.match(/^\/sessions\/(.+)$/);
+  if (sessionMatch?.[1]) {
+    return <SessionView sessionId={sessionMatch[1]} />;
+  }
+
+  // Route: /trace/:traceId
+  const traceMatch = pathname.match(/^\/trace\/(.+)$/);
+  if (traceMatch?.[1]) {
+    return <TraceDetail traceId={traceMatch[1]} />;
+  }
+
+  // Default: Trace list
+  return <TraceList />;
+}
+
+export function App() {
+  return (
+    <ErrorBoundary>
+      <AppContent />
+    </ErrorBoundary>
+  );
+}
+
+export default App;

package/src/components/AttributeViewer.tsx

@@ -0,0 +1,26 @@
+interface AttributeViewerProps {
+  label: string;
+  data: string | null;
+}
+
+export function AttributeViewer({ label, data }: AttributeViewerProps) {
+  if (!data || data === "{}" || data === "[]") return null;
+
+  let parsed: unknown;
+  try {
+    parsed = JSON.parse(data);
+  } catch {
+    parsed = data;
+  }
+
+  return (
+    <div className="mb-2">
+      <div className="text-xs text-muted-foreground uppercase font-medium">
+        {label}
+      </div>
+      <pre className="text-xs bg-muted p-2 rounded overflow-x-auto whitespace-pre-wrap">
+        {typeof parsed === "string" ? parsed : JSON.stringify(parsed, null, 2)}
+      </pre>
+    </div>
+  );
+}

package/src/components/LogList.tsx

@@ -0,0 +1,72 @@
+import { useState } from "react";
+import type { Log } from "../types";
+import { AttributeViewer } from "./AttributeViewer";
+
+function getSeverityColor(severityNumber: number): string {
+  if (severityNumber >= 17) return "text-red-500"; // ERROR/FATAL
+  if (severityNumber >= 13) return "text-yellow-500"; // WARN
+  if (severityNumber >= 9) return "text-blue-500"; // INFO
+  return "text-muted-foreground"; // DEBUG/TRACE
+}
+
+function formatTimestamp(nanoseconds: number): string {
+  return new Date(nanoseconds / 1_000_000).toLocaleTimeString();
+}
+
+function LogRow({ log }: { log: Log }) {
+  const [expanded, setExpanded] = useState(false);
+
+  const hasDetails =
+    (log.attributes && log.attributes !== "{}") ||
+    (log.resource_attributes && log.resource_attributes !== "{}");
+
+  return (
+    <div>
+      <div
+        className={`flex items-start gap-2 py-1 px-2 hover:bg-muted rounded ${hasDetails ? "cursor-pointer" : ""}`}
+        onClick={() => hasDetails && setExpanded(!expanded)}
+      >
+        <span
+          className={`${getSeverityColor(log.severity_number)} font-medium text-xs w-12 shrink-0`}
+        >
+          {log.severity_text || "LOG"}
+        </span>
+        <span className="flex-1 text-sm truncate">{log.body}</span>
+        <span className="text-muted-foreground text-xs shrink-0">
+          {formatTimestamp(log.timestamp_unix_nano)}
+        </span>
+      </div>
+
+      {expanded && (
+        <div className="py-2 px-4 bg-muted/50 rounded mb-1 ml-14">
+          <AttributeViewer label="Body" data={log.body} />
+          <AttributeViewer label="Attributes" data={log.attributes} />
+          <AttributeViewer label="Resource" data={log.resource_attributes} />
+          {log.span_id && (
+            <div className="text-xs text-muted-foreground">
+              Span ID: {log.span_id}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface LogListProps {
+  logs: Log[];
+}
+
+export function LogList({ logs }: LogListProps) {
+  if (logs.length === 0) {
+    return <div className="text-muted-foreground text-sm">No logs</div>;
+  }
+
+  return (
+    <div className="font-mono text-sm space-y-0.5">
+      {logs.map((log) => (
+        <LogRow key={log.id} log={log} />
+      ))}
+    </div>
+  );
+}

package/src/components/SessionTraceList.tsx

@@ -0,0 +1,116 @@
+import { useCallback, useEffect, useState } from "react";
+import { cn } from "@/lib/utils";
+import type { Trace } from "../types";
+
+function formatRelativeTime(nanoseconds: number): string {
+  const ms = nanoseconds / 1_000_000;
+  const seconds = Math.floor((Date.now() - ms) / 1000);
+
+  if (seconds < 0) return "just now";
+  if (seconds < 60) return `${seconds}s ago`;
+  if (seconds < 3600) return `${Math.floor(seconds / 60)}m ago`;
+  if (seconds < 86400) return `${Math.floor(seconds / 3600)}h ago`;
+  return new Date(ms).toLocaleDateString();
+}
+
+function formatDuration(startNano: number, endNano: number): string {
+  const ms = (endNano - startNano) / 1_000_000;
+  if (ms < 1000) return `${ms.toFixed(0)}ms`;
+  return `${(ms / 1000).toFixed(1)}s`;
+}
+
+interface SessionTraceListProps {
+  sessionId: string;
+  selectedTraceId: string | null;
+  onSelectTrace: (traceId: string) => void;
+  onTracesLoaded?: (traces: Trace[]) => void;
+}
+
+export function SessionTraceList({
+  sessionId,
+  selectedTraceId,
+  onSelectTrace,
+  onTracesLoaded,
+}: SessionTraceListProps) {
+  const [traces, setTraces] = useState<Trace[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchTraces = useCallback(() => {
+    setLoading(true);
+    const params = new URLSearchParams();
+    params.set("sessionId", sessionId);
+    fetch(`/api/traces?${params}`)
+      .then((res) => {
+        if (!res.ok) throw new Error("Failed to fetch traces");
+        return res.json();
+      })
+      .then((data: Trace[]) => {
+        setTraces(data);
+        setLoading(false);
+        onTracesLoaded?.(data);
+      })
+      .catch((err) => {
+        setError(err.message);
+        setLoading(false);
+      });
+  }, [sessionId, onTracesLoaded]);
+
+  useEffect(() => {
+    fetchTraces();
+  }, [fetchTraces]);
+
+  if (loading) {
+    return (
+      <div className="p-4 text-muted-foreground text-sm">Loading traces...</div>
+    );
+  }
+
+  if (error) {
+    return <div className="p-4 text-red-500 text-sm">Error: {error}</div>;
+  }
+
+  if (traces.length === 0) {
+    return (
+      <div className="p-4 text-muted-foreground text-sm">
+        No traces found for this session
+      </div>
+    );
+  }
+
+  return (
+    <div className="divide-y">
+      {traces.map((trace) => {
+        const isSelected = trace.trace_id === selectedTraceId;
+        return (
+          <div
+            key={trace.trace_id}
+            className={cn(
+              "p-3 cursor-pointer hover:bg-muted/50 transition-colors",
+              isSelected && "bg-muted border-l-2 border-l-primary",
+            )}
+            onClick={() => onSelectTrace(trace.trace_id)}
+          >
+            <div className="flex items-center justify-between gap-2">
+              <span className="font-medium text-sm truncate flex-1">
+                {trace.first_span_name || "Unknown"}
+              </span>
+              <span className="w-2 h-2 rounded-full bg-green-500 shrink-0" />
+            </div>
+            <div className="text-xs text-muted-foreground mt-1">
+              {formatRelativeTime(trace.start_time_unix_nano)}
+            </div>
+            <div className="text-xs text-muted-foreground">
+              {formatDuration(
+                trace.start_time_unix_nano,
+                trace.end_time_unix_nano,
+              )}
+              {" · "}
+              {trace.span_count} spans
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/SpanTree.tsx

@@ -0,0 +1,205 @@
+import { useState } from "react";
+import type { Span, SpanNode } from "../types";
+import { AttributeViewer } from "./AttributeViewer";
+
+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;
+}
+
+function SpanRow({ span }: { span: SpanNode }) {
+  const [expanded, setExpanded] = useState(false);
+  const [showRaw, setShowRaw] = useState(false);
+
+  const attrs = parseAttributes(span.attributes);
+
+  // 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;
+
+  // Get display name based on span type
+  const displayName = isToolCall
+    ? (attrs["tool.name"] as string) || span.name
+    : isChatSpan
+      ? (attrs["gen_ai.request.model"] as string) || span.name
+      : span.name;
+
+  const statusColor =
+    span.status_code === 2
+      ? "text-red-500"
+      : span.status_code === 1
+        ? "text-green-500"
+        : "text-gray-400";
+
+  const hasDetails =
+    (span.attributes && span.attributes !== "{}") ||
+    (span.events && span.events !== "[]") ||
+    (span.resource_attributes && span.resource_attributes !== "{}");
+
+  return (
+    <div>
+      <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)}
+      >
+        <span className={`${statusColor} mr-2`}>●</span>
+        <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>
+
+      {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} />
+      ))}
+    </div>
+  );
+}
+
+interface SpanTreeProps {
+  spans: Span[];
+}
+
+export function SpanTree({ spans }: SpanTreeProps) {
+  const tree = buildSpanTree(spans);
+
+  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>
+  );
+}