synapse-gateway 2.0.0

package/src/app/dashboard/settings/page.tsx

@@ -0,0 +1,208 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { Settings, Server, Brain, Shield, Database, Globe, Save } from 'lucide-react'
+
+const sections = [
+  { id: 'general', label: 'General', icon: Settings },
+  { id: 'providers', label: 'Providers', icon: Server },
+  { id: 'models', label: 'Models', icon: Brain },
+  { id: 'security', label: 'Security', icon: Shield },
+  { id: 'database', label: 'Database', icon: Database },
+  { id: 'network', label: 'Network', icon: Globe },
+]
+
+export default function SettingsPage() {
+  const [active, setActive] = useState('general')
+  const [config, setConfig] = useState<Record<string, string>>({})
+  const [saved, setSaved] = useState(false)
+
+  useEffect(() => {
+    fetch('/api/settings').then((r) => r.json()).then((data) => setConfig((data as { settings: Record<string, string> }).settings || {})).catch(() => {})
+  }, [])
+
+  async function handleSave(updates: Record<string, string>) {
+    await fetch('/api/settings', {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(updates),
+    })
+    setConfig((prev) => ({ ...prev, ...updates }))
+    setSaved(true)
+    setTimeout(() => setSaved(false), 2000)
+  }
+
+  return (
+    <div className="flex gap-6 h-[calc(100vh-8rem)]">
+      <nav className="w-48 shrink-0 space-y-0.5">
+        {sections.map((s) => (
+          <button
+            key={s.id}
+            onClick={() => setActive(s.id)}
+            className={`w-full flex items-center gap-2 px-3 py-2 rounded-md text-sm transition-colors ${active === s.id ? 'bg-primary/10 text-primary font-medium' : 'text-muted-foreground hover:bg-muted hover:text-foreground'}`}
+          >
+            <s.icon className="h-4 w-4" />
+            {s.label}
+          </button>
+        ))}
+      </nav>
+
+      <div className="flex-1 bg-card border border-border rounded-lg p-6 overflow-y-auto">
+        {active === 'general' && <GeneralSettings config={config} onSave={handleSave} saved={saved} />}
+        {active === 'providers' && <ProviderSettings config={config} onSave={handleSave} saved={saved} />}
+        {active === 'security' && <SecuritySettings config={config} onSave={handleSave} saved={saved} />}
+        {active === 'database' && <DatabaseSettings config={config} />}
+        {active === 'network' && <NetworkSettings config={config} onSave={handleSave} saved={saved} />}
+        {active === 'models' && (
+          <div className="flex items-center justify-center h-64 text-sm text-muted-foreground">
+            Model settings are managed in the Models page
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+function GeneralSettings({ config, onSave, saved }: { config: Record<string, string>; onSave: (u: Record<string, string>) => void; saved: boolean }) {
+  const [port, setPort] = useState(config.port || '3333')
+  const [logLevel, setLogLevel] = useState(config.logLevel || 'info')
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <h2 className="text-lg font-semibold">General Settings</h2>
+        <button onClick={() => onSave({ port, logLevel })} className="flex items-center gap-2 px-3 py-1.5 bg-primary text-primary-foreground rounded-md text-sm hover:bg-primary/90">
+          <Save className="h-4 w-4" /> {saved ? 'Saved!' : 'Save'}
+        </button>
+      </div>
+      <div className="space-y-4">
+        <div>
+          <label className="text-sm font-medium block mb-1.5">Gateway Port</label>
+          <input type="number" value={port} onChange={(e) => setPort(e.target.value)} className="bg-muted border border-border rounded-md px-3 py-1.5 text-sm w-40 focus:outline-none focus:ring-1 focus:ring-ring" />
+        </div>
+        <div>
+          <label className="text-sm font-medium block mb-1.5">Log Level</label>
+          <select value={logLevel} onChange={(e) => setLogLevel(e.target.value)} className="bg-muted border border-border rounded-md px-3 py-1.5 text-sm w-40 focus:outline-none focus:ring-1 focus:ring-ring">
+            <option>debug</option>
+            <option>info</option>
+            <option>warn</option>
+            <option>error</option>
+          </select>
+        </div>
+        <div>
+          <label className="text-sm font-medium block mb-1.5">Data Directory</label>
+          <code className="text-sm bg-muted border border-border rounded-md px-3 py-1.5 block">~/.synapse/</code>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function ProviderSettings({ config, onSave, saved }: { config: Record<string, string>; onSave: (u: Record<string, string>) => void; saved: boolean }) {
+  const [timeout, setTimeout_] = useState(config.requestTimeout || '30000')
+  const [retries, setRetries] = useState(config.maxRetries || '3')
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <h2 className="text-lg font-semibold">Provider Settings</h2>
+        <button onClick={() => onSave({ requestTimeout: timeout, maxRetries: retries })} className="flex items-center gap-2 px-3 py-1.5 bg-primary text-primary-foreground rounded-md text-sm hover:bg-primary/90">
+          <Save className="h-4 w-4" /> {saved ? 'Saved!' : 'Save'}
+        </button>
+      </div>
+      <p className="text-sm text-muted-foreground">Configure global provider behavior, timeouts, and retries</p>
+      <div className="space-y-4">
+        <div>
+          <label className="text-sm font-medium block mb-1.5">Request Timeout (ms)</label>
+          <input type="number" value={timeout} onChange={(e) => setTimeout_(e.target.value)} className="bg-muted border border-border rounded-md px-3 py-1.5 text-sm w-40 focus:outline-none focus:ring-1 focus:ring-ring" />
+        </div>
+        <div>
+          <label className="text-sm font-medium block mb-1.5">Max Retries</label>
+          <input type="number" value={retries} onChange={(e) => setRetries(e.target.value)} className="bg-muted border border-border rounded-md px-3 py-1.5 text-sm w-40 focus:outline-none focus:ring-1 focus:ring-ring" />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function SecuritySettings({ config, onSave, saved }: { config: Record<string, string>; onSave: (u: Record<string, string>) => void; saved: boolean }) {
+  const [rateLimit, setRateLimit] = useState(config.rateLimitEnabled !== 'false' ? 'true' : 'false')
+  const [keyRotation, setKeyRotation] = useState(config.keyRotationDays || '90')
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <h2 className="text-lg font-semibold">Security Settings</h2>
+        <button onClick={() => onSave({ rateLimitEnabled: rateLimit, keyRotationDays: keyRotation })} className="flex items-center gap-2 px-3 py-1.5 bg-primary text-primary-foreground rounded-md text-sm hover:bg-primary/90">
+          <Save className="h-4 w-4" /> {saved ? 'Saved!' : 'Save'}
+        </button>
+      </div>
+      <div className="space-y-4">
+        <div>
+          <label className="text-sm font-medium block mb-1.5">Key Rotation (days)</label>
+          <input type="number" value={keyRotation} onChange={(e) => setKeyRotation(e.target.value)} className="bg-muted border border-border rounded-md px-3 py-1.5 text-sm w-40 focus:outline-none focus:ring-1 focus:ring-ring" />
+        </div>
+        <div className="flex items-center gap-3">
+          <input type="checkbox" checked={rateLimit === 'true'} onChange={(e) => setRateLimit(e.target.checked ? 'true' : 'false')} className="accent-primary" id="rate-limit" />
+          <label htmlFor="rate-limit" className="text-sm">Enable rate limiting</label>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function DatabaseSettings({ config }: { config: Record<string, string> }) {
+  return (
+    <div className="space-y-6">
+      <h2 className="text-lg font-semibold">Database</h2>
+      <div className="space-y-3">
+        <div className="flex justify-between text-sm">
+          <span className="text-muted-foreground">Engine</span>
+          <span className="font-mono text-xs">SQLite (better-sqlite3)</span>
+        </div>
+        <div className="flex justify-between text-sm">
+          <span className="text-muted-foreground">ORM</span>
+          <span className="font-mono text-xs">Drizzle</span>
+        </div>
+        <div className="flex justify-between text-sm">
+          <span className="text-muted-foreground">Journal Mode</span>
+          <span className="font-mono text-xs">WAL</span>
+        </div>
+        <div className="flex justify-between text-sm">
+          <span className="text-muted-foreground">Location</span>
+          <span className="font-mono text-xs">{config.dbPath || '~/.synapse/synapse.db'}</span>
+        </div>
+        <div className="flex justify-between text-sm">
+          <span className="text-muted-foreground">Tables</span>
+          <span>21</span>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function NetworkSettings({ config, onSave, saved }: { config: Record<string, string>; onSave: (u: Record<string, string>) => void; saved: boolean }) {
+  const [cors, setCors] = useState(config.corsEnabled !== 'false' ? 'true' : 'false')
+  const [allowedOrigins, setAllowedOrigins] = useState(config.allowedOrigins || '*')
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <h2 className="text-lg font-semibold">Network Settings</h2>
+        <button onClick={() => onSave({ corsEnabled: cors, allowedOrigins })} className="flex items-center gap-2 px-3 py-1.5 bg-primary text-primary-foreground rounded-md text-sm hover:bg-primary/90">
+          <Save className="h-4 w-4" /> {saved ? 'Saved!' : 'Save'}
+        </button>
+      </div>
+      <div className="space-y-4">
+        <div className="flex items-center gap-3">
+          <input type="checkbox" checked={cors === 'true'} onChange={(e) => setCors(e.target.checked ? 'true' : 'false')} className="accent-primary" id="cors" />
+          <label htmlFor="cors" className="text-sm">Enable CORS</label>
+        </div>
+        <div>
+          <label className="text-sm font-medium block mb-1.5">Allowed Origins</label>
+          <input type="text" value={allowedOrigins} onChange={(e) => setAllowedOrigins(e.target.value)} className="bg-muted border border-border rounded-md px-3 py-1.5 text-sm w-full max-w-md focus:outline-none focus:ring-1 focus:ring-ring" />
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/app/dashboard/skills/loading.tsx

@@ -0,0 +1,26 @@
+import { CardSkeleton } from '@/components/ui/skeleton'
+
+export default function SkillsLoading() {
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div className="h-4 w-64 animate-pulse rounded bg-muted" />
+        <div className="flex gap-2">
+          <div className="h-8 w-24 animate-pulse rounded bg-muted" />
+          <div className="h-8 w-32 animate-pulse rounded bg-muted" />
+        </div>
+      </div>
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
+        <div className="lg:col-span-2 space-y-3">
+          {Array.from({ length: 3 }).map((_, i) => (
+            <CardSkeleton key={i} />
+          ))}
+        </div>
+        <div className="space-y-2">
+          <CardSkeleton />
+          <CardSkeleton />
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/app/dashboard/skills/page.tsx

@@ -0,0 +1,137 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { Wrench, Plus, RotateCw, Package, Download } from 'lucide-react'
+
+interface SkillsData {
+  skills: Array<{
+    id: string
+    name: string
+    description: string | null
+    enabled: boolean
+    groupId: string | null
+    usageCount: number | null
+    qualityScore: number | null
+    tags: string | null
+    createdAt: string
+  }>
+  groups: Array<{
+    id: string
+    name: string
+    description: string | null
+    rotationStrategy: string
+    enabled: boolean
+  }>
+}
+
+export default function SkillsPage() {
+  const [data, setData] = useState<SkillsData | null>(null)
+  const [showCreate, setShowCreate] = useState(false)
+  const [form, setForm] = useState({ name: '', description: '', systemPrompt: '' })
+
+  useEffect(() => {
+    fetch('/api/skills').then((r) => r.json()).then(setData).catch(() => {})
+  }, [])
+
+  async function handleCreate() {
+    if (!form.name || !form.systemPrompt) return
+    await fetch('/api/skills', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ action: 'create', ...form }),
+    })
+    setShowCreate(false)
+    setForm({ name: '', description: '', systemPrompt: '' })
+    const res = await fetch('/api/skills')
+    setData(await res.json())
+  }
+
+  const skills = data?.skills || []
+  const groups = data?.groups || []
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <p className="text-sm text-muted-foreground">Manage skills, groups, and rotation strategies</p>
+        <div className="flex items-center gap-2">
+          <button className="flex items-center gap-2 px-3 py-1.5 border border-border rounded-md text-sm hover:bg-muted transition-colors">
+            <Download className="h-4 w-4" /> Import
+          </button>
+          <button onClick={() => setShowCreate(!showCreate)} className="flex items-center gap-2 px-3 py-1.5 bg-primary text-primary-foreground rounded-md text-sm font-medium hover:bg-primary/90 transition-colors">
+            <Plus className="h-4 w-4" /> Create Skill
+          </button>
+        </div>
+      </div>
+
+      {showCreate && (
+        <div className="bg-card border border-border rounded-lg p-4 space-y-3">
+          <h3 className="text-sm font-medium">New Skill</h3>
+          <input placeholder="Skill name" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} className="w-full bg-muted border border-border rounded-md px-3 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-ring" />
+          <input placeholder="Description" value={form.description} onChange={(e) => setForm({ ...form, description: e.target.value })} className="w-full bg-muted border border-border rounded-md px-3 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-ring" />
+          <textarea placeholder="System prompt..." value={form.systemPrompt} onChange={(e) => setForm({ ...form, systemPrompt: e.target.value })} rows={4} className="w-full bg-muted border border-border rounded-md px-3 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-ring resize-none" />
+          <div className="flex gap-2">
+            <button onClick={handleCreate} className="px-3 py-1.5 bg-primary text-primary-foreground rounded-md text-sm hover:bg-primary/90">Create</button>
+            <button onClick={() => setShowCreate(false)} className="px-3 py-1.5 border border-border rounded-md text-sm hover:bg-muted">Cancel</button>
+          </div>
+        </div>
+      )}
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
+        <div className="lg:col-span-2 space-y-3">
+          <h2 className="text-sm font-medium flex items-center gap-2">
+            <Wrench className="h-4 w-4 text-muted-foreground" /> Skills ({skills.length})
+          </h2>
+          {skills.length === 0 ? (
+            <div className="bg-card border border-border rounded-lg p-8 text-center text-sm text-muted-foreground">
+              No skills created yet. Click &quot;Create Skill&quot; to add one.
+            </div>
+          ) : (
+            skills.map((s) => (
+              <div key={s.id} className="bg-card border border-border rounded-lg p-4">
+                <div className="flex items-start justify-between">
+                  <div>
+                    <h3 className="font-medium text-sm">{s.name}</h3>
+                    <p className="text-xs text-muted-foreground mt-0.5">{s.description || 'No description'}</p>
+                  </div>
+                  <span className={`text-xs px-2 py-0.5 rounded-full ${s.enabled ? 'bg-primary/10 text-primary' : 'bg-muted text-muted-foreground'}`}>
+                    {s.enabled ? 'Active' : 'Disabled'}
+                  </span>
+                </div>
+                <div className="flex items-center gap-4 mt-3 text-xs text-muted-foreground">
+                  <span>{s.usageCount || 0} uses</span>
+                  {s.qualityScore != null && <span>Quality: {Number(s.qualityScore).toFixed(1)}</span>}
+                  {s.groupId && <span className="bg-muted px-1.5 py-0.5 rounded">Grouped</span>}
+                </div>
+              </div>
+            ))
+          )}
+        </div>
+
+        <div className="space-y-4">
+          <div>
+            <h2 className="text-sm font-medium flex items-center gap-2 mb-3">
+              <Package className="h-4 w-4 text-muted-foreground" /> Groups ({groups.length})
+            </h2>
+            {groups.length === 0 ? (
+              <div className="text-xs text-muted-foreground">No groups yet.</div>
+            ) : (
+              <div className="space-y-2">
+                {groups.map((g) => (
+                  <div key={g.id} className="bg-card border border-border rounded-lg p-3 flex items-center justify-between">
+                    <div>
+                      <div className="text-sm font-medium">{g.name}</div>
+                      <div className="text-xs text-muted-foreground flex items-center gap-1">
+                        <RotateCw className="h-3 w-3" /> {g.rotationStrategy.replace('_', ' ')}
+                      </div>
+                    </div>
+                    <span className={`h-2 w-2 rounded-full ${g.enabled ? 'bg-primary' : 'bg-muted-foreground'}`} />
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/app/dashboard/vault/loading.tsx

@@ -0,0 +1,18 @@
+import { CardSkeleton } from '@/components/ui/skeleton'
+
+export default function VaultLoading() {
+  return (
+    <div className="space-y-6">
+      <div className="h-4 w-64 animate-pulse rounded bg-muted" />
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
+        <div className="lg:col-span-2 space-y-4">
+          <div className="h-8 w-32 animate-pulse rounded bg-muted" />
+          {Array.from({ length: 2 }).map((_, i) => (
+            <CardSkeleton key={i} />
+          ))}
+        </div>
+        <CardSkeleton />
+      </div>
+    </div>
+  )
+}

package/src/app/dashboard/vault/page.tsx

@@ -0,0 +1,139 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { Shield, Key, Plus, Trash2, Copy } from 'lucide-react'
+
+interface ApiKey {
+  id: string
+  name: string
+  keyPrefix: string
+  createdAt: string
+  lastUsedAt: string | null
+  requestCount: number
+}
+
+export default function VaultPage() {
+  const [keys, setKeys] = useState<ApiKey[]>([])
+  const [newKeyName, setNewKeyName] = useState('')
+  const [showCreate, setShowCreate] = useState(false)
+  const [createdKey, setCreatedKey] = useState<string | null>(null)
+
+  useEffect(() => {
+    fetch('/api/keys').then((r) => r.json()).then((data) => setKeys((data as { keys: ApiKey[] }).keys || [])).catch(() => {})
+  }, [])
+
+  async function handleCreate() {
+    if (!newKeyName.trim()) return
+    const res = await fetch('/api/keys', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ name: newKeyName.trim() }),
+    })
+    const data = await res.json()
+    if (data.key) {
+      setCreatedKey(data.key)
+      setNewKeyName('')
+      setShowCreate(false)
+      const refreshed = await fetch('/api/keys').then((r) => r.json())
+      setKeys((refreshed as { keys: ApiKey[] }).keys || [])
+    }
+  }
+
+  async function handleRevoke(id: string) {
+    await fetch('/api/keys', {
+      method: 'DELETE',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ id }),
+    })
+    setKeys((prev) => prev.filter((k) => k.id !== id))
+  }
+
+  return (
+    <div className="space-y-6">
+      <p className="text-sm text-muted-foreground">Manage API keys and access control</p>
+
+      {createdKey && (
+        <div className="bg-primary/10 border border-primary/20 rounded-lg p-4">
+          <div className="flex items-center justify-between mb-2">
+            <h3 className="text-sm font-medium text-primary">API Key Created</h3>
+            <button onClick={() => { navigator.clipboard.writeText(createdKey) }} className="flex items-center gap-1 text-xs px-2 py-1 bg-primary text-primary-foreground rounded hover:bg-primary/90">
+              <Copy className="h-3 w-3" /> Copy
+            </button>
+          </div>
+          <code className="text-xs font-mono break-all block bg-muted/50 p-2 rounded">{createdKey}</code>
+          <p className="text-xs text-muted-foreground mt-2">Copy this key now. You won&apos;t be able to see it again.</p>
+          <button onClick={() => setCreatedKey(null)} className="mt-2 text-xs text-muted-foreground hover:text-foreground">Dismiss</button>
+        </div>
+      )}
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
+        <div className="lg:col-span-2 space-y-4">
+          <div className="flex items-center justify-between">
+            <h2 className="text-sm font-medium flex items-center gap-2">
+              <Key className="h-4 w-4 text-muted-foreground" /> API Keys ({keys.length})
+            </h2>
+            <button onClick={() => setShowCreate(!showCreate)} className="flex items-center gap-2 px-3 py-1.5 bg-primary text-primary-foreground rounded-md text-sm font-medium hover:bg-primary/90 transition-colors">
+              <Plus className="h-4 w-4" /> Generate Key
+            </button>
+          </div>
+
+          {showCreate && (
+            <div className="bg-card border border-border rounded-lg p-4 flex items-center gap-2">
+              <input placeholder="Key name (e.g. Production)" value={newKeyName} onChange={(e) => setNewKeyName(e.target.value)} onKeyDown={(e) => e.key === 'Enter' && handleCreate()} className="flex-1 bg-muted border border-border rounded-md px-3 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-ring" />
+              <button onClick={handleCreate} className="px-3 py-1.5 bg-primary text-primary-foreground rounded-md text-sm hover:bg-primary/90">Create</button>
+              <button onClick={() => { setShowCreate(false); setNewKeyName('') }} className="px-3 py-1.5 border border-border rounded-md text-sm hover:bg-muted">Cancel</button>
+            </div>
+          )}
+
+          {keys.length === 0 ? (
+            <div className="bg-card border border-border rounded-lg p-8 text-center text-sm text-muted-foreground">
+              No API keys generated yet. Create one to start using the gateway.
+            </div>
+          ) : (
+            keys.map((k) => (
+              <div key={k.id} className="bg-card border border-border rounded-lg p-4">
+                <div className="flex items-center justify-between mb-2">
+                  <h3 className="font-medium text-sm">{k.name}</h3>
+                  <button onClick={() => handleRevoke(k.id)} className="p-1 hover:bg-destructive/10 rounded text-muted-foreground hover:text-destructive transition-colors">
+                    <Trash2 className="h-3.5 w-3.5" />
+                  </button>
+                </div>
+                <code className="text-xs font-mono bg-muted px-2 py-1 rounded block mb-3">{k.keyPrefix}</code>
+                <div className="flex items-center gap-4 text-xs text-muted-foreground">
+                  <span>Created: {new Date(k.createdAt).toLocaleDateString()}</span>
+                  <span>Last used: {k.lastUsedAt ? new Date(k.lastUsedAt).toLocaleDateString() : 'Never'}</span>
+                  <span>{k.requestCount.toLocaleString()} requests</span>
+                </div>
+              </div>
+            ))
+          )}
+        </div>
+
+        <div className="bg-card border border-border rounded-lg">
+          <div className="px-4 py-3 border-b border-border flex items-center gap-2">
+            <Shield className="h-4 w-4 text-primary" />
+            <h2 className="text-sm font-medium">Security</h2>
+          </div>
+          <div className="p-4 space-y-3">
+            <div className="flex justify-between text-sm">
+              <span className="text-muted-foreground">Key Format</span>
+              <span className="font-mono text-xs">adn_...</span>
+            </div>
+            <div className="flex justify-between text-sm">
+              <span className="text-muted-foreground">Hashing</span>
+              <span className="font-mono text-xs">SHA-256</span>
+            </div>
+            <div className="flex justify-between text-sm">
+              <span className="text-muted-foreground">Rate Limit</span>
+              <span>100 req/min</span>
+            </div>
+            <div className="flex justify-between text-sm">
+              <span className="text-muted-foreground">Active Keys</span>
+              <span>{keys.length}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/app/globals.css

@@ -0,0 +1,59 @@
+@import "tailwindcss";
+
+@theme inline {
+  --color-background: #0a0a0b;
+  --color-foreground: #fafafa;
+  --color-card: #111113;
+  --color-card-foreground: #fafafa;
+  --color-popover: #111113;
+  --color-popover-foreground: #fafafa;
+  --color-primary: #10b981;
+  --color-primary-foreground: #0a0a0b;
+  --color-secondary: #27272a;
+  --color-secondary-foreground: #fafafa;
+  --color-muted: #18181b;
+  --color-muted-foreground: #a1a1aa;
+  --color-accent: #8b5cf6;
+  --color-accent-foreground: #fafafa;
+  --color-destructive: #ef4444;
+  --color-destructive-foreground: #fafafa;
+  --color-border: #27272a;
+  --color-input: #27272a;
+  --color-ring: #10b981;
+  --color-sidebar: #0f0f11;
+  --color-sidebar-foreground: #a1a1aa;
+  --color-sidebar-active: #10b981;
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+}
+
+* {
+  border-color: var(--color-border);
+}
+
+body {
+  background: var(--color-background);
+  color: var(--color-foreground);
+  font-family: var(--font-sans), system-ui, sans-serif;
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--color-background);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--color-border);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--color-muted-foreground);
+}

package/src/app/layout.tsx

@@ -0,0 +1,32 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Synapse — Next-Gen AI Gateway",
+  description: "Smart AI Router & Token Optimizer with Neural Routing, Semantic Cache, and Self-Learning",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" className={`${geistSans.variable} ${geistMono.variable} dark h-full antialiased`}>
+      <body className="min-h-full flex flex-col bg-background text-foreground">
+        {children}
+      </body>
+    </html>
+  );
+}