setIsOpen(false)}
+ />
+ )}
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/monitor/ActionGraph.tsx b/src/components/monitor/ActionGraph.tsx
new file mode 100644
index 0000000..571e703
--- /dev/null
+++ b/src/components/monitor/ActionGraph.tsx
@@ -0,0 +1,179 @@
+import { useCallback, useEffect, useMemo } from 'react'
+import {
+ ReactFlow,
+ Background,
+ Controls,
+ MiniMap,
+ useNodesState,
+ useEdgesState,
+ type Node,
+ type Edge,
+ type NodeTypes,
+ MarkerType,
+} from '@xyflow/react'
+import '@xyflow/react/dist/style.css'
+import { SessionNode } from './SessionNode'
+import { ActionNode } from './ActionNode'
+import { layoutGraph } from '~/lib/graph-layout'
+import type { MonitorSession, MonitorAction } from '~/integrations/clawdbot'
+
+interface ActionGraphProps {
+ sessions: MonitorSession[]
+ actions: MonitorAction[]
+ selectedSession: string | null
+ onSessionSelect: (key: string | null) => void
+}
+
+const nodeTypes: NodeTypes = {
+ session: SessionNode,
+ action: ActionNode,
+}
+
+export function ActionGraph({
+ sessions,
+ actions,
+ selectedSession,
+ onSessionSelect,
+}: ActionGraphProps) {
+ // Filter actions for selected session, or show all if none selected
+ const visibleActions = useMemo(() => {
+ if (!selectedSession) return actions.slice(-50) // Last 50 actions
+ return actions.filter((a) => a.sessionKey === selectedSession)
+ }, [actions, selectedSession])
+
+ // Build nodes
+ const rawNodes = useMemo(() => {
+ const nodes: Node[] = []
+
+ // Add session nodes
+ const visibleSessions = selectedSession
+ ? sessions.filter((s) => s.key === selectedSession)
+ : sessions
+
+ for (const session of visibleSessions) {
+ nodes.push({
+ id: `session-${session.key}`,
+ type: 'session',
+ position: { x: 0, y: 0 },
+ data: session,
+ })
+ }
+
+ // Add action nodes
+ for (const action of visibleActions) {
+ nodes.push({
+ id: `action-${action.id}`,
+ type: 'action',
+ position: { x: 0, y: 0 },
+ data: action,
+ })
+ }
+
+ return nodes
+ }, [sessions, visibleActions, selectedSession])
+
+ // Build edges
+ const rawEdges = useMemo(() => {
+ const edges: Edge[] = []
+
+ // Group actions by runId
+ const runActions = new Map
()
+ for (const action of visibleActions) {
+ const run = runActions.get(action.runId) ?? []
+ run.push(action)
+ runActions.set(action.runId, run)
+ }
+
+ // Connect session to first action of each run
+ for (const [runId, runActs] of runActions) {
+ const sorted = [...runActs].sort((a, b) => a.seq - b.seq)
+ if (sorted.length > 0) {
+ const first = sorted[0]
+ const sessionId = `session-${first.sessionKey}`
+ edges.push({
+ id: `e-session-${runId}`,
+ source: sessionId,
+ target: `action-${first.id}`,
+ animated: first.type === 'delta',
+ markerEnd: { type: MarkerType.ArrowClosed },
+ style: { stroke: '#6b7280' },
+ })
+ }
+
+ // Connect actions in sequence
+ for (let i = 1; i < sorted.length; i++) {
+ const prev = sorted[i - 1]
+ const curr = sorted[i]
+ edges.push({
+ id: `e-${prev.id}-${curr.id}`,
+ source: `action-${prev.id}`,
+ target: `action-${curr.id}`,
+ animated: curr.type === 'delta',
+ markerEnd: { type: MarkerType.ArrowClosed },
+ style: { stroke: '#6b7280' },
+ })
+ }
+ }
+
+ return edges
+ }, [visibleActions])
+
+ // Apply layout
+ const { nodes: layoutedNodes, edges: layoutedEdges } = useMemo(() => {
+ if (rawNodes.length === 0) return { nodes: [], edges: [] }
+ return layoutGraph(rawNodes, rawEdges, {
+ direction: 'TB',
+ nodeWidth: 200,
+ nodeHeight: 80,
+ rankSep: 60,
+ nodeSep: 30,
+ })
+ }, [rawNodes, rawEdges])
+
+ const [nodes, setNodes, onNodesChange] = useNodesState(layoutedNodes)
+ const [edges, setEdges, onEdgesChange] = useEdgesState(layoutedEdges)
+
+ // Update nodes when layout changes
+ useEffect(() => {
+ setNodes(layoutedNodes)
+ setEdges(layoutedEdges)
+ }, [layoutedNodes, layoutedEdges, setNodes, setEdges])
+
+ const onNodeClick = useCallback(
+ (_: React.MouseEvent, node: Node) => {
+ if (node.type === 'session') {
+ const sessionKey = (node.data as MonitorSession).key
+ onSessionSelect(selectedSession === sessionKey ? null : sessionKey)
+ }
+ },
+ [onSessionSelect, selectedSession]
+ )
+
+ return (
+
+
+
+
+ {
+ if (node.type === 'session') return '#06b6d4'
+ return '#6b7280'
+ }}
+ />
+
+
+ )
+}
diff --git a/src/components/monitor/ActionNode.tsx b/src/components/monitor/ActionNode.tsx
new file mode 100644
index 0000000..9bb1593
--- /dev/null
+++ b/src/components/monitor/ActionNode.tsx
@@ -0,0 +1,110 @@
+import { memo, useState } from 'react'
+import { Handle, Position, type NodeProps } from '@xyflow/react'
+import { motion } from 'framer-motion'
+import { Loader2, CheckCircle, XCircle, Wrench, MessageSquare } from 'lucide-react'
+import type { MonitorAction } from '~/integrations/clawdbot'
+
+type ActionNodeData = MonitorAction
+
+const typeConfig = {
+ delta: {
+ icon: Loader2,
+ color: 'border-blue-500 bg-blue-500/10',
+ iconColor: 'text-blue-400',
+ animate: true,
+ },
+ final: {
+ icon: CheckCircle,
+ color: 'border-green-500 bg-green-500/10',
+ iconColor: 'text-green-400',
+ animate: false,
+ },
+ aborted: {
+ icon: XCircle,
+ color: 'border-orange-500 bg-orange-500/10',
+ iconColor: 'text-orange-400',
+ animate: false,
+ },
+ error: {
+ icon: XCircle,
+ color: 'border-red-500 bg-red-500/10',
+ iconColor: 'text-red-400',
+ animate: false,
+ },
+ tool_call: {
+ icon: Wrench,
+ color: 'border-purple-500 bg-purple-500/10',
+ iconColor: 'text-purple-400',
+ animate: false,
+ },
+ tool_result: {
+ icon: MessageSquare,
+ color: 'border-cyan-500 bg-cyan-500/10',
+ iconColor: 'text-cyan-400',
+ animate: false,
+ },
+}
+
+export const ActionNode = memo(function ActionNode({
+ data,
+ selected,
+}: NodeProps) {
+ const [expanded, setExpanded] = useState(false)
+ const config = typeConfig[data.type]
+ const Icon = config.icon
+
+ const truncatedContent = data.content
+ ? data.content.length > 60
+ ? data.content.slice(0, 60) + '...'
+ : data.content
+ : null
+
+ return (
+ setExpanded(!expanded)}
+ className={`
+ px-3 py-2 rounded-md border min-w-[160px] max-w-[280px] cursor-pointer
+ ${config.color}
+ ${selected ? 'ring-2 ring-white/50' : ''}
+ `}
+ >
+
+
+
+
+
+ {data.type.replace('_', ' ')}
+
+
+ #{data.seq}
+
+
+
+ {data.toolName && (
+
+ {data.toolName}
+
+ )}
+
+ {truncatedContent && (
+
+ {expanded ? data.content : truncatedContent}
+
+ )}
+
+ {expanded && data.toolArgs && (
+
+ {JSON.stringify(data.toolArgs, null, 2)}
+
+ )}
+
+
+
+ )
+})
diff --git a/src/components/monitor/SessionList.tsx b/src/components/monitor/SessionList.tsx
new file mode 100644
index 0000000..54bff0d
--- /dev/null
+++ b/src/components/monitor/SessionList.tsx
@@ -0,0 +1,126 @@
+import { useState } from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
+import { Search, Filter } from 'lucide-react'
+import { StatusIndicator } from './StatusIndicator'
+import type { MonitorSession } from '~/integrations/clawdbot'
+
+interface SessionListProps {
+ sessions: MonitorSession[]
+ selectedKey: string | null
+ onSelect: (key: string) => void
+}
+
+const platformEmoji: Record = {
+ whatsapp: '💬',
+ telegram: '✈️',
+ discord: '🎮',
+ slack: '💼',
+}
+
+export function SessionList({ sessions, selectedKey, onSelect }: SessionListProps) {
+ const [filter, setFilter] = useState('')
+ const [platformFilter, setPlatformFilter] = useState(null)
+
+ const platforms = [...new Set(sessions.map((s) => s.platform))]
+
+ const filteredSessions = sessions.filter((session) => {
+ const matchesText =
+ !filter ||
+ session.recipient.toLowerCase().includes(filter.toLowerCase()) ||
+ session.agentId.toLowerCase().includes(filter.toLowerCase())
+ const matchesPlatform = !platformFilter || session.platform === platformFilter
+ return matchesText && matchesPlatform
+ })
+
+ // Sort: active first, then by lastActivityAt
+ const sortedSessions = [...filteredSessions].sort((a, b) => {
+ if (a.status !== 'idle' && b.status === 'idle') return -1
+ if (a.status === 'idle' && b.status !== 'idle') return 1
+ return b.lastActivityAt - a.lastActivityAt
+ })
+
+ return (
+
+
+
+
+ setFilter(e.target.value)}
+ className="w-full pl-8 pr-3 py-2 text-sm bg-gray-800 border border-gray-700 rounded focus:outline-none focus:border-cyan-500"
+ />
+
+
+ {platforms.length > 1 && (
+
+
+ {platforms.map((p) => (
+
+ ))}
+
+ )}
+
+
+
+
+ {sortedSessions.map((session) => (
+ onSelect(session.key)}
+ className={`w-full text-left p-3 border-b border-gray-800 hover:bg-gray-800 transition-colors ${
+ selectedKey === session.key ? 'bg-gray-800 border-l-2 border-l-cyan-500' : ''
+ }`}
+ >
+
+ {platformEmoji[session.platform] || '📱'}
+
+ {session.recipient}
+
+
+
+
+ {session.agentId}
+ {session.isGroup && (
+
+ group
+
+ )}
+
+
+ ))}
+
+
+ {sortedSessions.length === 0 && (
+
+ No sessions found
+
+ )}
+
+
+
+ {sessions.length} session{sessions.length !== 1 ? 's' : ''}
+
+
+ {platformIcon}
+ {data.platform}
+
+
+
+
+ {data.isGroup ? (
+
+ ) : (
+
+ )}
+ {data.recipient}
+
+
+
+ {data.agentId}
+
+
+
+
+ )
+})
diff --git a/src/components/monitor/SettingsPanel.tsx b/src/components/monitor/SettingsPanel.tsx
new file mode 100644
index 0000000..469e255
--- /dev/null
+++ b/src/components/monitor/SettingsPanel.tsx
@@ -0,0 +1,135 @@
+import { useState } from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
+import { Settings, X, History, Wifi, WifiOff, RefreshCw } from 'lucide-react'
+
+interface SettingsPanelProps {
+ connected: boolean
+ historicalMode: boolean
+ onHistoricalModeChange: (enabled: boolean) => void
+ onConnect: () => void
+ onDisconnect: () => void
+ onRefresh: () => void
+}
+
+export function SettingsPanel({
+ connected,
+ historicalMode,
+ onHistoricalModeChange,
+ onConnect,
+ onDisconnect,
+ onRefresh,
+}: SettingsPanelProps) {
+ const [open, setOpen] = useState(false)
+
+ return (
+ <>
+
+
+
+ {open && (
+ <>
+ setOpen(false)}
+ className="fixed inset-0 bg-black/50 z-40"
+ />
+
+
+
Settings
+
+
+
+
+ {/* Connection status */}
+
+
+ {connected ? (
+
+ ) : (
+
+ )}
+
+ {connected ? 'Connected' : 'Disconnected'}
+
+
+
+ {connected ? (
+
+ ) : (
+
+ )}
+
+
+
+
+ {/* Historical mode toggle */}
+
+
+
+ Historical Mode
+
+
+ Load past sessions on connect
+
+
+
+
+ {/* Info */}
+
+
+ Gateway: ws://127.0.0.1:18789
+
+
+ Protocol: v3
+
+
+
+
+ {isPulsing && (
+
+ )}
+
+
Collections
+
+
+ ),
+}
+
+function DbInspector() {
+ const todos = useLiveQuery(todosCollection)
+ return (
+
+
todos ({todos.length})
+
+ {JSON.stringify(todos, null, 2)}
+
+
+
+
TanStack DB Demo
+
+
+
+
+ {todos.map((todo) => (
+
+ handleToggle(todo)}
+ className="w-5 h-5 rounded accent-orange-500"
+ />
+
+ {todo.text}
+
+
+
+ ))}
+ {todos.length === 0 && (
+
No todos yet. Add one above.
+ )}
+
+
+
+
Database State
+
+ {JSON.stringify(todos, null, 2)}
+
+
+
+
+
+ ← Back to Home
+
+
+
+
+
+
TanStack Query Demo
+
+ {isLoading && (
+
+ Loading...
+
+ )}
+
+ {error && (
+
+ Error: {error.message}
+
+ )}
+
+ {data && (
+
+
{data.title}
+
{data.body}
+
+ )}
+
+
+
+ ← Back to Home
+
+
+
+
+
+
tRPC Demo
+
+
+
+
Hello Query
+ {helloQuery.isLoading && (
+
Loading...
+ )}
+ {helloQuery.data && (
+
{helloQuery.data.greeting}
+ )}
+
+
+
+
Items Query
+ {itemsQuery.isLoading && (
+
Loading...
+ )}
+ {itemsQuery.data && (
+
+ {itemsQuery.data.map((item) => (
+ -
+ {item.name}
+
+ ))}
+
+ )}
+
+
+
+
+
+ ← Back to Home
+
+
+
+
+
+
+
Crabwalk
+
+ Clawdbot Companion Monitor
+
+
+
+ Open Monitor
+
+
+
+
+ {/* Header */}
+
+
+ {/* Main content */}
+
+ {/* Sidebar */}
+
+
+
+
+ {/* Graph area */}
+
+ {sessions.length === 0 && !connecting ? (
+
+
+
+
No active sessions
+
+ {connected
+ ? 'Waiting for agent activity...'
+ : 'Connect to clawdbot gateway to start monitoring'}
+
+ {!connected && (
+
+ )}
+
+
+ ) : (
+
+ )}
+
+
+
+
+