Complete frontend rebuild: 11 pages, professional composio-level design, connections/playground pages, fixed tailwind config

backend/routers/playground.py

@@ -1,4 +1,4 @@
-from fastapi import APIRouter, Depends
+from fastapi import APIRouter, Depends, HTTPException
 from sqlalchemy.orm import Session
 from pydantic import BaseModel
 from typing import List, Optional, Dict, Any
@@ -26,8 +26,50 @@ class PlaygroundChatRequest(BaseModel):
     allowed_tools: List[str] = []
 
 
-@router.post("/run")
-async def run_playground(
+class EvaluateRequest(BaseModel):
+    code: str
+
+
+@router.post("/evaluate")
+async def evaluate_code(
+    request: EvaluateRequest,
+    current_user: User = Depends(get_current_user),
+    db: Session = Depends(get_db)
+):
+    """Evaluate sandboxed code for the playground."""
+    import json
+    import re
+    
+    code = request.code
+    
+    # Parse composio_execute_tool calls
+    matches = re.findall(r'composio_execute_tool\("(\w+)",\s*"(\w+)",\s*({[^}]+})\)', code)
+    
+    results = []
+    for integration_id, tool_id, params_str in matches:
+        try:
+            params = json.loads(params_str)
+        except json.JSONDecodeError:
+            params = {"raw": params_str}
+        
+        from backend.database import Tool
+        tool = db.query(Tool).filter(Tool.id == tool_id).first()
+        
+        results.append({
+            "integration_id": integration_id,
+            "tool_id": tool_id,
+            "tool_name": tool.name if tool else tool_id,
+            "params": params,
+            "status": "parsed",
+            "message": f"Would execute {tool_id} with params: {json.dumps(params)}"
+        })
+    
+    return {
+        "status": "success",
+        "evaluated": True,
+        "calls_found": len(matches),
+        "results": results
+    }
     request: PlaygroundRequest,
     current_user: User = Depends(get_current_user),
     db: Session = Depends(get_db)

frontend/app/analytics/page.tsx

@@ -3,7 +3,7 @@
 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'
+import { Activity, CheckCircle, XCircle, Clock, TrendingUp, BarChart3 } from 'lucide-react'
 
 export default function AnalyticsPage() {
   const [stats, setStats] = useState<Stats | null>(null)
@@ -16,44 +16,111 @@ export default function AnalyticsPage() {
   }, [])
 
   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' },
+    { label: 'Total Executions', value: stats?.total_executions ?? 0, icon: Activity, color: 'text-accent-cyan', bg: 'bg-accent-cyan/10' },
+    { label: 'Successful', value: stats?.successful ?? 0, icon: CheckCircle, color: 'text-accent-green', bg: 'bg-accent-green/10' },
+    { label: 'Failed', value: stats?.failed ?? 0, icon: XCircle, color: 'text-accent-red', bg: 'bg-accent-red/10' },
+    { label: 'Avg Latency', value: `${stats?.avg_latency_ms ?? 0}ms`, icon: Clock, color: 'text-accent-amber', bg: 'bg-accent-amber/10' },
   ]
 
   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 className="h-14 bg-bg-secondary/80 backdrop-blur-xl border-b border-border flex items-center px-6 sticky top-0 z-10">
+          <div className="flex items-center gap-3">
+            <h1 className="text-base font-semibold">Analytics</h1>
+          </div>
         </header>
         <div className="flex-1 p-6 space-y-6 overflow-auto">
-          <div className="grid grid-cols-4 gap-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4">
             {metrics.map((m) => (
-              <div key={m.label} className="bg-bg-tertiary border border-border rounded-xl p-5">
+              <div key={m.label} className="bg-bg-tertiary border border-border rounded-xl p-5 card-hover">
                 <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>
+                    <p className="text-2xl font-bold mt-1">{loading ? <span className="bg-bg-hover rounded w-16 h-8 block animate-pulse" /> : m.value}</p>
+                  </div>
+                  <div className={`w-10 h-10 ${m.bg} rounded-lg flex items-center justify-center`}>
+                    <m.icon className={`w-5 h-5 ${m.color}`} />
                   </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 className="grid grid-cols-1 xl:grid-cols-2 gap-6">
+            {/* Success Rate */}
+            <div className="bg-bg-tertiary border border-border rounded-xl p-6">
+              <h3 className="text-sm font-semibold flex items-center gap-2 mb-5">
+                <CheckCircle className="w-4 h-4 text-accent-green" />
+                Success Rate
+              </h3>
+              <div className="flex items-center gap-4">
+                <div className="flex-1 h-4 bg-bg-secondary rounded-full overflow-hidden">
+                  <div className="h-full bg-gradient-to-r from-accent-green to-accent-cyan rounded-full transition-all duration-500" style={{ width: `${stats?.success_rate ?? 100}%` }} />
+                </div>
+                <span className="text-lg font-bold">{stats?.success_rate ?? 100}%</span>
+              </div>
+              {stats && (
+                <div className="flex items-center justify-between mt-4 pt-4 border-t border-border text-xs text-text-muted">
+                  <span>{stats.successful} successful</span>
+                  <span>{stats.failed} failed</span>
+                </div>
+              )}
+            </div>
+
+            {/* Latency */}
+            <div className="bg-bg-tertiary border border-border rounded-xl p-6">
+              <h3 className="text-sm font-semibold flex items-center gap-2 mb-5">
+                <Clock className="w-4 h-4 text-accent-amber" />
+                Average Latency
+              </h3>
+              <div className="flex items-center gap-4">
+                <div className="flex-1 h-4 bg-bg-secondary rounded-full overflow-hidden">
+                  <div className="h-full bg-gradient-to-r from-accent-amber to-accent-cyan rounded-full transition-all duration-500" style={{ width: `${Math.min((stats?.avg_latency_ms ?? 0) / 20, 100)}%` }} />
+                </div>
+                <span className="text-lg font-bold">{stats?.avg_latency_ms ?? 0}ms</span>
+              </div>
+              <div className="mt-4 pt-4 border-t border-border">
+                <div className="flex items-center gap-2 text-xs text-text-muted">
+                  <BarChart3 className="w-3.5 h-3.5" />
+                  Performance metrics are updated in real-time
+                </div>
               </div>
-              <span className="text-sm font-medium">{stats?.success_rate ?? 100}%</span>
             </div>
           </div>
+
+          {/* Quick Stats */}
+          <div className="bg-bg-tertiary border border-border rounded-xl p-6">
+            <h3 className="text-sm font-semibold flex items-center gap-2 mb-4">
+              <TrendingUp className="w-4 h-4 text-accent-cyan" />
+              Usage Summary
+            </h3>
+            {loading ? (
+              <div className="animate-pulse space-y-3">
+                {Array.from({ length: 3 }).map((_, i) => <div key={i} className="h-4 bg-bg-hover rounded w-full" />)}
+              </div>
+            ) : stats ? (
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                <div className="bg-bg-secondary border border-border rounded-xl p-4">
+                  <p className="text-[10px] text-text-muted uppercase tracking-wider font-medium mb-1">Success Rate</p>
+                  <p className="text-xl font-bold text-accent-green">{stats.success_rate}%</p>
+                </div>
+                <div className="bg-bg-secondary border border-border rounded-xl p-4">
+                  <p className="text-[10px] text-text-muted uppercase tracking-wider font-medium mb-1">Total Calls</p>
+                  <p className="text-xl font-bold text-accent-cyan">{stats.total_executions}</p>
+                </div>
+                <div className="bg-bg-secondary border border-border rounded-xl p-4">
+                  <p className="text-[10px] text-text-muted uppercase tracking-wider font-medium mb-1">Avg Latency</p>
+                  <p className="text-xl font-bold text-accent-amber">{stats.avg_latency_ms}ms</p>
+                </div>
+              </div>
+            ) : (
+              <p className="text-text-muted text-sm">No analytics data yet</p>
+            )}
+          </div>
         </div>
       </main>
     </div>
   )
-}
+}

frontend/app/api-keys/page.tsx

@@ -1,26 +1,175 @@
 'use client'
 
+import { useEffect, useState } from 'react'
 import { Sidebar } from '@/components/sidebar'
-import { Key, Server } from 'lucide-react'
+import { api, type APIKey } from '@/lib/api'
+import { Key, Plus, Copy, Check, Trash2, Eye, EyeOff, Calendar, Clock } from 'lucide-react'
 
 export default function APIKeysPage() {
+  const [keys, setKeys] = useState<APIKey[]>([])
+  const [loading, setLoading] = useState(true)
+  const [showCreate, setShowCreate] = useState(false)
+  const [newKeyName, setNewKeyName] = useState('')
+  const [newKeyValue, setNewKeyValue] = useState('')
+  const [copied, setCopied] = useState(false)
+  const [showKey, setShowKey] = useState(false)
+
+  const fetchKeys = () => {
+    api.get<APIKey[]>('/api/apikeys')
+      .then(setKeys)
+      .catch(() => setKeys([]))
+      .finally(() => setLoading(false))
+  }
+
+  useEffect(() => { fetchKeys() }, [])
+
+  const handleCreate = async () => {
+    if (!newKeyName.trim()) return
+    const data = await api.post<{ id: string; key: string; name: string }>('/api/apikeys', { name: newKeyName })
+    setNewKeyValue(data.key)
+    setShowCreate(false)
+    setNewKeyName('')
+    fetchKeys()
+  }
+
+  const handleDelete = async (id: string) => {
+    await api.delete(`/api/apikeys/${id}`)
+    fetchKeys()
+  }
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(newKeyValue)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
   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 className="h-14 bg-bg-secondary/80 backdrop-blur-xl border-b border-border flex items-center justify-between px-6 sticky top-0 z-10">
+          <div className="flex items-center gap-3">
+            <h1 className="text-base font-semibold">API Keys</h1>
+            <span className="text-xs text-text-muted bg-bg-tertiary border border-border px-2 py-0.5 rounded-md">{keys.length} keys</span>
+          </div>
+          <button onClick={() => setShowCreate(true)}
+            className="px-3 py-1.5 bg-accent-cyan hover:bg-accent-cyanLight text-bg-primary text-xs font-semibold rounded-lg transition-colors flex items-center gap-1.5 shadow-lg shadow-accent-cyan/20"
+          >
+            <Plus className="w-3.5 h-3.5" /> Create Key
+          </button>
         </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 className="flex-1 p-6 overflow-auto">
+          {/* Create Modal */}
+          {showCreate && (
+            <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
+              <div className="bg-bg-tertiary border border-border rounded-2xl p-6 w-full max-w-md shadow-2xl animate-fade-in">
+                <h3 className="text-base font-semibold mb-4">Create API Key</h3>
+                <input
+                  type="text"
+                  value={newKeyName}
+                  onChange={(e) => setNewKeyName(e.target.value)}
+                  className="w-full px-3.5 py-2.5 bg-bg-secondary border border-border rounded-xl text-sm text-text-primary placeholder:text-text-dim focus:outline-none focus:border-accent-cyan"
+                  placeholder="Key name (e.g., Production, Dev)"
+                  autoFocus
+                  onKeyDown={(e) => e.key === 'Enter' && handleCreate()}
+                />
+                <div className="flex justify-end gap-2 mt-4">
+                  <button onClick={() => setShowCreate(false)}
+                    className="px-4 py-2 bg-bg-secondary border border-border text-text-secondary text-xs font-medium rounded-lg hover:text-text-primary transition-colors">
+                    Cancel
+                  </button>
+                  <button onClick={handleCreate}
+                    className="px-4 py-2 bg-accent-cyan hover:bg-accent-cyanLight text-bg-primary text-xs font-semibold rounded-lg transition-colors">
+                    Create
+                  </button>
+                </div>
+              </div>
             </div>
-            <p className="text-sm text-text-muted">Generate API keys for programmatic access to the platform.</p>
-          </div>
+          )}
+
+          {/* New Key Display */}
+          {newKeyValue && (
+            <div className="mb-4 p-4 bg-accent-green/5 border border-accent-green/20 rounded-xl animate-fade-in">
+              <div className="flex items-center gap-2 mb-2">
+                <Key className="w-4 h-4 text-accent-green" />
+                <span className="text-sm font-semibold text-accent-green">Key Created</span>
+              </div>
+              <p className="text-xs text-text-muted mb-3">Copy this key now. You won&apos;t be able to see it again.</p>
+              <div className="flex items-center gap-2">
+                <div className="flex-1 bg-bg-secondary border border-border rounded-lg px-3 py-2">
+                  <span className="text-xs font-mono">{showKey ? newKeyValue : '••••••••••••••••'}</span>
+                </div>
+                <button onClick={() => setShowKey(!showKey)} className="p-2 text-text-muted hover:text-text-primary rounded-lg hover:bg-bg-hover">
+                  {showKey ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+                </button>
+                <button onClick={handleCopy} className="p-2 text-text-muted hover:text-text-primary rounded-lg hover:bg-bg-hover">
+                  {copied ? <Check className="w-4 h-4 text-accent-green" /> : <Copy className="w-4 h-4" />}
+                </button>
+              </div>
+            </div>
+          )}
+
+          {/* Keys List */}
+          {loading ? (
+            <div className="space-y-2">
+              {Array.from({ length: 3 }).map((_, i) => (
+                <div key={i} className="bg-bg-tertiary border border-border rounded-xl p-5 animate-pulse">
+                  <div className="flex items-center gap-4"><div className="flex-1"><div className="h-3 bg-bg-hover rounded w-32 mb-1" /><div className="h-2 bg-bg-hover rounded w-20" /></div></div>
+                </div>
+              ))}
+            </div>
+          ) : keys.length === 0 && !newKeyValue ? (
+            <div className="flex flex-col items-center justify-center py-20">
+              <div className="w-16 h-16 bg-bg-tertiary border border-border rounded-2xl flex items-center justify-center mb-4">
+                <Key className="w-6 h-6 text-text-dim" />
+              </div>
+              <p className="text-text-muted font-medium">No API keys</p>
+              <p className="text-text-dim text-sm mt-1">Create a key for programmatic access</p>
+              <button onClick={() => setShowCreate(true)}
+                className="mt-4 px-4 py-2 bg-accent-cyan hover:bg-accent-cyanLight text-bg-primary text-xs font-medium rounded-lg transition-colors flex items-center gap-1.5">
+                <Plus className="w-3.5 h-3.5" /> Create First Key
+              </button>
+            </div>
+          ) : (
+            <div className="space-y-2">
+              {keys.map((k) => (
+                <div key={k.id} className="bg-bg-tertiary border border-border rounded-xl p-5 card-hover">
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-4">
+                      <div className="w-10 h-10 bg-accent-cyan/10 rounded-lg flex items-center justify-center">
+                        <Key className="w-5 h-5 text-accent-cyan" />
+                      </div>
+                      <div>
+                        <p className="text-sm font-semibold">{k.name}</p>
+                        <div className="flex items-center gap-2 mt-0.5">
+                          <span className="text-xs font-mono text-text-muted">{k.key_preview}</span>
+                          <span className="text-text-dim">·</span>
+                          <span className="text-[10px] text-text-muted flex items-center gap-1">
+                            <Calendar className="w-3 h-3" /> {new Date(k.created_at).toLocaleDateString()}
+                          </span>
+                          {k.last_used && (
+                            <>
+                              <span className="text-text-dim">·</span>
+                              <span className="text-[10px] text-text-muted flex items-center gap-1">
+                                <Clock className="w-3 h-3" /> Last used {new Date(k.last_used).toLocaleDateString()}
+                              </span>
+                            </>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                    <button onClick={() => handleDelete(k.id)}
+                      className="p-2 text-text-muted hover:text-accent-red hover:bg-accent-red/10 rounded-lg transition-colors">
+                      <Trash2 className="w-4 h-4" />
+                    </button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
         </div>
       </main>
     </div>
   )
-}
+}

frontend/app/apps/page.tsx

@@ -4,15 +4,14 @@ 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']
+import { Search, ArrowUpRight, Grid3X3, List } from 'lucide-react'
 
 export default function AppsPage() {
   const [integrations, setIntegrations] = useState<Integration[]>([])
   const [loading, setLoading] = useState(true)
-  const [category, setCategory] = useState('All')
+  const [category, setCategory] = useState('all')
   const [search, setSearch] = useState('')
+  const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid')
 
   useEffect(() => {
     api.get<Integration[]>('/api/apps')
@@ -20,8 +19,10 @@ export default function AppsPage() {
       .catch(() => setLoading(false))
   }, [])
 
+  const categories = ['all', ...new Set(integrations.map(i => i.category).filter(Boolean))].slice(0, 12)
+
   const filtered = integrations.filter((i) => {
-    const matchCat = category === 'All' || i.category === category
+    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
   })
@@ -30,61 +31,126 @@ export default function AppsPage() {
     <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)}
-            />
+        <header className="h-14 bg-bg-secondary/80 backdrop-blur-xl border-b border-border flex items-center justify-between px-6 sticky top-0 z-10">
+          <div className="flex items-center gap-3">
+            <h1 className="text-base font-semibold">Apps</h1>
+            {!loading && <span className="text-xs text-text-muted bg-bg-tertiary border border-border px-2 py-0.5 rounded-md">{integrations.length} total</span>}
+          </div>
+          <div className="flex items-center gap-3">
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-text-dim" />
+              <input
+                className="pl-8 pr-4 py-1.5 bg-bg-tertiary border border-border rounded-lg text-xs text-text-primary placeholder:text-text-dim focus:outline-none focus:border-accent-cyan w-56"
+                placeholder="Search apps..."
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+              />
+            </div>
+            <div className="flex border border-border rounded-lg overflow-hidden">
+              <button onClick={() => setViewMode('grid')} className={`p-1.5 ${viewMode === 'grid' ? 'bg-accent-cyan/10 text-accent-cyanLight' : 'text-text-muted hover:text-text-primary'}`}>
+                <Grid3X3 className="w-3.5 h-3.5" />
+              </button>
+              <button onClick={() => setViewMode('list')} className={`p-1.5 ${viewMode === 'list' ? 'bg-accent-cyan/10 text-accent-cyanLight' : 'text-text-muted hover:text-text-primary'}`}>
+                <List className="w-3.5 h-3.5" />
+              </button>
+            </div>
           </div>
         </header>
         <div className="flex-1 p-6 overflow-auto">
+          {/* Categories */}
           <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>
+                className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-all capitalize ${category === c
+                  ? 'bg-accent-cyan text-bg-primary shadow-lg shadow-accent-cyan/20'
+                  : 'bg-bg-tertiary border border-border text-text-secondary hover:text-text-primary hover:border-accent-cyan/30'
+                }`}
+              >
+                {c.replace(/_/g, ' ')}
+              </button>
             ))}
           </div>
+
+          {/* Grid */}
           {loading ? (
-            <div className="grid grid-cols-4 gap-4">
+            <div className={viewMode === 'grid' ? 'grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4' : 'space-y-2'}>
               {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 className="w-10 h-10 bg-bg-hover rounded-lg shrink-0" />
+                    <div className="flex-1"><div className="h-3 bg-bg-hover rounded w-20 mb-1.5" /><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">
+            <div className="flex flex-col items-center justify-center py-20">
+              <div className="w-16 h-16 bg-bg-tertiary border border-border rounded-2xl flex items-center justify-center mb-4">
+                <Search className="w-6 h-6 text-text-dim" />
+              </div>
+              <p className="text-text-muted font-medium">No apps found</p>
+              <p className="text-text-dim text-sm mt-1">Try adjusting your search or filters</p>
+            </div>
+          ) : viewMode === 'grid' ? (
+            <div className="grid grid-cols-2 md:grid-cols-3 lg: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">
+                <Link key={i.id} href={`/connect?id=${i.id}`}
+                  className="bg-bg-tertiary border border-border rounded-xl p-5 card-hover 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">
+                    <div className="w-10 h-10 bg-bg-secondary rounded-lg flex items-center justify-center overflow-hidden border border-border shrink-0">
                       <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 className="min-w-0">
+                      <p className="text-sm font-semibold truncate">{i.name}</p>
+                      <p className="text-[10px] text-text-muted capitalize truncate">{i.category?.replace(/_/g, ' ')}</p>
                     </div>
                   </div>
-                  <p className="text-xs text-text-secondary leading-relaxed line-clamp-2 mb-4">{i.description}</p>
+                  <p className="text-xs text-text-secondary leading-relaxed line-clamp-2 mb-4 h-8">{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">
+                    <div className="flex items-center gap-2">
+                      <span className="text-[10px] text-text-dim">{i.tool_count} tools</span>
+                      <span className={`text-[10px] px-1.5 py-0.5 rounded font-medium ${
+                        i.auth_type === 'oauth2'
+                          ? 'bg-accent-cyan/10 text-accent-cyanLight'
+                          : i.auth_type === 'api_key'
+                            ? 'bg-accent-green/10 text-accent-green'
+                            : 'bg-accent-amber/10 text-accent-amber'
+                      }`}>
+                        {i.auth_type}
+                      </span>
+                    </div>
+                    <span className="text-[10px] text-accent-cyan opacity-0 group-hover:opacity-100 transition-opacity flex items-center gap-0.5 font-medium">
+                      Connect <ArrowUpRight className="w-2.5 h-2.5" />
+                    </span>
+                  </div>
+                </Link>
+              ))}
+            </div>
+          ) : (
+            <div className="space-y-1">
+              {filtered.map((i) => (
+                <Link key={i.id} href={`/connect?id=${i.id}`}
+                  className="flex items-center gap-4 px-4 py-3 bg-bg-tertiary border border-border rounded-lg card-hover group"
+                >
+                  <div className="w-9 h-9 bg-bg-secondary rounded-lg flex items-center justify-center overflow-hidden border border-border shrink-0">
+                    <img src={i.logo_url} alt={i.name} className="w-5 h-5" onError={(e) => (e.currentTarget.style.display = 'none')} />
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm font-medium truncate">{i.name}</p>
+                    <p className="text-xs text-text-muted truncate">{i.description}</p>
+                  </div>
+                  <div className="flex items-center gap-3 shrink-0">
+                    <span className="text-xs text-text-dim">{i.tool_count} tools</span>
+                    <span className={`text-[10px] px-1.5 py-0.5 rounded font-medium ${
+                      i.auth_type === 'oauth2' ? 'bg-accent-cyan/10 text-accent-cyanLight' : 'bg-accent-green/10 text-accent-green'
+                    }`}>{i.auth_type}</span>
+                    <span className="text-xs text-accent-cyan font-medium opacity-0 group-hover:opacity-100 transition-opacity flex items-center gap-0.5">
                       Connect <ArrowUpRight className="w-3 h-3" />
-                    </Link>
+                    </span>
                   </div>
-                </div>
+                </Link>
               ))}
             </div>
           )}
@@ -92,4 +158,4 @@ export default function AppsPage() {
       </main>
     </div>
   )
-}
+}

frontend/app/connect/page.tsx

@@ -3,49 +3,34 @@
 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
-}
+import { api, type AuthConfig, type Integration } from '@/lib/api'
+import { ArrowLeft, Loader2, Check, Key, ExternalLink, Shield, Eye, EyeOff } from 'lucide-react'
 
 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 [integration, setIntegration] = useState<Integration | null>(null)
   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)
+  const [showSecrets, setShowSecrets] = useState<Record<string, boolean>>({})
 
   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),
+      api.get<Integration>(`/api/apps/${id}`).catch(() => null),
+      api.get<AuthConfig>(`/api/auth-configs/integration/${id}`).catch(() => null),
     ]).then(([app, cfg]) => {
-      setIntegrationName(app.name || id)
+      setIntegration(app)
       setConfig(cfg)
       setLoading(false)
       if (cfg) {
         const init: Record<string, string> = {}
-        cfg.fields.forEach((f: AuthField) => { init[f.name] = f.default || '' })
+        cfg.fields.forEach((f) => { init[f.name] = f.default || '' })
         setValues(init)
       }
     }).catch(() => setLoading(false))
@@ -56,91 +41,143 @@ function ConnectContent() {
     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 api.post<{ message: string; connection_id: string }>(`/api/connections/connect?integration_id=${id}`, {
+        credentials: values,
+        account_label: `${integration?.name || id}`,
       })
-      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) }
+      setTimeout(() => router.push('/connections'), 1500)
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Connection failed')
+    } finally { setSubmitting(false) }
   }
 
+  if (!id) return null
+
   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">
+        <header className="h-14 bg-bg-secondary/80 backdrop-blur-xl border-b border-border flex items-center px-6 sticky top-0 z-10">
+          <button onClick={() => router.back()} className="flex items-center gap-2 text-text-muted hover:text-text-primary transition-colors mr-4 p-1 -ml-1">
             <ArrowLeft className="w-4 h-4" />
           </button>
-          <h1 className="text-base font-medium">Connect {integrationName}</h1>
+          <h1 className="text-base font-semibold">Connect {integration?.name || id}</h1>
         </header>
-        <div className="flex-1 flex items-center justify-center p-6">
+        <div className="flex-1 flex items-start justify-center p-6 pt-12">
           {loading ? (
-            <div className="text-text-muted">Loading...</div>
+            <div className="flex flex-col items-center gap-3 text-text-muted">
+              <Loader2 className="w-6 h-6 animate-spin" />
+              <span className="text-sm">Loading configuration...</span>
+            </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 className="bg-bg-tertiary border border-accent-green/20 rounded-2xl p-10 text-center max-w-md animate-fade-in">
+              <div className="w-14 h-14 bg-accent-green/10 rounded-full flex items-center justify-center mx-auto mb-5 border border-accent-green/20">
+                <Check className="w-7 h-7 text-accent-green" />
+              </div>
+              <h2 className="text-lg font-semibold mb-2">Connected!</h2>
+              <p className="text-sm text-text-muted mb-6">{integration?.name} has been connected successfully</p>
+              <div className="flex gap-3 justify-center">
+                <button onClick={() => router.push('/connections')} className="px-4 py-2 bg-accent-cyan text-bg-primary text-xs font-medium rounded-lg hover:bg-accent-cyanLight transition-colors">
+                  View Connections
+                </button>
+                <button onClick={() => router.push('/apps')} className="px-4 py-2 bg-bg-secondary border border-border text-text-secondary text-xs font-medium rounded-lg hover:text-text-primary transition-colors">
+                  Browse Apps
+                </button>
               </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 className="bg-bg-tertiary border border-border rounded-2xl p-10 text-center max-w-md">
+              <div className="w-14 h-14 bg-accent-amber/10 rounded-full flex items-center justify-center mx-auto mb-5 border border-accent-amber/20">
+                <Key className="w-7 h-7 text-accent-amber" />
+              </div>
+              <h2 className="text-lg font-semibold mb-2">No Auth Configuration</h2>
+              <p className="text-sm text-text-muted mb-2">This integration doesn&apos;t have a credential schema configured.</p>
+              <p className="text-xs text-text-dim mb-6">Define what credentials are needed in Settings</p>
+              <button onClick={() => router.push('/settings')} className="px-4 py-2 bg-accent-cyan text-bg-primary text-xs font-medium rounded-lg hover:bg-accent-cyanLight transition-colors">
+                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 className="bg-bg-tertiary border border-border rounded-2xl p-8 w-full max-w-lg animate-fade-in">
+              <div className="flex items-center gap-4 mb-6 pb-6 border-b border-border">
+                <div className="w-12 h-12 bg-bg-secondary border border-border rounded-xl flex items-center justify-center overflow-hidden shrink-0">
+                  <img src={integration?.logo_url} alt={integration?.name} className="w-7 h-7" onError={(e) => (e.currentTarget.style.display = 'none')} />
                 </div>
                 <div>
-                  <h2 className="text-base font-semibold">{integrationName}</h2>
-                  <p className="text-xs text-text-muted capitalize">{config.auth_type} authentication</p>
+                  <h2 className="text-base font-semibold">{integration?.name || id}</h2>
+                  <div className="flex items-center gap-2 mt-0.5">
+                    <span className={`text-[10px] px-1.5 py-0.5 rounded font-medium ${
+                      config.auth_type === 'oauth2' ? 'bg-accent-cyan/10 text-accent-cyanLight' : 'bg-accent-green/10 text-accent-green'
+                    }`}>{config.auth_type}</span>
+                    <span className="text-xs text-text-muted">{integration?.tool_count || 0} tools</span>
+                  </div>
                 </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>}
+
+              {error && (
+                <div className="mb-5 p-3.5 bg-accent-red/10 border border-accent-red/20 rounded-xl text-accent-red text-xs flex items-start gap-2.5">
+                  <XCircle className="w-4 h-4 mt-0.5 shrink-0" />
+                  <span>{error}</span>
+                </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 className="block text-xs text-text-muted mb-1.5 font-medium">
+                      {field.label}
+                      {field.required && <span className="text-accent-red ml-0.5">*</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 className="relative">
+                      <input
+                        type={field.type === 'password' && !showSecrets[field.name] ? 'password' : 'text'}
+                        value={values[field.name] || ''}
+                        onChange={(e) => setValues(prev => ({ ...prev, [field.name]: e.target.value }))}
+                        className="w-full px-3.5 py-2.5 bg-bg-secondary border border-border rounded-xl text-sm text-text-primary placeholder:text-text-dim focus:outline-none focus:border-accent-cyan transition-colors pr-10"
+                        placeholder={field.description || field.label}
+                        required={field.required}
+                      />
+                      {field.type === 'password' && (
+                        <button type="button" onClick={() => setShowSecrets(prev => ({ ...prev, [field.name]: !prev[field.name] }))}
+                          className="absolute right-3 top-1/2 -translate-y-1/2 text-text-muted hover:text-text-primary"
+                        >
+                          {showSecrets[field.name] ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+                        </button>
+                      )}
+                    </div>
+                    {field.description && values[field.name] && (
+                      <p className="text-[10px] text-text-dim mt-1">{field.description}</p>
+                    )}
                   </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>
+
+                {config.auth_type === 'oauth2' && (
+                  <div className="pt-4">
+                    <div className="relative">
+                      <div className="absolute inset-0 flex items-center">
+                        <div className="w-full border-t border-border" />
+                      </div>
+                      <div className="relative flex justify-center text-xs">
+                        <span className="px-3 bg-bg-tertiary text-text-muted">or connect via OAuth</span>
+                      </div>
+                    </div>
                     <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"
+                      className="mt-4 w-full flex items-center justify-center gap-2 py-2.5 bg-bg-secondary border border-border hover:border-accent-cyan/40 text-text-primary text-sm font-medium rounded-xl transition-all hover:bg-bg-hover"
                     >
+                      <ExternalLink className="w-4 h-4" />
                       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"
+                  className="w-full py-2.5 bg-gradient-to-r from-accent-cyan to-accent-blue hover:from-accent-cyanLight hover:to-accent-blue text-bg-primary font-semibold text-sm rounded-xl transition-all disabled:opacity-50 flex items-center justify-center gap-2 shadow-lg shadow-accent-cyan/20"
                 >
-                  {submitting ? <><Loader2 className="w-4 h-4 animate-spin" /> Connecting...</> : 'Connect'}
+                  {submitting ? <><Loader2 className="w-4 h-4 animate-spin" /> Connecting...</> : <><Shield className="w-4 h-4" /> Connect {integration?.name || id}</>}
                 </button>
               </form>
             </div>
@@ -151,10 +188,18 @@ function ConnectContent() {
   )
 }
 
+function XCircle(props: { className?: string }) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={props.className}>
+      <circle cx="12" cy="12" r="10" /><path d="m15 9-6 6" /><path d="m9 9 6 6" />
+    </svg>
+  )
+}
+
 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>}>
+    <Suspense fallback={<div className="flex min-h-screen"><div className="flex-1 flex items-center justify-center"><Loader2 className="w-6 h-6 animate-spin text-text-muted" /></div></div>}>
       <ConnectContent />
     </Suspense>
   )
-}
+}

frontend/app/connections/page.tsx

@@ -0,0 +1,122 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import Link from 'next/link'
+import { Sidebar } from '@/components/sidebar'
+import { api, type Connection } from '@/lib/api'
+import { Link2, Search, ExternalLink, Trash2, RefreshCw, CheckCircle, XCircle, Clock } from 'lucide-react'
+
+export default function ConnectionsPage() {
+  const [connections, setConnections] = useState<Connection[]>([])
+  const [loading, setLoading] = useState(true)
+  const [search, setSearch] = useState('')
+
+  const fetchConnections = () => {
+    setLoading(true)
+    api.get<Connection[]>('/api/connections')
+      .then(setConnections)
+      .catch(() => setConnections([]))
+      .finally(() => setLoading(false))
+  }
+
+  useEffect(() => { fetchConnections() }, [])
+
+  const handleDisconnect = async (id: string) => {
+    await api.delete(`/api/connections/${id}`)
+    fetchConnections()
+  }
+
+  const filtered = connections.filter(c =>
+    !search || c.integration_name.toLowerCase().includes(search.toLowerCase()) || c.account_label?.toLowerCase().includes(search.toLowerCase())
+  )
+
+  return (
+    <div className="flex min-h-screen">
+      <Sidebar connectionCount={connections.length} />
+      <main className="flex-1 flex flex-col">
+        <header className="h-14 bg-bg-secondary/80 backdrop-blur-xl border-b border-border flex items-center justify-between px-6 sticky top-0 z-10">
+          <div className="flex items-center gap-3">
+            <h1 className="text-base font-semibold">Connections</h1>
+            <span className="text-xs text-text-muted bg-bg-tertiary border border-border px-2 py-0.5 rounded-md">{connections.length} active</span>
+          </div>
+          <div className="flex items-center gap-3">
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-text-dim" />
+              <input className="pl-8 pr-4 py-1.5 bg-bg-tertiary border border-border rounded-lg text-xs text-text-primary placeholder:text-text-dim focus:outline-none focus:border-accent-cyan w-56" placeholder="Search connections..." value={search} onChange={(e) => setSearch(e.target.value)} />
+            </div>
+            <button onClick={fetchConnections} className="p-1.5 text-text-muted hover:text-text-primary hover:bg-bg-hover rounded-lg transition-colors" title="Refresh">
+              <RefreshCw className="w-4 h-4" />
+            </button>
+          </div>
+        </header>
+        <div className="flex-1 p-6 overflow-auto">
+          {loading ? (
+            <div className="space-y-2">
+              {Array.from({ length: 3 }).map((_, i) => (
+                <div key={i} className="bg-bg-tertiary border border-border rounded-xl p-5 animate-pulse">
+                  <div className="flex items-center gap-4"><div className="w-10 h-10 bg-bg-hover rounded-lg" /><div className="flex-1"><div className="h-3 bg-bg-hover rounded w-32 mb-1" /><div className="h-2 bg-bg-hover rounded w-20" /></div></div>
+                </div>
+              ))}
+            </div>
+          ) : filtered.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-20">
+              <div className="w-16 h-16 bg-bg-tertiary border border-border rounded-2xl flex items-center justify-center mb-4">
+                <Link2 className="w-6 h-6 text-text-dim" />
+              </div>
+              <p className="text-text-muted font-medium">{connections.length === 0 ? 'No connections yet' : 'No matches'}</p>
+              <p className="text-text-dim text-sm mt-1">
+                {connections.length === 0 ? 'Connect your first app to get started' : 'Try adjusting your search'}
+              </p>
+              {connections.length === 0 && (
+                <Link href="/apps" className="mt-4 px-4 py-2 bg-accent-cyan hover:bg-accent-cyanLight text-bg-primary text-xs font-medium rounded-lg transition-colors">
+                  Browse Apps
+                </Link>
+              )}
+            </div>
+          ) : (
+            <div className="space-y-2">
+              {filtered.map((c) => (
+                <div key={c.id} className="bg-bg-tertiary border border-border rounded-xl p-5 card-hover">
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-4">
+                      <div className="w-10 h-10 bg-bg-secondary border border-border rounded-lg flex items-center justify-center overflow-hidden shrink-0">
+                        <img src={`https://logos.composio.dev/api/${c.integration_id}`} alt={c.integration_name} className="w-6 h-6" onError={(e) => (e.currentTarget.style.display = 'none')} />
+                      </div>
+                      <div>
+                        <p className="text-sm font-semibold">{c.account_label || c.integration_name}</p>
+                        <div className="flex items-center gap-2 mt-0.5">
+                          <span className="text-xs text-text-muted">{c.integration_name}</span>
+                          <span className="text-text-dim">·</span>
+                          <span className={`text-[10px] flex items-center gap-1 ${c.status === 'active' ? 'text-accent-green' : 'text-text-muted'}`}>
+                            {c.status === 'active' ? <CheckCircle className="w-3 h-3" /> : <XCircle className="w-3 h-3" />}
+                            {c.status}
+                          </span>
+                          <span className="text-text-dim">·</span>
+                          <span className="text-[10px] text-text-muted flex items-center gap-1">
+                            <Clock className="w-3 h-3" />
+                            {new Date(c.connected_at).toLocaleDateString()}
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      {c.metadata?.auth_type === 'oauth2' && (
+                        <span className="text-[10px] bg-accent-cyan/10 text-accent-cyanLight px-2 py-0.5 rounded font-medium">OAuth 2.0</span>
+                      )}
+                      <Link href={`/connect?id=${c.integration_id}`} className="p-2 text-text-muted hover:text-accent-cyan hover:bg-accent-cyan/10 rounded-lg transition-colors" title="Reconnect">
+                        <ExternalLink className="w-3.5 h-3.5" />
+                      </Link>
+                      <button onClick={() => handleDisconnect(c.id)} className="p-2 text-text-muted hover:text-accent-red hover:bg-accent-red/10 rounded-lg transition-colors" title="Disconnect">
+                        <Trash2 className="w-3.5 h-3.5" />
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </main>
+    </div>
+  )
+}

frontend/app/globals.css

@@ -2,21 +2,56 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
-  --background: #09090b;
-  --foreground: #fafafa;
+@layer base {
+  :root {
+    --bg-primary: 9 9 11;
+    --bg-secondary: 17 17 19;
+    --bg-tertiary: 24 24 27;
+    --bg-hover: 31 31 35;
+    --border: 39 39 42;
+    --border-focus: 63 63 70;
+    --text-primary: 250 250 250;
+    --text-secondary: 161 161 170;
+    --text-muted: 113 113 122;
+    --text-dim: 82 82 91;
+    --accent-cyan: 6 182 212;
+    --accent-cyanLight: 34 211 238;
+    --accent-green: 16 185 129;
+    --accent-amber: 245 158 11;
+    --accent-blue: 59 130 246;
+    --accent-red: 239 68 68;
+  }
 }
 
-* { box-sizing: border-box; }
+@layer base {
+  * { @apply border-border; }
+  body {
+    @apply bg-bg-primary text-text-primary antialiased;
+    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+  }
+}
 
-body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: 'Inter', system-ui, sans-serif;
-  -webkit-font-smoothing: antialiased;
+@layer utilities {
+  .glass {
+    @apply bg-bg-tertiary/80 backdrop-blur-xl border border-border;
+  }
+  .card-hover {
+    @apply transition-all duration-200 hover:border-accent-cyan/30 hover:shadow-lg hover:shadow-accent-cyan/5;
+  }
+  .text-gradient {
+    @apply bg-gradient-to-r from-accent-cyan via-accent-cyanLight to-accent-blue bg-clip-text text-transparent;
+  }
 }
 
-::-webkit-scrollbar { width: 6px; }
-::-webkit-scrollbar-track { background: #111113; }
-::-webkit-scrollbar-thumb { background: #27272a; border-radius: 3px; }
-::-webkit-scrollbar-thumb:hover { background: #3f3f46; }
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: rgb(var(--bg-secondary)); }
+::-webkit-scrollbar-thumb { background: rgb(var(--border)); border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: rgb(var(--border-focus)); }
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.animate-fade-in {
+  animation: fadeIn 0.3s ease-out;
+}

frontend/app/layout.tsx

@@ -5,16 +5,16 @@ 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',
+  title: 'Compost - AI Tool Integration Platform',
+  description: 'Unified platform for AI agent tool integration. Connect 1000+ apps with managed auth, execute tools, and build automations.',
 }
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en">
-      <body className={`${inter.variable} font-sans bg-bg-primary text-text-primary`}>
+    <html lang="en" className="dark">
+      <body className={`${inter.variable} font-sans`}>
         {children}
       </body>
     </html>
   )
-}
+}

frontend/app/login/page.tsx

@@ -1,12 +1,14 @@
 'use client'
 
 import { useState } from 'react'
+import { Plug, Eye, EyeOff } from 'lucide-react'
 
 export default function LoginPage() {
-  const [email, setEmail] = useState('')
-  const [password, setPassword] = useState('')
+  const [email, setEmail] = useState('admin@platform.local')
+  const [password, setPassword] = useState('admin123')
   const [error, setError] = useState('')
   const [loading, setLoading] = useState(false)
+  const [showPwd, setShowPwd] = useState(false)
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
@@ -31,31 +33,56 @@ export default function LoginPage() {
   }
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-bg-primary">
-      <div className="w-full max-w-sm">
+    <div className="min-h-screen flex items-center justify-center bg-bg-primary relative overflow-hidden">
+      <div className="absolute inset-0 overflow-hidden">
+        <div className="absolute -top-40 -right-40 w-80 h-80 bg-accent-cyan/5 rounded-full blur-3xl" />
+        <div className="absolute -bottom-40 -left-40 w-80 h-80 bg-accent-blue/5 rounded-full blur-3xl" />
+      </div>
+      <div className="w-full max-w-sm relative z-10">
         <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>
+          <div className="w-16 h-16 bg-gradient-to-br from-accent-cyan to-accent-blue rounded-2xl flex items-center justify-center mx-auto mb-5 shadow-lg shadow-accent-cyan/20">
+            <span className="font-bold text-2xl text-bg-primary">C</span>
+          </div>
+          <h1 className="text-2xl font-bold">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>}
+        <div className="bg-bg-tertiary/80 backdrop-blur-xl border border-border rounded-2xl p-6 shadow-xl">
+          {error && (
+            <div className="mb-4 p-3 bg-accent-red/10 border border-accent-red/20 rounded-xl text-accent-red text-xs flex items-center gap-2.5">
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="shrink-0"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>
+              {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 />
+              <label className="block text-xs text-text-muted mb-1.5 font-medium">Email</label>
+              <input type="email" value={email} onChange={(e) => setEmail(e.target.value)}
+                className="w-full px-3.5 py-2.5 bg-bg-secondary border border-border rounded-xl text-sm text-text-primary placeholder:text-text-dim focus:outline-none focus:border-accent-cyan transition-colors"
+                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 />
+              <label className="block text-xs text-text-muted mb-1.5 font-medium">Password</label>
+              <div className="relative">
+                <input type={showPwd ? 'text' : 'password'} value={password} onChange={(e) => setPassword(e.target.value)}
+                  className="w-full px-3.5 py-2.5 bg-bg-secondary border border-border rounded-xl text-sm text-text-primary placeholder:text-text-dim focus:outline-none focus:border-accent-cyan transition-colors pr-10"
+                  placeholder="••••••••" required />
+                <button type="button" onClick={() => setShowPwd(!showPwd)}
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-text-muted hover:text-text-primary">
+                  {showPwd ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+                </button>
+              </div>
             </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 type="submit" disabled={loading}
+              className="w-full py-2.5 bg-gradient-to-r from-accent-cyan to-accent-blue hover:from-accent-cyanLight hover:to-accent-blue text-bg-primary font-semibold text-sm rounded-xl transition-all disabled:opacity-50 flex items-center justify-center gap-2 shadow-lg shadow-accent-cyan/20"
+            >
+              {loading ? <><span className="w-4 h-4 border-2 border-bg-primary border-t-transparent rounded-full animate-spin" /> Signing in...</> : <><Plug className="w-4 h-4" /> Sign In</>}
             </button>
           </form>
         </div>
-        <p className="text-center text-xs text-text-dim mt-4">Default: admin@platform.local / admin123</p>
+        <p className="text-center text-xs text-text-dim mt-4">
+          Default credentials: <span className="text-text-muted font-mono">admin@platform.local</span> / <span className="text-text-muted font-mono">admin123</span>
+        </p>
       </div>
     </div>
   )
-}
+}

frontend/app/page.tsx

@@ -1,90 +1,247 @@
 'use client'
 
 import { useEffect, useState } from 'react'
+import Link from 'next/link'
 import { Sidebar } from '@/components/sidebar'
-import { api, type Integration, type Stats } from '@/lib/api'
-import { Activity, Plug, Zap, CheckCircle, Clock } from 'lucide-react'
+import { api, type Integration, type Connection, type Stats } from '@/lib/api'
+import { Activity, Plug, CheckCircle, Clock, ArrowUpRight, Zap, Server, TrendingUp, BarChart3 } from 'lucide-react'
 
 export default function DashboardPage() {
   const [integrations, setIntegrations] = useState<Integration[]>([])
+  const [connections, setConnections] = useState<Connection[]>([])
   const [stats, setStats] = useState<Stats | null>(null)
   const [loading, setLoading] = useState(true)
 
   useEffect(() => {
     Promise.all([
       api.get<Integration[]>('/api/apps').catch(() => []),
+      api.get<Connection[]>('/api/connections').catch(() => []),
       api.get<Stats>('/api/analytics/overview').catch(() => null),
-    ]).then(([apps, s]) => {
+    ]).then(([apps, conns, s]) => {
       setIntegrations(apps)
+      setConnections(conns)
       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' },
+    { label: 'Total Executions', value: stats?.total_executions ?? 0, icon: Activity, color: 'text-accent-cyan', bg: 'bg-accent-cyan/10' },
+    { label: 'Integrations', value: integrations.length, icon: Server, color: 'text-accent-blue', bg: 'bg-accent-blue/10' },
+    { label: 'Connections', value: connections.length, icon: Plug, color: 'text-accent-green', bg: 'bg-accent-green/10' },
+    { label: 'Success Rate', value: stats?.success_rate != null ? `${stats.success_rate}%` : '-', icon: CheckCircle, color: stats?.success_rate != null && stats.success_rate > 90 ? 'text-accent-green' : 'text-accent-amber', bg: 'bg-accent-amber/10' },
   ]
 
+  const recentConnections = connections.slice(0, 5)
+
   return (
     <div className="flex min-h-screen">
-      <Sidebar integrationCount={integrations.length} />
+      <Sidebar integrationCount={integrations.length} connectionCount={connections.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 className="h-14 bg-bg-secondary/80 backdrop-blur-xl border-b border-border flex items-center justify-between px-6 sticky top-0 z-10">
+          <div className="flex items-center gap-3">
+            <h1 className="text-base font-semibold">Dashboard</h1>
+          </div>
+          <div className="flex items-center gap-3">
+            <span className="text-[11px] text-text-muted bg-bg-tertiary border border-border px-3 py-1 rounded-full">
+              <span className="inline-block w-1.5 h-1.5 bg-accent-green rounded-full mr-1.5 animate-pulse" />
+              All systems operational
+            </span>
+          </div>
         </header>
+
         <div className="flex-1 p-6 space-y-6 overflow-auto">
-          <div className="grid grid-cols-4 gap-4">
+          {/* Metrics Grid */}
+          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4">
             {metrics.map((m) => (
-              <div key={m.label} className="bg-bg-tertiary border border-border rounded-xl p-5">
+              <div key={m.label} className="bg-bg-tertiary border border-border rounded-xl p-5 card-hover">
                 <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>
+                    <p className={`text-2xl font-bold mt-1 ${loading ? 'animate-pulse' : ''}`}>
+                      {loading ? <span className="bg-bg-hover rounded w-16 h-8 block" /> : m.value}
+                    </p>
+                  </div>
+                  <div className={`w-10 h-10 ${m.bg} rounded-lg flex items-center justify-center`}>
+                    <m.icon className={`w-5 h-5 ${m.color}`} />
                   </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 className="grid grid-cols-1 xl:grid-cols-2 gap-6">
+            {/* Quick Connect */}
+            <div className="bg-bg-tertiary border border-border rounded-xl">
+              <div className="px-6 py-4 border-b border-border flex items-center justify-between">
+                <h3 className="text-sm font-semibold flex items-center gap-2">
+                  <Zap className="w-4 h-4 text-accent-cyan" />
+                  Quick Connect
+                </h3>
+                <Link href="/apps" className="text-xs text-accent-cyan hover:text-accent-cyanLight flex items-center gap-1">
+                  View all <ArrowUpRight className="w-3 h-3" />
+                </Link>
               </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 className="p-6">
+                {loading ? (
+                  <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
+                    {Array.from({ length: 4 }).map((_, i) => (
+                      <div key={i} className="bg-bg-secondary border border-border rounded-lg p-4 animate-pulse">
+                        <div className="w-8 h-8 bg-bg-hover rounded-lg mb-2" />
+                        <div className="h-3 bg-bg-hover rounded w-16" />
                       </div>
-                      <div>
-                        <p className="text-sm font-medium">{i.name}</p>
-                        <p className="text-[11px] text-text-muted">{i.category}</p>
+                    ))}
+                  </div>
+                ) : integrations.length === 0 ? (
+                  <div className="text-center py-8">
+                    <Plug className="w-10 h-10 text-text-dim mx-auto mb-3" />
+                    <p className="text-text-muted text-sm">No integrations available</p>
+                    <p className="text-text-dim text-xs mt-1">Set COMPOSIO_API_KEY to sync all 1000+ tools</p>
+                  </div>
+                ) : (
+                  <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
+                    {integrations.slice(0, 8).map((i) => {
+                      const isConnected = connections.some(c => c.integration_id === i.id)
+                      return (
+                        <Link key={i.id} href={`/connect?id=${i.id}`}
+                          className="bg-bg-secondary border border-border rounded-lg p-3.5 card-hover group"
+                        >
+                          <div className="flex items-center gap-2.5 mb-2.5">
+                            <div className="w-8 h-8 bg-bg-tertiary rounded-lg flex items-center justify-center overflow-hidden border border-border">
+                              <img src={i.logo_url} alt={i.name} className="w-5 h-5" onError={(e) => (e.currentTarget.style.display = 'none')} />
+                            </div>
+                            <div className="min-w-0">
+                              <p className="text-xs font-medium truncate">{i.name}</p>
+                              <p className="text-[10px] text-text-muted truncate">{i.category}</p>
+                            </div>
+                          </div>
+                          <div className="flex items-center justify-between">
+                            <span className="text-[10px] text-text-dim">{i.tool_count} tools</span>
+                            {isConnected ? (
+                              <span className="text-[10px] text-accent-green flex items-center gap-1">
+                                <span className="w-1.5 h-1.5 bg-accent-green rounded-full" />
+                                Connected
+                              </span>
+                            ) : (
+                              <span className="text-[10px] text-accent-cyan group-hover:text-accent-cyanLight font-medium">
+                                Connect
+                              </span>
+                            )}
+                          </div>
+                        </Link>
+                      )
+                    })}
+                  </div>
+                )}
+              </div>
+            </div>
+
+            {/* Recent Connections */}
+            <div className="bg-bg-tertiary border border-border rounded-xl">
+              <div className="px-6 py-4 border-b border-border flex items-center justify-between">
+                <h3 className="text-sm font-semibold flex items-center gap-2">
+                  <Plug className="w-4 h-4 text-accent-green" />
+                  Recent Connections
+                </h3>
+                <Link href="/connections" className="text-xs text-accent-cyan hover:text-accent-cyanLight flex items-center gap-1">
+                  View all <ArrowUpRight className="w-3 h-3" />
+                </Link>
+              </div>
+              <div className="p-6">
+                {loading ? (
+                  <div className="space-y-3">
+                    {Array.from({ length: 3 }).map((_, i) => (
+                      <div key={i} className="flex items-center gap-3 animate-pulse">
+                        <div className="w-9 h-9 bg-bg-hover rounded-lg" />
+                        <div className="flex-1"><div className="h-3 bg-bg-hover rounded w-24 mb-1" /><div className="h-2 bg-bg-hover rounded w-16" /></div>
                       </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>
-                ))}
+                ) : recentConnections.length === 0 ? (
+                  <div className="text-center py-6">
+                    <Link2 className="w-8 h-8 text-text-dim mx-auto mb-2" />
+                    <p className="text-text-muted text-sm">No connections yet</p>
+                    <p className="text-text-dim text-xs mt-1">Connect your first app</p>
+                  </div>
+                ) : (
+                  <div className="space-y-2">
+                    {recentConnections.map((c) => (
+                      <Link key={c.id} href={`/connections`}
+                        className="flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-bg-hover transition-colors group"
+                      >
+                        <div className="w-9 h-9 bg-bg-secondary border border-border rounded-lg flex items-center justify-center">
+                          <img src={`https://logos.composio.dev/api/${c.integration_id}`} alt={c.integration_name} className="w-5 h-5" onError={(e) => (e.currentTarget.style.display = 'none')} />
+                        </div>
+                        <div className="flex-1 min-w-0">
+                          <p className="text-sm font-medium truncate">{c.account_label || c.integration_name}</p>
+                          <p className="text-[11px] text-text-muted">
+                            {c.status === 'active' ? 'Connected' : c.status} · {new Date(c.connected_at).toLocaleDateString()}
+                          </p>
+                        </div>
+                        <span className="text-[10px] text-accent-green flex items-center gap-1.5">
+                          <span className="w-1.5 h-1.5 bg-accent-green rounded-full" />
+                          Active
+                        </span>
+                      </Link>
+                    ))}
+                  </div>
+                )}
               </div>
-            )}
+            </div>
           </div>
+
+          {/* Success Rate Bar */}
+          {stats && (
+            <div className="bg-bg-tertiary border border-border rounded-xl p-6">
+              <div className="flex items-center justify-between mb-4">
+                <h3 className="text-sm font-semibold flex items-center gap-2">
+                  <TrendingUp className="w-4 h-4 text-accent-cyan" />
+                  Performance Overview
+                </h3>
+                <span className="text-xs text-text-muted">Last 24 hours</span>
+              </div>
+              <div className="grid grid-cols-3 gap-6">
+                <div>
+                  <div className="flex items-center justify-between mb-2">
+                    <span className="text-xs text-text-muted">Success Rate</span>
+                    <span className="text-sm font-semibold">{stats.success_rate}%</span>
+                  </div>
+                  <div className="h-2 bg-bg-secondary rounded-full overflow-hidden">
+                    <div className="h-full bg-gradient-to-r from-accent-green to-accent-cyan rounded-full transition-all" style={{ width: `${stats.success_rate}%` }} />
+                  </div>
+                </div>
+                <div>
+                  <div className="flex items-center justify-between mb-2">
+                    <span className="text-xs text-text-muted">Avg Latency</span>
+                    <span className="text-sm font-semibold">{stats.avg_latency_ms}ms</span>
+                  </div>
+                  <div className="h-2 bg-bg-secondary rounded-full overflow-hidden">
+                    <div className="h-full bg-accent-amber rounded-full" style={{ width: `${Math.min(stats.avg_latency_ms / 20, 100)}%` }} />
+                  </div>
+                </div>
+                <div>
+                  <div className="flex items-center justify-between mb-2">
+                    <span className="text-xs text-text-muted">Total Calls</span>
+                    <span className="text-sm font-semibold">{stats.total_executions}</span>
+                  </div>
+                  <div className="h-2 bg-bg-secondary rounded-full overflow-hidden">
+                    <div className="h-full bg-accent-blue rounded-full" style={{ width: `${Math.min((stats.total_executions / 1000) * 100, 100)}%` }} />
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
         </div>
       </main>
     </div>
   )
-}
+}
+
+function Link2(props: { className?: string }) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={props.className}>
+      <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
+      <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
+    </svg>
+  )
+}

frontend/app/playground/page.tsx

@@ -0,0 +1,125 @@
+'use client'
+
+import { useState, useRef } from 'react'
+import { Sidebar } from '@/components/sidebar'
+import { api, type ToolExecution } from '@/lib/api'
+import { Play, Terminal, Upload, Trash2, Copy, Check } from 'lucide-react'
+
+export default function PlaygroundPage() {
+  const [code, setCode] = useState(`# Try executing a tool
+# Example: call composio_execute_tool("github", "GITHUB_GET_USER", {"username": "octocat"})
+
+composio_execute_tool("github", "GITHUB_LIST_REPOS", {"owner": "octocat"})
+`)
+  const [output, setOutput] = useState('')
+  const [executing, setExecuting] = useState(false)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
+  const handleExecute = async () => {
+    setExecuting(true)
+    setOutput('')
+    try {
+      const match = code.match(/composio_execute_tool\("(\w+)",\s*"(\w+)",\s*({[^}]+})\)/)
+      if (match) {
+        const [_, integrationId, toolId, paramsStr] = match
+        let params = {}
+        try { params = JSON.parse(paramsStr) } catch { params = { raw: paramsStr } }
+        const result = await api.post<ToolExecution>(`/api/tools/${toolId}/execute`, { params })
+        setOutput(JSON.stringify(result, null, 2))
+      } else {
+        // Try direct tool execution
+        const lines = code.split('\n').filter(l => l.trim() && !l.trim().startsWith('#'))
+        if (lines.length > 0) {
+          try {
+            const evalResult = await api.post<Record<string, unknown>>('/api/playground/evaluate', { code })
+            setOutput(JSON.stringify(evalResult, null, 2))
+          } catch {
+            setOutput(`Error: Could not parse tool call.\n\nExpected format:\ncomposio_execute_tool("integration", "TOOL_NAME", {"param": "value"})`)
+          }
+        }
+      }
+    } catch (err: unknown) {
+      setOutput(`Error: ${err instanceof Error ? err.message : 'Execution failed'}`)
+    } finally { setExecuting(false) }
+  }
+
+  const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    if (file) {
+      const reader = new FileReader()
+      reader.onload = (ev) => setCode(ev.target?.result as string)
+      reader.readAsText(file)
+    }
+  }
+
+  const [copied, setCopied] = useState(false)
+  const handleCopy = () => {
+    navigator.clipboard.writeText(output)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  return (
+    <div className="flex min-h-screen">
+      <Sidebar />
+      <main className="flex-1 flex flex-col">
+        <header className="h-14 bg-bg-secondary/80 backdrop-blur-xl border-b border-border flex items-center justify-between px-6 sticky top-0 z-10">
+          <div className="flex items-center gap-3">
+            <h1 className="text-base font-semibold">Playground</h1>
+          </div>
+          <div className="flex items-center gap-2">
+            <input type="file" ref={fileInputRef} onChange={handleFileUpload} className="hidden" accept=".py,.js,.txt,.json" />
+            <button onClick={() => fileInputRef.current?.click()} className="px-3 py-1.5 bg-bg-tertiary border border-border text-text-secondary hover:text-text-primary text-xs font-medium rounded-lg transition-colors flex items-center gap-1.5">
+              <Upload className="w-3.5 h-3.5" /> Import
+            </button>
+            <button onClick={() => setCode('')} className="px-3 py-1.5 bg-bg-tertiary border border-border text-text-secondary hover:text-text-primary text-xs font-medium rounded-lg transition-colors flex items-center gap-1.5">
+              <Trash2 className="w-3.5 h-3.5" /> Clear
+            </button>
+            <button
+              onClick={handleExecute}
+              disabled={executing}
+              className="px-4 py-1.5 bg-gradient-to-r from-accent-cyan to-accent-blue hover:from-accent-cyanLight hover:to-accent-blue text-bg-primary text-xs font-semibold rounded-lg transition-all disabled:opacity-50 flex items-center gap-1.5 shadow-lg shadow-accent-cyan/20"
+            >
+              {executing ? <><span className="w-3 h-3 border-2 border-bg-primary border-t-transparent rounded-full animate-spin" /> Running...</> : <><Play className="w-3.5 h-3.5" /> Execute</>}
+            </button>
+          </div>
+        </header>
+        <div className="flex-1 flex overflow-hidden">
+          {/* Code Editor */}
+          <div className="w-1/2 border-r border-border flex flex-col">
+            <div className="px-4 py-2.5 border-b border-border bg-bg-tertiary flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <Terminal className="w-3.5 h-3.5 text-accent-cyan" />
+                <span className="text-[10px] font-medium text-text-muted uppercase tracking-wider">Input</span>
+              </div>
+              <span className="text-[10px] text-text-dim">Python · Sandbox</span>
+            </div>
+            <textarea
+              value={code}
+              onChange={(e) => setCode(e.target.value)}
+              className="flex-1 w-full p-4 bg-bg-secondary text-xs font-mono text-text-primary resize-none focus:outline-none leading-relaxed"
+              spellCheck={false}
+            />
+          </div>
+          {/* Output */}
+          <div className="w-1/2 flex flex-col">
+            <div className="px-4 py-2.5 border-b border-border bg-bg-tertiary flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <Terminal className="w-3.5 h-3.5 text-accent-green" />
+                <span className="text-[10px] font-medium text-text-muted uppercase tracking-wider">Output</span>
+              </div>
+              {output && (
+                <button onClick={handleCopy} className="flex items-center gap-1 text-[10px] text-text-muted hover:text-text-primary transition-colors">
+                  {copied ? <><Check className="w-3 h-3" /> Copied</> : <><Copy className="w-3 h-3" /> Copy</>}
+                </button>
+              )}
+            </div>
+            <pre className="flex-1 p-4 bg-bg-secondary text-xs font-mono text-text-primary overflow-auto whitespace-pre-wrap leading-relaxed">
+              {output || 'Output will appear here...'}
+            </pre>
+          </div>
+        </div>
+      </main>
+    </div>
+  )
+}

frontend/app/settings/page.tsx

@@ -1,40 +1,249 @@
 'use client'
 
+import { useEffect, useState } from 'react'
 import { Sidebar } from '@/components/sidebar'
-import { Server, Database, Shield } from 'lucide-react'
+import { api, type AuthConfig, type Integration } from '@/lib/api'
+import { Server, Database, Shield, Key, Edit3, Plus, X, Check, ExternalLink, Save } from 'lucide-react'
+
+interface AuthField {
+  name: string
+  label: string
+  type: string
+  required: boolean
+  description: string
+  default: string
+}
+
+interface ConfigWithIntegration {
+  id: string
+  integration_id: string
+  integration_name: string
+  auth_type: string
+  fields: AuthField[]
+  oauth_authorize_url: string | null
+  oauth_token_url: string | null
+  is_active: boolean
+}
 
 export default function SettingsPage() {
+  const [configs, setConfigs] = useState<ConfigWithIntegration[]>([])
+  const [loading, setLoading] = useState(true)
+  const [editing, setEditing] = useState<string | null>(null)
+  const [editForm, setEditForm] = useState<Partial<ConfigWithIntegration>>({})
+
+  useEffect(() => {
+    api.get<ConfigWithIntegration[]>('/api/auth-configs').then(setConfigs).catch(() => setConfigs([])).finally(() => setLoading(false))
+  }, [])
+
+  const startEdit = (c: ConfigWithIntegration) => {
+    setEditing(c.id)
+    setEditForm({ ...c, fields: c.fields.map(f => ({ ...f })) })
+  }
+
+  const saveEdit = async () => {
+    if (!editForm.integration_id) return
+    await api.post(`/api/auth-configs`, editForm)
+    setEditing(null)
+    api.get<ConfigWithIntegration[]>('/api/auth-configs').then(setConfigs)
+  }
+
+  const addField = () => {
+    setEditForm(prev => ({
+      ...prev,
+      fields: [...(prev.fields || []), { name: '', label: '', type: 'text', required: false, description: '', default: '' }]
+    }))
+  }
+
+  const removeField = (idx: number) => {
+    setEditForm(prev => ({
+      ...prev,
+      fields: prev.fields?.filter((_, i) => i !== idx) || []
+    }))
+  }
+
+  const updateField = (idx: number, key: keyof AuthField, value: string | boolean) => {
+    setEditForm(prev => ({
+      ...prev,
+      fields: prev.fields?.map((f, i) => i === idx ? { ...f, [key]: value } : f) || []
+    }))
+  }
+
   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 className="h-14 bg-bg-secondary/80 backdrop-blur-xl border-b border-border flex items-center px-6 sticky top-0 z-10">
+          <h1 className="text-base font-semibold">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 className="flex-1 p-6 space-y-6 overflow-auto">
+          {/* System Info */}
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <div className="bg-bg-tertiary border border-border rounded-xl p-5">
+              <div className="flex items-center gap-3 mb-4">
+                <div className="w-9 h-9 bg-accent-cyan/10 rounded-lg flex items-center justify-center"><Server className="w-5 h-5 text-accent-cyan" /></div>
+                <h3 className="text-sm font-semibold">System</h3>
+              </div>
+              <div className="space-y-2.5 text-sm">
+                <div className="flex justify-between"><span className="text-text-muted text-xs">Version</span><span className="text-xs font-mono">1.0.0</span></div>
+                <div className="flex justify-between"><span className="text-text-muted text-xs">Data Dir</span><span className="text-xs font-mono text-accent-cyan">/data</span></div>
+                <div className="flex justify-between"><span className="text-text-muted text-xs">Status</span><span className="text-xs text-accent-green flex items-center gap-1"><span className="w-1.5 h-1.5 bg-accent-green rounded-full" /> Healthy</span></div>
+              </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 className="bg-bg-tertiary border border-border rounded-xl p-5">
+              <div className="flex items-center gap-3 mb-4">
+                <div className="w-9 h-9 bg-accent-green/10 rounded-lg flex items-center justify-center"><Database className="w-5 h-5 text-accent-green" /></div>
+                <h3 className="text-sm font-semibold">Database</h3>
+              </div>
+              <div className="space-y-2.5 text-sm">
+                <div className="flex justify-between"><span className="text-text-muted text-xs">Engine</span><span className="text-xs font-mono">SQLite</span></div>
+                <div className="flex justify-between"><span className="text-text-muted text-xs">Path</span><span className="text-xs font-mono text-accent-cyan">/data/platform.db</span></div>
+                <div className="flex justify-between"><span className="text-text-muted text-xs">Cache</span><span className="text-xs text-accent-green">Active</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">
+                <div className="w-9 h-9 bg-accent-amber/10 rounded-lg flex items-center justify-center"><Shield className="w-5 h-5 text-accent-amber" /></div>
+                <h3 className="text-sm font-semibold">Security</h3>
+              </div>
+              <div className="space-y-2.5 text-sm">
+                <div className="flex justify-between"><span className="text-text-muted text-xs">Auth</span><span className="text-xs font-mono">JWT (HS256)</span></div>
+                <div className="flex justify-between"><span className="text-text-muted text-xs">Vault</span><span className="text-xs font-mono">AES-256-GCM</span></div>
+                <div className="flex justify-between"><span className="text-text-muted text-xs">Encryption</span><span className="text-xs text-accent-green">End-to-end</span></div>
+              </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>
+
+          {/* Auth Configs */}
+          <div className="bg-bg-tertiary border border-border rounded-xl">
+            <div className="px-6 py-4 border-b border-border flex items-center justify-between">
+              <div className="flex items-center gap-3">
+                <Key className="w-4 h-4 text-accent-cyan" />
+                <h3 className="text-sm font-semibold">Credential Schemas</h3>
+                <span className="text-xs text-text-muted bg-bg-secondary border border-border px-2 py-0.5 rounded-md">{configs.length} integrations</span>
+              </div>
+              <p className="text-[10px] text-text-dim">Define what credentials each integration needs</p>
+            </div>
+            <div className="p-4">
+              {loading ? (
+                <div className="space-y-2">
+                  {Array.from({ length: 4 }).map((_, i) => (
+                    <div key={i} className="h-16 bg-bg-secondary border border-border rounded-xl animate-pulse" />
+                  ))}
+                </div>
+              ) : configs.length === 0 ? (
+                <div className="text-center py-10 text-text-muted text-sm">No credential schemas configured</div>
+              ) : (
+                <div className="space-y-2">
+                  {configs.map((c) => (
+                    <div key={c.id}>
+                      {editing === c.id ? (
+                        <div className="bg-bg-secondary border border-accent-cyan/30 rounded-xl p-5 space-y-4">
+                          <div className="flex items-center justify-between">
+                            <div className="flex items-center gap-3">
+                              <div className="w-8 h-8 bg-accent-cyan/10 rounded-lg flex items-center justify-center"><Key className="w-4 h-4 text-accent-cyan" /></div>
+                              <span className="text-sm font-semibold">{c.integration_name} ({c.integration_id})</span>
+                            </div>
+                            <div className="flex items-center gap-2">
+                              <button onClick={saveEdit} className="p-1.5 text-accent-green hover:bg-accent-green/10 rounded-lg transition-colors"><Check className="w-4 h-4" /></button>
+                              <button onClick={() => setEditing(null)} className="p-1.5 text-text-muted hover:text-text-primary hover:bg-bg-hover rounded-lg transition-colors"><X className="w-4 h-4" /></button>
+                            </div>
+                          </div>
+
+                          <div className="grid grid-cols-2 gap-3">
+                            <div>
+                              <label className="text-[10px] text-text-muted font-medium">Auth Type</label>
+                              <select value={editForm.auth_type || 'api_key'} onChange={(e) => setEditForm(prev => ({ ...prev, auth_type: e.target.value }))}
+                                className="w-full mt-1 px-3 py-1.5 bg-bg-tertiary border border-border rounded-lg text-xs text-text-primary focus:outline-none focus:border-accent-cyan">
+                                <option value="api_key">API Key</option>
+                                <option value="oauth2">OAuth 2.0</option>
+                                <option value="bearer">Bearer Token</option>
+                                <option value="basic">Basic Auth</option>
+                              </select>
+                            </div>
+                            {editForm.auth_type === 'oauth2' && (
+                              <>
+                                <div>
+                                  <label className="text-[10px] text-text-muted font-medium">Authorize URL</label>
+                                  <input value={editForm.oauth_authorize_url || ''} onChange={(e) => setEditForm(prev => ({ ...prev, oauth_authorize_url: e.target.value }))}
+                                    className="w-full mt-1 px-3 py-1.5 bg-bg-tertiary border border-border rounded-lg text-xs text-text-primary focus:outline-none focus:border-accent-cyan font-mono" />
+                                </div>
+                                <div>
+                                  <label className="text-[10px] text-text-muted font-medium">Token URL</label>
+                                  <input value={editForm.oauth_token_url || ''} onChange={(e) => setEditForm(prev => ({ ...prev, oauth_token_url: e.target.value }))}
+                                    className="w-full mt-1 px-3 py-1.5 bg-bg-tertiary border border-border rounded-lg text-xs text-text-primary focus:outline-none focus:border-accent-cyan font-mono" />
+                                </div>
+                              </>
+                            )}
+                          </div>
+
+                          <div>
+                            <div className="flex items-center justify-between mb-2">
+                              <span className="text-[10px] text-text-muted font-medium">Fields</span>
+                              <button onClick={addField} className="text-[10px] text-accent-cyan hover:text-accent-cyanLight flex items-center gap-0.5">
+                                <Plus className="w-3 h-3" /> Add Field
+                              </button>
+                            </div>
+                            <div className="space-y-2">
+                              {editForm.fields?.map((field, idx) => (
+                                <div key={idx} className="flex items-center gap-2 bg-bg-tertiary border border-border rounded-lg p-3">
+                                  <input value={field.name} onChange={(e) => updateField(idx, 'name', e.target.value)} placeholder="name"
+                                    className="w-24 px-2 py-1 bg-bg-secondary border border-border rounded text-[10px] font-mono text-text-primary focus:outline-none focus:border-accent-cyan" />
+                                  <input value={field.label} onChange={(e) => updateField(idx, 'label', e.target.value)} placeholder="Label"
+                                    className="w-28 px-2 py-1 bg-bg-secondary border border-border rounded text-[10px] text-text-primary focus:outline-none focus:border-accent-cyan" />
+                                  <select value={field.type} onChange={(e) => updateField(idx, 'type', e.target.value)}
+                                    className="w-20 px-2 py-1 bg-bg-secondary border border-border rounded text-[10px] text-text-primary focus:outline-none focus:border-accent-cyan">
+                                    <option value="text">text</option>
+                                    <option value="password">password</option>
+                                    <option value="url">url</option>
+                                  </select>
+                                  <label className="flex items-center gap-1 text-[10px] text-text-muted cursor-pointer">
+                                    <input type="checkbox" checked={field.required} onChange={(e) => updateField(idx, 'required', e.target.checked)}
+                                      className="rounded border-border bg-bg-secondary text-accent-cyan focus:ring-accent-cyan" />
+                                    Required
+                                  </label>
+                                  <input value={field.description} onChange={(e) => updateField(idx, 'description', e.target.value)} placeholder="Description"
+                                    className="flex-1 px-2 py-1 bg-bg-secondary border border-border rounded text-[10px] text-text-primary focus:outline-none focus:border-accent-cyan" />
+                                  <button onClick={() => removeField(idx)} className="p-1 text-text-muted hover:text-accent-red">
+                                    <X className="w-3 h-3" />
+                                  </button>
+                                </div>
+                              ))}
+                            </div>
+                          </div>
+                        </div>
+                      ) : (
+                        <div className="flex items-center justify-between px-4 py-3 bg-bg-secondary border border-border rounded-xl hover:border-border-focus transition-colors group">
+                          <div className="flex items-center gap-3">
+                            <div className="w-8 h-8 rounded-lg flex items-center justify-center overflow-hidden bg-bg-tertiary border border-border">
+                              <img src={`https://logos.composio.dev/api/${c.integration_id}`} alt={c.integration_name} className="w-5 h-5" onError={(e) => (e.currentTarget.style.display = 'none')} />
+                            </div>
+                            <div>
+                              <p className="text-sm font-medium">{c.integration_name}</p>
+                              <div className="flex items-center gap-2 mt-0.5">
+                                <span className="text-[10px] text-text-muted font-mono">{c.integration_id}</span>
+                                <span className="text-text-dim">·</span>
+                                <span className={`text-[10px] px-1.5 py-0.5 rounded font-medium ${
+                                  c.auth_type === 'oauth2' ? 'bg-accent-cyan/10 text-accent-cyanLight' : 'bg-accent-green/10 text-accent-green'
+                                }`}>{c.auth_type}</span>
+                                <span className="text-[10px] text-text-muted">{c.fields.length} fields</span>
+                              </div>
+                            </div>
+                          </div>
+                          <button onClick={() => startEdit(c)}
+                            className="p-1.5 text-text-muted opacity-0 group-hover:opacity-100 hover:text-accent-cyan hover:bg-accent-cyan/10 rounded-lg transition-all">
+                            <Edit3 className="w-3.5 h-3.5" />
+                          </button>
+                        </div>
+                      )}
+                    </div>
+                  ))}
+                </div>
+              )}
             </div>
           </div>
         </div>
       </main>
     </div>
   )
-}
+}

frontend/app/tools/page.tsx

@@ -2,63 +2,186 @@
 
 import { useEffect, useState } from 'react'
 import { Sidebar } from '@/components/sidebar'
-import { api, type Tool } from '@/lib/api'
-import { Search, Play } from 'lucide-react'
+import { api, type Tool, type ToolExecution } from '@/lib/api'
+import { Search, Play, Terminal, ChevronDown, ChevronRight, Clock, CheckCircle, XCircle } from 'lucide-react'
 
 export default function ToolsPage() {
   const [tools, setTools] = useState<Tool[]>([])
   const [loading, setLoading] = useState(true)
   const [search, setSearch] = useState('')
+  const [selectedTool, setSelectedTool] = useState<Tool | null>(null)
+  const [executing, setExecuting] = useState(false)
+  const [executionResult, setExecutionResult] = useState<ToolExecution | null>(null)
+  const [params, setParams] = useState<string>('{}')
+  const [expandedTool, setExpandedTool] = useState<string | null>(null)
+  const [integrationFilter, setIntegrationFilter] = useState<string>('all')
 
   useEffect(() => {
-    api.get<Tool[]>('/api/tools')
-      .then((data) => { setTools(data); setLoading(false) })
-      .catch(() => setLoading(false))
+    Promise.all([
+      api.get<Tool[]>('/api/tools').catch(() => []),
+    ]).then(([t]) => { setTools(t); setLoading(false) })
   }, [])
 
-  const filtered = tools.filter((t) =>
-    !search || t.name.toLowerCase().includes(search.toLowerCase()) || t.description.toLowerCase().includes(search.toLowerCase())
-  )
+  const integrations = [...new Set(tools.map(t => t.integration_id))].sort()
+
+  const filtered = tools.filter((t) => {
+    const matchSearch = !search || t.name.toLowerCase().includes(search.toLowerCase()) || t.description.toLowerCase().includes(search.toLowerCase())
+    const matchInt = integrationFilter === 'all' || t.integration_id === integrationFilter
+    return matchSearch && matchInt
+  })
+
+  const handleExecute = async (tool: Tool) => {
+    setExecuting(true)
+    setExecutionResult(null)
+    try {
+      let parsedParams = {}
+      try { parsedParams = JSON.parse(params) } catch { /* use empty */ }
+      const result = await api.post<ToolExecution>(`/api/tools/${tool.id}/execute`, {
+        params: parsedParams,
+        dry_run: false,
+      })
+      setExecutionResult(result)
+    } catch (err: unknown) {
+      setExecutionResult({
+        execution_id: 'error',
+        status: 'error',
+        result: null,
+        latency_ms: 0,
+        executed_at: new Date().toISOString(),
+        error: err instanceof Error ? err.message : 'Execution failed',
+      })
+    } finally { setExecuting(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 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)} />
+        <header className="h-14 bg-bg-secondary/80 backdrop-blur-xl border-b border-border flex items-center justify-between px-6 sticky top-0 z-10">
+          <div className="flex items-center gap-3">
+            <h1 className="text-base font-semibold">Tools</h1>
+            {!loading && <span className="text-xs text-text-muted bg-bg-tertiary border border-border px-2 py-0.5 rounded-md">{tools.length} total</span>}
+          </div>
+          <div className="flex items-center gap-3">
+            <select value={integrationFilter} onChange={(e) => setIntegrationFilter(e.target.value)}
+              className="px-3 py-1.5 bg-bg-tertiary border border-border rounded-lg text-xs text-text-primary focus:outline-none focus:border-accent-cyan"
+            >
+              <option value="all">All Integrations</option>
+              {integrations.map(int => <option key={int} value={int}>{int}</option>)}
+            </select>
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-text-dim" />
+              <input className="pl-8 pr-4 py-1.5 bg-bg-tertiary border border-border rounded-lg text-xs text-text-primary placeholder:text-text-dim focus:outline-none focus:border-accent-cyan w-56" placeholder="Search tools..." value={search} onChange={(e) => setSearch(e.target.value)} />
+            </div>
           </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 className="flex-1 flex overflow-hidden">
+          {/* Tool List */}
+          <div className="w-1/2 border-r border-border overflow-y-auto p-4">
+            {loading ? (
+              <div className="space-y-2">
+                {Array.from({ length: 8 }).map((_, i) => (
+                  <div key={i} className="bg-bg-tertiary border border-border rounded-xl p-4 animate-pulse">
+                    <div className="flex items-center gap-3"><div className="w-8 h-8 bg-bg-hover rounded-lg" /><div className="flex-1"><div className="h-3 bg-bg-hover rounded w-32 mb-1" /><div className="h-2 bg-bg-hover rounded w-full" /></div></div>
+                  </div>
+                ))}
+              </div>
+            ) : filtered.length === 0 ? (
+              <div className="flex flex-col items-center justify-center py-16">
+                <Terminal className="w-10 h-10 text-text-dim mb-3" />
+                <p className="text-text-muted text-sm">No tools found</p>
+              </div>
+            ) : (
+              <div className="space-y-1.5">
+                {filtered.map((t) => (
+                  <div key={t.id}>
+                    <button
+                      onClick={() => setExpandedTool(expandedTool === t.id ? null : t.id)}
+                      className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl text-left transition-all ${
+                        expandedTool === t.id ? 'bg-accent-cyan/5 border border-accent-cyan/20' : 'bg-bg-tertiary border border-border hover:border-border-focus'
+                      }`}
+                    >
+                      <div className="w-8 h-8 bg-bg-secondary border border-border rounded-lg flex items-center justify-center shrink-0">
+                        <Play className="w-3.5 h-3.5 text-text-muted" />
+                      </div>
+                      <div className="flex-1 min-w-0">
+                        <p className="text-sm font-medium truncate">{t.name}</p>
+                        <p className="text-[11px] text-text-muted truncate">{t.description}</p>
+                      </div>
+                      <span className="text-[10px] bg-bg-secondary border border-border px-1.5 py-0.5 rounded text-text-muted shrink-0">{t.integration_id}</span>
+                      {expandedTool === t.id ? <ChevronDown className="w-3.5 h-3.5 text-text-muted shrink-0" /> : <ChevronRight className="w-3.5 h-3.5 text-text-muted shrink-0" />}
+                    </button>
+                    {expandedTool === t.id && (
+                      <div className="ml-12 mt-1.5 p-4 bg-bg-secondary border border-border rounded-xl space-y-3 animate-fade-in mb-1.5">
+                        <div>
+                          <label className="text-[10px] text-text-muted font-medium uppercase tracking-wider">Parameters (JSON)</label>
+                          <textarea
+                            value={params}
+                            onChange={(e) => setParams(e.target.value)}
+                            className="mt-1.5 w-full h-24 px-3 py-2 bg-bg-tertiary border border-border rounded-lg text-xs font-mono text-text-primary focus:outline-none focus:border-accent-cyan resize-none"
+                            placeholder='{"key": "value"}'
+                          />
+                        </div>
+                        <button
+                          onClick={() => handleExecute(t)}
+                          disabled={executing}
+                          className="w-full py-2 bg-accent-cyan hover:bg-accent-cyanLight text-bg-primary text-xs font-semibold rounded-lg transition-all disabled:opacity-50 flex items-center justify-center gap-2"
+                        >
+                          {executing ? <><span className="w-3 h-3 border-2 border-bg-primary border-t-transparent rounded-full animate-spin" /> Executing...</> : <><Play className="w-3.5 h-3.5" /> Execute {t.name}</>}
+                        </button>
+                      </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>
+
+          {/* Result Panel */}
+          <div className="w-1/2 overflow-y-auto p-4">
+            {!executionResult && !executing && (
+              <div className="flex flex-col items-center justify-center h-full text-text-dim">
+                <Terminal className="w-12 h-12 mb-4" />
+                <p className="text-sm">Select a tool and execute it</p>
+                <p className="text-xs mt-1">Results will appear here</p>
+              </div>
+            )}
+            {executing && (
+              <div className="flex flex-col items-center justify-center h-full">
+                <div className="w-8 h-8 border-2 border-accent-cyan border-t-transparent rounded-full animate-spin mb-3" />
+                <p className="text-sm text-text-muted">Executing...</p>
+              </div>
+            )}
+            {executionResult && !executing && (
+              <div className="space-y-3 animate-fade-in">
+                <div className="flex items-center gap-3 mb-4">
+                  <div className={`w-8 h-8 rounded-lg flex items-center justify-center ${
+                    executionResult.status === 'success' ? 'bg-accent-green/10' : 'bg-accent-red/10'
+                  }`}>
+                    {executionResult.status === 'success' ? <CheckCircle className="w-4 h-4 text-accent-green" /> : <XCircle className="w-4 h-4 text-accent-red" />}
+                  </div>
+                  <div>
+                    <p className="text-sm font-semibold capitalize">{executionResult.status}</p>
+                    <p className="text-[10px] text-text-muted flex items-center gap-1">
+                      <Clock className="w-3 h-3" /> {executionResult.latency_ms}ms · {new Date(executionResult.executed_at).toLocaleTimeString()}
+                    </p>
                   </div>
                 </div>
-              ))}
-            </div>
-          )}
+                <div className="bg-bg-secondary border border-border rounded-xl overflow-hidden">
+                  <div className="px-4 py-2.5 border-b border-border bg-bg-tertiary flex items-center gap-2">
+                    <Terminal className="w-3.5 h-3.5 text-accent-cyan" />
+                    <span className="text-[10px] font-medium text-text-muted uppercase tracking-wider">Output</span>
+                  </div>
+                  <pre className="p-4 text-xs font-mono text-text-primary overflow-x-auto max-h-96 overflow-y-auto whitespace-pre-wrap">
+                    {JSON.stringify(executionResult.result || executionResult.error, null, 2)}
+                  </pre>
+                </div>
+              </div>
+            )}
+          </div>
         </div>
       </main>
     </div>
   )
-}
+}

frontend/components/sidebar.tsx

@@ -2,87 +2,115 @@
 
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
-import { LayoutDashboard, Plug, Wrench, Key, BarChart3, Settings, LogOut, ExternalLink } from 'lucide-react'
+import {
+  LayoutDashboard, Plug, Wrench, Link2, Key, BarChart3, Settings,
+  LogOut, ExternalLink, Play, ChevronRight
+} from 'lucide-react'
 import { cn } from '@/lib/utils'
 
-const navItems = [
+const mainNav = [
   { href: '/', icon: LayoutDashboard, label: 'Dashboard' },
   { href: '/apps', icon: Plug, label: 'Apps' },
+  { href: '/connections', icon: Link2, label: 'Connections' },
   { href: '/tools', icon: Wrench, label: 'Tools' },
+  { href: '/playground', icon: Play, label: 'Playground' },
 ]
 
-const configItems = [
+const configNav = [
   { 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 }) {
+export function Sidebar({ integrationCount = 0, connectionCount = 0 }: { integrationCount?: number; connectionCount?: number }) {
   const pathname = usePathname()
 
   return (
-    <aside className="w-60 bg-bg-secondary border-r border-border flex flex-col shrink-0">
+    <aside className="w-60 bg-bg-secondary border-r border-border flex flex-col shrink-0 h-screen sticky top-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>
+        <Link href="/" className="flex items-center gap-3 group">
+          <div className="w-8 h-8 bg-gradient-to-br from-accent-cyan to-accent-blue rounded-lg flex items-center justify-center font-bold text-bg-primary text-sm group-hover:scale-105 transition-transform">
+            C
+          </div>
+          <div>
+            <div className="text-base font-semibold tracking-tight">Compost</div>
+            <div className="text-[10px] text-text-dim font-medium">Platform v1.0</div>
+          </div>
+        </Link>
       </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>
-        ))}
+      <nav className="flex-1 px-3 py-4 space-y-1 overflow-y-auto">
+        <div className="px-3 mb-2 text-[10px] font-semibold uppercase tracking-widest text-text-dim">Navigation</div>
+        {mainNav.map((item) => {
+          const isActive = pathname === item.href || (item.href !== '/' && pathname.startsWith(item.href))
+          return (
+            <Link key={item.href} href={item.href}
+              className={cn(
+                'flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-all duration-150 group',
+                isActive
+                  ? 'bg-accent-cyan/10 text-accent-cyanLight font-medium'
+                  : 'text-text-secondary hover:bg-bg-hover hover:text-text-primary'
+              )}
+            >
+              <item.icon className={cn('w-4 h-4 shrink-0', isActive ? 'text-accent-cyanLight' : 'text-text-muted group-hover:text-text-primary')} />
+              <span className="truncate">{item.label}</span>
+              {item.href === '/apps' && integrationCount > 0 && (
+                <span className="ml-auto text-[10px] bg-bg-tertiary border border-border text-text-muted px-1.5 py-0.5 rounded-md font-medium">{integrationCount}</span>
+              )}
+              {item.href === '/connections' && connectionCount > 0 && (
+                <span className="ml-auto text-[10px] bg-accent-green/10 border border-accent-green/20 text-accent-green px-1.5 py-0.5 rounded-md font-medium">{connectionCount}</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>
-        ))}
+        <div className="pt-6 pb-1">
+          <div className="px-3 mb-2 text-[10px] font-semibold uppercase tracking-widest text-text-dim">Configuration</div>
+          {configNav.map((item) => {
+            const isActive = pathname === item.href
+            return (
+              <Link key={item.href} href={item.href}
+                className={cn(
+                  'flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-all duration-150 group',
+                  isActive
+                    ? 'bg-accent-cyan/10 text-accent-cyanLight font-medium'
+                    : 'text-text-secondary hover:bg-bg-hover hover:text-text-primary'
+                )}
+              >
+                <item.icon className={cn('w-4 h-4 shrink-0', isActive ? 'text-accent-cyanLight' : 'text-text-muted group-hover:text-text-primary')} />
+                <span className="truncate">{item.label}</span>
+              </Link>
+            )
+          })}
+        </div>
 
-        <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>
+        <div className="pt-6">
+          <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 group"
+          >
+            <ExternalLink className="w-4 h-4 shrink-0 text-text-muted group-hover:text-text-primary" />
+            <span>API Docs</span>
+            <ChevronRight className="w-3 h-3 ml-auto text-text-dim" />
+          </a>
+        </div>
       </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">
+        <div className="flex items-center justify-between px-1">
+          <div className="flex items-center gap-2.5 min-w-0">
+            <div className="w-7 h-7 bg-gradient-to-br from-accent-cyan/20 to-accent-blue/20 rounded-full flex items-center justify-center text-xs font-semibold shrink-0 border border-border">
               {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 className="min-w-0">
+              <div className="text-xs text-text-secondary truncate">
+                {typeof window !== 'undefined' ? localStorage.getItem('email') || 'User' : 'User'}
+              </div>
+              <div className="text-[10px] text-text-dim">Online</div>
+            </div>
           </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"
+            title="Sign out"
           >
             <LogOut className="w-3.5 h-3.5" />
           </button>
@@ -90,4 +118,4 @@ export function Sidebar({ integrationCount = 0 }: { integrationCount?: number })
       </div>
     </aside>
   )
-}
+}

frontend/lib/api.ts

@@ -5,6 +5,7 @@ export interface Integration {
   logo_url: string
   category: string
   auth_type: string
+  oauth_scopes?: string[] | null
   tool_count: number
   trigger_count: number
   is_active: boolean
@@ -17,10 +18,21 @@ export interface Tool {
   description: string
   input_schema: Record<string, unknown>
   output_schema?: Record<string, unknown>
-  category: string
+  category: string | null
   is_active: boolean
 }
 
+export interface Connection {
+  id: string
+  integration_id: string
+  integration_name: string
+  account_label: string | null
+  status: string
+  connected_at: string
+  last_used: string | null
+  metadata: Record<string, unknown> | null
+}
+
 export interface Stats {
   total_executions: number
   successful: number
@@ -29,9 +41,44 @@ export interface Stats {
   avg_latency_ms: number
 }
 
-const API_BASE = typeof window !== 'undefined' ? '' : process.env.NEXT_PUBLIC_API_URL || ''
+export interface AuthField {
+  name: string
+  label: string
+  type: string
+  required: boolean
+  description: string
+  default: string
+}
+
+export interface AuthConfig {
+  integration_id: string
+  auth_type: string
+  fields: AuthField[]
+  oauth_authorize_url: string | null
+  oauth_token_url: string | null
+}
+
+export interface ToolExecution {
+  execution_id: string
+  status: string
+  result: Record<string, unknown> | null
+  latency_ms: number
+  executed_at: string
+  error: string | null
+}
 
-async function fetchApi(path: string, opts: RequestInit = {}) {
+export interface APIKey {
+  id: string
+  name: string
+  key_preview: string
+  created_at: string
+  last_used: string | null
+  is_active: boolean
+}
+
+const API_BASE = ''
+
+async function request<T>(path: string, opts: RequestInit = {}): Promise<T> {
   const token = typeof window !== 'undefined' ? localStorage.getItem('token') : null
   const headers: Record<string, string> = { 'Content-Type': 'application/json' }
   if (token) headers['Authorization'] = `Bearer ${token}`
@@ -40,16 +87,23 @@ async function fetchApi(path: string, opts: RequestInit = {}) {
   if (res.status === 401) {
     if (typeof window !== 'undefined') {
       localStorage.removeItem('token')
+      localStorage.removeItem('email')
       window.location.href = '/login'
     }
     throw new Error('Unauthorized')
   }
+  if (!res.ok) {
+    const data = await res.json().catch(() => ({ detail: 'Request failed' }))
+    throw new Error(data.detail || `HTTP ${res.status}`)
+  }
   return res.json()
 }
 
 export const api = {
-  get: <T>(path: string) => fetchApi(path) as Promise<T>,
+  get: <T>(path: string) => request<T>(path),
   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>,
-}
+    request<T>(path, { method: 'POST', body: body ? JSON.stringify(body) : undefined }),
+  put: <T>(path: string, body?: unknown) =>
+    request<T>(path, { method: 'PUT', body: body ? JSON.stringify(body) : undefined }),
+  delete: <T>(path: string) => request<T>(path, { method: 'DELETE' }),
+}

frontend/tailwind.config.ts

@@ -2,7 +2,8 @@ import type { Config } from 'tailwindcss'
 
 const config: Config = {
   content: [
-    './src/**/*.{js,ts,jsx,tsx,mdx}',
+    './app/**/*.{js,ts,jsx,tsx,mdx}',
+    './components/**/*.{js,ts,jsx,tsx,mdx}',
   ],
   theme: {
     extend: {