synapse-gateway 2.0.0

package/src/app/dashboard/layout.tsx

@@ -0,0 +1,143 @@
+'use client'
+
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import { useState } from 'react'
+import { cn } from '@/lib/utils/cn'
+import { AuthGuard, useAuth } from '@/lib/auth/guard'
+import { ToastProvider } from '@/components/ui/toast'
+import { ErrorBoundary } from '@/components/ui/error-boundary'
+import {
+  LayoutDashboard,
+  Server,
+  Brain,
+  Route,
+  Wrench,
+  Sparkles,
+  MessageSquare,
+  Shield,
+  Settings,
+  Database,
+  Menu,
+  X,
+  Zap,
+  LogOut,
+} from 'lucide-react'
+
+const navItems = [
+  { href: '/dashboard', label: 'Command Center', icon: LayoutDashboard },
+  { href: '/dashboard/providers', label: 'Providers', icon: Server },
+  { href: '/dashboard/models', label: 'Models', icon: Brain },
+  { href: '/dashboard/routes', label: 'Routes', icon: Route },
+  { href: '/dashboard/skills', label: 'Skills', icon: Wrench },
+  { href: '/dashboard/intelligence', label: 'Intelligence', icon: Sparkles },
+  { href: '/dashboard/playground', label: 'Playground', icon: MessageSquare },
+  { href: '/dashboard/memory', label: 'Memory', icon: Database },
+  { href: '/dashboard/vault', label: 'Vault', icon: Shield },
+  { href: '/dashboard/settings', label: 'Settings', icon: Settings },
+]
+
+export default function DashboardLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <AuthGuard>
+      <ToastProvider>
+        <ErrorBoundary>
+          <DashboardShell>{children}</DashboardShell>
+        </ErrorBoundary>
+      </ToastProvider>
+    </AuthGuard>
+  )
+}
+
+function DashboardShell({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname()
+  const [mobileOpen, setMobileOpen] = useState(false)
+  const { user, logout } = useAuth()
+
+  return (
+    <div className="flex h-screen overflow-hidden">
+      <aside
+        className={cn(
+          'hidden lg:flex flex-col w-64 border-r border-border bg-sidebar shrink-0',
+          mobileOpen && 'fixed inset-y-0 left-0 z-50 flex lg:hidden'
+        )}
+      >
+        <div className="flex items-center gap-2 px-4 h-14 border-b border-border">
+          <Zap className="h-5 w-5 text-primary" />
+          <span className="font-semibold text-foreground tracking-tight">Synapse</span>
+          <span className="text-xs text-muted-foreground ml-auto font-mono">v2.0</span>
+        </div>
+
+        <nav className="flex-1 overflow-y-auto py-2 px-2 space-y-0.5">
+          {navItems.map((item) => {
+            const isActive = pathname === item.href || (item.href !== '/dashboard' && pathname.startsWith(item.href))
+            return (
+              <Link
+                key={item.href}
+                href={item.href}
+                onClick={() => setMobileOpen(false)}
+                className={cn(
+                  'flex items-center gap-3 px-3 py-2 rounded-md text-sm transition-colors',
+                  isActive
+                    ? 'bg-primary/10 text-sidebar-active font-medium'
+                    : 'text-sidebar-foreground hover:bg-muted hover:text-foreground'
+                )}
+              >
+                <item.icon className="h-4 w-4 shrink-0" />
+                {item.label}
+              </Link>
+            )
+          })}
+        </nav>
+
+        <div className="border-t border-border p-4 space-y-3">
+          <div className="flex items-center gap-2 text-xs text-muted-foreground">
+            <div className="h-2 w-2 rounded-full bg-primary animate-pulse" />
+            System Online
+          </div>
+          <div className="flex items-center justify-between">
+            <span className="text-xs text-muted-foreground">{user?.name || 'Admin'}</span>
+            <button onClick={logout} className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors">
+              <LogOut className="h-3 w-3" /> Sign Out
+            </button>
+          </div>
+        </div>
+      </aside>
+
+      {mobileOpen && (
+        <div className="fixed inset-0 z-40 bg-black/50 lg:hidden" onClick={() => setMobileOpen(false)} />
+      )}
+
+      <div className="flex flex-col flex-1 overflow-hidden">
+        <header className="flex items-center h-14 px-4 border-b border-border bg-card shrink-0">
+          <button
+            className="lg:hidden mr-3 p-1 rounded-md hover:bg-muted"
+            onClick={() => setMobileOpen(!mobileOpen)}
+          >
+            {mobileOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
+          </button>
+
+          <div className="flex items-center gap-2 flex-1">
+            <h1 className="text-sm font-medium">
+              {navItems.find((i) => pathname === i.href || (i.href !== '/dashboard' && pathname.startsWith(i.href)))?.label || 'Dashboard'}
+            </h1>
+          </div>
+
+          <div className="flex items-center gap-4">
+            <div className="hidden sm:flex items-center gap-2 text-xs text-muted-foreground font-mono">
+              <span>localhost:3333</span>
+              <div className="h-2 w-2 rounded-full bg-primary" />
+            </div>
+            <button onClick={logout} className="lg:hidden flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground">
+              <LogOut className="h-3.5 w-3.5" />
+            </button>
+          </div>
+        </header>
+
+        <main className="flex-1 overflow-y-auto p-4 lg:p-6">
+          {children}
+        </main>
+      </div>
+    </div>
+  )
+}

package/src/app/dashboard/loading.tsx

@@ -0,0 +1,17 @@
+import { StatsSkeleton } from '@/components/ui/skeleton'
+
+export default function DashboardLoading() {
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div className="h-4 w-48 animate-pulse rounded bg-muted" />
+        <div className="h-8 w-32 animate-pulse rounded bg-muted" />
+      </div>
+      <StatsSkeleton />
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+        <div className="bg-card border border-border rounded-lg p-4 h-64 animate-pulse" />
+        <div className="bg-card border border-border rounded-lg p-4 h-64 animate-pulse" />
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,15 @@
+import { CardSkeleton } from '@/components/ui/skeleton'
+
+export default function MemoryLoading() {
+  return (
+    <div className="space-y-6">
+      <div className="h-4 w-64 animate-pulse rounded bg-muted" />
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <CardSkeleton />
+        <CardSkeleton />
+        <CardSkeleton />
+      </div>
+      <div className="bg-card border border-border rounded-lg p-4 h-40 animate-pulse" />
+    </div>
+  )
+}

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

@@ -0,0 +1,71 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { Database, Clock, BookOpen, Wrench } from 'lucide-react'
+
+interface MemoryStats {
+  stats: { episodes: number; knowledge: number; rules: number; totalSize: string }
+}
+
+export default function MemoryPage() {
+  const [stats, setStats] = useState<MemoryStats['stats'] | null>(null)
+
+  useEffect(() => {
+    fetch('/api/memory').then((r) => r.json()).then((data) => setStats((data as MemoryStats).stats)).catch(() => {})
+  }, [])
+
+  const memoryTypes = [
+    { type: 'Episodic', icon: Clock, description: 'Conversational experiences with 90-day rolling window', count: stats?.episodes || 0, color: 'text-primary', bgColor: 'bg-primary/10' },
+    { type: 'Semantic', icon: BookOpen, description: 'Permanent knowledge facts extracted from episodes', count: stats?.knowledge || 0, color: 'text-accent', bgColor: 'bg-accent/10' },
+    { type: 'Procedural', icon: Wrench, description: 'Compiled rules and decision procedures', count: stats?.rules || 0, color: 'text-yellow-400', bgColor: 'bg-yellow-400/10' },
+  ]
+
+  return (
+    <div className="space-y-6">
+      <p className="text-sm text-muted-foreground">Persistent memory system with episodic, semantic, and procedural layers</p>
+
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        {memoryTypes.map((m) => (
+          <div key={m.type} className="bg-card border border-border rounded-lg p-4 space-y-3">
+            <div className="flex items-center gap-2">
+              <div className={`p-1.5 rounded ${m.bgColor}`}>
+                <m.icon className={`h-4 w-4 ${m.color}`} />
+              </div>
+              <h3 className="font-medium text-sm">{m.type} Memory</h3>
+            </div>
+            <p className="text-xs text-muted-foreground">{m.description}</p>
+            <div className="pt-2 border-t border-border">
+              <div className="text-lg font-semibold">{m.count.toLocaleString()}</div>
+              <div className="text-xs text-muted-foreground">entries</div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <div className="bg-card border border-border rounded-lg p-4">
+        <div className="flex items-center gap-2 mb-3">
+          <Database className="h-4 w-4 text-muted-foreground" />
+          <h2 className="text-sm font-medium">Memory Operations</h2>
+        </div>
+        <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
+          <button onClick={async () => { await fetch('/api/distill', { method: 'POST' }) }} className="p-3 border border-border rounded-md text-sm hover:bg-muted transition-colors text-left">
+            <div className="font-medium">Distill Now</div>
+            <div className="text-xs text-muted-foreground mt-1">Run experience distillation</div>
+          </button>
+          <div className="p-3 border border-border rounded-md text-sm">
+            <div className="font-medium">Search</div>
+            <div className="text-xs text-muted-foreground mt-1">Query across all memory types</div>
+          </div>
+          <div className="p-3 border border-border rounded-md text-sm">
+            <div className="font-medium">Export</div>
+            <div className="text-xs text-muted-foreground mt-1">Export all memory data</div>
+          </div>
+          <div className="p-3 border border-border rounded-md text-sm">
+            <div className="font-medium">Cleanup</div>
+            <div className="text-xs text-muted-foreground mt-1">Remove expired episodes</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,13 @@
+import { TableSkeleton } from '@/components/ui/skeleton'
+
+export default function ModelsLoading() {
+  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="h-8 w-56 animate-pulse rounded bg-muted" />
+      </div>
+      <TableSkeleton rows={8} />
+    </div>
+  )
+}

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

@@ -0,0 +1,107 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { Brain, Search } from 'lucide-react'
+
+interface ModelData {
+  models: Array<{
+    id: string
+    providerId: string
+    name: string
+    displayName: string | null
+    pricingTier: string | null
+    costPer1mInput: number | null
+    costPer1mOutput: number | null
+    contextWindow: number | null
+    available: boolean
+  }>
+}
+
+const categoryColors: Record<string, string> = {
+  free: 'bg-primary/10 text-primary',
+  cheap: 'bg-blue-500/10 text-blue-400',
+  pay_per_use: 'bg-accent/10 text-accent',
+  subscription: 'bg-yellow-500/10 text-yellow-400',
+}
+
+export default function ModelsPage() {
+  const [models, setModels] = useState<ModelData['models']>([])
+  const [search, setSearch] = useState('')
+
+  useEffect(() => {
+    fetch('/api/models').then((r) => r.json()).then((data) => setModels((data as ModelData).models || [])).catch(() => {})
+  }, [])
+
+  const filtered = models.filter((m) =>
+    !search || m.name.toLowerCase().includes(search.toLowerCase()) || m.id.toLowerCase().includes(search.toLowerCase()) || m.providerId.toLowerCase().includes(search.toLowerCase())
+  )
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <p className="text-sm text-muted-foreground">Browse and manage all available AI models</p>
+        <div className="relative">
+          <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
+          <input
+            type="text"
+            placeholder="Search models..."
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            className="pl-8 pr-3 py-1.5 bg-muted border border-border rounded-md text-sm w-56 focus:outline-none focus:ring-1 focus:ring-ring"
+          />
+        </div>
+      </div>
+
+      {filtered.length === 0 ? (
+        <div className="bg-card border border-border rounded-lg p-8 text-center text-sm text-muted-foreground">
+          {models.length === 0 ? 'No models registered yet. Fetch models from providers.' : 'No models match your search.'}
+        </div>
+      ) : (
+        <div className="bg-card border border-border rounded-lg overflow-hidden">
+          <table className="w-full text-sm">
+            <thead>
+              <tr className="border-b border-border bg-muted/50">
+                <th className="text-left px-4 py-2.5 text-xs font-medium text-muted-foreground uppercase tracking-wider">Model</th>
+                <th className="text-left px-4 py-2.5 text-xs font-medium text-muted-foreground uppercase tracking-wider">Provider</th>
+                <th className="text-left px-4 py-2.5 text-xs font-medium text-muted-foreground uppercase tracking-wider">Tier</th>
+                <th className="text-left px-4 py-2.5 text-xs font-medium text-muted-foreground uppercase tracking-wider">Context</th>
+                <th className="text-left px-4 py-2.5 text-xs font-medium text-muted-foreground uppercase tracking-wider">Input $/1M</th>
+                <th className="text-left px-4 py-2.5 text-xs font-medium text-muted-foreground uppercase tracking-wider">Output $/1M</th>
+                <th className="text-left px-4 py-2.5 text-xs font-medium text-muted-foreground uppercase tracking-wider">Status</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-border">
+              {filtered.map((m) => (
+                <tr key={m.id} className="hover:bg-muted/30 transition-colors">
+                  <td className="px-4 py-3">
+                    <div className="flex items-center gap-2">
+                      <Brain className="h-3.5 w-3.5 text-muted-foreground" />
+                      <code className="font-mono text-xs">{m.name}</code>
+                    </div>
+                  </td>
+                  <td className="px-4 py-3 text-xs text-muted-foreground">{m.providerId}</td>
+                  <td className="px-4 py-3">
+                    {m.pricingTier && (
+                      <span className={`text-xs px-2 py-0.5 rounded-full ${categoryColors[m.pricingTier] || 'bg-muted text-muted-foreground'}`}>
+                        {m.pricingTier}
+                      </span>
+                    )}
+                  </td>
+                  <td className="px-4 py-3 text-xs font-mono">{m.contextWindow ? `${m.contextWindow / 1000}K` : '—'}</td>
+                  <td className="px-4 py-3 text-xs font-mono">{m.costPer1mInput != null ? `$${m.costPer1mInput}` : '—'}</td>
+                  <td className="px-4 py-3 text-xs font-mono">{m.costPer1mOutput != null ? `$${m.costPer1mOutput}` : '—'}</td>
+                  <td className="px-4 py-3">
+                    <span className="flex items-center gap-1.5 text-xs text-primary">
+                      <span className={`h-1.5 w-1.5 rounded-full ${m.available ? 'bg-primary' : 'bg-muted-foreground'}`} />
+                      {m.available ? 'active' : 'inactive'}
+                    </span>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/app/dashboard/page.tsx

@@ -0,0 +1,183 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import {
+  Activity,
+  DollarSign,
+  Clock,
+  ArrowUpRight,
+  ArrowDownRight,
+  Zap,
+  Server,
+} from 'lucide-react'
+
+interface DashboardData {
+  stats: {
+    totalRequests: number
+    todayTokens: number
+    todayCost: number
+    cacheHits: number
+  }
+  recentRequests: Array<{
+    id: string
+    requestId: string
+    model: string
+    providerId: string | null
+    inputTokens: number | null
+    outputTokens: number | null
+    tokensSaved: number | null
+    cost: number | null
+    latencyMs: number | null
+    statusCode: number | null
+    fallbackUsed: number | null
+    cached: number | null
+    createdAt: string
+  }>
+  providers: Array<{
+    id: string
+    name: string
+    prefix: string
+    enabled: boolean
+    health: {
+      status: string
+      avgLatencyMs: number | null
+      successRate: number | null
+    } | null
+  }>
+}
+
+function formatNumber(n: number): string {
+  if (n >= 1_000_000) return (n / 1_000_000).toFixed(1) + 'M'
+  if (n >= 1_000) return (n / 1_000).toFixed(1) + 'K'
+  return n.toLocaleString()
+}
+
+function StatusDot({ status }: { status: string }) {
+  const color = status === 'healthy' ? 'bg-primary' : status === 'degraded' ? 'bg-yellow-500' : 'bg-destructive'
+  return <span className={`inline-block h-2 w-2 rounded-full ${color}`} />
+}
+
+export default function DashboardPage() {
+  const [data, setData] = useState<DashboardData | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    async function load() {
+      try {
+        const res = await fetch('/api/dashboard')
+        if (res.ok) setData(await res.json())
+      } catch { /* ignore */ }
+      setLoading(false)
+    }
+    load()
+    const interval = setInterval(load, 10000)
+    return () => clearInterval(interval)
+  }, [])
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-64 text-sm text-muted-foreground">
+        Loading dashboard...
+      </div>
+    )
+  }
+
+  if (!data) {
+    return (
+      <div className="flex items-center justify-center h-64 text-sm text-muted-foreground">
+        Unable to load dashboard data. Make sure the database is initialized.
+      </div>
+    )
+  }
+
+  const stats = [
+    { label: 'Total Requests', value: formatNumber(data.stats.totalRequests), change: '', up: true, icon: Activity },
+    { label: 'Tokens Used', value: formatNumber(data.stats.todayTokens), change: '', up: true, icon: Zap },
+    { label: 'Total Cost', value: `$${Number(data.stats.todayCost).toFixed(2)}`, change: '', up: false, icon: DollarSign },
+    { label: 'Cache Hits', value: formatNumber(data.stats.cacheHits), change: '', up: true, icon: Clock },
+  ]
+
+  return (
+    <div className="space-y-6">
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+        {stats.map((s) => (
+          <div key={s.label} className="bg-card border border-border rounded-lg p-4">
+            <div className="flex items-center justify-between mb-2">
+              <span className="text-xs text-muted-foreground uppercase tracking-wider">{s.label}</span>
+              <s.icon className="h-4 w-4 text-muted-foreground" />
+            </div>
+            <div className="text-2xl font-semibold">{s.value}</div>
+          </div>
+        ))}
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
+        <div className="lg:col-span-2 bg-card border border-border rounded-lg">
+          <div className="px-4 py-3 border-b border-border">
+            <h2 className="text-sm font-medium">Recent Requests</h2>
+          </div>
+          {data.recentRequests.length === 0 ? (
+            <div className="px-4 py-8 text-sm text-muted-foreground text-center">
+              No requests yet. Send a request to <code className="font-mono text-xs">/api/v1/chat/completions</code> to get started.
+            </div>
+          ) : (
+            <div className="divide-y divide-border">
+              {data.recentRequests.slice(0, 10).map((r) => (
+                <div key={r.id} className="px-4 py-3 flex items-center gap-4 text-sm">
+                  <span className="text-xs text-muted-foreground w-16 shrink-0">
+                    {new Date(r.createdAt).toLocaleTimeString()}
+                  </span>
+                  <span className="font-mono text-xs">{r.model}</span>
+                  <span className="text-muted-foreground text-xs">{r.providerId || '—'}</span>
+                  <span className="ml-auto text-muted-foreground text-xs">
+                    {(r.inputTokens || 0) + (r.outputTokens || 0)} tok
+                  </span>
+                  <span className="text-muted-foreground text-xs w-16 text-right">
+                    {r.latencyMs ? `${r.latencyMs}ms` : '—'}
+                  </span>
+                  <span className={`text-xs px-2 py-0.5 rounded-full ${
+                    r.cached ? 'bg-accent/10 text-accent'
+                      : r.fallbackUsed ? 'bg-yellow-500/10 text-yellow-500'
+                        : r.statusCode && r.statusCode >= 400 ? 'bg-destructive/10 text-destructive'
+                          : 'bg-primary/10 text-primary'
+                  }`}>
+                    {r.cached ? 'cached' : r.fallbackUsed ? 'fallback' : r.statusCode && r.statusCode >= 400 ? 'error' : 'success'}
+                  </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">
+            <Server className="h-4 w-4 text-muted-foreground" />
+            <h2 className="text-sm font-medium">Providers</h2>
+          </div>
+          {data.providers.length === 0 ? (
+            <div className="px-4 py-8 text-sm text-muted-foreground text-center">
+              No providers configured yet.
+            </div>
+          ) : (
+            <div className="divide-y divide-border">
+              {data.providers.map((p) => (
+                <div key={p.id} className="px-4 py-3 flex items-center gap-3">
+                  <StatusDot status={p.health?.status || 'unknown'} />
+                  <div className="flex-1 min-w-0">
+                    <div className="text-sm font-medium">{p.name}</div>
+                    <div className="text-xs text-muted-foreground font-mono">{p.prefix}</div>
+                  </div>
+                  {p.health && (
+                    <div className="text-xs text-muted-foreground">
+                      {p.health.avgLatencyMs ? `${p.health.avgLatencyMs}ms` : '—'}
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,17 @@
+export default function PlaygroundLoading() {
+  return (
+    <div className="flex flex-col h-[calc(100vh-8rem)]">
+      <div className="flex items-center justify-between mb-4">
+        <div className="h-9 w-48 animate-pulse rounded bg-muted" />
+        <div className="h-8 w-20 animate-pulse rounded bg-muted" />
+      </div>
+      <div className="flex-1 bg-card border border-border rounded-lg p-4 mb-4 flex items-center justify-center">
+        <div className="text-sm text-muted-foreground animate-pulse">Loading playground...</div>
+      </div>
+      <div className="flex gap-2">
+        <div className="flex-1 h-10 animate-pulse rounded bg-muted" />
+        <div className="h-10 w-20 animate-pulse rounded bg-muted" />
+      </div>
+    </div>
+  )
+}