synapse-gateway 2.0.0

package/src/app/login/page.tsx

@@ -0,0 +1,87 @@
+'use client'
+
+import { useState } from 'react'
+import { Zap } from 'lucide-react'
+
+export default function LoginPage() {
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    if (!password) return
+    setLoading(true)
+    setError('')
+
+    try {
+      const res = await fetch('/api/auth/login', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ password }),
+      })
+      const data = await res.json()
+
+      if (!res.ok) {
+        setError(data.error || 'Login failed')
+        return
+      }
+
+      localStorage.setItem('synapse_token', data.token)
+      localStorage.setItem('synapse_user', JSON.stringify(data.user))
+      window.location.href = '/dashboard'
+    } catch {
+      setError('Network error')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-background p-4">
+      <div className="w-full max-w-sm space-y-8">
+        <div className="text-center space-y-2">
+          <div className="flex items-center justify-center gap-2 mb-4">
+            <div className="p-2 rounded-lg bg-primary/10">
+              <Zap className="h-6 w-6 text-primary" />
+            </div>
+          </div>
+          <h1 className="text-2xl font-bold tracking-tight">Synapse</h1>
+          <p className="text-sm text-muted-foreground">AI Gateway & Intelligence Platform</p>
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label htmlFor="password" className="text-sm font-medium block mb-1.5">Password</label>
+            <input
+              id="password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder="Enter admin password"
+              className="w-full bg-muted border border-border rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+              autoFocus
+              disabled={loading}
+            />
+          </div>
+
+          {error && (
+            <div className="text-sm text-destructive bg-destructive/10 px-3 py-2 rounded-md">{error}</div>
+          )}
+
+          <button
+            type="submit"
+            disabled={loading || !password}
+            className="w-full py-2 bg-primary text-primary-foreground rounded-md text-sm font-medium hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {loading ? 'Signing in...' : 'Sign In'}
+          </button>
+        </form>
+
+        <p className="text-xs text-center text-muted-foreground">
+          Default password: <code className="font-mono bg-muted px-1.5 py-0.5 rounded">changeme</code>
+        </p>
+      </div>
+    </div>
+  )
+}

package/src/app/page.tsx

@@ -0,0 +1,5 @@
+import { redirect } from 'next/navigation'
+
+export default function Home() {
+  redirect('/dashboard')
+}

package/src/components/ui/badge.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@/lib/utils/cn'
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium transition-colors',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary/10 text-primary',
+        secondary: 'bg-secondary text-secondary-foreground',
+        accent: 'bg-accent/10 text-accent',
+        destructive: 'bg-destructive/10 text-destructive',
+        outline: 'border border-border text-foreground',
+        warning: 'bg-yellow-500/10 text-yellow-500',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLSpanElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return <span className={cn(badgeVariants({ variant }), className)} {...props} />
+}
+
+export { Badge, badgeVariants }

package/src/components/ui/button.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react'
+import { cn } from '@/lib/utils/cn'
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'default' | 'secondary' | 'outline' | 'ghost' | 'destructive'
+  size?: 'sm' | 'md' | 'lg' | 'icon'
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant = 'default', size = 'md', ...props }, ref) => {
+    return (
+      <button
+        className={cn(
+          'inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+          {
+            'bg-primary text-primary-foreground hover:bg-primary/90': variant === 'default',
+            'bg-secondary text-secondary-foreground hover:bg-secondary/80': variant === 'secondary',
+            'border border-border bg-transparent hover:bg-muted': variant === 'outline',
+            'hover:bg-muted': variant === 'ghost',
+            'bg-destructive text-destructive-foreground hover:bg-destructive/90': variant === 'destructive',
+          },
+          {
+            'h-7 px-2.5 text-xs': size === 'sm',
+            'h-9 px-4': size === 'md',
+            'h-11 px-6 text-base': size === 'lg',
+            'h-8 w-8 p-0': size === 'icon',
+          },
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  },
+)
+Button.displayName = 'Button'
+
+export { Button }

package/src/components/ui/card.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react'
+import { cn } from '@/lib/utils/cn'
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('rounded-lg border border-border bg-card text-card-foreground', className)}
+      {...props}
+    />
+  ),
+)
+Card.displayName = 'Card'
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('px-4 py-3 border-b border-border', className)} {...props} />
+  ),
+)
+CardHeader.displayName = 'CardHeader'
+
+const CardTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3 ref={ref} className={cn('text-sm font-medium', className)} {...props} />
+  ),
+)
+CardTitle.displayName = 'CardTitle'
+
+const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <p ref={ref} className={cn('text-xs text-muted-foreground', className)} {...props} />
+  ),
+)
+CardDescription.displayName = 'CardDescription'
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('p-4', className)} {...props} />
+  ),
+)
+CardContent.displayName = 'CardContent'
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('px-4 py-3 border-t border-border flex items-center', className)} {...props} />
+  ),
+)
+CardFooter.displayName = 'CardFooter'
+
+export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter }

package/src/components/ui/error-boundary.tsx

@@ -0,0 +1,47 @@
+'use client'
+
+import { Component, type ReactNode } from 'react'
+
+interface Props {
+  children: ReactNode
+  fallback?: ReactNode
+}
+
+interface State {
+  hasError: boolean
+  error: Error | null
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props)
+    this.state = { hasError: false, error: null }
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error }
+  }
+
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) return this.props.fallback
+
+      return (
+        <div className="flex items-center justify-center min-h-[200px] p-8">
+          <div className="text-center space-y-3">
+            <div className="text-destructive text-sm font-medium">Something went wrong</div>
+            <p className="text-xs text-muted-foreground max-w-md">{this.state.error?.message || 'An unexpected error occurred'}</p>
+            <button
+              onClick={() => this.setState({ hasError: false, error: null })}
+              className="px-3 py-1.5 text-xs border border-border rounded-md hover:bg-muted transition-colors"
+            >
+              Try Again
+            </button>
+          </div>
+        </div>
+      )
+    }
+
+    return this.props.children
+  }
+}

package/src/components/ui/index.ts

@@ -0,0 +1,11 @@
+export { Button } from './button'
+export type { ButtonProps } from './button'
+export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './card'
+export { Badge } from './badge'
+export type { BadgeProps } from './badge'
+export { Input } from './input'
+export type { InputProps } from './input'
+export { Select } from './select'
+export { Skeleton, CardSkeleton, TableSkeleton, StatsSkeleton } from './skeleton'
+export { ErrorBoundary } from './error-boundary'
+export { ToastProvider, useToast } from './toast'

package/src/components/ui/input.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react'
+import { cn } from '@/lib/utils/cn'
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  error?: boolean
+}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, error, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          'flex h-9 w-full rounded-md border border-border bg-muted px-3 py-1.5 text-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+          error && 'border-destructive focus-visible:ring-destructive',
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  },
+)
+Input.displayName = 'Input'
+
+export { Input }

package/src/components/ui/select.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react'
+import { cn } from '@/lib/utils/cn'
+
+export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {}
+
+const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <select
+        className={cn(
+          'flex h-9 w-full rounded-md border border-border bg-muted px-3 py-1.5 text-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+          className,
+        )}
+        ref={ref}
+        {...props}
+      >
+        {children}
+      </select>
+    )
+  },
+)
+Select.displayName = 'Select'
+
+export { Select }

package/src/components/ui/skeleton.tsx

@@ -0,0 +1,53 @@
+export function Skeleton({ className }: { className?: string }) {
+  return (
+    <div className={`animate-pulse rounded-md bg-muted ${className || ''}`} />
+  )
+}
+
+export function CardSkeleton() {
+  return (
+    <div className="bg-card border border-border rounded-lg p-4 space-y-3">
+      <div className="flex items-center justify-between">
+        <Skeleton className="h-4 w-32" />
+        <Skeleton className="h-5 w-16 rounded-full" />
+      </div>
+      <Skeleton className="h-3 w-48" />
+      <div className="flex gap-4">
+        <Skeleton className="h-3 w-16" />
+        <Skeleton className="h-3 w-20" />
+      </div>
+    </div>
+  )
+}
+
+export function TableSkeleton({ rows = 5 }: { rows?: number }) {
+  return (
+    <div className="bg-card border border-border rounded-lg overflow-hidden">
+      <div className="border-b border-border bg-muted/50 px-4 py-2.5">
+        <Skeleton className="h-3 w-full" />
+      </div>
+      {Array.from({ length: rows }).map((_, i) => (
+        <div key={i} className="border-b border-border px-4 py-3 flex gap-4">
+          <Skeleton className="h-3 w-32" />
+          <Skeleton className="h-3 w-20" />
+          <Skeleton className="h-3 w-16" />
+          <Skeleton className="h-3 w-12" />
+          <Skeleton className="h-3 w-16" />
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export function StatsSkeleton() {
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+      {Array.from({ length: 4 }).map((_, i) => (
+        <div key={i} className="bg-card border border-border rounded-lg p-4 space-y-2">
+          <Skeleton className="h-3 w-20" />
+          <Skeleton className="h-7 w-24" />
+        </div>
+      ))}
+    </div>
+  )
+}

package/src/components/ui/toast.tsx

@@ -0,0 +1,51 @@
+'use client'
+
+import { useEffect, useState, useCallback, createContext, useContext, type ReactNode } from 'react'
+
+interface Toast {
+  id: string
+  message: string
+  type: 'success' | 'error' | 'info'
+}
+
+interface ToastContextValue {
+  toast: (message: string, type?: Toast['type']) => void
+}
+
+const ToastContext = createContext<ToastContextValue>({ toast: () => {} })
+
+export function useToast() {
+  return useContext(ToastContext)
+}
+
+export function ToastProvider({ children }: { children: ReactNode }) {
+  const [toasts, setToasts] = useState<Toast[]>([])
+
+  const toast = useCallback((message: string, type: Toast['type'] = 'info') => {
+    const id = crypto.randomUUID()
+    setToasts((prev) => [...prev, { id, message, type }])
+    setTimeout(() => {
+      setToasts((prev) => prev.filter((t) => t.id !== id))
+    }, 4000)
+  }, [])
+
+  return (
+    <ToastContext.Provider value={{ toast }}>
+      {children}
+      <div className="fixed bottom-4 right-4 z-50 space-y-2 pointer-events-none">
+        {toasts.map((t) => (
+          <div
+            key={t.id}
+            className={`pointer-events-auto px-4 py-2.5 rounded-md text-sm shadow-lg border animate-in slide-in-from-right fade-in duration-200 ${
+              t.type === 'success' ? 'bg-primary/10 border-primary/20 text-primary' :
+              t.type === 'error' ? 'bg-destructive/10 border-destructive/20 text-destructive' :
+              'bg-card border-border text-foreground'
+            }`}
+          >
+            {t.message}
+          </div>
+        ))}
+      </div>
+    </ToastContext.Provider>
+  )
+}

package/src/instrumentation.ts

@@ -0,0 +1,6 @@
+export async function register() {
+  if (process.env.NEXT_RUNTIME === 'nodejs') {
+    const { bootstrap } = await import('./lib/bootstrap')
+    await bootstrap()
+  }
+}

package/src/lib/__tests__/auth.test.ts

@@ -0,0 +1,42 @@
+import { describe, it, expect } from 'vitest'
+import { hashApiKey, verifyJwt, signJwt } from '../auth'
+
+describe('Auth', () => {
+  describe('hashApiKey', () => {
+    it('produces consistent SHA-256 hashes', async () => {
+      const hash1 = await hashApiKey('test-key')
+      const hash2 = await hashApiKey('test-key')
+      expect(hash1).toBe(hash2)
+      expect(hash1).toHaveLength(64)
+    })
+
+    it('produces different hashes for different inputs', async () => {
+      const hash1 = await hashApiKey('key-1')
+      const hash2 = await hashApiKey('key-2')
+      expect(hash1).not.toBe(hash2)
+    })
+  })
+
+  describe('JWT', () => {
+    it('signs and verifies a token', async () => {
+      const token = await signJwt({ sub: 'admin', role: 'admin', name: 'Admin' })
+      expect(token).toBeTruthy()
+
+      const payload = await verifyJwt(token)
+      expect(payload).not.toBeNull()
+      expect(payload!.sub).toBe('admin')
+      expect(payload!.role).toBe('admin')
+      expect(payload!.name).toBe('Admin')
+    })
+
+    it('rejects invalid tokens', async () => {
+      const payload = await verifyJwt('invalid-token')
+      expect(payload).toBeNull()
+    })
+
+    it('rejects empty tokens', async () => {
+      const payload = await verifyJwt('')
+      expect(payload).toBeNull()
+    })
+  })
+})

package/src/lib/__tests__/format.test.ts

@@ -0,0 +1,94 @@
+import { describe, it, expect } from 'vitest'
+import { toOpenAIRequest, fromOpenAIResponse } from '../format/openai'
+import { toAnthropicRequest, fromAnthropicResponse } from '../format/anthropic'
+import { toGeminiRequest, fromGeminiResponse } from '../format/gemini'
+import type { NormalizedRequest } from '../providers/types'
+
+function makeReq(messages: Array<{ role: 'system' | 'user' | 'assistant'; content: string }>): NormalizedRequest {
+  return {
+    model: 'test-model',
+    messages: messages.map((m) => ({ ...m, role: m.role as 'system' | 'user' | 'assistant' | 'tool' })),
+  }
+}
+
+describe('Format Translators', () => {
+  describe('OpenAI', () => {
+    it('converts normalized request to OpenAI format', () => {
+      const req = makeReq([
+        { role: 'user', content: 'Hello' },
+        { role: 'assistant', content: 'Hi' },
+      ])
+      const result = toOpenAIRequest(req)
+      expect(result.messages).toHaveLength(2)
+      expect(result.messages[0].role).toBe('user')
+      expect(result.messages[1].role).toBe('assistant')
+    })
+
+    it('parses OpenAI response', () => {
+      const raw = {
+        id: 'chatcmpl-123',
+        model: 'gpt-4o',
+        choices: [{ index: 0, message: { role: 'assistant', content: 'Hello!' }, finish_reason: 'stop' }],
+        usage: { prompt_tokens: 10, completion_tokens: 5, total_tokens: 15 },
+      }
+      const result = fromOpenAIResponse(raw)
+      expect(result.id).toBe('chatcmpl-123')
+      expect(result.choices[0].message.content).toBe('Hello!')
+      expect(result.usage.totalTokens).toBe(15)
+    })
+  })
+
+  describe('Anthropic', () => {
+    it('extracts system message from anthropic format', () => {
+      const req = makeReq([
+        { role: 'system', content: 'You are helpful' },
+        { role: 'user', content: 'Hello' },
+      ])
+      const result = toAnthropicRequest(req)
+      expect(result.system).toBe('You are helpful')
+    })
+
+    it('parses Anthropic response', () => {
+      const raw = {
+        id: 'msg-123',
+        model: 'claude-sonnet-4',
+        content: [{ type: 'text', text: 'Hello!' }],
+        stop_reason: 'end_turn',
+        usage: { input_tokens: 10, output_tokens: 5 },
+      }
+      const result = fromAnthropicResponse(raw)
+      expect(result.id).toBe('msg-123')
+      expect(result.choices[0].message.content).toBe('Hello!')
+    })
+  })
+
+  describe('Gemini', () => {
+    it('creates Gemini contents array', () => {
+      const req = makeReq([
+        { role: 'user', content: 'Hello' },
+        { role: 'assistant', content: 'Hi' },
+      ])
+      const result = toGeminiRequest(req)
+      expect(result.contents).toBeDefined()
+      expect(result.contents.length).toBeGreaterThan(0)
+    })
+
+    it('extracts systemInstruction', () => {
+      const req = makeReq([
+        { role: 'system', content: 'Be helpful' },
+        { role: 'user', content: 'Hello' },
+      ])
+      const result = toGeminiRequest(req)
+      expect(result.systemInstruction).toBeDefined()
+    })
+
+    it('parses Gemini response', () => {
+      const raw = {
+        candidates: [{ content: { parts: [{ text: 'Hello!' }] }, finishReason: 'STOP' }],
+        usageMetadata: { promptTokenCount: 10, candidatesTokenCount: 5, totalTokenCount: 15 },
+      }
+      const result = fromGeminiResponse(raw)
+      expect(result.choices[0].message.content).toBe('Hello!')
+    })
+  })
+})