@townco/debugger 0.1.13 → 0.1.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@townco/debugger",
-  "version": "0.1.13",
+  "version": "0.1.21",
   "type": "module",
   "engines": {
     "bun": ">=1.3.0"
@@ -19,8 +19,8 @@
     "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-tabs": "^1.1.0",
-    "@townco/otlp-server": "0.1.13",
-    "@townco/ui": "0.1.58",
+    "@townco/otlp-server": "0.1.21",
+    "@townco/ui": "0.1.66",
     "bun-plugin-tailwind": "^0.1.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -30,7 +30,7 @@
     "tailwind-merge": "^3.3.1"
   },
   "devDependencies": {
-    "@townco/tsconfig": "0.1.55",
+    "@townco/tsconfig": "0.1.63",
     "@types/bun": "latest",
     "@types/react": "^19",
     "@types/react-dom": "^19",

package/src/components/SpanDetailsPanel.tsx

@@ -168,6 +168,550 @@ export function SpanDetailsPanel({
   const logCount = countLogs(span);
   const tokenCount = countTokens(span);
 
+  const JsonSection = ({ title, data }: { title: string; data: unknown }) => {
+    if (!data) return null;
+
+    try {
+      const jsonString = typeof data === "string" ? data : JSON.stringify(data);
+      const parsed = JSON.parse(jsonString);
+
+      return (
+        <div className="bg-muted/50 border border-border rounded-lg overflow-hidden">
+          <div className="p-3 border-b border-border">
+            <h3 className="text-[8px] font-bold text-muted-foreground uppercase tracking-wider">
+              {title}
+            </h3>
+          </div>
+          <div className="p-3">
+            <pre className="text-[11px] font-mono text-foreground leading-[14px] whitespace-pre-wrap break-all">
+              {JSON.stringify(parsed, null, 2)}
+            </pre>
+          </div>
+        </div>
+      );
+    } catch {
+      // If parse fails, show raw data
+      return (
+        <div className="bg-muted/50 border border-border rounded-lg overflow-hidden">
+          <div className="p-3 border-b border-border">
+            <h3 className="text-[8px] font-bold text-muted-foreground uppercase tracking-wider">
+              {title}
+            </h3>
+          </div>
+          <div className="p-3">
+            <pre className="text-[11px] font-mono text-foreground leading-[14px] whitespace-pre-wrap break-all">
+              {String(data)}
+            </pre>
+          </div>
+        </div>
+      );
+    }
+  };
+
+  const CollapsibleText = ({ text }: { text: string }) => {
+    const [expanded, setExpanded] = useState(false);
+    const shouldCollapse = text.length > 300;
+    const preview = shouldCollapse ? text.slice(0, 300) + "..." : text;
+
+    if (!shouldCollapse) {
+      return (
+        <div className="text-[11px] text-foreground whitespace-pre-wrap break-words">
+          {text}
+        </div>
+      );
+    }
+
+    return (
+      <div>
+        <div className="text-[11px] text-foreground whitespace-pre-wrap break-words">
+          {expanded ? text : preview}
+        </div>
+        <button
+          type="button"
+          onClick={() => setExpanded(!expanded)}
+          className="text-[10px] text-purple-600 hover:text-purple-700 mt-1 font-medium"
+        >
+          {expanded ? "Show less" : "Show more"}
+        </button>
+      </div>
+    );
+  };
+
+  const CollapsibleToolBlock = ({
+    title,
+    subtitle,
+    content,
+    borderColor,
+    bgColor,
+    badgeColor,
+  }: {
+    title: string;
+    subtitle?: string;
+    content: any;
+    borderColor: string;
+    bgColor: string;
+    badgeColor: string;
+  }) => {
+    const [expanded, setExpanded] = useState(false);
+
+    // Parse content as JSON if it's a string
+    let displayContent = content;
+    if (typeof content === "string") {
+      try {
+        displayContent = JSON.parse(content);
+      } catch {
+        // Keep as string if parsing fails
+      }
+    }
+
+    const contentString =
+      typeof displayContent === "string"
+        ? displayContent
+        : JSON.stringify(displayContent, null, 2);
+
+    return (
+      <div className={`border-l-2 ${borderColor} pl-2 ${bgColor} rounded py-1`}>
+        <button
+          type="button"
+          onClick={() => setExpanded(!expanded)}
+          className="flex items-center gap-2 mb-1 w-full hover:opacity-80 transition-opacity"
+        >
+          <span className={`text-[9px] font-semibold ${badgeColor} uppercase`}>
+            {title}
+          </span>
+          {subtitle && (
+            <span className="text-[10px] text-foreground font-mono">
+              {subtitle}
+            </span>
+          )}
+          <span className="text-[10px] text-muted-foreground ml-auto">
+            {expanded ? "▼" : "▶"}
+          </span>
+        </button>
+        {expanded && (
+          <pre className="text-[10px] font-mono text-muted-foreground whitespace-pre-wrap break-all mt-1">
+            {contentString}
+          </pre>
+        )}
+      </div>
+    );
+  };
+
+  const ToolCallWithResult = ({
+    toolName,
+    input,
+    result,
+  }: {
+    toolName: string;
+    input: any;
+    result?: any;
+  }) => {
+    const [expanded, setExpanded] = useState(false);
+
+    const parseContent = (content: any) => {
+      if (typeof content === "string") {
+        try {
+          return JSON.parse(content);
+        } catch {
+          return content;
+        }
+      }
+      return content;
+    };
+
+    const formatContent = (content: any) => {
+      const parsed = parseContent(content);
+      return typeof parsed === "string"
+        ? parsed
+        : JSON.stringify(parsed, null, 2);
+    };
+
+    return (
+      <div className="border-l-2 border-blue-500 pl-2 bg-blue-500/5 rounded py-1">
+        <button
+          type="button"
+          onClick={() => setExpanded(!expanded)}
+          className="flex items-center gap-2 mb-1 w-full hover:opacity-80 transition-opacity"
+        >
+          <span className="text-[9px] font-semibold text-blue-600 uppercase">
+            Tool Call
+          </span>
+          <span className="text-[10px] text-foreground font-mono">
+            {toolName}
+          </span>
+          <span className="text-[10px] text-muted-foreground ml-auto">
+            {expanded ? "▼" : "▶"}
+          </span>
+        </button>
+        {expanded && (
+          <div className="flex flex-col gap-2 mt-1">
+            {/* Input section */}
+            <div>
+              <div className="text-[9px] font-semibold text-purple-600 uppercase mb-1">
+                Input
+              </div>
+              <pre className="text-[10px] font-mono text-muted-foreground whitespace-pre-wrap break-all bg-background/50 rounded p-2">
+                {formatContent(input)}
+              </pre>
+            </div>
+            {/* Result section */}
+            {result !== undefined && (
+              <div>
+                <div className="text-[9px] font-semibold text-green-600 uppercase mb-1">
+                  Result
+                </div>
+                <pre className="text-[10px] font-mono text-muted-foreground whitespace-pre-wrap break-all bg-background/50 rounded p-2">
+                  {formatContent(result)}
+                </pre>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  const MessageSection = ({
+    title,
+    data,
+  }: {
+    title: string;
+    data: unknown;
+  }) => {
+    if (!data) return null;
+
+    try {
+      const jsonString = typeof data === "string" ? data : JSON.stringify(data);
+      const messages = JSON.parse(jsonString);
+
+      if (!Array.isArray(messages) || messages.length === 0) return null;
+
+      const parseToolInput = (input: any): any => {
+        if (typeof input === "string") {
+          try {
+            return JSON.parse(input);
+          } catch {
+            return input;
+          }
+        }
+        return input;
+      };
+
+      const renderContent = (content: any) => {
+        // Handle string content - parse if it looks like JSON array
+        if (typeof content === "string") {
+          // Try to parse if it looks like a JSON array
+          if (content.trim().startsWith("[")) {
+            try {
+              const parsed = JSON.parse(content);
+              if (Array.isArray(parsed)) {
+                return renderContent(parsed);
+              }
+            } catch {
+              // Not valid JSON, fall through to text display
+            }
+          }
+
+          return <CollapsibleText text={content} />;
+        }
+
+        // Handle array content (can contain text and tool_use blocks)
+        if (Array.isArray(content)) {
+          // First, group tool_use with their corresponding tool_result
+          const processedBlocks: any[] = [];
+          const usedResultIndices = new Set<number>();
+
+          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(
+                (b: any, idx: number) =>
+                  b.type === "tool_result" &&
+                  b.tool_use_id === block.id &&
+                  !usedResultIndices.has(idx),
+              );
+
+              if (resultIndex !== -1) {
+                usedResultIndices.add(resultIndex);
+                processedBlocks.push({
+                  type: "tool_call_with_result",
+                  toolUse: block,
+                  toolResult: content[resultIndex],
+                  index: blockIndex,
+                });
+              } else {
+                // No result found, show just the tool_use
+                processedBlocks.push({
+                  type: "tool_use",
+                  block,
+                  index: blockIndex,
+                });
+              }
+            } else if (
+              block.type === "tool_result" &&
+              !usedResultIndices.has(blockIndex)
+            ) {
+              // Orphaned tool_result (no matching tool_use)
+              processedBlocks.push({
+                type: "tool_result",
+                block,
+                index: blockIndex,
+              });
+            }
+          });
+
+          return (
+            <div className="flex flex-col gap-2">
+              {processedBlocks.map((item: any) => {
+                if (item.type === "text") {
+                  return (
+                    <CollapsibleText key={item.index} text={item.block.text} />
+                  );
+                }
+
+                if (item.type === "tool_call_with_result") {
+                  const parsedInput = parseToolInput(item.toolUse.input);
+                  return (
+                    <ToolCallWithResult
+                      key={item.index}
+                      toolName={item.toolUse.name}
+                      input={parsedInput}
+                      result={item.toolResult.content}
+                    />
+                  );
+                }
+
+                if (item.type === "tool_use") {
+                  const parsedInput = parseToolInput(item.block.input);
+                  return (
+                    <CollapsibleToolBlock
+                      key={item.index}
+                      title="Tool Use"
+                      subtitle={item.block.name}
+                      content={parsedInput}
+                      borderColor="border-purple-500"
+                      bgColor="bg-purple-500/5"
+                      badgeColor="text-purple-600"
+                    />
+                  );
+                }
+
+                if (item.type === "tool_result") {
+                  return (
+                    <CollapsibleToolBlock
+                      key={item.index}
+                      title="Tool Result"
+                      subtitle=""
+                      content={item.block.content}
+                      borderColor="border-green-500"
+                      bgColor="bg-green-500/5"
+                      badgeColor="text-green-600"
+                    />
+                  );
+                }
+
+                // Unknown block type - show as JSON
+                return (
+                  <pre
+                    key={item.index}
+                    className="text-[10px] font-mono text-muted-foreground whitespace-pre-wrap break-all"
+                  >
+                    {JSON.stringify(item.block, null, 2)}
+                  </pre>
+                );
+              })}
+            </div>
+          );
+        }
+
+        // Fallback for other content types
+        return (
+          <pre className="text-[10px] font-mono text-muted-foreground whitespace-pre-wrap break-all">
+            {JSON.stringify(content, null, 2)}
+          </pre>
+        );
+      };
+
+      return (
+        <div className="bg-muted/50 border border-border rounded-lg overflow-hidden">
+          <div className="p-3 border-b border-border">
+            <h3 className="text-[8px] font-bold text-muted-foreground uppercase tracking-wider">
+              {title}
+            </h3>
+          </div>
+          <div className="p-3 flex flex-col gap-3">
+            {(() => {
+              // Group tool_use (from AI messages) with tool results (from tool messages)
+              const processedMessages: any[] = [];
+              const usedToolMessageIndices = new Set<number>();
+
+              messages.forEach((message: any, msgIndex: number) => {
+                const role = message.role || "unknown";
+
+                // Handle AI messages - check for tool_use blocks
+                if (role === "ai") {
+                  const content = message.content;
+                  let parsedContent = content;
+
+                  if (
+                    typeof content === "string" &&
+                    content.trim().startsWith("[")
+                  ) {
+                    try {
+                      parsedContent = JSON.parse(content);
+                    } catch {}
+                  }
+
+                  if (Array.isArray(parsedContent)) {
+                    // Extract tool_use blocks
+                    const toolUses: any[] = [];
+                    const nonToolBlocks: any[] = [];
+
+                    for (const block of parsedContent) {
+                      if (block.type === "tool_use") {
+                        toolUses.push(block);
+                      } else {
+                        nonToolBlocks.push(block);
+                      }
+                    }
+
+                    // Add non-tool content if any
+                    if (nonToolBlocks.length > 0) {
+                      processedMessages.push({
+                        type: "content",
+                        role,
+                        content: nonToolBlocks,
+                        index: msgIndex,
+                      });
+                    }
+
+                    // For each tool_use, find the matching tool message
+                    for (const toolUse of toolUses) {
+                      // Find next unused tool message
+                      let foundToolMessage = false;
+                      for (let i = msgIndex + 1; i < messages.length; i++) {
+                        if (
+                          messages[i].role === "tool" &&
+                          !usedToolMessageIndices.has(i)
+                        ) {
+                          usedToolMessageIndices.add(i);
+                          processedMessages.push({
+                            type: "tool_call_with_result",
+                            toolUse: toolUse,
+                            toolResult: messages[i].content,
+                            index: msgIndex,
+                          });
+                          foundToolMessage = true;
+                          break;
+                        }
+                      }
+
+                      // If no tool message found, show just the tool_use
+                      if (!foundToolMessage) {
+                        processedMessages.push({
+                          type: "tool_use_only",
+                          toolUse: toolUse,
+                          index: msgIndex,
+                        });
+                      }
+                    }
+                  } else {
+                    // Non-array content, render normally
+                    processedMessages.push({
+                      type: "content",
+                      role,
+                      content: parsedContent,
+                      index: msgIndex,
+                    });
+                  }
+                } else if (role === "tool") {
+                  // Skip if already matched, otherwise show as orphan result
+                  if (!usedToolMessageIndices.has(msgIndex)) {
+                    processedMessages.push({
+                      type: "tool_result_only",
+                      content: message.content,
+                      index: msgIndex,
+                    });
+                  }
+                } else {
+                  // Other roles (system, human, user, etc.)
+                  processedMessages.push({
+                    type: "content",
+                    role,
+                    content: message.content,
+                    index: msgIndex,
+                  });
+                }
+              });
+
+              // Render processed messages
+              return processedMessages.map((item, idx) => {
+                if (item.type === "tool_call_with_result") {
+                  return (
+                    <ToolCallWithResult
+                      key={`${item.index}-${idx}`}
+                      toolName={item.toolUse.name}
+                      input={parseToolInput(item.toolUse.input)}
+                      result={item.toolResult}
+                    />
+                  );
+                }
+
+                if (item.type === "tool_use_only") {
+                  return (
+                    <CollapsibleToolBlock
+                      key={`${item.index}-${idx}`}
+                      title="Tool Use"
+                      subtitle={item.toolUse.name}
+                      content={parseToolInput(item.toolUse.input)}
+                      borderColor="border-purple-500"
+                      bgColor="bg-purple-500/5"
+                      badgeColor="text-purple-600"
+                    />
+                  );
+                }
+
+                if (item.type === "tool_result_only") {
+                  return (
+                    <CollapsibleToolBlock
+                      key={`${item.index}-${idx}`}
+                      title="Tool Result"
+                      subtitle=""
+                      content={item.content}
+                      borderColor="border-green-500"
+                      bgColor="bg-green-500/5"
+                      badgeColor="text-green-600"
+                    />
+                  );
+                }
+
+                // Regular content
+                return (
+                  <div
+                    key={`${item.index}-${idx}`}
+                    className="border border-border rounded p-2 bg-background"
+                  >
+                    <div className="flex items-center gap-2 mb-2">
+                      <span className="text-[10px] font-semibold text-muted-foreground uppercase">
+                        {item.role}
+                      </span>
+                    </div>
+                    {renderContent(item.content)}
+                  </div>
+                );
+              });
+            })()}
+          </div>
+        </div>
+      );
+    } catch {
+      // If parse fails, fall back to JSON display
+      return <JsonSection title={title} data={data} />;
+    }
+  };
+
   return (
     <Dialog.Root open={!!span} onOpenChange={(open) => !open && onClose()}>
       <Dialog.Portal>
@@ -292,18 +836,20 @@ export function SpanDetailsPanel({
                     </div>
                   )}
 
-                  {/* Tool Usage */}
-                  {callCount > 0 && (
-                    <div className="border-t border-border flex items-center gap-6 h-9">
-                      <span className="text-xs text-muted-foreground w-24 shrink-0">
-                        Tool Usage
-                      </span>
-                      <span className="text-sm text-foreground">
-                        {toolCount} {toolCount === 1 ? "tool" : "tools"},{" "}
-                        {callCount} tool {callCount === 1 ? "call" : "calls"}
-                      </span>
-                    </div>
-                  )}
+                  {/* Tool Usage - only show for parent spans, not individual tool calls */}
+                  {callCount > 0 &&
+                    spanType !== "tool_call" &&
+                    spanType !== "subagent" && (
+                      <div className="border-t border-border flex items-center gap-6 h-9">
+                        <span className="text-xs text-muted-foreground w-24 shrink-0">
+                          Tool Usage
+                        </span>
+                        <span className="text-sm text-foreground">
+                          {toolCount} {toolCount === 1 ? "tool" : "tools"},{" "}
+                          {callCount} tool {callCount === 1 ? "call" : "calls"}
+                        </span>
+                      </div>
+                    )}
 
                   {/* Logs */}
                   {logCount > 0 && (
@@ -318,21 +864,63 @@ export function SpanDetailsPanel({
                   )}
                 </div>
 
+                {/* Tool Call Input/Output - only show for tool_call and subagent spans */}
+                {(spanType === "tool_call" || spanType === "subagent") && (
+                  <>
+                    <JsonSection title="Input" data={attrs["tool.input"]} />
+                    <JsonSection title="Output" data={attrs["tool.output"]} />
+                  </>
+                )}
+
+                {/* Chat Messages - only show for chat spans */}
+                {spanType === "chat" && (
+                  <>
+                    <MessageSection
+                      title="Input Messages"
+                      data={attrs["gen_ai.input.messages"]}
+                    />
+                    <MessageSection
+                      title="Output Messages"
+                      data={attrs["gen_ai.output.messages"]}
+                    />
+                  </>
+                )}
+
                 {/* Attributes */}
-                {attrs && Object.keys(attrs).length > 0 && (
-                  <div className="bg-muted/50 border border-border rounded-lg overflow-hidden">
-                    <div className="p-3 border-b border-border">
-                      <h3 className="text-[8px] font-bold text-muted-foreground uppercase tracking-wider">
-                        Attributes
-                      </h3>
-                    </div>
-                    <div className="p-3">
-                      <pre className="text-[11px] font-mono text-foreground leading-[14px] whitespace-pre-wrap break-all">
-                        {JSON.stringify(attrs, null, 2)}
-                      </pre>
+                {(() => {
+                  // Filter out span-specific keys
+                  let keysToExclude: string[] = [];
+
+                  if (spanType === "tool_call" || spanType === "subagent") {
+                    keysToExclude = ["tool.name", "tool.input", "tool.output"];
+                  } else if (spanType === "chat") {
+                    keysToExclude = [
+                      "gen_ai.input.messages",
+                      "gen_ai.output.messages",
+                    ];
+                  }
+
+                  const filteredAttrs = { ...attrs };
+                  for (const key of keysToExclude) {
+                    delete filteredAttrs[key];
+                  }
+
+                  // Only show if there are attributes remaining
+                  return Object.keys(filteredAttrs).length > 0 ? (
+                    <div className="bg-muted/50 border border-border rounded-lg overflow-hidden">
+                      <div className="p-3 border-b border-border">
+                        <h3 className="text-[8px] font-bold text-muted-foreground uppercase tracking-wider">
+                          Attributes
+                        </h3>
+                      </div>
+                      <div className="p-3">
+                        <pre className="text-[11px] font-mono text-foreground leading-[14px] whitespace-pre-wrap break-all">
+                          {JSON.stringify(filteredAttrs, null, 2)}
+                        </pre>
+                      </div>
                     </div>
-                  </div>
-                )}
+                  ) : null;
+                })()}
 
                 {/* Resource */}
                 {resourceAttrs && Object.keys(resourceAttrs).length > 0 && (

package/src/server.ts

@@ -35,6 +35,7 @@ export function startDebuggerServer(
   const otlpApp = createOtlpServer({ dbPath });
   const otlpServer = serve({
     fetch: otlpApp.fetch,
+    hostname: Bun.env.BIND_HOST || "localhost",
     port: otlpPort,
   });