@townco/debugger 0.1.4 → 0.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@townco/debugger",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "type": "module",
   "engines": {
     "bun": ">=1.3.0"
@@ -14,10 +14,13 @@
     "check": "tsc --noEmit"
   },
   "dependencies": {
-    "@townco/otlp-server": "0.1.4",
+    "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-label": "^2.1.7",
     "@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.6",
+    "@townco/ui": "0.1.51",
     "bun-plugin-tailwind": "^0.1.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -27,7 +30,7 @@
     "tailwind-merge": "^3.3.1"
   },
   "devDependencies": {
-    "@townco/tsconfig": "0.1.46",
+    "@townco/tsconfig": "0.1.48",
     "@types/bun": "latest",
     "@types/react": "^19",
     "@types/react-dom": "^19",

package/src/App.tsx

@@ -1,5 +1,7 @@
+import { ThemeProvider } from "@townco/ui/gui";
 import { Component, type ReactNode } from "react";
 import "./index.css";
+import { SessionList } from "./pages/SessionList";
 import { SessionView } from "./pages/SessionView";
 import { TraceDetail } from "./pages/TraceDetail";
 import { TraceList } from "./pages/TraceList";
@@ -88,14 +90,21 @@ function AppContent() {
     return <TraceDetail traceId={traceMatch[1]} />;
   }
 
-  // Default: Trace list
-  return <TraceList />;
+  // Route: /traces
+  if (pathname === "/traces") {
+    return <TraceList />;
+  }
+
+  // Default: Session list
+  return <SessionList />;
 }
 
 export function App() {
   return (
     <ErrorBoundary>
-      <AppContent />
+      <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
+        <AppContent />
+      </ThemeProvider>
     </ErrorBoundary>
   );
 }

package/src/components/DebuggerHeader.tsx

@@ -0,0 +1,85 @@
+import { ChatHeader, cn, ThemeToggle } from "@townco/ui/gui";
+import { ArrowLeft } from "lucide-react";
+import { useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+
+interface DebuggerHeaderProps {
+  title: string;
+  showBackButton?: boolean;
+  backHref?: string;
+  showNav?: boolean;
+}
+
+export function DebuggerHeader({
+  title,
+  showBackButton = false,
+  backHref = "/",
+  showNav = false,
+}: DebuggerHeaderProps) {
+  const pathname =
+    typeof window !== "undefined" ? window.location.pathname : "/";
+  const isSessionsActive = pathname === "/";
+  const isTracesActive = pathname === "/traces";
+  const [agentName, setAgentName] = useState<string>("Agent");
+
+  useEffect(() => {
+    fetch("/api/config")
+      .then((res) => res.json())
+      .then((data) => {
+        if (data.agentName) {
+          setAgentName(data.agentName);
+        }
+      })
+      .catch(() => {
+        // Ignore errors, use default
+      });
+  }, []);
+
+  return (
+    <ChatHeader.Root className="border-b border-border bg-card h-16">
+      <div className="flex items-center gap-3 flex-1">
+        {showBackButton && (
+          <Button variant="ghost" size="icon" asChild>
+            <a href={backHref}>
+              <ArrowLeft className="size-4" />
+            </a>
+          </Button>
+        )}
+        {showNav ? (
+          <div className="flex items-center gap-4">
+            <ChatHeader.Title>{agentName}</ChatHeader.Title>
+            <nav className="flex items-center gap-1">
+              <a
+                href="/"
+                className={cn(
+                  "px-3 py-1.5 rounded-md text-sm font-medium transition-colors",
+                  isSessionsActive
+                    ? "bg-muted text-foreground"
+                    : "text-muted-foreground hover:text-foreground hover:bg-muted/50",
+                )}
+              >
+                Sessions
+              </a>
+              <a
+                href="/traces"
+                className={cn(
+                  "px-3 py-1.5 rounded-md text-sm font-medium transition-colors",
+                  isTracesActive
+                    ? "bg-muted text-foreground"
+                    : "text-muted-foreground hover:text-foreground hover:bg-muted/50",
+                )}
+              >
+                Traces
+              </a>
+            </nav>
+          </div>
+        ) : (
+          <ChatHeader.Title>{title}</ChatHeader.Title>
+        )}
+      </div>
+      <ChatHeader.Actions>
+        <ThemeToggle />
+      </ChatHeader.Actions>
+    </ChatHeader.Root>
+  );
+}

package/src/components/DebuggerLayout.tsx

@@ -0,0 +1,30 @@
+import type { ReactNode } from "react";
+import { DebuggerHeader } from "./DebuggerHeader";
+
+interface DebuggerLayoutProps {
+  children: ReactNode;
+  title: string;
+  showBackButton?: boolean;
+  backHref?: string;
+  showNav?: boolean;
+}
+
+export function DebuggerLayout({
+  children,
+  title,
+  showBackButton = false,
+  backHref = "/",
+  showNav = false,
+}: DebuggerLayoutProps) {
+  return (
+    <div className="h-screen flex flex-col">
+      <DebuggerHeader
+        title={title}
+        showBackButton={showBackButton}
+        backHref={backHref}
+        showNav={showNav}
+      />
+      <div className="flex-1 overflow-hidden">{children}</div>
+    </div>
+  );
+}

package/src/components/LogList.tsx

@@ -48,7 +48,7 @@ function LogRow({ log }: { log: Log }) {
   return (
     <div>
       <div
-        className={`flex items-start gap-2 py-1 px-2 hover:bg-muted rounded ${hasDetails ? "cursor-pointer" : ""}`}
+        className={`flex items-start gap-2 py-1.5 px-2 hover:bg-muted rounded ${hasDetails ? "cursor-pointer" : ""}`}
         onClick={() => hasDetails && setExpanded(!expanded)}
       >
         <span
@@ -93,7 +93,7 @@ export function LogList({ logs }: LogListProps) {
   }
 
   return (
-    <div className="font-mono text-sm space-y-0.5">
+    <div className="font-mono text-sm space-y-0">
       {logs.map((log) => (
         <LogRow key={log.id} log={log} />
       ))}

package/src/components/MessageBubble.tsx

@@ -0,0 +1,28 @@
+import { cn } from "@/lib/utils";
+
+interface MessageBubbleProps {
+  content: string | null;
+  type: "user" | "agent";
+}
+
+export function MessageBubble({ content, type }: MessageBubbleProps) {
+  const displayContent =
+    content || (type === "user" ? "No user input" : "No response");
+  const isPlaceholder = !content;
+
+  return (
+    <div
+      className={cn(
+        "max-w-[75%] rounded-2xl px-4 py-2 transition-all",
+        "line-clamp-4 whitespace-pre-wrap break-words text-sm",
+        type === "user"
+          ? "bg-primary text-primary-foreground"
+          : "bg-muted text-foreground",
+        isPlaceholder && "italic opacity-60",
+      )}
+      title={content || undefined}
+    >
+      {displayContent}
+    </div>
+  );
+}

package/src/components/SessionTraceList.tsx

@@ -1,6 +1,7 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { cn } from "@/lib/utils";
-import type { Trace } from "../types";
+import type { ConversationTrace } from "../types";
+import { MessageBubble } from "./MessageBubble";
 
 function formatRelativeTime(nanoseconds: number): string {
   const ms = nanoseconds / 1_000_000;
@@ -13,17 +14,11 @@ function formatRelativeTime(nanoseconds: number): string {
   return new Date(ms).toLocaleDateString();
 }
 
-function formatDuration(startNano: number, endNano: number): string {
-  const ms = (endNano - startNano) / 1_000_000;
-  if (ms < 1000) return `${ms.toFixed(0)}ms`;
-  return `${(ms / 1000).toFixed(1)}s`;
-}
-
 interface SessionTraceListProps {
   sessionId: string;
   selectedTraceId: string | null;
   onSelectTrace: (traceId: string) => void;
-  onTracesLoaded?: (traces: Trace[]) => void;
+  onTracesLoaded?: (traces: { trace_id: string }[]) => void;
 }
 
 export function SessionTraceList({
@@ -32,23 +27,25 @@ export function SessionTraceList({
   onSelectTrace,
   onTracesLoaded,
 }: SessionTraceListProps) {
-  const [traces, setTraces] = useState<Trace[]>([]);
+  const [traces, setTraces] = useState<ConversationTrace[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const scrollRef = useRef<HTMLDivElement>(null);
 
   const fetchTraces = useCallback(() => {
     setLoading(true);
     const params = new URLSearchParams();
     params.set("sessionId", sessionId);
-    fetch(`/api/traces?${params}`)
+    fetch(`/api/session-conversation?${params}`)
       .then((res) => {
-        if (!res.ok) throw new Error("Failed to fetch traces");
+        if (!res.ok) throw new Error("Failed to fetch conversation");
         return res.json();
       })
-      .then((data: Trace[]) => {
+      .then((data: ConversationTrace[]) => {
         setTraces(data);
         setLoading(false);
-        onTracesLoaded?.(data);
+        // Convert to format expected by onTracesLoaded callback
+        onTracesLoaded?.(data.map((t) => ({ trace_id: t.trace_id })));
       })
       .catch((err) => {
         setError(err.message);
@@ -60,9 +57,18 @@ export function SessionTraceList({
     fetchTraces();
   }, [fetchTraces]);
 
+  // Auto-scroll to bottom when traces load
+  useEffect(() => {
+    if (!loading && traces.length > 0 && scrollRef.current) {
+      scrollRef.current.scrollIntoView({ behavior: "smooth" });
+    }
+  }, [loading, traces.length]);
+
   if (loading) {
     return (
-      <div className="p-4 text-muted-foreground text-sm">Loading traces...</div>
+      <div className="p-4 text-muted-foreground text-sm">
+        Loading conversation...
+      </div>
     );
   }
 
@@ -73,44 +79,43 @@ export function SessionTraceList({
   if (traces.length === 0) {
     return (
       <div className="p-4 text-muted-foreground text-sm">
-        No traces found for this session
+        No messages in this session
       </div>
     );
   }
 
   return (
-    <div className="divide-y">
+    <div className="pl-16 pr-6 py-4 space-y-6">
       {traces.map((trace) => {
         const isSelected = trace.trace_id === selectedTraceId;
         return (
           <div
             key={trace.trace_id}
             className={cn(
-              "p-3 cursor-pointer hover:bg-muted/50 transition-colors",
-              isSelected && "bg-muted border-l-2 border-l-primary",
+              "space-y-2 cursor-pointer p-3 rounded-lg transition-all",
+              isSelected && "bg-blue-500/10 border-2 border-blue-500/30",
             )}
             onClick={() => onSelectTrace(trace.trace_id)}
           >
-            <div className="flex items-center justify-between gap-2">
-              <span className="font-medium text-sm truncate flex-1">
-                {trace.first_span_name || "Unknown"}
-              </span>
-              <span className="w-2 h-2 rounded-full bg-green-500 shrink-0" />
+            {/* User message - left aligned */}
+            <div className="flex justify-start">
+              <MessageBubble type="user" content={trace.userInput} />
             </div>
-            <div className="text-xs text-muted-foreground mt-1">
-              {formatRelativeTime(trace.start_time_unix_nano)}
+
+            {/* Agent message - right aligned */}
+            <div className="flex justify-end">
+              <MessageBubble type="agent" content={trace.llmOutput} />
             </div>
-            <div className="text-xs text-muted-foreground">
-              {formatDuration(
-                trace.start_time_unix_nano,
-                trace.end_time_unix_nano,
-              )}
-              {" · "}
-              {trace.span_count} spans
+
+            {/* Timestamp - centered */}
+            <div className="text-center text-xs text-muted-foreground">
+              {formatRelativeTime(trace.start_time_unix_nano)}
             </div>
           </div>
         );
       })}
+      {/* Auto-scroll target */}
+      <div ref={scrollRef} />
     </div>
   );
 }