@townco/debugger 0.1.66 → 0.1.68

package/src/components/DiagnosticPanel.tsx

@@ -0,0 +1,111 @@
+import { useRef } from "react";
+import type { Segment } from "../lib/segmentation";
+import type { Log, SpanNode } from "../types";
+import { SpansLogsList } from "./SpansLogsList";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "./ui/select";
+
+export type DiagnosticViewMode = "spans" | "logs";
+
+interface DiagnosticPanelProps {
+  segments: Segment[];
+  viewMode: DiagnosticViewMode;
+  onViewModeChange: (mode: DiagnosticViewMode) => void;
+  highlightedSpanId: string | null;
+  selectedSpanIds: Set<string>;
+  selectedLogIds: Set<number>;
+  onSpanHover: (spanId: string | null) => void;
+  onSpanClick: (span: SpanNode) => void;
+  onLogClick: (log: Log) => void;
+  scrollToSpanId: string | null;
+  scrollToLogId: number | null;
+  /** The currently selected item (span or log) ID for highlighting in the list */
+  selectedItemId: string | null;
+  /** Callback for keyboard navigation */
+  onNavigate: (direction: "up" | "down") => void;
+  /** Callback for keyboard Enter to confirm selection */
+  onEnterSelect: () => void;
+}
+
+export function DiagnosticPanel({
+  segments,
+  viewMode,
+  onViewModeChange,
+  highlightedSpanId,
+  selectedSpanIds,
+  selectedLogIds,
+  onSpanHover,
+  onSpanClick,
+  onLogClick,
+  scrollToSpanId,
+  scrollToLogId,
+  selectedItemId,
+  onNavigate,
+  onEnterSelect,
+}: DiagnosticPanelProps) {
+  const containerRef = useRef<HTMLElement>(null);
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "ArrowUp") {
+      e.preventDefault();
+      onNavigate("up");
+    } else if (e.key === "ArrowDown") {
+      e.preventDefault();
+      onNavigate("down");
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      onEnterSelect();
+    }
+  };
+
+  return (
+    <section
+      ref={containerRef}
+      className="flex flex-col h-full border-l border-border focus:outline-none"
+      // biome-ignore lint/a11y/noNoninteractiveTabindex: Section needs keyboard navigation focus for arrow key navigation
+      tabIndex={0}
+      onKeyDown={handleKeyDown}
+      aria-label="Diagnostic panel"
+    >
+      {/* Header with view mode selector */}
+      <div className="h-12 px-4 flex items-center border-b border-border bg-muted/30 shrink-0">
+        <Select
+          value={viewMode}
+          onValueChange={(value) =>
+            onViewModeChange(value as DiagnosticViewMode)
+          }
+        >
+          <SelectTrigger className="w-[120px] h-8 bg-background" size="sm">
+            <SelectValue placeholder="Select view" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="spans">Spans</SelectItem>
+            <SelectItem value="logs">Logs</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* Content area */}
+      <div className="flex-1 min-h-0 overflow-y-auto">
+        <SpansLogsList
+          segments={segments}
+          viewMode={viewMode}
+          highlightedSpanId={highlightedSpanId}
+          selectedSpanIds={selectedSpanIds}
+          selectedLogIds={selectedLogIds}
+          onSpanHover={onSpanHover}
+          onSpanClick={onSpanClick}
+          onLogClick={onLogClick}
+          scrollToSpanId={scrollToSpanId}
+          scrollToLogId={scrollToLogId}
+          selectedItemId={selectedItemId}
+        />
+      </div>
+    </section>
+  );
+}

package/src/components/NavBar.tsx

@@ -0,0 +1,130 @@
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@townco/ui/gui";
+import { ChevronRight, Home, List, SquareChartGantt } from "lucide-react";
+import { useEffect, useState } from "react";
+import { Button } from "./ui/button";
+
+interface NavBarProps {
+  sessionId?: string;
+  userId?: string;
+}
+
+interface BreadcrumbItem {
+  label: string;
+  href?: string;
+  icon?: React.ReactNode;
+}
+
+export function NavBar({ sessionId, userId }: NavBarProps) {
+  const [agentName, setAgentName] = useState<string>("Agent");
+  const pathname =
+    typeof window !== "undefined" ? window.location.pathname : "";
+  const isTimelineView = pathname.endsWith("/timeline");
+
+  useEffect(() => {
+    fetch("/api/config")
+      .then((res) => res.json())
+      .then((data) => {
+        if (data.agentName) {
+          setAgentName(data.agentName);
+        }
+      })
+      .catch(() => {
+        // Ignore errors, use default
+      });
+  }, []);
+
+  const breadcrumbs: BreadcrumbItem[] = [
+    {
+      label: "",
+      href: "/",
+      icon: <Home className="size-4" />,
+    },
+    {
+      label: agentName,
+      href: "/",
+    },
+  ];
+
+  if (userId) {
+    breadcrumbs.push({
+      label: `[${userId}]`,
+      href: `/sessions?userId=${userId}`,
+    });
+  }
+
+  if (sessionId) {
+    breadcrumbs.push({
+      label: `${sessionId}`,
+      href: `/sessions/${sessionId}`,
+    });
+  }
+
+  return (
+    <header className="h-16 border-b border-border bg-muted/50 flex items-center justify-between px-6">
+      <nav className="flex items-center gap-2" aria-label="Breadcrumb">
+        {breadcrumbs.map((item, index) => (
+          <div key={item.label || index} className="flex items-center gap-2">
+            {index > 0 && (
+              <ChevronRight className="size-4 text-muted-foreground" />
+            )}
+            {item.href ? (
+              <a
+                href={item.href}
+                className="flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors"
+              >
+                {item.icon && (
+                  <span className="p-1 border border-border rounded">
+                    {item.icon}
+                  </span>
+                )}
+                {item.label && <span>{item.label}</span>}
+              </a>
+            ) : (
+              <span className="flex items-center gap-1 text-sm text-muted-foreground">
+                {item.icon && (
+                  <span className="p-1 border border-border rounded">
+                    {item.icon}
+                  </span>
+                )}
+                {item.label && <span>{item.label}</span>}
+              </span>
+            )}
+          </div>
+        ))}
+      </nav>
+
+      {/* Right side actions */}
+      {sessionId && (
+        <TooltipProvider delayDuration={0}>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button variant="ghost" size="icon-sm" asChild>
+                <a
+                  href={
+                    isTimelineView
+                      ? `/sessions/${sessionId}`
+                      : `/sessions/${sessionId}/timeline`
+                  }
+                >
+                  {isTimelineView ? (
+                    <List className="size-4 text-muted-foreground" />
+                  ) : (
+                    <SquareChartGantt className="size-4 text-muted-foreground" />
+                  )}
+                </a>
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{isTimelineView ? "Logs View" : "Timeline View"}</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      )}
+    </header>
+  );
+}

package/src/components/SpanDetailsPanel.tsx

@@ -735,7 +735,7 @@ export function SpanDetailsPanel({
           <div className="flex flex-col gap-6 px-6 py-8">
             {/* Header */}
             <div className="flex items-start gap-2">
-              <SpanIcon type={spanType} className="size-6" />
+              <SpanIcon span={span} className="size-6" />
               <h2 className="flex-1 text-xl font-semibold text-foreground tracking-[-0.02em] leading-tight overflow-hidden text-ellipsis">
                 {displayName}
               </h2>
@@ -803,7 +803,7 @@ export function SpanDetailsPanel({
                       </span>
                       <div className="flex items-center gap-2 flex-1 overflow-hidden">
                         <SpanIcon
-                          type={detectSpanType(parentSpan)}
+                          span={parentSpan}
                           className="size-5 shrink-0"
                         />
                         <span className="text-sm text-foreground truncate">

package/src/components/SpanIcon.tsx

@@ -1,37 +1,88 @@
-import { ListChecks, Search, Settings, Sparkles } from "lucide-react";
+import {
+  FoldVertical,
+  ListChecks,
+  ListTree,
+  type LucideIcon,
+  Settings,
+  Sparkles,
+} from "lucide-react";
 import { cn } from "@/lib/utils";
-import type { SpanType } from "../lib/spanTypeDetector";
+import { detectSpanType } from "../lib/spanTypeDetector";
+import { getToolIcon } from "../lib/toolRegistry";
+import type { Span } from "../types";
 
 interface SpanIconProps {
-  type: SpanType;
+  span: Span;
   className?: string;
 }
 
-export function SpanIcon({ type, className }: SpanIconProps) {
-  // Background color for the icon box
-  const bgColor =
-    type === "chat"
-      ? "bg-orange-400"
-      : type === "tool_call"
-        ? "bg-blue-500"
-        : type === "subagent"
-          ? "bg-purple-500"
-          : "bg-blue-500";
-
-  // Choose icon based on type
-  const Icon =
-    type === "chat"
-      ? Sparkles
-      : type === "tool_call"
-        ? ListChecks
-        : type === "subagent"
-          ? Search
-          : Settings;
+function parseAttributes(attrs: string | null): Record<string, unknown> {
+  if (!attrs) return {};
+  try {
+    return JSON.parse(attrs);
+  } catch {
+    return {};
+  }
+}
+
+/**
+ * Check if a span is compaction-related
+ */
+function isCompactionSpan(span: Span): boolean {
+  const lowerName = span.name.toLowerCase();
+  return (
+    lowerName.includes("compact") ||
+    lowerName.includes("compression") ||
+    lowerName.includes("summarize") ||
+    lowerName.includes("summarization")
+  );
+}
+
+/**
+ * Get icon and background color for a span
+ */
+function getSpanIconConfig(span: Span): {
+  icon: LucideIcon;
+  bgColor: string;
+} {
+  const attrs = parseAttributes(span.attributes);
+  const spanType = detectSpanType(span);
+
+  // Check for compaction spans first (highest priority)
+  if (isCompactionSpan(span)) {
+    return { icon: FoldVertical, bgColor: "bg-yellow-600" };
+  }
+
+  // Chat spans
+  if (spanType === "chat") {
+    return { icon: Sparkles, bgColor: "bg-orange-500" };
+  }
+
+  // Subagent spans (Task tool)
+  if (spanType === "subagent") {
+    return { icon: ListTree, bgColor: "bg-purple-500" };
+  }
+
+  // Tool call spans - use specific icon based on tool name
+  if (spanType === "tool_call") {
+    const toolName = attrs["tool.name"] as string;
+    if (toolName) {
+      return { icon: getToolIcon(toolName), bgColor: "bg-blue-500" };
+    }
+    return { icon: ListChecks, bgColor: "bg-blue-500" };
+  }
+
+  // Default for other spans
+  return { icon: Settings, bgColor: "bg-neutral-400" };
+}
+
+export function SpanIcon({ span, className }: SpanIconProps) {
+  const { icon: Icon, bgColor } = getSpanIconConfig(span);
 
   return (
     <div
       className={cn(
-        "size-5 rounded flex items-center justify-center",
+        "size-5 rounded flex items-center justify-center shrink-0",
         bgColor,
         className,
       )}

package/src/components/SpanTimeline.tsx

@@ -134,7 +134,7 @@ function _SpanRow({ span, traceStart, traceEnd }: SpanRowProps) {
         }}
       >
         <div className="flex items-center hover:bg-muted rounded">
-          <SpanIcon type={spanType} className="mr-2" />
+          <SpanIcon span={span} className="mr-2" />
           <span className="font-medium flex-1 truncate">{displayName}</span>
           <span className="text-muted-foreground text-sm ml-2">
             {span.durationMs.toFixed(2)}ms
@@ -350,7 +350,6 @@ function RenderSpanTreeRow({
   onSpanClick: (span: SpanNode) => void;
 }) {
   const attrs = parseAttributes(span.attributes);
-  const spanType = detectSpanType(span);
 
   const isToolCall = span.name === "agent.tool_call";
   const isChatSpan =
@@ -395,7 +394,7 @@ function RenderSpanTreeRow({
           }
         }}
       >
-        <SpanIcon type={spanType} className="shrink-0" />
+        <SpanIcon span={span} className="shrink-0" />
         <span className="text-sm truncate flex-1">{displayName}</span>
       </div>
       {span.children.map((child) => (