@townco/debugger 0.1.1

package/src/logo.svg

@@ -0,0 +1 @@
+<svg id="Bun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 70"><title>Bun Logo</title><path id="Shadow" d="M71.09,20.74c-.16-.17-.33-.34-.5-.5s-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5A26.46,26.46,0,0,1,75.5,35.7c0,16.57-16.82,30.05-37.5,30.05-11.58,0-21.94-4.23-28.83-10.86l.5.5.5.5.5.5.5.5.5.5.5.5.5.5C19.55,65.3,30.14,69.75,42,69.75c20.68,0,37.5-13.48,37.5-30C79.5,32.69,76.46,26,71.09,20.74Z"/><g id="Body"><path id="Background" d="M73,35.7c0,15.21-15.67,27.54-35,27.54S3,50.91,3,35.7C3,26.27,9,17.94,18.22,13S33.18,3,38,3s8.94,4.13,19.78,10C67,17.94,73,26.27,73,35.7Z" style="fill:#fbf0df"/><path id="Bottom_Shadow" data-name="Bottom Shadow" d="M73,35.7a21.67,21.67,0,0,0-.8-5.78c-2.73,33.3-43.35,34.9-59.32,24.94A40,40,0,0,0,38,63.24C57.3,63.24,73,50.89,73,35.7Z" style="fill:#f6dece"/><path id="Light_Shine" data-name="Light Shine" d="M24.53,11.17C29,8.49,34.94,3.46,40.78,3.45A9.29,9.29,0,0,0,38,3c-2.42,0-5,1.25-8.25,3.13-1.13.66-2.3,1.39-3.54,2.15-2.33,1.44-5,3.07-8,4.7C8.69,18.13,3,26.62,3,35.7c0,.4,0,.8,0,1.19C9.06,15.48,20.07,13.85,24.53,11.17Z" style="fill:#fffefc"/><path id="Top" d="M35.12,5.53A16.41,16.41,0,0,1,29.49,18c-.28.25-.06.73.3.59,3.37-1.31,7.92-5.23,6-13.14C35.71,5,35.12,5.12,35.12,5.53Zm2.27,0A16.24,16.24,0,0,1,39,19c-.12.35.31.65.55.36C41.74,16.56,43.65,11,37.93,5,37.64,4.74,37.19,5.14,37.39,5.49Zm2.76-.17A16.42,16.42,0,0,1,47,17.12a.33.33,0,0,0,.65.11c.92-3.49.4-9.44-7.17-12.53C40.08,4.54,39.82,5.08,40.15,5.32ZM21.69,15.76a16.94,16.94,0,0,0,10.47-9c.18-.36.75-.22.66.18-1.73,8-7.52,9.67-11.12,9.45C21.32,16.4,21.33,15.87,21.69,15.76Z" style="fill:#ccbea7;fill-rule:evenodd"/><path id="Outline" d="M38,65.75C17.32,65.75.5,52.27.5,35.7c0-10,6.18-19.33,16.53-24.92,3-1.6,5.57-3.21,7.86-4.62,1.26-.78,2.45-1.51,3.6-2.19C32,1.89,35,.5,38,.5s5.62,1.2,8.9,3.14c1,.57,2,1.19,3.07,1.87,2.49,1.54,5.3,3.28,9,5.27C69.32,16.37,75.5,25.69,75.5,35.7,75.5,52.27,58.68,65.75,38,65.75ZM38,3c-2.42,0-5,1.25-8.25,3.13-1.13.66-2.3,1.39-3.54,2.15-2.33,1.44-5,3.07-8,4.7C8.69,18.13,3,26.62,3,35.7,3,50.89,18.7,63.25,38,63.25S73,50.89,73,35.7C73,26.62,67.31,18.13,57.78,13,54,11,51.05,9.12,48.66,7.64c-1.09-.67-2.09-1.29-3-1.84C42.63,4,40.42,3,38,3Z"/></g><g id="Mouth"><g id="Background-2" data-name="Background"><path d="M45.05,43a8.93,8.93,0,0,1-2.92,4.71,6.81,6.81,0,0,1-4,1.88A6.84,6.84,0,0,1,34,47.71,8.93,8.93,0,0,1,31.12,43a.72.72,0,0,1,.8-.81H44.26A.72.72,0,0,1,45.05,43Z" style="fill:#b71422"/></g><g id="Tongue"><path id="Background-3" data-name="Background" d="M34,47.79a6.91,6.91,0,0,0,4.12,1.9,6.91,6.91,0,0,0,4.11-1.9,10.63,10.63,0,0,0,1-1.07,6.83,6.83,0,0,0-4.9-2.31,6.15,6.15,0,0,0-5,2.78C33.56,47.4,33.76,47.6,34,47.79Z" style="fill:#ff6164"/><path id="Outline-2" data-name="Outline" d="M34.16,47a5.36,5.36,0,0,1,4.19-2.08,6,6,0,0,1,4,1.69c.23-.25.45-.51.66-.77a7,7,0,0,0-4.71-1.93,6.36,6.36,0,0,0-4.89,2.36A9.53,9.53,0,0,0,34.16,47Z"/></g><path id="Outline-3" data-name="Outline" d="M38.09,50.19a7.42,7.42,0,0,1-4.45-2,9.52,9.52,0,0,1-3.11-5.05,1.2,1.2,0,0,1,.26-1,1.41,1.41,0,0,1,1.13-.51H44.26a1.44,1.44,0,0,1,1.13.51,1.19,1.19,0,0,1,.25,1h0a9.52,9.52,0,0,1-3.11,5.05A7.42,7.42,0,0,1,38.09,50.19Zm-6.17-7.4c-.16,0-.2.07-.21.09a8.29,8.29,0,0,0,2.73,4.37A6.23,6.23,0,0,0,38.09,49a6.28,6.28,0,0,0,3.65-1.73,8.3,8.3,0,0,0,2.72-4.37.21.21,0,0,0-.2-.09Z"/></g><g id="Face"><ellipse id="Right_Blush" data-name="Right Blush" cx="53.22" cy="40.18" rx="5.85" ry="3.44" style="fill:#febbd0"/><ellipse id="Left_Bluch" data-name="Left Bluch" cx="22.95" cy="40.18" rx="5.85" ry="3.44" style="fill:#febbd0"/><path id="Eyes" d="M25.7,38.8a5.51,5.51,0,1,0-5.5-5.51A5.51,5.51,0,0,0,25.7,38.8Zm24.77,0A5.51,5.51,0,1,0,45,33.29,5.5,5.5,0,0,0,50.47,38.8Z" style="fill-rule:evenodd"/><path id="Iris" d="M24,33.64a2.07,2.07,0,1,0-2.06-2.07A2.07,2.07,0,0,0,24,33.64Zm24.77,0a2.07,2.07,0,1,0-2.06-2.07A2.07,2.07,0,0,0,48.75,33.64Z" style="fill:#fff;fill-rule:evenodd"/></g></svg>

package/src/pages/SessionView.tsx

@@ -0,0 +1,88 @@
+import { useCallback, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { SessionTraceList } from "../components/SessionTraceList";
+import { TraceDetailContent } from "../components/TraceDetailContent";
+import type { Trace } from "../types";
+
+function getInitialTraceId(): string | null {
+  const params = new URLSearchParams(window.location.search);
+  return params.get("traceId");
+}
+
+interface SessionViewProps {
+  sessionId: string;
+}
+
+export function SessionView({ sessionId }: SessionViewProps) {
+  const [selectedTraceId, setSelectedTraceId] = useState<string | null>(
+    getInitialTraceId,
+  );
+  const [autoSelectDone, setAutoSelectDone] = useState(
+    () => getInitialTraceId() !== null,
+  );
+
+  const handleSelectTrace = (traceId: string) => {
+    setSelectedTraceId(traceId);
+
+    // Update URL without navigation
+    const url = new URL(window.location.href);
+    url.searchParams.set("traceId", traceId);
+    window.history.replaceState({}, "", url);
+  };
+
+  const handleTracesLoaded = useCallback(
+    (traces: Trace[]) => {
+      // Auto-select most recent trace if none selected yet
+      const mostRecent = traces[0];
+      if (!autoSelectDone && mostRecent) {
+        setSelectedTraceId(mostRecent.trace_id);
+        setAutoSelectDone(true);
+
+        // Update URL
+        const url = new URL(window.location.href);
+        url.searchParams.set("traceId", mostRecent.trace_id);
+        window.history.replaceState({}, "", url);
+      }
+    },
+    [autoSelectDone],
+  );
+
+  return (
+    <div className="h-screen flex flex-col">
+      {/* Header */}
+      <div className="border-b p-4 shrink-0">
+        <Button variant="outline" asChild>
+          <a href="/">Back to Traces</a>
+        </Button>
+        <h1 className="text-xl font-bold mt-2">Session</h1>
+        <div className="text-sm text-muted-foreground font-mono truncate">
+          {sessionId}
+        </div>
+      </div>
+
+      {/* Split pane container */}
+      <div className="flex flex-1 overflow-hidden">
+        {/* Left pane - trace list */}
+        <div className="w-80 border-r overflow-y-auto shrink-0">
+          <SessionTraceList
+            sessionId={sessionId}
+            selectedTraceId={selectedTraceId}
+            onSelectTrace={handleSelectTrace}
+            onTracesLoaded={handleTracesLoaded}
+          />
+        </div>
+
+        {/* Right pane - trace detail */}
+        <div className="flex-1 overflow-y-auto">
+          {selectedTraceId ? (
+            <TraceDetailContent traceId={selectedTraceId} compact />
+          ) : (
+            <div className="p-8 text-muted-foreground">
+              Select a trace to view details
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/pages/TraceDetail.tsx

@@ -0,0 +1,19 @@
+import { Button } from "@/components/ui/button";
+import { TraceDetailContent } from "../components/TraceDetailContent";
+
+interface TraceDetailProps {
+  traceId: string;
+}
+
+export function TraceDetail({ traceId }: TraceDetailProps) {
+  return (
+    <div className="container mx-auto">
+      <div className="p-8 pb-0">
+        <Button variant="outline" asChild className="mb-4">
+          <a href="/">Back to Traces</a>
+        </Button>
+      </div>
+      <TraceDetailContent traceId={traceId} />
+    </div>
+  );
+}

package/src/pages/TraceList.tsx

@@ -0,0 +1,153 @@
+import { useCallback, useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import type { Trace } from "../types";
+
+function formatDuration(startNano: number, endNano: number): string {
+  const ms = (endNano - startNano) / 1_000_000;
+  if (ms < 1000) return `${ms.toFixed(2)}ms`;
+  return `${(ms / 1000).toFixed(2)}s`;
+}
+
+function formatTimestamp(nanoseconds: number): string {
+  return new Date(nanoseconds / 1_000_000).toLocaleString();
+}
+
+function getInitialSessionId(): string {
+  const params = new URLSearchParams(window.location.search);
+  return params.get("sessionId") || "";
+}
+
+export function TraceList() {
+  const [traces, setTraces] = useState<Trace[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [sessionId, setSessionId] = useState(getInitialSessionId);
+  const [debouncedSessionId, setDebouncedSessionId] =
+    useState(getInitialSessionId);
+
+  // Debounce session ID input
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedSessionId(sessionId), 300);
+    return () => clearTimeout(timer);
+  }, [sessionId]);
+
+  // Update URL when debounced session ID changes
+  useEffect(() => {
+    const url = new URL(window.location.href);
+    if (debouncedSessionId) {
+      url.searchParams.set("sessionId", debouncedSessionId);
+    } else {
+      url.searchParams.delete("sessionId");
+    }
+    window.history.replaceState({}, "", url);
+  }, [debouncedSessionId]);
+
+  // Fetch traces function
+  const fetchTraces = useCallback(() => {
+    setLoading(true);
+    const params = new URLSearchParams();
+    if (debouncedSessionId) params.set("sessionId", debouncedSessionId);
+    fetch(`/api/traces?${params}`)
+      .then((res) => {
+        if (!res.ok) throw new Error("Failed to fetch traces");
+        return res.json();
+      })
+      .then((data) => {
+        setTraces(data);
+        setLoading(false);
+      })
+      .catch((err) => {
+        setError(err.message);
+        setLoading(false);
+      });
+  }, [debouncedSessionId]);
+
+  // Fetch traces on mount and when session ID changes
+  useEffect(() => {
+    fetchTraces();
+  }, [fetchTraces]);
+
+  if (loading) {
+    return (
+      <div className="container mx-auto p-8">
+        <div className="text-muted-foreground">Loading traces...</div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="container mx-auto p-8">
+        <div className="text-red-500">Error: {error}</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="container mx-auto p-8">
+      <h1 className="text-2xl font-bold mb-6">Traces</h1>
+
+      <div className="flex gap-2 mb-4">
+        <Input
+          placeholder="Filter by session ID..."
+          value={sessionId}
+          onChange={(e) => setSessionId(e.target.value)}
+          className="max-w-sm"
+        />
+        <Button variant="outline" onClick={fetchTraces} disabled={loading}>
+          Refresh
+        </Button>
+      </div>
+
+      {traces.length === 0 ? (
+        <div className="text-muted-foreground">No traces found</div>
+      ) : (
+        <div className="space-y-2">
+          {traces.map((trace) => (
+            <a
+              key={trace.trace_id}
+              href={`/trace/${trace.trace_id}`}
+              className="block"
+            >
+              <Card className="hover:bg-muted/50 transition-colors cursor-pointer">
+                <CardHeader className="py-3">
+                  <div className="flex items-center justify-between">
+                    <CardTitle className="text-base font-medium">
+                      {trace.first_span_name || "Unknown"}
+                    </CardTitle>
+                    <span className="text-sm text-muted-foreground">
+                      {formatDuration(
+                        trace.start_time_unix_nano,
+                        trace.end_time_unix_nano,
+                      )}
+                    </span>
+                  </div>
+                  <CardDescription className="flex items-center gap-4">
+                    <span>{trace.service_name || "Unknown service"}</span>
+                    <span>{trace.span_count} spans</span>
+                  </CardDescription>
+                </CardHeader>
+                <CardContent className="py-2 pt-0">
+                  <div className="text-xs text-muted-foreground font-mono">
+                    {trace.trace_id}
+                  </div>
+                  <div className="text-xs text-muted-foreground">
+                    {formatTimestamp(trace.start_time_unix_nano)}
+                  </div>
+                </CardContent>
+              </Card>
+            </a>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/server.ts

@@ -0,0 +1,82 @@
+import { createOtlpServer } from "@townco/otlp-server/http";
+import { serve } from "bun";
+import { DebuggerDb } from "./db";
+import index from "./index.html";
+
+export const DEFAULT_DEBUGGER_PORT = 4000;
+export const DEFAULT_OTLP_PORT = 4318;
+
+export interface DebuggerServerOptions {
+  port?: number;
+  otlpPort?: number;
+  dbPath: string;
+}
+
+export interface DebuggerServerResult {
+  server: ReturnType<typeof serve>;
+  otlpServer: ReturnType<typeof serve>;
+  stop: () => void;
+}
+
+export function startDebuggerServer(
+  options: DebuggerServerOptions,
+): DebuggerServerResult {
+  const {
+    port = DEFAULT_DEBUGGER_PORT,
+    otlpPort = DEFAULT_OTLP_PORT,
+    dbPath,
+  } = options;
+
+  // Start OTLP server (initializes database internally)
+  const otlpApp = createOtlpServer({ dbPath });
+  const otlpServer = serve({
+    fetch: otlpApp.fetch,
+    port: otlpPort,
+  });
+
+  // Create debugger database connection for reading
+  const db = new DebuggerDb(dbPath);
+
+  // Start debugger UI server
+  const server = serve({
+    port,
+    routes: {
+      "/api/traces": {
+        GET(req) {
+          const url = new URL(req.url);
+          const limit = Number.parseInt(url.searchParams.get("limit") || "50");
+          const offset = Number.parseInt(url.searchParams.get("offset") || "0");
+          const sessionId = url.searchParams.get("sessionId") || undefined;
+          const traces = db.listTraces(limit, offset, sessionId);
+          return Response.json(traces);
+        },
+      },
+
+      "/api/traces/:traceId": {
+        GET(req) {
+          const traceId = req.params.traceId;
+          const data = db.getTraceById(traceId);
+          if (!data.trace) {
+            return Response.json({ error: "Trace not found" }, { status: 404 });
+          }
+          return Response.json(data);
+        },
+      },
+
+      // Serve index.html for all unmatched routes (SPA routing)
+      "/*": index,
+    },
+
+    development: process.env.NODE_ENV !== "production" && {
+      hmr: true,
+      console: true,
+    },
+  });
+
+  const stop = () => {
+    server.stop();
+    otlpServer.stop();
+  };
+
+  return { server, otlpServer, stop };
+}

package/src/types.ts

@@ -0,0 +1,48 @@
+export interface Trace {
+  trace_id: string;
+  service_name: string | null;
+  first_span_name: string | null;
+  start_time_unix_nano: number;
+  end_time_unix_nano: number;
+  span_count: number;
+  created_at: string;
+}
+
+export interface Span {
+  span_id: string;
+  trace_id: string;
+  parent_span_id: string | null;
+  name: string;
+  kind: number;
+  start_time_unix_nano: number;
+  end_time_unix_nano: number;
+  status_code: number;
+  status_message: string | null;
+  attributes: string | null;
+  events: string | null;
+  resource_attributes: string | null;
+}
+
+export interface Log {
+  id: number;
+  trace_id: string | null;
+  span_id: string | null;
+  timestamp_unix_nano: number;
+  severity_number: number;
+  severity_text: string | null;
+  body: string | null;
+  attributes: string | null;
+  resource_attributes: string | null;
+}
+
+export interface SpanNode extends Span {
+  children: SpanNode[];
+  depth: number;
+  durationMs: number;
+}
+
+export interface TraceDetail {
+  trace: Trace | null;
+  spans: Span[];
+  logs: Log[];
+}