@townco/debugger 0.1.4 → 0.1.6

package/src/components/TraceDetailContent.tsx

@@ -1,14 +1,12 @@
-import { useEffect, useState } from "react";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import type { TraceDetail as TraceDetailType } from "../types";
+import { useEffect, useMemo, useState } from "react";
+import { Card, CardContent } from "@/components/ui/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { aggregateTokenUsage, countToolCalls } from "../lib/turnExtractor";
+import type { Log, Span, TraceDetail as TraceDetailType } from "../types";
 import { LogList } from "./LogList";
-import { SpanTree } from "./SpanTree";
+import { SpanTimeline } from "./SpanTimeline";
+import { TurnHeader } from "./TurnHeader";
+import { TurnMetadataPanel } from "./TurnMetadataPanel";
 
 function formatDuration(startNano: number, endNano: number): string {
   const ms = (endNano - startNano) / 1_000_000;
@@ -25,6 +23,86 @@ interface TraceDetailContentProps {
   compact?: boolean;
 }
 
+interface TraceContentProps {
+  trace: NonNullable<TraceDetailType["trace"]>;
+  spans: Span[];
+  logs: Log[];
+  messages: {
+    userInput: string | null;
+    llmOutput: string | null;
+  };
+  compact?: boolean;
+}
+
+function TraceContent({
+  trace,
+  spans,
+  logs,
+  messages,
+  compact = false,
+}: TraceContentProps) {
+  // Use server-extracted messages
+  const tokenUsage = useMemo(() => aggregateTokenUsage(spans), [spans]);
+  const toolCallCount = useMemo(() => countToolCalls(spans), [spans]);
+
+  return (
+    <div
+      className={
+        compact
+          ? "p-4 space-y-6 bg-background min-h-screen"
+          : "p-6 space-y-6 bg-background min-h-screen"
+      }
+    >
+      {/* Top section: Input/Output (left) + Metadata (right) */}
+      <div className="grid gap-6 lg:grid-cols-[1fr_326px]">
+        {/* Left: Turn header with input/output */}
+        <TurnHeader
+          userInput={messages.userInput}
+          llmOutput={messages.llmOutput}
+        />
+
+        {/* Right: Metadata panel */}
+        <TurnMetadataPanel
+          traceId={trace.trace_id}
+          duration={formatDuration(
+            trace.start_time_unix_nano,
+            trace.end_time_unix_nano,
+          )}
+          startTime={formatTimestamp(trace.start_time_unix_nano)}
+          tokens={tokenUsage}
+          toolCount={toolCallCount}
+          spanCount={spans.length}
+          logCount={logs.length}
+        />
+      </div>
+
+      {/* Bottom section: Tabbed interface full width */}
+      <div>
+        <Tabs defaultValue="spans">
+          <TabsList>
+            <TabsTrigger value="spans">Span</TabsTrigger>
+            <TabsTrigger value="logs">Logs</TabsTrigger>
+          </TabsList>
+          <TabsContent value="spans" className="mt-6">
+            <SpanTimeline
+              spans={spans}
+              traceStart={trace.start_time_unix_nano}
+              traceEnd={trace.end_time_unix_nano}
+            />
+          </TabsContent>
+          <TabsContent value="logs" className="mt-6">
+            <Card>
+              <CardContent className="p-4">
+                <LogList logs={logs} />
+              </CardContent>
+            </Card>
+          </TabsContent>
+        </Tabs>
+      </div>
+    </div>
+  );
+}
+
 export function TraceDetailContent({
   traceId,
   compact = false,
@@ -56,7 +134,7 @@ export function TraceDetailContent({
 
   if (loading) {
     return (
-      <div className={compact ? "p-4" : "p-8"}>
+      <div className={compact ? "p-4" : "p-6"}>
         <div className="text-muted-foreground">Loading trace...</div>
       </div>
     );
@@ -64,68 +142,19 @@ export function TraceDetailContent({
 
   if (error || !data?.trace) {
     return (
-      <div className={compact ? "p-4" : "p-8"}>
+      <div className={compact ? "p-4" : "p-6"}>
         <div className="text-red-500">Error: {error || "Trace not found"}</div>
       </div>
     );
   }
 
-  const { trace, spans, logs } = data;
-
   return (
-    <div className={compact ? "p-4" : "p-8"}>
-      <Card className="mb-6">
-        <CardHeader>
-          <CardTitle>{trace.first_span_name || "Unknown"}</CardTitle>
-          <CardDescription className="space-y-1">
-            <div>{trace.service_name || "Unknown service"}</div>
-            <div className="font-mono text-xs">{trace.trace_id}</div>
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <div className="flex gap-6 text-sm">
-            <div>
-              <span className="text-muted-foreground">Duration: </span>
-              {formatDuration(
-                trace.start_time_unix_nano,
-                trace.end_time_unix_nano,
-              )}
-            </div>
-            <div>
-              <span className="text-muted-foreground">Spans: </span>
-              {spans.length}
-            </div>
-            <div>
-              <span className="text-muted-foreground">Logs: </span>
-              {logs.length}
-            </div>
-            <div>
-              <span className="text-muted-foreground">Started: </span>
-              {formatTimestamp(trace.start_time_unix_nano)}
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-
-      <div className="grid gap-6 lg:grid-cols-2">
-        <Card>
-          <CardHeader>
-            <CardTitle className="text-lg">Spans ({spans.length})</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <SpanTree spans={spans} />
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle className="text-lg">Logs ({logs.length})</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <LogList logs={logs} />
-          </CardContent>
-        </Card>
-      </div>
-    </div>
+    <TraceContent
+      trace={data.trace}
+      spans={data.spans}
+      logs={data.logs}
+      messages={data.messages}
+      compact={compact}
+    />
   );
 }

package/src/components/TurnHeader.tsx

@@ -0,0 +1,50 @@
+import { MarkdownRenderer } from "@townco/ui/gui";
+import { Card, CardContent } from "@/components/ui/card";
+
+interface TurnHeaderProps {
+  userInput: string | null;
+  llmOutput: string | null;
+}
+
+export function TurnHeader({ userInput, llmOutput }: TurnHeaderProps) {
+  return (
+    <Card>
+      <CardContent className="p-6">
+        {/* User Input */}
+        <div className="space-y-1 mb-6">
+          <div className="text-xs font-medium text-muted-foreground tracking-wide">
+            User Input
+          </div>
+          {userInput ? (
+            <div className="text-sm text-foreground leading-normal">
+              {userInput}
+            </div>
+          ) : (
+            <div className="text-sm text-muted-foreground italic">
+              No user input available
+            </div>
+          )}
+        </div>
+
+        {/* Divider */}
+        <div className="h-px bg-border mb-6" />
+
+        {/* Output */}
+        <div className="space-y-1">
+          <div className="text-xs font-medium text-muted-foreground tracking-wide">
+            Output
+          </div>
+          {llmOutput ? (
+            <div className="text-sm text-foreground leading-normal max-h-96 overflow-auto">
+              <MarkdownRenderer content={llmOutput} />
+            </div>
+          ) : (
+            <div className="text-sm text-muted-foreground italic">
+              No LLM output available
+            </div>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/TurnMetadataPanel.tsx

@@ -0,0 +1,63 @@
+import { Card, CardContent } from "@/components/ui/card";
+import type { TokenUsage } from "../lib/turnExtractor";
+
+interface TurnMetadataPanelProps {
+  traceId: string;
+  duration: string;
+  startTime: string;
+  tokens: TokenUsage;
+  toolCount: number;
+  spanCount: number;
+  logCount: number;
+}
+
+export function TurnMetadataPanel({
+  traceId,
+  duration,
+  startTime,
+  tokens,
+  toolCount,
+  spanCount,
+  logCount,
+}: TurnMetadataPanelProps) {
+  const formatTokens = () => {
+    if (tokens.totalTokens === 0) {
+      return "N/A";
+    }
+    return tokens.totalTokens.toLocaleString();
+  };
+
+  const formatToolUsage = () => {
+    return `${toolCount} tool call${toolCount !== 1 ? "s" : ""}`;
+  };
+
+  const metadataRows = [
+    { label: "Turn ID", value: traceId, mono: true },
+    { label: "Duration", value: duration },
+    { label: "Started", value: startTime },
+    { label: "Tokens", value: formatTokens() },
+    { label: "Tool Usage", value: formatToolUsage() },
+    { label: "Spans", value: String(spanCount) },
+    { label: "Logs", value: String(logCount) },
+  ];
+
+  return (
+    <div className="space-y-0 text-xs leading-[1.5] tracking-[0.18px]">
+      {metadataRows.map((row, i) => (
+        <div
+          key={row.label}
+          className={`flex gap-6 h-9 items-center ${i > 0 ? "border-t border-border" : ""}`}
+        >
+          <div className="text-muted-foreground w-[96px] shrink-0">
+            {row.label}
+          </div>
+          <div
+            className={`text-foreground flex-1 truncate ${row.mono ? "font-mono text-[10px]" : ""}`}
+          >
+            {row.value}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/components/ui/tabs.tsx

@@ -0,0 +1,50 @@
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn("inline-flex h-auto items-center gap-2", className)}
+    {...props}
+  />
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-lg px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-muted data-[state=active]:text-foreground data-[state=inactive]:text-muted-foreground data-[state=inactive]:opacity-50",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };

package/src/db.ts

@@ -1,5 +1,5 @@
 import { Database } from "bun:sqlite";
-import type { Log, Span, Trace, TraceDetail } from "./types";
+import type { Log, Session, Span, Trace, TraceDetailRaw } from "./types";
 
 export class DebuggerDb {
   private db: Database;
@@ -13,12 +13,11 @@ export class DebuggerDb {
       return this.db
         .query<Trace, [string, number, number]>(
           `
-          SELECT DISTINCT t.trace_id, t.service_name, t.first_span_name,
-                 t.start_time_unix_nano, t.end_time_unix_nano, t.span_count, t.created_at
-          FROM traces t
-          INNER JOIN spans s ON s.trace_id = t.trace_id
-          WHERE json_extract(s.attributes, '$."agent.session_id"') = ?
-          ORDER BY t.start_time_unix_nano DESC
+          SELECT trace_id, session_id, service_name, first_span_name,
+                 start_time_unix_nano, end_time_unix_nano, span_count, created_at
+          FROM traces
+          WHERE session_id = ?
+          ORDER BY start_time_unix_nano ASC
           LIMIT ? OFFSET ?
           `,
         )
@@ -28,7 +27,7 @@ export class DebuggerDb {
     return this.db
       .query<Trace, [number, number]>(
         `
-        SELECT trace_id, service_name, first_span_name,
+        SELECT trace_id, session_id, service_name, first_span_name,
                start_time_unix_nano, end_time_unix_nano, span_count, created_at
         FROM traces
         ORDER BY start_time_unix_nano DESC
@@ -38,9 +37,13 @@ export class DebuggerDb {
       .all(limit, offset);
   }
 
-  getTraceById(traceId: string): TraceDetail {
+  getTraceById(traceId: string): TraceDetailRaw {
     const trace = this.db
-      .query<Trace, [string]>(`SELECT * FROM traces WHERE trace_id = ?`)
+      .query<Trace, [string]>(
+        `SELECT trace_id, session_id, service_name, first_span_name,
+                start_time_unix_nano, end_time_unix_nano, span_count, created_at
+         FROM traces WHERE trace_id = ?`,
+      )
       .get(traceId);
 
     const spans = this.db
@@ -57,4 +60,24 @@ export class DebuggerDb {
 
     return { trace: trace ?? null, spans, logs };
   }
+
+  listSessions(limit = 50, offset = 0): Session[] {
+    return this.db
+      .query<Session, [number, number]>(
+        `
+        SELECT
+          s.session_id,
+          COUNT(DISTINCT t.trace_id) as trace_count,
+          MIN(t.start_time_unix_nano) as first_trace_time,
+          MAX(t.end_time_unix_nano) as last_trace_time
+        FROM sessions s
+        LEFT JOIN traces t ON t.session_id = s.session_id
+        GROUP BY s.session_id
+        HAVING trace_count > 0
+        ORDER BY last_trace_time DESC
+        LIMIT ? OFFSET ?
+        `,
+      )
+      .all(limit, offset);
+  }
 }

package/src/index.ts

@@ -13,8 +13,14 @@ const otlpPort = Number.parseInt(
   10,
 );
 const dbPath = process.env.DB_PATH ?? "./traces.db";
+const agentName = process.env.AGENT_NAME ?? "Agent";
 
-const { server, otlpServer } = startDebuggerServer({ port, otlpPort, dbPath });
+const { server, otlpServer } = startDebuggerServer({
+  port,
+  otlpPort,
+  dbPath,
+  agentName,
+});
 
 console.log(`OTLP server running at ${otlpServer.url}`);
 console.log(`Debugger running at ${server.url}`);

package/src/lib/spanTypeDetector.ts

@@ -0,0 +1,35 @@
+import type { Span } from "../types";
+
+export type SpanType = "chat" | "tool_call" | "subagent" | "other";
+
+function parseAttributes(attrs: string | null): Record<string, unknown> {
+  if (!attrs) return {};
+  try {
+    return JSON.parse(attrs);
+  } catch {
+    return {};
+  }
+}
+
+export function detectSpanType(span: Span): SpanType {
+  const attrs = parseAttributes(span.attributes);
+
+  // Check for tool call
+  if (span.name === "agent.tool_call") {
+    const toolName = attrs["tool.name"];
+
+    // Subagent is a special type of tool call (Task tool)
+    if (toolName === "Task") {
+      return "subagent";
+    }
+
+    return "tool_call";
+  }
+
+  // Check for chat/LLM span
+  if (span.name.startsWith("chat") && "gen_ai.input.messages" in attrs) {
+    return "chat";
+  }
+
+  return "other";
+}

package/src/lib/timelineCalculator.ts

@@ -0,0 +1,32 @@
+export interface TimelineBar {
+  leftPercent: number;
+  widthPercent: number;
+}
+
+export function calculateTimelineBar(
+  spanStart: number,
+  spanEnd: number,
+  traceStart: number,
+  traceEnd: number,
+): TimelineBar {
+  const traceDuration = traceEnd - traceStart;
+
+  // Handle edge case of zero duration trace
+  if (traceDuration === 0) {
+    return { leftPercent: 0, widthPercent: 100 };
+  }
+
+  const spanOffset = spanStart - traceStart;
+  const spanDuration = spanEnd - spanStart;
+
+  const leftPercent = (spanOffset / traceDuration) * 100;
+  const widthPercent = (spanDuration / traceDuration) * 100;
+
+  // Ensure minimum visible width for very short spans
+  const minWidth = 0.5;
+
+  return {
+    leftPercent: Math.max(0, Math.min(100, leftPercent)),
+    widthPercent: Math.max(minWidth, Math.min(100 - leftPercent, widthPercent)),
+  };
+}

package/src/lib/turnExtractor.ts

@@ -0,0 +1,132 @@
+import type { Log, Span } from "../types";
+
+export interface TurnMessages {
+  userInput: string | null;
+  llmOutput: string | null;
+}
+
+export interface TokenUsage {
+  inputTokens: number;
+  outputTokens: number;
+  totalTokens: number;
+}
+
+interface Message {
+  role: string;
+  content: string | Array<{ type: string; text?: string }>;
+}
+
+function parseAttributes(attrs: string | null): Record<string, unknown> {
+  if (!attrs) return {};
+  try {
+    return JSON.parse(attrs);
+  } catch {
+    return {};
+  }
+}
+
+function extractMessageContent(message: Message): string {
+  if (typeof message.content === "string") {
+    return message.content;
+  }
+  if (Array.isArray(message.content)) {
+    return message.content
+      .map((block) => block.text || "")
+      .filter(Boolean)
+      .join("\n");
+  }
+  return "";
+}
+
+export function extractTurnMessages(spans: Span[], logs?: Log[]): TurnMessages {
+  const result: TurnMessages = {
+    userInput: null,
+    llmOutput: null,
+  };
+
+  // Extract user input from logs
+  if (logs && logs.length > 0) {
+    try {
+      const userMessageLog = logs.find(
+        (log) => log.body === "User message received",
+      );
+      if (userMessageLog) {
+        const attrs = parseAttributes(userMessageLog.attributes);
+        if (attrs["log.messagePreview"]) {
+          result.userInput = attrs["log.messagePreview"] as string;
+        }
+      }
+    } catch (error) {
+      console.error("Failed to extract user input from logs:", error);
+    }
+  }
+
+  // Find all chat spans
+  const chatSpans = spans
+    .filter((span) => {
+      const attrs = parseAttributes(span.attributes);
+      return span.name.startsWith("chat") && "gen_ai.input.messages" in attrs;
+    })
+    .sort((a, b) => a.start_time_unix_nano - b.start_time_unix_nano);
+
+  if (chatSpans.length === 0) return result;
+
+  // Extract LLM output from last chat span
+  try {
+    const lastSpan = chatSpans[chatSpans.length - 1];
+    if (!lastSpan) return result;
+
+    const attrs = parseAttributes(lastSpan.attributes);
+    const outputMessages = attrs["gen_ai.output.messages"];
+
+    if (outputMessages) {
+      const messages: Message[] =
+        typeof outputMessages === "string"
+          ? JSON.parse(outputMessages)
+          : outputMessages;
+
+      // Look for assistant message - handle both "assistant" (OpenAI) and "ai" (LangChain) roles
+      const assistantMessage = messages
+        .filter((msg) => msg.role === "assistant" || msg.role === "ai")
+        .pop();
+
+      if (assistantMessage) {
+        result.llmOutput = extractMessageContent(assistantMessage);
+      }
+    }
+  } catch (error) {
+    console.error("Failed to extract LLM output:", error);
+  }
+
+  return result;
+}
+
+export function aggregateTokenUsage(spans: Span[]): TokenUsage {
+  const usage: TokenUsage = {
+    inputTokens: 0,
+    outputTokens: 0,
+    totalTokens: 0,
+  };
+
+  for (const span of spans) {
+    const attrs = parseAttributes(span.attributes);
+
+    const inputTokens = attrs["gen_ai.usage.input_tokens"];
+    const outputTokens = attrs["gen_ai.usage.output_tokens"];
+
+    if (typeof inputTokens === "number") {
+      usage.inputTokens += inputTokens;
+    }
+
+    if (typeof outputTokens === "number") {
+      usage.outputTokens += outputTokens;
+    }
+  }
+
+  usage.totalTokens = usage.inputTokens + usage.outputTokens;
+  return usage;
+}
+
+export function countToolCalls(spans: Span[]): number {
+  return spans.filter((span) => span.name === "agent.tool_call").length;
+}