feat: add modular plugin system for extensions

backend/app/api/routes/plugins.py

@@ -0,0 +1,410 @@
+"""Plugin management API routes."""
+
+from typing import Any
+
+from fastapi import APIRouter, HTTPException
+from pydantic import BaseModel, Field
+
+router = APIRouter(prefix="/plugins", tags=["plugins"])
+
+# Plugin registry - available plugins
+PLUGIN_REGISTRY = {
+    # API Providers
+    "apis": [
+        {
+            "id": "openai-api",
+            "name": "OpenAI API",
+            "category": "apis",
+            "description": "GPT-4, GPT-4o, and embedding models",
+            "version": "1.0.0",
+            "size": "50KB",
+            "installed": False,
+            "requires_key": True,
+        },
+        {
+            "id": "anthropic-api",
+            "name": "Anthropic API",
+            "category": "apis",
+            "description": "Claude 3.5 Sonnet and Opus models",
+            "version": "1.0.0",
+            "size": "45KB",
+            "installed": False,
+            "requires_key": True,
+        },
+        {
+            "id": "google-api",
+            "name": "Google Gemini API",
+            "category": "apis",
+            "description": "Gemini Pro and Flash models",
+            "version": "1.0.0",
+            "size": "48KB",
+            "installed": True,  # Pre-installed
+            "requires_key": True,
+        },
+        {
+            "id": "groq-api",
+            "name": "Groq API",
+            "category": "apis",
+            "description": "Fast inference for open models",
+            "version": "1.0.0",
+            "size": "40KB",
+            "installed": True,  # Pre-installed
+            "requires_key": True,
+        },
+        {
+            "id": "ollama-api",
+            "name": "Ollama (Local)",
+            "category": "apis",
+            "description": "Run models locally with Ollama",
+            "version": "1.0.0",
+            "size": "35KB",
+            "installed": False,
+            "requires_key": False,
+        },
+    ],
+    # MCP Tools
+    "mcps": [
+        {
+            "id": "mcp-browser",
+            "name": "Browser Tools",
+            "category": "mcps",
+            "description": "Playwright-based browser automation",
+            "version": "1.0.0",
+            "size": "120KB",
+            "installed": True,
+            "requires_key": False,
+        },
+        {
+            "id": "mcp-search",
+            "name": "Search Tools",
+            "category": "mcps",
+            "description": "Google, Bing, DuckDuckGo search",
+            "version": "1.0.0",
+            "size": "80KB",
+            "installed": True,
+            "requires_key": False,
+        },
+        {
+            "id": "mcp-html",
+            "name": "HTML Processing",
+            "category": "mcps",
+            "description": "Parse, extract, and transform HTML",
+            "version": "1.0.0",
+            "size": "60KB",
+            "installed": True,
+            "requires_key": False,
+        },
+        {
+            "id": "mcp-screenshot",
+            "name": "Screenshot Tools",
+            "category": "mcps",
+            "description": "Capture and analyze page screenshots",
+            "version": "1.0.0",
+            "size": "90KB",
+            "installed": False,
+            "requires_key": False,
+        },
+        {
+            "id": "mcp-pdf",
+            "name": "PDF Tools",
+            "category": "mcps",
+            "description": "Extract data from PDF documents",
+            "version": "1.0.0",
+            "size": "150KB",
+            "installed": False,
+            "requires_key": False,
+        },
+        {
+            "id": "mcp-database",
+            "name": "Database Tools",
+            "category": "mcps",
+            "description": "Connect to SQL/NoSQL databases",
+            "version": "1.0.0",
+            "size": "100KB",
+            "installed": False,
+            "requires_key": False,
+        },
+    ],
+    # Skills/Agents
+    "skills": [
+        {
+            "id": "skill-planner",
+            "name": "Planner Agent",
+            "category": "skills",
+            "description": "Strategic task planning",
+            "version": "1.0.0",
+            "size": "75KB",
+            "installed": True,
+            "requires_key": False,
+        },
+        {
+            "id": "skill-navigator",
+            "name": "Navigator Agent",
+            "category": "skills",
+            "description": "Web navigation and interaction",
+            "version": "1.0.0",
+            "size": "85KB",
+            "installed": True,
+            "requires_key": False,
+        },
+        {
+            "id": "skill-extractor",
+            "name": "Extractor Agent",
+            "category": "skills",
+            "description": "Data extraction and parsing",
+            "version": "1.0.0",
+            "size": "95KB",
+            "installed": True,
+            "requires_key": False,
+        },
+        {
+            "id": "skill-verifier",
+            "name": "Verifier Agent",
+            "category": "skills",
+            "description": "Data validation and verification",
+            "version": "1.0.0",
+            "size": "70KB",
+            "installed": True,
+            "requires_key": False,
+        },
+        {
+            "id": "skill-captcha",
+            "name": "Captcha Solver",
+            "category": "skills",
+            "description": "Solve CAPTCHAs and challenges",
+            "version": "1.0.0",
+            "size": "200KB",
+            "installed": False,
+            "requires_key": True,
+        },
+        {
+            "id": "skill-stealth",
+            "name": "Stealth Mode",
+            "category": "skills",
+            "description": "Anti-detection and fingerprint masking",
+            "version": "1.0.0",
+            "size": "180KB",
+            "installed": False,
+            "requires_key": False,
+        },
+    ],
+    # Data Processors
+    "processors": [
+        {
+            "id": "proc-json",
+            "name": "JSON Processor",
+            "category": "processors",
+            "description": "Parse and transform JSON data",
+            "version": "1.0.0",
+            "size": "25KB",
+            "installed": True,
+            "requires_key": False,
+        },
+        {
+            "id": "proc-csv",
+            "name": "CSV Processor",
+            "category": "processors",
+            "description": "Parse and export CSV files",
+            "version": "1.0.0",
+            "size": "30KB",
+            "installed": True,
+            "requires_key": False,
+        },
+        {
+            "id": "proc-excel",
+            "name": "Excel Processor",
+            "category": "processors",
+            "description": "Read/write Excel files",
+            "version": "1.0.0",
+            "size": "500KB",
+            "installed": False,
+            "requires_key": False,
+        },
+        {
+            "id": "proc-xml",
+            "name": "XML Processor",
+            "category": "processors",
+            "description": "Parse and transform XML data",
+            "version": "1.0.0",
+            "size": "40KB",
+            "installed": False,
+            "requires_key": False,
+        },
+    ],
+}
+
+# Track installed plugins (in-memory, would be persistent in production)
+_installed_plugins: set[str] = {
+    "google-api",
+    "groq-api",
+    "mcp-browser",
+    "mcp-search",
+    "mcp-html",
+    "skill-planner",
+    "skill-navigator",
+    "skill-extractor",
+    "skill-verifier",
+    "proc-json",
+    "proc-csv",
+}
+
+
+class PluginAction(BaseModel):
+    """Request to install/uninstall a plugin."""
+
+    plugin_id: str = Field(..., description="Plugin identifier")
+
+
+class PluginResponse(BaseModel):
+    """Plugin information response."""
+
+    id: str
+    name: str
+    category: str
+    description: str
+    version: str
+    size: str
+    installed: bool
+    requires_key: bool
+
+
+@router.get("/")
+async def list_plugins(category: str | None = None) -> dict[str, Any]:
+    """List all available plugins, optionally filtered by category."""
+    result = {}
+
+    for cat, plugins in PLUGIN_REGISTRY.items():
+        if category and cat != category:
+            continue
+
+        result[cat] = [
+            {**plugin, "installed": plugin["id"] in _installed_plugins} for plugin in plugins
+        ]
+
+    # Calculate stats
+    total = sum(len(plugins) for plugins in PLUGIN_REGISTRY.values())
+    installed = len(_installed_plugins)
+
+    return {
+        "plugins": result,
+        "categories": list(PLUGIN_REGISTRY.keys()),
+        "stats": {
+            "total": total,
+            "installed": installed,
+            "available": total - installed,
+        },
+    }
+
+
+@router.get("/installed")
+async def list_installed_plugins() -> dict[str, Any]:
+    """List only installed plugins."""
+    installed = []
+
+    for plugins in PLUGIN_REGISTRY.values():
+        for plugin in plugins:
+            if plugin["id"] in _installed_plugins:
+                installed.append({**plugin, "installed": True})
+
+    return {
+        "plugins": installed,
+        "count": len(installed),
+    }
+
+
+@router.get("/{plugin_id}")
+async def get_plugin(plugin_id: str) -> PluginResponse:
+    """Get details about a specific plugin."""
+    for plugins in PLUGIN_REGISTRY.values():
+        for plugin in plugins:
+            if plugin["id"] == plugin_id:
+                return PluginResponse(**{**plugin, "installed": plugin_id in _installed_plugins})
+
+    raise HTTPException(status_code=404, detail=f"Plugin not found: {plugin_id}")
+
+
+@router.post("/install")
+async def install_plugin(action: PluginAction) -> dict[str, Any]:
+    """Install a plugin."""
+    plugin_id = action.plugin_id
+
+    # Find the plugin
+    plugin = None
+    for plugins in PLUGIN_REGISTRY.values():
+        for p in plugins:
+            if p["id"] == plugin_id:
+                plugin = p
+                break
+
+    if not plugin:
+        raise HTTPException(status_code=404, detail=f"Plugin not found: {plugin_id}")
+
+    if plugin_id in _installed_plugins:
+        return {
+            "status": "already_installed",
+            "message": f"Plugin {plugin['name']} is already installed",
+            "plugin": {**plugin, "installed": True},
+        }
+
+    # Install the plugin (in production, this would download/configure)
+    _installed_plugins.add(plugin_id)
+
+    return {
+        "status": "success",
+        "message": f"Plugin {plugin['name']} installed successfully",
+        "plugin": {**plugin, "installed": True},
+    }
+
+
+@router.post("/uninstall")
+async def uninstall_plugin(action: PluginAction) -> dict[str, Any]:
+    """Uninstall a plugin."""
+    plugin_id = action.plugin_id
+
+    # Find the plugin
+    plugin = None
+    for plugins in PLUGIN_REGISTRY.values():
+        for p in plugins:
+            if p["id"] == plugin_id:
+                plugin = p
+                break
+
+    if not plugin:
+        raise HTTPException(status_code=404, detail=f"Plugin not found: {plugin_id}")
+
+    if plugin_id not in _installed_plugins:
+        return {
+            "status": "not_installed",
+            "message": f"Plugin {plugin['name']} is not installed",
+            "plugin": {**plugin, "installed": False},
+        }
+
+    # Check if it's a core plugin
+    core_plugins = {"mcp-browser", "mcp-search", "mcp-html", "skill-planner", "skill-navigator", "skill-extractor", "skill-verifier", "proc-json"}
+    if plugin_id in core_plugins:
+        raise HTTPException(
+            status_code=400,
+            detail=f"Cannot uninstall core plugin: {plugin['name']}",
+        )
+
+    # Uninstall the plugin
+    _installed_plugins.discard(plugin_id)
+
+    return {
+        "status": "success",
+        "message": f"Plugin {plugin['name']} uninstalled successfully",
+        "plugin": {**plugin, "installed": False},
+    }
+
+
+@router.get("/categories")
+async def get_categories() -> dict[str, Any]:
+    """Get plugin categories with descriptions."""
+    return {
+        "categories": [
+            {"id": "apis", "name": "API Providers", "description": "LLM and AI service providers", "icon": "🔌"},
+            {"id": "mcps", "name": "MCP Tools", "description": "Model Context Protocol tools", "icon": "🔧"},
+            {"id": "skills", "name": "Skills/Agents", "description": "Specialized agent capabilities", "icon": "🤖"},
+            {"id": "processors", "name": "Data Processors", "description": "Data transformation tools", "icon": "📊"},
+        ],
+    }

backend/tests/test_api/test_plugins.py

@@ -0,0 +1,339 @@
+"""Tests for plugins API routes."""
+
+import pytest
+from fastapi.testclient import TestClient
+
+
+class TestPluginsAPI:
+    """Test plugins API endpoints."""
+
+    def test_list_all_plugins(self, client: TestClient) -> None:
+        """Test GET /api/plugins returns all plugins."""
+        response = client.get("/api/plugins")
+        
+        assert response.status_code == 200
+        data = response.json()
+        
+        # Check response structure
+        assert "plugins" in data
+        assert "categories" in data
+        assert "stats" in data
+        
+        # Check stats structure
+        stats = data["stats"]
+        assert "total" in stats
+        assert "installed" in stats
+        assert "available" in stats
+        assert stats["total"] >= 0
+        assert stats["installed"] >= 0
+        assert stats["available"] >= 0
+
+    def test_list_plugins_by_category(self, client: TestClient) -> None:
+        """Test GET /api/plugins?category=apis filters by category."""
+        response = client.get("/api/plugins?category=apis")
+        
+        assert response.status_code == 200
+        data = response.json()
+        
+        # Should only contain the filtered category
+        plugins = data["plugins"]
+        if "apis" in plugins:
+            # All plugins in the response should be from apis category
+            for plugin in plugins["apis"]:
+                assert plugin["category"] == "apis"
+
+    def test_list_installed_plugins(self, client: TestClient) -> None:
+        """Test GET /api/plugins/installed returns only installed plugins."""
+        response = client.get("/api/plugins/installed")
+        
+        assert response.status_code == 200
+        data = response.json()
+        
+        assert "plugins" in data
+        assert "count" in data
+        
+        # All returned plugins should be installed
+        for plugin in data["plugins"]:
+            assert plugin["installed"] is True
+        
+        # Count should match number of plugins
+        assert data["count"] == len(data["plugins"])
+
+    def test_get_specific_plugin_exists(self, client: TestClient) -> None:
+        """Test GET /api/plugins/{plugin_id} for existing plugin."""
+        # First get list of plugins to find a valid ID
+        list_response = client.get("/api/plugins")
+        assert list_response.status_code == 200
+        
+        plugins_data = list_response.json()
+        
+        # Find first plugin from any category
+        plugin_id = None
+        for category, plugins in plugins_data["plugins"].items():
+            if plugins:
+                plugin_id = plugins[0]["id"]
+                break
+        
+        if plugin_id:
+            response = client.get(f"/api/plugins/{plugin_id}")
+            assert response.status_code == 200
+            
+            data = response.json()
+            assert data["id"] == plugin_id
+            assert "name" in data
+            assert "category" in data
+            assert "installed" in data
+
+    def test_get_nonexistent_plugin(self, client: TestClient) -> None:
+        """Test GET /api/plugins/{plugin_id} for non-existent plugin."""
+        response = client.get("/api/plugins/nonexistent-plugin")
+        
+        assert response.status_code == 404
+        data = response.json()
+        assert "not found" in data["detail"].lower()
+
+    def test_install_plugin_success(self, client: TestClient) -> None:
+        """Test POST /api/plugins/install for valid plugin."""
+        # First get a plugin that's not installed
+        list_response = client.get("/api/plugins")
+        assert list_response.status_code == 200
+        
+        plugins_data = list_response.json()
+        
+        # Find an uninstalled plugin
+        plugin_id = None
+        for category, plugins in plugins_data["plugins"].items():
+            for plugin in plugins:
+                if not plugin["installed"]:
+                    plugin_id = plugin["id"]
+                    break
+            if plugin_id:
+                break
+        
+        if plugin_id:
+            payload = {"plugin_id": plugin_id}
+            response = client.post("/api/plugins/install", json=payload)
+            
+            assert response.status_code == 200
+            data = response.json()
+            
+            assert data["status"] == "success"
+            assert data["plugin"]["id"] == plugin_id
+            assert data["plugin"]["installed"] is True
+            assert "installed successfully" in data["message"]
+
+    def test_install_already_installed_plugin(self, client: TestClient) -> None:
+        """Test installing a plugin that's already installed."""
+        # First install a plugin
+        list_response = client.get("/api/plugins")
+        assert list_response.status_code == 200
+        
+        plugins_data = list_response.json()
+        
+        # Find an uninstalled plugin to install first
+        plugin_id = None
+        for category, plugins in plugins_data["plugins"].items():
+            for plugin in plugins:
+                if not plugin["installed"]:
+                    plugin_id = plugin["id"]
+                    break
+            if plugin_id:
+                break
+        
+        if plugin_id:
+            # Install it
+            payload = {"plugin_id": plugin_id}
+            response = client.post("/api/plugins/install", json=payload)
+            assert response.status_code == 200
+            
+            # Try to install again
+            response = client.post("/api/plugins/install", json=payload)
+            assert response.status_code == 200
+            
+            data = response.json()
+            assert data["status"] == "already_installed"
+            assert "already installed" in data["message"]
+
+    def test_install_nonexistent_plugin(self, client: TestClient) -> None:
+        """Test installing a non-existent plugin."""
+        payload = {"plugin_id": "nonexistent-plugin"}
+        response = client.post("/api/plugins/install", json=payload)
+        
+        assert response.status_code == 404
+        data = response.json()
+        assert "not found" in data["detail"].lower()
+
+    def test_uninstall_plugin_success(self, client: TestClient) -> None:
+        """Test POST /api/plugins/uninstall for installed non-core plugin."""
+        # First install a non-core plugin
+        list_response = client.get("/api/plugins")
+        assert list_response.status_code == 200
+        
+        plugins_data = list_response.json()
+        
+        # Find a non-core plugin to install and then uninstall
+        core_plugins = {"mcp-browser", "mcp-search", "mcp-html", "skill-planner", "skill-navigator", "skill-extractor", "skill-verifier", "proc-json"}
+        plugin_id = None
+        
+        for category, plugins in plugins_data["plugins"].items():
+            for plugin in plugins:
+                if plugin["id"] not in core_plugins and not plugin["installed"]:
+                    plugin_id = plugin["id"]
+                    break
+            if plugin_id:
+                break
+        
+        if plugin_id:
+            # Install it first
+            install_payload = {"plugin_id": plugin_id}
+            install_response = client.post("/api/plugins/install", json=install_payload)
+            assert install_response.status_code == 200
+            
+            # Now uninstall it
+            uninstall_payload = {"plugin_id": plugin_id}
+            response = client.post("/api/plugins/uninstall", json=uninstall_payload)
+            
+            assert response.status_code == 200
+            data = response.json()
+            
+            assert data["status"] == "success"
+            assert data["plugin"]["id"] == plugin_id
+            assert data["plugin"]["installed"] is False
+            assert "uninstalled successfully" in data["message"]
+
+    def test_uninstall_core_plugin_forbidden(self, client: TestClient) -> None:
+        """Test uninstalling core plugin is forbidden."""
+        # Try to uninstall a core plugin
+        core_plugin_id = "mcp-browser"  # This should be a core plugin
+        payload = {"plugin_id": core_plugin_id}
+        
+        response = client.post("/api/plugins/uninstall", json=payload)
+        
+        assert response.status_code == 400
+        data = response.json()
+        assert "Cannot uninstall core plugin" in data["detail"]
+
+    def test_uninstall_not_installed_plugin(self, client: TestClient) -> None:
+        """Test uninstalling a plugin that's not installed."""
+        # Find an uninstalled non-core plugin
+        list_response = client.get("/api/plugins")
+        assert list_response.status_code == 200
+        
+        plugins_data = list_response.json()
+        core_plugins = {"mcp-browser", "mcp-search", "mcp-html", "skill-planner", "skill-navigator", "skill-extractor", "skill-verifier", "proc-json"}
+        
+        plugin_id = None
+        for category, plugins in plugins_data["plugins"].items():
+            for plugin in plugins:
+                if plugin["id"] not in core_plugins and not plugin["installed"]:
+                    plugin_id = plugin["id"]
+                    break
+            if plugin_id:
+                break
+        
+        if plugin_id:
+            payload = {"plugin_id": plugin_id}
+            response = client.post("/api/plugins/uninstall", json=payload)
+            
+            assert response.status_code == 200
+            data = response.json()
+            assert data["status"] == "not_installed"
+            assert "not installed" in data["message"]
+
+    def test_uninstall_nonexistent_plugin(self, client: TestClient) -> None:
+        """Test uninstalling a non-existent plugin."""
+        payload = {"plugin_id": "nonexistent-plugin"}
+        response = client.post("/api/plugins/uninstall", json=payload)
+        
+        assert response.status_code == 404
+        data = response.json()
+        assert "not found" in data["detail"].lower()
+
+    def test_get_categories(self, client: TestClient) -> None:
+        """Test that plugins list includes categories."""
+        response = client.get("/api/plugins")
+        
+        assert response.status_code == 200
+        data = response.json()
+        
+        assert "categories" in data
+        categories = data["categories"]
+        
+        assert isinstance(categories, list)
+        assert len(categories) > 0
+        
+        # Categories are returned as strings (category IDs)
+        expected_categories = ["apis", "mcps", "skills", "processors"]
+        for expected in expected_categories:
+            assert expected in categories
+
+    def test_plugin_structure_validation(self, client: TestClient) -> None:
+        """Test that all plugins have required fields."""
+        response = client.get("/api/plugins")
+        assert response.status_code == 200
+        
+        data = response.json()
+        
+        required_fields = ["id", "name", "category", "description", "version", "installed"]
+        
+        for category, plugins in data["plugins"].items():
+            for plugin in plugins:
+                for field in required_fields:
+                    assert field in plugin, f"Plugin {plugin.get('id', 'unknown')} missing field {field}"
+
+    def test_install_uninstall_payload_validation(self, client: TestClient) -> None:
+        """Test payload validation for install/uninstall endpoints."""
+        # Missing plugin_id for install
+        response = client.post("/api/plugins/install", json={})
+        assert response.status_code == 422
+        
+        # Missing plugin_id for uninstall
+        response = client.post("/api/plugins/uninstall", json={})
+        assert response.status_code == 422
+        
+        # Invalid payload type
+        response = client.post("/api/plugins/install", json={"plugin_id": 123})
+        assert response.status_code == 422
+
+    def test_plugins_state_persistence(self, client: TestClient) -> None:
+        """Test that plugin installation state persists across calls."""
+        # Find a non-core plugin
+        list_response = client.get("/api/plugins")
+        assert list_response.status_code == 200
+        
+        plugins_data = list_response.json()
+        core_plugins = {"mcp-browser", "mcp-search", "mcp-html", "skill-planner", "skill-navigator", "skill-extractor", "skill-verifier", "proc-json"}
+        
+        plugin_id = None
+        for category, plugins in plugins_data["plugins"].items():
+            for plugin in plugins:
+                if plugin["id"] not in core_plugins:
+                    plugin_id = plugin["id"]
+                    break
+            if plugin_id:
+                break
+        
+        if plugin_id:
+            # Check initial state
+            response = client.get(f"/api/plugins/{plugin_id}")
+            initial_state = response.json()["installed"]
+            
+            # Toggle state by installing if not installed, or uninstalling if installed and not core
+            if not initial_state:
+                payload = {"plugin_id": plugin_id}
+                response = client.post("/api/plugins/install", json=payload)
+                assert response.status_code == 200
+                
+                # Verify state changed
+                response = client.get(f"/api/plugins/{plugin_id}")
+                assert response.json()["installed"] is True
+            else:
+                # If already installed and not core, uninstall
+                if plugin_id not in core_plugins:
+                    payload = {"plugin_id": plugin_id}
+                    response = client.post("/api/plugins/uninstall", json=payload)
+                    assert response.status_code == 200
+                    
+                    # Verify state changed
+                    response = client.get(f"/api/plugins/{plugin_id}")
+                    assert response.json()["installed"] is False

frontend/src/App.tsx

@@ -1,7 +1,10 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { BrowserRouter, Routes, Route, Link, useLocation } from 'react-router-dom';
+import { Home, Settings as SettingsIcon, Package } from 'lucide-react';
 import Dashboard from './components/Dashboard';
 import Settings from './components/Settings';
+import PluginsPage from './components/PluginsPage';
+import { classNames } from './utils/helpers';
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -12,15 +15,58 @@ const queryClient = new QueryClient({
   },
 });
 
+function NavBar() {
+  const location = useLocation();
+
+  const navItems = [
+    { path: '/', label: 'Dashboard', icon: Home },
+    { path: '/plugins', label: 'Plugins', icon: Package },
+    { path: '/settings', label: 'Settings', icon: SettingsIcon },
+  ];
+
+  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>
+          </div>
+          <div className="flex items-center gap-1">
+            {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',
+                  location.pathname === path
+                    ? 'bg-primary-500/20 text-primary-400'
+                    : 'text-dark-300 hover:text-dark-100 hover:bg-dark-800'
+                )}
+              >
+                <Icon className="w-4 h-4" />
+                {label}
+              </Link>
+            ))}
+          </div>
+        </div>
+      </div>
+    </nav>
+  );
+}
+
 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>
+          <NavBar />
+          <main className="max-w-7xl mx-auto px-4 py-6">
+            <Routes>
+              <Route path="/" element={<Dashboard />} />
+              <Route path="/plugins" element={<PluginsPage />} />
+              <Route path="/settings" element={<Settings />} />
+            </Routes>
+          </main>
         </div>
       </BrowserRouter>
     </QueryClientProvider>

frontend/src/components/PluginsPage.tsx

@@ -0,0 +1,354 @@
+import React, { useState } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import {
+  Package,
+  Download,
+  Trash2,
+  Search,
+  Filter,
+  CheckCircle,
+  AlertCircle,
+  Loader2,
+  Plug,
+  Cpu,
+  Wrench,
+  Database,
+} 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';
+
+interface Plugin {
+  id: string;
+  name: string;
+  category: string;
+  description: string;
+  version: string;
+  size: string;
+  installed: boolean;
+  requires_key: boolean;
+}
+
+interface Category {
+  id: string;
+  name: string;
+  description: string;
+  icon: string;
+}
+
+interface PluginsResponse {
+  plugins: Record<string, Plugin[]>;
+  categories: string[];
+  stats: {
+    total: number;
+    installed: number;
+    available: number;
+  };
+}
+
+interface PluginsPageProps {
+  className?: string;
+}
+
+const getCategoryIcon = (category: string) => {
+  switch (category) {
+    case 'apis':
+      return <Plug className="w-5 h-5" />;
+    case 'mcps':
+      return <Wrench className="w-5 h-5" />;
+    case 'skills':
+      return <Cpu className="w-5 h-5" />;
+    case 'processors':
+      return <Database className="w-5 h-5" />;
+    default:
+      return <Package className="w-5 h-5" />;
+  }
+};
+
+const getCategoryLabel = (category: string) => {
+  const labels: Record<string, string> = {
+    apis: 'API Providers',
+    mcps: 'MCP Tools',
+    skills: 'Skills/Agents',
+    processors: 'Data Processors',
+  };
+  return labels[category] || category;
+};
+
+export const PluginsPage: React.FC<PluginsPageProps> = ({ className }) => {
+  const queryClient = useQueryClient();
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
+  const [showInstalled, setShowInstalled] = useState(false);
+
+  // Fetch plugins
+  const { data: pluginsData, isLoading } = useQuery<PluginsResponse>({
+    queryKey: ['plugins'],
+    queryFn: async () => {
+      const res = await fetch('/api/plugins/');
+      return res.json();
+    },
+  });
+
+  // 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) => {
+      const res = await fetch('/api/plugins/install', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ plugin_id: pluginId }),
+      });
+      return res.json();
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['plugins'] });
+    },
+  });
+
+  // Uninstall plugin mutation
+  const uninstallMutation = useMutation({
+    mutationFn: async (pluginId: string) => {
+      const res = await fetch('/api/plugins/uninstall', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ plugin_id: pluginId }),
+      });
+      if (!res.ok) {
+        const error = await res.json();
+        throw new Error(error.detail);
+      }
+      return res.json();
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['plugins'] });
+    },
+  });
+
+  // Filter plugins
+  const getFilteredPlugins = () => {
+    if (!pluginsData?.plugins) return {};
+
+    const result: Record<string, Plugin[]> = {};
+
+    for (const [category, plugins] of Object.entries(pluginsData.plugins)) {
+      if (selectedCategory && category !== selectedCategory) continue;
+
+      const filtered = plugins.filter((plugin) => {
+        const matchesSearch =
+          !searchQuery ||
+          plugin.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+          plugin.description.toLowerCase().includes(searchQuery.toLowerCase());
+
+        const matchesInstalled = !showInstalled || plugin.installed;
+
+        return matchesSearch && matchesInstalled;
+      });
+
+      if (filtered.length > 0) {
+        result[category] = filtered;
+      }
+    }
+
+    return result;
+  };
+
+  const filteredPlugins = getFilteredPlugins();
+
+  return (
+    <div className={classNames('space-y-6', className)}>
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-dark-100">Plugins</h1>
+          <p className="text-dark-400 mt-1">
+            Extend ScrapeRL with APIs, tools, skills, and processors
+          </p>
+        </div>
+        {pluginsData?.stats && (
+          <div className="flex gap-4 text-sm">
+            <div className="text-center">
+              <div className="text-2xl font-bold text-primary-400">
+                {pluginsData.stats.installed}
+              </div>
+              <div className="text-dark-400">Installed</div>
+            </div>
+            <div className="text-center">
+              <div className="text-2xl font-bold text-dark-300">
+                {pluginsData.stats.available}
+              </div>
+              <div className="text-dark-400">Available</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
+                placeholder="Search plugins..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                leftIcon={<Search className="w-4 h-4" />}
+              />
+            </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" />}
+            >
+              Installed Only
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Plugin List */}
+      {isLoading ? (
+        <div className="flex items-center justify-center py-12">
+          <Loader2 className="w-8 h-8 text-primary-400 animate-spin" />
+        </div>
+      ) : (
+        <div className="space-y-6">
+          {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">
+                  {getCategoryLabel(category)}
+                </h2>
+                <Badge variant="neutral" size="sm">
+                  {plugins.length}
+                </Badge>
+              </div>
+
+              <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>
+                    </CardContent>
+                  </Card>
+                ))}
+              </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">
+                Try adjusting your search or filter criteria
+              </p>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* 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">
+          <AlertCircle className="w-5 h-5 text-red-400" />
+          <span className="text-sm text-red-400">
+            {(uninstallMutation.error as Error).message}
+          </span>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default PluginsPage;