@townco/debugger 0.1.2 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@townco/debugger",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "type": "module",
   "engines": {
     "bun": ">=1.3.0"
@@ -14,7 +14,7 @@
     "check": "tsc --noEmit"
   },
   "dependencies": {
-    "@townco/otlp-server": "0.1.2",
+    "@townco/otlp-server": "0.1.4",
     "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-slot": "^1.2.3",
@@ -27,7 +27,7 @@
     "tailwind-merge": "^3.3.1"
   },
   "devDependencies": {
-    "@townco/tsconfig": "0.1.44",
+    "@townco/tsconfig": "0.1.46",
     "@types/bun": "latest",
     "@types/react": "^19",
     "@types/react-dom": "^19",

package/src/components/AttributeViewer.tsx

@@ -1,14 +1,34 @@
 interface AttributeViewerProps {
   label: string;
   data: string | null;
+  excludeKeys?: string[];
 }
 
-export function AttributeViewer({ label, data }: AttributeViewerProps) {
+export function AttributeViewer({
+  label,
+  data,
+  excludeKeys = [],
+}: AttributeViewerProps) {
   if (!data || data === "{}" || data === "[]") return null;
 
   let parsed: unknown;
   try {
     parsed = JSON.parse(data);
+
+    // Filter out excluded keys
+    if (
+      excludeKeys.length > 0 &&
+      typeof parsed === "object" &&
+      parsed !== null
+    ) {
+      const filtered = { ...parsed } as Record<string, unknown>;
+      for (const key of excludeKeys) {
+        delete filtered[key];
+      }
+      // Return null if no keys left after filtering
+      if (Object.keys(filtered).length === 0) return null;
+      parsed = filtered;
+    }
   } catch {
     parsed = data;
   }

package/src/components/LogList.tsx

@@ -2,6 +2,31 @@ import { useState } from "react";
 import type { Log } from "../types";
 import { AttributeViewer } from "./AttributeViewer";
 
+function LogMetadataViewer({ attributes }: { attributes: string | null }) {
+  if (!attributes) return null;
+
+  try {
+    const parsed = JSON.parse(attributes);
+    const metadataStr = parsed["log.metadata"];
+    if (!metadataStr) return null;
+
+    const metadata = JSON.parse(metadataStr);
+
+    return (
+      <div className="mb-2">
+        <div className="text-xs text-muted-foreground uppercase font-medium">
+          Metadata
+        </div>
+        <pre className="text-xs bg-muted p-2 rounded overflow-x-auto whitespace-pre-wrap">
+          {JSON.stringify(metadata, null, 2)}
+        </pre>
+      </div>
+    );
+  } catch {
+    return null;
+  }
+}
+
 function getSeverityColor(severityNumber: number): string {
   if (severityNumber >= 17) return "text-red-500"; // ERROR/FATAL
   if (severityNumber >= 13) return "text-yellow-500"; // WARN
@@ -40,7 +65,12 @@ function LogRow({ log }: { log: Log }) {
       {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} />
+          <LogMetadataViewer attributes={log.attributes} />
+          <AttributeViewer
+            label="Attributes"
+            data={log.attributes}
+            excludeKeys={["log.metadata"]}
+          />
           <AttributeViewer label="Resource" data={log.resource_attributes} />
           {log.span_id && (
             <div className="text-xs text-muted-foreground">

package/src/components/SpanTree.tsx

@@ -57,9 +57,28 @@ function SpanRow({ span }: { span: SpanNode }) {
     span.name.startsWith("chat") && "gen_ai.input.messages" in attrs;
   const isSpecialSpan = isToolCall || isChatSpan;
 
+  // Helper to get display name for tool calls (with special handling for Task/subagent)
+  const getToolDisplayName = (): string => {
+    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;
+  };
+
   // Get display name based on span type
   const displayName = isToolCall
-    ? (attrs["tool.name"] as string) || span.name
+    ? getToolDisplayName()
     : isChatSpan
       ? (attrs["gen_ai.request.model"] as string) || span.name
       : span.name;