Add dynamic auth configs, connect page, Next.js frontend

.gitignore

@@ -1,7 +1,11 @@
-node_modules
-__pycache__
+node_modules/
+.next/
+out/
+dist/
+__pycache__/
 *.pyc
+.venv/
+*.egg-info/
+backend/static/
+data/
 .env
-dist
-data
-*.db

BUILD.md

@@ -0,0 +1,142 @@
+# Platform - Build & Test Guide
+
+## Architecture
+
+```
+┌─────────────────────────────────────────────────────────┐
+│                    Platform Platform                     │
+│                                                         │
+│  ┌─────────────┐    ┌──────────────┐    ┌────────────┐ │
+│  │   React UI  │◄──►│  FastAPI     │◄──►│  SQLite    │ │
+│  │  (Vite)     │    │  Backend     │    │  Database  │ │
+│  └─────────────┘    └──────┬───────┘    └────────────┘ │
+│                            │                            │
+│                            ▼                            │
+│              ┌─────────────────────────┐                │
+│              │    Composio API         │                │
+│              │  backend.composio.dev   │                │
+│              │  /api/v3.1/toolkits     │                │
+│              │  /api/v3.1/tools        │                │
+│              └─────────────────────────┘                │
+│                            │                            │
+│                            ▼                            │
+│              ┌─────────────────────────┐                │
+│              │    Local Cache          │                │
+│              │  SQLite + JSON backup   │                │
+│              │  (/data/)               │                │
+│              └─────────────────────────┘                │
+└─────────────────────────────────────────────────────────┘
+```
+
+## Local DB System
+
+The platform uses a **dual-layer caching system**:
+
+1. **SQLite Database** (`/data/platform.db`) - Primary store for integrations and tools
+2. **JSON Backup** (`/data/composio_cache.json`) - Raw Composio API response backup
+
+### How it works:
+
+1. **Startup**: Tries to fetch from Composio API
+2. **If API succeeds**: Saves to SQLite + JSON backup
+3. **If API fails**: Loads from JSON backup → seeds SQLite
+4. **If no cache**: Uses minimal fallback definitions (5 integrations)
+
+### Cache TTL: 24 hours (configurable via `CACHE_TTL`)
+
+## Tool Calls Quota
+
+**Good news**: Fetching tools via `GET /api/v3.1/toolkits` and `GET /api/v3.1/tools` **does NOT consume your 20,000 free tool calls**. Only `POST /api/v3.1/tools/execute/{slug}` counts as a tool call.
+
+## Build & Run
+
+### Option 1: Docker (Recommended for HF Spaces)
+
+```bash
+cd /home/runner/workspace/platform
+
+# Set your Composio API key
+export COMPOSIO_API_KEY=sk_your_key_here
+
+# Build
+docker build -t platform .
+
+# Run
+docker run -p 7860:7860 \
+  -v $(pwd)/data:/data \
+  -e COMPOSIO_API_KEY=$COMPOSIO_API_KEY \
+  platform
+```
+
+### Option 2: Direct (Development)
+
+```bash
+cd /home/runner/workspace/platform
+
+# Build frontend
+cd frontend && npm install && npm run build && cd ..
+
+# Install backend deps
+cd backend && pip install -r requirements.txt && cd ..
+
+# Set env vars
+export COMPOSIO_API_KEY=sk_your_key_here
+export DATA_DIR=$(pwd)/data
+
+# Initialize and run
+python -c "from backend.database import init_db; init_db()"
+python backend/integrations/registry.py  # Syncs tools
+cd backend && uvicorn main:app --reload --port 7860
+```
+
+## Test
+
+```bash
+# After starting the server:
+cd /home/runner/workspace/platform
+chmod +x test.sh
+./test.sh
+```
+
+## Hugging Face Spaces Deployment
+
+1. Create a new Docker Space on HF
+2. Push these files to the repo:
+   ```
+   Dockerfile
+   entrypoint.sh
+   backend/
+   frontend/
+   .env.example
+   ```
+3. Add `COMPOSIO_API_KEY` as a Space secret
+4. The Space will auto-build and start on port 7860
+
+## API Endpoints
+
+| Method | Path | Description |
+|--------|------|-------------|
+| GET | `/health` | Health check |
+| GET | `/api/docs` | Swagger UI |
+| POST | `/api/auth/register` | Register user |
+| POST | `/api/auth/login` | Login |
+| GET | `/api/apps` | List integrations |
+| POST | `/api/apps/sync` | Sync from Composio API |
+| GET | `/api/tools` | List tools |
+| POST | `/api/tools/{id}/execute` | Execute tool |
+| POST | `/api/tools/sync` | Sync tools from Composio |
+| GET | `/api/connections` | List connections |
+| GET | `/api/apikeys` | List API keys |
+| GET | `/api/analytics/overview` | Usage stats |
+| GET | `/mcp/v1/discovery` | MCP discovery |
+| GET | `/mcp/v1/tools` | MCP tools list |
+
+## Environment Variables
+
+| Variable | Required | Default | Description |
+|----------|----------|---------|-------------|
+| `COMPOSIO_API_KEY` | No | - | Composio API key for dynamic sync |
+| `COMPOSIO_API_BASE` | No | `https://backend.composio.dev/api/v3.1` | Composio API base URL |
+| `SECRET_KEY` | No | (default) | JWT signing key |
+| `DATA_DIR` | No | `/data` | Data directory |
+| `CACHE_TTL` | No | `86400` | Cache TTL in seconds (24h) |

backend/database.py

@@ -51,6 +51,19 @@ class Integration(Base):
     tools = relationship("Tool", back_populates="integration", cascade="all, delete-orphan")
 
 
+class AuthConfig(Base):
+    """Dynamic credential schema per integration - defines what fields are needed."""
+    __tablename__ = "auth_configs"
+    id = Column(String, primary_key=True, default=lambda: str(uuid4()))
+    integration_id = Column(String, ForeignKey("integrations.id"), nullable=False)
+    auth_type = Column(String, nullable=False)  # oauth2, api_key, bearer, basic
+    fields = Column(JSON, nullable=False)  # [{name, label, type, required, description, default}]
+    oauth_authorize_url = Column(String, nullable=True)
+    oauth_token_url = Column(String, nullable=True)
+    is_active = Column(Boolean, default=True)
+    integration = relationship("Integration")
+
+
 class Connection(Base):
     __tablename__ = "connections"
     id = Column(String, primary_key=True, default=lambda: str(uuid4()))

backend/integrations/registry.py

@@ -249,6 +249,10 @@ class LocalDB:
 
             db.commit()
 
+            # Seed default auth configs for all integrations
+            from backend.routers.auth_configs import seed_default_auth_configs
+            seed_default_auth_configs(db)
+
             # Save JSON backup
             self.save_to_json(toolkits, tools)
 
@@ -339,6 +343,10 @@ def _seed_fallback():
 
         db.commit()
         print(f"[Fallback] Seeded {len(fallback_integrations)} integrations")
+
+        # Also seed auth configs
+        from backend.routers.auth_configs import seed_default_auth_configs
+        seed_default_auth_configs(db)
     finally:
         db.close()
 

backend/main.py

@@ -16,8 +16,8 @@ async def lifespan(app: FastAPI):
 
 
 app = FastAPI(
-    title="Platform API",
-    description="Unified Tool Integration Platform",
+    title="Compost API",
+    description="Unified AI Tool Integration Platform",
     version="1.0.0",
     docs_url="/api/docs",
     redoc_url="/api/redoc",
@@ -33,7 +33,7 @@ app.add_middleware(
 )
 app.add_middleware(GZipMiddleware, minimum_size=1000)
 
-from backend.routers import auth, apps, tools, connections, apikeys, analytics, playground, settings, mcp
+from backend.routers import auth, apps, tools, connections, apikeys, analytics, playground, settings, mcp, auth_configs
 
 app.include_router(auth.router, prefix="/api/auth", tags=["auth"])
 app.include_router(apps.router, prefix="/api/apps", tags=["apps"])
@@ -44,16 +44,20 @@ app.include_router(analytics.router, prefix="/api/analytics", tags=["analytics"]
 app.include_router(playground.router, prefix="/api/playground", tags=["playground"])
 app.include_router(settings.router, prefix="/api/settings", tags=["settings"])
 app.include_router(mcp.router, prefix="/mcp", tags=["mcp"])
+app.include_router(auth_configs.router, prefix="/api/auth-configs", tags=["auth-configs"])
 
 STATIC_DIR = os.path.join(os.path.dirname(__file__), "static")
 
 if os.path.exists(STATIC_DIR):
-    app.mount("/assets", StaticFiles(directory=f"{STATIC_DIR}/assets"), name="assets")
+    app.mount("/_next", StaticFiles(directory=f"{STATIC_DIR}/_next"), name="next-assets")
 
     @app.get("/{full_path:path}")
     async def serve_spa(full_path: str):
         if full_path.startswith("api/") or full_path.startswith("mcp/"):
             return JSONResponse({"detail": "Not found"}, status_code=404)
+        static_file = os.path.join(STATIC_DIR, full_path)
+        if os.path.isfile(static_file):
+            return FileResponse(static_file)
         return FileResponse(os.path.join(STATIC_DIR, "index.html"))
 
     @app.get("/")

backend/routers/auth_configs.py

@@ -0,0 +1,293 @@
+from typing import List, Optional
+from fastapi import APIRouter, Depends, HTTPException
+from sqlalchemy.orm import Session
+from pydantic import BaseModel
+from backend.database import get_db, AuthConfig, Integration
+from backend.auth import get_current_user, User
+
+router = APIRouter()
+
+
+class AuthField(BaseModel):
+    name: str
+    label: str
+    type: str  # text, password, url
+    required: bool = True
+    description: str = ""
+    default: str = ""
+
+
+class AuthConfigCreate(BaseModel):
+    integration_id: str
+    auth_type: str
+    fields: List[AuthField]
+    oauth_authorize_url: Optional[str] = None
+    oauth_token_url: Optional[str] = None
+
+
+class AuthConfigResponse(BaseModel):
+    id: str
+    integration_id: str
+    integration_name: str
+    auth_type: str
+    fields: list
+    oauth_authorize_url: Optional[str]
+    oauth_token_url: Optional[str]
+    is_active: bool
+
+
+@router.get("/integration/{integration_id}", response_model=Optional[AuthConfigResponse])
+async def get_auth_config(integration_id: str, db: Session = Depends(get_db)):
+    config = db.query(AuthConfig).filter(
+        AuthConfig.integration_id == integration_id,
+        AuthConfig.is_active == True
+    ).first()
+    if not config:
+        return None
+    integration = db.query(Integration).filter(Integration.id == integration_id).first()
+    return AuthConfigResponse(
+        id=config.id,
+        integration_id=config.integration_id,
+        integration_name=integration.name if integration else integration_id,
+        auth_type=config.auth_type,
+        fields=config.fields,
+        oauth_authorize_url=config.oauth_authorize_url,
+        oauth_token_url=config.oauth_token_url,
+        is_active=config.is_active
+    )
+
+
+@router.post("", response_model=AuthConfigResponse)
+async def create_auth_config(
+    data: AuthConfigCreate,
+    current_user: User = Depends(get_current_user),
+    db: Session = Depends(get_db)
+):
+    integration = db.query(Integration).filter(Integration.id == data.integration_id).first()
+    if not integration:
+        raise HTTPException(status_code=404, detail="Integration not found")
+
+    existing = db.query(AuthConfig).filter(
+        AuthConfig.integration_id == data.integration_id
+    ).first()
+    if existing:
+        existing.auth_type = data.auth_type
+        existing.fields = [f.model_dump() for f in data.fields]
+        existing.oauth_authorize_url = data.oauth_authorize_url
+        existing.oauth_token_url = data.oauth_token_url
+        config = existing
+    else:
+        config = AuthConfig(
+            integration_id=data.integration_id,
+            auth_type=data.auth_type,
+            fields=[f.model_dump() for f in data.fields],
+            oauth_authorize_url=data.oauth_authorize_url,
+            oauth_token_url=data.oauth_token_url,
+        )
+        db.add(config)
+
+    db.commit()
+    db.refresh(config)
+
+    return AuthConfigResponse(
+        id=config.id,
+        integration_id=config.integration_id,
+        integration_name=integration.name,
+        auth_type=config.auth_type,
+        fields=config.fields,
+        oauth_authorize_url=config.oauth_authorize_url,
+        oauth_token_url=config.oauth_token_url,
+        is_active=config.is_active
+    )
+
+
+@router.get("", response_model=List[AuthConfigResponse])
+async def list_auth_configs(db: Session = Depends(get_db)):
+    configs = db.query(AuthConfig).filter(AuthConfig.is_active == True).all()
+    result = []
+    for c in configs:
+        integration = db.query(Integration).filter(Integration.id == c.integration_id).first()
+        result.append(AuthConfigResponse(
+            id=c.id,
+            integration_id=c.integration_id,
+            integration_name=integration.name if integration else c.integration_id,
+            auth_type=c.auth_type,
+            fields=c.fields,
+            oauth_authorize_url=c.oauth_authorize_url,
+            oauth_token_url=c.oauth_token_url,
+            is_active=c.is_active
+        ))
+    return result
+
+
+def seed_default_auth_configs(db: Session):
+    """Seed default auth configs for all integrations."""
+    defaults = {
+        "github": {
+            "auth_type": "oauth2",
+            "fields": [
+                {"name": "client_id", "label": "Client ID", "type": "text", "required": True, "description": "GitHub OAuth App Client ID"},
+                {"name": "client_secret", "label": "Client Secret", "type": "password", "required": True, "description": "GitHub OAuth App Client Secret"},
+            ],
+            "oauth_authorize_url": "https://github.com/login/oauth/authorize",
+            "oauth_token_url": "https://github.com/login/oauth/access_token",
+        },
+        "gmail": {
+            "auth_type": "oauth2",
+            "fields": [
+                {"name": "client_id", "label": "Client ID", "type": "text", "required": True, "description": "Google OAuth Client ID"},
+                {"name": "client_secret", "label": "Client Secret", "type": "password", "required": True, "description": "Google OAuth Client Secret"},
+            ],
+            "oauth_authorize_url": "https://accounts.google.com/o/oauth2/v2/auth",
+            "oauth_token_url": "https://oauth2.googleapis.com/token",
+        },
+        "google_calendar": {
+            "auth_type": "oauth2",
+            "fields": [
+                {"name": "client_id", "label": "Client ID", "type": "text", "required": True, "description": "Google OAuth Client ID"},
+                {"name": "client_secret", "label": "Client Secret", "type": "password", "required": True, "description": "Google OAuth Client Secret"},
+            ],
+            "oauth_authorize_url": "https://accounts.google.com/o/oauth2/v2/auth",
+            "oauth_token_url": "https://oauth2.googleapis.com/token",
+        },
+        "google_drive": {
+            "auth_type": "oauth2",
+            "fields": [
+                {"name": "client_id", "label": "Client ID", "type": "text", "required": True, "description": "Google OAuth Client ID"},
+                {"name": "client_secret", "label": "Client Secret", "type": "password", "required": True, "description": "Google OAuth Client Secret"},
+            ],
+            "oauth_authorize_url": "https://accounts.google.com/o/oauth2/v2/auth",
+            "oauth_token_url": "https://oauth2.googleapis.com/token",
+        },
+        "slack": {
+            "auth_type": "oauth2",
+            "fields": [
+                {"name": "client_id", "label": "Client ID", "type": "text", "required": True, "description": "Slack App Client ID"},
+                {"name": "client_secret", "label": "Client Secret", "type": "password", "required": True, "description": "Slack App Client Secret"},
+            ],
+            "oauth_authorize_url": "https://slack.com/oauth/v2/authorize",
+            "oauth_token_url": "https://slack.com/api/oauth.v2.access",
+        },
+        "notion": {
+            "auth_type": "oauth2",
+            "fields": [
+                {"name": "client_id", "label": "Client ID", "type": "text", "required": True, "description": "Notion Integration Client ID"},
+                {"name": "client_secret", "label": "Client Secret", "type": "password", "required": True, "description": "Notion Integration Client Secret"},
+            ],
+            "oauth_authorize_url": "https://api.notion.com/v1/oauth/authorize",
+            "oauth_token_url": "https://api.notion.com/v1/oauth/token",
+        },
+        "linear": {
+            "auth_type": "oauth2",
+            "fields": [
+                {"name": "client_id", "label": "Client ID", "type": "text", "required": True, "description": "Linear OAuth Client ID"},
+                {"name": "client_secret", "label": "Client Secret", "type": "password", "required": True, "description": "Linear OAuth Client Secret"},
+            ],
+            "oauth_authorize_url": "https://linear.app/oauth/authorize",
+            "oauth_token_url": "https://api.linear.app/oauth/token",
+        },
+        "discord": {
+            "auth_type": "oauth2",
+            "fields": [
+                {"name": "client_id", "label": "Client ID", "type": "text", "required": True, "description": "Discord App Client ID"},
+                {"name": "client_secret", "label": "Client Secret", "type": "password", "required": True, "description": "Discord App Client Secret"},
+            ],
+            "oauth_authorize_url": "https://discord.com/api/oauth2/authorize",
+            "oauth_token_url": "https://discord.com/api/oauth2/token",
+        },
+        "hubspot": {
+            "auth_type": "oauth2",
+            "fields": [
+                {"name": "client_id", "label": "Client ID", "type": "text", "required": True, "description": "HubSpot App Client ID"},
+                {"name": "client_secret", "label": "Client Secret", "type": "password", "required": True, "description": "HubSpot App Client Secret"},
+            ],
+            "oauth_authorize_url": "https://app.hubspot.com/oauth/authorize",
+            "oauth_token_url": "https://api.hubapi.com/oauth/v1/token",
+        },
+        "stripe": {
+            "auth_type": "api_key",
+            "fields": [
+                {"name": "api_key", "label": "Secret API Key", "type": "password", "required": True, "description": "Stripe Secret API Key (sk_...)"},
+            ],
+        },
+        "salesforce": {
+            "auth_type": "oauth2",
+            "fields": [
+                {"name": "client_id", "label": "Consumer Key", "type": "text", "required": True, "description": "Salesforce Connected App Consumer Key"},
+                {"name": "client_secret", "label": "Consumer Secret", "type": "password", "required": True, "description": "Salesforce Connected App Consumer Secret"},
+            ],
+            "oauth_authorize_url": "https://login.salesforce.com/services/oauth2/authorize",
+            "oauth_token_url": "https://login.salesforce.com/services/oauth2/token",
+        },
+        "airtable": {
+            "auth_type": "api_key",
+            "fields": [
+                {"name": "api_key", "label": "Personal Access Token", "type": "password", "required": True, "description": "Airtable Personal Access Token"},
+            ],
+        },
+        "trello": {
+            "auth_type": "api_key",
+            "fields": [
+                {"name": "api_key", "label": "API Key", "type": "password", "required": True, "description": "Trello API Key"},
+                {"name": "token", "label": "Token", "type": "password", "required": True, "description": "Trello Token"},
+            ],
+        },
+        "asana": {
+            "auth_type": "oauth2",
+            "fields": [
+                {"name": "client_id", "label": "Client ID", "type": "text", "required": True, "description": "Asana App Client ID"},
+                {"name": "client_secret", "label": "Client Secret", "type": "password", "required": True, "description": "Asana App Client Secret"},
+            ],
+            "oauth_authorize_url": "https://app.asana.com/-/oauth_authorize",
+            "oauth_token_url": "https://app.asana.com/-/oauth_token",
+        },
+        "zendesk": {
+            "auth_type": "api_key",
+            "fields": [
+                {"name": "api_key", "label": "API Token", "type": "password", "required": True, "description": "Zendesk API Token"},
+                {"name": "subdomain", "label": "Subdomain", "type": "text", "required": True, "description": "Your Zendesk subdomain"},
+            ],
+        },
+        "twilio": {
+            "auth_type": "api_key",
+            "fields": [
+                {"name": "account_sid", "label": "Account SID", "type": "text", "required": True, "description": "Twilio Account SID"},
+                {"name": "auth_token", "label": "Auth Token", "type": "password", "required": True, "description": "Twilio Auth Token"},
+            ],
+        },
+        "sendgrid": {
+            "auth_type": "api_key",
+            "fields": [
+                {"name": "api_key", "label": "API Key", "type": "password", "required": True, "description": "SendGrid API Key"},
+            ],
+        },
+        "twitter": {
+            "auth_type": "oauth2",
+            "fields": [
+                {"name": "client_id", "label": "Client ID", "type": "text", "required": True, "description": "Twitter App Client ID"},
+                {"name": "client_secret", "label": "Client Secret", "type": "password", "required": True, "description": "Twitter App Client Secret"},
+            ],
+            "oauth_authorize_url": "https://twitter.com/i/oauth2/authorize",
+            "oauth_token_url": "https://api.twitter.com/2/oauth2/token",
+        },
+        "jira": {
+            "auth_type": "api_key",
+            "fields": [
+                {"name": "email", "label": "Email", "type": "text", "required": True, "description": "Atlassian Account Email"},
+                {"name": "api_token", "label": "API Token", "type": "password", "required": True, "description": "Jira API Token"},
+                {"name": "domain", "label": "Domain", "type": "text", "required": True, "description": "Your Jira domain (e.g. yourcompany.atlassian.net)"},
+            ],
+        },
+    }
+
+    for int_id, cfg in defaults.items():
+        existing = db.query(AuthConfig).filter(AuthConfig.integration_id == int_id).first()
+        if not existing:
+            db.add(AuthConfig(
+                integration_id=int_id,
+                auth_type=cfg["auth_type"],
+                fields=cfg["fields"],
+                oauth_authorize_url=cfg.get("oauth_authorize_url"),
+                oauth_token_url=cfg.get("oauth_token_url"),
+            ))
+    db.commit()

backend/routers/connections.py

@@ -2,7 +2,7 @@ from typing import Optional, List
 from fastapi import APIRouter, Depends, HTTPException, Query
 from sqlalchemy.orm import Session
 from pydantic import BaseModel
-from backend.database import get_db, Connection, Integration
+from backend.database import get_db, Connection, Integration, AuthConfig
 from backend.auth import get_current_user, User
 from backend.vault import vault
 from datetime import datetime
@@ -21,11 +21,29 @@ class ConnectionResponse(BaseModel):
     metadata: Optional[dict]
 
 
-class ConnectAPIKeyRequest(BaseModel):
-    api_key: str
+class ConnectRequest(BaseModel):
+    credentials: dict  # Dynamic - matches auth config fields
     account_label: Optional[str] = None
 
 
+@router.get("/auth-config/{integration_id}")
+async def get_connection_auth_config(integration_id: str, db: Session = Depends(get_db)):
+    """Get the auth config for connecting to an integration."""
+    config = db.query(AuthConfig).filter(
+        AuthConfig.integration_id == integration_id,
+        AuthConfig.is_active == True
+    ).first()
+    if not config:
+        raise HTTPException(status_code=404, detail="No auth config found for this integration")
+    return {
+        "integration_id": integration_id,
+        "auth_type": config.auth_type,
+        "fields": config.fields,
+        "oauth_authorize_url": config.oauth_authorize_url,
+        "oauth_token_url": config.oauth_token_url,
+    }
+
+
 @router.get("", response_model=List[ConnectionResponse])
 async def list_connections(
     current_user: User = Depends(get_current_user),
@@ -77,28 +95,42 @@ async def get_connection(
     )
 
 
-@router.post("/apikey")
-async def connect_with_api_key(
-    request: ConnectAPIKeyRequest,
+@router.post("/connect")
+async def connect_integration(
+    request: ConnectRequest,
     integration_id: str = Query(...),
     current_user: User = Depends(get_current_user),
     db: Session = Depends(get_db)
 ):
+    """Connect to an integration with dynamic credentials."""
     integration = db.query(Integration).filter(Integration.id == integration_id).first()
     if not integration:
         raise HTTPException(status_code=404, detail="Integration not found")
-    
-    encrypted = vault.store_credentials({"api_key": request.api_key})
-    
+
+    # Validate auth config exists
+    config = db.query(AuthConfig).filter(
+        AuthConfig.integration_id == integration_id,
+        AuthConfig.is_active == True
+    ).first()
+    if not config:
+        raise HTTPException(status_code=400, detail="No auth config found. Configure credentials first.")
+
+    # Validate required fields
+    for field in config.fields:
+        if field.get("required") and field["name"] not in request.credentials:
+            raise HTTPException(status_code=400, detail=f"Missing required field: {field['label']}")
+
+    encrypted = vault.store_credentials(request.credentials)
+
     import uuid
     connection = Connection(
         id=str(uuid.uuid4()),
         user_id=current_user.id,
         integration_id=integration_id,
-        account_label=request.account_label or f"{integration.name} API",
+        account_label=request.account_label or f"{integration.name}",
         status="active",
         encrypted_credentials=encrypted,
-        conn_metadata={"type": "api_key"}
+        conn_metadata={"auth_type": config.auth_type}
     )
     db.add(connection)
     db.commit()

backend/static/assets/index-DVvq7QG0.css

@@ -1 +0,0 @@
-*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Inter,system-ui,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.btn{display:flex;align-items:center;gap:.5rem;border-radius:.5rem;padding:.5rem 1rem;font-weight:500;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}.btn-primary{--tw-bg-opacity: 1;background-color:rgb(6 182 212 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(15 23 42 / var(--tw-text-opacity, 1))}.btn-primary:hover{--tw-bg-opacity: 1;background-color:rgb(34 211 238 / var(--tw-bg-opacity, 1))}.btn-secondary{--tw-bg-opacity: 1;background-color:rgb(39 39 42 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(244 244 245 / var(--tw-text-opacity, 1))}.btn-secondary:hover{--tw-bg-opacity: 1;background-color:rgb(63 63 70 / var(--tw-bg-opacity, 1))}.btn-ghost{background-color:transparent;--tw-text-opacity: 1;color:rgb(212 212 216 / var(--tw-text-opacity, 1))}.btn-ghost:hover{--tw-bg-opacity: 1;background-color:rgb(39 39 42 / var(--tw-bg-opacity, 1))}.card{border-radius:.75rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(39 39 42 / var(--tw-border-opacity, 1));background-color:#18181b80;padding:1rem}.input{border-radius:.5rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(39 39 42 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(24 24 27 / var(--tw-bg-opacity, 1));padding:.5rem .75rem;--tw-text-opacity: 1;color:rgb(244 244 245 / var(--tw-text-opacity, 1))}.input::-moz-placeholder{--tw-placeholder-opacity: 1;color:rgb(113 113 122 / var(--tw-placeholder-opacity, 1))}.input::placeholder{--tw-placeholder-opacity: 1;color:rgb(113 113 122 / var(--tw-placeholder-opacity, 1))}.input{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.input:focus{--tw-border-opacity: 1;border-color:rgb(6 182 212 / var(--tw-border-opacity, 1));outline:2px solid transparent;outline-offset:2px}.badge{border-radius:9999px;padding:.125rem .5rem;font-size:.75rem;line-height:1rem;font-weight:500}.absolute{position:absolute}.relative{position:relative}.left-3{left:.75rem}.top-1\/2{top:50%}.mx-auto{margin-left:auto;margin-right:auto}.-mb-px{margin-bottom:-1px}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.block{display:block}.flex{display:flex}.table{display:table}.grid{display:grid}.h-10{height:2.5rem}.h-14{height:3.5rem}.h-16{height:4rem}.h-2{height:.5rem}.h-3{height:.75rem}.h-4{height:1rem}.h-48{height:12rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-64{height:16rem}.h-8{height:2rem}.h-\[400px\]{height:400px}.h-full{height:100%}.h-screen{height:100vh}.min-h-screen{min-height:100vh}.w-10{width:2.5rem}.w-16{width:4rem}.w-3{width:.75rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-64{width:16rem}.w-8{width:2rem}.w-full{width:100%}.min-w-0{min-width:0px}.max-w-\[120px\]{max-width:120px}.max-w-md{max-width:28rem}.flex-1{flex:1 1 0%}.-translate-y-1\/2{--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.75rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem * var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse: 0;border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px * var(--tw-divide-y-reverse))}.divide-\[var\(--border\)\]>:not([hidden])~:not([hidden]){border-color:var(--border)}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.break-all{word-break:break-all}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-b-2{border-bottom-width:2px}.border-r{border-right-width:1px}.border-t{border-top-width:1px}.border-\[var\(--border\)\]{border-color:var(--border)}.border-amber-500\/50{border-color:#f59e0b80}.border-cyan-500{--tw-border-opacity: 1;border-color:rgb(6 182 212 / var(--tw-border-opacity, 1))}.border-red-500\/30{border-color:#ef44444d}.border-transparent{border-color:transparent}.bg-\[var\(--bg-primary\)\]{background-color:var(--bg-primary)}.bg-\[var\(--bg-secondary\)\]{background-color:var(--bg-secondary)}.bg-amber-500{--tw-bg-opacity: 1;background-color:rgb(245 158 11 / var(--tw-bg-opacity, 1))}.bg-amber-500\/10{background-color:#f59e0b1a}.bg-amber-500\/5{background-color:#f59e0b0d}.bg-blue-500\/10{background-color:#3b82f61a}.bg-cyan-500{--tw-bg-opacity: 1;background-color:rgb(6 182 212 / var(--tw-bg-opacity, 1))}.bg-cyan-500\/10{background-color:#06b6d41a}.bg-emerald-500{--tw-bg-opacity: 1;background-color:rgb(16 185 129 / var(--tw-bg-opacity, 1))}.bg-emerald-500\/10{background-color:#10b9811a}.bg-red-500\/10{background-color:#ef44441a}.bg-zinc-700{--tw-bg-opacity: 1;background-color:rgb(63 63 70 / var(--tw-bg-opacity, 1))}.bg-zinc-800{--tw-bg-opacity: 1;background-color:rgb(39 39 42 / var(--tw-bg-opacity, 1))}.bg-zinc-800\/50{background-color:#27272a80}.bg-zinc-950{--tw-bg-opacity: 1;background-color:rgb(9 9 11 / var(--tw-bg-opacity, 1))}.p-0{padding:0}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pl-10{padding-left:2.5rem}.pr-4{padding-right:1rem}.pt-3{padding-top:.75rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-2xl{font-size:1.5rem;line-height:2rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.tracking-wider{letter-spacing:.05em}.text-\[var\(--text-muted\)\]{color:var(--text-muted)}.text-\[var\(--text-secondary\)\]{color:var(--text-secondary)}.text-amber-400{--tw-text-opacity: 1;color:rgb(251 191 36 / var(--tw-text-opacity, 1))}.text-blue-400{--tw-text-opacity: 1;color:rgb(96 165 250 / var(--tw-text-opacity, 1))}.text-cyan-400{--tw-text-opacity: 1;color:rgb(34 211 238 / var(--tw-text-opacity, 1))}.text-emerald-400{--tw-text-opacity: 1;color:rgb(52 211 153 / var(--tw-text-opacity, 1))}.text-red-400{--tw-text-opacity: 1;color:rgb(248 113 113 / var(--tw-text-opacity, 1))}.text-slate-900{--tw-text-opacity: 1;color:rgb(15 23 42 / var(--tw-text-opacity, 1))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.placeholder-\[var\(--text-muted\)\]::-moz-placeholder{color:var(--text-muted)}.placeholder-\[var\(--text-muted\)\]::placeholder{color:var(--text-muted)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}:root{--bg-primary: #0a0a0b;--bg-secondary: #111113;--bg-tertiary: #18181b;--bg-hover: #1f1f23;--border: #27272a;--border-hover: #3f3f46;--text-primary: #fafafa;--text-secondary: #a1a1aa;--text-muted: #71717a;--accent: #22d3ee;--accent-hover: #06b6d4;--accent-green: #10b981;--accent-red: #ef4444;--accent-yellow: #f59e0b;--accent-blue: #3b82f6}*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,sans-serif;background-color:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--border-hover)}.last\:border-0:last-child{border-width:0px}.hover\:-translate-y-1:hover{--tw-translate-y: -.25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:transform:hover{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:border-cyan-500\/30:hover{border-color:#06b6d44d}.hover\:border-cyan-500\/50:hover{border-color:#06b6d480}.hover\:bg-\[var\(--bg-hover\)\]:hover{background-color:var(--bg-hover)}.hover\:bg-cyan-500\/10:hover{background-color:#06b6d41a}.hover\:bg-red-500\/10:hover{background-color:#ef44441a}.hover\:bg-zinc-700:hover{--tw-bg-opacity: 1;background-color:rgb(63 63 70 / var(--tw-bg-opacity, 1))}.hover\:text-cyan-400:hover{--tw-text-opacity: 1;color:rgb(34 211 238 / var(--tw-text-opacity, 1))}.hover\:text-red-400:hover{--tw-text-opacity: 1;color:rgb(248 113 113 / var(--tw-text-opacity, 1))}.hover\:text-white:hover{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.focus\:border-cyan-500:focus{--tw-border-opacity: 1;border-color:rgb(6 182 212 / var(--tw-border-opacity, 1))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}@media (min-width: 768px){.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (min-width: 1024px){.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (min-width: 1280px){.xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}

backend/static/index.html

@@ -1,17 +1 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Platform - AI Tool Integration</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
-    <script type="module" crossorigin src="/assets/index-CIpcBIY5.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-DVvq7QG0.css">
-  </head>
-  <body>
-    <div id="root"></div>
-  </body>
-</html>
+<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" href="/_next/static/media/e4af272ccee01ff0-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="stylesheet" href="/_next/static/css/b8fe60b397de5bf4.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-16fd57b891a459c7.js"/><script src="/_next/static/chunks/fd9d1056-9e075b64004453d8.js" async=""></script><script src="/_next/static/chunks/117-4e7593576fd7f596.js" async=""></script><script src="/_next/static/chunks/main-app-c4d682a1ca6a9af7.js" async=""></script><script src="/_next/static/chunks/876-6377c47dc51ad221.js" async=""></script><script src="/_next/static/chunks/app/page-b6939147ba61bda4.js" async=""></script><title>Compost - AI Tool Platform</title><meta name="description" content="Unified AI tool integration platform"/><meta name="next-size-adjust"/><script src="/_next/static/chunks/polyfills-42372ed130431b0a.js" noModule=""></script></head><body class="__variable_f367f3 font-sans bg-bg-primary text-text-primary"><div class="flex min-h-screen"><aside class="w-60 bg-bg-secondary border-r border-border flex flex-col shrink-0"><div class="px-5 py-4 border-b border-border"><div class="flex items-center gap-3"><div class="w-8 h-8 bg-accent-cyan rounded-lg flex items-center justify-center font-bold text-bg-primary text-sm">C</div><span class="text-base font-semibold tracking-tight">Compost</span></div></div><nav class="flex-1 px-3 py-4 space-y-1"><div class="px-3 mb-2 text-[11px] font-semibold uppercase tracking-wider text-text-dim">Main</div><a class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors bg-accent-cyan/10 text-accent-cyanLight font-medium" href="/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-layout-dashboard w-4 h-4"><rect width="7" height="9" x="3" y="3" rx="1"></rect><rect width="7" height="5" x="14" y="3" rx="1"></rect><rect width="7" height="9" x="14" y="12" rx="1"></rect><rect width="7" height="5" x="3" y="16" rx="1"></rect></svg>Dashboard</a><a class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors text-text-secondary hover:bg-bg-hover hover:text-text-primary" href="/apps/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plug w-4 h-4"><path d="M12 22v-5"></path><path d="M9 8V2"></path><path d="M15 8V2"></path><path d="M18 8v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8Z"></path></svg>Apps</a><a class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors text-text-secondary hover:bg-bg-hover hover:text-text-primary" href="/tools/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-wrench w-4 h-4"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path></svg>Tools</a><div class="px-3 mt-6 mb-2 text-[11px] font-semibold uppercase tracking-wider text-text-dim">Configuration</div><a class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors text-text-secondary hover:bg-bg-hover hover:text-text-primary" href="/api-keys/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-key w-4 h-4"><circle cx="7.5" cy="15.5" r="5.5"></circle><path d="m21 2-9.6 9.6"></path><path d="m15.5 7.5 3 3L22 7l-3-3"></path></svg>API Keys</a><a class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors text-text-secondary hover:bg-bg-hover hover:text-text-primary" href="/analytics/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bar-chart3 w-4 h-4"><path d="M3 3v18h18"></path><path d="M18 17V9"></path><path d="M13 17V5"></path><path d="M8 17v-3"></path></svg>Analytics</a><a class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors text-text-secondary hover:bg-bg-hover hover:text-text-primary" href="/settings/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-settings w-4 h-4"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"></path><circle cx="12" cy="12" r="3"></circle></svg>Settings</a><a href="/api/docs" target="_blank" rel="noopener noreferrer" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-text-secondary hover:bg-bg-hover hover:text-text-primary transition-colors"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link w-4 h-4"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg>API Docs</a></nav><div class="px-3 py-4 border-t border-border"><div class="flex items-center justify-between"><div class="flex items-center gap-2 min-w-0"><div class="w-7 h-7 bg-bg-tertiary rounded-full flex items-center justify-center text-xs font-semibold shrink-0">U</div><span class="text-xs text-text-secondary truncate">User</span></div><button class="p-1.5 text-text-muted hover:text-accent-red hover:bg-accent-red/10 rounded-lg transition-colors"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-log-out w-3.5 h-3.5"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" x2="9" y1="12" y2="12"></line></svg></button></div></div></aside><main class="flex-1 flex flex-col"><header class="h-14 bg-bg-secondary border-b border-border flex items-center px-6"><h1 class="text-base font-medium">Dashboard</h1></header><div class="flex-1 p-6 space-y-6 overflow-auto"><div class="grid grid-cols-4 gap-4"><div class="bg-bg-tertiary border border-border rounded-xl p-5"><div class="flex items-center justify-between"><div><p class="text-sm text-text-muted">Total Executions</p><p class="text-2xl font-bold mt-1">...</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-activity w-5 h-5 text-accent-cyan"><path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"></path></svg></div></div><div class="bg-bg-tertiary border border-border rounded-xl p-5"><div class="flex items-center justify-between"><div><p class="text-sm text-text-muted">Integrations</p><p class="text-2xl font-bold mt-1">...</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plug w-5 h-5 text-accent-green"><path d="M12 22v-5"></path><path d="M9 8V2"></path><path d="M15 8V2"></path><path d="M18 8v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8Z"></path></svg></div></div><div class="bg-bg-tertiary border border-border rounded-xl p-5"><div class="flex items-center justify-between"><div><p class="text-sm text-text-muted">Success Rate</p><p class="text-2xl font-bold mt-1">...</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-check-big w-5 h-5 text-accent-blue"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><path d="m9 11 3 3L22 4"></path></svg></div></div><div class="bg-bg-tertiary border border-border rounded-xl p-5"><div class="flex items-center justify-between"><div><p class="text-sm text-text-muted">Avg Latency</p><p class="text-2xl font-bold mt-1">...</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock w-5 h-5 text-accent-amber"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg></div></div></div><div class="bg-bg-tertiary border border-border rounded-xl p-6"><h3 class="text-sm font-medium mb-4">Quick Connect</h3><p class="text-text-muted text-sm">Loading...</p></div></div></main></div><script src="/_next/static/chunks/webpack-16fd57b891a459c7.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/_next/static/media/e4af272ccee01ff0-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n2:HL[\"/_next/static/css/b8fe60b397de5bf4.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"3:I[2846,[],\"\"]\n5:I[9107,[],\"ClientPageRoot\"]\n6:I[7340,[\"876\",\"static/chunks/876-6377c47dc51ad221.js\",\"931\",\"static/chunks/app/page-b6939147ba61bda4.js\"],\"default\",1]\n7:I[4707,[],\"\"]\n8:I[6423,[],\"\"]\na:I[1060,[],\"\"]\nb:[]\n"])</script><script>self.__next_f.push([1,"0:[\"$\",\"$L3\",null,{\"buildId\":\"Kf4VGOEAsTnd5eMvxpmU3\",\"assetPrefix\":\"\",\"urlParts\":[\"\",\"\"],\"initialTree\":[\"\",{\"children\":[\"__PAGE__\",{}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[\"__PAGE__\",{},[[\"$L4\",[\"$\",\"$L5\",null,{\"props\":{\"params\":{},\"searchParams\":{}},\"Component\":\"$6\"}],null],null],null]},[[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/b8fe60b397de5bf4.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"__variable_f367f3 font-sans bg-bg-primary text-text-primary\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L8\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[]}]}]}]],null],null],\"couldBeIntercepted\":false,\"initialHead\":[null,\"$L9\"],\"globalErrorComponent\":\"$a\",\"missingSlots\":\"$Wb\"}]\n"])</script><script>self.__next_f.push([1,"9:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Compost - AI Tool Platform\"}],[\"$\",\"meta\",\"3\",{\"name\":\"description\",\"content\":\"Unified AI tool integration platform\"}],[\"$\",\"meta\",\"4\",{\"name\":\"next-size-adjust\"}]]\n4:null\n"])</script></body></html>

frontend/app/analytics/page.tsx

@@ -0,0 +1,59 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { Sidebar } from '@/components/sidebar'
+import { api, type Stats } from '@/lib/api'
+import { Activity, CheckCircle, XCircle, Clock } from 'lucide-react'
+
+export default function AnalyticsPage() {
+  const [stats, setStats] = useState<Stats | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    api.get<Stats>('/api/analytics/overview')
+      .then((data) => { setStats(data); setLoading(false) })
+      .catch(() => setLoading(false))
+  }, [])
+
+  const metrics = [
+    { label: 'Executions', value: stats?.total_executions ?? 0, icon: Activity, color: 'text-accent-cyan' },
+    { label: 'Successful', value: stats?.successful ?? 0, icon: CheckCircle, color: 'text-accent-green' },
+    { label: 'Failed', value: stats?.failed ?? 0, icon: XCircle, color: 'text-accent-red' },
+    { label: 'Avg Latency', value: `${stats?.avg_latency_ms ?? 0}ms`, icon: Clock, color: 'text-accent-amber' },
+  ]
+
+  return (
+    <div className="flex min-h-screen">
+      <Sidebar />
+      <main className="flex-1 flex flex-col">
+        <header className="h-14 bg-bg-secondary border-b border-border flex items-center px-6">
+          <h1 className="text-base font-medium">Analytics</h1>
+        </header>
+        <div className="flex-1 p-6 space-y-6 overflow-auto">
+          <div className="grid grid-cols-4 gap-4">
+            {metrics.map((m) => (
+              <div key={m.label} className="bg-bg-tertiary border border-border rounded-xl p-5">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <p className="text-sm text-text-muted">{m.label}</p>
+                    <p className={`text-2xl font-bold mt-1 ${m.color}`}>{loading ? '...' : m.value}</p>
+                  </div>
+                  <m.icon className={`w-5 h-5 ${m.color}`} />
+                </div>
+              </div>
+            ))}
+          </div>
+          <div className="bg-bg-tertiary border border-border rounded-xl p-6">
+            <h3 className="text-sm font-medium mb-4">Success Rate</h3>
+            <div className="flex items-center gap-4">
+              <div className="flex-1 h-3 bg-bg-secondary rounded-full overflow-hidden">
+                <div className="h-full bg-accent-green rounded-full transition-all" style={{ width: `${stats?.success_rate ?? 100}%` }} />
+              </div>
+              <span className="text-sm font-medium">{stats?.success_rate ?? 100}%</span>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  )
+}

frontend/app/api-keys/page.tsx

@@ -0,0 +1,26 @@
+'use client'
+
+import { Sidebar } from '@/components/sidebar'
+import { Key, Server } from 'lucide-react'
+
+export default function APIKeysPage() {
+  return (
+    <div className="flex min-h-screen">
+      <Sidebar />
+      <main className="flex-1 flex flex-col">
+        <header className="h-14 bg-bg-secondary border-b border-border flex items-center px-6 justify-between">
+          <h1 className="text-base font-medium">API Keys</h1>
+        </header>
+        <div className="flex-1 p-6">
+          <div className="bg-bg-tertiary border border-border rounded-xl p-6">
+            <div className="flex items-center gap-3 mb-4">
+              <Key className="w-5 h-5 text-accent-cyan" />
+              <h3 className="text-sm font-medium">Manage API Keys</h3>
+            </div>
+            <p className="text-sm text-text-muted">Generate API keys for programmatic access to the platform.</p>
+          </div>
+        </div>
+      </main>
+    </div>
+  )
+}

frontend/app/apps/page.tsx

@@ -0,0 +1,95 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import Link from 'next/link'
+import { Sidebar } from '@/components/sidebar'
+import { api, type Integration } from '@/lib/api'
+import { Search, ArrowUpRight } from 'lucide-react'
+
+const categories = ['All', 'Developer Tools', 'Communication', 'Productivity', 'CRM', 'Finance', 'Social', 'Other']
+
+export default function AppsPage() {
+  const [integrations, setIntegrations] = useState<Integration[]>([])
+  const [loading, setLoading] = useState(true)
+  const [category, setCategory] = useState('All')
+  const [search, setSearch] = useState('')
+
+  useEffect(() => {
+    api.get<Integration[]>('/api/apps')
+      .then((data) => { setIntegrations(data); setLoading(false) })
+      .catch(() => setLoading(false))
+  }, [])
+
+  const filtered = integrations.filter((i) => {
+    const matchCat = category === 'All' || i.category === category
+    const matchSearch = !search || i.name.toLowerCase().includes(search.toLowerCase()) || i.description.toLowerCase().includes(search.toLowerCase())
+    return matchCat && matchSearch
+  })
+
+  return (
+    <div className="flex min-h-screen">
+      <Sidebar integrationCount={integrations.length} />
+      <main className="flex-1 flex flex-col">
+        <header className="h-14 bg-bg-secondary border-b border-border flex items-center px-6 justify-between">
+          <h1 className="text-base font-medium">Apps</h1>
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-text-dim" />
+            <input
+              className="pl-9 pr-4 py-1.5 bg-bg-tertiary border border-border rounded-lg text-sm text-text-primary placeholder:text-text-dim focus:outline-none focus:border-accent-cyan w-64"
+              placeholder="Search apps..."
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+            />
+          </div>
+        </header>
+        <div className="flex-1 p-6 overflow-auto">
+          <div className="flex gap-2 mb-6 flex-wrap">
+            {categories.map((c) => (
+              <button key={c} onClick={() => setCategory(c)}
+                className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-colors ${category === c ? 'bg-accent-cyan text-bg-primary' : 'bg-bg-tertiary border border-border text-text-secondary hover:text-text-primary'}`}
+              >{c}</button>
+            ))}
+          </div>
+          {loading ? (
+            <div className="grid grid-cols-4 gap-4">
+              {Array.from({ length: 8 }).map((_, i) => (
+                <div key={i} className="bg-bg-tertiary border border-border rounded-xl p-5 animate-pulse">
+                  <div className="flex items-center gap-3 mb-3">
+                    <div className="w-9 h-9 bg-bg-hover rounded-lg" />
+                    <div className="flex-1"><div className="h-3 bg-bg-hover rounded w-20 mb-1" /><div className="h-2 bg-bg-hover rounded w-14" /></div>
+                  </div>
+                  <div className="h-2 bg-bg-hover rounded w-full mb-2" /><div className="h-2 bg-bg-hover rounded w-3/4" />
+                </div>
+              ))}
+            </div>
+          ) : filtered.length === 0 ? (
+            <div className="text-center py-20"><p className="text-text-muted">No apps found</p></div>
+          ) : (
+            <div className="grid grid-cols-4 gap-4">
+              {filtered.map((i) => (
+                <div key={i.id} className="bg-bg-tertiary border border-border rounded-xl p-5 hover:border-accent-cyan/40 transition-colors group">
+                  <div className="flex items-center gap-3 mb-3">
+                    <div className="w-10 h-10 bg-bg-secondary rounded-lg flex items-center justify-center overflow-hidden border border-border">
+                      <img src={i.logo_url} alt={i.name} className="w-6 h-6" onError={(e) => (e.currentTarget.style.display = 'none')} />
+                    </div>
+                    <div>
+                      <p className="text-sm font-semibold">{i.name}</p>
+                      <p className="text-[11px] text-text-muted">{i.category}</p>
+                    </div>
+                  </div>
+                  <p className="text-xs text-text-secondary leading-relaxed line-clamp-2 mb-4">{i.description}</p>
+                  <div className="flex items-center justify-between pt-3 border-t border-border">
+                    <span className="text-[11px] text-text-muted">{i.tool_count} tools</span>
+                    <Link href={`/connect?id=${i.id}`} className="text-[11px] text-accent-cyan hover:text-accent-cyanLight flex items-center gap-1 font-medium">
+                      Connect <ArrowUpRight className="w-3 h-3" />
+                    </Link>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </main>
+    </div>
+  )
+}

frontend/app/connect/page.tsx

@@ -0,0 +1,160 @@
+'use client'
+
+import { useEffect, useState, Suspense } from 'react'
+import { useRouter, useSearchParams } from 'next/navigation'
+import { Sidebar } from '@/components/sidebar'
+import { ArrowLeft, Loader2, Check, Key } from 'lucide-react'
+
+interface AuthField {
+  name: string
+  label: string
+  type: string
+  required: boolean
+  description: string
+  default: string
+}
+
+interface AuthConfig {
+  integration_id: string
+  auth_type: string
+  fields: AuthField[]
+  oauth_authorize_url: string | null
+  oauth_token_url: string | null
+}
+
+function ConnectContent() {
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const id = searchParams.get('id') || ''
+  const [config, setConfig] = useState<AuthConfig | null>(null)
+  const [integrationName, setIntegrationName] = useState('')
+  const [values, setValues] = useState<Record<string, string>>({})
+  const [loading, setLoading] = useState(true)
+  const [submitting, setSubmitting] = useState(false)
+  const [error, setError] = useState('')
+  const [success, setSuccess] = useState(false)
+
+  useEffect(() => {
+    if (!id) { router.push('/apps'); return }
+    Promise.all([
+      fetch(`/api/apps/${id}`).then(r => r.json()),
+      fetch(`/api/connections/auth-config/${id}`).then(r => r.ok ? r.json() : null),
+    ]).then(([app, cfg]) => {
+      setIntegrationName(app.name || id)
+      setConfig(cfg)
+      setLoading(false)
+      if (cfg) {
+        const init: Record<string, string> = {}
+        cfg.fields.forEach((f: AuthField) => { init[f.name] = f.default || '' })
+        setValues(init)
+      }
+    }).catch(() => setLoading(false))
+  }, [id, router])
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setError('')
+    setSubmitting(true)
+    try {
+      const res = await fetch(`/api/connections/connect?integration_id=${id}`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${localStorage.getItem('token')}` },
+        body: JSON.stringify({ credentials: values }),
+      })
+      const data = await res.json()
+      if (!res.ok) { setError(data.detail || 'Connection failed'); return }
+      setSuccess(true)
+      setTimeout(() => router.push('/apps'), 1500)
+    } catch { setError('Network error') }
+    finally { setSubmitting(false) }
+  }
+
+  return (
+    <div className="flex min-h-screen">
+      <Sidebar />
+      <main className="flex-1 flex flex-col">
+        <header className="h-14 bg-bg-secondary border-b border-border flex items-center px-6">
+          <button onClick={() => router.back()} className="flex items-center gap-2 text-text-muted hover:text-text-primary transition-colors mr-4">
+            <ArrowLeft className="w-4 h-4" />
+          </button>
+          <h1 className="text-base font-medium">Connect {integrationName}</h1>
+        </header>
+        <div className="flex-1 flex items-center justify-center p-6">
+          {loading ? (
+            <div className="text-text-muted">Loading...</div>
+          ) : success ? (
+            <div className="bg-bg-tertiary border border-accent-green/30 rounded-2xl p-8 text-center max-w-md">
+              <div className="w-12 h-12 bg-accent-green/10 rounded-full flex items-center justify-center mx-auto mb-4">
+                <Check className="w-6 h-6 text-accent-green" />
+              </div>
+              <h2 className="text-lg font-semibold mb-2">Connected Successfully</h2>
+              <p className="text-sm text-text-muted">{integrationName} is now connected</p>
+            </div>
+          ) : !config ? (
+            <div className="bg-bg-tertiary border border-border rounded-2xl p-8 text-center max-w-md">
+              <h2 className="text-lg font-semibold mb-2">No Auth Config</h2>
+              <p className="text-sm text-text-muted mb-4">This integration hasn&apos;t been configured yet.</p>
+              <button onClick={() => router.push('/settings')} className="px-4 py-2 bg-accent-cyan text-bg-primary text-sm font-medium rounded-lg">Configure in Settings</button>
+            </div>
+          ) : (
+            <div className="bg-bg-tertiary border border-border rounded-2xl p-8 w-full max-w-md">
+              <div className="flex items-center gap-3 mb-6">
+                <div className="w-10 h-10 bg-bg-secondary border border-border rounded-lg flex items-center justify-center">
+                  <Key className="w-5 h-5 text-accent-cyan" />
+                </div>
+                <div>
+                  <h2 className="text-base font-semibold">{integrationName}</h2>
+                  <p className="text-xs text-text-muted capitalize">{config.auth_type} authentication</p>
+                </div>
+              </div>
+              {error && <div className="mb-4 p-3 bg-accent-red/10 border border-accent-red/30 rounded-lg text-accent-red text-sm">{error}</div>}
+              <form onSubmit={handleSubmit} className="space-y-4">
+                {config.fields.map((field) => (
+                  <div key={field.name}>
+                    <label className="block text-xs text-text-muted mb-1.5">
+                      {field.label} {field.required && <span className="text-accent-red">*</span>}
+                    </label>
+                    <input
+                      type={field.type === 'password' ? 'password' : 'text'}
+                      value={values[field.name] || ''}
+                      onChange={(e) => setValues(prev => ({ ...prev, [field.name]: e.target.value }))}
+                      className="w-full px-3 py-2 bg-bg-secondary border border-border rounded-lg text-sm text-text-primary placeholder:text-text-dim focus:outline-none focus:border-accent-cyan"
+                      placeholder={field.description}
+                      required={field.required}
+                    />
+                  </div>
+                ))}
+                {config.auth_type === 'oauth2' && config.oauth_authorize_url && (
+                  <div className="pt-2 border-t border-border">
+                    <p className="text-xs text-text-muted mb-3">Or connect via OAuth:</p>
+                    <a
+                      href={`${config.oauth_authorize_url}?client_id=${values['client_id'] || ''}&redirect_uri=${typeof window !== 'undefined' ? window.location.origin : ''}/oauth/callback/${id}&response_type=code`}
+                      className="w-full flex items-center justify-center gap-2 py-2.5 bg-bg-secondary border border-border hover:border-accent-cyan/50 text-text-primary text-sm font-medium rounded-lg transition-colors"
+                    >
+                      Continue with OAuth
+                    </a>
+                  </div>
+                )}
+                <button
+                  type="submit"
+                  disabled={submitting}
+                  className="w-full py-2.5 bg-accent-cyan hover:bg-accent-cyanLight text-bg-primary font-medium text-sm rounded-lg transition-colors disabled:opacity-50 flex items-center justify-center gap-2"
+                >
+                  {submitting ? <><Loader2 className="w-4 h-4 animate-spin" /> Connecting...</> : 'Connect'}
+                </button>
+              </form>
+            </div>
+          )}
+        </div>
+      </main>
+    </div>
+  )
+}
+
+export default function ConnectPage() {
+  return (
+    <Suspense fallback={<div className="flex min-h-screen"><div className="flex-1 flex items-center justify-center text-text-muted">Loading...</div></div>}>
+      <ConnectContent />
+    </Suspense>
+  )
+}

frontend/app/globals.css

@@ -0,0 +1,22 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --background: #09090b;
+  --foreground: #fafafa;
+}
+
+* { box-sizing: border-box; }
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: 'Inter', system-ui, sans-serif;
+  -webkit-font-smoothing: antialiased;
+}
+
+::-webkit-scrollbar { width: 6px; }
+::-webkit-scrollbar-track { background: #111113; }
+::-webkit-scrollbar-thumb { background: #27272a; border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: #3f3f46; }

frontend/app/layout.tsx

@@ -0,0 +1,20 @@
+import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+import './globals.css'
+
+const inter = Inter({ subsets: ['latin'], variable: '--font-inter' })
+
+export const metadata: Metadata = {
+  title: 'Compost - AI Tool Platform',
+  description: 'Unified AI tool integration platform',
+}
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body className={`${inter.variable} font-sans bg-bg-primary text-text-primary`}>
+        {children}
+      </body>
+    </html>
+  )
+}

frontend/app/login/page.tsx

@@ -0,0 +1,61 @@
+'use client'
+
+import { useState } from 'react'
+
+export default function LoginPage() {
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setError('')
+    setLoading(true)
+    try {
+      const formData = new URLSearchParams()
+      formData.append('username', email)
+      formData.append('password', password)
+      const res = await fetch('/api/auth/login', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+        body: formData,
+      })
+      const data = await res.json()
+      if (!res.ok) { setError(data.detail || 'Login failed'); return }
+      localStorage.setItem('token', data.access_token)
+      localStorage.setItem('email', data.user?.email || email)
+      window.location.href = '/'
+    } catch { setError('Network error') }
+    finally { setLoading(false) }
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-bg-primary">
+      <div className="w-full max-w-sm">
+        <div className="text-center mb-8">
+          <div className="w-14 h-14 bg-accent-cyan rounded-2xl flex items-center justify-center mx-auto mb-4 font-bold text-xl text-bg-primary">C</div>
+          <h1 className="text-xl font-semibold">Compost</h1>
+          <p className="text-sm text-text-muted mt-1">AI Tool Integration Platform</p>
+        </div>
+        <div className="bg-bg-tertiary border border-border rounded-2xl p-6">
+          {error && <div className="mb-4 p-3 bg-accent-red/10 border border-accent-red/30 rounded-lg text-accent-red text-sm">{error}</div>}
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div>
+              <label className="block text-xs text-text-muted mb-1.5">Email</label>
+              <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} className="w-full px-3 py-2 bg-bg-secondary border border-border rounded-lg text-sm text-text-primary placeholder:text-text-dim focus:outline-none focus:border-accent-cyan" placeholder="admin@platform.local" required />
+            </div>
+            <div>
+              <label className="block text-xs text-text-muted mb-1.5">Password</label>
+              <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} className="w-full px-3 py-2 bg-bg-secondary border border-border rounded-lg text-sm text-text-primary placeholder:text-text-dim focus:outline-none focus:border-accent-cyan" placeholder="••••••••" required />
+            </div>
+            <button type="submit" disabled={loading} className="w-full py-2.5 bg-accent-cyan hover:bg-accent-cyanLight text-bg-primary font-medium text-sm rounded-lg transition-colors disabled:opacity-50">
+              {loading ? 'Signing in...' : 'Sign In'}
+            </button>
+          </form>
+        </div>
+        <p className="text-center text-xs text-text-dim mt-4">Default: admin@platform.local / admin123</p>
+      </div>
+    </div>
+  )
+}

frontend/app/page.tsx

@@ -0,0 +1,90 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { Sidebar } from '@/components/sidebar'
+import { api, type Integration, type Stats } from '@/lib/api'
+import { Activity, Plug, Zap, CheckCircle, Clock } from 'lucide-react'
+
+export default function DashboardPage() {
+  const [integrations, setIntegrations] = useState<Integration[]>([])
+  const [stats, setStats] = useState<Stats | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    Promise.all([
+      api.get<Integration[]>('/api/apps').catch(() => []),
+      api.get<Stats>('/api/analytics/overview').catch(() => null),
+    ]).then(([apps, s]) => {
+      setIntegrations(apps)
+      setStats(s)
+      setLoading(false)
+    })
+  }, [])
+
+  const metrics = [
+    { label: 'Total Executions', value: stats?.total_executions ?? 0, icon: Activity, color: 'text-accent-cyan' },
+    { label: 'Integrations', value: integrations.length, icon: Plug, color: 'text-accent-green' },
+    { label: 'Success Rate', value: `${stats?.success_rate ?? 100}%`, icon: CheckCircle, color: 'text-accent-blue' },
+    { label: 'Avg Latency', value: `${stats?.avg_latency_ms ?? 0}ms`, icon: Clock, color: 'text-accent-amber' },
+  ]
+
+  return (
+    <div className="flex min-h-screen">
+      <Sidebar integrationCount={integrations.length} />
+      <main className="flex-1 flex flex-col">
+        <header className="h-14 bg-bg-secondary border-b border-border flex items-center px-6">
+          <h1 className="text-base font-medium">Dashboard</h1>
+        </header>
+        <div className="flex-1 p-6 space-y-6 overflow-auto">
+          <div className="grid grid-cols-4 gap-4">
+            {metrics.map((m) => (
+              <div key={m.label} className="bg-bg-tertiary border border-border rounded-xl p-5">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <p className="text-sm text-text-muted">{m.label}</p>
+                    <p className="text-2xl font-bold mt-1">{loading ? '...' : m.value}</p>
+                  </div>
+                  <m.icon className={`w-5 h-5 ${m.color}`} />
+                </div>
+              </div>
+            ))}
+          </div>
+
+          <div className="bg-bg-tertiary border border-border rounded-xl p-6">
+            <h3 className="text-sm font-medium mb-4">Quick Connect</h3>
+            {loading ? (
+              <p className="text-text-muted text-sm">Loading...</p>
+            ) : integrations.length === 0 ? (
+              <div className="text-center py-12">
+                <p className="text-text-muted">No integrations yet</p>
+                <p className="text-text-dim text-sm mt-1">Set COMPOSIO_API_KEY to sync all 1000+ tools</p>
+              </div>
+            ) : (
+              <div className="grid grid-cols-4 gap-4">
+                {integrations.slice(0, 8).map((i) => (
+                  <div key={i.id} className="bg-bg-secondary border border-border rounded-lg p-4 hover:border-accent-cyan/40 transition-colors">
+                    <div className="flex items-center gap-3 mb-3">
+                      <div className="w-9 h-9 bg-bg-tertiary rounded-lg flex items-center justify-center overflow-hidden">
+                        <img src={i.logo_url} alt={i.name} className="w-5 h-5" onError={(e) => (e.currentTarget.style.display = 'none')} />
+                      </div>
+                      <div>
+                        <p className="text-sm font-medium">{i.name}</p>
+                        <p className="text-[11px] text-text-muted">{i.category}</p>
+                      </div>
+                    </div>
+                    <div className="flex items-center justify-between pt-3 border-t border-border">
+                      <span className="text-[11px] text-text-muted">{i.tool_count} tools</span>
+                      <span className={`text-[11px] px-2 py-0.5 rounded ${i.auth_type === 'oauth2' ? 'bg-accent-cyan/10 text-accent-cyanLight' : 'bg-accent-green/10 text-accent-green'}`}>
+                        {i.auth_type}
+                      </span>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      </main>
+    </div>
+  )
+}

frontend/app/settings/page.tsx

@@ -0,0 +1,40 @@
+'use client'
+
+import { Sidebar } from '@/components/sidebar'
+import { Server, Database, Shield } from 'lucide-react'
+
+export default function SettingsPage() {
+  return (
+    <div className="flex min-h-screen">
+      <Sidebar />
+      <main className="flex-1 flex flex-col">
+        <header className="h-14 bg-bg-secondary border-b border-border flex items-center px-6">
+          <h1 className="text-base font-medium">Settings</h1>
+        </header>
+        <div className="flex-1 p-6 space-y-4 overflow-auto">
+          <div className="bg-bg-tertiary border border-border rounded-xl p-5">
+            <div className="flex items-center gap-3 mb-4"><Server className="w-5 h-5 text-accent-cyan" /><h3 className="text-sm font-medium">System</h3></div>
+            <div className="space-y-3 text-sm">
+              <div className="flex justify-between"><span className="text-text-muted">Version</span><span>1.0.0</span></div>
+              <div className="flex justify-between"><span className="text-text-muted">Data Dir</span><span className="font-mono">/data</span></div>
+            </div>
+          </div>
+          <div className="bg-bg-tertiary border border-border rounded-xl p-5">
+            <div className="flex items-center gap-3 mb-4"><Database className="w-5 h-5 text-accent-green" /><h3 className="text-sm font-medium">Database</h3></div>
+            <div className="space-y-3 text-sm">
+              <div className="flex justify-between"><span className="text-text-muted">Engine</span><span>SQLite</span></div>
+              <div className="flex justify-between"><span className="text-text-muted">Path</span><span className="font-mono">/data/platform.db</span></div>
+            </div>
+          </div>
+          <div className="bg-bg-tertiary border border-border rounded-xl p-5">
+            <div className="flex items-center gap-3 mb-4"><Shield className="w-5 h-5 text-accent-amber" /><h3 className="text-sm font-medium">Security</h3></div>
+            <div className="space-y-3 text-sm">
+              <div className="flex justify-between"><span className="text-text-muted">Auth</span><span>JWT (HS256)</span></div>
+              <div className="flex justify-between"><span className="text-text-muted">Vault</span><span>AES-256-GCM</span></div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  )
+}

frontend/app/tools/page.tsx

@@ -0,0 +1,64 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { Sidebar } from '@/components/sidebar'
+import { api, type Tool } from '@/lib/api'
+import { Search, Play } from 'lucide-react'
+
+export default function ToolsPage() {
+  const [tools, setTools] = useState<Tool[]>([])
+  const [loading, setLoading] = useState(true)
+  const [search, setSearch] = useState('')
+
+  useEffect(() => {
+    api.get<Tool[]>('/api/tools')
+      .then((data) => { setTools(data); setLoading(false) })
+      .catch(() => setLoading(false))
+  }, [])
+
+  const filtered = tools.filter((t) =>
+    !search || t.name.toLowerCase().includes(search.toLowerCase()) || t.description.toLowerCase().includes(search.toLowerCase())
+  )
+
+  return (
+    <div className="flex min-h-screen">
+      <Sidebar />
+      <main className="flex-1 flex flex-col">
+        <header className="h-14 bg-bg-secondary border-b border-border flex items-center px-6 justify-between">
+          <h1 className="text-base font-medium">Tools</h1>
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-text-dim" />
+            <input className="pl-9 pr-4 py-1.5 bg-bg-tertiary border border-border rounded-lg text-sm text-text-primary placeholder:text-text-dim focus:outline-none focus:border-accent-cyan w-64" placeholder="Search tools..." value={search} onChange={(e) => setSearch(e.target.value)} />
+          </div>
+        </header>
+        <div className="flex-1 p-6 overflow-auto">
+          {loading ? (
+            <div className="space-y-2">{Array.from({ length: 10 }).map((_, i) => <div key={i} className="bg-bg-tertiary border border-border rounded-lg p-4 animate-pulse"><div className="h-3 bg-bg-hover rounded w-32 mb-2" /><div className="h-2 bg-bg-hover rounded w-full" /></div>)}</div>
+          ) : filtered.length === 0 ? (
+            <div className="text-center py-20"><p className="text-text-muted">No tools found</p></div>
+          ) : (
+            <div className="space-y-2">
+              {filtered.map((t) => (
+                <div key={t.id} className="bg-bg-tertiary border border-border rounded-lg p-4 flex items-center justify-between hover:border-border-focus transition-colors">
+                  <div className="flex items-center gap-4">
+                    <div className="w-8 h-8 bg-bg-secondary border border-border rounded-lg flex items-center justify-center">
+                      <Play className="w-3.5 h-3.5 text-text-muted" />
+                    </div>
+                    <div>
+                      <p className="text-sm font-medium">{t.name}</p>
+                      <p className="text-xs text-text-muted">{t.description}</p>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-3">
+                    <span className="text-[11px] bg-bg-secondary border border-border px-2 py-0.5 rounded text-text-muted">{t.integration_id}</span>
+                    <span className="text-[11px] text-text-dim">{t.category}</span>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </main>
+    </div>
+  )
+}

frontend/components/sidebar.tsx

@@ -0,0 +1,93 @@
+'use client'
+
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import { LayoutDashboard, Plug, Wrench, Key, BarChart3, Settings, LogOut, ExternalLink } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+const navItems = [
+  { href: '/', icon: LayoutDashboard, label: 'Dashboard' },
+  { href: '/apps', icon: Plug, label: 'Apps' },
+  { href: '/tools', icon: Wrench, label: 'Tools' },
+]
+
+const configItems = [
+  { href: '/api-keys', icon: Key, label: 'API Keys' },
+  { href: '/analytics', icon: BarChart3, label: 'Analytics' },
+  { href: '/settings', icon: Settings, label: 'Settings' },
+]
+
+export function Sidebar({ integrationCount = 0 }: { integrationCount?: number }) {
+  const pathname = usePathname()
+
+  return (
+    <aside className="w-60 bg-bg-secondary border-r border-border flex flex-col shrink-0">
+      <div className="px-5 py-4 border-b border-border">
+        <div className="flex items-center gap-3">
+          <div className="w-8 h-8 bg-accent-cyan rounded-lg flex items-center justify-center font-bold text-bg-primary text-sm">C</div>
+          <span className="text-base font-semibold tracking-tight">Compost</span>
+        </div>
+      </div>
+
+      <nav className="flex-1 px-3 py-4 space-y-1">
+        <div className="px-3 mb-2 text-[11px] font-semibold uppercase tracking-wider text-text-dim">Main</div>
+        {navItems.map((item) => (
+          <Link key={item.href} href={item.href}
+            className={cn(
+              'flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors',
+              pathname === item.href
+                ? 'bg-accent-cyan/10 text-accent-cyanLight font-medium'
+                : 'text-text-secondary hover:bg-bg-hover hover:text-text-primary'
+            )}
+          >
+            <item.icon className="w-4 h-4" />
+            {item.label}
+            {item.href === '/apps' && integrationCount > 0 && (
+              <span className="ml-auto text-[11px] bg-bg-tertiary text-text-muted px-1.5 py-0.5 rounded">{integrationCount}</span>
+            )}
+          </Link>
+        ))}
+
+        <div className="px-3 mt-6 mb-2 text-[11px] font-semibold uppercase tracking-wider text-text-dim">Configuration</div>
+        {configItems.map((item) => (
+          <Link key={item.href} href={item.href}
+            className={cn(
+              'flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors',
+              pathname === item.href
+                ? 'bg-accent-cyan/10 text-accent-cyanLight font-medium'
+                : 'text-text-secondary hover:bg-bg-hover hover:text-text-primary'
+            )}
+          >
+            <item.icon className="w-4 h-4" />
+            {item.label}
+          </Link>
+        ))}
+
+        <a href="/api/docs" target="_blank" rel="noopener noreferrer"
+          className="flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-text-secondary hover:bg-bg-hover hover:text-text-primary transition-colors"
+        >
+          <ExternalLink className="w-4 h-4" />
+          API Docs
+        </a>
+      </nav>
+
+      <div className="px-3 py-4 border-t border-border">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2 min-w-0">
+            <div className="w-7 h-7 bg-bg-tertiary rounded-full flex items-center justify-center text-xs font-semibold shrink-0">
+              {typeof window !== 'undefined' ? (localStorage.getItem('email')?.[0]?.toUpperCase() || 'U') : 'U'}
+            </div>
+            <span className="text-xs text-text-secondary truncate">
+              {typeof window !== 'undefined' ? localStorage.getItem('email') || 'User' : 'User'}
+            </span>
+          </div>
+          <button onClick={() => { localStorage.removeItem('token'); localStorage.removeItem('email'); window.location.href = '/login' }}
+            className="p-1.5 text-text-muted hover:text-accent-red hover:bg-accent-red/10 rounded-lg transition-colors"
+          >
+            <LogOut className="w-3.5 h-3.5" />
+          </button>
+        </div>
+      </div>
+    </aside>
+  )
+}

frontend/index.html

@@ -1,16 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Platform - AI Tool Integration</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>

frontend/lib/api.ts

@@ -0,0 +1,55 @@
+export interface Integration {
+  id: string
+  name: string
+  description: string
+  logo_url: string
+  category: string
+  auth_type: string
+  tool_count: number
+  trigger_count: number
+  is_active: boolean
+}
+
+export interface Tool {
+  id: string
+  integration_id: string
+  name: string
+  description: string
+  input_schema: Record<string, unknown>
+  output_schema?: Record<string, unknown>
+  category: string
+  is_active: boolean
+}
+
+export interface Stats {
+  total_executions: number
+  successful: number
+  failed: number
+  success_rate: number
+  avg_latency_ms: number
+}
+
+const API_BASE = typeof window !== 'undefined' ? '' : process.env.NEXT_PUBLIC_API_URL || ''
+
+async function fetchApi(path: string, opts: RequestInit = {}) {
+  const token = typeof window !== 'undefined' ? localStorage.getItem('token') : null
+  const headers: Record<string, string> = { 'Content-Type': 'application/json' }
+  if (token) headers['Authorization'] = `Bearer ${token}`
+
+  const res = await fetch(`${API_BASE}${path}`, { ...opts, headers })
+  if (res.status === 401) {
+    if (typeof window !== 'undefined') {
+      localStorage.removeItem('token')
+      window.location.href = '/login'
+    }
+    throw new Error('Unauthorized')
+  }
+  return res.json()
+}
+
+export const api = {
+  get: <T>(path: string) => fetchApi(path) as Promise<T>,
+  post: <T>(path: string, body?: unknown) =>
+    fetchApi(path, { method: 'POST', body: body ? JSON.stringify(body) : undefined }) as Promise<T>,
+  delete: <T>(path: string) => fetchApi(path, { method: 'DELETE' }) as Promise<T>,
+}

frontend/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

frontend/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

frontend/next.config.js

@@ -0,0 +1,9 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  output: 'export',
+  distDir: 'dist',
+  images: { unoptimized: true },
+  trailingSlash: true,
+}
+
+module.exports = nextConfig

frontend/package.json

@@ -1,32 +1,28 @@
 {
-  "name": "platform-frontend",
-  "private": true,
+  "name": "compost-frontend",
   "version": "1.0.0",
-  "type": "module",
+  "private": true,
   "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "preview": "vite preview"
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
   },
   "dependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router-dom": "^6.22.0",
-    "zustand": "^4.5.0",
-    "axios": "^1.6.7",
-    "lucide-react": "^0.330.0",
-    "recharts": "^2.12.0",
-    "clsx": "^2.1.0",
-    "date-fns": "^3.3.1"
+    "next": "^14.2.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
+    "lucide-react": "^0.378.0",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^2.3.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.55",
-    "@types/react-dom": "^18.2.19",
-    "@vitejs/plugin-react": "^4.2.1",
-    "autoprefixer": "^10.4.17",
-    "postcss": "^8.4.35",
-    "tailwindcss": "^3.4.1",
-    "typescript": "^5.3.3",
-    "vite": "^5.1.0"
+    "@types/node": "^20.12.0",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "autoprefixer": "^10.4.19",
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.3",
+    "typescript": "^5.4.5"
   }
 }

frontend/postcss.config.js

@@ -1,4 +1,4 @@
-export default {
+module.exports = {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},

frontend/src/App.tsx

@@ -1,44 +0,0 @@
-import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
-import { useAuthStore } from './stores/authStore'
-import Layout from './components/layout/Layout'
-import Dashboard from './pages/Dashboard'
-import Apps from './pages/Apps'
-import AppDetail from './pages/AppDetail'
-import Connections from './pages/Connections'
-import Tools from './pages/Tools'
-import Playground from './pages/Playground'
-import APIKeys from './pages/APIKeys'
-import Analytics from './pages/Analytics'
-import Settings from './pages/Settings'
-import Login from './pages/Login'
-
-function ProtectedRoute({ children }: { children: React.ReactNode }) {
-  const { token } = useAuthStore()
-  if (!token) return <Navigate to="/login" />
-  return <>{children}</>
-}
-
-export default function App() {
-  return (
-    <BrowserRouter>
-      <Routes>
-        <Route path="/login" element={<Login />} />
-        <Route path="/" element={
-          <ProtectedRoute>
-            <Layout />
-          </ProtectedRoute>
-        }>
-          <Route index element={<Dashboard />} />
-          <Route path="apps" element={<Apps />} />
-          <Route path="apps/:id" element={<AppDetail />} />
-          <Route path="connections" element={<Connections />} />
-          <Route path="tools" element={<Tools />} />
-          <Route path="playground" element={<Playground />} />
-          <Route path="api-keys" element={<APIKeys />} />
-          <Route path="analytics" element={<Analytics />} />
-          <Route path="settings" element={<Settings />} />
-        </Route>
-      </Routes>
-    </BrowserRouter>
-  )
-}

frontend/src/components/layout/Layout.tsx

@@ -1,17 +0,0 @@
-import { Outlet } from 'react-router-dom'
-import Sidebar from './Sidebar'
-import TopBar from './TopBar'
-
-export default function Layout() {
-  return (
-    <div className="flex h-screen bg-[var(--bg-primary)]">
-      <Sidebar />
-      <div className="flex-1 flex flex-col overflow-hidden">
-        <TopBar />
-        <main className="flex-1 overflow-auto p-6">
-          <Outlet />
-        </main>
-      </div>
-    </div>
-  )
-}

frontend/src/components/layout/Sidebar.tsx

@@ -1,109 +0,0 @@
-import { NavLink } from 'react-router-dom'
-import { useAuthStore } from '../../stores/authStore'
-import {
-  LayoutDashboard,
-  Plug,
-  Link2,
-  Wrench,
-  PlayCircle,
-  Key,
-  BarChart3,
-  Settings,
-  LogOut,
-  Terminal
-} from 'lucide-react'
-import clsx from 'clsx'
-
-const navItems = [
-  { path: '/', icon: LayoutDashboard, label: 'Dashboard' },
-  { path: '/apps', icon: Plug, label: 'Apps' },
-  { path: '/connections', icon: Link2, label: 'Connections' },
-  { path: '/tools', icon: Wrench, label: 'Tools' },
-  { path: '/playground', icon: PlayCircle, label: 'Playground' },
-]
-
-const configItems = [
-  { path: '/api-keys', icon: Key, label: 'API Keys' },
-  { path: '/analytics', icon: BarChart3, label: 'Analytics' },
-  { path: '/settings', icon: Settings, label: 'Settings' },
-]
-
-export default function Sidebar() {
-  const { user, logout } = useAuthStore()
-
-  return (
-    <aside className="w-64 bg-[var(--bg-secondary)] border-r border-[var(--border)] flex flex-col">
-      <div className="p-4 border-b border-[var(--border)]">
-        <div className="flex items-center gap-3">
-          <div className="w-8 h-8 bg-cyan-500 rounded-lg flex items-center justify-center">
-            <Terminal className="w-5 h-5 text-slate-900" />
-          </div>
-          <span className="text-lg font-semibold text-white">Platform</span>
-        </div>
-      </div>
-
-      <nav className="flex-1 p-3 space-y-1">
-        <div className="text-xs font-medium text-[var(--text-muted)] uppercase tracking-wider px-3 mb-2">
-          Main
-        </div>
-        {navItems.map((item) => (
-          <NavLink
-            key={item.path}
-            to={item.path}
-            className={({ isActive }) => clsx(
-              'flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors',
-              isActive 
-                ? 'bg-cyan-500/10 text-cyan-400' 
-                : 'text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] hover:text-white'
-            )}
-          >
-            <item.icon className="w-4 h-4" />
-            {item.label}
-          </NavLink>
-        ))}
-
-        <div className="text-xs font-medium text-[var(--text-muted)] uppercase tracking-wider px-3 mt-6 mb-2">
-          Configuration
-        </div>
-        {configItems.map((item) => (
-          <NavLink
-            key={item.path}
-            to={item.path}
-            className={({ isActive }) => clsx(
-              'flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors',
-              isActive 
-                ? 'bg-cyan-500/10 text-cyan-400' 
-                : 'text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] hover:text-white'
-            )}
-          >
-            <item.icon className="w-4 h-4" />
-            {item.label}
-          </NavLink>
-        ))}
-      </nav>
-
-      <div className="p-3 border-t border-[var(--border)]">
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <div className="w-8 h-8 bg-zinc-700 rounded-full flex items-center justify-center text-sm font-medium">
-              {user?.email?.[0]?.toUpperCase() || 'U'}
-            </div>
-            <span className="text-sm text-[var(--text-secondary)] truncate max-w-[120px]">
-              {user?.email || 'User'}
-            </span>
-          </div>
-          <button
-            onClick={logout}
-            className="p-2 text-[var(--text-muted)] hover:text-red-400 hover:bg-red-500/10 rounded-lg transition-colors"
-            title="Logout"
-          >
-            <LogOut className="w-4 h-4" />
-          </button>
-        </div>
-        <div className="text-xs text-[var(--text-muted)] mt-2 text-center">
-          Version 1.0.0
-        </div>
-      </div>
-    </aside>
-  )
-}

frontend/src/components/layout/TopBar.tsx

@@ -1,27 +0,0 @@
-import { Search, Bell, HelpCircle } from 'lucide-react'
-
-export default function TopBar() {
-  return (
-    <header className="h-14 bg-[var(--bg-secondary)] border-b border-[var(--border)] flex items-center justify-between px-6">
-      <div className="flex items-center gap-4 flex-1">
-        <div className="relative max-w-md flex-1">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--text-muted)]" />
-          <input
-            type="text"
-            placeholder="Search integrations, tools..."
-            className="w-full bg-[var(--bg-primary)] border border-[var(--border)] rounded-lg pl-10 pr-4 py-2 text-sm text-white placeholder-[var(--text-muted)] focus:outline-none focus:border-cyan-500"
-          />
-        </div>
-      </div>
-
-      <div className="flex items-center gap-2">
-        <button className="p-2 text-[var(--text-muted)] hover:text-white hover:bg-[var(--bg-hover)] rounded-lg transition-colors">
-          <HelpCircle className="w-4 h-4" />
-        </button>
-        <button className="p-2 text-[var(--text-muted)] hover:text-white hover:bg-[var(--bg-hover)] rounded-lg transition-colors">
-          <Bell className="w-4 h-4" />
-        </button>
-      </div>
-    </header>
-  )
-}

frontend/src/index.css

@@ -1,76 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-:root {
-  --bg-primary: #0a0a0b;
-  --bg-secondary: #111113;
-  --bg-tertiary: #18181b;
-  --bg-hover: #1f1f23;
-  --border: #27272a;
-  --border-hover: #3f3f46;
-  --text-primary: #fafafa;
-  --text-secondary: #a1a1aa;
-  --text-muted: #71717a;
-  --accent: #22d3ee;
-  --accent-hover: #06b6d4;
-  --accent-green: #10b981;
-  --accent-red: #ef4444;
-  --accent-yellow: #f59e0b;
-  --accent-blue: #3b82f6;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-body {
-  margin: 0;
-  font-family: 'Inter', system-ui, sans-serif;
-  background-color: var(--bg-primary);
-  color: var(--text-primary);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-::-webkit-scrollbar-track {
-  background: var(--bg-secondary);
-}
-
-::-webkit-scrollbar-thumb {
-  background: var(--border);
-  border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: var(--border-hover);
-}
-
-@layer components {
-  .btn {
-    @apply px-4 py-2 rounded-lg font-medium transition-all duration-200 flex items-center gap-2;
-  }
-  .btn-primary {
-    @apply bg-cyan-500 hover:bg-cyan-400 text-slate-900;
-  }
-  .btn-secondary {
-    @apply bg-zinc-800 hover:bg-zinc-700 text-zinc-100;
-  }
-  .btn-ghost {
-    @apply bg-transparent hover:bg-zinc-800 text-zinc-300;
-  }
-  .card {
-    @apply bg-zinc-900/50 border border-zinc-800 rounded-xl p-4;
-  }
-  .input {
-    @apply bg-zinc-900 border border-zinc-800 rounded-lg px-3 py-2 text-zinc-100 placeholder-zinc-500 focus:outline-none focus:border-cyan-500 transition-colors;
-  }
-  .badge {
-    @apply px-2 py-0.5 text-xs font-medium rounded-full;
-  }
-}

frontend/src/lib/api.ts

@@ -1,30 +0,0 @@
-import axios from 'axios'
-
-const api = axios.create({
-  baseURL: '',
-  headers: { 'Content-Type': 'application/json' }
-})
-
-api.interceptors.request.use((config) => {
-  const stored = localStorage.getItem('auth-storage')
-  if (stored) {
-    const { state } = JSON.parse(stored)
-    if (state?.token) {
-      config.headers.Authorization = `Bearer ${state.token}`
-    }
-  }
-  return config
-})
-
-api.interceptors.response.use(
-  (response) => response,
-  async (error) => {
-    if (error.response?.status === 401) {
-      localStorage.removeItem('auth-storage')
-      window.location.href = '/login'
-    }
-    return Promise.reject(error)
-  }
-)
-
-export default api

frontend/src/main.tsx

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

frontend/src/pages/APIKeys.tsx

@@ -1,163 +0,0 @@
-import { useEffect, useState } from 'react'
-import { Plus, Trash2, Copy, Check } from 'lucide-react'
-import api from '../lib/api'
-
-interface APIKey {
-  id: string
-  name: string
-  key_prefix: string
-  created_at: string
-  last_used: string | null
-}
-
-export default function APIKeys() {
-  const [keys, setKeys] = useState<APIKey[]>([])
-  const [loading, setLoading] = useState(true)
-  const [showCreate, setShowCreate] = useState(false)
-  const [newKeyName, setNewKeyName] = useState('')
-  const [newKey, setNewKey] = useState('')
-
-  useEffect(() => {
-    fetchKeys()
-  }, [])
-
-  const fetchKeys = async () => {
-    try {
-      const response = await api.get('/api/apikeys')
-      setKeys(response.data)
-    } catch (e) {
-      console.error(e)
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  const handleCreate = async () => {
-    if (!newKeyName.trim()) return
-    try {
-      const response = await api.post('/api/apikeys', { name: newKeyName })
-      setNewKey(response.data.api_key)
-      setNewKeyName('')
-      fetchKeys()
-    } catch (e) {
-      console.error(e)
-    }
-  }
-
-  const handleDelete = async (id: string) => {
-    if (!confirm('Are you sure you want to delete this API key?')) return
-    try {
-      await api.delete(`/api/apikeys/${id}`)
-      fetchKeys()
-    } catch (e) {
-      console.error(e)
-    }
-  }
-
-  const copyKey = (key: string) => {
-    navigator.clipboard.writeText(key)
-  }
-
-  return (
-    <div className="space-y-6">
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-semibold text-white">API Keys</h1>
-          <p className="text-[var(--text-muted)] mt-1">Manage API keys for programmatic access</p>
-        </div>
-        <button onClick={() => setShowCreate(true)} className="btn btn-primary">
-          <Plus className="w-4 h-4" />
-          Create Key
-        </button>
-      </div>
-
-      {newKey && (
-        <div className="card border-amber-500/50 bg-amber-500/5">
-          <h3 className="font-medium text-amber-400 mb-2">API Key Created</h3>
-          <p className="text-sm text-[var(--text-muted)] mb-3">
-            Copy this key now. You won't be able to see it again!
-          </p>
-          <div className="flex items-center gap-2">
-            <code className="flex-1 bg-zinc-950 p-3 rounded-lg text-sm text-white font-mono break-all">
-              {newKey}
-            </code>
-            <button
-              onClick={() => copyKey(newKey)}
-              className="btn btn-secondary"
-            >
-              <Copy className="w-4 h-4" />
-            </button>
-          </div>
-          <button onClick={() => setNewKey('')} className="text-sm text-[var(--text-muted)] mt-2 hover:text-white">
-            I've copied the key
-          </button>
-        </div>
-      )}
-
-      {showCreate && !newKey && (
-        <div className="card">
-          <h3 className="font-medium text-white mb-3">Create New API Key</h3>
-          <div className="flex gap-3">
-            <input
-              type="text"
-              placeholder="Key name (e.g., 'Production')"
-              value={newKeyName}
-              onChange={(e) => setNewKeyName(e.target.value)}
-              className="input flex-1"
-            />
-            <button onClick={handleCreate} className="btn btn-primary">
-              Create
-            </button>
-            <button onClick={() => setShowCreate(false)} className="btn btn-secondary">
-              Cancel
-            </button>
-          </div>
-        </div>
-      )}
-
-      {loading ? (
-        <div className="text-[var(--text-muted)]">Loading...</div>
-      ) : keys.length === 0 ? (
-        <div className="card text-center py-12">
-          <p className="text-[var(--text-muted)]">No API keys yet</p>
-        </div>
-      ) : (
-        <div className="card overflow-hidden p-0">
-          <table className="w-full">
-            <thead className="bg-zinc-800/50">
-              <tr>
-                <th className="px-4 py-3 text-left text-xs font-medium text-[var(--text-muted)] uppercase">Name</th>
-                <th className="px-4 py-3 text-left text-xs font-medium text-[var(--text-muted)] uppercase">Key</th>
-                <th className="px-4 py-3 text-left text-xs font-medium text-[var(--text-muted)] uppercase">Created</th>
-                <th className="px-4 py-3 text-left text-xs font-medium text-[var(--text-muted)] uppercase">Last Used</th>
-                <th className="px-4 py-3 text-right text-xs font-medium text-[var(--text-muted)] uppercase">Actions</th>
-              </tr>
-            </thead>
-            <tbody className="divide-y divide-[var(--border)]">
-              {keys.map((key) => (
-                <tr key={key.id} className="hover:bg-[var(--bg-hover)]">
-                  <td className="px-4 py-3 font-medium text-white">{key.name}</td>
-                  <td className="px-4 py-3 font-mono text-sm text-[var(--text-muted)]">{key.key_prefix}</td>
-                  <td className="px-4 py-3 text-[var(--text-muted)] text-sm">
-                    {new Date(key.created_at).toLocaleDateString()}
-                  </td>
-                  <td className="px-4 py-3 text-[var(--text-muted)] text-sm">
-                    {key.last_used ? new Date(key.last_used).toLocaleDateString() : 'Never'}
-                  </td>
-                  <td className="px-4 py-3 text-right">
-                    <button
-                      onClick={() => handleDelete(key.id)}
-                      className="p-2 text-[var(--text-muted)] hover:text-red-400 hover:bg-red-500/10 rounded-lg transition-colors"
-                    >
-                      <Trash2 className="w-4 h-4" />
-                    </button>
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-      )}
-    </div>
-  )
-}

frontend/src/pages/Analytics.tsx

@@ -1,117 +0,0 @@
-import { useEffect, useState } from 'react'
-import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'recharts'
-import api from '../lib/api'
-
-interface Stats {
-  total_executions: number
-  successful: number
-  failed: number
-  success_rate: number
-  avg_latency_ms: number
-}
-
-interface ToolStats {
-  tool_id: string
-  count: number
-}
-
-export default function Analytics() {
-  const [stats, setStats] = useState<Stats | null>(null)
-  const [topTools, setTopTools] = useState<ToolStats[]>([])
-  const [executions, setExecutions] = useState<any[]>([])
-  const [loading, setLoading] = useState(true)
-
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        const [overview, tools, execData] = await Promise.all([
-          api.get('/api/analytics/overview'),
-          api.get('/api/analytics/top-tools'),
-          api.get('/api/analytics/executions?days=7')
-        ])
-        setStats(overview.data)
-        setTopTools(tools.data.tools || [])
-        setExecutions(execData.data.executions || [])
-      } catch (e) {
-        console.error(e)
-      } finally {
-        setLoading(false)
-      }
-    }
-    fetchData()
-  }, [])
-
-  if (loading) {
-    return <div className="text-[var(--text-muted)]">Loading...</div>
-  }
-
-  return (
-    <div className="space-y-6">
-      <div>
-        <h1 className="text-2xl font-semibold text-white">Analytics</h1>
-        <p className="text-[var(--text-muted)] mt-1">Usage metrics and performance insights</p>
-      </div>
-
-      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-        <div className="card">
-          <p className="text-sm text-[var(--text-muted)]">Total Executions</p>
-          <p className="text-2xl font-semibold text-white mt-1">{stats?.total_executions || 0}</p>
-        </div>
-        <div className="card">
-          <p className="text-sm text-[var(--text-muted)]">Successful</p>
-          <p className="text-2xl font-semibold text-emerald-400 mt-1">{stats?.successful || 0}</p>
-        </div>
-        <div className="card">
-          <p className="text-sm text-[var(--text-muted)]">Failed</p>
-          <p className="text-2xl font-semibold text-red-400 mt-1">{stats?.failed || 0}</p>
-        </div>
-        <div className="card">
-          <p className="text-sm text-[var(--text-muted)]">Avg Latency</p>
-          <p className="text-2xl font-semibold text-cyan-400 mt-1">{stats?.avg_latency_ms || 0}ms</p>
-        </div>
-      </div>
-
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-        <div className="card">
-          <h3 className="font-medium text-white mb-4">Execution Trend (7 days)</h3>
-          <div className="h-64">
-            <ResponsiveContainer width="100%" height="100%">
-              <BarChart data={executions}>
-                <XAxis dataKey="date" stroke="#71717a" fontSize={12} />
-                <YAxis stroke="#71717a" fontSize={12} />
-                <Tooltip
-                  contentStyle={{
-                    backgroundColor: '#18181b',
-                    border: '1px solid #27272a',
-                    borderRadius: '8px'
-                  }}
-                />
-                <Bar dataKey="count" fill="#22d3ee" radius={[4, 4, 0, 0]} />
-              </BarChart>
-            </ResponsiveContainer>
-          </div>
-        </div>
-
-        <div className="card">
-          <h3 className="font-medium text-white mb-4">Top Tools</h3>
-          <div className="space-y-3">
-            {topTools.map((tool, idx) => (
-              <div key={tool.tool_id} className="flex items-center justify-between">
-                <div className="flex items-center gap-3">
-                  <span className="w-6 h-6 bg-zinc-800 rounded flex items-center justify-center text-xs text-[var(--text-muted)]">
-                    {idx + 1}
-                  </span>
-                  <span className="font-mono text-sm text-white">{tool.tool_id}</span>
-                </div>
-                <span className="text-sm text-[var(--text-muted)]">{tool.count} calls</span>
-              </div>
-            ))}
-            {topTools.length === 0 && (
-              <p className="text-[var(--text-muted)] text-center py-4">No tool usage data yet</p>
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}

frontend/src/pages/AppDetail.tsx

@@ -1,217 +0,0 @@
-import { useEffect, useState } from 'react'
-import { useParams, useNavigate } from 'react-router-dom'
-import { ArrowLeft, Check, ExternalLink, Key, Zap } from 'lucide-react'
-import api from '../lib/api'
-import { useAuthStore } from '../stores/authStore'
-
-interface Integration {
-  id: string
-  name: string
-  description: string
-  logo_url: string
-  category: string
-  auth_type: string
-  oauth_scopes: string[]
-  tool_count: number
-  trigger_count: number
-}
-
-interface Tool {
-  id: string
-  name: string
-  description: string
-  category: string
-}
-
-export default function AppDetail() {
-  const { id } = useParams<{ id: string }>()
-  const navigate = useNavigate()
-  const { token } = useAuthStore()
-  const [integration, setIntegration] = useState<Integration | null>(null)
-  const [tools, setTools] = useState<Tool[]>([])
-  const [activeTab, setActiveTab] = useState<'overview' | 'tools' | 'setup'>('overview')
-  const [loading, setLoading] = useState(true)
-
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        const [intRes, toolsRes] = await Promise.all([
-          api.get(`/api/apps/${id}`),
-          api.get(`/api/tools?integration_id=${id}`)
-        ])
-        setIntegration(intRes.data)
-        setTools(toolsRes.data)
-      } catch (e) {
-        console.error(e)
-      } finally {
-        setLoading(false)
-      }
-    }
-    if (id) fetchData()
-  }, [id])
-
-  const handleConnect = async () => {
-    if (integration?.auth_type === 'oauth2') {
-      try {
-        const response = await api.post(`/api/apps/${id}/connect`)
-        if (response.data.auth_url) {
-          window.location.href = response.data.auth_url
-        }
-      } catch (e) {
-        console.error(e)
-      }
-    }
-  }
-
-  if (loading) {
-    return <div className="text-[var(--text-muted)]">Loading...</div>
-  }
-
-  if (!integration) {
-    return <div className="text-[var(--text-muted)]">Integration not found</div>
-  }
-
-  return (
-    <div className="space-y-6">
-      <button
-        onClick={() => navigate('/apps')}
-        className="flex items-center gap-2 text-[var(--text-muted)] hover:text-white transition-colors"
-      >
-        <ArrowLeft className="w-4 h-4" />
-        Back to Integrations
-      </button>
-
-      <div className="flex items-start gap-4">
-        <img
-          src={integration.logo_url}
-          alt={integration.name}
-          className="w-16 h-16 rounded-xl bg-zinc-800"
-        />
-        <div className="flex-1">
-          <h1 className="text-2xl font-semibold text-white">{integration.name}</h1>
-          <p className="text-[var(--text-secondary)] mt-1">{integration.description}</p>
-          <div className="flex items-center gap-3 mt-3">
-            <span className="badge bg-zinc-800 text-[var(--text-muted)]">{integration.category}</span>
-            <span className="badge bg-cyan-500/10 text-cyan-400 capitalize">{integration.auth_type}</span>
-            <span className="text-sm text-[var(--text-muted)]">{integration.tool_count} tools</span>
-          </div>
-        </div>
-        <button
-          onClick={handleConnect}
-          className="btn btn-primary"
-        >
-          <Key className="w-4 h-4" />
-          Connect
-        </button>
-      </div>
-
-      <div className="flex gap-2 border-b border-[var(--border)]">
-        {(['overview', 'tools', 'setup'] as const).map((tab) => (
-          <button
-            key={tab}
-            onClick={() => setActiveTab(tab)}
-            className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px transition-colors ${
-              activeTab === tab
-                ? 'border-cyan-500 text-cyan-400'
-                : 'border-transparent text-[var(--text-muted)] hover:text-white'
-            }`}
-          >
-            {tab.charAt(0).toUpperCase() + tab.slice(1)}
-          </button>
-        ))}
-      </div>
-
-      {activeTab === 'overview' && (
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-          <div className="card">
-            <h3 className="font-medium text-white mb-4">About</h3>
-            <p className="text-[var(--text-secondary)] text-sm">{integration.description}</p>
-            {integration.oauth_scopes && integration.oauth_scopes.length > 0 && (
-              <div className="mt-4">
-                <h4 className="text-sm font-medium text-[var(--text-muted)] mb-2">Required Permissions</h4>
-                <div className="flex flex-wrap gap-2">
-                  {integration.oauth_scopes.map((scope) => (
-                    <span key={scope} className="px-2 py-1 bg-zinc-800 rounded text-xs text-[var(--text-secondary)]">
-                      {scope}
-                    </span>
-                  ))}
-                </div>
-              </div>
-            )}
-          </div>
-          <div className="card">
-            <h3 className="font-medium text-white mb-4">Capabilities</h3>
-            <div className="space-y-3">
-              <div className="flex items-center gap-3">
-                <div className="p-2 bg-cyan-500/10 rounded-lg">
-                  <Key className="w-4 h-4 text-cyan-400" />
-                </div>
-                <div>
-                  <p className="text-sm font-medium text-white">{integration.tool_count} Tools</p>
-                  <p className="text-xs text-[var(--text-muted)]">Actions you can perform</p>
-                </div>
-              </div>
-              <div className="flex items-center gap-3">
-                <div className="p-2 bg-emerald-500/10 rounded-lg">
-                  <Zap className="w-4 h-4 text-emerald-400" />
-                </div>
-                <div>
-                  <p className="text-sm font-medium text-white">{integration.trigger_count} Triggers</p>
-                  <p className="text-xs text-[var(--text-muted)]">Event-based automation</p>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-
-      {activeTab === 'tools' && (
-        <div className="space-y-3">
-          {tools.map((tool) => (
-            <div key={tool.id} className="card">
-              <div className="flex items-start justify-between">
-                <div>
-                  <h4 className="font-medium text-white">{tool.name}</h4>
-                  <p className="text-sm text-[var(--text-muted)] mt-1">{tool.description}</p>
-                </div>
-                <span className="badge bg-zinc-800 text-[var(--text-muted)]">{tool.category}</span>
-              </div>
-            </div>
-          ))}
-          {tools.length === 0 && (
-            <div className="text-center py-8 text-[var(--text-muted)]">No tools available</div>
-          )}
-        </div>
-      )}
-
-      {activeTab === 'setup' && (
-        <div className="card">
-          <h3 className="font-medium text-white mb-4">Setup Instructions</h3>
-          <div className="space-y-4 text-sm text-[var(--text-secondary)]">
-            <div className="flex gap-3">
-              <span className="w-6 h-6 bg-cyan-500 rounded-full flex items-center justify-center text-xs font-medium text-slate-900">1</span>
-              <div>
-                <p className="text-white font-medium">Click "Connect" button above</p>
-                <p>You'll be redirected to {integration.name} to authorize access</p>
-              </div>
-            </div>
-            <div className="flex gap-3">
-              <span className="w-6 h-6 bg-zinc-700 rounded-full flex items-center justify-center text-xs font-medium text-white">2</span>
-              <div>
-                <p className="text-white font-medium">Grant permissions</p>
-                <p>Review and allow the requested scopes</p>
-              </div>
-            </div>
-            <div className="flex gap-3">
-              <span className="w-6 h-6 bg-zinc-700 rounded-full flex items-center justify-center text-xs font-medium text-white">3</span>
-              <div>
-                <p className="text-white font-medium">Start using the integration</p>
-                <p>Your connection will be saved automatically</p>
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}

frontend/src/pages/Apps.tsx

@@ -1,122 +0,0 @@
-import { useEffect, useState } from 'react'
-import { useNavigate } from 'react-router-dom'
-import { Search, ExternalLink } from 'lucide-react'
-import api from '../lib/api'
-
-interface Integration {
-  id: string
-  name: string
-  description: string
-  logo_url: string
-  category: string
-  auth_type: string
-  tool_count: number
-  trigger_count: number
-}
-
-const categories = ['All', 'Developer Tools', 'Communication', 'Productivity', 'CRM', 'Finance', 'Social']
-
-export default function Apps() {
-  const [integrations, setIntegrations] = useState<Integration[]>([])
-  const [loading, setLoading] = useState(true)
-  const [search, setSearch] = useState('')
-  const [category, setCategory] = useState('All')
-  const navigate = useNavigate()
-
-  useEffect(() => {
-    const fetchIntegrations = async () => {
-      try {
-        const params = new URLSearchParams()
-        if (search) params.append('search', search)
-        if (category !== 'All') params.append('category', category)
-        
-        const response = await api.get(`/api/apps?${params}`)
-        setIntegrations(response.data)
-      } catch (e) {
-        console.error(e)
-      } finally {
-        setLoading(false)
-      }
-    }
-    fetchIntegrations()
-  }, [search, category])
-
-  return (
-    <div className="space-y-6">
-      <div>
-        <h1 className="text-2xl font-semibold text-white">Integrations</h1>
-        <p className="text-[var(--text-muted)] mt-1">Browse and connect to 250+ external services</p>
-      </div>
-
-      <div className="flex items-center gap-4 flex-wrap">
-        <div className="relative flex-1 max-w-md">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--text-muted)]" />
-          <input
-            type="text"
-            placeholder="Search integrations..."
-            value={search}
-            onChange={(e) => setSearch(e.target.value)}
-            className="input w-full pl-10"
-          />
-        </div>
-        <div className="flex gap-2 flex-wrap">
-          {categories.map((cat) => (
-            <button
-              key={cat}
-              onClick={() => setCategory(cat)}
-              className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
-                category === cat
-                  ? 'bg-cyan-500 text-slate-900'
-                  : 'bg-zinc-800 text-[var(--text-secondary)] hover:bg-zinc-700'
-              }`}
-            >
-              {cat}
-            </button>
-          ))}
-        </div>
-      </div>
-
-      {loading ? (
-        <div className="text-center py-12 text-[var(--text-muted)]">Loading integrations...</div>
-      ) : (
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
-          {integrations.map((integration) => (
-            <div
-              key={integration.id}
-              onClick={() => navigate(`/apps/${integration.id}`)}
-              className="card hover:border-cyan-500/50 cursor-pointer transition-all hover:transform hover:-translate-y-1"
-            >
-              <div className="flex items-start gap-3">
-                <img
-                  src={integration.logo_url}
-                  alt={integration.name}
-                  className="w-10 h-10 rounded-lg bg-zinc-800"
-                />
-                <div className="flex-1 min-w-0">
-                  <h3 className="font-medium text-white">{integration.name}</h3>
-                  <p className="text-xs text-[var(--text-muted)] mt-0.5">{integration.category}</p>
-                </div>
-              </div>
-              <p className="text-sm text-[var(--text-secondary)] mt-3 line-clamp-2">
-                {integration.description}
-              </p>
-              <div className="flex items-center justify-between mt-4 pt-3 border-t border-[var(--border)]">
-                <div className="flex gap-3 text-xs text-[var(--text-muted)]">
-                  <span>{integration.tool_count} tools</span>
-                  <span>{integration.trigger_count} triggers</span>
-                </div>
-                <ExternalLink className="w-4 h-4 text-[var(--text-muted)]" />
-              </div>
-            </div>
-          ))}
-        </div>
-      )}
-
-      {!loading && integrations.length === 0 && (
-        <div className="text-center py-12 text-[var(--text-muted)]">
-          No integrations found matching your criteria
-        </div>
-      )}
-    </div>
-  )
-}

frontend/src/pages/Connections.tsx

@@ -1,132 +0,0 @@
-import { useEffect, useState } from 'react'
-import { RefreshCw, Trash2, CheckCircle, AlertCircle } from 'lucide-react'
-import api from '../lib/api'
-
-interface Connection {
-  id: string
-  integration_id: string
-  integration_name: string
-  account_label: string
-  status: string
-  connected_at: string
-  last_used: string | null
-}
-
-export default function Connections() {
-  const [connections, setConnections] = useState<Connection[]>([])
-  const [loading, setLoading] = useState(true)
-
-  useEffect(() => {
-    const fetchConnections = async () => {
-      try {
-        const response = await api.get('/api/connections')
-        setConnections(response.data)
-      } catch (e) {
-        console.error(e)
-      } finally {
-        setLoading(false)
-      }
-    }
-    fetchConnections()
-  }, [])
-
-  const handleDisconnect = async (id: string) => {
-    if (!confirm('Are you sure you want to disconnect this account?')) return
-    try {
-      await api.delete(`/api/connections/${id}`)
-      setConnections(connections.filter(c => c.id !== id))
-    } catch (e) {
-      console.error(e)
-    }
-  }
-
-  const handleRefresh = async (id: string) => {
-    try {
-      await api.post(`/api/connections/${id}/refresh`)
-      const response = await api.get('/api/connections')
-      setConnections(response.data)
-    } catch (e) {
-      console.error(e)
-    }
-  }
-
-  return (
-    <div className="space-y-6">
-      <div>
-        <h1 className="text-2xl font-semibold text-white">Connections</h1>
-        <p className="text-[var(--text-muted)] mt-1">Manage your connected accounts</p>
-      </div>
-
-      {loading ? (
-        <div className="text-[var(--text-muted)]">Loading...</div>
-      ) : connections.length === 0 ? (
-        <div className="card text-center py-12">
-          <p className="text-[var(--text-muted)]">No connections yet</p>
-          <p className="text-sm text-[var(--text-muted)] mt-1">Connect an app to get started</p>
-        </div>
-      ) : (
-        <div className="card overflow-hidden p-0">
-          <table className="w-full">
-            <thead className="bg-zinc-800/50">
-              <tr>
-                <th className="px-4 py-3 text-left text-xs font-medium text-[var(--text-muted)] uppercase">App</th>
-                <th className="px-4 py-3 text-left text-xs font-medium text-[var(--text-muted)] uppercase">Account</th>
-                <th className="px-4 py-3 text-left text-xs font-medium text-[var(--text-muted)] uppercase">Status</th>
-                <th className="px-4 py-3 text-left text-xs font-medium text-[var(--text-muted)] uppercase">Connected</th>
-                <th className="px-4 py-3 text-left text-xs font-medium text-[var(--text-muted)] uppercase">Last Used</th>
-                <th className="px-4 py-3 text-right text-xs font-medium text-[var(--text-muted)] uppercase">Actions</th>
-              </tr>
-            </thead>
-            <tbody className="divide-y divide-[var(--border)]">
-              {connections.map((conn) => (
-                <tr key={conn.id} className="hover:bg-[var(--bg-hover)]">
-                  <td className="px-4 py-3">
-                    <span className="font-medium text-white">{conn.integration_name}</span>
-                  </td>
-                  <td className="px-4 py-3 text-[var(--text-secondary)]">
-                    {conn.account_label || '-'}
-                  </td>
-                  <td className="px-4 py-3">
-                    {conn.status === 'active' ? (
-                      <span className="flex items-center gap-1 text-emerald-400 text-sm">
-                        <CheckCircle className="w-4 h-4" /> Active
-                      </span>
-                    ) : (
-                      <span className="flex items-center gap-1 text-amber-400 text-sm">
-                        <AlertCircle className="w-4 h-4" /> {conn.status}
-                      </span>
-                    )}
-                  </td>
-                  <td className="px-4 py-3 text-[var(--text-muted)] text-sm">
-                    {new Date(conn.connected_at).toLocaleDateString()}
-                  </td>
-                  <td className="px-4 py-3 text-[var(--text-muted)] text-sm">
-                    {conn.last_used ? new Date(conn.last_used).toLocaleDateString() : 'Never'}
-                  </td>
-                  <td className="px-4 py-3">
-                    <div className="flex items-center justify-end gap-2">
-                      <button
-                        onClick={() => handleRefresh(conn.id)}
-                        className="p-2 text-[var(--text-muted)] hover:text-cyan-400 hover:bg-cyan-500/10 rounded-lg transition-colors"
-                        title="Refresh"
-                      >
-                        <RefreshCw className="w-4 h-4" />
-                      </button>
-                      <button
-                        onClick={() => handleDisconnect(conn.id)}
-                        className="p-2 text-[var(--text-muted)] hover:text-red-400 hover:bg-red-500/10 rounded-lg transition-colors"
-                        title="Disconnect"
-                      >
-                        <Trash2 className="w-4 h-4" />
-                      </button>
-                    </div>
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-      )}
-    </div>
-  )
-}

frontend/src/pages/Dashboard.tsx

@@ -1,188 +0,0 @@
-import { useEffect, useState } from 'react'
-import { Activity, Plug, Zap, CheckCircle, AlertCircle, Clock } from 'lucide-react'
-import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'recharts'
-import api from '../lib/api'
-
-interface Stats {
-  total_executions: number
-  successful: number
-  failed: number
-  success_rate: number
-  avg_latency_ms: number
-}
-
-interface Execution {
-  id: string
-  tool_id: string
-  status: string
-  latency_ms: number
-  executed_at: string
-}
-
-export default function Dashboard() {
-  const [stats, setStats] = useState<Stats | null>(null)
-  const [executions, setExecutions] = useState<Execution[]>([])
-  const [loading, setLoading] = useState(true)
-
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        const [statsRes, execRes] = await Promise.all([
-          api.get('/api/analytics/overview'),
-          api.get('/api/tools/executions?limit=10')
-        ])
-        setStats(statsRes.data)
-        setExecutions(execRes.data)
-      } catch (e) {
-        console.error(e)
-      } finally {
-        setLoading(false)
-      }
-    }
-    fetchData()
-  }, [])
-
-  const metricCards = [
-    { 
-      label: 'Total Executions', 
-      value: stats?.total_executions || 0, 
-      icon: Activity,
-      color: 'text-cyan-400',
-      bg: 'bg-cyan-500/10'
-    },
-    { 
-      label: 'Connected Apps', 
-      value: '12 / 18', 
-      icon: Plug,
-      color: 'text-emerald-400',
-      bg: 'bg-emerald-500/10'
-    },
-    { 
-      label: 'Active Triggers', 
-      value: '5', 
-      icon: Zap,
-      color: 'text-amber-400',
-      bg: 'bg-amber-500/10'
-    },
-    { 
-      label: 'Success Rate', 
-      value: `${stats?.success_rate || 100}%`, 
-      icon: CheckCircle,
-      color: 'text-blue-400',
-      bg: 'bg-blue-500/10'
-    },
-  ]
-
-  return (
-    <div className="space-y-6">
-      <div>
-        <h1 className="text-2xl font-semibold text-white">Dashboard</h1>
-        <p className="text-[var(--text-muted)] mt-1">Overview of your integration platform</p>
-      </div>
-
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-        {metricCards.map((card) => (
-          <div key={card.label} className="card">
-            <div className="flex items-center justify-between">
-              <div>
-                <p className="text-sm text-[var(--text-muted)]">{card.label}</p>
-                <p className="text-2xl font-semibold text-white mt-1">{card.value}</p>
-              </div>
-              <div className={`p-3 rounded-lg ${card.bg}`}>
-                <card.icon className={`w-5 h-5 ${card.color}`} />
-              </div>
-            </div>
-          </div>
-        ))}
-      </div>
-
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-        <div className="card">
-          <h3 className="text-lg font-medium text-white mb-4">Recent Executions</h3>
-          {loading ? (
-            <div className="text-[var(--text-muted)]">Loading...</div>
-          ) : executions.length === 0 ? (
-            <div className="text-[var(--text-muted)] text-center py-8">
-              No executions yet. Start by connecting an app!
-            </div>
-          ) : (
-            <div className="space-y-3">
-              {executions.slice(0, 5).map((exec) => (
-                <div key={exec.id} className="flex items-center justify-between py-2 border-b border-[var(--border)] last:border-0">
-                  <div className="flex items-center gap-3">
-                    {exec.status === 'success' ? (
-                      <CheckCircle className="w-4 h-4 text-emerald-400" />
-                    ) : (
-                      <AlertCircle className="w-4 h-4 text-red-400" />
-                    )}
-                    <span className="text-sm font-mono text-white">{exec.tool_id}</span>
-                  </div>
-                  <div className="flex items-center gap-4 text-sm text-[var(--text-muted)]">
-                    <span className="flex items-center gap-1">
-                      <Clock className="w-3 h-3" />
-                      {exec.latency_ms}ms
-                    </span>
-                  </div>
-                </div>
-              ))}
-            </div>
-          )}
-        </div>
-
-        <div className="card">
-          <h3 className="text-lg font-medium text-white mb-4">System Health</h3>
-          <div className="space-y-4">
-            <div>
-              <div className="flex justify-between text-sm mb-1">
-                <span className="text-[var(--text-muted)]">Disk Usage</span>
-                <span className="text-white">45%</span>
-              </div>
-              <div className="h-2 bg-[var(--bg-primary)] rounded-full overflow-hidden">
-                <div className="h-full bg-cyan-500 rounded-full" style={{ width: '45%' }} />
-              </div>
-            </div>
-            <div>
-              <div className="flex justify-between text-sm mb-1">
-                <span className="text-[var(--text-muted)]">Memory</span>
-                <span className="text-white">32%</span>
-              </div>
-              <div className="h-2 bg-[var(--bg-primary)] rounded-full overflow-hidden">
-                <div className="h-full bg-emerald-500 rounded-full" style={{ width: '32%' }} />
-              </div>
-            </div>
-            <div>
-              <div className="flex justify-between text-sm mb-1">
-                <span className="text-[var(--text-muted)]">CPU</span>
-                <span className="text-white">12%</span>
-              </div>
-              <div className="h-2 bg-[var(--bg-primary)] rounded-full overflow-hidden">
-                <div className="h-full bg-amber-500 rounded-full" style={{ width: '12%' }} />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div className="card">
-        <h3 className="text-lg font-medium text-white mb-4">Execution Trends (7 days)</h3>
-        <div className="h-64">
-          <ResponsiveContainer width="100%" height="100%">
-            <LineChart data={[]}>
-              <XAxis dataKey="date" stroke="#71717a" fontSize={12} />
-              <YAxis stroke="#71717a" fontSize={12} />
-              <Tooltip 
-                contentStyle={{ 
-                  backgroundColor: '#18181b', 
-                  border: '1px solid #27272a',
-                  borderRadius: '8px'
-                }}
-              />
-              <Line type="monotone" dataKey="count" stroke="#22d3ee" strokeWidth={2} dot={false} />
-            </LineChart>
-          </ResponsiveContainer>
-        </div>
-        <p className="text-sm text-[var(--text-muted)] text-center mt-2">No data available yet</p>
-      </div>
-    </div>
-  )
-}

frontend/src/pages/Login.tsx

@@ -1,119 +0,0 @@
-import { useState } from 'react'
-import { useNavigate } from 'react-router-dom'
-import { Terminal, LogIn, UserPlus } from 'lucide-react'
-import { useAuthStore } from '../stores/authStore'
-
-export default function Login() {
-  const [isLogin, setIsLogin] = useState(true)
-  const [email, setEmail] = useState('')
-  const [password, setPassword] = useState('')
-  const [error, setError] = useState('')
-  const [loading, setLoading] = useState(false)
-  const { login, register } = useAuthStore()
-  const navigate = useNavigate()
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault()
-    setError('')
-    setLoading(true)
-
-    try {
-      if (isLogin) {
-        await login(email, password)
-      } else {
-        await register(email, password)
-        await login(email, password)
-      }
-      navigate('/')
-    } catch (err: any) {
-      setError(err.response?.data?.detail || 'An error occurred')
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  return (
-    <div className="min-h-screen bg-[var(--bg-primary)] flex items-center justify-center p-4">
-      <div className="w-full max-w-md">
-        <div className="text-center mb-8">
-          <div className="w-16 h-16 bg-cyan-500 rounded-2xl flex items-center justify-center mx-auto mb-4">
-            <Terminal className="w-8 h-8 text-slate-900" />
-          </div>
-          <h1 className="text-2xl font-semibold text-white">Platform</h1>
-          <p className="text-[var(--text-muted)] mt-1">AI Tool Integration Platform</p>
-        </div>
-
-        <div className="card">
-          <h2 className="text-lg font-medium text-white mb-6 text-center">
-            {isLogin ? 'Sign in to your account' : 'Create an account'}
-          </h2>
-
-          <form onSubmit={handleSubmit} className="space-y-4">
-            {error && (
-              <div className="p-3 bg-red-500/10 border border-red-500/30 rounded-lg text-red-400 text-sm">
-                {error}
-              </div>
-            )}
-
-            <div>
-              <label className="block text-sm text-[var(--text-muted)] mb-1">Email</label>
-              <input
-                type="email"
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-                className="input w-full"
-                placeholder="you@example.com"
-                required
-              />
-            </div>
-
-            <div>
-              <label className="block text-sm text-[var(--text-muted)] mb-1">Password</label>
-              <input
-                type="password"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                className="input w-full"
-                placeholder="••••••••"
-                required
-              />
-            </div>
-
-            <button
-              type="submit"
-              disabled={loading}
-              className="btn btn-primary w-full justify-center"
-            >
-              {loading ? (
-                'Loading...'
-              ) : isLogin ? (
-                <>
-                  <LogIn className="w-4 h-4" />
-                  Sign In
-                </>
-              ) : (
-                <>
-                  <UserPlus className="w-4 h-4" />
-                  Create Account
-                </>
-              )}
-            </button>
-          </form>
-
-          <div className="mt-6 text-center">
-            <button
-              onClick={() => setIsLogin(!isLogin)}
-              className="text-sm text-[var(--text-muted)] hover:text-cyan-400 transition-colors"
-            >
-              {isLogin ? "Don't have an account? Sign up" : 'Already have an account? Sign in'}
-            </button>
-          </div>
-        </div>
-
-        <p className="text-xs text-[var(--text-muted)] text-center mt-6">
-          Default credentials: admin@platform.local / admin123
-        </p>
-      </div>
-    </div>
-  )
-}

frontend/src/pages/Playground.tsx

@@ -1,107 +0,0 @@
-import { useEffect, useState } from 'react'
-import { Play, Send } from 'lucide-react'
-import api from '../lib/api'
-
-interface Tool {
-  id: string
-  name: string
-  description: string
-}
-
-export default function Playground() {
-  const [tools, setTools] = useState<Tool[]>([])
-  const [selectedTool, setSelectedTool] = useState<string>('')
-  const [params, setParams] = useState('')
-  const [result, setResult] = useState<string>('')
-  const [loading, setLoading] = useState(false)
-
-  useEffect(() => {
-    const fetchTools = async () => {
-      try {
-        const response = await api.get('/api/playground/tools')
-        setTools(response.data.tools || [])
-      } catch (e) {
-        console.error(e)
-      }
-    }
-    fetchTools()
-  }, [])
-
-  const handleRun = async () => {
-    setLoading(true)
-    setResult('')
-    try {
-      const parsedParams = params ? JSON.parse(params) : {}
-      const response = await api.post('/api/playground/run', {
-        tool_id: selectedTool,
-        params: parsedParams
-      })
-      setResult(JSON.stringify(response.data, null, 2))
-    } catch (e: any) {
-      setResult(`Error: ${e.response?.data?.detail || e.message}`)
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  return (
-    <div className="space-y-6">
-      <div>
-        <h1 className="text-2xl font-semibold text-white">Playground</h1>
-        <p className="text-[var(--text-muted)] mt-1">Test tools with your connected accounts</p>
-      </div>
-
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-        <div className="space-y-4">
-          <div className="card">
-            <h3 className="font-medium text-white mb-3">Select Tool</h3>
-            <select
-              value={selectedTool}
-              onChange={(e) => setSelectedTool(e.target.value)}
-              className="input w-full"
-            >
-              <option value="">Choose a tool...</option>
-              {tools.map((tool) => (
-                <option key={tool.id} value={tool.id}>
-                  {tool.name}
-                </option>
-              ))}
-            </select>
-          </div>
-
-          <div className="card">
-            <h3 className="font-medium text-white mb-3">Parameters (JSON)</h3>
-            <textarea
-              value={params}
-              onChange={(e) => setParams(e.target.value)}
-              placeholder='{"key": "value"}'
-              className="input w-full h-48 font-mono text-sm"
-            />
-          </div>
-
-          <button
-            onClick={handleRun}
-            disabled={!selectedTool || loading}
-            className="btn btn-primary w-full justify-center"
-          >
-            {loading ? (
-              'Running...'
-            ) : (
-              <>
-                <Play className="w-4 h-4" />
-                Execute Tool
-              </>
-            )}
-          </button>
-        </div>
-
-        <div className="card">
-          <h3 className="font-medium text-white mb-3">Output</h3>
-          <pre className="bg-zinc-950 p-4 rounded-lg text-sm text-[var(--text-secondary)] overflow-auto h-[400px]">
-            {result || 'Execute a tool to see results here...'}
-          </pre>
-        </div>
-      </div>
-    </div>
-  )
-}

frontend/src/pages/Settings.tsx

@@ -1,137 +0,0 @@
-import { useEffect, useState } from 'react'
-import { Save, Server } from 'lucide-react'
-import api from '../lib/api'
-
-interface Health {
-  status: string
-  disk?: { total_gb: number; used_gb: number; percent: number }
-  memory?: { total_gb: number; used_gb: number; percent: number }
-  cpu_percent?: number
-}
-
-interface Settings {
-  data_dir: string
-  platform_version: string
-  integrations_count: number
-  features: Record<string, boolean>
-}
-
-export default function Settings() {
-  const [settings, setSettings] = useState<Settings | null>(null)
-  const [health, setHealth] = useState<Health | null>(null)
-  const [loading, setLoading] = useState(true)
-
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        const [settingsRes, healthRes] = await Promise.all([
-          api.get('/api/settings'),
-          api.get('/api/settings/health')
-        ])
-        setSettings(settingsRes.data)
-        setHealth(healthRes.data)
-      } catch (e) {
-        console.error(e)
-      } finally {
-        setLoading(false)
-      }
-    }
-    fetchData()
-  }, [])
-
-  if (loading) {
-    return <div className="text-[var(--text-muted)]">Loading...</div>
-  }
-
-  return (
-    <div className="space-y-6">
-      <div>
-        <h1 className="text-2xl font-semibold text-white">Settings</h1>
-        <p className="text-[var(--text-muted)] mt-1">Platform configuration and system status</p>
-      </div>
-
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-        <div className="card">
-          <div className="flex items-center gap-2 mb-4">
-            <Server className="w-5 h-5 text-cyan-400" />
-            <h3 className="font-medium text-white">System Health</h3>
-          </div>
-          
-          {health && (
-            <div className="space-y-4">
-              <div>
-                <div className="flex justify-between text-sm mb-1">
-                  <span className="text-[var(--text-muted)]">Disk</span>
-                  <span className="text-white">{health.disk?.percent}%</span>
-                </div>
-                <div className="h-2 bg-zinc-800 rounded-full overflow-hidden">
-                  <div className="h-full bg-cyan-500 rounded-full" style={{ width: `${health.disk?.percent}%` }} />
-                </div>
-                <p className="text-xs text-[var(--text-muted)] mt-1">
-                  {health.disk?.used_gb}GB / {health.disk?.total_gb}GB
-                </p>
-              </div>
-
-              <div>
-                <div className="flex justify-between text-sm mb-1">
-                  <span className="text-[var(--text-muted)]">Memory</span>
-                  <span className="text-white">{health.memory?.percent}%</span>
-                </div>
-                <div className="h-2 bg-zinc-800 rounded-full overflow-hidden">
-                  <div className="h-full bg-emerald-500 rounded-full" style={{ width: `${health.memory?.percent}%` }} />
-                </div>
-                <p className="text-xs text-[var(--text-muted)] mt-1">
-                  {health.memory?.used_gb}GB / {health.memory?.total_gb}GB
-                </p>
-              </div>
-
-              <div>
-                <div className="flex justify-between text-sm mb-1">
-                  <span className="text-[var(--text-muted)]">CPU</span>
-                  <span className="text-white">{health.cpu_percent}%</span>
-                </div>
-                <div className="h-2 bg-zinc-800 rounded-full overflow-hidden">
-                  <div className="h-full bg-amber-500 rounded-full" style={{ width: `${health.cpu_percent}%` }} />
-                </div>
-              </div>
-            </div>
-          )}
-        </div>
-
-        <div className="card">
-          <h3 className="font-medium text-white mb-4">Platform Info</h3>
-          <div className="space-y-3">
-            <div className="flex justify-between">
-              <span className="text-[var(--text-muted)]">Version</span>
-              <span className="text-white">{settings?.platform_version}</span>
-            </div>
-            <div className="flex justify-between">
-              <span className="text-[var(--text-muted)]">Data Directory</span>
-              <span className="text-white font-mono text-sm">{settings?.data_dir}</span>
-            </div>
-            <div className="flex justify-between">
-              <span className="text-[var(--text-muted)]">Integrations</span>
-              <span className="text-white">{settings?.integrations_count}</span>
-            </div>
-          </div>
-
-          <h4 className="font-medium text-white mt-6 mb-3">Features</h4>
-          <div className="flex flex-wrap gap-2">
-            {settings?.features && Object.entries(settings.features).map(([key, enabled]) => (
-              <span
-                key={key}
-                className={`px-2 py-1 rounded text-xs font-medium ${
-                  enabled 
-                    ? 'bg-emerald-500/10 text-emerald-400' 
-                    : 'bg-zinc-800 text-[var(--text-muted)]'
-                }`}
-              >
-                {key}
-              </span>
-            ))}
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}

frontend/src/pages/Tools.tsx

@@ -1,100 +0,0 @@
-import { useEffect, useState } from 'react'
-import { Search, Play } from 'lucide-react'
-import api from '../lib/api'
-
-interface Tool {
-  id: string
-  integration_id: string
-  name: string
-  description: string
-  category: string
-}
-
-export default function Tools() {
-  const [tools, setTools] = useState<Tool[]>([])
-  const [loading, setLoading] = useState(true)
-  const [search, setSearch] = useState('')
-  const [selectedTool, setSelectedTool] = useState<Tool | null>(null)
-
-  useEffect(() => {
-    const fetchTools = async () => {
-      try {
-        const params = search ? `?search=${search}` : ''
-        const response = await api.get(`/api/tools${params}`)
-        setTools(response.data)
-      } catch (e) {
-        console.error(e)
-      } finally {
-        setLoading(false)
-      }
-    }
-    fetchTools()
-  }, [search])
-
-  const handleExecute = async (toolId: string) => {
-    try {
-      const response = await api.post(`/api/tools/${toolId}/execute`, {
-        params: {}
-      })
-      alert(`Executed: ${response.data.status}`)
-    } catch (e) {
-      console.error(e)
-    }
-  }
-
-  return (
-    <div className="space-y-6">
-      <div>
-        <h1 className="text-2xl font-semibold text-white">Tools</h1>
-        <p className="text-[var(--text-muted)] mt-1">Browse all available tools across integrations</p>
-      </div>
-
-      <div className="relative max-w-md">
-        <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--text-muted)]" />
-        <input
-          type="text"
-          placeholder="Search tools..."
-          value={search}
-          onChange={(e) => setSearch(e.target.value)}
-          className="input w-full pl-10"
-        />
-      </div>
-
-      {loading ? (
-        <div className="text-[var(--text-muted)]">Loading...</div>
-      ) : (
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-          {tools.map((tool) => (
-            <div
-              key={tool.id}
-              className="card hover:border-cyan-500/30 transition-all"
-            >
-              <div className="flex items-start justify-between">
-                <div>
-                  <h3 className="font-medium text-white">{tool.name}</h3>
-                  <p className="text-sm text-[var(--text-muted)] mt-1">{tool.description}</p>
-                </div>
-              </div>
-              <div className="flex items-center justify-between mt-4">
-                <span className="text-xs text-[var(--text-muted)] bg-zinc-800 px-2 py-1 rounded">
-                  {tool.integration_id}
-                </span>
-                <button
-                  onClick={() => handleExecute(tool.id)}
-                  className="btn btn-ghost text-sm py-1 px-2"
-                >
-                  <Play className="w-3 h-3" />
-                  Run
-                </button>
-              </div>
-            </div>
-          ))}
-        </div>
-      )}
-
-      {!loading && tools.length === 0 && (
-        <div className="text-center py-12 text-[var(--text-muted)]">No tools found</div>
-      )}
-    </div>
-  )
-}

frontend/src/stores/authStore.ts

@@ -1,54 +0,0 @@
-import { create } from 'zustand'
-import { persist } from 'zustand/middleware'
-import api from '../lib/api'
-
-interface User {
-  id: string
-  email: string
-}
-
-interface AuthState {
-  token: string | null
-  refreshToken: string | null
-  user: User | null
-  login: (email: string, password: string) => Promise<void>
-  logout: () => void
-  register: (email: string, password: string) => Promise<void>
-}
-
-export const useAuthStore = create<AuthState>()(
-  persist(
-    (set) => ({
-      token: null,
-      refreshToken: null,
-      user: null,
-      
-      login: async (email: string, password: string) => {
-        const formData = new URLSearchParams()
-        formData.append('username', email)
-        formData.append('password', password)
-        
-        const response = await api.post('/api/auth/login', formData, {
-          headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
-        })
-        
-        set({
-          token: response.data.access_token,
-          refreshToken: response.data.refresh_token,
-          user: response.data.user
-        })
-      },
-      
-      logout: () => {
-        set({ token: null, refreshToken: null, user: null })
-      },
-      
-      register: async (email: string, password: string) => {
-        await api.post('/api/auth/register', { email, password })
-      }
-    }),
-    {
-      name: 'auth-storage'
-    }
-  )
-)

frontend/tailwind.config.ts

@@ -1,23 +1,20 @@
 import type { Config } from 'tailwindcss'
 
-export default {
+const config: Config = {
   content: [
-    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
+    './src/**/*.{js,ts,jsx,tsx,mdx}',
   ],
   theme: {
     extend: {
       colors: {
-        slate: {
-          850: '#1e293b',
-          900: '#0f172a',
-          950: '#020617',
-        }
-      },
-      fontFamily: {
-        sans: ['Inter', 'system-ui', 'sans-serif'],
+        bg: { primary: '#09090b', secondary: '#111113', tertiary: '#18181b', hover: '#1f1f23' },
+        border: { DEFAULT: '#27272a', focus: '#3f3f46' },
+        text: { primary: '#fafafa', secondary: '#a1a1aa', muted: '#71717a', dim: '#52525b' },
+        accent: { cyan: '#06b6d4', cyanLight: '#22d3ee', green: '#10b981', amber: '#f59e0b', blue: '#3b82f6', red: '#ef4444' },
       },
+      fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
     },
   },
   plugins: [],
-} satisfies Config
+}
+export default config

frontend/tsconfig.json

@@ -1,23 +1,41 @@
 {
   "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
+    "target": "ES2017",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
     "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
     "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx",
-    "strict": true,
-    "noUnusedLocals": false,
-    "noUnusedParameters": false,
-    "noFallthroughCasesInSwitch": true,
-    "allowSyntheticDefaultImports": true,
-    "esModuleInterop": true
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    }
   },
-  "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
-}
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules",
+    "_src"
+  ]
+}

frontend/tsconfig.node.json

@@ -1,10 +0,0 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "skipLibCheck": true,
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true
-  },
-  "include": ["vite.config.ts"]
-}