synapse-gateway 2.0.0

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

@@ -0,0 +1,212 @@
+'use client'
+
+import { useEffect, useState, useRef } from 'react'
+import { Send, Trash2 } from 'lucide-react'
+
+interface Message {
+  role: 'user' | 'assistant' | 'system'
+  content: string
+  model?: string
+  tokens?: number
+  streaming?: boolean
+}
+
+interface ModelOption {
+  id: string
+  name: string
+  providerId: string
+  available: boolean
+}
+
+export default function PlaygroundPage() {
+  const [messages, setMessages] = useState<Message[]>([])
+  const [input, setInput] = useState('')
+  const [model, setModel] = useState('best')
+  const [models, setModels] = useState<ModelOption[]>([])
+  const [loading, setLoading] = useState(false)
+  const scrollRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    fetch('/api/models').then((r) => r.json()).then((data) => {
+      const all = (data as { models: ModelOption[] }).models || []
+      setModels(all)
+      if (all.length > 0 && model === 'best') setModel(all[0].name)
+    }).catch(() => {})
+  }, [])
+
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight
+    }
+  }, [messages])
+
+  async function handleSend() {
+    if (!input.trim() || loading) return
+
+    const userMsg: Message = { role: 'user', content: input.trim() }
+    const allMessages = [...messages, userMsg]
+    setMessages(allMessages)
+    setInput('')
+    setLoading(true)
+
+    const assistantIdx = allMessages.length
+    setMessages((prev) => [...prev, { role: 'assistant', content: '', streaming: true }])
+
+    try {
+      const res = await fetch('/api/v1/chat/completions', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          model,
+          messages: allMessages.map((m) => ({ role: m.role, content: m.content })),
+          stream: true,
+        }),
+      })
+
+      if (!res.ok || !res.body) {
+        const errData = await res.json().catch(() => ({ error: { message: 'Request failed' } }))
+        setMessages((prev) => {
+          const updated = [...prev]
+          updated[assistantIdx] = { role: 'assistant', content: errData.error?.message || 'Request failed' }
+          return updated
+        })
+        setLoading(false)
+        return
+      }
+
+      const reader = res.body.getReader()
+      const decoder = new TextDecoder()
+      let buffer = ''
+      let fullContent = ''
+      let modelUsed = model
+
+      while (true) {
+        const { done, value } = await reader.read()
+        if (done) break
+
+        buffer += decoder.decode(value, { stream: true })
+        const lines = buffer.split('\n')
+        buffer = lines.pop() || ''
+
+        for (const line of lines) {
+          const trimmed = line.trim()
+          if (!trimmed.startsWith('data: ')) continue
+          const data = trimmed.slice(6)
+          if (data === '[DONE]') continue
+
+          try {
+            const parsed = JSON.parse(data)
+            if (parsed.error) {
+              fullContent += parsed.error.message || JSON.stringify(parsed.error)
+              continue
+            }
+            const delta = parsed.choices?.[0]?.delta?.content
+            if (delta) fullContent += delta
+            if (parsed.model) modelUsed = parsed.model
+          } catch { continue }
+        }
+
+        setMessages((prev) => {
+          const updated = [...prev]
+          updated[assistantIdx] = { role: 'assistant', content: fullContent, model: modelUsed, streaming: true }
+          return updated
+        })
+      }
+
+      setMessages((prev) => {
+        const updated = [...prev]
+        updated[assistantIdx] = { role: 'assistant', content: fullContent, model: modelUsed, streaming: false }
+        return updated
+      })
+    } catch {
+      setMessages((prev) => {
+        const updated = [...prev]
+        updated[assistantIdx] = { role: 'assistant', content: 'Network error: Failed to connect' }
+        return updated
+      })
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const namespaceAliases = [
+    { value: 'best', label: 'Best (auto)' },
+    { value: 'fast', label: 'Fast (auto)' },
+    { value: 'cheap', label: 'Cheap (auto)' },
+    { value: 'reasoning', label: 'Reasoning (auto)' },
+    { value: 'code', label: 'Code (auto)' },
+  ]
+
+  return (
+    <div className="flex flex-col h-[calc(100vh-8rem)]">
+      <div className="flex items-center justify-between mb-4">
+        <div className="flex items-center gap-3">
+          <select
+            value={model}
+            onChange={(e) => setModel(e.target.value)}
+            className="bg-muted border border-border rounded-md text-sm px-3 py-1.5 focus:outline-none focus:ring-1 focus:ring-ring max-w-xs"
+          >
+            <optgroup label="Namespace Aliases">
+              {namespaceAliases.map((a) => (
+                <option key={a.value} value={a.value}>{a.label}</option>
+              ))}
+            </optgroup>
+            <optgroup label="Models">
+              {models.map((m) => (
+                <option key={m.id} value={m.name} disabled={!m.available}>
+                  {m.name} ({m.providerId})
+                </option>
+              ))}
+            </optgroup>
+          </select>
+        </div>
+        <button
+          onClick={() => setMessages([])}
+          className="flex items-center gap-1.5 px-3 py-1.5 text-sm text-muted-foreground hover:text-foreground border border-border rounded-md hover:bg-muted transition-colors"
+        >
+          <Trash2 className="h-3.5 w-3.5" /> Clear
+        </button>
+      </div>
+
+      <div ref={scrollRef} className="flex-1 overflow-y-auto bg-card border border-border rounded-lg p-4 space-y-4 mb-4">
+        {messages.length === 0 && (
+          <div className="flex items-center justify-center h-full text-sm text-muted-foreground">
+            Send a message to start testing
+          </div>
+        )}
+        {messages.map((m, i) => (
+          <div key={i} className={`flex ${m.role === 'user' ? 'justify-end' : 'justify-start'}`}>
+            <div className={`max-w-[80%] rounded-lg px-4 py-2.5 text-sm ${m.role === 'user' ? 'bg-primary/10 text-foreground' : 'bg-muted text-foreground'}`}>
+              <p className="whitespace-pre-wrap">{m.content || '\u00A0'}{m.streaming && <span className="animate-pulse">|</span>}</p>
+              {m.model && !m.streaming && (
+                <div className="text-xs text-muted-foreground mt-1.5 flex items-center gap-2">
+                  <code className="font-mono">{m.model}</code>
+                  {m.tokens && <span>{m.tokens} tokens</span>}
+                </div>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <div className="flex gap-2">
+        <input
+          type="text"
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          onKeyDown={(e) => e.key === 'Enter' && !e.shiftKey && handleSend()}
+          placeholder="Type a message..."
+          className="flex-1 bg-muted border border-border rounded-md px-4 py-2.5 text-sm focus:outline-none focus:ring-1 focus:ring-ring"
+          disabled={loading}
+        />
+        <button
+          onClick={handleSend}
+          disabled={loading || !input.trim()}
+          className="flex items-center gap-2 px-4 py-2.5 bg-primary text-primary-foreground rounded-md text-sm font-medium hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          <Send className="h-4 w-4" /> Send
+        </button>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,15 @@
+import { CardSkeleton } from '@/components/ui/skeleton'
+
+export default function ProvidersLoading() {
+  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-32 animate-pulse rounded bg-muted" />
+      </div>
+      {Array.from({ length: 5 }).map((_, i) => (
+        <CardSkeleton key={i} />
+      ))}
+    </div>
+  )
+}

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

@@ -0,0 +1,248 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { Server, Plus, Eye, EyeOff, Trash2, RefreshCw, Key } from 'lucide-react'
+
+interface ProviderData {
+  providers: Array<{
+    id: string
+    name: string
+    prefix: string
+    type: string
+    enabled: boolean
+    config: string
+    createdAt: string
+    health: {
+      status: string
+      avgLatencyMs: number | null
+      successRate: number | null
+      errorRate: number | null
+    } | null
+  }>
+}
+
+interface AccountData {
+  id: string
+  providerId: string
+  label: string | null
+  enabled: boolean
+  priority: number
+  hasApiKey: boolean
+  lastUsedAt: string | null
+  createdAt: string
+}
+
+export default function ProvidersPage() {
+  const [providers, setProviders] = useState<ProviderData['providers']>([])
+  const [accounts, setAccounts] = useState<AccountData[]>([])
+  const [expanded, setExpanded] = useState<string | null>(null)
+  const [showAddAccount, setShowAddAccount] = useState<string | null>(null)
+  const [accountForm, setAccountForm] = useState({ label: '', apiKey: '' })
+  const [showApiKey, setShowApiKey] = useState<Record<string, boolean>>({})
+  const [fetching, setFetching] = useState<Record<string, boolean>>({})
+
+  function loadData() {
+    Promise.all([
+      fetch('/api/providers').then((r) => r.json()).catch(() => ({ providers: [] })),
+      fetch('/api/providers/accounts').then((r) => r.json()).catch(() => ({ accounts: [] })),
+    ]).then(([pData, aData]) => {
+      setProviders((pData as ProviderData).providers || [])
+      setAccounts((aData as { accounts: AccountData[] }).accounts || [])
+    })
+  }
+
+  useEffect(() => { loadData() }, [])
+
+  async function handleAddAccount(providerId: string) {
+    if (!accountForm.apiKey) return
+    await fetch('/api/providers/accounts', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ providerId, label: accountForm.label, apiKey: accountForm.apiKey }),
+    })
+    setShowAddAccount(null)
+    setAccountForm({ label: '', apiKey: '' })
+    loadData()
+  }
+
+  async function handleDeleteAccount(id: string) {
+    await fetch('/api/providers/accounts', {
+      method: 'DELETE',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ id }),
+    })
+    loadData()
+  }
+
+  async function handleFetchModels(providerId: string) {
+    setFetching((prev) => ({ ...prev, [providerId]: true }))
+    try {
+      await fetch('/api/providers/fetch-models', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ providerId }),
+      })
+    } finally {
+      setFetching((prev) => ({ ...prev, [providerId]: false }))
+    }
+  }
+
+  async function handleToggleAccount(id: string, enabled: boolean) {
+    await fetch('/api/providers/accounts', {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ id, enabled }),
+    })
+    loadData()
+  }
+
+  return (
+    <div className="space-y-6">
+      <p className="text-sm text-muted-foreground">Configure AI providers, manage API keys, and fetch available models</p>
+
+      {providers.length === 0 ? (
+        <div className="bg-card border border-border rounded-lg p-8 text-center text-sm text-muted-foreground">
+          No providers registered. Bootstrap runs on startup.
+        </div>
+      ) : (
+        <div className="space-y-3">
+          {providers.map((p) => {
+            const providerAccounts = accounts.filter((a) => a.providerId === p.id)
+            const isExpanded = expanded === p.id
+
+            return (
+              <div key={p.id} className="bg-card border border-border rounded-lg">
+                <div className="p-4">
+                  <div className="flex items-start justify-between">
+                    <div className="flex items-center gap-3">
+                      <Server className="h-4 w-4 text-primary shrink-0" />
+                      <div>
+                        <div className="flex items-center gap-2">
+                          <h3 className="font-medium text-sm">{p.name}</h3>
+                          <span className="text-xs font-mono bg-muted px-1.5 py-0.5 rounded">{p.prefix}</span>
+                        </div>
+                        <div className="flex items-center gap-3 mt-1 text-xs text-muted-foreground">
+                          <span>Type: {p.type}</span>
+                          <span>{providerAccounts.length} account(s)</span>
+                          {p.health && (
+                            <>
+                              <span className={p.health.status === 'healthy' ? 'text-primary' : 'text-destructive'}>
+                                {p.health.status}
+                              </span>
+                              {p.health.avgLatencyMs != null && <span>{p.health.avgLatencyMs}ms</span>}
+                            </>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+
+                    <div className="flex items-center gap-2">
+                      <span className={`text-xs px-2 py-0.5 rounded-full ${p.enabled ? 'bg-primary/10 text-primary' : 'bg-muted text-muted-foreground'}`}>
+                        {p.enabled ? 'Enabled' : 'Disabled'}
+                      </span>
+                      <button
+                        onClick={() => setExpanded(isExpanded ? null : p.id)}
+                        className="px-2 py-1 text-xs border border-border rounded hover:bg-muted transition-colors"
+                      >
+                        {isExpanded ? 'Collapse' : 'Manage'}
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                {isExpanded && (
+                  <div className="border-t border-border p-4 space-y-3">
+                    <div className="flex items-center justify-between">
+                      <h4 className="text-xs font-medium uppercase tracking-wider text-muted-foreground">Accounts</h4>
+                      <div className="flex items-center gap-2">
+                        <button
+                          onClick={() => handleFetchModels(p.id)}
+                          disabled={fetching[p.id]}
+                          className="flex items-center gap-1.5 px-2 py-1 text-xs border border-border rounded hover:bg-muted transition-colors disabled:opacity-50"
+                        >
+                          <RefreshCw className={`h-3 w-3 ${fetching[p.id] ? 'animate-spin' : ''}`} />
+                          Fetch Models
+                        </button>
+                        <button
+                          onClick={() => setShowAddAccount(showAddAccount === p.id ? null : p.id)}
+                          className="flex items-center gap-1.5 px-2 py-1 text-xs bg-primary text-primary-foreground rounded hover:bg-primary/90 transition-colors"
+                        >
+                          <Plus className="h-3 w-3" /> Add Account
+                        </button>
+                      </div>
+                    </div>
+
+                    {showAddAccount === p.id && (
+                      <div className="bg-muted/50 border border-border rounded-md p-3 space-y-2">
+                        <input
+                          placeholder="Label (e.g. Production)"
+                          value={accountForm.label}
+                          onChange={(e) => setAccountForm({ ...accountForm, label: e.target.value })}
+                          className="w-full bg-background border border-border rounded px-3 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-ring"
+                        />
+                        <div className="relative">
+                          <input
+                            type={showApiKey[`new-${p.id}`] ? 'text' : 'password'}
+                            placeholder="API Key"
+                            value={accountForm.apiKey}
+                            onChange={(e) => setAccountForm({ ...accountForm, apiKey: e.target.value })}
+                            className="w-full bg-background border border-border rounded px-3 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-ring pr-10"
+                          />
+                          <button
+                            onClick={() => setShowApiKey((prev) => ({ ...prev, [`new-${p.id}`]: !prev[`new-${p.id}`] }))}
+                            className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+                          >
+                            {showApiKey[`new-${p.id}`] ? <EyeOff className="h-3.5 w-3.5" /> : <Eye className="h-3.5 w-3.5" />}
+                          </button>
+                        </div>
+                        <div className="flex gap-2">
+                          <button onClick={() => handleAddAccount(p.id)} disabled={!accountForm.apiKey} className="px-3 py-1 bg-primary text-primary-foreground rounded text-xs hover:bg-primary/90 disabled:opacity-50">Save</button>
+                          <button onClick={() => { setShowAddAccount(null); setAccountForm({ label: '', apiKey: '' }) }} className="px-3 py-1 border border-border rounded text-xs hover:bg-muted">Cancel</button>
+                        </div>
+                      </div>
+                    )}
+
+                    {providerAccounts.length === 0 ? (
+                      <div className="text-xs text-muted-foreground py-2">No accounts configured. Add an API key to start using this provider.</div>
+                    ) : (
+                      providerAccounts.map((a) => (
+                        <div key={a.id} className="flex items-center justify-between bg-muted/30 border border-border rounded-md px-3 py-2">
+                          <div className="flex items-center gap-3">
+                            <Key className="h-3.5 w-3.5 text-muted-foreground" />
+                            <div>
+                              <span className="text-sm">{a.label || 'Unnamed'}</span>
+                              <span className="ml-2 text-xs text-muted-foreground">
+                                {a.hasApiKey ? 'Key configured' : 'No key'}
+                              </span>
+                            </div>
+                          </div>
+                          <div className="flex items-center gap-2">
+                            <span className="text-xs text-muted-foreground">
+                              {a.lastUsedAt ? `Used ${new Date(a.lastUsedAt).toLocaleDateString()}` : 'Never used'}
+                            </span>
+                            <button
+                              onClick={() => handleToggleAccount(a.id, !a.enabled)}
+                              className={`text-xs px-2 py-0.5 rounded-full ${a.enabled ? 'bg-primary/10 text-primary' : 'bg-muted text-muted-foreground'}`}
+                            >
+                              {a.enabled ? 'Active' : 'Disabled'}
+                            </button>
+                            <button
+                              onClick={() => handleDeleteAccount(a.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>
+                        </div>
+                      ))
+                    )}
+                  </div>
+                )}
+              </div>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,15 @@
+import { CardSkeleton } from '@/components/ui/skeleton'
+
+export default function RoutesLoading() {
+  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-32 animate-pulse rounded bg-muted" />
+      </div>
+      {Array.from({ length: 3 }).map((_, i) => (
+        <CardSkeleton key={i} />
+      ))}
+    </div>
+  )
+}

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

@@ -0,0 +1,72 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { Route, Plus, ArrowRight } from 'lucide-react'
+
+interface Pipeline {
+  id: string
+  name: string
+  description: string | null
+  nodes: Array<{ id: string; type: string; config: Record<string, unknown> }>
+  connections: Array<{ from: string; to: string }>
+  enabled: boolean
+}
+
+export default function RoutesPage() {
+  const [pipelines, setPipelines] = useState<Pipeline[]>([])
+
+  useEffect(() => {
+    fetch('/api/routes/pipeline').then((r) => r.json()).then((data) => setPipelines((data as { pipelines: Pipeline[] }).pipelines || [])).catch(() => {})
+  }, [])
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <p className="text-sm text-muted-foreground">Configure routing pipelines and fallback chains</p>
+        <button 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" /> Add Pipeline
+        </button>
+      </div>
+
+      {pipelines.length === 0 ? (
+        <div className="bg-card border border-border rounded-lg p-8 text-center text-sm text-muted-foreground">
+          No pipelines configured. The default pipeline processes requests through provider routing with automatic fallback.
+        </div>
+      ) : (
+        <div className="space-y-3">
+          {pipelines.map((p) => (
+            <div key={p.id} className="bg-card border border-border rounded-lg p-4">
+              <div className="flex items-center gap-3 mb-3">
+                <Route className="h-4 w-4 text-primary shrink-0" />
+                <h3 className="font-medium text-sm flex-1">{p.name}</h3>
+                <span className="text-xs text-muted-foreground">
+                  {p.nodes?.length || 0} nodes
+                </span>
+                <span className={`text-xs px-2 py-0.5 rounded-full ${p.enabled ? 'bg-primary/10 text-primary' : 'bg-muted text-muted-foreground'}`}>
+                  {p.enabled ? 'Active' : 'Disabled'}
+                </span>
+              </div>
+
+              {p.description && (
+                <p className="text-xs text-muted-foreground mb-3">{p.description}</p>
+              )}
+
+              {p.nodes && p.nodes.length > 0 && (
+                <div className="flex items-center gap-2 flex-wrap">
+                  {p.nodes.map((n, i) => (
+                    <span key={n.id} className="flex items-center gap-1">
+                      {i > 0 && <ArrowRight className="h-3 w-3 text-muted-foreground" />}
+                      <code className="text-xs font-mono bg-muted px-2 py-1 rounded">
+                        {n.type}
+                      </code>
+                    </span>
+                  ))}
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,20 @@
+export default function SettingsLoading() {
+  return (
+    <div className="flex gap-6 h-[calc(100vh-8rem)]">
+      <div className="w-48 shrink-0 space-y-2">
+        {Array.from({ length: 6 }).map((_, i) => (
+          <div key={i} className="h-9 w-full animate-pulse rounded bg-muted" />
+        ))}
+      </div>
+      <div className="flex-1 bg-card border border-border rounded-lg p-6 space-y-6">
+        <div className="h-6 w-48 animate-pulse rounded bg-muted" />
+        {Array.from({ length: 4 }).map((_, i) => (
+          <div key={i} className="space-y-2">
+            <div className="h-4 w-32 animate-pulse rounded bg-muted" />
+            <div className="h-9 w-40 animate-pulse rounded bg-muted" />
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}