Add debug mode functionality to SettingsPanel and TRPC router

- Introduced a debug mode toggle in the SettingsPanel, allowing users to enable or disable debug logging.
- Updated the TRPC router to manage server-side debug mode state, including procedures to set and get the debug mode status.
- Enhanced event logging to output raw events and parsed actions when debug mode is enabled, improving troubleshooting capabilities.

src/components/monitor/SettingsPanel.tsx

@@ -1,11 +1,13 @@
 import { useState } from 'react'
 import { motion, AnimatePresence } from 'framer-motion'
-import { Settings, X, History, Wifi, WifiOff, RefreshCw } from 'lucide-react'
+import { Settings, X, History, Wifi, WifiOff, RefreshCw, Terminal } from 'lucide-react'
 
 interface SettingsPanelProps {
   connected: boolean
   historicalMode: boolean
+  debugMode: boolean
   onHistoricalModeChange: (enabled: boolean) => void
+  onDebugModeChange: (enabled: boolean) => void
   onConnect: () => void
   onDisconnect: () => void
   onRefresh: () => void
@@ -14,7 +16,9 @@ interface SettingsPanelProps {
 export function SettingsPanel({
   connected,
   historicalMode,
+  debugMode,
   onHistoricalModeChange,
+  onDebugModeChange,
   onConnect,
   onDisconnect,
   onRefresh,
@@ -132,6 +136,31 @@ export function SettingsPanel({
                   </button>
                 </div>
 
+                {/* Debug mode toggle */}
+                <div className="panel-retro p-4">
+                  <div className="flex items-center gap-3 mb-2">
+                    <Terminal size={18} className="text-shell-500" />
+                    <span className="font-display text-sm font-medium text-gray-200 uppercase tracking-wide">
+                      Debug Logging
+                    </span>
+                  </div>
+
+                  <p className="font-console text-[10px] text-shell-500 mb-4">
+                    <span className="text-crab-600">&gt;</span> log raw events to terminal
+                  </p>
+
+                  <button
+                    onClick={() => onDebugModeChange(!debugMode)}
+                    className={`w-full px-4 py-2 font-display text-xs uppercase tracking-wide rounded-lg border-2 transition-all ${
+                      debugMode
+                        ? 'bg-neon-lavender/30 border-neon-lavender/50 text-neon-lavender'
+                        : 'bg-shell-800 border-shell-700 text-gray-400 hover:border-shell-600'
+                    }`}
+                  >
+                    {debugMode ? 'Enabled' : 'Disabled'}
+                  </button>
+                </div>
+
                 {/* Info panel */}
                 <div className="panel-retro p-4 bg-shell-950/50">
                   <h3 className="font-display text-xs text-gray-400 uppercase tracking-wide mb-3">

src/integrations/trpc/router.ts

@@ -10,6 +10,9 @@ import {
   type MonitorAction,
 } from '~/integrations/clawdbot'
 
+// Server-side debug mode state
+let debugMode = false
+
 const t = initTRPC.create({
   transformer: superjson,
 })
@@ -51,6 +54,18 @@ const clawdbotRouter = router({
     return { connected: client.connected }
   }),
 
+  setDebugMode: publicProcedure
+    .input(z.object({ enabled: z.boolean() }))
+    .mutation(({ input }) => {
+      debugMode = input.enabled
+      console.log(`[clawdbot] debug mode ${debugMode ? 'enabled' : 'disabled'}`)
+      return { debugMode }
+    }),
+
+  getDebugMode: publicProcedure.query(() => {
+    return { debugMode }
+  }),
+
   sessions: publicProcedure
     .input(
       z
@@ -88,8 +103,16 @@ const clawdbotRouter = router({
       const client = getClawdbotClient()
 
       const unsubscribe = client.onEvent((event) => {
+        // Log raw event when debug mode is enabled
+        if (debugMode) {
+          console.log('\n[DEBUG] Raw event:', JSON.stringify(event, null, 2))
+        }
+
         const parsed = parseEventFrame(event)
         if (parsed) {
+          if (debugMode && parsed.action) {
+            console.log('[DEBUG] Parsed action:', parsed.action.type, parsed.action.eventType, 'sessionKey:', parsed.action.sessionKey)
+          }
           if (parsed.session) {
             emit.next({ type: 'session', session: parsed.session })
           }

src/routes/monitor/index.tsx

@@ -62,6 +62,7 @@ function MonitorPage() {
   const [connecting, setConnecting] = useState(false)
   const [error, setError] = useState<string | null>(null)
   const [historicalMode, setHistoricalMode] = useState(false)
+  const [debugMode, setDebugMode] = useState(false)
   const [selectedSession, setSelectedSession] = useState<string | null>(null)
 
   // Sidebar collapse state - default to collapsed on mobile
@@ -158,6 +159,15 @@ function MonitorPage() {
     }
   }
 
+  const handleDebugModeChange = async (enabled: boolean) => {
+    setDebugMode(enabled)
+    try {
+      await trpc.clawdbot.setDebugMode.mutate({ enabled })
+    } catch (e) {
+      console.error('Failed to set debug mode:', e)
+    }
+  }
+
   const handleToggleSidebar = useCallback(() => {
     setSidebarCollapsed((prev) => !prev)
   }, [])
@@ -264,7 +274,9 @@ function MonitorPage() {
           <SettingsPanel
             connected={connected}
             historicalMode={historicalMode}
+            debugMode={debugMode}
             onHistoricalModeChange={handleHistoricalModeChange}
+            onDebugModeChange={handleDebugModeChange}
             onConnect={handleConnect}
             onDisconnect={handleDisconnect}
             onRefresh={handleRefresh}