@townco/debugger 0.1.67 → 0.1.68

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@townco/debugger",
-  "version": "0.1.67",
+  "version": "0.1.68",
   "type": "module",
   "engines": {
     "bun": ">=1.3.0"
@@ -24,8 +24,8 @@
     "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-tabs": "^1.1.13",
-    "@townco/otlp-server": "0.1.66",
-    "@townco/tsconfig": "0.1.108",
+    "@townco/otlp-server": "0.1.67",
+    "@townco/tsconfig": "0.1.109",
     "@townco/ui": "^0.1.77",
     "bun-plugin-tailwind": "^0.1.2",
     "class-variance-authority": "^0.7.1",

package/src/App.tsx

@@ -4,6 +4,7 @@ import "./index.css";
 import { ComparisonView } from "./pages/ComparisonView";
 import { FindSessions } from "./pages/FindSessions";
 import { SessionList } from "./pages/SessionList";
+import { SessionLogsView } from "./pages/SessionLogsView";
 import { SessionView } from "./pages/SessionView";
 import { TownHall } from "./pages/TownHall";
 import { TraceDetail } from "./pages/TraceDetail";
@@ -82,10 +83,16 @@ class ErrorBoundary extends Component<
 function AppContent() {
   const pathname = window.location.pathname;
 
-  // Route: /sessions/:sessionId
+  // Route: /sessions/:sessionId/timeline (timeline view)
+  const sessionTimelineMatch = pathname.match(/^\/sessions\/(.+)\/timeline$/);
+  if (sessionTimelineMatch?.[1]) {
+    return <SessionView sessionId={sessionTimelineMatch[1]} />;
+  }
+
+  // Route: /sessions/:sessionId (logs view - default)
   const sessionMatch = pathname.match(/^\/sessions\/(.+)$/);
   if (sessionMatch?.[1]) {
-    return <SessionView sessionId={sessionMatch[1]} />;
+    return <SessionLogsView sessionId={sessionMatch[1]} />;
   }
 
   // Route: /trace/:traceId

package/src/components/ConversationPanel.tsx

@@ -0,0 +1,392 @@
+import { useMemo, useRef } from "react";
+import { cn } from "@/lib/utils";
+import type { ConversationItem, Segment } from "../lib/segmentation";
+import { formatTimestamp } from "../lib/segmentation";
+import { getToolIcon } from "../lib/toolRegistry";
+
+/**
+ * Groups conversation items by subagent context.
+ * Items from the same subagent (same subagentSpanId) are grouped together,
+ * breaking chronological order to improve developer ergonomics.
+ */
+interface ItemGroup {
+  subagentId: string | null;
+  subagentSpanId: string | null;
+  items: ConversationItem[];
+  /** Earliest timestamp in the group (for sorting groups) */
+  firstTimestamp: number;
+}
+
+function groupItemsBySubagent(items: ConversationItem[]): ItemGroup[] {
+  // First, separate items into subagent and non-subagent
+  const subagentGroups = new Map<string, ConversationItem[]>();
+  const nonSubagentItems: ConversationItem[] = [];
+
+  for (const item of items) {
+    if (item.subagentSpanId) {
+      const existing = subagentGroups.get(item.subagentSpanId) || [];
+      existing.push(item);
+      subagentGroups.set(item.subagentSpanId, existing);
+    } else {
+      nonSubagentItems.push(item);
+    }
+  }
+
+  // Build result groups
+  const groups: ItemGroup[] = [];
+
+  // Add non-subagent items as individual "groups" (they stay in order)
+  for (const item of nonSubagentItems) {
+    groups.push({
+      subagentId: null,
+      subagentSpanId: null,
+      items: [item],
+      firstTimestamp: item.timestamp,
+    });
+  }
+
+  // Add subagent groups
+  for (const [spanId, subagentItems] of subagentGroups) {
+    // Sort items within the group by timestamp
+    subagentItems.sort((a, b) => a.timestamp - b.timestamp);
+    const firstItem = subagentItems[0];
+    groups.push({
+      subagentId: firstItem?.subagentId ?? null,
+      subagentSpanId: spanId,
+      items: subagentItems,
+      firstTimestamp: firstItem?.timestamp ?? 0,
+    });
+  }
+
+  // Sort groups by their first timestamp
+  groups.sort((a, b) => a.firstTimestamp - b.firstTimestamp);
+
+  return groups;
+}
+
+interface ConversationPanelProps {
+  segments: Segment[];
+  highlightedItemId: string | null;
+  onItemHover: (itemId: string | null) => void;
+  /** The currently selected conversation item (for span highlighting) */
+  selectedItemId: string | null;
+  /** Called when user clicks on an agent message or tool call */
+  onItemSelect: (itemId: string | null, spanId: string | null) => void;
+}
+
+interface ToolCallProps {
+  item: ConversationItem;
+  isSelected: boolean;
+}
+
+function ToolCall({ item, isSelected }: ToolCallProps) {
+  // Format the input for display
+  const formattedInput =
+    item.toolInput !== undefined && item.toolInput !== null
+      ? typeof item.toolInput === "string"
+        ? item.toolInput
+        : JSON.stringify(item.toolInput, null, 2)
+      : null;
+
+  // Get the appropriate icon for this tool
+  const IconComponent = getToolIcon(item.toolName || "");
+
+  return (
+    <div className="flex flex-col gap-2 items-end">
+      {/* Tool Header */}
+      <div className="flex items-center gap-1 w-full py-1">
+        <IconComponent
+          className={cn(
+            "size-3.5 shrink-0",
+            isSelected ? "text-blue-700" : "text-muted-foreground",
+          )}
+        />
+        <span
+          className={cn(
+            "text-xs font-medium",
+            isSelected ? "text-blue-700" : "text-muted-foreground",
+          )}
+        >
+          {item.toolName}
+        </span>
+      </div>
+
+      {/* Tool Content */}
+      {formattedInput && (
+        <div className="w-full border border-border rounded-lg overflow-hidden">
+          {/* Header */}
+          <div className="bg-neutral-100 p-2">
+            <p className="text-[9px] font-semibold text-muted-foreground uppercase tracking-wider">
+              Input
+            </p>
+          </div>
+          {/* Body */}
+          <div className="bg-background p-2 max-h-[120px] overflow-y-auto">
+            <pre className="text-xs font-mono text-foreground whitespace-pre-wrap break-words">
+              {formattedInput}
+            </pre>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface ConversationItemRowProps {
+  item: ConversationItem;
+  isHighlighted: boolean;
+  isSelected: boolean;
+  onHover: (itemId: string | null) => void;
+  onSelect: (itemId: string, spanId: string | null) => void;
+}
+
+function ConversationItemRow({
+  item,
+  isHighlighted,
+  isSelected,
+  onHover,
+  onSelect,
+}: ConversationItemRowProps) {
+  const timestamp = formatTimestamp(item.timestamp);
+  const isClickable = item.type === "agent" || item.type === "tool_call";
+
+  const handleClick = () => {
+    if (!isClickable) return;
+    // Toggle selection - if already selected, deselect
+    if (isSelected) {
+      onSelect(item.id, null);
+    } else {
+      onSelect(item.id, item.spanId ?? null);
+    }
+  };
+
+  const interactiveProps = isClickable
+    ? {
+        onMouseEnter: () => onHover(item.id),
+        onMouseLeave: () => onHover(null),
+        onClick: handleClick,
+        onKeyDown: (e: React.KeyboardEvent) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            handleClick();
+          }
+        },
+        role: "button" as const,
+        tabIndex: 0,
+      }
+    : {};
+
+  return (
+    <div
+      className={cn(
+        "flex gap-4 items-start px-6 py-4 transition-colors border-l-2 border-transparent",
+        isClickable && "cursor-pointer",
+        isClickable && isHighlighted && "bg-neutral-50",
+        isSelected && "bg-blue-50 border-blue-700",
+      )}
+      {...interactiveProps}
+    >
+      {/* Timestamp column */}
+      <div className="w-24 shrink-0">
+        <span className="text-xs text-muted-foreground font-mono leading-relaxed tracking-wide">
+          {timestamp}
+        </span>
+      </div>
+
+      {/* Content column */}
+      <div className="flex-1 min-w-0">
+        {item.type === "user" ? (
+          <div className="flex flex-col gap-1">
+            <span className="text-xs font-medium text-muted-foreground py-1">
+              User
+            </span>
+            <div className="bg-neutral-200 rounded-lg px-3 py-2 w-full">
+              <p className="text-sm text-foreground leading-relaxed tracking-tight">
+                {item.content}
+              </p>
+            </div>
+          </div>
+        ) : item.type === "agent" ? (
+          <div className="flex flex-col gap-1">
+            <span
+              className={cn(
+                "text-xs font-medium py-1",
+                isSelected ? "text-blue-700" : "text-muted-foreground",
+              )}
+            >
+              {item.label || "Agent"}
+            </span>
+            <p className="text-sm text-foreground leading-relaxed tracking-tight">
+              {item.content}
+            </p>
+          </div>
+        ) : item.type === "thinking" ? (
+          <div className="flex flex-col gap-1">
+            <span className="text-xs font-medium text-muted-foreground py-1">
+              {item.label || "Agent"}
+            </span>
+            <p className="text-sm text-neutral-600 leading-relaxed tracking-tight">
+              {item.content}
+            </p>
+          </div>
+        ) : item.type === "tool_call" ? (
+          <ToolCall item={item} isSelected={isSelected} />
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+interface SegmentContentProps {
+  segment: Segment;
+  highlightedItemId: string | null;
+  selectedItemId: string | null;
+  onItemHover: (itemId: string | null) => void;
+  onItemSelect: (itemId: string | null, spanId: string | null) => void;
+}
+
+function SegmentContent({
+  segment,
+  highlightedItemId,
+  selectedItemId,
+  onItemHover,
+  onItemSelect,
+}: SegmentContentProps) {
+  // Group items by subagent
+  const groups = useMemo(() => {
+    const result = groupItemsBySubagent(segment.conversationItems);
+
+    // Debug: Log grouping results
+    console.log(
+      "[DEBUG] Conversation groups for segment:",
+      segment.id.slice(-4),
+      {
+        totalItems: segment.conversationItems.length,
+        totalGroups: result.length,
+        subagentGroups: result.filter((g) => g.subagentSpanId).length,
+        groups: result.map((g) => ({
+          subagentId: g.subagentId,
+          itemCount: g.items.length,
+          itemTypes: g.items.map((i) => i.type),
+        })),
+      },
+    );
+
+    return result;
+  }, [segment.conversationItems, segment.id]);
+
+  return (
+    <div>
+      {groups.map((group) => {
+        // If this is a subagent group, render with header
+        if (group.subagentSpanId) {
+          return (
+            <div key={group.subagentSpanId} className="flex flex-col">
+              {/* Subagent header - sticky */}
+              <div className="sticky top-0 z-10 flex items-center gap-2 px-6 py-3 border-b border-border bg-background">
+                <span className="text-xs font-medium text-foreground">
+                  Subagent.{group.subagentId}
+                </span>
+              </div>
+
+              {/* Subagent items */}
+              {group.items.map((item) => (
+                <ConversationItemRow
+                  key={item.id}
+                  item={item}
+                  isHighlighted={highlightedItemId === item.id}
+                  isSelected={selectedItemId === item.id}
+                  onHover={onItemHover}
+                  onSelect={onItemSelect}
+                />
+              ))}
+            </div>
+          );
+        }
+
+        // Regular items (no subagent context)
+        return group.items.map((item) => (
+          <ConversationItemRow
+            key={item.id}
+            item={item}
+            isHighlighted={highlightedItemId === item.id}
+            isSelected={selectedItemId === item.id}
+            onHover={onItemHover}
+            onSelect={onItemSelect}
+          />
+        ));
+      })}
+    </div>
+  );
+}
+
+export function ConversationPanel({
+  segments,
+  highlightedItemId,
+  onItemHover,
+  selectedItemId,
+  onItemSelect,
+}: ConversationPanelProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  if (segments.length === 0) {
+    return (
+      <div className="flex-1 flex items-center justify-center text-muted-foreground">
+        No conversation data
+      </div>
+    );
+  }
+
+  return (
+    <div
+      ref={containerRef}
+      className="flex-1"
+      style={{ scrollBehavior: "smooth" }}
+    >
+      <div className="flex flex-col">
+        {segments.map((segment, index) => (
+          <div key={segment.id}>
+            {/* Segment content */}
+            <SegmentContent
+              segment={segment}
+              highlightedItemId={highlightedItemId}
+              selectedItemId={selectedItemId}
+              onItemHover={onItemHover}
+              onItemSelect={onItemSelect}
+            />
+
+            {/* Segment divider */}
+            {index < segments.length - 1 && (
+              <div className="py-3">
+                <div className="h-px bg-border" />
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Scrolls the conversation panel to the top
+ */
+export function scrollConversationToTop(
+  containerRef: React.RefObject<HTMLDivElement | null>,
+) {
+  containerRef.current?.scrollTo({ top: 0, behavior: "smooth" });
+}
+
+/**
+ * Scrolls the conversation panel to the bottom
+ */
+export function scrollConversationToBottom(
+  containerRef: React.RefObject<HTMLDivElement | null>,
+) {
+  if (containerRef.current) {
+    containerRef.current.scrollTo({
+      top: containerRef.current.scrollHeight,
+      behavior: "smooth",
+    });
+  }
+}

package/src/components/DebuggerHeader.tsx

@@ -72,7 +72,7 @@ export function DebuggerHeader({
   };
 
   return (
-    <ChatHeader.Root className="border-b border-border bg-card h-16">
+    <ChatHeader.Root className="border-b border-border bg-card h-16 px-8">
       <div className="flex items-center gap-3 flex-1">
         {showBackButton && (
           <Button variant="ghost" size="icon" asChild>