feat: add static file serving and improve UI/UX design

- Add static file serving in FastAPI for frontend assets
- Add SPA routing support for React Router
- Redesign App.tsx with modern gradient navbar and footer
- Improve Dashboard with stat cards and cleaner layout
- Enhance Settings page with 2-column standalone design
- Redesign PluginsPage with category colors and better cards
- Fix TypeScript lint errors (unused imports)

backend/app/main.py

@@ -2,11 +2,14 @@
 
 import logging
 from contextlib import asynccontextmanager
+from pathlib import Path
 from typing import AsyncGenerator
 
 import uvicorn
-from fastapi import FastAPI
+from fastapi import FastAPI, Request
 from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import FileResponse, HTMLResponse
+from fastapi.staticfiles import StaticFiles
 
 from app.api.routes import agents, episode, health, memory, plugins, tasks, tools
 from app.api.routes import settings as settings_routes
@@ -119,6 +122,37 @@ def create_app() -> FastAPI:
     app.include_router(settings_routes.router, prefix=api_prefix, tags=["Settings"])
     app.include_router(plugins.router, prefix=api_prefix, tags=["Plugins"])
 
+    # Serve static files (frontend build)
+    static_dir = Path(__file__).parent.parent / "static"
+    if static_dir.exists():
+        app.mount("/assets", StaticFiles(directory=static_dir / "assets"), name="assets")
+        
+        @app.get("/", response_class=HTMLResponse)
+        async def serve_spa():
+            """Serve the main SPA index.html."""
+            index_file = static_dir / "index.html"
+            if index_file.exists():
+                return FileResponse(index_file)
+            return HTMLResponse("<h1>ScrapeRL</h1><p>Frontend not built.</p>")
+        
+        @app.get("/{full_path:path}")
+        async def serve_spa_routes(request: Request, full_path: str):
+            """Serve SPA routes - return index.html for client-side routing."""
+            # Don't serve index.html for API routes
+            if full_path.startswith("api/"):
+                return {"detail": "Not Found"}
+            
+            # Check if it's a static file
+            static_file = static_dir / full_path
+            if static_file.exists() and static_file.is_file():
+                return FileResponse(static_file)
+            
+            # Return index.html for SPA routing
+            index_file = static_dir / "index.html"
+            if index_file.exists():
+                return FileResponse(index_file)
+            return HTMLResponse("<h1>ScrapeRL</h1><p>Frontend not built.</p>")
+
     return app
 
 

frontend/src/App.tsx

@@ -1,6 +1,6 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { BrowserRouter, Routes, Route, Link, useLocation } from 'react-router-dom';
-import { Home, Settings as SettingsIcon, Package } from 'lucide-react';
+import { Home, Settings as SettingsIcon, Package, Activity, Zap, Brain, Github } from 'lucide-react';
 import Dashboard from './components/Dashboard';
 import Settings from './components/Settings';
 import PluginsPage from './components/PluginsPage';
@@ -25,29 +25,61 @@ function NavBar() {
   ];
 
   return (
-    <nav className="bg-dark-900 border-b border-dark-700">
-      <div className="max-w-7xl mx-auto px-4">
-        <div className="flex items-center justify-between h-14">
-          <div className="flex items-center gap-2">
-            <span className="text-xl font-bold text-primary-400">🕷️ ScrapeRL</span>
+    <nav className="bg-gradient-to-r from-gray-900 via-gray-900 to-gray-800 border-b border-gray-700/50 shadow-lg">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex items-center justify-between h-16">
+          {/* Logo */}
+          <div className="flex items-center gap-3">
+            <div className="relative">
+              <div className="w-10 h-10 bg-gradient-to-br from-emerald-500 via-cyan-500 to-blue-500 rounded-xl flex items-center justify-center shadow-lg shadow-emerald-500/20">
+                <Brain className="w-6 h-6 text-white" />
+              </div>
+              <div className="absolute -top-1 -right-1 w-3 h-3 bg-emerald-400 rounded-full animate-pulse" />
+            </div>
+            <div className="flex flex-col">
+              <span className="text-xl font-bold bg-gradient-to-r from-emerald-400 via-cyan-400 to-blue-400 bg-clip-text text-transparent">
+                ScrapeRL
+              </span>
+              <span className="text-[10px] text-gray-500 font-medium tracking-wider">
+                RL-POWERED SCRAPING
+              </span>
+            </div>
           </div>
-          <div className="flex items-center gap-1">
+
+          {/* Navigation */}
+          <div className="flex items-center gap-2">
             {navItems.map(({ path, label, icon: Icon }) => (
               <Link
                 key={path}
                 to={path}
                 className={classNames(
-                  'flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors',
+                  'flex items-center gap-2 px-4 py-2.5 rounded-xl text-sm font-medium transition-all duration-200',
                   location.pathname === path
-                    ? 'bg-primary-500/20 text-primary-400'
-                    : 'text-dark-300 hover:text-dark-100 hover:bg-dark-800'
+                    ? 'bg-gradient-to-r from-emerald-500/20 to-cyan-500/20 text-emerald-400 shadow-lg shadow-emerald-500/10 border border-emerald-500/30'
+                    : 'text-gray-400 hover:text-gray-200 hover:bg-gray-800/50'
                 )}
               >
                 <Icon className="w-4 h-4" />
-                {label}
+                <span className="hidden sm:inline">{label}</span>
               </Link>
             ))}
           </div>
+
+          {/* Status Badge */}
+          <div className="hidden md:flex items-center gap-3">
+            <div className="flex items-center gap-2 px-3 py-1.5 bg-emerald-500/10 border border-emerald-500/30 rounded-full">
+              <Zap className="w-3.5 h-3.5 text-emerald-400" />
+              <span className="text-xs text-emerald-400 font-medium">Online</span>
+            </div>
+            <a
+              href="https://github.com/NeerajCodz/scrapeRL"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="p-2 text-gray-500 hover:text-gray-300 transition-colors"
+            >
+              <Github className="w-5 h-5" />
+            </a>
+          </div>
         </div>
       </div>
     </nav>
@@ -58,15 +90,38 @@ function App() {
   return (
     <QueryClientProvider client={queryClient}>
       <BrowserRouter>
-        <div className="min-h-screen bg-gray-950 text-gray-100">
+        <div className="min-h-screen bg-gradient-to-br from-gray-950 via-gray-900 to-gray-950 text-gray-100">
           <NavBar />
-          <main className="max-w-7xl mx-auto px-4 py-6">
+          <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
             <Routes>
               <Route path="/" element={<Dashboard />} />
               <Route path="/plugins" element={<PluginsPage />} />
               <Route path="/settings" element={<Settings />} />
             </Routes>
           </main>
+          
+          {/* Footer */}
+          <footer className="border-t border-gray-800/50 bg-gray-900/30">
+            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+              <div className="flex flex-col sm:flex-row items-center justify-between gap-2 text-xs text-gray-500">
+                <div className="flex items-center gap-2">
+                  <Activity className="w-3.5 h-3.5 text-emerald-500" />
+                  <span>ScrapeRL v0.1.0 • Reinforcement Learning Web Scraping</span>
+                </div>
+                <div className="flex items-center gap-4">
+                  <span>Built with FastAPI + React</span>
+                  <a 
+                    href="https://huggingface.co/spaces/NeerajCodz/scrapeRL" 
+                    target="_blank" 
+                    rel="noopener noreferrer"
+                    className="text-cyan-500 hover:text-cyan-400 transition-colors"
+                  >
+                    🤗 HuggingFace
+                  </a>
+                </div>
+              </div>
+            </div>
+          </footer>
         </div>
       </BrowserRouter>
     </QueryClientProvider>

frontend/src/components/Dashboard.tsx

@@ -1,14 +1,16 @@
-import React, { useState } from 'react';
+import React from 'react';
 import {
-  LayoutDashboard,
-  Settings as SettingsIcon,
   Activity,
-  Menu,
-  X,
-  Wifi,
-  WifiOff,
-  ChevronLeft,
-  ChevronRight,
+  Zap,
+  Brain,
+  Target,
+  Clock,
+  TrendingUp,
+  Database,
+  Cpu,
+  Globe,
+  Play,
+  RotateCcw,
 } from 'lucide-react';
 import { EpisodePanel } from './EpisodePanel';
 import { AgentView } from './AgentView';
@@ -17,200 +19,172 @@ 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';
+interface StatCardProps {
+  icon: React.ElementType;
+  label: string;
+  value: string | number;
+  change?: string;
+  color: 'emerald' | 'cyan' | 'purple' | 'amber';
+}
 
-export const Dashboard: React.FC = () => {
-  const [viewMode, setViewMode] = useState<ViewMode>('dashboard');
-  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
-  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+const StatCard: React.FC<StatCardProps> = ({ icon: Icon, label, value, change, color }) => {
+  const colorClasses = {
+    emerald: 'from-emerald-500/20 to-emerald-600/10 border-emerald-500/30 text-emerald-400',
+    cyan: 'from-cyan-500/20 to-cyan-600/10 border-cyan-500/30 text-cyan-400',
+    purple: 'from-purple-500/20 to-purple-600/10 border-purple-500/30 text-purple-400',
+    amber: 'from-amber-500/20 to-amber-600/10 border-amber-500/30 text-amber-400',
+  };
 
-  const { isConnected, isConnecting } = useWebSocket('/ws', {
-    onMessage: (message) => {
-      console.log('WebSocket message:', message);
-    },
-  });
+  return (
+    <div className={`bg-gradient-to-br ${colorClasses[color]} border rounded-xl p-4 backdrop-blur-sm`}>
+      <div className="flex items-center justify-between">
+        <div className={`p-2 rounded-lg bg-${color}-500/20`}>
+          <Icon className={`w-5 h-5 ${colorClasses[color].split(' ').pop()}`} />
+        </div>
+        {change && (
+          <span className="text-xs text-emerald-400 flex items-center gap-1">
+            <TrendingUp className="w-3 h-3" />
+            {change}
+          </span>
+        )}
+      </div>
+      <div className="mt-3">
+        <p className="text-2xl font-bold text-white">{value}</p>
+        <p className="text-xs text-gray-400 mt-1">{label}</p>
+      </div>
+    </div>
+  );
+};
 
+export const Dashboard: React.FC = () => {
   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 className="space-y-6">
+      {/* Header Section */}
+      <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
+        <div>
+          <h1 className="text-2xl font-bold text-white flex items-center gap-3">
+            <div className="p-2 bg-gradient-to-br from-emerald-500/20 to-cyan-500/20 rounded-lg">
+              <Activity className="w-6 h-6 text-emerald-400" />
             </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>
+            Dashboard
+          </h1>
+          <p className="text-gray-400 mt-1">Monitor your RL scraping agents in real-time</p>
         </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>}
+        
+        <div className="flex items-center gap-3">
+          <button className="flex items-center gap-2 px-4 py-2 bg-emerald-500 hover:bg-emerald-600 text-white rounded-lg font-medium transition-colors shadow-lg shadow-emerald-500/20">
+            <Play className="w-4 h-4" />
+            Start Episode
           </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 className="flex items-center gap-2 px-4 py-2 bg-gray-700 hover:bg-gray-600 text-white rounded-lg font-medium transition-colors">
+            <RotateCcw className="w-4 h-4" />
+            Reset
           </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>
+      </div>
 
-      {/* Mobile Overlay */}
-      {mobileMenuOpen && (
-        <div
-          className="fixed inset-0 bg-black/50 z-30 lg:hidden"
-          onClick={() => setMobileMenuOpen(false)}
+      {/* Stats Grid */}
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+        <StatCard
+          icon={Zap}
+          label="Total Episodes"
+          value={episode?.id ? '1' : '0'}
+          color="emerald"
+        />
+        <StatCard
+          icon={Target}
+          label="Current Step"
+          value={episode?.currentStep || 0}
+          color="cyan"
         />
-      )}
+        <StatCard
+          icon={TrendingUp}
+          label="Total Reward"
+          value={episode?.totalReward?.toFixed(2) || '0.00'}
+          change="+12%"
+          color="purple"
+        />
+        <StatCard
+          icon={Clock}
+          label="Avg Time/Step"
+          value="1.2s"
+          color="amber"
+        />
+      </div>
 
-      {/* 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>
+      {/* Main Content Grid */}
+      <div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
+        {/* Left Column - Episode & Agents */}
+        <div className="lg:col-span-3 space-y-6">
+          <div className="bg-gray-800/50 backdrop-blur-sm border border-gray-700/50 rounded-xl p-4">
+            <h3 className="text-sm font-semibold text-white flex items-center gap-2 mb-4">
+              <Brain className="w-4 h-4 text-emerald-400" />
+              Episode Status
+            </h3>
+            <EpisodePanel />
           </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 className="bg-gray-800/50 backdrop-blur-sm border border-gray-700/50 rounded-xl p-4">
+            <h3 className="text-sm font-semibold text-white flex items-center gap-2 mb-4">
+              <Cpu className="w-4 h-4 text-cyan-400" />
+              Active Agents
+            </h3>
+            <AgentView />
           </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>
+        </div>
 
-              {/* Right Column */}
-              <div className="lg:col-span-3 space-y-4 lg:space-y-6">
-                <MemoryPanel />
-                <ToolRegistry />
-              </div>
+        {/* Center Column - Observation & Charts */}
+        <div className="lg:col-span-6 space-y-6">
+          <div className="bg-gray-800/50 backdrop-blur-sm border border-gray-700/50 rounded-xl p-4">
+            <h3 className="text-sm font-semibold text-white flex items-center gap-2 mb-4">
+              <Globe className="w-4 h-4 text-purple-400" />
+              Current Observation
+            </h3>
+            <ObservationView />
+          </div>
+          
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div className="bg-gray-800/50 backdrop-blur-sm border border-gray-700/50 rounded-xl p-4">
+              <h3 className="text-sm font-semibold text-white flex items-center gap-2 mb-4">
+                <TrendingUp className="w-4 h-4 text-emerald-400" />
+                Reward History
+              </h3>
+              <RewardChart />
             </div>
-          ) : (
-            <div className="max-w-2xl mx-auto">
-              <Settings />
+            
+            <div className="bg-gray-800/50 backdrop-blur-sm border border-gray-700/50 rounded-xl p-4">
+              <h3 className="text-sm font-semibold text-white flex items-center gap-2 mb-4">
+                <Zap className="w-4 h-4 text-amber-400" />
+                Actions
+              </h3>
+              <ActionPanel />
             </div>
-          )}
+          </div>
+        </div>
+
+        {/* Right Column - Memory & Tools */}
+        <div className="lg:col-span-3 space-y-6">
+          <div className="bg-gray-800/50 backdrop-blur-sm border border-gray-700/50 rounded-xl p-4">
+            <h3 className="text-sm font-semibold text-white flex items-center gap-2 mb-4">
+              <Database className="w-4 h-4 text-pink-400" />
+              Memory Layers
+            </h3>
+            <MemoryPanel />
+          </div>
+          
+          <div className="bg-gray-800/50 backdrop-blur-sm border border-gray-700/50 rounded-xl p-4">
+            <h3 className="text-sm font-semibold text-white flex items-center gap-2 mb-4">
+              <Cpu className="w-4 h-4 text-blue-400" />
+              Tool Registry
+            </h3>
+            <ToolRegistry />
+          </div>
         </div>
-      </main>
+      </div>
     </div>
   );
 };

frontend/src/components/PluginsPage.tsx

@@ -13,10 +13,8 @@ import {
   Cpu,
   Wrench,
   Database,
+  Sparkles,
 } from 'lucide-react';
-import { Card, CardContent } from '@/components/ui/Card';
-import { Button } from '@/components/ui/Button';
-import { Input } from '@/components/ui/Input';
 import { Badge } from '@/components/ui/Badge';
 import { classNames } from '@/utils/helpers';
 
@@ -31,13 +29,6 @@ interface Plugin {
   requires_key: boolean;
 }
 
-interface Category {
-  id: string;
-  name: string;
-  description: string;
-  icon: string;
-}
-
 interface PluginsResponse {
   plugins: Record<string, Plugin[]>;
   categories: string[];
@@ -55,15 +46,15 @@ interface PluginsPageProps {
 const getCategoryIcon = (category: string) => {
   switch (category) {
     case 'apis':
-      return <Plug className="w-5 h-5" />;
+      return <Plug className="w-5 h-5 text-cyan-400" />;
     case 'mcps':
-      return <Wrench className="w-5 h-5" />;
+      return <Wrench className="w-5 h-5 text-amber-400" />;
     case 'skills':
-      return <Cpu className="w-5 h-5" />;
+      return <Cpu className="w-5 h-5 text-purple-400" />;
     case 'processors':
-      return <Database className="w-5 h-5" />;
+      return <Database className="w-5 h-5 text-pink-400" />;
     default:
-      return <Package className="w-5 h-5" />;
+      return <Package className="w-5 h-5 text-gray-400" />;
   }
 };
 
@@ -71,12 +62,22 @@ const getCategoryLabel = (category: string) => {
   const labels: Record<string, string> = {
     apis: 'API Providers',
     mcps: 'MCP Tools',
-    skills: 'Skills/Agents',
+    skills: 'Skills & Agents',
     processors: 'Data Processors',
   };
   return labels[category] || category;
 };
 
+const getCategoryColor = (category: string) => {
+  const colors: Record<string, string> = {
+    apis: 'from-cyan-500/20 to-blue-500/10 border-cyan-500/30',
+    mcps: 'from-amber-500/20 to-orange-500/10 border-amber-500/30',
+    skills: 'from-purple-500/20 to-pink-500/10 border-purple-500/30',
+    processors: 'from-pink-500/20 to-rose-500/10 border-pink-500/30',
+  };
+  return colors[category] || 'from-gray-500/20 to-gray-500/10 border-gray-500/30';
+};
+
 export const PluginsPage: React.FC<PluginsPageProps> = ({ className }) => {
   const queryClient = useQueryClient();
   const [searchQuery, setSearchQuery] = useState('');
@@ -92,15 +93,6 @@ export const PluginsPage: React.FC<PluginsPageProps> = ({ className }) => {
     },
   });
 
-  // Fetch categories
-  const { data: categoriesData } = useQuery<{ categories: Category[] }>({
-    queryKey: ['plugin-categories'],
-    queryFn: async () => {
-      const res = await fetch('/api/plugins/categories');
-      return res.json();
-    },
-  });
-
   // Install plugin mutation
   const installMutation = useMutation({
     mutationFn: async (pluginId: string) => {
@@ -168,92 +160,122 @@ export const PluginsPage: React.FC<PluginsPageProps> = ({ className }) => {
   return (
     <div className={classNames('space-y-6', className)}>
       {/* Header */}
-      <div className="flex items-center justify-between">
+      <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
         <div>
-          <h1 className="text-2xl font-bold text-dark-100">Plugins</h1>
-          <p className="text-dark-400 mt-1">
+          <h1 className="text-2xl font-bold text-white flex items-center gap-3">
+            <div className="p-2 bg-gradient-to-br from-cyan-500/20 to-blue-500/20 rounded-lg">
+              <Package className="w-6 h-6 text-cyan-400" />
+            </div>
+            Plugins
+          </h1>
+          <p className="text-gray-400 mt-1">
             Extend ScrapeRL with APIs, tools, skills, and processors
           </p>
         </div>
+        
+        {/* Stats */}
         {pluginsData?.stats && (
-          <div className="flex gap-4 text-sm">
-            <div className="text-center">
-              <div className="text-2xl font-bold text-primary-400">
+          <div className="flex gap-4">
+            <div className="px-4 py-2 bg-emerald-500/10 border border-emerald-500/30 rounded-xl text-center">
+              <div className="text-xl font-bold text-emerald-400">
                 {pluginsData.stats.installed}
               </div>
-              <div className="text-dark-400">Installed</div>
+              <div className="text-xs text-emerald-400/70">Installed</div>
             </div>
-            <div className="text-center">
-              <div className="text-2xl font-bold text-dark-300">
+            <div className="px-4 py-2 bg-gray-700/30 border border-gray-600/30 rounded-xl text-center">
+              <div className="text-xl font-bold text-gray-300">
                 {pluginsData.stats.available}
               </div>
-              <div className="text-dark-400">Available</div>
+              <div className="text-xs text-gray-500">Available</div>
+            </div>
+            <div className="px-4 py-2 bg-purple-500/10 border border-purple-500/30 rounded-xl text-center">
+              <div className="text-xl font-bold text-purple-400">
+                {pluginsData.stats.total}
+              </div>
+              <div className="text-xs text-purple-400/70">Total</div>
             </div>
           </div>
         )}
       </div>
 
       {/* Filters */}
-      <Card>
-        <CardContent className="py-4">
-          <div className="flex flex-wrap gap-4 items-center">
-            {/* Search */}
-            <div className="flex-1 min-w-[200px]">
-              <Input
+      <div className="bg-gray-800/50 backdrop-blur-sm border border-gray-700/50 rounded-xl p-4">
+        <div className="flex flex-wrap gap-4 items-center">
+          {/* Search */}
+          <div className="flex-1 min-w-[200px]">
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
+              <input
+                type="text"
                 placeholder="Search plugins..."
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
-                leftIcon={<Search className="w-4 h-4" />}
+                className="w-full pl-10 pr-4 py-2.5 bg-gray-900/50 border border-gray-700/50 rounded-lg text-gray-200 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-cyan-500/50 focus:border-cyan-500/50 transition-all"
               />
             </div>
+          </div>
 
-            {/* Category Filter */}
-            <div className="flex gap-2">
-              <Button
-                size="sm"
-                variant={selectedCategory === null ? 'primary' : 'ghost'}
-                onClick={() => setSelectedCategory(null)}
-              >
-                All
-              </Button>
-              {categoriesData?.categories.map((cat) => (
-                <Button
-                  key={cat.id}
-                  size="sm"
-                  variant={selectedCategory === cat.id ? 'primary' : 'ghost'}
-                  onClick={() => setSelectedCategory(cat.id)}
-                  leftIcon={<span>{cat.icon}</span>}
-                >
-                  {cat.name}
-                </Button>
-              ))}
-            </div>
-
-            {/* Show Installed Toggle */}
-            <Button
-              size="sm"
-              variant={showInstalled ? 'primary' : 'ghost'}
-              onClick={() => setShowInstalled(!showInstalled)}
-              leftIcon={<Filter className="w-4 h-4" />}
+          {/* Category Filter */}
+          <div className="flex gap-2 flex-wrap">
+            <button
+              onClick={() => setSelectedCategory(null)}
+              className={classNames(
+                'px-4 py-2 rounded-lg text-sm font-medium transition-all',
+                selectedCategory === null
+                  ? 'bg-emerald-500 text-white shadow-lg shadow-emerald-500/20'
+                  : 'bg-gray-700/50 text-gray-400 hover:text-gray-200 hover:bg-gray-700'
+              )}
             >
-              Installed Only
-            </Button>
+              All
+            </button>
+            {['apis', 'mcps', 'skills', 'processors'].map((cat) => (
+              <button
+                key={cat}
+                onClick={() => setSelectedCategory(cat)}
+                className={classNames(
+                  'flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all',
+                  selectedCategory === cat
+                    ? 'bg-emerald-500 text-white shadow-lg shadow-emerald-500/20'
+                    : 'bg-gray-700/50 text-gray-400 hover:text-gray-200 hover:bg-gray-700'
+                )}
+              >
+                {getCategoryIcon(cat)}
+                {getCategoryLabel(cat)}
+              </button>
+            ))}
           </div>
-        </CardContent>
-      </Card>
+
+          {/* Show Installed Toggle */}
+          <button
+            onClick={() => setShowInstalled(!showInstalled)}
+            className={classNames(
+              'flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all',
+              showInstalled
+                ? 'bg-purple-500 text-white shadow-lg shadow-purple-500/20'
+                : 'bg-gray-700/50 text-gray-400 hover:text-gray-200 hover:bg-gray-700'
+            )}
+          >
+            <Filter className="w-4 h-4" />
+            Installed Only
+          </button>
+        </div>
+      </div>
 
       {/* Plugin List */}
       {isLoading ? (
-        <div className="flex items-center justify-center py-12">
-          <Loader2 className="w-8 h-8 text-primary-400 animate-spin" />
+        <div className="flex flex-col items-center justify-center py-16">
+          <Loader2 className="w-10 h-10 text-cyan-400 animate-spin mb-4" />
+          <p className="text-gray-400">Loading plugins...</p>
         </div>
       ) : (
-        <div className="space-y-6">
+        <div className="space-y-8">
           {Object.entries(filteredPlugins).map(([category, plugins]) => (
             <div key={category}>
-              <div className="flex items-center gap-2 mb-4">
-                {getCategoryIcon(category)}
-                <h2 className="text-lg font-semibold text-dark-100">
+              <div className="flex items-center gap-3 mb-4">
+                <div className={`p-2 rounded-lg bg-gradient-to-br ${getCategoryColor(category)}`}>
+                  {getCategoryIcon(category)}
+                </div>
+                <h2 className="text-lg font-semibold text-white">
                   {getCategoryLabel(category)}
                 </h2>
                 <Badge variant="neutral" size="sm">
@@ -263,74 +285,72 @@ export const PluginsPage: React.FC<PluginsPageProps> = ({ className }) => {
 
               <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                 {plugins.map((plugin) => (
-                  <Card key={plugin.id} className="relative">
-                    <CardContent className="py-4">
-                      <div className="flex items-start justify-between">
-                        <div className="flex-1">
-                          <div className="flex items-center gap-2">
-                            <h3 className="font-medium text-dark-100">
-                              {plugin.name}
-                            </h3>
-                            {plugin.installed && (
-                              <CheckCircle className="w-4 h-4 text-green-400" />
-                            )}
-                          </div>
-                          <p className="text-sm text-dark-400 mt-1">
-                            {plugin.description}
-                          </p>
-                          <div className="flex items-center gap-3 mt-3 text-xs text-dark-500">
-                            <span>v{plugin.version}</span>
-                            <span>•</span>
-                            <span>{plugin.size}</span>
-                            {plugin.requires_key && (
-                              <>
-                                <span>•</span>
-                                <span className="text-yellow-400">
-                                  Requires API Key
-                                </span>
-                              </>
-                            )}
-                          </div>
-                        </div>
-                      </div>
-
-                      <div className="flex gap-2 mt-4">
-                        {plugin.installed ? (
-                          <Button
-                            size="sm"
-                            variant="ghost"
-                            className="flex-1 text-red-400 hover:text-red-300"
-                            onClick={() => uninstallMutation.mutate(plugin.id)}
-                            disabled={uninstallMutation.isPending}
-                            leftIcon={<Trash2 className="w-4 h-4" />}
-                          >
-                            Uninstall
-                          </Button>
-                        ) : (
-                          <Button
-                            size="sm"
-                            variant="primary"
-                            className="flex-1"
-                            onClick={() => installMutation.mutate(plugin.id)}
-                            disabled={installMutation.isPending}
-                            leftIcon={<Download className="w-4 h-4" />}
-                          >
-                            Install
-                          </Button>
+                  <div
+                    key={plugin.id}
+                    className={`relative bg-gradient-to-br ${getCategoryColor(category)} border rounded-xl p-5 backdrop-blur-sm transition-all hover:scale-[1.02] hover:shadow-xl`}
+                  >
+                    <div className="flex items-start justify-between mb-3">
+                      <div className="flex items-center gap-2">
+                        <h3 className="font-semibold text-white">{plugin.name}</h3>
+                        {plugin.installed && (
+                          <CheckCircle className="w-4 h-4 text-emerald-400" />
                         )}
                       </div>
-                    </CardContent>
-                  </Card>
+                      <Badge 
+                        variant={plugin.installed ? 'success' : 'neutral'} 
+                        size="sm"
+                      >
+                        {plugin.installed ? 'Installed' : 'Available'}
+                      </Badge>
+                    </div>
+                    
+                    <p className="text-sm text-gray-400 mb-4 line-clamp-2">
+                      {plugin.description}
+                    </p>
+                    
+                    <div className="flex items-center gap-3 text-xs text-gray-500 mb-4">
+                      <span className="px-2 py-0.5 bg-gray-800/50 rounded">v{plugin.version}</span>
+                      <span>{plugin.size}</span>
+                      {plugin.requires_key && (
+                        <span className="flex items-center gap-1 text-amber-400">
+                          <Sparkles className="w-3 h-3" />
+                          API Key
+                        </span>
+                      )}
+                    </div>
+
+                    {plugin.installed ? (
+                      <button
+                        onClick={() => uninstallMutation.mutate(plugin.id)}
+                        disabled={uninstallMutation.isPending}
+                        className="w-full flex items-center justify-center gap-2 px-4 py-2.5 bg-red-500/10 hover:bg-red-500/20 border border-red-500/30 text-red-400 rounded-lg font-medium transition-all disabled:opacity-50"
+                      >
+                        <Trash2 className="w-4 h-4" />
+                        Uninstall
+                      </button>
+                    ) : (
+                      <button
+                        onClick={() => installMutation.mutate(plugin.id)}
+                        disabled={installMutation.isPending}
+                        className="w-full flex items-center justify-center gap-2 px-4 py-2.5 bg-emerald-500 hover:bg-emerald-600 text-white rounded-lg font-medium transition-all shadow-lg shadow-emerald-500/20 disabled:opacity-50"
+                      >
+                        <Download className="w-4 h-4" />
+                        Install
+                      </button>
+                    )}
+                  </div>
                 ))}
               </div>
             </div>
           ))}
 
           {Object.keys(filteredPlugins).length === 0 && (
-            <div className="text-center py-12">
-              <Package className="w-12 h-12 text-dark-500 mx-auto mb-4" />
-              <h3 className="text-lg font-medium text-dark-300">No plugins found</h3>
-              <p className="text-dark-400 mt-1">
+            <div className="text-center py-16">
+              <div className="w-16 h-16 bg-gray-800/50 rounded-full flex items-center justify-center mx-auto mb-4">
+                <Package className="w-8 h-8 text-gray-500" />
+              </div>
+              <h3 className="text-lg font-medium text-gray-300">No plugins found</h3>
+              <p className="text-gray-500 mt-1">
                 Try adjusting your search or filter criteria
               </p>
             </div>
@@ -340,7 +360,7 @@ export const PluginsPage: React.FC<PluginsPageProps> = ({ className }) => {
 
       {/* Error Messages */}
       {uninstallMutation.isError && (
-        <div className="fixed bottom-4 right-4 flex items-center gap-2 p-4 bg-red-500/10 border border-red-500/30 rounded-lg">
+        <div className="fixed bottom-4 right-4 flex items-center gap-3 p-4 bg-red-500/10 border border-red-500/30 rounded-xl backdrop-blur-sm shadow-xl">
           <AlertCircle className="w-5 h-5 text-red-400" />
           <span className="text-sm text-red-400">
             {(uninstallMutation.error as Error).message}

frontend/src/components/Settings.tsx

@@ -3,16 +3,13 @@ import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import {
   Settings as SettingsIcon,
   Key,
-  Wifi,
-  Database,
-  Image,
   AlertCircle,
   CheckCircle,
   Eye,
   EyeOff,
   Zap,
+  Server,
 } from 'lucide-react';
-import { Card, CardHeader, CardContent } from '@/components/ui/Card';
 import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
 import { Select, Toggle } from '@/components/ui/Select';
@@ -147,39 +144,51 @@ export const Settings: React.FC<SettingsProps> = ({ className }) => {
     : 'groq/gpt-oss-120b';
 
   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>
-        {settingsLoading ? (
-          <div className="flex items-center justify-center py-8">
-            <SettingsIcon className="w-6 h-6 text-dark-500 animate-spin" />
+    <div className={`space-y-6 ${className}`}>
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-white flex items-center gap-3">
+            <div className="p-2 bg-gradient-to-br from-purple-500/20 to-pink-500/20 rounded-lg">
+              <SettingsIcon className="w-6 h-6 text-purple-400" />
+            </div>
+            Settings
+          </h1>
+          <p className="text-gray-400 mt-1">Configure your ScrapeRL environment</p>
+        </div>
+        {health && (
+          <Badge variant={health.status === 'ok' ? 'success' : 'error'} dot>
+            {health.status === 'ok' ? 'Connected' : 'Disconnected'}
+          </Badge>
+        )}
+      </div>
+
+      {settingsLoading ? (
+        <div className="flex items-center justify-center py-16">
+          <div className="flex flex-col items-center gap-3">
+            <SettingsIcon className="w-8 h-8 text-gray-500 animate-spin" />
+            <p className="text-gray-400">Loading settings...</p>
           </div>
-        ) : (
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          {/* Left Column */}
           <div className="space-y-6">
             {/* API Key Required Warning */}
             {keyRequired?.required && (
-              <div className="flex items-center gap-2 p-3 bg-yellow-500/10 border border-yellow-500/30 rounded-lg">
-                <AlertCircle className="w-4 h-4 text-yellow-400" />
-                <span className="text-sm text-yellow-400">
-                  {keyRequired.message}
-                </span>
+              <div className="flex items-center gap-3 p-4 bg-amber-500/10 border border-amber-500/30 rounded-xl">
+                <AlertCircle className="w-5 h-5 text-amber-400 flex-shrink-0" />
+                <div>
+                  <p className="text-sm font-medium text-amber-400">API Key Required</p>
+                  <p className="text-xs text-amber-400/70">{keyRequired.message}</p>
+                </div>
               </div>
             )}
 
             {/* Model Selection */}
-            <div>
-              <div className="flex items-center gap-2 text-sm font-medium text-dark-200 mb-3">
-                <Zap className="w-4 h-4" />
+            <div className="bg-gray-800/50 backdrop-blur-sm border border-gray-700/50 rounded-xl p-5">
+              <div className="flex items-center gap-2 text-sm font-semibold text-white mb-4">
+                <Zap className="w-4 h-4 text-emerald-400" />
                 Active Model
               </div>
               <Select
@@ -190,86 +199,20 @@ export const Settings: React.FC<SettingsProps> = ({ className }) => {
                 placeholder="Select model"
               />
               {selectModelMutation.isPending && (
-                <p className="text-xs text-dark-400 mt-1">Switching model...</p>
+                <p className="text-xs text-gray-400 mt-2">Switching model...</p>
               )}
-            </div>
-
-            {/* API Keys Section */}
-            <div>
-              <div className="flex items-center gap-2 text-sm font-medium text-dark-200 mb-3">
-                <Key className="w-4 h-4" />
-                API Keys
-              </div>
-              <p className="text-xs text-dark-400 mb-4">
-                Enter your API keys to use the corresponding models. Keys are stored in your browser session.
+              <p className="text-xs text-gray-500 mt-3">
+                Select the AI model to use for scraping tasks. Different models have different capabilities and costs.
               </p>
-              <div className="space-y-4">
-                {providers.map((provider) => {
-                  const isConfigured = settingsData?.api_keys_configured?.[provider.id] ?? false;
-                  return (
-                    <div key={provider.id} className="p-3 bg-dark-800/50 rounded-lg">
-                      <div className="flex items-center justify-between mb-2">
-                        <div className="flex items-center gap-2">
-                          <span className="text-lg">{provider.icon}</span>
-                          <div>
-                            <span className="text-sm font-medium text-dark-100">
-                              {provider.name}
-                            </span>
-                            <p className="text-xs text-dark-400">{provider.description}</p>
-                          </div>
-                        </div>
-                        <Badge variant={isConfigured ? 'success' : 'warning'} size="sm">
-                          {isConfigured ? 'Configured' : 'Not Set'}
-                        </Badge>
-                      </div>
-                      <div className="flex gap-2">
-                        <div className="flex-1 relative">
-                          <Input
-                            type={showKeys[provider.id] ? 'text' : 'password'}
-                            placeholder={`Enter ${provider.name} API key...`}
-                            value={apiKeys[provider.id as keyof ApiKeyState]}
-                            onChange={(e) =>
-                              setApiKeys((prev) => ({
-                                ...prev,
-                                [provider.id]: e.target.value,
-                              }))
-                            }
-                            className="pr-10"
-                          />
-                          <button
-                            type="button"
-                            onClick={() => toggleShowKey(provider.id)}
-                            className="absolute right-2 top-1/2 -translate-y-1/2 text-dark-400 hover:text-dark-200"
-                          >
-                            {showKeys[provider.id] ? (
-                              <EyeOff className="w-4 h-4" />
-                            ) : (
-                              <Eye className="w-4 h-4" />
-                            )}
-                          </button>
-                        </div>
-                        <Button
-                          size="sm"
-                          variant="primary"
-                          onClick={() => handleSaveApiKey(provider.id)}
-                          disabled={!apiKeys[provider.id as keyof ApiKeyState]}
-                        >
-                          Save
-                        </Button>
-                      </div>
-                    </div>
-                  );
-                })}
-              </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 className="bg-gray-800/50 backdrop-blur-sm border border-gray-700/50 rounded-xl p-5">
+              <div className="flex items-center gap-2 text-sm font-semibold text-white mb-4">
+                <Server className="w-4 h-4 text-cyan-400" />
+                Connection Settings
               </div>
-              <div className="space-y-3">
+              <div className="space-y-4">
                 <Toggle
                   label="WebSocket Updates"
                   description="Enable real-time episode updates"
@@ -278,16 +221,6 @@ export const Settings: React.FC<SettingsProps> = ({ className }) => {
                     setLocalSettings((prev) => ({ ...prev, enableWebSocket: checked }));
                   }}
                 />
-              </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"
@@ -298,42 +231,88 @@ export const Settings: React.FC<SettingsProps> = ({ className }) => {
                 />
               </div>
             </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) => {
-                    setLocalSettings((prev) => ({
-                      ...prev,
-                      screenshotQuality: parseInt(e.target.value),
-                    }));
-                  }}
-                  hint={`Quality: ${localSettings.screenshotQuality ?? 80}%`}
-                />
-              </div>
+          {/* Right Column - API Keys */}
+          <div className="bg-gray-800/50 backdrop-blur-sm border border-gray-700/50 rounded-xl p-5">
+            <div className="flex items-center gap-2 text-sm font-semibold text-white mb-2">
+              <Key className="w-4 h-4 text-amber-400" />
+              API Keys
+            </div>
+            <p className="text-xs text-gray-400 mb-5">
+              Configure your API keys. Server keys are used by default, but you can override them here.
+            </p>
+            
+            <div className="space-y-4">
+              {providers.map((provider) => {
+                const isConfigured = settingsData?.api_keys_configured?.[provider.id] ?? false;
+                return (
+                  <div key={provider.id} className="p-4 bg-gray-900/50 border border-gray-700/30 rounded-xl">
+                    <div className="flex items-center justify-between mb-3">
+                      <div className="flex items-center gap-3">
+                        <span className="text-2xl">{provider.icon}</span>
+                        <div>
+                          <span className="text-sm font-medium text-white">
+                            {provider.name}
+                          </span>
+                          <p className="text-xs text-gray-500">{provider.description}</p>
+                        </div>
+                      </div>
+                      <Badge variant={isConfigured ? 'success' : 'warning'} size="sm">
+                        {isConfigured ? 'Active' : 'Not Set'}
+                      </Badge>
+                    </div>
+                    <div className="flex gap-2">
+                      <div className="flex-1 relative">
+                        <Input
+                          type={showKeys[provider.id] ? 'text' : 'password'}
+                          placeholder={`Enter ${provider.name} API key...`}
+                          value={apiKeys[provider.id as keyof ApiKeyState]}
+                          onChange={(e) =>
+                            setApiKeys((prev) => ({
+                              ...prev,
+                              [provider.id]: e.target.value,
+                            }))
+                          }
+                          className="pr-10"
+                        />
+                        <button
+                          type="button"
+                          onClick={() => toggleShowKey(provider.id)}
+                          className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-300 transition-colors"
+                        >
+                          {showKeys[provider.id] ? (
+                            <EyeOff className="w-4 h-4" />
+                          ) : (
+                            <Eye className="w-4 h-4" />
+                          )}
+                        </button>
+                      </div>
+                      <Button
+                        size="sm"
+                        variant="primary"
+                        onClick={() => handleSaveApiKey(provider.id)}
+                        disabled={!apiKeys[provider.id as keyof ApiKeyState]}
+                      >
+                        Save
+                      </Button>
+                    </div>
+                  </div>
+                );
+              })}
             </div>
 
             {/* Status Messages */}
             {updateApiKeyMutation.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">API key saved successfully</span>
+              <div className="flex items-center gap-2 mt-4 p-3 bg-emerald-500/10 border border-emerald-500/30 rounded-lg">
+                <CheckCircle className="w-4 h-4 text-emerald-400" />
+                <span className="text-sm text-emerald-400">API key saved successfully</span>
               </div>
             )}
           </div>
-        )}
-      </CardContent>
-    </Card>
+        </div>
+      )}
+    </div>
   );
 };
 

frontend/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/app.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/api/client.ts","./src/components/actionpanel.tsx","./src/components/agentview.tsx","./src/components/dashboard.tsx","./src/components/episodepanel.tsx","./src/components/memorypanel.tsx","./src/components/observationview.tsx","./src/components/rewardchart.tsx","./src/components/settings.tsx","./src/components/toolregistry.tsx","./src/components/ui/badge.tsx","./src/components/ui/button.tsx","./src/components/ui/card.tsx","./src/components/ui/input.tsx","./src/components/ui/select.tsx","./src/hooks/useagents.ts","./src/hooks/useepisode.ts","./src/hooks/usememory.ts","./src/hooks/usewebsocket.ts","./src/types/index.ts","./src/utils/helpers.ts"],"version":"5.6.3"}
+{"root":["./src/app.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/api/client.ts","./src/components/actionpanel.tsx","./src/components/agentview.tsx","./src/components/dashboard.tsx","./src/components/episodepanel.tsx","./src/components/memorypanel.tsx","./src/components/observationview.tsx","./src/components/pluginspage.tsx","./src/components/rewardchart.tsx","./src/components/settings.tsx","./src/components/toolregistry.tsx","./src/components/ui/badge.tsx","./src/components/ui/button.tsx","./src/components/ui/card.tsx","./src/components/ui/input.tsx","./src/components/ui/select.tsx","./src/hooks/useagents.ts","./src/hooks/useepisode.ts","./src/hooks/usememory.ts","./src/hooks/usewebsocket.ts","./src/test/components.test.tsx","./src/test/helpers.test.ts","./src/test/setup.ts","./src/types/index.ts","./src/utils/helpers.ts"],"version":"5.6.3"}