@townco/debugger 0.1.32 → 0.1.34

package/src/components/SpanDetailsPanel.tsx

@@ -211,7 +211,7 @@ export function SpanDetailsPanel({
   const CollapsibleText = ({ text }: { text: string }) => {
     const [expanded, setExpanded] = useState(false);
     const shouldCollapse = text.length > 300;
-    const preview = shouldCollapse ? text.slice(0, 300) + "..." : text;
+    const preview = shouldCollapse ? `${text.slice(0, 300)}...` : text;
 
     if (!shouldCollapse) {
       return (
@@ -247,6 +247,7 @@ export function SpanDetailsPanel({
   }: {
     title: string;
     subtitle?: string;
+    // biome-ignore lint/suspicious/noExplicitAny: dynamic OTEL content
     content: any;
     borderColor: string;
     bgColor: string;
@@ -303,11 +304,14 @@ export function SpanDetailsPanel({
     result,
   }: {
     toolName: string;
+    // biome-ignore lint/suspicious/noExplicitAny: dynamic OTEL content
     input: any;
+    // biome-ignore lint/suspicious/noExplicitAny: dynamic OTEL content
     result?: any;
   }) => {
     const [expanded, setExpanded] = useState(false);
 
+    // biome-ignore lint/suspicious/noExplicitAny: dynamic OTEL content
     const parseContent = (content: any) => {
       if (typeof content === "string") {
         try {
@@ -319,6 +323,7 @@ export function SpanDetailsPanel({
       return content;
     };
 
+    // biome-ignore lint/suspicious/noExplicitAny: dynamic OTEL content
     const formatContent = (content: any) => {
       const parsed = parseContent(content);
       return typeof parsed === "string"
@@ -386,6 +391,7 @@ export function SpanDetailsPanel({
 
       if (!Array.isArray(messages) || messages.length === 0) return null;
 
+      // biome-ignore lint/suspicious/noExplicitAny: dynamic OTEL content
       const parseToolInput = (input: any): any => {
         if (typeof input === "string") {
           try {
@@ -397,6 +403,7 @@ export function SpanDetailsPanel({
         return input;
       };
 
+      // biome-ignore lint/suspicious/noExplicitAny: dynamic OTEL content
       const renderContent = (content: any) => {
         // Handle string content - parse if it looks like JSON array
         if (typeof content === "string") {
@@ -418,15 +425,18 @@ export function SpanDetailsPanel({
         // Handle array content (can contain text and tool_use blocks)
         if (Array.isArray(content)) {
           // First, group tool_use with their corresponding tool_result
+          // biome-ignore lint/suspicious/noExplicitAny: dynamic OTEL content
           const processedBlocks: any[] = [];
           const usedResultIndices = new Set<number>();
 
+          // biome-ignore lint/suspicious/noExplicitAny: dynamic OTEL content
           content.forEach((block: any, blockIndex: number) => {
             if (block.type === "text") {
               processedBlocks.push({ type: "text", block, index: blockIndex });
             } else if (block.type === "tool_use") {
               // Find the corresponding tool_result
               const resultIndex = content.findIndex(
+                // biome-ignore lint/suspicious/noExplicitAny: dynamic OTEL content
                 (b: any, idx: number) =>
                   b.type === "tool_result" &&
                   b.tool_use_id === block.id &&
@@ -464,6 +474,7 @@ export function SpanDetailsPanel({
 
           return (
             <div className="flex flex-col gap-2">
+              {/* biome-ignore lint/suspicious/noExplicitAny: dynamic OTEL content */}
               {processedBlocks.map((item: any) => {
                 if (item.type === "text") {
                   return (
@@ -544,9 +555,11 @@ export function SpanDetailsPanel({
           <div className="p-3 flex flex-col gap-3">
             {(() => {
               // Group tool_use (from AI messages) with tool results (from tool messages)
+              // biome-ignore lint/suspicious/noExplicitAny: dynamic OTEL content
               const processedMessages: any[] = [];
               const usedToolMessageIndices = new Set<number>();
 
+              // biome-ignore lint/suspicious/noExplicitAny: dynamic OTEL content
               messages.forEach((message: any, msgIndex: number) => {
                 const role = message.role || "unknown";
 
@@ -566,7 +579,9 @@ export function SpanDetailsPanel({
 
                   if (Array.isArray(parsedContent)) {
                     // Extract tool_use blocks
+                    // biome-ignore lint/suspicious/noExplicitAny: dynamic OTEL content
                     const toolUses: any[] = [];
+                    // biome-ignore lint/suspicious/noExplicitAny: dynamic OTEL content
                     const nonToolBlocks: any[] = [];
 
                     for (const block of parsedContent) {
@@ -726,6 +741,7 @@ export function SpanDetailsPanel({
               </h2>
               <Dialog.Close asChild>
                 <button
+                  type="button"
                   className="size-6 flex items-center justify-center rounded hover:bg-muted transition-colors"
                   aria-label="Close"
                 >
@@ -737,6 +753,7 @@ export function SpanDetailsPanel({
             {/* Tabs */}
             <div className="flex items-center gap-2">
               <button
+                type="button"
                 onClick={() => setActiveTab("run")}
                 className={cn(
                   "px-3 py-1 text-sm font-medium rounded-lg transition-colors",
@@ -748,6 +765,7 @@ export function SpanDetailsPanel({
                 Run
               </button>
               <button
+                type="button"
                 onClick={() => setActiveTab("logs")}
                 className={cn(
                   "px-3 py-1 text-sm font-medium rounded-lg transition-colors",
@@ -759,6 +777,7 @@ export function SpanDetailsPanel({
                 Logs
               </button>
               <button
+                type="button"
                 onClick={() => setActiveTab("feedback")}
                 className={cn(
                   "px-3 py-1 text-sm font-medium rounded-lg transition-colors",

package/src/components/SpanTimeline.tsx

@@ -55,7 +55,7 @@ interface SpanRowProps {
   traceEnd: number;
 }
 
-function SpanRow({ span, traceStart, traceEnd }: SpanRowProps) {
+function _SpanRow({ span, traceStart, traceEnd }: SpanRowProps) {
   const [expanded, setExpanded] = useState(false);
   const [showRaw, setShowRaw] = useState(false);
 
@@ -119,10 +119,19 @@ function SpanRow({ span, traceStart, traceEnd }: SpanRowProps) {
 
   return (
     <div>
+      {/* biome-ignore lint/a11y/useSemanticElements: complex layout with nested content */}
       <div
+        role="button"
+        tabIndex={hasDetails ? 0 : undefined}
         className={`py-1 px-2 ${hasDetails ? "cursor-pointer" : ""}`}
         style={{ paddingLeft: span.depth * 20 + 8 }}
         onClick={() => hasDetails && setExpanded(!expanded)}
+        onKeyDown={(e) => {
+          if (hasDetails && (e.key === "Enter" || e.key === " ")) {
+            e.preventDefault();
+            setExpanded(!expanded);
+          }
+        }}
       >
         <div className="flex items-center hover:bg-muted rounded">
           <SpanIcon type={spanType} className="mr-2" />
@@ -236,7 +245,7 @@ function SpanRow({ span, traceStart, traceEnd }: SpanRowProps) {
       )}
 
       {span.children.map((child) => (
-        <SpanRow
+        <_SpanRow
           key={child.span_id}
           span={child}
           traceStart={traceStart}
@@ -301,8 +310,8 @@ export function SpanTimeline({
           <div className="flex-1 overflow-x-auto">
             {/* Timeline header with time markers */}
             <div className="h-6 px-4 py-1 bg-muted border-b border-border flex items-center text-[10px] text-muted-foreground gap-16">
-              {timeMarkers.map((marker, i) => (
-                <span key={i} className="w-[260px]">
+              {timeMarkers.map((marker) => (
+                <span key={marker} className="w-[260px]">
                   {marker}
                 </span>
               ))}
@@ -372,10 +381,19 @@ function RenderSpanTreeRow({
 
   return (
     <>
+      {/* biome-ignore lint/a11y/useSemanticElements: complex layout row */}
       <div
+        role="button"
+        tabIndex={0}
         className="h-[38px] px-4 py-2 border-b border-border flex items-center gap-2 hover:bg-muted/50 cursor-pointer transition-colors"
         style={{ paddingLeft: `${span.depth * 20 + 16}px` }}
         onClick={() => onSpanClick(span)}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onSpanClick(span);
+          }
+        }}
       >
         <SpanIcon type={spanType} className="shrink-0" />
         <span className="text-sm truncate flex-1">{displayName}</span>
@@ -422,9 +440,18 @@ function RenderSpanTreeTimeline({
 
   return (
     <>
+      {/* biome-ignore lint/a11y/useSemanticElements: complex timeline bar layout */}
       <div
+        role="button"
+        tabIndex={0}
         className="h-[38px] border-b border-border relative flex items-center px-4 hover:bg-muted/50 cursor-pointer transition-colors"
         onClick={() => onSpanClick(span)}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onSpanClick(span);
+          }
+        }}
       >
         <div
           className={`absolute h-[18px] rounded ${barColor} flex items-center px-1 pointer-events-none`}

package/src/components/SpanTree.tsx

@@ -53,7 +53,7 @@ function SpanRow({
   span: SpanNode;
   onSpanClick: (span: SpanNode) => void;
 }) {
-  const [expanded, setExpanded] = useState(false);
+  const [expanded, _setExpanded] = useState(false);
   const [showRaw, setShowRaw] = useState(false);
 
   const attrs = parseAttributes(span.attributes);
@@ -104,10 +104,19 @@ function SpanRow({
 
   return (
     <div>
+      {/* biome-ignore lint/a11y/useSemanticElements: complex tree layout */}
       <div
+        role="button"
+        tabIndex={hasDetails ? 0 : undefined}
         className={`flex items-center py-1 px-2 hover:bg-muted rounded ${hasDetails ? "cursor-pointer" : ""}`}
         style={{ paddingLeft: span.depth * 20 + 8 }}
         onClick={() => onSpanClick(span)}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onSpanClick(span);
+          }
+        }}
       >
         <span className={`${statusColor} mr-2`}>●</span>
         <span className="font-medium flex-1 truncate">{displayName}</span>

package/src/components/TurnMetadataPanel.tsx

@@ -1,4 +1,3 @@
-import { Card, CardContent } from "@/components/ui/card";
 import type { TokenUsage } from "../lib/turnExtractor";
 
 interface TurnMetadataPanelProps {

package/src/components/UnifiedTimeline.tsx

@@ -22,20 +22,6 @@ function parseAttributes(attrs: string | null): Record<string, unknown> {
   }
 }
 
-// Generate distinct colors for turns
-const TURN_COLORS = [
-  "bg-blue-500/10",
-  "bg-purple-500/10",
-  "bg-green-500/10",
-  "bg-orange-500/10",
-  "bg-pink-500/10",
-  "bg-yellow-500/10",
-  "bg-red-500/10",
-  "bg-indigo-500/10",
-  "bg-teal-500/10",
-  "bg-cyan-500/10",
-];
-
 export function UnifiedTimeline({
   spans,
   traces,
@@ -91,16 +77,6 @@ export function UnifiedTimeline({
     });
   }, [traces, traceData]);
 
-  // Helper to find span node in tree
-  const findSpanNode = (nodes: SpanNode[], spanId: string): SpanNode | null => {
-    for (const node of nodes) {
-      if (node.span_id === spanId) return node;
-      const found = findSpanNode(node.children, spanId);
-      if (found) return found;
-    }
-    return null;
-  };
-
   // Calculate cumulative width for each turn
   const turnLayouts = useMemo(() => {
     let cumulativePercent = 0;
@@ -130,18 +106,16 @@ export function UnifiedTimeline({
   }, [turnBoundaries]);
 
   // Calculate global timeline bounds
-  const globalStart = useMemo(() => {
+  const _globalStart = useMemo(() => {
     if (spans.length === 0) return 0;
     return Math.min(...spans.map((s) => s.start_time_unix_nano));
   }, [spans]);
 
-  const globalEnd = useMemo(() => {
+  const _globalEnd = useMemo(() => {
     if (spans.length === 0) return 0;
     return Math.max(...spans.map((s) => s.end_time_unix_nano));
   }, [spans]);
 
-  const totalDurationMs = (globalEnd - globalStart) / 1_000_000;
-
   // Zoom handler (scroll is now native)
   const handleWheel = useCallback((e: React.WheelEvent) => {
     if (e.ctrlKey || e.metaKey) {
@@ -187,7 +161,7 @@ export function UnifiedTimeline({
     });
 
     return filtered;
-  }, [spanTree, spans, turnLayouts]);
+  }, [spanTree, spans, turnLayouts, flattenSpanTree]);
 
   if (spans.length === 0) {
     return (
@@ -203,6 +177,7 @@ export function UnifiedTimeline({
         {/* Zoom controls */}
         <div className="flex items-center gap-4 text-sm">
           <button
+            type="button"
             onClick={() => setZoom((prev) => Math.max(1, prev * 0.8))}
             className="px-3 py-1 border border-border rounded hover:bg-muted"
           >
@@ -212,12 +187,14 @@ export function UnifiedTimeline({
             {(zoom * 100).toFixed(0)}%
           </span>
           <button
+            type="button"
             onClick={() => setZoom((prev) => Math.min(10, prev * 1.2))}
             className="px-3 py-1 border border-border rounded hover:bg-muted"
           >
             Zoom In
           </button>
           <button
+            type="button"
             onClick={() => setZoom(1)}
             className="px-3 py-1 border border-border rounded hover:bg-muted"
           >
@@ -290,8 +267,11 @@ export function UnifiedTimeline({
                 }
 
                 return (
+                  // biome-ignore lint/a11y/useSemanticElements: complex timeline layout
                   <div
                     key={span.span_id}
+                    role="button"
+                    tabIndex={0}
                     className={`h-[38px] px-3 py-2 border-b border-border flex items-center gap-2 cursor-pointer transition-colors ${
                       hoveredSpanId === span.span_id ? "bg-muted" : ""
                     }`}
@@ -299,6 +279,12 @@ export function UnifiedTimeline({
                     onMouseEnter={() => setHoveredSpanId(span.span_id)}
                     onMouseLeave={() => setHoveredSpanId(null)}
                     onClick={() => setSelectedSpan(node)}
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault();
+                        setSelectedSpan(node);
+                      }
+                    }}
                   >
                     <SpanIcon type={spanType} className="w-4 h-4 shrink-0" />
                     <span className="text-xs truncate">{displayName}</span>
@@ -338,11 +324,6 @@ export function UnifiedTimeline({
                     left: turn.leftPercent * zoom,
                   };
 
-                  // Agent message positioned at end of turn (100% of turn width)
-                  const agentPos = {
-                    left: (turn.leftPercent + turn.widthPercent) * zoom,
-                  };
-
                   return (
                     <div key={trace.trace_id}>
                       {/* User message bubble - positioned at top, aligned to start of turn */}
@@ -568,7 +549,6 @@ export function UnifiedTimeline({
                     );
                   }
 
-                  const attrs = parseAttributes(span.attributes);
                   const spanType = detectSpanType(span);
 
                   // Find which turn this span belongs to
@@ -610,8 +590,11 @@ export function UnifiedTimeline({
                     1_000_000;
 
                   return (
+                    // biome-ignore lint/a11y/useSemanticElements: positioned timeline bar
                     <div
                       key={span.span_id}
+                      role="button"
+                      tabIndex={0}
                       className={`absolute h-6 ${barColor} rounded cursor-pointer transition-all flex items-center justify-start px-2 ${
                         hoveredSpanId === span.span_id ? "brightness-110" : ""
                       }`}
@@ -625,6 +608,12 @@ export function UnifiedTimeline({
                       onClick={() => {
                         setSelectedSpan(node);
                       }}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter" || e.key === " ") {
+                          e.preventDefault();
+                          setSelectedSpan(node);
+                        }
+                      }}
                     >
                       <span className="text-[11px] text-white font-medium whitespace-nowrap">
                         {durationMs.toFixed(2)}ms

package/src/components/ui/button.tsx

@@ -1,6 +1,6 @@
 import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
-import * as React from "react";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 

package/src/components/ui/card.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 

package/src/components/ui/checkbox.tsx

@@ -14,6 +14,7 @@ interface CheckboxProps {
 const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(
   ({ id, checked = false, onCheckedChange, disabled, className }, ref) => {
     return (
+      // biome-ignore lint/a11y/useSemanticElements: custom checkbox component using button for styling control
       <button
         ref={ref}
         type="button"

package/src/components/ui/input.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 

package/src/components/ui/label.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import * as LabelPrimitive from "@radix-ui/react-label";
-import * as React from "react";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 

package/src/components/ui/select.tsx

@@ -2,7 +2,7 @@
 
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
-import * as React from "react";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 

package/src/components/ui/textarea.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 

package/src/frontend.tsx

@@ -9,6 +9,7 @@ import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { App } from "./App";
 
+// biome-ignore lint/style/noNonNullAssertion: root element always exists
 const elem = document.getElementById("root")!;
 const app = (
   <StrictMode>
@@ -18,6 +19,7 @@ const app = (
 
 if (import.meta.hot) {
   // With hot module reloading, `import.meta.hot.data` is persisted.
+  // biome-ignore lint/suspicious/noAssignInExpressions: HMR pattern
   const root = (import.meta.hot.data.root ??= createRoot(elem));
   root.render(app);
 } else {

package/src/lib/metrics.test.ts

@@ -29,10 +29,12 @@ describe("metrics", () => {
             "gen_ai.usage.input_tokens": 100,
             "gen_ai.usage.output_tokens": 50,
           }),
+          // biome-ignore lint/suspicious/noExplicitAny: test mock
         } as any,
         {
           name: "tool_call:search",
           attributes: "{}",
+          // biome-ignore lint/suspicious/noExplicitAny: test mock
         } as any,
       ];
 

package/src/lib/turnExtractor.ts

@@ -117,12 +117,40 @@ export function extractTurnMessages(spans: Span[], logs?: Log[]): TurnMessages {
       } else if (event.type === "tool_call") {
         const toolName = attrs["tool.name"] as string;
         if (toolName) {
+          // Parse tool input and output
+          let toolInput: unknown = null;
+          let toolOutput: unknown = null;
+
+          const rawInput = attrs["tool.input"];
+          if (rawInput) {
+            try {
+              toolInput =
+                typeof rawInput === "string" ? JSON.parse(rawInput) : rawInput;
+            } catch {
+              toolInput = rawInput;
+            }
+          }
+
+          const rawOutput = attrs["tool.output"];
+          if (rawOutput) {
+            try {
+              toolOutput =
+                typeof rawOutput === "string"
+                  ? JSON.parse(rawOutput)
+                  : rawOutput;
+            } catch {
+              toolOutput = rawOutput;
+            }
+          }
+
           result.agentMessages.push({
             content: toolName,
             spanId: event.span.span_id,
             timestamp: event.span.end_time_unix_nano,
             type: "tool_call",
             toolName,
+            toolInput,
+            toolOutput,
           });
         }
       }