@townco/debugger 0.1.71 → 0.1.73

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@townco/debugger",
-  "version": "0.1.71",
+  "version": "0.1.73",
   "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.70",
-    "@townco/tsconfig": "0.1.112",
+    "@townco/otlp-server": "0.1.72",
+    "@townco/tsconfig": "0.1.114",
     "@townco/ui": "^0.1.77",
     "bun-plugin-tailwind": "^0.1.2",
     "class-variance-authority": "^0.7.1",

package/src/components/ConversationPanel.tsx

@@ -98,13 +98,17 @@ function ToolCall({ item, isSelected }: ToolCallProps) {
         <IconComponent
           className={cn(
             "size-3.5 shrink-0",
-            isSelected ? "text-blue-700" : "text-muted-foreground",
+            isSelected
+              ? "text-blue-700 dark:text-blue-400"
+              : "text-muted-foreground",
           )}
         />
         <span
           className={cn(
             "text-xs font-medium",
-            isSelected ? "text-blue-700" : "text-muted-foreground",
+            isSelected
+              ? "text-blue-700 dark:text-blue-400"
+              : "text-muted-foreground",
           )}
         >
           {item.toolName}
@@ -115,7 +119,7 @@ function ToolCall({ item, isSelected }: ToolCallProps) {
       {formattedInput && (
         <div className="w-full border border-border rounded-lg overflow-hidden">
           {/* Header */}
-          <div className="bg-neutral-100 p-2">
+          <div className="bg-muted p-2">
             <p className="text-[9px] font-semibold text-muted-foreground uppercase tracking-wider">
               Input
             </p>
@@ -181,8 +185,9 @@ function ConversationItemRow({
       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",
+        isClickable && isHighlighted && "bg-accent/50",
+        isSelected &&
+          "bg-blue-50 dark:bg-blue-950 border-blue-700 dark:border-blue-400",
       )}
       {...interactiveProps}
     >
@@ -200,7 +205,7 @@ function ConversationItemRow({
             <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">
+            <div className="bg-muted rounded-lg px-3 py-2 w-full">
               <p className="text-sm text-foreground leading-relaxed tracking-tight">
                 {item.content}
               </p>
@@ -211,7 +216,9 @@ function ConversationItemRow({
             <span
               className={cn(
                 "text-xs font-medium py-1",
-                isSelected ? "text-blue-700" : "text-muted-foreground",
+                isSelected
+                  ? "text-blue-700 dark:text-blue-400"
+                  : "text-muted-foreground",
               )}
             >
               {item.label || "Agent"}
@@ -225,7 +232,7 @@ function ConversationItemRow({
             <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">
+            <p className="text-sm text-muted-foreground leading-relaxed tracking-tight">
               {item.content}
             </p>
           </div>

package/src/components/DiagnosticDetailsPanel.tsx

@@ -209,7 +209,7 @@ const CollapsibleText = ({ text }: { text: string }) => {
       <button
         type="button"
         onClick={() => setExpanded(!expanded)}
-        className="text-[10px] text-purple-600 hover:text-purple-700 mt-1 font-medium"
+        className="text-[10px] text-purple-600 dark:text-purple-400 hover:text-purple-700 dark:hover:text-purple-300 mt-1 font-medium"
       >
         {expanded ? "Show less" : "Show more"}
       </button>
@@ -312,13 +312,13 @@ const ToolCallWithResult = ({
   };
 
   return (
-    <div className="border-l-2 border-blue-500 pl-2 bg-blue-500/5 rounded py-1">
+    <div className="border-l-2 border-blue-500 dark:border-blue-400 pl-2 bg-blue-500/5 dark:bg-blue-500/10 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">
+        <span className="text-[9px] font-semibold text-blue-600 dark:text-blue-400 uppercase">
           Tool Call
         </span>
         <span className="text-[10px] text-foreground font-mono">
@@ -332,7 +332,7 @@ const ToolCallWithResult = ({
         <div className="flex flex-col gap-2 mt-1">
           {/* Input section */}
           <div>
-            <div className="text-[9px] font-semibold text-purple-600 uppercase mb-1">
+            <div className="text-[9px] font-semibold text-purple-600 dark:text-purple-400 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">
@@ -342,7 +342,7 @@ const ToolCallWithResult = ({
           {/* Result section */}
           {result !== undefined && (
             <div>
-              <div className="text-[9px] font-semibold text-green-600 uppercase mb-1">
+              <div className="text-[9px] font-semibold text-green-600 dark:text-green-400 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">
@@ -476,9 +476,9 @@ const MessageSection = ({ title, data }: { title: string; data: unknown }) => {
                     title="Tool Use"
                     subtitle={item.block.name}
                     content={parsedInput}
-                    borderColor="border-purple-500"
-                    bgColor="bg-purple-500/5"
-                    badgeColor="text-purple-600"
+                    borderColor="border-purple-500 dark:border-purple-400"
+                    bgColor="bg-purple-500/5 dark:bg-purple-500/10"
+                    badgeColor="text-purple-600 dark:text-purple-400"
                   />
                 );
               }
@@ -490,9 +490,9 @@ const MessageSection = ({ title, data }: { title: string; data: unknown }) => {
                     title="Tool Result"
                     subtitle=""
                     content={item.block.content}
-                    borderColor="border-green-500"
-                    bgColor="bg-green-500/5"
-                    badgeColor="text-green-600"
+                    borderColor="border-green-500 dark:border-green-400"
+                    bgColor="bg-green-500/5 dark:bg-green-500/10"
+                    badgeColor="text-green-600 dark:text-green-400"
                   />
                 );
               }
@@ -655,9 +655,9 @@ const MessageSection = ({ title, data }: { title: string; data: unknown }) => {
                     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"
+                    borderColor="border-purple-500 dark:border-purple-400"
+                    bgColor="bg-purple-500/5 dark:bg-purple-500/10"
+                    badgeColor="text-purple-600 dark:text-purple-400"
                   />
                 );
               }
@@ -669,9 +669,9 @@ const MessageSection = ({ title, data }: { title: string; data: unknown }) => {
                     title="Tool Result"
                     subtitle=""
                     content={item.content}
-                    borderColor="border-green-500"
-                    bgColor="bg-green-500/5"
-                    badgeColor="text-green-600"
+                    borderColor="border-green-500 dark:border-green-400"
+                    bgColor="bg-green-500/5 dark:bg-green-500/10"
+                    badgeColor="text-green-600 dark:text-green-400"
                   />
                 );
               }
@@ -947,9 +947,9 @@ function LogDetails({ log }: { log: Log }) {
 
   const severityColor =
     log.severity_number >= 17
-      ? "text-red-500"
+      ? "text-red-500 dark:text-red-400"
       : log.severity_number >= 13
-        ? "text-yellow-500"
+        ? "text-yellow-500 dark:text-yellow-400"
         : "text-muted-foreground";
 
   return (

package/src/components/NavBar.tsx

@@ -1,4 +1,5 @@
 import {
+  ThemeToggle,
   Tooltip,
   TooltipContent,
   TooltipProvider,
@@ -99,32 +100,35 @@ export function NavBar({ sessionId, userId }: NavBarProps) {
       </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>
-      )}
+      <div className="flex items-center gap-2">
+        {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>
+        )}
+        <ThemeToggle />
+      </div>
     </header>
   );
 }

package/src/components/SpansLogsList.tsx

@@ -231,7 +231,8 @@ function SpanRow({
       type="button"
       className={cn(
         "flex items-center gap-2 h-[38px] w-full px-4 py-2 text-left border-b border-border hover:bg-accent",
-        isSelected && "bg-blue-50 hover:bg-blue-100/70",
+        isSelected &&
+          "bg-blue-50 dark:bg-blue-950 hover:bg-blue-100/70 dark:hover:bg-blue-900/70",
       )}
       style={{ paddingLeft: `${16 + depth * 20}px` }}
       onMouseEnter={() => onHover(span.span_id)}
@@ -282,9 +283,9 @@ function LogRow({
 
   const severityColor =
     log.severity_number >= 17
-      ? "text-red-500" // ERROR+
+      ? "text-red-500 dark:text-red-400" // ERROR+
       : log.severity_number >= 13
-        ? "text-yellow-500" // WARN
+        ? "text-yellow-500 dark:text-yellow-400" // WARN
         : "text-muted-foreground"; // INFO and below
 
   return (
@@ -295,7 +296,7 @@ function LogRow({
       className={cn(
         "flex items-center gap-2 h-[38px] w-full px-4 py-2 border-b border-border transition-colors text-left hover:bg-muted/50",
         isHighlighted && "bg-accent",
-        isSelected && "bg-blue-50",
+        isSelected && "bg-blue-50 dark:bg-blue-950",
       )}
     >
       {/* Timestamp */}