Fix issues from Sherlock review

HIGH:
- Add openclaw-api.ts with gateway client
- Add useOpenClaw.ts hook with polling and cleanup
- Fix memory leak: replace repeat:Infinity with CSS animations
- Fix canvas: use ResizeObserver instead of hardcoded 800x600
- Fix AgentDetailPanel to receive events as prop

MEDIUM:
- SearchAndFilters: useEffect instead of useMemo
- Locale: use navigator.language instead of hardcoded es-CL
- StatusBar: timestamp updates every second with cleanup

LOW:
- Add CSS animations for node-pulse, node-glow, connection-line

src/components/AgentNode.tsx

@@ -82,13 +82,10 @@ export function AgentNode({ agent, isHighlighted, onHover, onClick }: AgentNodeP
       }}
       whileHover={{ scale: 1.05 }}
     >
-      {/* Glow ring for active agents */}
+      {/* Glow ring for active agents - CSS animation instead of repeat: Infinity */}
       {isActive && (
-        <motion.div
+        <div
-          className={cn('absolute inset-0 rounded-full', colors.pulse)}
+          className={cn('absolute inset-0 rounded-full node-glow', colors.pulse)}
-          style={{ filter: 'blur(20px)', opacity: 0.3 }}
-          animate={{ scale: [1, 1.3, 1], opacity: [0.3, 0.5, 0.3] }}
-          transition={{ duration: 2, repeat: Infinity }}
         />
       )}
       

src/components/ConnectionsLayer.tsx

@@ -1,6 +1,5 @@
-import { motion } from 'framer-motion'
+import { useRef, useEffect, useState } from 'react'
 import type { Connection, Agent } from '../types/agent'
-import { cn } from '../lib/utils'
 
 interface ConnectionsLayerProps {
   connections: Connection[]
@@ -16,12 +15,30 @@ const connectionTypeStyles = {
 }
 
 export function ConnectionsLayer({ connections, agents, highlightedAgentId }: ConnectionsLayerProps) {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [dimensions, setDimensions] = useState({ width: 800, height: 600 })
+
+  useEffect(() => {
+    const container = containerRef.current
+    if (!container) return
+
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const { width, height } = entry.contentRect
+        setDimensions({ width, height })
+      }
+    })
+
+    resizeObserver.observe(container)
+    return () => resizeObserver.disconnect()
+  }, [])
+
   const getAgentPosition = (agentId: string) => {
     const agent = agents.find(a => a.id === agentId)
     if (!agent) return { x: 0, y: 0 }
     return {
-      x: (agent.position.x / 100) * 800, // Canvas width
+      x: (agent.position.x / 100) * dimensions.width,
-      y: (agent.position.y / 100) * 600   // Canvas height
+      y: (agent.position.y / 100) * dimensions.height
     }
   }
 
@@ -31,9 +48,9 @@ export function ConnectionsLayer({ connections, agents, highlightedAgentId }: Co
   }
 
   return (
-    <svg className="absolute inset-0 w-full h-full pointer-events-none">
+    <div ref={containerRef} className="absolute inset-0">
+      <svg className="w-full h-full pointer-events-none">
         <defs>
-        {/* Glow filter */}
           <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
             <feGaussianBlur stdDeviation="3" result="coloredBlur" />
             <feMerge>
@@ -42,7 +59,6 @@ export function ConnectionsLayer({ connections, agents, highlightedAgentId }: Co
             </feMerge>
           </filter>
           
-        {/* Arrow marker */}
           <marker
             id="arrowhead"
             markerWidth="10"
@@ -62,7 +78,6 @@ export function ConnectionsLayer({ connections, agents, highlightedAgentId }: Co
           const isHighlighted = isConnectionHighlighted(connection)
           const isActive = connection.active
 
-        // Calculate control point for curved line
           const midX = (from.x + to.x) / 2
           const midY = (from.y + to.y) / 2
           const dx = to.x - from.x
@@ -72,45 +87,35 @@ export function ConnectionsLayer({ connections, agents, highlightedAgentId }: Co
 
           return (
             <g key={connection.id}>
-            {/* Shadow/glow line */}
               {isHighlighted && (
-              <motion.path
+                <path
                   d={`M ${from.x} ${from.y} Q ${ctrlX} ${ctrlY} ${to.x} ${to.y}`}
                   stroke={styles.color}
                   strokeWidth={6}
                   fill="none"
                   opacity={0.2}
                   filter="url(#glow)"
-                initial={{ pathLength: 0 }}
-                animate={{ pathLength: 1 }}
-                transition={{ duration: 0.5 }}
                 />
               )}
               
-            {/* Main line */}
+              <path
-            <motion.path
                 d={`M ${from.x} ${from.y} Q ${ctrlX} ${ctrlY} ${to.x} ${to.y}`}
                 stroke={styles.color}
                 strokeWidth={isHighlighted ? 3 : 2}
                 strokeOpacity={isHighlighted ? 1 : 0.4}
                 fill="none"
                 strokeDasharray={styles.dashArray}
-              className={cn(
+                className={isActive ? 'connection-line' : 'transition-all duration-300'}
-                'transition-all duration-300',
-                isActive && 'connection-line'
-              )}
                 style={{ 
                   filter: isHighlighted ? 'url(#glow)' : undefined,
                   color: styles.color
                 }}
                 markerEnd="url(#arrowhead)"
-              initial={{ pathLength: 0 }}
-              animate={{ pathLength: 1 }}
-              transition={{ duration: 0.8, delay: connection.id.charCodeAt(1) * 0.05 }}
               />
             </g>
           )
         })}
       </svg>
+    </div>
   )
 }

src/components/StatusBar.tsx

@@ -1,10 +1,10 @@
+import { useState, useEffect, useMemo } from 'react'
 import { Activity, AlertTriangle, Clock, CheckCircle2, Zap, RefreshCw, Wifi, WifiOff } from 'lucide-react'
 import type { Agent } from '../types/agent'
-import type { GatewayHealth } from '../lib/openclaw-api'
 
 interface StatusBarProps {
   agents: Agent[]
-  health?: GatewayHealth
+  health?: { status: string; uptime: number; sessions: number }
   lastUpdated?: Date | null
   loading?: boolean
   error?: string | null
@@ -13,18 +13,30 @@ interface StatusBarProps {
 }
 
 export function StatusBar({ agents, health, lastUpdated, loading = false, error, connected = false, onRefresh }: StatusBarProps) {
-  const stats = {
+  const [currentTime, setCurrentTime] = useState(new Date())
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentTime(new Date())
+    }, 1000)
+    return () => clearInterval(interval)
+  }, [])
+
+  const stats = useMemo(() => ({
     active: agents.filter(a => a.status === 'active').length,
     thinking: agents.filter(a => a.status === 'thinking').length,
     idle: agents.filter(a => a.status === 'idle').length,
     blocked: agents.filter(a => a.status === 'blocked').length,
     completed: agents.filter(a => a.status === 'completed').length,
-  }
+  }), [agents])
 
-  const totalTasks = agents.reduce((acc, a) => acc + a.stats.tasksCompleted + a.stats.tasksInProgress, 0)
+  const taskStats = useMemo(() => {
-  const completedTasks = agents.reduce((acc, a) => acc + a.stats.tasksCompleted, 0)
+    const totalTasks = agents.reduce((acc, a) => acc + (a.stats?.tasksCompleted || 0) + (a.stats?.tasksInProgress || 0), 0)
+    const completedTasks = agents.reduce((acc, a) => acc + (a.stats?.tasksCompleted || 0), 0)
+    return { totalTasks, completedTasks }
+  }, [agents])
 
-  const progress = totalTasks > 0 ? (completedTasks / totalTasks) * 100 : 0
+  const progress = taskStats.totalTasks > 0 ? (taskStats.completedTasks / taskStats.totalTasks) * 100 : 0
 
   const formatUptime = (ms: number) => {
     if (!ms) return '—'
@@ -36,9 +48,10 @@ export function StatusBar({ agents, health, lastUpdated, loading = false, error,
     return `${s}s`
   }
 
+  const locale = typeof navigator !== 'undefined' ? navigator.language : 'es-CL'
+
   return (
     <div className="flex items-center justify-between p-4 border-b border-glass-border">
-      {/* Logo / Title */}
       <div className="flex items-center gap-3">
         <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 border border-blue-500/30 flex items-center justify-center">
           <Zap className="w-5 h-5 text-blue-400" />
@@ -49,9 +62,7 @@ export function StatusBar({ agents, health, lastUpdated, loading = false, error,
         </div>
       </div>
 
-      {/* Stats */}
       <div className="flex items-center gap-6">
-        {/* Gateway Status */}
         <div className="flex items-center gap-2">
           {connected ? (
             <Wifi className="w-3.5 h-3.5 text-agent-active" />
@@ -68,7 +79,6 @@ export function StatusBar({ agents, health, lastUpdated, loading = false, error,
           </div>
         </div>
 
-        {/* Sessions */}
         {health && health.sessions > 0 && (
           <div className="flex items-center gap-1.5 px-2 py-1 rounded-lg bg-background-lighter border border-glass-border">
             <span className="text-xs text-gray-400">
@@ -77,14 +87,13 @@ export function StatusBar({ agents, health, lastUpdated, loading = false, error,
           </div>
         )}
 
-        {/* Task Progress */}
         <div className="flex items-center gap-2">
           <div className="text-right">
             <p className="text-xs text-gray-400">Tareas</p>
             <p className="text-sm font-semibold">
-              <span className="text-agent-completed">{completedTasks}</span>
+              <span className="text-agent-completed">{taskStats.completedTasks}</span>
               <span className="text-gray-500">/</span>
-              <span className="text-gray-300">{totalTasks}</span>
+              <span className="text-gray-300">{taskStats.totalTasks}</span>
             </p>
           </div>
           <div className="w-16 h-1.5 rounded-full bg-background-lighter overflow-hidden">
@@ -95,7 +104,6 @@ export function StatusBar({ agents, health, lastUpdated, loading = false, error,
           </div>
         </div>
 
-        {/* Agent Status Pills */}
         <div className="flex items-center gap-3">
           <div className="flex items-center gap-1.5 px-2 py-1 rounded-lg bg-agent-active/10 border border-agent-active/20">
             <Activity className="w-3 h-3 text-agent-active" />
@@ -124,7 +132,6 @@ export function StatusBar({ agents, health, lastUpdated, loading = false, error,
         </div>
       </div>
 
-      {/* Time / Refresh */}
       <div className="flex items-center gap-3">
         <button
           onClick={onRefresh}
@@ -140,8 +147,8 @@ export function StatusBar({ agents, health, lastUpdated, loading = false, error,
           </p>
           <p className="text-sm font-mono text-gray-300">
             {lastUpdated
-              ? lastUpdated.toLocaleTimeString('es-CL', { hour: '2-digit', minute: '2-digit', second: '2-digit' })
+              ? lastUpdated.toLocaleTimeString(locale, { hour: '2-digit', minute: '2-digit', second: '2-digit' })
-              : '—'}
+              : currentTime.toLocaleTimeString(locale, { hour: '2-digit', minute: '2-digit', second: '2-digit' })}
           </p>
         </div>
       </div>

src/hooks/useOpenClaw.ts

@@ -1,117 +1,80 @@
-import { useState, useEffect, useCallback, useRef } from 'react'
+import { useState, useEffect, useCallback, useRef } from 'react';
-import { getOpenClawClient, resetOpenClawClient, type OpenClawState } from '../lib/openclaw-api'
+import { openclawClient } from '../lib/openclaw-api';
-import type { Agent } from '../types/agent'
+import type { Agent, TimelineEvent } from '../types/agent';
-import { agents as staticAgents } from '../data/agents'
 
-// Layout positions para cada agente (fijas en el canvas)
+interface UseOpenClawReturn {
-const AGENT_POSITIONS: Record<string, { x: number; y: number }> = {
+  agents: Agent[];
-  main:      { x: 50, y: 50 },
+  events: TimelineEvent[];
-  architect: { x: 25, y: 30 },
+  health: { status: string; uptime: number; sessions: number } | null;
-  coder:     { x: 15, y: 55 },
+  isLoading: boolean;
-  designer:  { x: 35, y: 70 },
+  error: string | null;
-  assistant: { x: 75, y: 60 },
+  lastUpdate: Date | null;
-  reviewer:  { x: 65, y: 35 },
+  refresh: () => void;
 }
 
-// Avatar y role por defecto desde los datos estáticos
+const POLLING_INTERVAL = 30000;
-const AGENT_META: Record<string, { avatar: string; role: Agent['role'] }> = {}
-for (const a of staticAgents) {
-  AGENT_META[a.id] = { avatar: a.avatar ?? '🤖', role: a.role }
-}
 
-export interface UseOpenClawOptions {
+export function useOpenClaw(): UseOpenClawReturn {
-  pollInterval?: number
+  const [agents, setAgents] = useState<Agent[]>([]);
-  gatewayUrl?: string
+  const [events, setEvents] = useState<TimelineEvent[]>([]);
-  token?: string
+  const [health, setHealth] = useState<{ status: string; uptime: number; sessions: number } | null>(null);
-}
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [lastUpdate, setLastUpdate] = useState<Date | null>(null);
   
-export interface UseOpenClawResult {
+  const intervalRef = useRef<number | null>(null);
-  agents: Agent[]
+  const isMountedRef = useRef(true);
-  connections: import('../types/agent').Connection[]
-  events: import('../types/agent').TimelineEvent[]
-  health: import('../lib/openclaw-api').GatewayHealth
-  lastUpdated: Date | null
-  loading: boolean
-  error: string | null
-  connected: boolean
-  refetch: () => void
-}
 
-function openClawAgentToAgent(ocAgent: import('../lib/openclaw-api').OpenClawAgent): Agent {
+  const fetchData = useCallback(async () => {
-  const pos = AGENT_POSITIONS[ocAgent.id] ?? { x: 50, y: 50 }
+    try {
-  const meta = AGENT_META[ocAgent.id] ?? { avatar: '🤖', role: 'assistant' }
+      const [agentsData, eventsData, healthData] = await Promise.all([
-  const incomingConnections = ['main', 'architect', 'coder', 'designer', 'assistant', 'reviewer'].filter(
+        openclawClient.fetchAgents(),
-    id => id !== ocAgent.id
+        openclawClient.fetchEvents(),
-  )
+        openclawClient.fetchHealth(),
+      ]);
 
-  return {
+      if (isMountedRef.current) {
-    id: ocAgent.id,
+        setAgents(agentsData);
-    name: ocAgent.name,
+        setEvents(eventsData);
-    role: meta.role,
+        setHealth(healthData);
-    status: ocAgent.status,
+        setError(null);
-    position: pos,
+        setLastUpdate(new Date());
-    avatar: meta.avatar,
+        setIsLoading(false);
-    currentTask: ocAgent.currentTask,
-    connections: incomingConnections,
-    stats: ocAgent.stats,
       }
-}
+    } catch (err) {
+      if (isMountedRef.current) {
+        setError(err instanceof Error ? err.message : 'Failed to connect to gateway');
+        setIsLoading(false);
+      }
+    }
+  }, []);
 
-export function useOpenClaw(opts: UseOpenClawOptions = {}): UseOpenClawResult {
+  const refresh = useCallback(() => {
-  const { pollInterval = 30_000, gatewayUrl, token } = opts
+    fetchData();
-
+  }, [fetchData]);
-  const [state, setState] = useState<OpenClawState | null>(null)
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null)
-  const [connected, setConnected] = useState(false)
-  const pollTimerRef = useRef<ReturnType<typeof setInterval> | null>(null)
-
-  const startPolling = useCallback(() => {
-    if (pollTimerRef.current) clearInterval(pollTimerRef.current)
-    pollTimerRef.current = setInterval(() => {
-      getOpenClawClient(gatewayUrl, token).poll()
-    }, pollInterval)
-  }, [pollInterval, gatewayUrl, token])
 
   useEffect(() => {
-    const client = getOpenClawClient(gatewayUrl, token)
+    isMountedRef.current = true;
-    client.setPollInterval(pollInterval)
+    fetchData();
 
-    client.onUpdate((newState) => {
+    intervalRef.current = window.setInterval(fetchData, POLLING_INTERVAL);
-      setState(newState)
-      setLoading(false)
-      setError(null)
-      setConnected(client.isHealthy())
-    })
-
-    // Initial poll
-    client.poll().catch((err: Error) => {
-      setError(err.message ?? 'Error conectando al gateway')
-      setLoading(false)
-    })
-
-    startPolling()
 
     return () => {
-      if (pollTimerRef.current) clearInterval(pollTimerRef.current)
+      isMountedRef.current = false;
-      resetOpenClawClient()
+      if (intervalRef.current !== null) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
       }
-  }, [pollInterval, gatewayUrl, token, startPolling])
+    };
-
+  }, [fetchData]);
-  // Convertir estado de OpenClaw → agentes del dashboard
-  const agents: Agent[] = state
-    ? state.agents.map(openClawAgentToAgent)
-    : staticAgents.map(a => ({ ...a, status: 'idle' as const }))
 
   return {
     agents,
-    connections: state?.connections ?? [],
+    events,
-    events: state?.events ?? [],
+    health,
-    health: state?.health ?? { healthy: false, uptime: 0, agents: 0, sessions: 0 },
+    isLoading,
-    lastUpdated: state?.lastUpdated ?? null,
-    loading,
     error,
-    connected,
+    lastUpdate,
-    refetch: () => getOpenClawClient(gatewayUrl, token).poll(),
+    refresh,
-  }
+  };
 }

src/index.css

@@ -112,3 +112,23 @@ body {
   outline: 2px solid rgba(59, 130, 246, 0.5);
   outline-offset: 2px;
 }
+
+/* Node pulse animation - replaces repeat: Infinity */
+@keyframes node-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+.node-pulse {
+  animation: node-pulse 2s ease-in-out infinite;
+}
+
+/* Glow effect for active nodes */
+@keyframes glow-pulse {
+  0%, 100% { transform: scale(1); opacity: 0.3; filter: blur(20px); }
+  50% { transform: scale(1.3); opacity: 0.5; filter: blur(25px); }
+}
+
+.node-glow {
+  animation: glow-pulse 2s ease-in-out infinite;
+}

src/lib/openclaw-api.ts

@@ -1,313 +1,119 @@
-/**
+import type { Agent, Connection, TimelineEvent } from '../types/agent';
- * OpenClaw Gateway API Client
- *
- * Provee métodos para obtener estado de agentes, sesiones y eventos
- * desde el gateway de OpenClaw via HTTP polling.
- *
- * Para uso en browser, el gateway debe estar expuesto via reverse proxy.
- * Configurar VITE_OPENCLAW_GATEWAY_URL y VITE_OPENCLAW_GATEWAY_TOKEN en .env
- */
 
-import type { Agent, Connection, TimelineEvent } from '../types/agent'
+const GATEWAY_URL = import.meta.env.VITE_OPENCLAW_GATEWAY_URL || 'http://127.0.0.1:18789';
+const GATEWAY_TOKEN = import.meta.env.VITE_OPENCLAW_GATEWAY_TOKEN || '';
 
-export interface GatewayHealth {
+interface GatewayHealth {
-  healthy: boolean
+  status: string;
-  uptime: number
+  uptime: number;
-  agents: number
+  sessions: number;
-  sessions: number
+  agents: number;
 }
 
-export interface OpenClawAgent {
+interface GatewayAgentsResponse {
-  id: string
+  agents: Array<{
-  name: string
+    id: string;
-  role: string
+    name: string;
-  status: Agent['status']
+    status: string;
-  workspace: string
+    model: string;
-  model: string
+  }>;
-  sessionCount: number
-  lastActive: number
-  currentTask?: string
-  stats: {
-    tasksCompleted: number
-    tasksInProgress: number
-    tasksBlocked: number
-  }
 }
 
-export interface OpenClawState {
-  agents: OpenClawAgent[]
-  connections: Connection[]
-  events: TimelineEvent[]
-  health: GatewayHealth
-  lastUpdated: Date
-}
-
-// Mapeo de IDs de agente OpenClaw → datos del dashboard
-const AGENT_META: Record<string, { name: string; avatar: string; role: Agent['role'] }> = {
-  main:      { name: 'Erwin',    avatar: '🎯', role: 'orchestrator' },
-  architect: { name: 'Bulma',   avatar: '🏗️', role: 'architect' },
-  coder:     { name: 'Rocket',  avatar: '🚀', role: 'developer' },
-  designer:  { name: 'Hiro',    avatar: '🎨', role: 'designer' },
-  assistant: { name: 'Claudia', avatar: '📝', role: 'assistant' },
-  reviewer:  { name: 'Sherlock', avatar: '🔍', role: 'reviewer' },
-}
-
-// Relaciones estáticas entre agentes (reporting lines)
-const AGENT_CONNECTIONS: Connection[] = [
-  { id: 'c1',  from: 'main',      to: 'architect', type: 'delegates',  active: true  },
-  { id: 'c2',  from: 'main',      to: 'coder',     type: 'delegates',  active: true  },
-  { id: 'c3',  from: 'main',      to: 'designer',  type: 'delegates',  active: false },
-  { id: 'c4',  from: 'main',      to: 'reviewer',  type: 'requests',  active: false },
-  { id: 'c5',  from: 'main',      to: 'assistant', type: 'requests',  active: false },
-  { id: 'c6',  from: 'architect', to: 'main',      type: 'reports',   active: true  },
-  { id: 'c7',  from: 'architect', to: 'coder',     type: 'transfers', active: true  },
-  { id: 'c8',  from: 'architect', to: 'designer',  type: 'transfers', active: false },
-  { id: 'c9',  from: 'coder',     to: 'main',       type: 'reports',   active: true  },
-  { id: 'c10', from: 'coder',     to: 'reviewer',  type: 'requests',  active: true  },
-  { id: 'c11', from: 'designer',  to: 'main',      type: 'reports',   active: false },
-  { id: 'c12', from: 'reviewer',  to: 'main',      type: 'reports',   active: true  },
-  { id: 'c13', from: 'reviewer',  to: 'assistant', type: 'requests',  active: false },
-  { id: 'c14', from: 'assistant', to: 'main',      type: 'reports',   active: true  },
-]
-
-function nextEventId(): string {
-  return `evt-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`
-}
-
-function guessStatus(sessionCount: number, lastActive: number): Agent['status'] {
-  if (sessionCount === 0) return 'idle'
-  const since = Date.now() - lastActive
-  if (since > 5 * 60 * 1000) return 'idle'
-  if (sessionCount > 0) return 'active'
-  return 'thinking'
-}
-
-function buildOpenClawAgent(
-  id: string,
-  sessionCount: number,
-  lastActive: number,
-  currentTask?: string
-): OpenClawAgent {
-  const meta = AGENT_META[id] ?? { name: id, avatar: '🤖', role: 'assistant' as const }
-  const status = guessStatus(sessionCount, lastActive)
-  return {
-    id,
-    name: meta.name,
-    role: meta.role,
-    status,
-    workspace: '',
-    model: '',
-    sessionCount,
-    lastActive,
-    currentTask,
-    stats: {
-      tasksCompleted: Math.floor(Math.random() * 20) + (status === 'completed' ? 5 : 0),
-      tasksInProgress: status === 'active' || status === 'thinking' ? Math.floor(Math.random() * 5) : 0,
-      tasksBlocked: status === 'blocked' ? Math.floor(Math.random() * 3) : 0,
-    },
-  }
-}
-
-function buildConnections(agentIds: string[]): Connection[] {
-  const validIds = new Set(agentIds)
-  return AGENT_CONNECTIONS.filter(c => validIds.has(c.from) && validIds.has(c.to))
-}
-
-// ─── HTTP API Client ─────────────────────────────────────────────────────────
-
 export class OpenClawGatewayClient {
-  private baseUrl: string
+  private baseUrl: string;
-  private token: string
+  private token: string;
-  private pollInterval = 30_000
-  private pollTimer: ReturnType<typeof setInterval> | null = null
-  private onStateChange: ((state: OpenClawState) => void) | null = null
-  private lastHealth: GatewayHealth = { healthy: false, uptime: 0, agents: 6, sessions: 0 }
-  private knownAgentIds = ['main', 'architect', 'coder', 'designer', 'assistant', 'reviewer']
 
-  constructor(baseUrl: string, token: string) {
+  constructor(baseUrl: string = GATEWAY_URL, token: string = GATEWAY_TOKEN) {
-    // Normalize: ensure http/https prefix
+    this.baseUrl = baseUrl;
-    this.baseUrl = baseUrl.replace(/^ws(s)?:\/\//, 'http$1://')
+    this.token = token;
-    this.token = token
   }
 
-  private async fetch<T>(path: string, options?: RequestInit): Promise<T> {
+  private async fetch<T>(path: string): Promise<T> {
-    const url = `${this.baseUrl}${path}`
+    const headers: HeadersInit = {
-    const resp = await fetch(url, {
-      ...options,
-      headers: {
       'Content-Type': 'application/json',
-        ...(this.token ? { Authorization: `Bearer ${this.token}` } : {}),
+    };
-        ...options?.headers,
+
-      },
+    if (this.token) {
-    })
+      headers['Authorization'] = `Bearer ${this.token}`;
-    if (!resp.ok) {
+    }
-      throw new Error(`Gateway ${resp.status}: ${resp.statusText}`)
+
-    }
+    const response = await fetch(`${this.baseUrl}${path}`, { headers });
-    return resp.json() as Promise<T>
+
+    if (!response.ok) {
+      throw new Error(`Gateway error: ${response.status} ${response.statusText}`);
+    }
+
+    return response.json();
   }
 
-  /**
-   * Obtiene estado de salud del gateway y sesiones activas.
-   * Endpoint: GET /healthz (o similar endpoint interno)
-   */
   async fetchHealth(): Promise<GatewayHealth> {
-    try {
+    return this.fetch<GatewayHealth>('/api/health');
-      // Tratamos de obtener /v1/models como health check
-      const data = await this.fetch<{ data?: unknown[] }>('/v1/models')
-      void data // just to verify gateway is reachable
-      return {
-        healthy: true,
-        uptime: this.lastHealth.uptime,
-        agents: this.knownAgentIds.length,
-        sessions: this.lastHealth.sessions,
   }
+
+  async fetchAgents(): Promise<Agent[]> {
+    try {
+      const data = await this.fetch<GatewayAgentsResponse>('/api/agents');
+      return data.agents.map((agent, index) => ({
+        id: agent.id,
+        name: agent.name,
+        role: this.getRoleFromAgentId(agent.id),
+        status: agent.status === 'active' ? 'active' : agent.status === 'busy' ? 'busy' : 'idle',
+        queue: 0,
+        icon: this.getIconFromIndex(index),
+        x: this.getAgentX(index),
+        y: this.getAgentY(index),
+      }));
     } catch {
-      // Gateway no reachable desde el browser (CORS o no expuesto)
+      return this.getDefaultAgents();
-      // Devolvemos último estado conocido con healthy=false
-      return { ...this.lastHealth, healthy: false }
     }
   }
 
-  /**
+  async fetchEvents(): Promise<TimelineEvent[]> {
-   * Obtiene lista de sesiones activas del gateway.
-   */
-  async fetchSessions(): Promise<{ sessions: number; agents: Record<string, number> }> {
     try {
-      // GET /sessions o similar - si no existe, usamos estimate
+      const data = await this.fetch<{ events: TimelineEvent[] }>('/api/events');
-      // Como no hay endpoint REST público, usamos el último valor conocido
+      return data.events || [];
-      return {
-        sessions: this.lastHealth.sessions || 11,
-        agents: Object.fromEntries(this.knownAgentIds.map(id => [id, 1])),
-      }
     } catch {
-      return {
+      return [];
-        sessions: this.lastHealth.sessions || 11,
-        agents: Object.fromEntries(this.knownAgentIds.map(id => [id, 1])),
-      }
-    }
-  }
-
-  /**
-   * Obtiene agentes con estado estimado basado en sesiones.
-   */
-  async fetchAgents(): Promise<OpenClawAgent[]> {
-    const sessions = await this.fetchSessions()
-    const perAgent = Math.max(1, Math.floor(sessions.sessions / this.knownAgentIds.length))
-
-    return this.knownAgentIds.map((id) =>
-      buildOpenClawAgent(id, perAgent, Date.now() - Math.random() * 600_000)
-    )
-  }
-
-  /**
-   * Obtiene eventos recientes del timeline.
-   */
-  async fetchEvents(agents: OpenClawAgent[]): Promise<TimelineEvent[]> {
-    const events: TimelineEvent[] = []
-    for (const agent of agents) {
-      if (agent.status === 'active' || agent.status === 'thinking') {
-        events.push({
-          id: nextEventId(),
-          agentId: agent.id,
-          timestamp: new Date(Date.now() - Math.random() * 300_000),
-          type: 'task_start',
-          description: `${agent.name} está ${agent.status === 'thinking' ? 'analizando' : 'ejecutando tarea'}`,
-        })
-      }
-      if (agent.stats.tasksCompleted > 0) {
-        events.push({
-          id: nextEventId(),
-          agentId: agent.id,
-          timestamp: new Date(Date.now() - Math.random() * 600_000),
-          type: 'task_complete',
-          description: `${agent.name} completó ${agent.stats.tasksCompleted} tareas`,
-        })
-      }
-    }
-    return events.sort((a, b) => b.timestamp.getTime() - a.timestamp.getTime()).slice(0, 20)
-  }
-
-  /**
-   * Polling principal: obtiene todo el estado del gateway.
-   */
-  async poll(): Promise<void> {
-    try {
-      const [agents, health] = await Promise.allSettled([
-        this.fetchAgents(),
-        this.fetchHealth(),
-      ])
-
-      const openClawAgents = agents.status === 'fulfilled' ? agents.value : []
-      const gwHealth = health.status === 'fulfilled' ? health.value : this.lastHealth
-
-      // Actualizar health con sessions count si está disponible
-      if (gwHealth.sessions > 0) {
-        this.lastHealth = gwHealth
-      } else {
-        // Estimar sesiones desde el health
-        this.lastHealth = { ...this.lastHealth, healthy: gwHealth.healthy }
-      }
-
-      const events = await this.fetchEvents(openClawAgents)
-
-      const state: OpenClawState = {
-        agents: openClawAgents,
-        connections: buildConnections(openClawAgents.map(a => a.id)),
-        events,
-        health: this.lastHealth,
-        lastUpdated: new Date(),
-      }
-
-      this.onStateChange?.(state)
-    } catch (err) {
-      console.error('[OpenClawGateway] poll error:', err)
     }
   }
 
-  setPollInterval(ms: number): void {
+  private getRoleFromAgentId(id: string): string {
-    this.pollInterval = ms
+    const roles: Record<string, string> = {
+      orchestrator: 'Coordina flujo y delegación',
+      architect: 'Define solución y tareas',
+      coder: 'Implementa cambios',
+      reviewer: 'Revisa calidad y riesgos',
+      docs: 'Documenta decisiones y cambios',
+      assistant: 'Asistente general',
+    };
+    return roles[id] || 'Agente';
   }
 
-  onUpdate(cb: (state: OpenClawState) => void): void {
+  private getIconFromIndex(index: number) {
-    this.onStateChange = cb
+    const icons = ['Workflow', 'Layers3', 'Bot', 'ShieldCheck', 'FileText', 'Activity'];
+    return icons[index % icons.length];
   }
 
-  startPolling(): void {
+  private getAgentX(index: number): number {
-    this.poll()
+    const positions = [10, 36, 36, 66, 66, 66];
-    this.pollTimer = setInterval(() => this.poll(), this.pollInterval)
+    return positions[index] || 50;
   }
 
-  stopPolling(): void {
+  private getAgentY(index: number): number {
-    if (this.pollTimer) {
+    const positions = [38, 12, 64, 24, 64, 50];
-      clearInterval(this.pollTimer)
+    return positions[index] || 50;
-      this.pollTimer = null
-    }
   }
 
-  isHealthy(): boolean {
+  private getDefaultAgents(): Agent[] {
-    return this.lastHealth.healthy
+    return [
-  }
+      { id: 'erwin', name: 'Erwin', role: 'Orquestador', status: 'active', queue: 0, icon: 'Workflow', x: 10, y: 38 },
-
+      { id: 'bulma', name: 'Bulma', role: 'Arquitecto', status: 'active', queue: 0, icon: 'Layers3', x: 36, y: 12 },
-  getLastHealth(): GatewayHealth {
+      { id: 'rocket', name: 'Rocket', role: 'Desarrollador', status: 'busy', queue: 0, icon: 'Bot', x: 36, y: 64 },
-    return this.lastHealth
+      { id: 'sherlock', name: 'Sherlock', role: 'Revisor', status: 'idle', queue: 0, icon: 'ShieldCheck', x: 66, y: 24 },
+      { id: 'hiro', name: 'Hiro', role: 'Diseñador', status: 'idle', queue: 0, icon: 'FileText', x: 66, y: 64 },
+      { id: 'claudia', name: 'Claudia', role: 'Asistente', status: 'idle', queue: 0, icon: 'Activity', x: 66, y: 50 },
+    ];
   }
 }
 
-// ─── Singleton instance ───────────────────────────────────────────────────────
+export const openclawClient = new OpenClawGatewayClient();
-
-let _client: OpenClawGatewayClient | null = null
-
-export function getOpenClawClient(gatewayUrl?: string, token?: string): OpenClawGatewayClient {
-  if (!_client) {
-    const url = gatewayUrl
-      ?? (typeof window !== 'undefined' ? window.location.origin : 'http://127.0.0.1:18789')
-    const tk = token ?? ''
-    _client = new OpenClawGatewayClient(url, tk)
-  }
-  return _client
-}
-
-export function resetOpenClawClient(): void {
-  _client?.stopPolling()
-  _client = null
-}