@townco/debugger 0.1.66 → 0.1.68

package/src/components/DiagnosticDetailsPanel.tsx

@@ -0,0 +1,1095 @@
+import { X } from "lucide-react";
+import { useState } from "react";
+import { cn } from "@/lib/utils";
+import { detectSpanType } from "../lib/spanTypeDetector";
+import type { Log, SpanNode } from "../types";
+import { SpanIcon } from "./SpanIcon";
+
+interface DiagnosticDetailsPanelProps {
+  span: SpanNode | null;
+  log: Log | null;
+  onClose: () => void;
+  allSpans: SpanNode[];
+}
+
+function parseAttributes(attrs: string | null): Record<string, unknown> {
+  if (!attrs) return {};
+  try {
+    return JSON.parse(attrs);
+  } catch {
+    return {};
+  }
+}
+
+function getDisplayName(span: SpanNode): string {
+  const attrs = parseAttributes(span.attributes);
+  const spanType = detectSpanType(span);
+
+  if (spanType === "tool_call") {
+    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;
+  }
+
+  if (spanType === "chat") {
+    return (attrs["gen_ai.request.model"] as string) || span.name;
+  }
+
+  return span.name;
+}
+
+function findParentSpan(span: SpanNode, allSpans: SpanNode[]): SpanNode | null {
+  if (!span.parent_span_id) return null;
+
+  const findSpan = (spans: SpanNode[]): SpanNode | null => {
+    for (const s of spans) {
+      if (s.span_id === span.parent_span_id) return s;
+      const found = findSpan(s.children);
+      if (found) return found;
+    }
+    return null;
+  };
+
+  return findSpan(allSpans);
+}
+
+function formatDuration(durationMs: number): string {
+  if (durationMs < 1) {
+    return `${(durationMs * 1000).toFixed(2)}μs`;
+  }
+  if (durationMs < 1000) {
+    return `${durationMs.toFixed(2)}ms`;
+  }
+  return `${(durationMs / 1000).toFixed(2)}s`;
+}
+
+function formatTimestamp(timestampNano: number): string {
+  const date = new Date(timestampNano / 1_000_000);
+  return date.toLocaleString("en-US", {
+    month: "numeric",
+    day: "numeric",
+    year: "numeric",
+    hour: "numeric",
+    minute: "numeric",
+    second: "numeric",
+    hour12: true,
+  });
+}
+
+function countToolUsage(span: SpanNode): {
+  toolCount: number;
+  callCount: number;
+} {
+  const uniqueTools = new Set<string>();
+  let totalCalls = 0;
+
+  const traverse = (node: SpanNode) => {
+    const attrs = parseAttributes(node.attributes);
+    if (node.name === "agent.tool_call") {
+      const toolName = attrs["tool.name"] as string;
+      if (toolName) {
+        uniqueTools.add(toolName);
+        totalCalls++;
+      }
+    }
+    for (const child of node.children) {
+      traverse(child);
+    }
+  };
+
+  traverse(span);
+  return { toolCount: uniqueTools.size, callCount: totalCalls };
+}
+
+function countLogs(span: SpanNode): number {
+  let count = 0;
+  const traverse = (node: SpanNode) => {
+    if (node.events) {
+      try {
+        const events = JSON.parse(node.events);
+        count += Array.isArray(events) ? events.length : 0;
+      } catch {
+        // Ignore parse errors
+      }
+    }
+    for (const child of node.children) {
+      traverse(child);
+    }
+  };
+  traverse(span);
+  return count;
+}
+
+function countTokens(span: SpanNode): number {
+  let tokens = 0;
+  const traverse = (node: SpanNode) => {
+    const attrs = parseAttributes(node.attributes);
+    const inputTokens = attrs["gen_ai.usage.input_tokens"] as number;
+    const outputTokens = attrs["gen_ai.usage.output_tokens"] as number;
+    if (inputTokens) tokens += inputTokens;
+    if (outputTokens) tokens += outputTokens;
+    for (const child of node.children) {
+      traverse(child);
+    }
+  };
+  traverse(span);
+  return tokens;
+}
+
+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-2 border-b border-border">
+          <h3 className="text-[9px] font-bold text-muted-foreground uppercase tracking-wider">
+            {title}
+          </h3>
+        </div>
+        <div className="p-3">
+          <pre className="text-xs font-mono text-foreground 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-2 border-b border-border">
+          <h3 className="text-[9px] font-bold text-muted-foreground uppercase tracking-wider">
+            {title}
+          </h3>
+        </div>
+        <div className="p-3">
+          <pre className="text-xs font-mono text-foreground 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-xs text-foreground whitespace-pre-wrap break-words">
+        {text}
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <div className="text-xs 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;
+  // biome-ignore lint/suspicious/noExplicitAny: dynamic OTEL content
+  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;
+  // 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 {
+        return JSON.parse(content);
+      } catch {
+        return content;
+      }
+    }
+    return content;
+  };
+
+  // biome-ignore lint/suspicious/noExplicitAny: dynamic OTEL 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;
+
+    // biome-ignore lint/suspicious/noExplicitAny: dynamic OTEL content
+    const parseToolInput = (input: any): any => {
+      if (typeof input === "string") {
+        try {
+          return JSON.parse(input);
+        } catch {
+          return input;
+        }
+      }
+      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") {
+        // 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
+        // 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 &&
+                !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">
+            {/* biome-ignore lint/suspicious/noExplicitAny: dynamic OTEL content */}
+            {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-2 border-b border-border">
+          <h3 className="text-[9px] 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)
+            // 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";
+
+              // 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
+                  // 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) {
+                    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} />;
+  }
+};
+
+function SpanDetails({
+  span,
+  allSpans,
+}: {
+  span: SpanNode;
+  allSpans: SpanNode[];
+}) {
+  const [activeTab, setActiveTab] = useState<"run" | "logs" | "feedback">(
+    "run",
+  );
+
+  const spanType = detectSpanType(span);
+  const parentSpan = findParentSpan(span, allSpans);
+  const attrs = parseAttributes(span.attributes);
+  const resourceAttrs = parseAttributes(span.resource_attributes);
+  const { toolCount, callCount } = countToolUsage(span);
+  const logCount = countLogs(span);
+  const tokenCount = countTokens(span);
+
+  return (
+    <div className="flex flex-col gap-4">
+      {/* 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",
+            activeTab === "run"
+              ? "bg-muted text-foreground"
+              : "text-muted-foreground hover:text-foreground",
+          )}
+        >
+          Run
+        </button>
+        <button
+          type="button"
+          onClick={() => setActiveTab("logs")}
+          className={cn(
+            "px-3 py-1 text-sm font-medium rounded-lg transition-colors",
+            activeTab === "logs"
+              ? "bg-muted text-foreground"
+              : "text-muted-foreground hover:text-foreground",
+          )}
+        >
+          Logs
+        </button>
+        <button
+          type="button"
+          onClick={() => setActiveTab("feedback")}
+          className={cn(
+            "px-3 py-1 text-sm font-medium rounded-lg transition-colors",
+            activeTab === "feedback"
+              ? "bg-muted text-foreground"
+              : "text-muted-foreground hover:text-foreground",
+          )}
+        >
+          Feedback
+        </button>
+      </div>
+
+      {/* Content */}
+      {activeTab === "run" && (
+        <div className="flex flex-col gap-4">
+          {/* Details section */}
+          <div className="flex flex-col">
+            {/* Parent Span */}
+            {parentSpan && (
+              <div className="border-t border-border flex items-center gap-6 h-9">
+                <span className="text-xs text-muted-foreground w-24 shrink-0">
+                  Parent Span
+                </span>
+                <div className="flex items-center gap-2 flex-1 overflow-hidden">
+                  <SpanIcon span={parentSpan} className="size-5 shrink-0" />
+                  <span className="text-sm text-foreground truncate">
+                    {getDisplayName(parentSpan)}
+                  </span>
+                </div>
+              </div>
+            )}
+
+            {/* Span ID */}
+            <div className="border-t border-border flex items-center gap-6 h-9">
+              <span className="text-xs text-muted-foreground w-24 shrink-0">
+                Span ID
+              </span>
+              <span className="text-sm text-foreground truncate flex-1">
+                {span.span_id}
+              </span>
+            </div>
+
+            {/* Duration */}
+            <div className="border-t border-border flex items-center gap-6 h-9">
+              <span className="text-xs text-muted-foreground w-24 shrink-0">
+                Duration
+              </span>
+              <span className="text-sm text-foreground">
+                {formatDuration(span.durationMs)}
+              </span>
+            </div>
+
+            {/* Started */}
+            <div className="border-t border-border flex items-center gap-6 h-9">
+              <span className="text-xs text-muted-foreground w-24 shrink-0">
+                Started
+              </span>
+              <span className="text-sm text-foreground">
+                {formatTimestamp(span.start_time_unix_nano)}
+              </span>
+            </div>
+
+            {/* Tokens */}
+            {tokenCount > 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">
+                  Tokens
+                </span>
+                <span className="text-sm text-foreground">
+                  {tokenCount.toLocaleString()}
+                </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 && (
+              <div className="border-t border-border flex items-center gap-6 h-9">
+                <span className="text-xs text-muted-foreground w-24 shrink-0">
+                  Logs
+                </span>
+                <span className="text-sm text-foreground">{logCount}</span>
+              </div>
+            )}
+          </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 */}
+          {(() => {
+            // 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-2 border-b border-border">
+                  <h3 className="text-[9px] font-bold text-muted-foreground uppercase tracking-wider">
+                    Attributes
+                  </h3>
+                </div>
+                <div className="p-3">
+                  <pre className="text-xs font-mono text-foreground whitespace-pre-wrap break-all">
+                    {JSON.stringify(filteredAttrs, null, 2)}
+                  </pre>
+                </div>
+              </div>
+            ) : null;
+          })()}
+
+          {/* Resource */}
+          {resourceAttrs && Object.keys(resourceAttrs).length > 0 && (
+            <div className="bg-muted/50 border border-border rounded-lg overflow-hidden">
+              <div className="p-2 border-b border-border">
+                <h3 className="text-[9px] font-bold text-muted-foreground uppercase tracking-wider">
+                  Resource
+                </h3>
+              </div>
+              <div className="p-3">
+                <pre className="text-xs font-mono text-foreground whitespace-pre-wrap break-all">
+                  {JSON.stringify(resourceAttrs, null, 2)}
+                </pre>
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+
+      {activeTab === "logs" && (
+        <div className="text-sm text-muted-foreground">
+          Logs view - Coming soon
+        </div>
+      )}
+
+      {activeTab === "feedback" && (
+        <div className="text-sm text-muted-foreground">
+          Feedback view - Coming soon
+        </div>
+      )}
+    </div>
+  );
+}
+
+function LogDetails({ log }: { log: Log }) {
+  const attrs = parseAttributes(log.attributes);
+  const resourceAttrs = parseAttributes(log.resource_attributes);
+
+  const severityColor =
+    log.severity_number >= 17
+      ? "text-red-500"
+      : log.severity_number >= 13
+        ? "text-yellow-500"
+        : "text-muted-foreground";
+
+  return (
+    <div className="flex flex-col gap-4">
+      {/* Details section */}
+      <div className="flex flex-col">
+        {/* Timestamp */}
+        <div className="border-t border-border flex items-center gap-6 h-9">
+          <span className="text-xs text-muted-foreground w-24 shrink-0">
+            Timestamp
+          </span>
+          <span className="text-sm text-foreground">
+            {formatTimestamp(log.timestamp_unix_nano)}
+          </span>
+        </div>
+
+        {/* Severity */}
+        <div className="border-t border-border flex items-center gap-6 h-9">
+          <span className="text-xs text-muted-foreground w-24 shrink-0">
+            Severity
+          </span>
+          <span className={cn("text-sm font-medium", severityColor)}>
+            {log.severity_text || `Level ${log.severity_number}`}
+          </span>
+        </div>
+
+        {/* Trace ID */}
+        {log.trace_id && (
+          <div className="border-t border-border flex items-center gap-6 h-9">
+            <span className="text-xs text-muted-foreground w-24 shrink-0">
+              Trace ID
+            </span>
+            <span className="text-sm text-foreground truncate flex-1 font-mono">
+              {log.trace_id}
+            </span>
+          </div>
+        )}
+
+        {/* Span ID */}
+        {log.span_id && (
+          <div className="border-t border-border flex items-center gap-6 h-9">
+            <span className="text-xs text-muted-foreground w-24 shrink-0">
+              Span ID
+            </span>
+            <span className="text-sm text-foreground truncate flex-1 font-mono">
+              {log.span_id}
+            </span>
+          </div>
+        )}
+      </div>
+
+      {/* Body */}
+      {log.body && (
+        <div className="bg-muted/50 border border-border rounded-lg overflow-hidden">
+          <div className="p-2 border-b border-border">
+            <h3 className="text-[9px] font-bold text-muted-foreground uppercase tracking-wider">
+              Message
+            </h3>
+          </div>
+          <div className="p-3">
+            <pre className="text-xs font-mono text-foreground whitespace-pre-wrap break-all">
+              {log.body}
+            </pre>
+          </div>
+        </div>
+      )}
+
+      {/* Attributes */}
+      {attrs && Object.keys(attrs).length > 0 && (
+        <div className="bg-muted/50 border border-border rounded-lg overflow-hidden">
+          <div className="p-2 border-b border-border">
+            <h3 className="text-[9px] font-bold text-muted-foreground uppercase tracking-wider">
+              Attributes
+            </h3>
+          </div>
+          <div className="p-3">
+            <pre className="text-xs font-mono text-foreground whitespace-pre-wrap break-all">
+              {JSON.stringify(attrs, null, 2)}
+            </pre>
+          </div>
+        </div>
+      )}
+
+      {/* Resource Attributes */}
+      {resourceAttrs && Object.keys(resourceAttrs).length > 0 && (
+        <div className="bg-muted/50 border border-border rounded-lg overflow-hidden">
+          <div className="p-2 border-b border-border">
+            <h3 className="text-[9px] font-bold text-muted-foreground uppercase tracking-wider">
+              Resource
+            </h3>
+          </div>
+          <div className="p-3">
+            <pre className="text-xs font-mono text-foreground whitespace-pre-wrap break-all">
+              {JSON.stringify(resourceAttrs, null, 2)}
+            </pre>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function DiagnosticDetailsPanel({
+  span,
+  log,
+  onClose,
+  allSpans,
+}: DiagnosticDetailsPanelProps) {
+  // Determine which type of detail to show
+  const hasSelection = span !== null || log !== null;
+
+  if (!hasSelection) return null;
+
+  const title = span ? getDisplayName(span) : "Log Details";
+
+  return (
+    <div className="flex flex-col h-full border-l border-border bg-background">
+      {/* Header */}
+      <div className="h-12 px-4 flex items-center justify-between border-b border-border bg-muted/30 shrink-0">
+        <div className="flex items-center gap-2 min-w-0 flex-1">
+          {span && <SpanIcon span={span} className="size-5 shrink-0" />}
+          <h2 className="text-sm font-medium text-foreground truncate">
+            {title}
+          </h2>
+        </div>
+        <button
+          type="button"
+          onClick={onClose}
+          className="size-7 flex items-center justify-center rounded hover:bg-muted transition-colors shrink-0"
+          aria-label="Close"
+        >
+          <X className="size-4 text-muted-foreground" />
+        </button>
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 overflow-y-auto p-4">
+        {span && <SpanDetails span={span} allSpans={allSpans} />}
+        {log && !span && <LogDetails log={log} />}
+      </div>
+    </div>
+  );
+}