waypoi 0.0.0

package/ui/src/components/EndpointUsageGuide.tsx

@@ -0,0 +1,361 @@
+import { useState } from 'react'
+import { 
+  ChevronDown, 
+  ChevronUp, 
+  Copy, 
+  Check,
+  Terminal,
+  Code
+} from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+import type { EndpointType } from '@/api/client'
+
+export interface UsageGuideTarget {
+  id: string
+  type: EndpointType
+  models: Array<{ publicName: string }>
+}
+
+type TabId = 'curl' | 'python' | 'nodejs'
+
+interface EndpointUsageGuideProps {
+  target: UsageGuideTarget
+}
+
+export function EndpointUsageGuide({ target }: EndpointUsageGuideProps) {
+  const [isOpen, setIsOpen] = useState(false)
+  const [activeTab, setActiveTab] = useState<TabId>('curl')
+  const [copiedId, setCopiedId] = useState<string | null>(null)
+
+  // Get the base URL from the current window location
+  const baseUrl = typeof window !== 'undefined' 
+    ? `${window.location.protocol}//${window.location.host}`
+    : 'http://localhost:9469'
+
+  // Get the first model's public name (most common use case)
+  const modelName = target.models[0]?.publicName ?? 'model-name'
+
+  const copyToClipboard = async (text: string, id: string) => {
+    await navigator.clipboard.writeText(text)
+    setCopiedId(id)
+    setTimeout(() => setCopiedId(null), 2000)
+  }
+
+  const generateExamples = () => {
+    switch (target.type) {
+      case 'llm':
+        return generateLlmExamples()
+      case 'diffusion':
+        return generateDiffusionExamples()
+      case 'audio':
+        return generateAudioExamples()
+      case 'embedding':
+        return generateEmbeddingExamples()
+      default:
+        return generateLlmExamples()
+    }
+  }
+
+  const generateLlmExamples = () => ({
+    curl: `curl ${baseUrl}/v1/chat/completions \\
+  -H "Content-Type: application/json" \\
+  -d '{
+    "model": "${modelName}",
+    "messages": [
+      {"role": "user", "content": "Hello, how are you?"}
+    ],
+    "stream": false
+  }'`,
+    python: `from openai import OpenAI
+
+client = OpenAI(
+    base_url="${baseUrl}/v1",
+    api_key="not-needed"  # No API key required for local proxy
+)
+
+response = client.chat.completions.create(
+    model="${modelName}",
+    messages=[
+        {"role": "user", "content": "Hello, how are you?"}
+    ],
+    stream=False
+)
+
+print(response.choices[0].message.content)`,
+    nodejs: `import OpenAI from 'openai';
+
+const client = new OpenAI({
+  baseURL: '${baseUrl}/v1',
+  apiKey: 'not-needed', // No API key required for local proxy
+});
+
+async function main() {
+  const response = await client.chat.completions.create({
+    model: '${modelName}',
+    messages: [
+      { role: 'user', content: 'Hello, how are you?' }
+    ],
+    stream: false,
+  });
+
+  console.log(response.choices[0].message.content);
+}
+
+main();`,
+  })
+
+  const generateDiffusionExamples = () => ({
+    curl: `curl ${baseUrl}/v1/images/generations \\
+  -H "Content-Type: application/json" \\
+  -d '{
+    "model": "${modelName}",
+    "prompt": "A beautiful sunset over mountains",
+    "n": 1,
+    "size": "1024x1024"
+  }'`,
+    python: `from openai import OpenAI
+
+client = OpenAI(
+    base_url="${baseUrl}/v1",
+    api_key="not-needed"
+)
+
+response = client.images.generate(
+    model="${modelName}",
+    prompt="A beautiful sunset over mountains",
+    n=1,
+    size="1024x1024"
+)
+
+print(response.data[0].url)`,
+    nodejs: `import OpenAI from 'openai';
+
+const client = new OpenAI({
+  baseURL: '${baseUrl}/v1',
+  apiKey: 'not-needed',
+});
+
+async function main() {
+  const response = await client.images.generate({
+    model: '${modelName}',
+    prompt: 'A beautiful sunset over mountains',
+    n: 1,
+    size: '1024x1024',
+  });
+
+  console.log(response.data[0].url);
+}
+
+main();`,
+  })
+
+  const generateAudioExamples = () => ({
+    curl: `# Text-to-Speech
+curl ${baseUrl}/v1/audio/speech \\
+  -H "Content-Type: application/json" \\
+  -d '{
+    "model": "${modelName}",
+    "input": "Hello, this is a test.",
+    "voice": "alloy"
+  }' \\
+  --output speech.mp3
+
+# Speech-to-Text
+curl ${baseUrl}/v1/audio/transcriptions \\
+  -F "model=${modelName}" \\
+  -F "file=@audio.mp3"`,
+    python: `from openai import OpenAI
+
+client = OpenAI(
+    base_url="${baseUrl}/v1",
+    api_key="not-needed"
+)
+
+# Text-to-Speech
+response = client.audio.speech.create(
+    model="${modelName}",
+    input="Hello, this is a test.",
+    voice="alloy"
+)
+response.stream_to_file("speech.mp3")
+
+# Speech-to-Text
+with open("audio.mp3", "rb") as f:
+    transcription = client.audio.transcriptions.create(
+        model="${modelName}",
+        file=f
+    )
+    print(transcription.text)`,
+    nodejs: `import OpenAI from 'openai';
+import fs from 'fs';
+
+const client = new OpenAI({
+  baseURL: '${baseUrl}/v1',
+  apiKey: 'not-needed',
+});
+
+async function main() {
+  // Text-to-Speech
+  const mp3 = await client.audio.speech.create({
+    model: '${modelName}',
+    input: 'Hello, this is a test.',
+    voice: 'alloy',
+  });
+  
+  const buffer = Buffer.from(await mp3.arrayBuffer());
+  await fs.promises.writeFile('speech.mp3', buffer);
+
+  // Speech-to-Text
+  const transcription = await client.audio.transcriptions.create({
+    model: '${modelName}',
+    file: fs.createReadStream('audio.mp3'),
+  });
+  
+  console.log(transcription.text);
+}
+
+main();`,
+  })
+
+  const generateEmbeddingExamples = () => ({
+    curl: `curl ${baseUrl}/v1/embeddings \\
+  -H "Content-Type: application/json" \\
+  -d '{
+    "model": "${modelName}",
+    "input": "The quick brown fox jumps over the lazy dog"
+  }'`,
+    python: `from openai import OpenAI
+
+client = OpenAI(
+    base_url="${baseUrl}/v1",
+    api_key="not-needed"
+)
+
+response = client.embeddings.create(
+    model="${modelName}",
+    input="The quick brown fox jumps over the lazy dog"
+)
+
+print(f"Embedding dimension: {len(response.data[0].embedding)}")
+print(f"First 5 values: {response.data[0].embedding[:5]}")`,
+    nodejs: `import OpenAI from 'openai';
+
+const client = new OpenAI({
+  baseURL: '${baseUrl}/v1',
+  apiKey: 'not-needed',
+});
+
+async function main() {
+  const response = await client.embeddings.create({
+    model: '${modelName}',
+    input: 'The quick brown fox jumps over the lazy dog',
+  });
+
+  console.log('Embedding dimension:', response.data[0].embedding.length);
+  console.log('First 5 values:', response.data[0].embedding.slice(0, 5));
+}
+
+main();`,
+  })
+
+  const examples = generateExamples()
+
+  const tabs: { id: TabId; label: string; icon: React.ElementType }[] = [
+    { id: 'curl', label: 'cURL', icon: Terminal },
+    { id: 'python', label: 'Python', icon: Code },
+    { id: 'nodejs', label: 'Node.js', icon: Code },
+  ]
+
+  return (
+    <div className="border-t border-border/50">
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="w-full px-4 py-2 flex items-center gap-2 text-xs text-muted-foreground hover:text-foreground hover:bg-secondary/50 transition-colors"
+      >
+        <Code className="w-3.5 h-3.5" />
+        <span>Usage Guide</span>
+        <span className="flex-1" />
+        {isOpen ? (
+          <ChevronUp className="w-3.5 h-3.5" />
+        ) : (
+          <ChevronDown className="w-3.5 h-3.5" />
+        )}
+      </button>
+
+      {isOpen && (
+        <div className="px-4 pb-4 space-y-3 animate-fade-in">
+          {/* Models List */}
+          <div className="space-y-1">
+            <p className="text-2xs font-mono uppercase text-muted-foreground">Available Models</p>
+            <div className="flex flex-wrap gap-1">
+              {target.models.map((model, i) => (
+                <span
+                  key={i}
+                  className="px-2 py-0.5 bg-secondary rounded text-xs font-mono"
+                >
+                  {model.publicName}
+                </span>
+              ))}
+            </div>
+          </div>
+
+          {/* Tabs */}
+          <div className="flex items-center gap-1 bg-secondary/50 rounded-md p-1">
+            {tabs.map((tab) => (
+              <button
+                key={tab.id}
+                onClick={() => setActiveTab(tab.id)}
+                className={cn(
+                  'flex items-center gap-1.5 px-3 py-1 text-xs font-mono rounded transition-colors',
+                  activeTab === tab.id
+                    ? 'bg-background text-foreground shadow-sm'
+                    : 'text-muted-foreground hover:text-foreground'
+                )}
+              >
+                <tab.icon className="w-3 h-3" />
+                {tab.label}
+              </button>
+            ))}
+          </div>
+
+          {/* Code Block */}
+          <div className="relative group">
+            <pre className="bg-zinc-950 text-zinc-100 rounded-lg p-4 text-xs font-mono overflow-x-auto leading-relaxed">
+              <code>{examples[activeTab]}</code>
+            </pre>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="absolute top-2 right-2 h-7 w-7 opacity-0 group-hover:opacity-100 transition-opacity bg-zinc-800 hover:bg-zinc-700"
+              onClick={() => copyToClipboard(examples[activeTab], `${target.id}-${activeTab}`)}
+            >
+              {copiedId === `${target.id}-${activeTab}` ? (
+                <Check className="w-3.5 h-3.5 text-green-400" />
+              ) : (
+                <Copy className="w-3.5 h-3.5 text-zinc-400" />
+              )}
+            </Button>
+          </div>
+
+          {/* Endpoint Info */}
+          <div className="text-2xs text-muted-foreground space-y-0.5">
+            <p>
+              <span className="font-medium">Base URL:</span>{' '}
+              <code className="bg-secondary px-1 py-0.5 rounded">{baseUrl}/v1</code>
+            </p>
+            <p>
+              <span className="font-medium">Endpoint Type:</span>{' '}
+              <span className="uppercase">{target.type}</span>
+            </p>
+            {target.type === 'llm' && (
+              <p className="text-muted-foreground/70">
+                Supports streaming via <code className="bg-secondary px-1 py-0.5 rounded">stream: true</code>
+              </p>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

package/ui/src/components/Layout.tsx

@@ -0,0 +1,124 @@
+import { Outlet, NavLink } from 'react-router-dom'
+import { 
+  MessageSquare, 
+  LayoutDashboard, 
+  Settings as SettingsIcon,
+  Radio,
+  Gauge,
+  Search
+} from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { useEffect, useState } from 'react'
+import { getAdminMeta, listProviders } from '@/api/client'
+
+const navItems = [
+  { to: '/playground', icon: MessageSquare, label: 'Playground' },
+  { to: '/benchmark', icon: Gauge, label: 'Benchmark' },
+  { to: '/dashboard', icon: LayoutDashboard, label: 'Dashboard' },
+  { to: '/peek', icon: Search, label: 'Peek' },
+  { to: '/settings', icon: SettingsIcon, label: 'Settings' },
+]
+
+export function Layout() {
+  const [healthStatus, setHealthStatus] = useState<'live' | 'degraded' | 'down'>('down')
+  const [version, setVersion] = useState<string>('0.0.0')
+
+  useEffect(() => {
+    async function checkHealth() {
+      try {
+        const [providers, meta] = await Promise.all([
+          listProviders(),
+          getAdminMeta(),
+        ])
+        setVersion(meta.version)
+
+        if (providers.length === 0) {
+          setHealthStatus('down')
+          return
+        }
+
+        const enabledProviders = providers.filter((provider) => provider.enabled)
+        const enabledModels = providers.reduce(
+          (sum, provider) => sum + provider.models.filter((model) => model.enabled !== false).length,
+          0
+        )
+
+        if (enabledProviders.length === providers.length && enabledModels > 0) {
+          setHealthStatus('live')
+        } else if (enabledModels > 0) {
+          setHealthStatus('degraded')
+        } else {
+          setHealthStatus('down')
+        }
+      } catch {
+        setHealthStatus('down')
+      }
+    }
+
+    checkHealth()
+    const interval = setInterval(checkHealth, 30000)
+    return () => clearInterval(interval)
+  }, [])
+
+  return (
+    <div className="h-screen overflow-hidden bg-background flex">
+      {/* Sidebar */}
+      <aside className="w-56 border-r border-border flex flex-col noise-overlay">
+        {/* Logo */}
+        <div className="h-14 border-b border-border flex items-center px-4 gap-3">
+          <div className="w-8 h-8 rounded overflow-hidden flex items-center justify-center">
+            <img src="/ui/assets/favicon-32.png" alt="Waypoi" className="w-8 h-8" />
+          </div>
+          <div>
+            <h1 className="font-mono font-semibold text-sm tracking-tight">WAYPOINT</h1>
+            <p className="text-2xs text-muted-foreground font-mono">v{version}</p>
+          </div>
+        </div>
+
+        {/* Navigation */}
+        <nav className="flex-1 py-4 px-2 space-y-1">
+          {navItems.map(({ to, icon: Icon, label }) => (
+            <NavLink
+              key={to}
+              to={to}
+              className={({ isActive }) =>
+                cn(
+                  'flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium transition-all duration-150',
+                  isActive
+                    ? 'nav-active'
+                    : 'text-muted-foreground hover:text-foreground hover:bg-secondary'
+                )
+              }
+            >
+              <Icon className="w-4 h-4" />
+              <span>{label}</span>
+            </NavLink>
+          ))}
+        </nav>
+
+        {/* Status Footer */}
+        <div className="p-4 border-t border-border">
+          <div className="flex items-center gap-2 text-xs text-muted-foreground">
+            <Radio className="w-3 h-3" />
+            <span className="font-mono uppercase tracking-wider">Status</span>
+            <div className="flex-1" />
+            <div className="flex items-center gap-1.5">
+              <div className={cn(
+                'status-dot',
+                healthStatus === 'live' && 'status-dot-live',
+                healthStatus === 'degraded' && 'status-dot-degraded',
+                healthStatus === 'down' && 'status-dot-down',
+              )} />
+              <span className="font-mono capitalize">{healthStatus}</span>
+            </div>
+          </div>
+        </div>
+      </aside>
+
+      {/* Main Content */}
+      <main className="flex-1 flex flex-col overflow-hidden">
+        <Outlet />
+      </main>
+    </div>
+  )
+}