feat: implement React dashboard with components and hooks

frontend/src/App.tsx

@@ -0,0 +1,30 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import Dashboard from './components/Dashboard';
+import Settings from './components/Settings';
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 5000,
+      refetchOnWindowFocus: false,
+    },
+  },
+});
+
+function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <BrowserRouter>
+        <div className="min-h-screen bg-gray-950 text-gray-100">
+          <Routes>
+            <Route path="/" element={<Dashboard />} />
+            <Route path="/settings" element={<Settings />} />
+          </Routes>
+        </div>
+      </BrowserRouter>
+    </QueryClientProvider>
+  );
+}
+
+export default App;

frontend/src/api/client.ts

@@ -0,0 +1,229 @@
+import type {
+  Episode,
+  Observation,
+  Action,
+  Reward,
+  Agent,
+  MemoryState,
+  MCPTool,
+  SystemSettings,
+  APIResponse,
+  StepRequest,
+  ResetRequest,
+  EpisodeStats,
+} from '@/types';
+
+const API_BASE = '/api';
+
+class APIError extends Error {
+  constructor(
+    message: string,
+    public status: number,
+    public data?: unknown
+  ) {
+    super(message);
+    this.name = 'APIError';
+  }
+}
+
+async function request<T>(
+  endpoint: string,
+  options: RequestInit = {}
+): Promise<T> {
+  const url = `${API_BASE}${endpoint}`;
+  const headers: HeadersInit = {
+    'Content-Type': 'application/json',
+    ...options.headers,
+  };
+
+  const response = await fetch(url, {
+    ...options,
+    headers,
+  });
+
+  const data = await response.json() as APIResponse<T>;
+
+  if (!response.ok) {
+    throw new APIError(
+      data.error ?? 'An error occurred',
+      response.status,
+      data
+    );
+  }
+
+  if (!data.success) {
+    throw new APIError(data.error ?? 'Request failed', response.status, data);
+  }
+
+  return data.data as T;
+}
+
+export const apiClient = {
+  // Episode Management
+  async resetEpisode(params: ResetRequest): Promise<Episode> {
+    return request<Episode>('/episode/reset', {
+      method: 'POST',
+      body: JSON.stringify(params),
+    });
+  },
+
+  async getEpisode(episodeId: string): Promise<Episode> {
+    return request<Episode>(`/episode/${episodeId}`);
+  },
+
+  async getCurrentEpisode(): Promise<Episode | null> {
+    try {
+      return await request<Episode>('/episode/current');
+    } catch (error) {
+      if (error instanceof APIError && error.status === 404) {
+        return null;
+      }
+      throw error;
+    }
+  },
+
+  async stepEpisode(episodeId: string, step: StepRequest): Promise<{
+    observation: Observation;
+    reward: Reward;
+    done: boolean;
+    info: Record<string, unknown>;
+  }> {
+    return request(`/episode/${episodeId}/step`, {
+      method: 'POST',
+      body: JSON.stringify(step),
+    });
+  },
+
+  async terminateEpisode(episodeId: string): Promise<Episode> {
+    return request<Episode>(`/episode/${episodeId}/terminate`, {
+      method: 'POST',
+    });
+  },
+
+  // State Queries
+  async getState(episodeId: string): Promise<{
+    observation: Observation;
+    agents: Agent[];
+    memory: MemoryState;
+  }> {
+    return request(`/episode/${episodeId}/state`);
+  },
+
+  async getObservation(episodeId: string, step?: number): Promise<Observation> {
+    const query = step !== undefined ? `?step=${step}` : '';
+    return request<Observation>(`/episode/${episodeId}/observation${query}`);
+  },
+
+  async getActions(episodeId: string): Promise<Action[]> {
+    return request<Action[]>(`/episode/${episodeId}/actions`);
+  },
+
+  async getRewards(episodeId: string): Promise<Reward[]> {
+    return request<Reward[]>(`/episode/${episodeId}/rewards`);
+  },
+
+  // Agent Management
+  async getAgents(episodeId: string): Promise<Agent[]> {
+    return request<Agent[]>(`/episode/${episodeId}/agents`);
+  },
+
+  async getAgent(episodeId: string, agentId: string): Promise<Agent> {
+    return request<Agent>(`/episode/${episodeId}/agents/${agentId}`);
+  },
+
+  async updateAgent(
+    episodeId: string,
+    agentId: string,
+    updates: Partial<Agent>
+  ): Promise<Agent> {
+    return request<Agent>(`/episode/${episodeId}/agents/${agentId}`, {
+      method: 'PATCH',
+      body: JSON.stringify(updates),
+    });
+  },
+
+  // Memory Operations
+  async getMemory(episodeId: string): Promise<MemoryState> {
+    return request<MemoryState>(`/episode/${episodeId}/memory`);
+  },
+
+  async queryMemory(
+    episodeId: string,
+    query: string,
+    layer?: string,
+    limit?: number
+  ): Promise<import('@/types').MemoryEntry[]> {
+    const params = new URLSearchParams({ query });
+    if (layer) params.set('layer', layer);
+    if (limit) params.set('limit', limit.toString());
+    return request(`/episode/${episodeId}/memory/query?${params}`);
+  },
+
+  async addMemory(
+    episodeId: string,
+    entry: Omit<import('@/types').MemoryEntry, 'id' | 'timestamp'>
+  ): Promise<import('@/types').MemoryEntry> {
+    return request(`/episode/${episodeId}/memory`, {
+      method: 'POST',
+      body: JSON.stringify(entry),
+    });
+  },
+
+  async clearMemory(episodeId: string, layer?: string): Promise<void> {
+    const query = layer ? `?layer=${layer}` : '';
+    return request(`/episode/${episodeId}/memory${query}`, {
+      method: 'DELETE',
+    });
+  },
+
+  // Tools
+  async getTools(): Promise<MCPTool[]> {
+    return request<MCPTool[]>('/tools');
+  },
+
+  async getTool(name: string): Promise<MCPTool> {
+    return request<MCPTool>(`/tools/${name}`);
+  },
+
+  async executeTool(
+    name: string,
+    parameters: Record<string, unknown>
+  ): Promise<unknown> {
+    return request(`/tools/${name}/execute`, {
+      method: 'POST',
+      body: JSON.stringify(parameters),
+    });
+  },
+
+  async toggleTool(name: string, enabled: boolean): Promise<MCPTool> {
+    return request<MCPTool>(`/tools/${name}`, {
+      method: 'PATCH',
+      body: JSON.stringify({ enabled }),
+    });
+  },
+
+  // Settings
+  async getSettings(): Promise<SystemSettings> {
+    return request<SystemSettings>('/settings');
+  },
+
+  async updateSettings(settings: Partial<SystemSettings>): Promise<SystemSettings> {
+    return request<SystemSettings>('/settings', {
+      method: 'PATCH',
+      body: JSON.stringify(settings),
+    });
+  },
+
+  // Stats
+  async getStats(): Promise<EpisodeStats> {
+    return request<EpisodeStats>('/stats');
+  },
+
+  // Health Check
+  async healthCheck(): Promise<{ status: string; version: string }> {
+    return request('/health');
+  },
+};
+
+export { APIError };
+export default apiClient;

frontend/src/components/ActionPanel.tsx

@@ -0,0 +1,340 @@
+import React, { useState } from 'react';
+import {
+  Activity,
+  MousePointer,
+  Navigation,
+  Type,
+  Scroll,
+  Clock,
+  Camera,
+  Terminal,
+  Users,
+  StopCircle,
+  ChevronDown,
+  ChevronUp,
+  Filter,
+} from 'lucide-react';
+import { Card, CardHeader, CardContent } from '@/components/ui/Card';
+import { Badge } from '@/components/ui/Badge';
+import { Button } from '@/components/ui/Button';
+import { useEpisodeActions, useCurrentEpisode } from '@/hooks/useEpisode';
+import { formatTimestamp, truncateText } from '@/utils/helpers';
+import type { Action, ActionType } from '@/types';
+
+interface ActionPanelProps {
+  className?: string;
+}
+
+const ACTION_ICONS: Record<ActionType, React.ReactNode> = {
+  navigate: <Navigation className="w-4 h-4" />,
+  click: <MousePointer className="w-4 h-4" />,
+  extract: <Terminal className="w-4 h-4" />,
+  scroll: <Scroll className="w-4 h-4" />,
+  input: <Type className="w-4 h-4" />,
+  wait: <Clock className="w-4 h-4" />,
+  screenshot: <Camera className="w-4 h-4" />,
+  execute_tool: <Terminal className="w-4 h-4" />,
+  delegate: <Users className="w-4 h-4" />,
+  terminate: <StopCircle className="w-4 h-4" />,
+};
+
+const ACTION_COLORS: Record<ActionType, string> = {
+  navigate: 'text-blue-400 bg-blue-400/10',
+  click: 'text-green-400 bg-green-400/10',
+  extract: 'text-purple-400 bg-purple-400/10',
+  scroll: 'text-yellow-400 bg-yellow-400/10',
+  input: 'text-cyan-400 bg-cyan-400/10',
+  wait: 'text-gray-400 bg-gray-400/10',
+  screenshot: 'text-pink-400 bg-pink-400/10',
+  execute_tool: 'text-orange-400 bg-orange-400/10',
+  delegate: 'text-indigo-400 bg-indigo-400/10',
+  terminate: 'text-red-400 bg-red-400/10',
+};
+
+interface ActionItemProps {
+  action: Action;
+  index: number;
+  isLast: boolean;
+}
+
+const ActionItem: React.FC<ActionItemProps> = ({ action, index, isLast }) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const iconClass = ACTION_COLORS[action.type] ?? 'text-dark-400 bg-dark-700';
+
+  return (
+    <div className="relative">
+      {/* Timeline connector */}
+      {!isLast && (
+        <div className="absolute left-[15px] top-8 bottom-0 w-0.5 bg-dark-700" />
+      )}
+
+      <div
+        className="flex gap-3 cursor-pointer hover:bg-dark-700/30 rounded-lg p-2 transition-colors"
+        onClick={() => setIsExpanded(!isExpanded)}
+      >
+        {/* Icon */}
+        <div
+          className={`flex-shrink-0 w-8 h-8 rounded-lg flex items-center justify-center ${iconClass}`}
+        >
+          {ACTION_ICONS[action.type]}
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center justify-between gap-2">
+            <div className="flex items-center gap-2">
+              <Badge variant="neutral" size="sm" className={iconClass}>
+                {action.type}
+              </Badge>
+              <span className="text-xs text-dark-500">#{index + 1}</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <span className="text-xs text-dark-500">
+                {formatTimestamp(action.timestamp)}
+              </span>
+              {isExpanded ? (
+                <ChevronUp className="w-3 h-3 text-dark-500" />
+              ) : (
+                <ChevronDown className="w-3 h-3 text-dark-500" />
+              )}
+            </div>
+          </div>
+
+          {/* Quick info */}
+          <div className="mt-1 text-sm text-dark-300">
+            {action.target?.selector && (
+              <span className="font-mono text-xs text-dark-400">
+                {truncateText(action.target.selector, 40)}
+              </span>
+            )}
+            {action.value && (
+              <span className="text-dark-400">
+                {' → '}
+                {truncateText(action.value, 30)}
+              </span>
+            )}
+            {action.reasoning && !action.target?.selector && !action.value && (
+              <span className="text-dark-400 italic">
+                {truncateText(action.reasoning, 50)}
+              </span>
+            )}
+          </div>
+
+          {/* Confidence bar */}
+          <div className="mt-1.5 flex items-center gap-2">
+            <div className="h-1 flex-1 max-w-[100px] bg-dark-700 rounded-full overflow-hidden">
+              <div
+                className={`h-full rounded-full ${
+                  action.confidence > 0.8
+                    ? 'bg-green-500'
+                    : action.confidence > 0.5
+                    ? 'bg-yellow-500'
+                    : 'bg-red-500'
+                }`}
+                style={{ width: `${action.confidence * 100}%` }}
+              />
+            </div>
+            <span className="text-xs text-dark-500">
+              {(action.confidence * 100).toFixed(0)}%
+            </span>
+          </div>
+        </div>
+      </div>
+
+      {/* Expanded details */}
+      {isExpanded && (
+        <div className="ml-11 mt-2 p-3 bg-dark-900/50 rounded-lg space-y-2">
+          {action.reasoning && (
+            <div>
+              <div className="text-xs text-dark-400 mb-1">Reasoning</div>
+              <div className="text-sm text-dark-300">{action.reasoning}</div>
+            </div>
+          )}
+
+          {action.target && (
+            <div>
+              <div className="text-xs text-dark-400 mb-1">Target</div>
+              <div className="code-block text-xs">
+                {JSON.stringify(action.target, null, 2)}
+              </div>
+            </div>
+          )}
+
+          {action.parameters && Object.keys(action.parameters).length > 0 && (
+            <div>
+              <div className="text-xs text-dark-400 mb-1">Parameters</div>
+              <div className="code-block text-xs">
+                {JSON.stringify(action.parameters, null, 2)}
+              </div>
+            </div>
+          )}
+
+          <div className="flex items-center gap-4 text-xs text-dark-500">
+            <span>Agent: {action.agentId}</span>
+            <span>Confidence: {(action.confidence * 100).toFixed(1)}%</span>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export const ActionPanel: React.FC<ActionPanelProps> = ({ className }) => {
+  const { data: episode } = useCurrentEpisode();
+  const { data: actions, isLoading } = useEpisodeActions(episode?.id);
+  const [typeFilter, setTypeFilter] = useState<ActionType | null>(null);
+  const [showFilters, setShowFilters] = useState(false);
+
+  const actionTypes = React.useMemo(() => {
+    if (!actions) return [];
+    return [...new Set(actions.map((a) => a.type))];
+  }, [actions]);
+
+  const filteredActions = React.useMemo(() => {
+    if (!actions) return [];
+    if (!typeFilter) return actions;
+    return actions.filter((a) => a.type === typeFilter);
+  }, [actions, typeFilter]);
+
+  const actionCounts = React.useMemo(() => {
+    if (!actions) return {};
+    return actions.reduce(
+      (acc, a) => {
+        acc[a.type] = (acc[a.type] || 0) + 1;
+        return acc;
+      },
+      {} as Record<string, number>
+    );
+  }, [actions]);
+
+  return (
+    <Card className={className}>
+      <CardHeader
+        title="Actions"
+        subtitle={`${actions?.length ?? 0} total`}
+        icon={<Activity className="w-4 h-4" />}
+        action={
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => setShowFilters(!showFilters)}
+          >
+            <Filter className="w-4 h-4" />
+          </Button>
+        }
+      />
+      <CardContent>
+        {/* Filter Bar */}
+        {showFilters && (
+          <div className="mb-4 p-3 bg-dark-900/50 rounded-lg">
+            <div className="text-xs text-dark-400 mb-2">Filter by type</div>
+            <div className="flex flex-wrap gap-2">
+              <button
+                onClick={() => setTypeFilter(null)}
+                className={`px-2 py-1 text-xs rounded transition-colors ${
+                  !typeFilter
+                    ? 'bg-accent-primary text-white'
+                    : 'bg-dark-700 text-dark-300 hover:bg-dark-600'
+                }`}
+              >
+                All ({actions?.length ?? 0})
+              </button>
+              {actionTypes.map((type) => (
+                <button
+                  key={type}
+                  onClick={() =>
+                    setTypeFilter(typeFilter === type ? null : type)
+                  }
+                  className={`px-2 py-1 text-xs rounded transition-colors flex items-center gap-1 ${
+                    typeFilter === type
+                      ? ACTION_COLORS[type]
+                      : 'bg-dark-700 text-dark-300 hover:bg-dark-600'
+                  }`}
+                >
+                  {ACTION_ICONS[type]}
+                  {type} ({actionCounts[type] ?? 0})
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Action Stats */}
+        {actions && actions.length > 0 && (
+          <div className="flex flex-wrap gap-2 mb-4">
+            {Object.entries(actionCounts)
+              .sort((a, b) => b[1] - a[1])
+              .slice(0, 5)
+              .map(([type, count]) => (
+                <Badge
+                  key={type}
+                  variant="neutral"
+                  size="sm"
+                  className={ACTION_COLORS[type as ActionType]}
+                >
+                  {type}: {count}
+                </Badge>
+              ))}
+          </div>
+        )}
+
+        {/* Action Timeline */}
+        <div className="max-h-[400px] overflow-y-auto">
+          {isLoading ? (
+            <div className="flex items-center justify-center py-8">
+              <Activity className="w-6 h-6 text-dark-500 animate-pulse" />
+            </div>
+          ) : !filteredActions || filteredActions.length === 0 ? (
+            <div className="text-center py-8 text-dark-500">
+              <Activity className="w-8 h-8 mx-auto mb-2 opacity-50" />
+              <p>No actions recorded</p>
+            </div>
+          ) : (
+            <div className="space-y-1">
+              {filteredActions
+                .slice()
+                .reverse()
+                .map((action, i, arr) => (
+                  <ActionItem
+                    key={`${action.timestamp}-${i}`}
+                    action={action}
+                    index={arr.length - 1 - i}
+                    isLast={i === arr.length - 1}
+                  />
+                ))}
+            </div>
+          )}
+        </div>
+
+        {/* Current Action Highlight */}
+        {actions && actions.length > 0 && (
+          <div className="mt-4 pt-4 border-t border-dark-700">
+            <div className="text-xs text-dark-400 mb-2">Latest Action</div>
+            <div className="bg-dark-900/50 rounded-lg p-3">
+              <div className="flex items-center gap-2 mb-1">
+                <div
+                  className={`p-1.5 rounded ${
+                    ACTION_COLORS[actions[actions.length - 1]!.type]
+                  }`}
+                >
+                  {ACTION_ICONS[actions[actions.length - 1]!.type]}
+                </div>
+                <span className="font-medium text-dark-200">
+                  {actions[actions.length - 1]!.type}
+                </span>
+              </div>
+              {actions[actions.length - 1]!.reasoning && (
+                <p className="text-sm text-dark-400 mt-1">
+                  {actions[actions.length - 1]!.reasoning}
+                </p>
+              )}
+            </div>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+};
+
+export default ActionPanel;

frontend/src/components/AgentView.tsx

@@ -0,0 +1,258 @@
+import React, { useState } from 'react';
+import {
+  Users,
+  Brain,
+  MessageSquare,
+  Activity,
+  ChevronDown,
+  ChevronUp,
+} from 'lucide-react';
+import { Card, CardHeader, CardContent } from '@/components/ui/Card';
+import { Badge, StatusBadge } from '@/components/ui/Badge';
+import { useAgents, getAgentRoleIcon, getAgentRoleColor } from '@/hooks/useAgents';
+import { useCurrentEpisode } from '@/hooks/useEpisode';
+import { formatTimestamp, truncateText } from '@/utils/helpers';
+import type { Agent, AgentThought } from '@/types';
+
+interface AgentViewProps {
+  className?: string;
+}
+
+interface AgentCardProps {
+  agent: Agent;
+  isExpanded: boolean;
+  onToggle: () => void;
+}
+
+const ThoughtBubble: React.FC<{ thought: AgentThought }> = ({ thought }) => {
+  const typeColors: Record<string, string> = {
+    reasoning: 'border-l-blue-400',
+    planning: 'border-l-purple-400',
+    observation: 'border-l-green-400',
+    decision: 'border-l-orange-400',
+  };
+
+  return (
+    <div
+      className={`thought-bubble border-l-2 ${typeColors[thought.type] ?? 'border-l-dark-500'}`}
+    >
+      <div className="flex items-center gap-2 mb-1">
+        <Badge variant="neutral" size="sm">
+          {thought.type}
+        </Badge>
+        <span className="text-xs text-dark-500">
+          {formatTimestamp(thought.timestamp)}
+        </span>
+      </div>
+      <p className="text-dark-300">{thought.content}</p>
+    </div>
+  );
+};
+
+const AgentCard: React.FC<AgentCardProps> = ({
+  agent,
+  isExpanded,
+  onToggle,
+}) => {
+  const roleIcon = getAgentRoleIcon(agent.role);
+  const roleColor = getAgentRoleColor(agent.role);
+
+  return (
+    <div className="bg-dark-900/50 rounded-lg overflow-hidden">
+      <button
+        onClick={onToggle}
+        className="w-full p-3 flex items-center justify-between hover:bg-dark-700/30 transition-colors"
+      >
+        <div className="flex items-center gap-3">
+          <div className="text-2xl">{roleIcon}</div>
+          <div className="text-left">
+            <div className="flex items-center gap-2">
+              <span className={`font-medium capitalize ${roleColor}`}>
+                {agent.role}
+              </span>
+              <StatusBadge status={agent.status} size="sm" />
+            </div>
+            <div className="text-xs text-dark-500">{agent.model}</div>
+          </div>
+        </div>
+        <div className="flex items-center gap-3">
+          <div className="text-right text-xs text-dark-400">
+            <div>{agent.actionsCount} actions</div>
+            <div className={agent.totalReward >= 0 ? 'text-green-400' : 'text-red-400'}>
+              {agent.totalReward >= 0 ? '+' : ''}{agent.totalReward.toFixed(2)}
+            </div>
+          </div>
+          {isExpanded ? (
+            <ChevronUp className="w-4 h-4 text-dark-500" />
+          ) : (
+            <ChevronDown className="w-4 h-4 text-dark-500" />
+          )}
+        </div>
+      </button>
+
+      {isExpanded && (
+        <div className="px-3 pb-3 border-t border-dark-700">
+          {/* Current Task */}
+          {agent.currentTask && (
+            <div className="mt-3 p-2 bg-dark-800 rounded">
+              <div className="text-xs text-dark-400 mb-1">Current Task</div>
+              <div className="text-sm text-dark-200">{agent.currentTask}</div>
+            </div>
+          )}
+
+          {/* Last Action */}
+          {agent.lastAction && (
+            <div className="mt-3 p-2 bg-dark-800 rounded">
+              <div className="text-xs text-dark-400 mb-1">Last Action</div>
+              <div className="flex items-center gap-2">
+                <Badge variant="info" size="sm">
+                  {agent.lastAction.type}
+                </Badge>
+                {agent.lastAction.reasoning && (
+                  <span className="text-xs text-dark-400">
+                    {truncateText(agent.lastAction.reasoning, 50)}
+                  </span>
+                )}
+              </div>
+            </div>
+          )}
+
+          {/* Thought Stream */}
+          {agent.thoughts.length > 0 && (
+            <div className="mt-3">
+              <div className="flex items-center gap-2 text-xs text-dark-400 mb-2">
+                <Brain className="w-3 h-3" />
+                <span>Thought Stream</span>
+              </div>
+              <div className="space-y-2 max-h-40 overflow-y-auto">
+                {agent.thoughts.slice(-5).map((thought, i) => (
+                  <ThoughtBubble key={i} thought={thought} />
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export const AgentView: React.FC<AgentViewProps> = ({ className }) => {
+  const { data: episode } = useCurrentEpisode();
+  const { data: agents, isLoading } = useAgents(episode?.id);
+  const [expandedAgents, setExpandedAgents] = useState<Set<string>>(new Set());
+
+  const toggleAgent = (agentId: string) => {
+    setExpandedAgents((prev) => {
+      const next = new Set(prev);
+      if (next.has(agentId)) {
+        next.delete(agentId);
+      } else {
+        next.add(agentId);
+      }
+      return next;
+    });
+  };
+
+  const activeAgents = agents?.filter((a) => a.status !== 'idle') ?? [];
+  const idleAgents = agents?.filter((a) => a.status === 'idle') ?? [];
+
+  return (
+    <Card className={className}>
+      <CardHeader
+        title="Agents"
+        subtitle={`${agents?.length ?? 0} agents`}
+        icon={<Users className="w-4 h-4" />}
+        action={
+          activeAgents.length > 0 && (
+            <Badge variant="success" dot pulse>
+              {activeAgents.length} active
+            </Badge>
+          )
+        }
+      />
+      <CardContent>
+        {isLoading ? (
+          <div className="flex items-center justify-center py-8">
+            <Activity className="w-6 h-6 text-dark-500 animate-pulse" />
+          </div>
+        ) : !agents || agents.length === 0 ? (
+          <div className="text-center py-8 text-dark-500">
+            <Users className="w-8 h-8 mx-auto mb-2 opacity-50" />
+            <p>No agents active</p>
+          </div>
+        ) : (
+          <div className="space-y-2">
+            {/* Active Agents */}
+            {activeAgents.map((agent) => (
+              <AgentCard
+                key={agent.id}
+                agent={agent}
+                isExpanded={expandedAgents.has(agent.id)}
+                onToggle={() => toggleAgent(agent.id)}
+              />
+            ))}
+
+            {/* Idle Agents */}
+            {idleAgents.length > 0 && activeAgents.length > 0 && (
+              <div className="text-xs text-dark-500 pt-2">Idle Agents</div>
+            )}
+            {idleAgents.map((agent) => (
+              <AgentCard
+                key={agent.id}
+                agent={agent}
+                isExpanded={expandedAgents.has(agent.id)}
+                onToggle={() => toggleAgent(agent.id)}
+              />
+            ))}
+          </div>
+        )}
+
+        {/* Thought Feed */}
+        {agents && agents.some((a) => a.thoughts.length > 0) && (
+          <div className="mt-4 pt-4 border-t border-dark-700">
+            <div className="flex items-center gap-2 text-sm text-dark-400 mb-3">
+              <MessageSquare className="w-4 h-4" />
+              <span>Latest Thoughts</span>
+            </div>
+            <div className="space-y-2 max-h-48 overflow-y-auto">
+              {agents
+                .flatMap((a) =>
+                  a.thoughts.map((t) => ({ ...t, agentId: a.id, role: a.role }))
+                )
+                .sort(
+                  (a, b) =>
+                    new Date(b.timestamp).getTime() -
+                    new Date(a.timestamp).getTime()
+                )
+                .slice(0, 5)
+                .map((thought, i) => (
+                  <div
+                    key={i}
+                    className="p-2 bg-dark-900/50 rounded text-sm"
+                  >
+                    <div className="flex items-center gap-2 mb-1">
+                      <span className="text-xs">
+                        {getAgentRoleIcon(thought.role)}
+                      </span>
+                      <span className={`text-xs ${getAgentRoleColor(thought.role)}`}>
+                        {thought.role}
+                      </span>
+                      <span className="text-xs text-dark-500">
+                        {formatTimestamp(thought.timestamp)}
+                      </span>
+                    </div>
+                    <p className="text-dark-300 text-xs">
+                      {truncateText(thought.content, 100)}
+                    </p>
+                  </div>
+                ))}
+            </div>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+};
+
+export default AgentView;

frontend/src/components/Dashboard.tsx

@@ -0,0 +1,218 @@
+import React, { useState } from 'react';
+import {
+  LayoutDashboard,
+  Settings as SettingsIcon,
+  Activity,
+  Menu,
+  X,
+  Wifi,
+  WifiOff,
+  ChevronLeft,
+  ChevronRight,
+} from 'lucide-react';
+import { EpisodePanel } from './EpisodePanel';
+import { AgentView } from './AgentView';
+import { MemoryPanel } from './MemoryPanel';
+import { ToolRegistry } from './ToolRegistry';
+import { RewardChart } from './RewardChart';
+import { ObservationView } from './ObservationView';
+import { ActionPanel } from './ActionPanel';
+import { Settings } from './Settings';
+import { Badge } from '@/components/ui/Badge';
+import { useWebSocket } from '@/hooks/useWebSocket';
+import { useCurrentEpisode } from '@/hooks/useEpisode';
+
+type ViewMode = 'dashboard' | 'settings';
+
+export const Dashboard: React.FC = () => {
+  const [viewMode, setViewMode] = useState<ViewMode>('dashboard');
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+
+  const { isConnected, isConnecting } = useWebSocket('/ws', {
+    onMessage: (message) => {
+      console.log('WebSocket message:', message);
+    },
+  });
+
+  const { data: episode } = useCurrentEpisode();
+
+  return (
+    <div className="min-h-screen bg-dark-900 flex">
+      {/* Sidebar */}
+      <aside
+        className={`fixed lg:relative inset-y-0 left-0 z-40 bg-dark-800 border-r border-dark-700 
+          transition-all duration-300 ${
+            sidebarCollapsed ? 'w-16' : 'w-64'
+          } ${mobileMenuOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'}`}
+      >
+        {/* Logo */}
+        <div className="h-16 flex items-center justify-between px-4 border-b border-dark-700">
+          {!sidebarCollapsed && (
+            <div className="flex items-center gap-2">
+              <div className="w-8 h-8 bg-gradient-to-br from-accent-primary to-accent-tertiary rounded-lg flex items-center justify-center">
+                <Activity className="w-5 h-5 text-white" />
+              </div>
+              <span className="font-bold text-lg gradient-text">ScrapeRL</span>
+            </div>
+          )}
+          <button
+            onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
+            className="hidden lg:flex p-1.5 text-dark-400 hover:text-dark-200 hover:bg-dark-700 rounded transition-colors"
+          >
+            {sidebarCollapsed ? (
+              <ChevronRight className="w-4 h-4" />
+            ) : (
+              <ChevronLeft className="w-4 h-4" />
+            )}
+          </button>
+          <button
+            onClick={() => setMobileMenuOpen(false)}
+            className="lg:hidden p-1.5 text-dark-400 hover:text-dark-200"
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        {/* Navigation */}
+        <nav className="p-2 space-y-1">
+          <button
+            onClick={() => {
+              setViewMode('dashboard');
+              setMobileMenuOpen(false);
+            }}
+            className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg transition-colors ${
+              viewMode === 'dashboard'
+                ? 'bg-accent-primary/10 text-accent-primary'
+                : 'text-dark-400 hover:text-dark-200 hover:bg-dark-700'
+            }`}
+          >
+            <LayoutDashboard className="w-5 h-5 flex-shrink-0" />
+            {!sidebarCollapsed && <span>Dashboard</span>}
+          </button>
+          <button
+            onClick={() => {
+              setViewMode('settings');
+              setMobileMenuOpen(false);
+            }}
+            className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg transition-colors ${
+              viewMode === 'settings'
+                ? 'bg-accent-primary/10 text-accent-primary'
+                : 'text-dark-400 hover:text-dark-200 hover:bg-dark-700'
+            }`}
+          >
+            <SettingsIcon className="w-5 h-5 flex-shrink-0" />
+            {!sidebarCollapsed && <span>Settings</span>}
+          </button>
+        </nav>
+
+        {/* Status */}
+        <div className="absolute bottom-0 left-0 right-0 p-4 border-t border-dark-700">
+          <div className="flex items-center gap-2">
+            {isConnected ? (
+              <Wifi className="w-4 h-4 text-green-400" />
+            ) : isConnecting ? (
+              <Wifi className="w-4 h-4 text-yellow-400 animate-pulse" />
+            ) : (
+              <WifiOff className="w-4 h-4 text-red-400" />
+            )}
+            {!sidebarCollapsed && (
+              <span className="text-xs text-dark-400">
+                {isConnected
+                  ? 'Connected'
+                  : isConnecting
+                  ? 'Connecting...'
+                  : 'Disconnected'}
+              </span>
+            )}
+          </div>
+        </div>
+      </aside>
+
+      {/* Mobile Overlay */}
+      {mobileMenuOpen && (
+        <div
+          className="fixed inset-0 bg-black/50 z-30 lg:hidden"
+          onClick={() => setMobileMenuOpen(false)}
+        />
+      )}
+
+      {/* Main Content */}
+      <main className="flex-1 overflow-hidden">
+        {/* Header */}
+        <header className="h-16 bg-dark-800 border-b border-dark-700 flex items-center justify-between px-4 lg:px-6">
+          <div className="flex items-center gap-4">
+            <button
+              onClick={() => setMobileMenuOpen(true)}
+              className="lg:hidden p-2 text-dark-400 hover:text-dark-200"
+            >
+              <Menu className="w-5 h-5" />
+            </button>
+            <div>
+              <h1 className="text-lg font-semibold text-dark-100">
+                {viewMode === 'dashboard' ? 'Dashboard' : 'Settings'}
+              </h1>
+              {episode && (
+                <p className="text-xs text-dark-400">
+                  Episode: {episode.id.slice(0, 8)}...
+                </p>
+              )}
+            </div>
+          </div>
+
+          <div className="flex items-center gap-3">
+            {episode && (
+              <Badge
+                variant={
+                  episode.status === 'running'
+                    ? 'success'
+                    : episode.status === 'failed'
+                    ? 'error'
+                    : 'neutral'
+                }
+                dot
+                pulse={episode.status === 'running'}
+              >
+                {episode.status}
+              </Badge>
+            )}
+          </div>
+        </header>
+
+        {/* Content Area */}
+        <div className="h-[calc(100vh-4rem)] overflow-auto p-4 lg:p-6">
+          {viewMode === 'dashboard' ? (
+            <div className="grid grid-cols-1 lg:grid-cols-12 gap-4 lg:gap-6">
+              {/* Left Column */}
+              <div className="lg:col-span-3 space-y-4 lg:space-y-6">
+                <EpisodePanel />
+                <AgentView />
+              </div>
+
+              {/* Center Column */}
+              <div className="lg:col-span-6 space-y-4 lg:space-y-6">
+                <ObservationView />
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 lg:gap-6">
+                  <RewardChart />
+                  <ActionPanel />
+                </div>
+              </div>
+
+              {/* Right Column */}
+              <div className="lg:col-span-3 space-y-4 lg:space-y-6">
+                <MemoryPanel />
+                <ToolRegistry />
+              </div>
+            </div>
+          ) : (
+            <div className="max-w-2xl mx-auto">
+              <Settings />
+            </div>
+          )}
+        </div>
+      </main>
+    </div>
+  );
+};
+
+export default Dashboard;

frontend/src/components/EpisodePanel.tsx

@@ -0,0 +1,229 @@
+import React, { useState } from 'react';
+import {
+  Play,
+  Pause,
+  RotateCcw,
+  Square,
+  Clock,
+  Target,
+  Zap,
+  TrendingUp,
+} from 'lucide-react';
+import { Card, CardHeader, CardContent } from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
+import { Badge, StatusBadge } from '@/components/ui/Badge';
+import {
+  useCurrentEpisode,
+  useResetEpisode,
+  useTerminateEpisode,
+} from '@/hooks/useEpisode';
+import { formatDuration, formatTimestamp, calculateProgress } from '@/utils/helpers';
+
+interface EpisodePanelProps {
+  className?: string;
+}
+
+export const EpisodePanel: React.FC<EpisodePanelProps> = ({ className }) => {
+  const { data: episode, isLoading } = useCurrentEpisode();
+  const resetMutation = useResetEpisode();
+  const terminateMutation = useTerminateEpisode();
+  const [isRunning, setIsRunning] = useState(false);
+
+  const handleReset = () => {
+    resetMutation.mutate({
+      task: {
+        description: 'Default scraping task',
+        targetUrl: 'https://example.com',
+        objectives: ['Extract main content'],
+      },
+    });
+  };
+
+  const handleToggleRun = () => {
+    setIsRunning(!isRunning);
+  };
+
+  const handleTerminate = () => {
+    if (episode?.id) {
+      terminateMutation.mutate(episode.id);
+    }
+  };
+
+  const progress = episode
+    ? calculateProgress(episode.currentStep, episode.config.maxSteps)
+    : 0;
+
+  const elapsedTime = episode
+    ? Date.now() - new Date(episode.startTime).getTime()
+    : 0;
+
+  return (
+    <Card className={className}>
+      <CardHeader
+        title="Episode Control"
+        icon={<Zap className="w-4 h-4" />}
+        action={
+          episode && (
+            <StatusBadge status={episode.status} />
+          )
+        }
+      />
+      <CardContent>
+        {/* Control Buttons */}
+        <div className="flex gap-2 mb-4">
+          <Button
+            variant="primary"
+            size="sm"
+            onClick={handleReset}
+            isLoading={resetMutation.isPending}
+            leftIcon={<RotateCcw className="w-4 h-4" />}
+          >
+            Reset
+          </Button>
+          <Button
+            variant="secondary"
+            size="sm"
+            onClick={handleToggleRun}
+            disabled={!episode}
+            leftIcon={
+              isRunning ? (
+                <Pause className="w-4 h-4" />
+              ) : (
+                <Play className="w-4 h-4" />
+              )
+            }
+          >
+            {isRunning ? 'Pause' : 'Run'}
+          </Button>
+          <Button
+            variant="danger"
+            size="sm"
+            onClick={handleTerminate}
+            disabled={!episode || episode.status !== 'running'}
+            isLoading={terminateMutation.isPending}
+            leftIcon={<Square className="w-4 h-4" />}
+          >
+            Stop
+          </Button>
+        </div>
+
+        {/* Progress Bar */}
+        <div className="mb-4">
+          <div className="flex justify-between text-sm text-dark-400 mb-1">
+            <span>Progress</span>
+            <span>{progress}%</span>
+          </div>
+          <div className="h-2 bg-dark-700 rounded-full overflow-hidden">
+            <div
+              className="h-full bg-gradient-to-r from-accent-primary to-accent-tertiary rounded-full transition-all duration-300"
+              style={{ width: `${progress}%` }}
+            />
+          </div>
+        </div>
+
+        {/* Stats Grid */}
+        <div className="grid grid-cols-2 gap-3">
+          <div className="bg-dark-900/50 rounded-lg p-3">
+            <div className="flex items-center gap-2 text-dark-400 text-xs mb-1">
+              <Target className="w-3 h-3" />
+              <span>Step</span>
+            </div>
+            <div className="text-xl font-semibold text-dark-100">
+              {isLoading ? '-' : `${episode?.currentStep ?? 0}`}
+              <span className="text-sm text-dark-500 font-normal">
+                /{episode?.config.maxSteps ?? 100}
+              </span>
+            </div>
+          </div>
+
+          <div className="bg-dark-900/50 rounded-lg p-3">
+            <div className="flex items-center gap-2 text-dark-400 text-xs mb-1">
+              <Clock className="w-3 h-3" />
+              <span>Time</span>
+            </div>
+            <div className="text-xl font-semibold text-dark-100">
+              {episode ? formatDuration(elapsedTime) : '--:--'}
+            </div>
+          </div>
+
+          <div className="bg-dark-900/50 rounded-lg p-3">
+            <div className="flex items-center gap-2 text-dark-400 text-xs mb-1">
+              <TrendingUp className="w-3 h-3" />
+              <span>Total Reward</span>
+            </div>
+            <div className="text-xl font-semibold">
+              <span
+                className={
+                  (episode?.totalReward ?? 0) >= 0
+                    ? 'text-green-400'
+                    : 'text-red-400'
+                }
+              >
+                {episode?.totalReward?.toFixed(2) ?? '0.00'}
+              </span>
+            </div>
+          </div>
+
+          <div className="bg-dark-900/50 rounded-lg p-3">
+            <div className="flex items-center gap-2 text-dark-400 text-xs mb-1">
+              <Zap className="w-3 h-3" />
+              <span>Budget</span>
+            </div>
+            <div className="text-xl font-semibold text-dark-100">
+              ${episode?.config.budget?.toFixed(2) ?? '0.00'}
+            </div>
+          </div>
+        </div>
+
+        {/* Task Info */}
+        {episode?.task && (
+          <div className="mt-4 p-3 bg-dark-900/50 rounded-lg">
+            <div className="text-xs text-dark-400 mb-1">Current Task</div>
+            <div className="text-sm text-dark-200 mb-2">
+              {episode.task.description}
+            </div>
+            <div className="flex flex-wrap gap-1">
+              {episode.task.objectives.slice(0, 3).map((obj, i) => (
+                <Badge key={i} variant="info" size="sm">
+                  {obj}
+                </Badge>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Timeline */}
+        {episode && (
+          <div className="mt-4">
+            <div className="text-xs text-dark-400 mb-2">Timeline</div>
+            <div className="space-y-2 max-h-32 overflow-y-auto">
+              <div className="timeline-item">
+                <div className="timeline-dot" />
+                <div className="text-xs text-dark-300">
+                  <span className="text-dark-500">
+                    {formatTimestamp(episode.startTime)}
+                  </span>
+                  {' · '}Episode started
+                </div>
+              </div>
+              {episode.actions.slice(-3).map((action, i) => (
+                <div key={i} className="timeline-item">
+                  <div className="timeline-dot" style={{ backgroundColor: '#6366f1' }} />
+                  <div className="text-xs text-dark-300">
+                    <span className="text-dark-500">
+                      {formatTimestamp(action.timestamp)}
+                    </span>
+                    {' · '}
+                    {action.type}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+};
+
+export default EpisodePanel;

frontend/src/components/MemoryPanel.tsx

@@ -0,0 +1,245 @@
+import React, { useState } from 'react';
+import {
+  Database,
+  Search,
+  Trash2,
+  Clock,
+  Layers,
+  Archive,
+  Share2,
+  AlertCircle,
+} from 'lucide-react';
+import { Card, CardHeader, CardContent } from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
+import { Badge } from '@/components/ui/Badge';
+import { Input } from '@/components/ui/Input';
+import {
+  useMemory,
+  useClearMemory,
+  useQueryMemory,
+  getMemoryLayerBadge,
+  formatMemorySize,
+} from '@/hooks/useMemory';
+import { useCurrentEpisode } from '@/hooks/useEpisode';
+import { formatTimestamp, truncateText } from '@/utils/helpers';
+import type { MemoryEntry, MemoryLayer } from '@/types';
+
+interface MemoryPanelProps {
+  className?: string;
+}
+
+const MEMORY_TABS: { key: MemoryLayer; label: string; icon: React.ReactNode }[] = [
+  { key: 'short_term', label: 'Short-Term', icon: <Clock className="w-3 h-3" /> },
+  { key: 'working', label: 'Working', icon: <Layers className="w-3 h-3" /> },
+  { key: 'long_term', label: 'Long-Term', icon: <Archive className="w-3 h-3" /> },
+  { key: 'shared', label: 'Shared', icon: <Share2 className="w-3 h-3" /> },
+];
+
+const MemoryEntryCard: React.FC<{ entry: MemoryEntry }> = ({ entry }) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  return (
+    <div
+      className="p-2 bg-dark-900/50 rounded-lg hover:bg-dark-900/70 transition-colors cursor-pointer"
+      onClick={() => setIsExpanded(!isExpanded)}
+    >
+      <div className="flex items-start justify-between gap-2">
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2 mb-1">
+            <Badge variant="neutral" size="sm">
+              {entry.type}
+            </Badge>
+            <div
+              className="h-1.5 w-8 rounded-full bg-dark-700 overflow-hidden"
+              title={`Importance: ${(entry.importance * 100).toFixed(0)}%`}
+            >
+              <div
+                className="h-full bg-accent-primary"
+                style={{ width: `${entry.importance * 100}%` }}
+              />
+            </div>
+          </div>
+          <p className="text-sm text-dark-200">
+            {isExpanded ? entry.content : truncateText(entry.content, 80)}
+          </p>
+        </div>
+        <span className="text-xs text-dark-500 whitespace-nowrap">
+          {formatTimestamp(entry.timestamp)}
+        </span>
+      </div>
+      {isExpanded && entry.metadata && Object.keys(entry.metadata).length > 0 && (
+        <div className="mt-2 pt-2 border-t border-dark-700">
+          <div className="text-xs text-dark-500 font-mono">
+            {JSON.stringify(entry.metadata, null, 2)}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export const MemoryPanel: React.FC<MemoryPanelProps> = ({ className }) => {
+  const { data: episode } = useCurrentEpisode();
+  const { data: memory, isLoading } = useMemory(episode?.id);
+  const clearMemoryMutation = useClearMemory(episode?.id);
+  const queryMemoryMutation = useQueryMemory(episode?.id);
+
+  const [activeTab, setActiveTab] = useState<MemoryLayer>('working');
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const handleSearch = () => {
+    if (searchQuery.trim() && episode?.id) {
+      queryMemoryMutation.mutate({
+        query: searchQuery,
+        layer: activeTab,
+        limit: 10,
+      });
+    }
+  };
+
+  const handleClear = () => {
+    if (episode?.id && confirm(`Clear all ${activeTab.replace('_', ' ')} memory?`)) {
+      clearMemoryMutation.mutate(activeTab);
+    }
+  };
+
+  const getEntriesForTab = (): MemoryEntry[] => {
+    if (!memory) return [];
+    switch (activeTab) {
+      case 'short_term':
+        return memory.shortTerm;
+      case 'working':
+        return memory.working;
+      case 'long_term':
+        return memory.longTerm;
+      case 'shared':
+        return memory.shared;
+      default:
+        return [];
+    }
+  };
+
+  const entries = queryMemoryMutation.data ?? getEntriesForTab();
+
+  return (
+    <Card className={className}>
+      <CardHeader
+        title="Memory"
+        subtitle={memory ? `${memory.totalEntries} entries` : undefined}
+        icon={<Database className="w-4 h-4" />}
+        action={
+          memory && (
+            <span className="text-xs text-dark-500">
+              {formatMemorySize(memory.memoryUsage)}
+            </span>
+          )
+        }
+      />
+      <CardContent>
+        {/* Tabs */}
+        <div className="flex border-b border-dark-700 mb-4 overflow-x-auto">
+          {MEMORY_TABS.map((tab) => (
+            <button
+              key={tab.key}
+              onClick={() => {
+                setActiveTab(tab.key);
+                queryMemoryMutation.reset();
+              }}
+              className={`tab flex items-center gap-1.5 whitespace-nowrap ${
+                activeTab === tab.key ? 'tab-active' : ''
+              }`}
+            >
+              {tab.icon}
+              {tab.label}
+              {memory && (
+                <Badge
+                  variant="neutral"
+                  size="sm"
+                  className={activeTab === tab.key ? getMemoryLayerBadge(tab.key) : ''}
+                >
+                  {tab.key === 'short_term' && memory.shortTerm.length}
+                  {tab.key === 'working' && memory.working.length}
+                  {tab.key === 'long_term' && memory.longTerm.length}
+                  {tab.key === 'shared' && memory.shared.length}
+                </Badge>
+              )}
+            </button>
+          ))}
+        </div>
+
+        {/* Search */}
+        <div className="flex gap-2 mb-4">
+          <Input
+            placeholder="Search memory..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
+            leftIcon={<Search className="w-4 h-4" />}
+            className="flex-1"
+          />
+          <Button
+            variant="secondary"
+            size="sm"
+            onClick={handleSearch}
+            isLoading={queryMemoryMutation.isPending}
+          >
+            Search
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={handleClear}
+            isLoading={clearMemoryMutation.isPending}
+            leftIcon={<Trash2 className="w-4 h-4" />}
+          />
+        </div>
+
+        {/* Memory Entries */}
+        <div className="space-y-2 max-h-[400px] overflow-y-auto">
+          {isLoading ? (
+            <div className="flex items-center justify-center py-8">
+              <Database className="w-6 h-6 text-dark-500 animate-pulse" />
+            </div>
+          ) : entries.length === 0 ? (
+            <div className="text-center py-8 text-dark-500">
+              <AlertCircle className="w-8 h-8 mx-auto mb-2 opacity-50" />
+              <p>No {activeTab.replace('_', ' ')} memory entries</p>
+            </div>
+          ) : (
+            entries.map((entry) => (
+              <MemoryEntryCard key={entry.id} entry={entry} />
+            ))
+          )}
+        </div>
+
+        {/* Memory Stats */}
+        {memory && (
+          <div className="mt-4 pt-4 border-t border-dark-700">
+            <div className="grid grid-cols-4 gap-2 text-center">
+              {MEMORY_TABS.map((tab) => {
+                const count =
+                  tab.key === 'short_term'
+                    ? memory.shortTerm.length
+                    : tab.key === 'working'
+                    ? memory.working.length
+                    : tab.key === 'long_term'
+                    ? memory.longTerm.length
+                    : memory.shared.length;
+                return (
+                  <div key={tab.key} className="p-2 bg-dark-900/50 rounded">
+                    <div className="text-lg font-semibold text-dark-200">
+                      {count}
+                    </div>
+                    <div className="text-xs text-dark-500">{tab.label}</div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+};
+
+export default MemoryPanel;

frontend/src/components/ObservationView.tsx

@@ -0,0 +1,310 @@
+import React, { useState } from 'react';
+import {
+  Eye,
+  Globe,
+  Code,
+  Image as ImageIcon,
+  FileText,
+  Clock,
+  ExternalLink,
+  ChevronDown,
+  ChevronUp,
+  Maximize2,
+} from 'lucide-react';
+import { Card, CardHeader, CardContent } from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
+import { Badge } from '@/components/ui/Badge';
+import { useCurrentEpisode, useEpisodeState } from '@/hooks/useEpisode';
+import { formatTimestamp, truncateText } from '@/utils/helpers';
+import type { DOMElement } from '@/types';
+
+interface ObservationViewProps {
+  className?: string;
+}
+
+const DOMTree: React.FC<{ elements: DOMElement[]; depth?: number }> = ({
+  elements,
+  depth = 0,
+}) => {
+  const [expanded, setExpanded] = useState<Set<number>>(new Set([0, 1, 2]));
+
+  const toggleExpand = (index: number) => {
+    setExpanded((prev) => {
+      const next = new Set(prev);
+      if (next.has(index)) {
+        next.delete(index);
+      } else {
+        next.add(index);
+      }
+      return next;
+    });
+  };
+
+  if (depth > 3) return null;
+
+  return (
+    <div className="space-y-1">
+      {elements.slice(0, 10).map((el, i) => {
+        const hasChildren = el.children && el.children.length > 0;
+        const isExpanded = expanded.has(i);
+
+        return (
+          <div key={i} style={{ paddingLeft: `${depth * 12}px` }}>
+            <div className="flex items-center gap-1 text-xs font-mono hover:bg-dark-700/50 rounded px-1">
+              {hasChildren && (
+                <button
+                  onClick={() => toggleExpand(i)}
+                  className="text-dark-500 hover:text-dark-300"
+                >
+                  {isExpanded ? (
+                    <ChevronDown className="w-3 h-3" />
+                  ) : (
+                    <ChevronUp className="w-3 h-3" />
+                  )}
+                </button>
+              )}
+              {!hasChildren && <span className="w-3" />}
+              <span className="text-purple-400">&lt;{el.tag}</span>
+              {el.id && (
+                <span className="text-yellow-400">#{el.id}</span>
+              )}
+              {el.classes.length > 0 && (
+                <span className="text-green-400">
+                  .{el.classes.slice(0, 2).join('.')}
+                </span>
+              )}
+              <span className="text-purple-400">&gt;</span>
+              {el.text && (
+                <span className="text-dark-400 truncate max-w-[100px]">
+                  {truncateText(el.text, 20)}
+                </span>
+              )}
+            </div>
+            {hasChildren && isExpanded && (
+              <DOMTree elements={el.children!} depth={depth + 1} />
+            )}
+          </div>
+        );
+      })}
+      {elements.length > 10 && (
+        <div
+          className="text-xs text-dark-500 italic"
+          style={{ paddingLeft: `${depth * 12}px` }}
+        >
+          +{elements.length - 10} more elements
+        </div>
+      )}
+    </div>
+  );
+};
+
+export const ObservationView: React.FC<ObservationViewProps> = ({
+  className,
+}) => {
+  const { data: episode } = useCurrentEpisode();
+  const { data: state, isLoading } = useEpisodeState(episode?.id);
+  const [activeTab, setActiveTab] = useState<'page' | 'dom' | 'data' | 'screenshot'>('page');
+  const [showFullScreen, setShowFullScreen] = useState(false);
+
+  const observation = state?.observation;
+
+  const tabs = [
+    { key: 'page' as const, label: 'Page', icon: <Globe className="w-3 h-3" /> },
+    { key: 'dom' as const, label: 'DOM', icon: <Code className="w-3 h-3" /> },
+    { key: 'data' as const, label: 'Data', icon: <FileText className="w-3 h-3" /> },
+    { key: 'screenshot' as const, label: 'Screenshot', icon: <ImageIcon className="w-3 h-3" /> },
+  ];
+
+  return (
+    <Card className={className}>
+      <CardHeader
+        title="Observation"
+        subtitle={observation ? `Step ${observation.step}` : undefined}
+        icon={<Eye className="w-4 h-4" />}
+        action={
+          observation && (
+            <div className="flex items-center gap-2">
+              <Badge variant="info" size="sm">
+                {observation.interactableElements?.length ?? 0} elements
+              </Badge>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => setShowFullScreen(true)}
+              >
+                <Maximize2 className="w-4 h-4" />
+              </Button>
+            </div>
+          )
+        }
+      />
+      <CardContent>
+        {/* Tabs */}
+        <div className="flex border-b border-dark-700 mb-4">
+          {tabs.map((tab) => (
+            <button
+              key={tab.key}
+              onClick={() => setActiveTab(tab.key)}
+              className={`tab flex items-center gap-1.5 ${
+                activeTab === tab.key ? 'tab-active' : ''
+              }`}
+            >
+              {tab.icon}
+              {tab.label}
+            </button>
+          ))}
+        </div>
+
+        {isLoading ? (
+          <div className="h-48 flex items-center justify-center">
+            <Eye className="w-6 h-6 text-dark-500 animate-pulse" />
+          </div>
+        ) : !observation ? (
+          <div className="h-48 flex items-center justify-center text-dark-500">
+            <div className="text-center">
+              <Eye className="w-8 h-8 mx-auto mb-2 opacity-50" />
+              <p>No observation data</p>
+            </div>
+          </div>
+        ) : (
+          <div className="min-h-[200px]">
+            {/* Page Info */}
+            {activeTab === 'page' && (
+              <div className="space-y-3">
+                <div className="bg-dark-900/50 rounded-lg p-3">
+                  <div className="flex items-center gap-2 mb-2">
+                    <Globe className="w-4 h-4 text-dark-400" />
+                    <a
+                      href={observation.page.url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-sm text-accent-primary hover:underline flex items-center gap-1"
+                    >
+                      {truncateText(observation.page.url, 50)}
+                      <ExternalLink className="w-3 h-3" />
+                    </a>
+                  </div>
+                  <div className="text-lg font-medium text-dark-100 mb-2">
+                    {observation.page.title || 'Untitled'}
+                  </div>
+                  <div className="flex flex-wrap gap-2">
+                    <Badge variant="neutral" size="sm">
+                      {observation.page.domain}
+                    </Badge>
+                    <Badge
+                      variant={
+                        observation.page.statusCode < 400 ? 'success' : 'error'
+                      }
+                      size="sm"
+                    >
+                      {observation.page.statusCode}
+                    </Badge>
+                    <Badge variant="info" size="sm">
+                      {observation.page.loadTime}ms
+                    </Badge>
+                  </div>
+                </div>
+
+                <div className="bg-dark-900/50 rounded-lg p-3">
+                  <div className="text-xs text-dark-400 mb-2">Visible Text</div>
+                  <div className="text-sm text-dark-300 max-h-32 overflow-y-auto">
+                    {truncateText(observation.visibleText, 500) || 'No text content'}
+                  </div>
+                </div>
+
+                <div className="flex items-center gap-2 text-xs text-dark-500">
+                  <Clock className="w-3 h-3" />
+                  <span>{formatTimestamp(observation.timestamp)}</span>
+                </div>
+              </div>
+            )}
+
+            {/* DOM Tree */}
+            {activeTab === 'dom' && (
+              <div className="bg-dark-900/50 rounded-lg p-3 max-h-[300px] overflow-auto">
+                <div className="text-xs text-dark-400 mb-2">
+                  {observation.dom?.length ?? 0} root elements
+                </div>
+                {observation.dom && observation.dom.length > 0 ? (
+                  <DOMTree elements={observation.dom} />
+                ) : (
+                  <div className="text-dark-500 text-sm">No DOM data</div>
+                )}
+              </div>
+            )}
+
+            {/* Extracted Data */}
+            {activeTab === 'data' && (
+              <div className="space-y-3">
+                <div className="bg-dark-900/50 rounded-lg p-3">
+                  <div className="text-xs text-dark-400 mb-2">
+                    Extracted Data
+                  </div>
+                  <div className="code-block max-h-[200px] overflow-auto">
+                    {Object.keys(observation.extractedData || {}).length > 0
+                      ? JSON.stringify(observation.extractedData, null, 2)
+                      : '// No extracted data yet'}
+                  </div>
+                </div>
+
+                <div className="bg-dark-900/50 rounded-lg p-3">
+                  <div className="text-xs text-dark-400 mb-2">Metadata</div>
+                  <div className="code-block max-h-[100px] overflow-auto">
+                    {JSON.stringify(observation.metadata, null, 2)}
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {/* Screenshot */}
+            {activeTab === 'screenshot' && (
+              <div className="bg-dark-900/50 rounded-lg p-3">
+                {observation.screenshot ? (
+                  <img
+                    src={`data:image/png;base64,${observation.screenshot}`}
+                    alt="Page screenshot"
+                    className="w-full rounded border border-dark-700"
+                  />
+                ) : (
+                  <div className="h-48 flex items-center justify-center text-dark-500">
+                    <div className="text-center">
+                      <ImageIcon className="w-8 h-8 mx-auto mb-2 opacity-50" />
+                      <p>No screenshot available</p>
+                    </div>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        )}
+      </CardContent>
+
+      {/* Full Screen Modal */}
+      {showFullScreen && observation && (
+        <div
+          className="fixed inset-0 z-50 bg-dark-950/90 flex items-center justify-center p-8"
+          onClick={() => setShowFullScreen(false)}
+        >
+          <div
+            className="bg-dark-800 rounded-xl p-6 max-w-4xl max-h-[90vh] overflow-auto"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="flex justify-between items-center mb-4">
+              <h2 className="text-xl font-semibold">
+                Observation - Step {observation.step}
+              </h2>
+              <Button variant="ghost" onClick={() => setShowFullScreen(false)}>
+                Close
+              </Button>
+            </div>
+            <div className="code-block max-h-[70vh] overflow-auto">
+              {JSON.stringify(observation, null, 2)}
+            </div>
+          </div>
+        </div>
+      )}
+    </Card>
+  );
+};
+
+export default ObservationView;

frontend/src/components/RewardChart.tsx

@@ -0,0 +1,297 @@
+import React from 'react';
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  Area,
+  AreaChart,
+  Cell,
+  PieChart,
+  Pie,
+} from 'recharts';
+import { TrendingUp, Award, Target, Zap } from 'lucide-react';
+import { Card, CardHeader, CardContent } from '@/components/ui/Card';
+import { Badge } from '@/components/ui/Badge';
+import { useEpisodeRewards, useCurrentEpisode } from '@/hooks/useEpisode';
+import { formatReward } from '@/utils/helpers';
+
+interface RewardChartProps {
+  className?: string;
+}
+
+const COLORS = [
+  '#10a37f',
+  '#6366f1',
+  '#f59e0b',
+  '#ef4444',
+  '#8b5cf6',
+  '#06b6d4',
+  '#ec4899',
+  '#84cc16',
+];
+
+const CustomTooltip: React.FC<{
+  active?: boolean;
+  payload?: Array<{ value: number; name: string; color: string }>;
+  label?: string;
+}> = ({ active, payload, label }) => {
+  if (!active || !payload || payload.length === 0) return null;
+
+  return (
+    <div className="bg-dark-800 border border-dark-600 rounded-lg p-3 shadow-xl">
+      <div className="text-xs text-dark-400 mb-2">Step {label}</div>
+      {payload.map((entry, i) => (
+        <div key={i} className="flex items-center gap-2 text-sm">
+          <div
+            className="w-2 h-2 rounded-full"
+            style={{ backgroundColor: entry.color }}
+          />
+          <span className="text-dark-300">{entry.name}:</span>
+          <span
+            className={entry.value >= 0 ? 'text-green-400' : 'text-red-400'}
+          >
+            {formatReward(entry.value)}
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export const RewardChart: React.FC<RewardChartProps> = ({ className }) => {
+  const { data: episode } = useCurrentEpisode();
+  const { data: rewards, isLoading } = useEpisodeRewards(episode?.id);
+
+  const chartData = React.useMemo(() => {
+    if (!rewards || rewards.length === 0) return [];
+    return rewards.map((r, i) => ({
+      step: i + 1,
+      total: r.total,
+      cumulative: r.cumulative,
+      ...r.components.reduce(
+        (acc, c) => ({ ...acc, [c.name]: c.value }),
+        {} as Record<string, number>
+      ),
+    }));
+  }, [rewards]);
+
+  const componentNames = React.useMemo(() => {
+    if (!rewards || rewards.length === 0) return [];
+    const names = new Set<string>();
+    rewards.forEach((r) => r.components.forEach((c) => names.add(c.name)));
+    return Array.from(names);
+  }, [rewards]);
+
+  const latestReward = rewards?.[rewards.length - 1];
+  const componentBreakdown = latestReward?.components ?? [];
+
+  const pieData = componentBreakdown.map((c, i) => ({
+    name: c.name,
+    value: Math.abs(c.value),
+    fill: COLORS[i % COLORS.length],
+    originalValue: c.value,
+  }));
+
+  const stats = React.useMemo(() => {
+    if (!rewards || rewards.length === 0) {
+      return { total: 0, avg: 0, max: 0, min: 0 };
+    }
+    const totals = rewards.map((r) => r.total);
+    return {
+      total: rewards[rewards.length - 1]?.cumulative ?? 0,
+      avg: totals.reduce((a, b) => a + b, 0) / totals.length,
+      max: Math.max(...totals),
+      min: Math.min(...totals),
+    };
+  }, [rewards]);
+
+  return (
+    <Card className={className}>
+      <CardHeader
+        title="Rewards"
+        icon={<Award className="w-4 h-4" />}
+        action={
+          latestReward && (
+            <Badge
+              variant={latestReward.total >= 0 ? 'success' : 'error'}
+              size="sm"
+            >
+              {formatReward(latestReward.total)}
+            </Badge>
+          )
+        }
+      />
+      <CardContent>
+        {/* Stats Grid */}
+        <div className="grid grid-cols-4 gap-2 mb-4">
+          <div className="bg-dark-900/50 rounded-lg p-2 text-center">
+            <div className="flex items-center justify-center gap-1 text-xs text-dark-400 mb-1">
+              <TrendingUp className="w-3 h-3" />
+              <span>Total</span>
+            </div>
+            <div
+              className={`text-lg font-semibold ${
+                stats.total >= 0 ? 'text-green-400' : 'text-red-400'
+              }`}
+            >
+              {formatReward(stats.total)}
+            </div>
+          </div>
+          <div className="bg-dark-900/50 rounded-lg p-2 text-center">
+            <div className="flex items-center justify-center gap-1 text-xs text-dark-400 mb-1">
+              <Target className="w-3 h-3" />
+              <span>Avg</span>
+            </div>
+            <div className="text-lg font-semibold text-dark-200">
+              {formatReward(stats.avg)}
+            </div>
+          </div>
+          <div className="bg-dark-900/50 rounded-lg p-2 text-center">
+            <div className="flex items-center justify-center gap-1 text-xs text-dark-400 mb-1">
+              <Zap className="w-3 h-3" />
+              <span>Max</span>
+            </div>
+            <div className="text-lg font-semibold text-green-400">
+              {formatReward(stats.max)}
+            </div>
+          </div>
+          <div className="bg-dark-900/50 rounded-lg p-2 text-center">
+            <div className="flex items-center justify-center gap-1 text-xs text-dark-400 mb-1">
+              <Zap className="w-3 h-3" />
+              <span>Min</span>
+            </div>
+            <div className="text-lg font-semibold text-red-400">
+              {formatReward(stats.min)}
+            </div>
+          </div>
+        </div>
+
+        {/* Cumulative Reward Chart */}
+        {isLoading ? (
+          <div className="h-40 flex items-center justify-center">
+            <Award className="w-6 h-6 text-dark-500 animate-pulse" />
+          </div>
+        ) : chartData.length === 0 ? (
+          <div className="h-40 flex items-center justify-center text-dark-500">
+            <div className="text-center">
+              <Award className="w-8 h-8 mx-auto mb-2 opacity-50" />
+              <p>No reward data</p>
+            </div>
+          </div>
+        ) : (
+          <>
+            <div className="h-40 mb-4">
+              <ResponsiveContainer width="100%" height="100%">
+                <AreaChart data={chartData}>
+                  <defs>
+                    <linearGradient id="rewardGradient" x1="0" y1="0" x2="0" y2="1">
+                      <stop offset="5%" stopColor="#10a37f" stopOpacity={0.3} />
+                      <stop offset="95%" stopColor="#10a37f" stopOpacity={0} />
+                    </linearGradient>
+                  </defs>
+                  <CartesianGrid strokeDasharray="3 3" stroke="#40414f" />
+                  <XAxis
+                    dataKey="step"
+                    stroke="#8e8ea0"
+                    fontSize={10}
+                    tickLine={false}
+                  />
+                  <YAxis stroke="#8e8ea0" fontSize={10} tickLine={false} />
+                  <Tooltip content={<CustomTooltip />} />
+                  <Area
+                    type="monotone"
+                    dataKey="cumulative"
+                    name="Cumulative"
+                    stroke="#10a37f"
+                    fill="url(#rewardGradient)"
+                    strokeWidth={2}
+                  />
+                </AreaChart>
+              </ResponsiveContainer>
+            </div>
+
+            {/* Component Breakdown Bar Chart */}
+            {componentNames.length > 0 && (
+              <div className="h-32 mb-4">
+                <div className="text-xs text-dark-400 mb-2">
+                  Reward Components
+                </div>
+                <ResponsiveContainer width="100%" height="100%">
+                  <BarChart data={chartData.slice(-10)}>
+                    <CartesianGrid strokeDasharray="3 3" stroke="#40414f" />
+                    <XAxis
+                      dataKey="step"
+                      stroke="#8e8ea0"
+                      fontSize={10}
+                      tickLine={false}
+                    />
+                    <YAxis stroke="#8e8ea0" fontSize={10} tickLine={false} />
+                    <Tooltip content={<CustomTooltip />} />
+                    {componentNames.map((name, i) => (
+                      <Bar
+                        key={name}
+                        dataKey={name}
+                        stackId="a"
+                        fill={COLORS[i % COLORS.length]}
+                      />
+                    ))}
+                  </BarChart>
+                </ResponsiveContainer>
+              </div>
+            )}
+
+            {/* Pie Chart for Latest Breakdown */}
+            {pieData.length > 0 && (
+              <div className="flex items-center gap-4">
+                <div className="w-24 h-24">
+                  <ResponsiveContainer width="100%" height="100%">
+                    <PieChart>
+                      <Pie
+                        data={pieData}
+                        dataKey="value"
+                        nameKey="name"
+                        cx="50%"
+                        cy="50%"
+                        innerRadius={20}
+                        outerRadius={35}
+                        paddingAngle={2}
+                      >
+                        {pieData.map((entry, i) => (
+                          <Cell key={i} fill={entry.fill} />
+                        ))}
+                      </Pie>
+                    </PieChart>
+                  </ResponsiveContainer>
+                </div>
+                <div className="flex-1 grid grid-cols-2 gap-1">
+                  {componentBreakdown.map((c, i) => (
+                    <div key={c.name} className="flex items-center gap-2 text-xs">
+                      <div
+                        className="w-2 h-2 rounded-full"
+                        style={{ backgroundColor: COLORS[i % COLORS.length] }}
+                      />
+                      <span className="text-dark-400 truncate">{c.name}</span>
+                      <span
+                        className={
+                          c.value >= 0 ? 'text-green-400' : 'text-red-400'
+                        }
+                      >
+                        {formatReward(c.value)}
+                      </span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+          </>
+        )}
+      </CardContent>
+    </Card>
+  );
+};
+
+export default RewardChart;

frontend/src/components/Settings.tsx

@@ -0,0 +1,264 @@
+import React, { useState, useEffect } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import {
+  Settings as SettingsIcon,
+  Key,
+  Cpu,
+  Wifi,
+  Database,
+  Image,
+  RefreshCw,
+  Save,
+  AlertCircle,
+  CheckCircle,
+} from 'lucide-react';
+import { Card, CardHeader, CardContent, CardFooter } from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import { Select, Toggle } from '@/components/ui/Select';
+import { Badge } from '@/components/ui/Badge';
+import { apiClient } from '@/api/client';
+import type { SystemSettings } from '@/types';
+
+interface SettingsProps {
+  className?: string;
+}
+
+export const Settings: React.FC<SettingsProps> = ({ className }) => {
+  const queryClient = useQueryClient();
+  const [localSettings, setLocalSettings] = useState<Partial<SystemSettings>>({});
+  const [hasChanges, setHasChanges] = useState(false);
+
+  const { data: settings, isLoading } = useQuery({
+    queryKey: ['settings'],
+    queryFn: () => apiClient.getSettings(),
+  });
+
+  const { data: health } = useQuery({
+    queryKey: ['health'],
+    queryFn: () => apiClient.healthCheck(),
+    refetchInterval: 10000,
+  });
+
+  const updateMutation = useMutation({
+    mutationFn: (newSettings: Partial<SystemSettings>) =>
+      apiClient.updateSettings(newSettings),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['settings'] });
+      setHasChanges(false);
+    },
+  });
+
+  useEffect(() => {
+    if (settings) {
+      setLocalSettings(settings);
+    }
+  }, [settings]);
+
+  const handleChange = <K extends keyof SystemSettings>(
+    key: K,
+    value: SystemSettings[K]
+  ) => {
+    setLocalSettings((prev) => ({ ...prev, [key]: value }));
+    setHasChanges(true);
+  };
+
+  const handleSave = () => {
+    updateMutation.mutate(localSettings);
+  };
+
+  const handleReset = () => {
+    if (settings) {
+      setLocalSettings(settings);
+      setHasChanges(false);
+    }
+  };
+
+  const modelOptions = (settings?.availableModels ?? [
+    'gpt-4-turbo',
+    'gpt-4',
+    'gpt-3.5-turbo',
+    'claude-3-opus',
+    'claude-3-sonnet',
+  ]).map((m) => ({ value: m, label: m }));
+
+  const logLevelOptions = [
+    { value: 'debug', label: 'Debug' },
+    { value: 'info', label: 'Info' },
+    { value: 'warn', label: 'Warning' },
+    { value: 'error', label: 'Error' },
+  ];
+
+  return (
+    <Card className={className}>
+      <CardHeader
+        title="Settings"
+        icon={<SettingsIcon className="w-4 h-4" />}
+        action={
+          health && (
+            <Badge variant={health.status === 'ok' ? 'success' : 'error'} dot>
+              {health.status === 'ok' ? 'Connected' : 'Disconnected'}
+            </Badge>
+          )
+        }
+      />
+      <CardContent>
+        {isLoading ? (
+          <div className="flex items-center justify-center py-8">
+            <SettingsIcon className="w-6 h-6 text-dark-500 animate-spin" />
+          </div>
+        ) : (
+          <div className="space-y-6">
+            {/* API Configuration */}
+            <div>
+              <div className="flex items-center gap-2 text-sm font-medium text-dark-200 mb-3">
+                <Key className="w-4 h-4" />
+                API Configuration
+              </div>
+              <div className="space-y-3">
+                <Input
+                  label="API Key"
+                  type="password"
+                  placeholder="sk-..."
+                  value={localSettings.apiKey ?? ''}
+                  onChange={(e) => handleChange('apiKey', e.target.value)}
+                  hint="Your OpenAI or provider API key"
+                />
+              </div>
+            </div>
+
+            {/* Model Settings */}
+            <div>
+              <div className="flex items-center gap-2 text-sm font-medium text-dark-200 mb-3">
+                <Cpu className="w-4 h-4" />
+                Model Settings
+              </div>
+              <div className="space-y-3">
+                <Select
+                  label="Default Model"
+                  options={modelOptions}
+                  value={localSettings.defaultModel ?? ''}
+                  onChange={(e) => handleChange('defaultModel', e.target.value)}
+                  placeholder="Select model"
+                />
+                <Input
+                  label="Max Concurrent Agents"
+                  type="number"
+                  min={1}
+                  max={10}
+                  value={localSettings.maxConcurrentAgents ?? 4}
+                  onChange={(e) =>
+                    handleChange('maxConcurrentAgents', parseInt(e.target.value))
+                  }
+                />
+              </div>
+            </div>
+
+            {/* Connection Settings */}
+            <div>
+              <div className="flex items-center gap-2 text-sm font-medium text-dark-200 mb-3">
+                <Wifi className="w-4 h-4" />
+                Connection
+              </div>
+              <div className="space-y-3">
+                <Toggle
+                  label="WebSocket Updates"
+                  description="Enable real-time episode updates"
+                  checked={localSettings.enableWebSocket ?? true}
+                  onChange={(checked) => handleChange('enableWebSocket', checked)}
+                />
+                <Select
+                  label="Log Level"
+                  options={logLevelOptions}
+                  value={localSettings.logLevel ?? 'info'}
+                  onChange={(e) =>
+                    handleChange('logLevel', e.target.value as SystemSettings['logLevel'])
+                  }
+                />
+              </div>
+            </div>
+
+            {/* Storage Settings */}
+            <div>
+              <div className="flex items-center gap-2 text-sm font-medium text-dark-200 mb-3">
+                <Database className="w-4 h-4" />
+                Storage
+              </div>
+              <div className="space-y-3">
+                <Toggle
+                  label="Memory Persistence"
+                  description="Persist memory across episodes"
+                  checked={localSettings.memoryPersistence ?? false}
+                  onChange={(checked) =>
+                    handleChange('memoryPersistence', checked)
+                  }
+                />
+              </div>
+            </div>
+
+            {/* Screenshot Settings */}
+            <div>
+              <div className="flex items-center gap-2 text-sm font-medium text-dark-200 mb-3">
+                <Image className="w-4 h-4" />
+                Screenshots
+              </div>
+              <div className="space-y-3">
+                <Input
+                  label="Screenshot Quality"
+                  type="range"
+                  min={10}
+                  max={100}
+                  value={localSettings.screenshotQuality ?? 80}
+                  onChange={(e) =>
+                    handleChange('screenshotQuality', parseInt(e.target.value))
+                  }
+                  hint={`Quality: ${localSettings.screenshotQuality ?? 80}%`}
+                />
+              </div>
+            </div>
+
+            {/* Status Messages */}
+            {updateMutation.isSuccess && (
+              <div className="flex items-center gap-2 p-3 bg-green-500/10 border border-green-500/30 rounded-lg">
+                <CheckCircle className="w-4 h-4 text-green-400" />
+                <span className="text-sm text-green-400">
+                  Settings saved successfully
+                </span>
+              </div>
+            )}
+
+            {updateMutation.isError && (
+              <div className="flex items-center gap-2 p-3 bg-red-500/10 border border-red-500/30 rounded-lg">
+                <AlertCircle className="w-4 h-4 text-red-400" />
+                <span className="text-sm text-red-400">
+                  {(updateMutation.error as Error).message}
+                </span>
+              </div>
+            )}
+          </div>
+        )}
+      </CardContent>
+      <CardFooter>
+        <Button
+          variant="ghost"
+          onClick={handleReset}
+          disabled={!hasChanges}
+          leftIcon={<RefreshCw className="w-4 h-4" />}
+        >
+          Reset
+        </Button>
+        <Button
+          variant="primary"
+          onClick={handleSave}
+          disabled={!hasChanges}
+          isLoading={updateMutation.isPending}
+          leftIcon={<Save className="w-4 h-4" />}
+        >
+          Save Changes
+        </Button>
+      </CardFooter>
+    </Card>
+  );
+};
+
+export default Settings;

frontend/src/components/ToolRegistry.tsx

@@ -0,0 +1,287 @@
+import React, { useState } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import {
+  Wrench,
+  Search,
+  ToggleLeft,
+  ToggleRight,
+  Play,
+  ChevronDown,
+  ChevronUp,
+  Clock,
+  Hash,
+} from 'lucide-react';
+import { Card, CardHeader, CardContent } from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
+import { Badge } from '@/components/ui/Badge';
+import { Input } from '@/components/ui/Input';
+import { apiClient } from '@/api/client';
+import { formatTimestamp } from '@/utils/helpers';
+import type { MCPTool } from '@/types';
+
+interface ToolRegistryProps {
+  className?: string;
+}
+
+interface ToolCardProps {
+  tool: MCPTool;
+  onToggle: (enabled: boolean) => void;
+  onExecute: (params: Record<string, unknown>) => void;
+  isToggling: boolean;
+}
+
+const ToolCard: React.FC<ToolCardProps> = ({
+  tool,
+  onToggle,
+  onExecute,
+  isToggling,
+}) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const categoryColors: Record<string, string> = {
+    browser: 'text-blue-400 bg-blue-400/10',
+    extraction: 'text-purple-400 bg-purple-400/10',
+    navigation: 'text-green-400 bg-green-400/10',
+    validation: 'text-orange-400 bg-orange-400/10',
+    utility: 'text-gray-400 bg-gray-400/10',
+  };
+
+  return (
+    <div className="bg-dark-900/50 rounded-lg overflow-hidden">
+      <div className="p-3">
+        <div className="flex items-start justify-between gap-3">
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center gap-2 mb-1">
+              <span className="font-mono text-sm text-dark-100">
+                {tool.name}
+              </span>
+              <Badge
+                variant={tool.enabled ? 'success' : 'neutral'}
+                size="sm"
+              >
+                {tool.enabled ? 'Enabled' : 'Disabled'}
+              </Badge>
+            </div>
+            <p className="text-xs text-dark-400 line-clamp-2">
+              {tool.description}
+            </p>
+          </div>
+          <div className="flex items-center gap-2">
+            <button
+              onClick={() => onToggle(!tool.enabled)}
+              disabled={isToggling}
+              className="text-dark-400 hover:text-dark-200 transition-colors"
+            >
+              {tool.enabled ? (
+                <ToggleRight className="w-6 h-6 text-accent-primary" />
+              ) : (
+                <ToggleLeft className="w-6 h-6" />
+              )}
+            </button>
+            <button
+              onClick={() => setIsExpanded(!isExpanded)}
+              className="text-dark-400 hover:text-dark-200 transition-colors"
+            >
+              {isExpanded ? (
+                <ChevronUp className="w-4 h-4" />
+              ) : (
+                <ChevronDown className="w-4 h-4" />
+              )}
+            </button>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-3 mt-2">
+          <span
+            className={`text-xs px-2 py-0.5 rounded ${
+              categoryColors[tool.category] ?? categoryColors.utility
+            }`}
+          >
+            {tool.category}
+          </span>
+          <div className="flex items-center gap-1 text-xs text-dark-500">
+            <Hash className="w-3 h-3" />
+            <span>{tool.usageCount}</span>
+          </div>
+          {tool.lastUsed && (
+            <div className="flex items-center gap-1 text-xs text-dark-500">
+              <Clock className="w-3 h-3" />
+              <span>{formatTimestamp(tool.lastUsed)}</span>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {isExpanded && (
+        <div className="px-3 pb-3 border-t border-dark-700">
+          <div className="mt-3">
+            <div className="text-xs text-dark-400 mb-2">Input Schema</div>
+            <div className="code-block text-xs max-h-40 overflow-y-auto">
+              {JSON.stringify(tool.inputSchema, null, 2)}
+            </div>
+          </div>
+
+          <div className="mt-3 flex gap-2">
+            <Button
+              variant="secondary"
+              size="sm"
+              onClick={() => onExecute({})}
+              disabled={!tool.enabled}
+              leftIcon={<Play className="w-3 h-3" />}
+            >
+              Test Execute
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export const ToolRegistry: React.FC<ToolRegistryProps> = ({ className }) => {
+  const queryClient = useQueryClient();
+  const [searchQuery, setSearchQuery] = useState('');
+  const [categoryFilter, setCategoryFilter] = useState<string | null>(null);
+
+  const { data: tools, isLoading } = useQuery({
+    queryKey: ['tools'],
+    queryFn: () => apiClient.getTools(),
+  });
+
+  const toggleMutation = useMutation({
+    mutationFn: ({ name, enabled }: { name: string; enabled: boolean }) =>
+      apiClient.toggleTool(name, enabled),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['tools'] });
+    },
+  });
+
+  const executeMutation = useMutation({
+    mutationFn: ({
+      name,
+      params,
+    }: {
+      name: string;
+      params: Record<string, unknown>;
+    }) => apiClient.executeTool(name, params),
+  });
+
+  const categories = React.useMemo((): string[] => {
+    if (!tools) return [];
+    return [...new Set(tools.map((t) => t.category).filter((c): c is string => !!c))];
+  }, [tools]);
+
+  const filteredTools = React.useMemo(() => {
+    if (!tools) return [];
+    return tools.filter((tool) => {
+      const matchesSearch =
+        !searchQuery ||
+        tool.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        tool.description.toLowerCase().includes(searchQuery.toLowerCase());
+      const matchesCategory =
+        !categoryFilter || tool.category === categoryFilter;
+      return matchesSearch && matchesCategory;
+    });
+  }, [tools, searchQuery, categoryFilter]);
+
+  const enabledCount = tools?.filter((t) => t.enabled).length ?? 0;
+
+  return (
+    <Card className={className}>
+      <CardHeader
+        title="MCP Tools"
+        subtitle={`${enabledCount}/${tools?.length ?? 0} enabled`}
+        icon={<Wrench className="w-4 h-4" />}
+      />
+      <CardContent>
+        {/* Search & Filter */}
+        <div className="flex gap-2 mb-4">
+          <Input
+            placeholder="Search tools..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            leftIcon={<Search className="w-4 h-4" />}
+            className="flex-1"
+          />
+        </div>
+
+        {/* Category Pills */}
+        <div className="flex flex-wrap gap-2 mb-4">
+          <button
+            onClick={() => setCategoryFilter(null)}
+            className={`px-3 py-1 text-xs rounded-full transition-colors ${
+              !categoryFilter
+                ? 'bg-accent-primary text-white'
+                : 'bg-dark-700 text-dark-300 hover:bg-dark-600'
+            }`}
+          >
+            All
+          </button>
+          {categories.map((cat: string) => (
+            <button
+              key={cat}
+              onClick={() =>
+                setCategoryFilter(categoryFilter === cat ? null : cat)
+              }
+              className={`px-3 py-1 text-xs rounded-full transition-colors capitalize ${
+                categoryFilter === cat
+                  ? 'bg-accent-primary text-white'
+                  : 'bg-dark-700 text-dark-300 hover:bg-dark-600'
+              }`}
+            >
+              {cat}
+            </button>
+          ))}
+        </div>
+
+        {/* Tools List */}
+        <div className="space-y-2 max-h-[400px] overflow-y-auto">
+          {isLoading ? (
+            <div className="flex items-center justify-center py-8">
+              <Wrench className="w-6 h-6 text-dark-500 animate-pulse" />
+            </div>
+          ) : filteredTools.length === 0 ? (
+            <div className="text-center py-8 text-dark-500">
+              <Wrench className="w-8 h-8 mx-auto mb-2 opacity-50" />
+              <p>No tools found</p>
+            </div>
+          ) : (
+            filteredTools.map((tool) => (
+              <ToolCard
+                key={tool.name}
+                tool={tool}
+                onToggle={(enabled) =>
+                  toggleMutation.mutate({ name: tool.name, enabled })
+                }
+                onExecute={(params) =>
+                  executeMutation.mutate({ name: tool.name, params })
+                }
+                isToggling={toggleMutation.isPending}
+              />
+            ))
+          )}
+        </div>
+
+        {/* Execution Result */}
+        {executeMutation.data !== undefined && (
+          <div className="mt-4 p-3 bg-dark-900/50 rounded-lg">
+            <div className="text-xs text-dark-400 mb-1">Execution Result</div>
+            <div className="code-block text-xs max-h-32 overflow-y-auto">
+              {JSON.stringify(executeMutation.data, null, 2)}
+            </div>
+          </div>
+        )}
+
+        {executeMutation.isError && (
+          <div className="mt-4 p-3 bg-red-500/10 border border-red-500/30 rounded-lg">
+            <div className="text-xs text-red-400">
+              {(executeMutation.error as Error).message}
+            </div>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+};
+
+export default ToolRegistry;

frontend/src/components/ui/Badge.tsx

@@ -0,0 +1,116 @@
+import React from 'react';
+import { classNames } from '@/utils/helpers';
+
+type BadgeVariant = 'success' | 'warning' | 'error' | 'info' | 'neutral';
+type BadgeSize = 'sm' | 'md' | 'lg';
+
+interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+  variant?: BadgeVariant;
+  size?: BadgeSize;
+  dot?: boolean;
+  pulse?: boolean;
+  icon?: React.ReactNode;
+}
+
+export const Badge: React.FC<BadgeProps> = ({
+  children,
+  variant = 'neutral',
+  size = 'md',
+  dot = false,
+  pulse = false,
+  icon,
+  className,
+  ...props
+}) => {
+  const variantStyles: Record<BadgeVariant, string> = {
+    success: 'bg-green-500/20 text-green-400 border-green-500/30',
+    warning: 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30',
+    error: 'bg-red-500/20 text-red-400 border-red-500/30',
+    info: 'bg-blue-500/20 text-blue-400 border-blue-500/30',
+    neutral: 'bg-dark-600/50 text-dark-300 border-dark-500/30',
+  };
+
+  const dotColors: Record<BadgeVariant, string> = {
+    success: 'bg-green-400',
+    warning: 'bg-yellow-400',
+    error: 'bg-red-400',
+    info: 'bg-blue-400',
+    neutral: 'bg-dark-400',
+  };
+
+  const sizeStyles: Record<BadgeSize, string> = {
+    sm: 'px-2 py-0.5 text-xs',
+    md: 'px-2.5 py-0.5 text-xs',
+    lg: 'px-3 py-1 text-sm',
+  };
+
+  return (
+    <span
+      className={classNames(
+        'inline-flex items-center gap-1.5 rounded-full font-medium border',
+        variantStyles[variant],
+        sizeStyles[size],
+        className
+      )}
+      {...props}
+    >
+      {dot && (
+        <span
+          className={classNames(
+            'w-1.5 h-1.5 rounded-full',
+            dotColors[variant],
+            pulse && 'animate-pulse'
+          )}
+        />
+      )}
+      {icon}
+      {children}
+    </span>
+  );
+};
+
+interface StatusBadgeProps {
+  status: string;
+  size?: BadgeSize;
+}
+
+export const StatusBadge: React.FC<StatusBadgeProps> = ({
+  status,
+  size = 'md',
+}) => {
+  const getVariant = (): BadgeVariant => {
+    switch (status.toLowerCase()) {
+      case 'running':
+      case 'active':
+      case 'acting':
+      case 'completed':
+      case 'success':
+        return 'success';
+      case 'thinking':
+      case 'processing':
+        return 'info';
+      case 'idle':
+      case 'waiting':
+      case 'pending':
+      case 'timeout':
+        return 'warning';
+      case 'error':
+      case 'failed':
+        return 'error';
+      default:
+        return 'neutral';
+    }
+  };
+
+  const shouldPulse = ['running', 'acting', 'thinking', 'processing'].includes(
+    status.toLowerCase()
+  );
+
+  return (
+    <Badge variant={getVariant()} size={size} dot pulse={shouldPulse}>
+      {status}
+    </Badge>
+  );
+};
+
+export default Badge;

frontend/src/components/ui/Button.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { classNames } from '@/utils/helpers';
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
+  size?: 'sm' | 'md' | 'lg';
+  isLoading?: boolean;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+}
+
+export const Button: React.FC<ButtonProps> = ({
+  children,
+  variant = 'primary',
+  size = 'md',
+  isLoading = false,
+  leftIcon,
+  rightIcon,
+  className,
+  disabled,
+  ...props
+}) => {
+  const baseStyles = 'btn';
+
+  const variantStyles = {
+    primary: 'btn-primary',
+    secondary: 'btn-secondary',
+    ghost: 'btn-ghost',
+    danger: 'btn-danger',
+  };
+
+  const sizeStyles = {
+    sm: 'px-3 py-1.5 text-xs',
+    md: 'px-4 py-2 text-sm',
+    lg: 'px-6 py-3 text-base',
+  };
+
+  return (
+    <button
+      className={classNames(
+        baseStyles,
+        variantStyles[variant],
+        sizeStyles[size],
+        className
+      )}
+      disabled={disabled || isLoading}
+      {...props}
+    >
+      {isLoading && (
+        <svg
+          className="animate-spin h-4 w-4"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+        >
+          <circle
+            className="opacity-25"
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            strokeWidth="4"
+          />
+          <path
+            className="opacity-75"
+            fill="currentColor"
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+          />
+        </svg>
+      )}
+      {!isLoading && leftIcon}
+      {children}
+      {!isLoading && rightIcon}
+    </button>
+  );
+};
+
+export default Button;

frontend/src/components/ui/Card.tsx

@@ -0,0 +1,120 @@
+import React from 'react';
+import { classNames } from '@/utils/helpers';
+
+interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: 'default' | 'bordered' | 'elevated' | 'glass';
+  padding?: 'none' | 'sm' | 'md' | 'lg';
+}
+
+export const Card: React.FC<CardProps> = ({
+  children,
+  variant = 'default',
+  padding = 'md',
+  className,
+  ...props
+}) => {
+  const variantStyles = {
+    default: 'bg-dark-800 border border-dark-700',
+    bordered: 'bg-transparent border-2 border-dark-600',
+    elevated: 'bg-dark-800 shadow-xl shadow-black/20',
+    glass: 'bg-dark-800/80 backdrop-blur-sm border border-dark-700/50',
+  };
+
+  const paddingStyles = {
+    none: 'p-0',
+    sm: 'p-3',
+    md: 'p-4',
+    lg: 'p-6',
+  };
+
+  return (
+    <div
+      className={classNames(
+        'rounded-xl',
+        variantStyles[variant],
+        paddingStyles[padding],
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
+
+interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  title: string;
+  subtitle?: string;
+  action?: React.ReactNode;
+  icon?: React.ReactNode;
+}
+
+export const CardHeader: React.FC<CardHeaderProps> = ({
+  title,
+  subtitle,
+  action,
+  icon,
+  className,
+  ...props
+}) => {
+  return (
+    <div
+      className={classNames(
+        'flex items-center justify-between mb-4 pb-3 border-b border-dark-700',
+        className
+      )}
+      {...props}
+    >
+      <div className="flex items-center gap-3">
+        {icon && (
+          <div className="flex items-center justify-center w-8 h-8 rounded-lg bg-dark-700 text-dark-300">
+            {icon}
+          </div>
+        )}
+        <div>
+          <h3 className="text-lg font-semibold text-dark-100">{title}</h3>
+          {subtitle && (
+            <p className="text-sm text-dark-400 mt-0.5">{subtitle}</p>
+          )}
+        </div>
+      </div>
+      {action && <div>{action}</div>}
+    </div>
+  );
+};
+
+type CardContentProps = React.HTMLAttributes<HTMLDivElement>;
+
+export const CardContent: React.FC<CardContentProps> = ({
+  children,
+  className,
+  ...props
+}) => {
+  return (
+    <div className={classNames('', className)} {...props}>
+      {children}
+    </div>
+  );
+};
+
+type CardFooterProps = React.HTMLAttributes<HTMLDivElement>;
+
+export const CardFooter: React.FC<CardFooterProps> = ({
+  children,
+  className,
+  ...props
+}) => {
+  return (
+    <div
+      className={classNames(
+        'flex items-center justify-end gap-3 mt-4 pt-3 border-t border-dark-700',
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default Card;

frontend/src/components/ui/Input.tsx

@@ -0,0 +1,140 @@
+import React, { forwardRef } from 'react';
+import { classNames } from '@/utils/helpers';
+
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  error?: string;
+  hint?: string;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+  variant?: 'default' | 'filled';
+}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      label,
+      error,
+      hint,
+      leftIcon,
+      rightIcon,
+      variant = 'default',
+      className,
+      id,
+      ...props
+    },
+    ref
+  ) => {
+    const inputId = id || `input-${Math.random().toString(36).slice(2, 9)}`;
+
+    const variantStyles = {
+      default: 'bg-dark-900 border-dark-600',
+      filled: 'bg-dark-700 border-transparent',
+    };
+
+    return (
+      <div className="w-full">
+        {label && (
+          <label
+            htmlFor={inputId}
+            className="block text-sm font-medium text-dark-300 mb-1.5"
+          >
+            {label}
+          </label>
+        )}
+        <div className="relative">
+          {leftIcon && (
+            <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-dark-500">
+              {leftIcon}
+            </div>
+          )}
+          <input
+            ref={ref}
+            id={inputId}
+            className={classNames(
+              'w-full px-3 py-2 border rounded-lg text-dark-100 placeholder-dark-500',
+              'focus:outline-none focus:border-accent-primary focus:ring-1 focus:ring-accent-primary/50',
+              'transition-colors duration-200',
+              variantStyles[variant],
+              leftIcon ? 'pl-10' : '',
+              rightIcon ? 'pr-10' : '',
+              error ? 'border-red-500 focus:border-red-500 focus:ring-red-500/50' : '',
+              className
+            )}
+            {...props}
+          />
+          {rightIcon && (
+            <div className="absolute inset-y-0 right-0 pr-3 flex items-center text-dark-500">
+              {rightIcon}
+            </div>
+          )}
+        </div>
+        {(error || hint) && (
+          <p
+            className={classNames(
+              'mt-1.5 text-sm',
+              error ? 'text-red-400' : 'text-dark-500'
+            )}
+          >
+            {error || hint}
+          </p>
+        )}
+      </div>
+    );
+  }
+);
+
+Input.displayName = 'Input';
+
+interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  label?: string;
+  error?: string;
+  hint?: string;
+}
+
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ label, error, hint, className, id, ...props }, ref) => {
+    const inputId = id || `textarea-${Math.random().toString(36).slice(2, 9)}`;
+
+    return (
+      <div className="w-full">
+        {label && (
+          <label
+            htmlFor={inputId}
+            className="block text-sm font-medium text-dark-300 mb-1.5"
+          >
+            {label}
+          </label>
+        )}
+        <textarea
+          ref={ref}
+          id={inputId}
+          className={classNames(
+            'w-full px-3 py-2 bg-dark-900 border border-dark-600 rounded-lg',
+            'text-dark-100 placeholder-dark-500 resize-none',
+            'focus:outline-none focus:border-accent-primary focus:ring-1 focus:ring-accent-primary/50',
+            'transition-colors duration-200',
+            error && 'border-red-500 focus:border-red-500 focus:ring-red-500/50',
+            className
+          )}
+          {...props}
+        />
+        {(error || hint) && (
+          <p
+            className={classNames(
+              'mt-1.5 text-sm',
+              error ? 'text-red-400' : 'text-dark-500'
+            )}
+          >
+            {error || hint}
+          </p>
+        )}
+      </div>
+    );
+  }
+);
+
+Textarea.displayName = 'Textarea';
+
+export default Input;

frontend/src/components/ui/Select.tsx

@@ -0,0 +1,140 @@
+import React, { forwardRef } from 'react';
+import { ChevronDown } from 'lucide-react';
+import { classNames } from '@/utils/helpers';
+
+interface SelectOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+
+interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'children'> {
+  label?: string;
+  error?: string;
+  hint?: string;
+  options: SelectOption[];
+  placeholder?: string;
+}
+
+export const Select = forwardRef<HTMLSelectElement, SelectProps>(
+  ({ label, error, hint, options, placeholder, className, id, ...props }, ref) => {
+    const selectId = id || `select-${Math.random().toString(36).slice(2, 9)}`;
+
+    return (
+      <div className="w-full">
+        {label && (
+          <label
+            htmlFor={selectId}
+            className="block text-sm font-medium text-dark-300 mb-1.5"
+          >
+            {label}
+          </label>
+        )}
+        <div className="relative">
+          <select
+            ref={ref}
+            id={selectId}
+            className={classNames(
+              'w-full px-3 py-2 pr-10 bg-dark-900 border border-dark-600 rounded-lg',
+              'text-dark-100 appearance-none cursor-pointer',
+              'focus:outline-none focus:border-accent-primary focus:ring-1 focus:ring-accent-primary/50',
+              'transition-colors duration-200',
+              error && 'border-red-500 focus:border-red-500 focus:ring-red-500/50',
+              className
+            )}
+            {...props}
+          >
+            {placeholder && (
+              <option value="" disabled>
+                {placeholder}
+              </option>
+            )}
+            {options.map((option) => (
+              <option
+                key={option.value}
+                value={option.value}
+                disabled={option.disabled}
+              >
+                {option.label}
+              </option>
+            ))}
+          </select>
+          <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none text-dark-500">
+            <ChevronDown className="w-4 h-4" />
+          </div>
+        </div>
+        {(error || hint) && (
+          <p
+            className={classNames(
+              'mt-1.5 text-sm',
+              error ? 'text-red-400' : 'text-dark-500'
+            )}
+          >
+            {error || hint}
+          </p>
+        )}
+      </div>
+    );
+  }
+);
+
+Select.displayName = 'Select';
+
+interface ToggleProps {
+  label?: string;
+  description?: string;
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  disabled?: boolean;
+}
+
+export const Toggle: React.FC<ToggleProps> = ({
+  label,
+  description,
+  checked,
+  onChange,
+  disabled = false,
+}) => {
+  return (
+    <label
+      className={classNames(
+        'flex items-center justify-between gap-4 cursor-pointer',
+        disabled && 'opacity-50 cursor-not-allowed'
+      )}
+    >
+      <div>
+        {label && (
+          <span className="block text-sm font-medium text-dark-200">
+            {label}
+          </span>
+        )}
+        {description && (
+          <span className="block text-sm text-dark-500 mt-0.5">
+            {description}
+          </span>
+        )}
+      </div>
+      <button
+        type="button"
+        role="switch"
+        aria-checked={checked}
+        disabled={disabled}
+        onClick={() => !disabled && onChange(!checked)}
+        className={classNames(
+          'relative inline-flex h-6 w-11 items-center rounded-full transition-colors',
+          'focus:outline-none focus:ring-2 focus:ring-accent-primary/50',
+          checked ? 'bg-accent-primary' : 'bg-dark-600'
+        )}
+      >
+        <span
+          className={classNames(
+            'inline-block h-4 w-4 transform rounded-full bg-white transition-transform',
+            checked ? 'translate-x-6' : 'translate-x-1'
+          )}
+        />
+      </button>
+    </label>
+  );
+};
+
+export default Select;

frontend/src/hooks/useAgents.ts

@@ -0,0 +1,97 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { apiClient } from '@/api/client';
+import type { Agent } from '@/types';
+
+export function useAgents(episodeId: string | undefined) {
+  return useQuery({
+    queryKey: ['episode', episodeId, 'agents'],
+    queryFn: () => (episodeId ? apiClient.getAgents(episodeId) : []),
+    enabled: !!episodeId,
+    refetchInterval: 1000,
+  });
+}
+
+export function useAgent(episodeId: string | undefined, agentId: string) {
+  return useQuery({
+    queryKey: ['episode', episodeId, 'agents', agentId],
+    queryFn: () =>
+      episodeId ? apiClient.getAgent(episodeId, agentId) : null,
+    enabled: !!episodeId && !!agentId,
+    refetchInterval: 500,
+  });
+}
+
+export function useUpdateAgent(episodeId: string | undefined) {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({
+      agentId,
+      updates,
+    }: {
+      agentId: string;
+      updates: Partial<Agent>;
+    }) =>
+      episodeId
+        ? apiClient.updateAgent(episodeId, agentId, updates)
+        : Promise.reject(new Error('No episode')),
+    onSuccess: (_, { agentId }) => {
+      queryClient.invalidateQueries({
+        queryKey: ['episode', episodeId, 'agents', agentId],
+      });
+      queryClient.invalidateQueries({
+        queryKey: ['episode', episodeId, 'agents'],
+      });
+    },
+  });
+}
+
+export function getAgentStatusVariant(
+  status: Agent['status']
+): 'success' | 'warning' | 'error' | 'info' | 'neutral' {
+  switch (status) {
+    case 'acting':
+      return 'success';
+    case 'thinking':
+      return 'info';
+    case 'waiting':
+      return 'warning';
+    case 'error':
+      return 'error';
+    case 'idle':
+    default:
+      return 'neutral';
+  }
+}
+
+export function getAgentRoleColor(role: Agent['role']): string {
+  switch (role) {
+    case 'navigator':
+      return 'text-blue-400';
+    case 'extractor':
+      return 'text-purple-400';
+    case 'validator':
+      return 'text-green-400';
+    case 'coordinator':
+      return 'text-orange-400';
+    default:
+      return 'text-dark-400';
+  }
+}
+
+export function getAgentRoleIcon(role: Agent['role']): string {
+  switch (role) {
+    case 'navigator':
+      return '🧭';
+    case 'extractor':
+      return '📊';
+    case 'validator':
+      return '✅';
+    case 'coordinator':
+      return '🎯';
+    default:
+      return '🤖';
+  }
+}
+
+export type { Agent };

frontend/src/hooks/useEpisode.ts

@@ -0,0 +1,114 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { apiClient } from '@/api/client';
+import type { Episode, ResetRequest, StepRequest, Action } from '@/types';
+
+export function useCurrentEpisode() {
+  return useQuery({
+    queryKey: ['episode', 'current'],
+    queryFn: () => apiClient.getCurrentEpisode(),
+    refetchInterval: 2000,
+  });
+}
+
+export function useEpisode(episodeId: string | undefined) {
+  return useQuery({
+    queryKey: ['episode', episodeId],
+    queryFn: () => (episodeId ? apiClient.getEpisode(episodeId) : null),
+    enabled: !!episodeId,
+    refetchInterval: 1000,
+  });
+}
+
+export function useResetEpisode() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (params: ResetRequest) => apiClient.resetEpisode(params),
+    onSuccess: (episode) => {
+      queryClient.setQueryData(['episode', 'current'], episode);
+      queryClient.setQueryData(['episode', episode.id], episode);
+      queryClient.invalidateQueries({ queryKey: ['episode'] });
+    },
+  });
+}
+
+export function useStepEpisode(episodeId: string | undefined) {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (step: StepRequest) =>
+      episodeId
+        ? apiClient.stepEpisode(episodeId, step)
+        : Promise.reject(new Error('No episode')),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['episode', episodeId] });
+      queryClient.invalidateQueries({ queryKey: ['episode', 'current'] });
+    },
+  });
+}
+
+export function useTerminateEpisode() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (episodeId: string) => apiClient.terminateEpisode(episodeId),
+    onSuccess: (_, episodeId) => {
+      queryClient.invalidateQueries({ queryKey: ['episode', episodeId] });
+      queryClient.invalidateQueries({ queryKey: ['episode', 'current'] });
+    },
+  });
+}
+
+export function useEpisodeActions(episodeId: string | undefined) {
+  return useQuery({
+    queryKey: ['episode', episodeId, 'actions'],
+    queryFn: () => (episodeId ? apiClient.getActions(episodeId) : []),
+    enabled: !!episodeId,
+    refetchInterval: 1000,
+  });
+}
+
+export function useEpisodeRewards(episodeId: string | undefined) {
+  return useQuery({
+    queryKey: ['episode', episodeId, 'rewards'],
+    queryFn: () => (episodeId ? apiClient.getRewards(episodeId) : []),
+    enabled: !!episodeId,
+    refetchInterval: 1000,
+  });
+}
+
+export function useEpisodeStats() {
+  return useQuery({
+    queryKey: ['stats'],
+    queryFn: () => apiClient.getStats(),
+    refetchInterval: 5000,
+  });
+}
+
+export function useEpisodeState(episodeId: string | undefined) {
+  return useQuery({
+    queryKey: ['episode', episodeId, 'state'],
+    queryFn: () => (episodeId ? apiClient.getState(episodeId) : null),
+    enabled: !!episodeId,
+    refetchInterval: 500,
+  });
+}
+
+// Helper to create a quick action
+export function createAction(
+  type: Action['type'],
+  agentId: string,
+  options: Partial<Omit<Action, 'type' | 'agentId' | 'timestamp'>> = {}
+): StepRequest {
+  return {
+    action: {
+      type,
+      agentId,
+      confidence: 1.0,
+      ...options,
+    },
+    agentId,
+  };
+}
+
+export type { Episode, ResetRequest, StepRequest };

frontend/src/hooks/useMemory.ts

@@ -0,0 +1,106 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { apiClient } from '@/api/client';
+import type { MemoryState, MemoryEntry, MemoryLayer } from '@/types';
+
+export function useMemory(episodeId: string | undefined) {
+  return useQuery({
+    queryKey: ['episode', episodeId, 'memory'],
+    queryFn: () => (episodeId ? apiClient.getMemory(episodeId) : null),
+    enabled: !!episodeId,
+    refetchInterval: 2000,
+  });
+}
+
+export function useQueryMemory(episodeId: string | undefined) {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({
+      query,
+      layer,
+      limit,
+    }: {
+      query: string;
+      layer?: MemoryLayer;
+      limit?: number;
+    }) =>
+      episodeId
+        ? apiClient.queryMemory(episodeId, query, layer, limit)
+        : Promise.reject(new Error('No episode')),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ['episode', episodeId, 'memory'],
+      });
+    },
+  });
+}
+
+export function useAddMemory(episodeId: string | undefined) {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (entry: Omit<MemoryEntry, 'id' | 'timestamp'>) =>
+      episodeId
+        ? apiClient.addMemory(episodeId, entry)
+        : Promise.reject(new Error('No episode')),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ['episode', episodeId, 'memory'],
+      });
+    },
+  });
+}
+
+export function useClearMemory(episodeId: string | undefined) {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (layer?: MemoryLayer) =>
+      episodeId
+        ? apiClient.clearMemory(episodeId, layer)
+        : Promise.reject(new Error('No episode')),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ['episode', episodeId, 'memory'],
+      });
+    },
+  });
+}
+
+export function getMemoryLayerColor(layer: MemoryLayer): string {
+  switch (layer) {
+    case 'short_term':
+      return 'text-yellow-400';
+    case 'working':
+      return 'text-blue-400';
+    case 'long_term':
+      return 'text-purple-400';
+    case 'shared':
+      return 'text-green-400';
+    default:
+      return 'text-dark-400';
+  }
+}
+
+export function getMemoryLayerBadge(layer: MemoryLayer): string {
+  switch (layer) {
+    case 'short_term':
+      return 'badge-warning';
+    case 'working':
+      return 'badge-info';
+    case 'long_term':
+      return 'badge-neutral';
+    case 'shared':
+      return 'badge-success';
+    default:
+      return 'badge-neutral';
+  }
+}
+
+export function formatMemorySize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+export type { MemoryState, MemoryEntry, MemoryLayer };

frontend/src/hooks/useWebSocket.ts

@@ -0,0 +1,154 @@
+import { useEffect, useRef, useCallback, useState } from 'react';
+import type { WebSocketMessage } from '@/types';
+
+type MessageHandler = (message: WebSocketMessage) => void;
+
+interface UseWebSocketOptions {
+  onMessage?: MessageHandler;
+  onOpen?: () => void;
+  onClose?: () => void;
+  onError?: (error: Event) => void;
+  reconnectAttempts?: number;
+  reconnectInterval?: number;
+  autoConnect?: boolean;
+}
+
+interface UseWebSocketReturn {
+  isConnected: boolean;
+  isConnecting: boolean;
+  connect: () => void;
+  disconnect: () => void;
+  send: (message: unknown) => void;
+  lastMessage: WebSocketMessage | null;
+}
+
+export function useWebSocket(
+  url: string = '/ws',
+  options: UseWebSocketOptions = {}
+): UseWebSocketReturn {
+  const {
+    onMessage,
+    onOpen,
+    onClose,
+    onError,
+    reconnectAttempts = 5,
+    reconnectInterval = 3000,
+    autoConnect = true,
+  } = options;
+
+  const wsRef = useRef<WebSocket | null>(null);
+  const reconnectCountRef = useRef(0);
+  const reconnectTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const [isConnected, setIsConnected] = useState(false);
+  const [isConnecting, setIsConnecting] = useState(false);
+  const [lastMessage, setLastMessage] = useState<WebSocketMessage | null>(null);
+
+  const getWebSocketUrl = useCallback((): string => {
+    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const host = window.location.host;
+    return url.startsWith('/') ? `${protocol}//${host}${url}` : url;
+  }, [url]);
+
+  const connect = useCallback(() => {
+    if (wsRef.current?.readyState === WebSocket.OPEN) {
+      return;
+    }
+
+    setIsConnecting(true);
+
+    try {
+      const wsUrl = getWebSocketUrl();
+      wsRef.current = new WebSocket(wsUrl);
+
+      wsRef.current.onopen = () => {
+        setIsConnected(true);
+        setIsConnecting(false);
+        reconnectCountRef.current = 0;
+        onOpen?.();
+      };
+
+      wsRef.current.onclose = () => {
+        setIsConnected(false);
+        setIsConnecting(false);
+        onClose?.();
+
+        if (reconnectCountRef.current < reconnectAttempts) {
+          reconnectTimeoutRef.current = setTimeout(() => {
+            reconnectCountRef.current++;
+            connect();
+          }, reconnectInterval);
+        }
+      };
+
+      wsRef.current.onerror = (event) => {
+        setIsConnecting(false);
+        onError?.(event);
+      };
+
+      wsRef.current.onmessage = (event) => {
+        try {
+          const message = JSON.parse(event.data as string) as WebSocketMessage;
+          setLastMessage(message);
+          onMessage?.(message);
+        } catch (error) {
+          console.error('Failed to parse WebSocket message:', error);
+        }
+      };
+    } catch (error) {
+      setIsConnecting(false);
+      console.error('Failed to create WebSocket connection:', error);
+    }
+  }, [
+    getWebSocketUrl,
+    onMessage,
+    onOpen,
+    onClose,
+    onError,
+    reconnectAttempts,
+    reconnectInterval,
+  ]);
+
+  const disconnect = useCallback(() => {
+    if (reconnectTimeoutRef.current) {
+      clearTimeout(reconnectTimeoutRef.current);
+      reconnectTimeoutRef.current = null;
+    }
+    reconnectCountRef.current = reconnectAttempts;
+
+    if (wsRef.current) {
+      wsRef.current.close();
+      wsRef.current = null;
+    }
+    setIsConnected(false);
+  }, [reconnectAttempts]);
+
+  const send = useCallback((message: unknown) => {
+    if (wsRef.current?.readyState === WebSocket.OPEN) {
+      wsRef.current.send(JSON.stringify(message));
+    } else {
+      console.warn('WebSocket is not connected');
+    }
+  }, []);
+
+  useEffect(() => {
+    if (autoConnect) {
+      connect();
+    }
+
+    return () => {
+      disconnect();
+    };
+  }, [autoConnect, connect, disconnect]);
+
+  return {
+    isConnected,
+    isConnecting,
+    connect,
+    disconnect,
+    send,
+    lastMessage,
+  };
+}
+
+export default useWebSocket;

frontend/src/index.css

@@ -0,0 +1,181 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  * {
+    @apply border-dark-700;
+  }
+
+  body {
+    @apply bg-dark-900 text-dark-100 antialiased;
+  }
+
+  ::-webkit-scrollbar {
+    @apply w-2 h-2;
+  }
+
+  ::-webkit-scrollbar-track {
+    @apply bg-dark-800;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    @apply bg-dark-600 rounded-full;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    @apply bg-dark-500;
+  }
+}
+
+@layer components {
+  .card {
+    @apply bg-dark-800 border border-dark-700 rounded-xl p-4 shadow-lg;
+  }
+
+  .card-header {
+    @apply flex items-center justify-between mb-4 pb-3 border-b border-dark-700;
+  }
+
+  .card-title {
+    @apply text-lg font-semibold text-dark-100;
+  }
+
+  .btn {
+    @apply inline-flex items-center justify-center gap-2 px-4 py-2 text-sm font-medium 
+           rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 
+           focus:ring-accent-primary/50 disabled:opacity-50 disabled:cursor-not-allowed;
+  }
+
+  .btn-primary {
+    @apply bg-accent-primary text-white hover:bg-accent-secondary active:bg-accent-tertiary;
+  }
+
+  .btn-secondary {
+    @apply bg-dark-700 text-dark-200 hover:bg-dark-600 active:bg-dark-500;
+  }
+
+  .btn-ghost {
+    @apply bg-transparent text-dark-300 hover:bg-dark-700 hover:text-dark-100;
+  }
+
+  .btn-danger {
+    @apply bg-red-600 text-white hover:bg-red-700 active:bg-red-800;
+  }
+
+  .input {
+    @apply w-full px-3 py-2 bg-dark-900 border border-dark-600 rounded-lg text-dark-100
+           placeholder-dark-500 focus:outline-none focus:border-accent-primary focus:ring-1 
+           focus:ring-accent-primary/50 transition-colors;
+  }
+
+  .select {
+    @apply w-full px-3 py-2 bg-dark-900 border border-dark-600 rounded-lg text-dark-100
+           focus:outline-none focus:border-accent-primary focus:ring-1 
+           focus:ring-accent-primary/50 transition-colors cursor-pointer;
+  }
+
+  .badge {
+    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
+  }
+
+  .badge-success {
+    @apply bg-green-500/20 text-green-400 border border-green-500/30;
+  }
+
+  .badge-warning {
+    @apply bg-yellow-500/20 text-yellow-400 border border-yellow-500/30;
+  }
+
+  .badge-error {
+    @apply bg-red-500/20 text-red-400 border border-red-500/30;
+  }
+
+  .badge-info {
+    @apply bg-blue-500/20 text-blue-400 border border-blue-500/30;
+  }
+
+  .badge-neutral {
+    @apply bg-dark-600/50 text-dark-300 border border-dark-500/30;
+  }
+
+  .tab {
+    @apply px-4 py-2 text-sm font-medium text-dark-400 hover:text-dark-200 
+           border-b-2 border-transparent transition-colors;
+  }
+
+  .tab-active {
+    @apply text-accent-primary border-accent-primary;
+  }
+
+  .panel {
+    @apply bg-dark-850 rounded-lg p-3;
+  }
+
+  .status-indicator {
+    @apply w-2.5 h-2.5 rounded-full;
+  }
+
+  .status-active {
+    @apply bg-green-500 animate-pulse;
+  }
+
+  .status-idle {
+    @apply bg-yellow-500;
+  }
+
+  .status-error {
+    @apply bg-red-500;
+  }
+
+  .status-offline {
+    @apply bg-dark-500;
+  }
+
+  .thought-bubble {
+    @apply bg-dark-700/50 border border-dark-600 rounded-lg p-3 text-sm text-dark-300
+           font-mono italic;
+  }
+
+  .code-block {
+    @apply bg-dark-950 border border-dark-700 rounded-lg p-3 font-mono text-sm 
+           text-dark-200 overflow-x-auto;
+  }
+
+  .timeline-item {
+    @apply relative pl-6 pb-4 border-l-2 border-dark-700 last:border-l-transparent;
+  }
+
+  .timeline-dot {
+    @apply absolute left-0 top-0 w-3 h-3 bg-accent-primary rounded-full 
+           -translate-x-[7px] ring-4 ring-dark-800;
+  }
+
+  .gradient-text {
+    @apply bg-gradient-to-r from-accent-primary to-accent-tertiary 
+           bg-clip-text text-transparent;
+  }
+
+  .glass {
+    @apply bg-dark-800/80 backdrop-blur-sm;
+  }
+}
+
+@layer utilities {
+  .animate-in {
+    animation: fadeIn 0.3s ease-in-out;
+  }
+
+  .slide-in {
+    animation: slideUp 0.3s ease-out;
+  }
+
+  .no-scrollbar {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+}

frontend/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+import './index.css';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);

frontend/src/types/index.ts

@@ -0,0 +1,227 @@
+// Core types matching backend models
+
+export type AgentRole = 'navigator' | 'extractor' | 'validator' | 'coordinator';
+export type AgentStatus = 'idle' | 'thinking' | 'acting' | 'waiting' | 'error';
+export type MemoryLayer = 'short_term' | 'working' | 'long_term' | 'shared';
+export type ActionType = 
+  | 'navigate' 
+  | 'click' 
+  | 'extract' 
+  | 'scroll' 
+  | 'input' 
+  | 'wait' 
+  | 'screenshot'
+  | 'execute_tool'
+  | 'delegate'
+  | 'terminate';
+
+export interface Position {
+  x: number;
+  y: number;
+}
+
+export interface BoundingBox {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export interface DOMElement {
+  tag: string;
+  id?: string;
+  classes: string[];
+  text?: string;
+  href?: string;
+  src?: string;
+  attributes: Record<string, string>;
+  boundingBox?: BoundingBox;
+  children?: DOMElement[];
+}
+
+export interface PageState {
+  url: string;
+  title: string;
+  domain: string;
+  loadTime: number;
+  contentType: string;
+  statusCode: number;
+}
+
+export interface Observation {
+  step: number;
+  timestamp: string;
+  page: PageState;
+  dom: DOMElement[];
+  screenshot?: string;
+  extractedData: Record<string, unknown>;
+  visibleText: string;
+  interactableElements: DOMElement[];
+  metadata: Record<string, unknown>;
+}
+
+export interface ActionTarget {
+  selector?: string;
+  xpath?: string;
+  text?: string;
+  position?: Position;
+  element?: DOMElement;
+}
+
+export interface Action {
+  type: ActionType;
+  target?: ActionTarget;
+  value?: string;
+  parameters?: Record<string, unknown>;
+  reasoning?: string;
+  confidence: number;
+  agentId: string;
+  timestamp: string;
+}
+
+export interface RewardComponent {
+  name: string;
+  value: number;
+  weight: number;
+  description?: string;
+}
+
+export interface Reward {
+  total: number;
+  components: RewardComponent[];
+  normalized: number;
+  cumulative: number;
+  timestamp: string;
+}
+
+export interface AgentThought {
+  content: string;
+  type: 'reasoning' | 'planning' | 'observation' | 'decision';
+  timestamp: string;
+}
+
+export interface Agent {
+  id: string;
+  role: AgentRole;
+  status: AgentStatus;
+  model: string;
+  currentTask?: string;
+  thoughts: AgentThought[];
+  actionsCount: number;
+  totalReward: number;
+  lastAction?: Action;
+  metadata: Record<string, unknown>;
+}
+
+export interface MemoryEntry {
+  id: string;
+  content: string;
+  type: string;
+  layer: MemoryLayer;
+  importance: number;
+  timestamp: string;
+  expiresAt?: string;
+  embedding?: number[];
+  metadata: Record<string, unknown>;
+}
+
+export interface MemoryState {
+  shortTerm: MemoryEntry[];
+  working: MemoryEntry[];
+  longTerm: MemoryEntry[];
+  shared: MemoryEntry[];
+  totalEntries: number;
+  memoryUsage: number;
+}
+
+export interface MCPTool {
+  name: string;
+  description: string;
+  inputSchema: Record<string, unknown>;
+  category: string;
+  enabled: boolean;
+  usageCount: number;
+  lastUsed?: string;
+}
+
+export interface Task {
+  id: string;
+  description: string;
+  targetUrl: string;
+  objectives: string[];
+  constraints: string[];
+  successCriteria: string[];
+  priority: number;
+  deadline?: string;
+}
+
+export interface EpisodeConfig {
+  maxSteps: number;
+  timeout: number;
+  budget: number;
+  allowNavigation: boolean;
+  allowInputs: boolean;
+  screenshotFrequency: number;
+  memoryLimit: number;
+}
+
+export interface Episode {
+  id: string;
+  task: Task;
+  config: EpisodeConfig;
+  status: 'pending' | 'running' | 'completed' | 'failed' | 'timeout';
+  currentStep: number;
+  startTime: string;
+  endTime?: string;
+  totalReward: number;
+  observations: Observation[];
+  actions: Action[];
+  rewards: Reward[];
+  agents: Agent[];
+  memory: MemoryState;
+  success: boolean;
+  errorMessage?: string;
+}
+
+export interface EpisodeStats {
+  totalEpisodes: number;
+  successRate: number;
+  averageReward: number;
+  averageSteps: number;
+  totalActions: number;
+}
+
+export interface SystemSettings {
+  apiKey?: string;
+  defaultModel: string;
+  availableModels: string[];
+  maxConcurrentAgents: number;
+  enableWebSocket: boolean;
+  logLevel: 'debug' | 'info' | 'warn' | 'error';
+  screenshotQuality: number;
+  memoryPersistence: boolean;
+}
+
+export interface WebSocketMessage {
+  type: 'observation' | 'action' | 'reward' | 'agent_update' | 'episode_status' | 'error';
+  payload: unknown;
+  timestamp: string;
+  episodeId?: string;
+}
+
+export interface APIResponse<T> {
+  success: boolean;
+  data?: T;
+  error?: string;
+  timestamp: string;
+}
+
+export interface StepRequest {
+  action: Omit<Action, 'timestamp'>;
+  agentId?: string;
+}
+
+export interface ResetRequest {
+  task: Partial<Task>;
+  config?: Partial<EpisodeConfig>;
+}

frontend/src/utils/helpers.ts

@@ -0,0 +1,162 @@
+export function formatTimestamp(timestamp: string): string {
+  const date = new Date(timestamp);
+  return date.toLocaleTimeString('en-US', {
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+  });
+}
+
+export function formatDate(timestamp: string): string {
+  const date = new Date(timestamp);
+  return date.toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  });
+}
+
+export function formatDuration(ms: number): string {
+  const seconds = Math.floor(ms / 1000);
+  const minutes = Math.floor(seconds / 60);
+  const hours = Math.floor(minutes / 60);
+
+  if (hours > 0) {
+    return `${hours}h ${minutes % 60}m`;
+  }
+  if (minutes > 0) {
+    return `${minutes}m ${seconds % 60}s`;
+  }
+  return `${seconds}s`;
+}
+
+export function formatNumber(num: number, decimals = 2): string {
+  if (Math.abs(num) >= 1e6) {
+    return `${(num / 1e6).toFixed(decimals)}M`;
+  }
+  if (Math.abs(num) >= 1e3) {
+    return `${(num / 1e3).toFixed(decimals)}K`;
+  }
+  return num.toFixed(decimals);
+}
+
+export function formatReward(reward: number): string {
+  const sign = reward >= 0 ? '+' : '';
+  return `${sign}${reward.toFixed(3)}`;
+}
+
+export function truncateText(text: string, maxLength: number): string {
+  if (text.length <= maxLength) return text;
+  return `${text.slice(0, maxLength - 3)}...`;
+}
+
+export function classNames(...classes: (string | boolean | undefined | null)[]): string {
+  return classes.filter(Boolean).join(' ');
+}
+
+export function getStatusColor(status: string): string {
+  const colors: Record<string, string> = {
+    idle: 'yellow',
+    thinking: 'blue',
+    acting: 'green',
+    waiting: 'orange',
+    error: 'red',
+    running: 'green',
+    completed: 'green',
+    failed: 'red',
+    pending: 'gray',
+    timeout: 'orange',
+  };
+  return colors[status] ?? 'gray';
+}
+
+export function getRoleIcon(role: string): string {
+  const icons: Record<string, string> = {
+    navigator: '🧭',
+    extractor: '📊',
+    validator: '✅',
+    coordinator: '🎯',
+  };
+  return icons[role] ?? '🤖';
+}
+
+export function getActionIcon(actionType: string): string {
+  const icons: Record<string, string> = {
+    navigate: '🔗',
+    click: '👆',
+    extract: '📤',
+    scroll: '📜',
+    input: '⌨️',
+    wait: '⏳',
+    screenshot: '📸',
+    execute_tool: '🔧',
+    delegate: '👥',
+    terminate: '🛑',
+  };
+  return icons[actionType] ?? '⚡';
+}
+
+export function debounce<T extends (...args: unknown[]) => unknown>(
+  func: T,
+  wait: number
+): (...args: Parameters<T>) => void {
+  let timeout: ReturnType<typeof setTimeout> | null = null;
+
+  return (...args: Parameters<T>) => {
+    if (timeout) clearTimeout(timeout);
+    timeout = setTimeout(() => func(...args), wait);
+  };
+}
+
+export function throttle<T extends (...args: unknown[]) => unknown>(
+  func: T,
+  limit: number
+): (...args: Parameters<T>) => void {
+  let inThrottle = false;
+
+  return (...args: Parameters<T>) => {
+    if (!inThrottle) {
+      func(...args);
+      inThrottle = true;
+      setTimeout(() => (inThrottle = false), limit);
+    }
+  };
+}
+
+export function generateId(): string {
+  return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 9)}`;
+}
+
+export function parseJSON<T>(json: string, fallback: T): T {
+  try {
+    return JSON.parse(json) as T;
+  } catch {
+    return fallback;
+  }
+}
+
+export function calculateProgress(current: number, total: number): number {
+  if (total === 0) return 0;
+  return Math.min(Math.round((current / total) * 100), 100);
+}
+
+export function groupBy<T>(array: T[], key: keyof T): Record<string, T[]> {
+  return array.reduce((groups, item) => {
+    const groupKey = String(item[key]);
+    return {
+      ...groups,
+      [groupKey]: [...(groups[groupKey] || []), item],
+    };
+  }, {} as Record<string, T[]>);
+}
+
+export function sortByTimestamp<T extends { timestamp: string }>(
+  items: T[],
+  order: 'asc' | 'desc' = 'desc'
+): T[] {
+  return [...items].sort((a, b) => {
+    const timeA = new Date(a.timestamp).getTime();
+    const timeB = new Date(b.timestamp).getTime();
+    return order === 'asc' ? timeA - timeB : timeB - timeA;
+  });
+}

frontend/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />