-
- 
-
-
- );
+
- Edit src/App.tsx and save to reload.
-
+ {/* Sidebar */}
+
+
+ {/* Main */}
+
+ )
+}
+
+/* ── Icons ── */
+function IconGrid() {
+ return
+}
+function IconLogs() {
+ return
+}
+function IconKey() {
+ return
+}
+function IconServer() {
+ return
+}
+function IconRoute() {
+ return
+}
+function IconChart() {
+ return
+}
+function IconBox() {
+ return
+}
+function IconSettings() {
+ return
+}
diff --git a/backend/dashboard/src/index.css b/backend/dashboard/src/index.css
index ec2585e..18dca7a 100644
--- a/backend/dashboard/src/index.css
+++ b/backend/dashboard/src/index.css
@@ -1,13 +1,46 @@
-body {
- margin: 0;
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
- 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
- sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
+@import "tailwindcss";
+
+@theme {
+ --color-bg: #09090b;
+ --color-sidebar: #111115;
+ --color-card: #17171c;
+ --color-primary: #7c3aed;
+ --color-primary-h: #6d28d9;
+ --color-text: #f0eeff;
+ --color-green: #22c55e;
+ --color-red: #ef4444;
+ --color-v3: #c4b5fd;
+ --color-v4: #a78bfa;
+
+ --font-sans: 'DM Sans', system-ui, sans-serif;
+ --font-mono: 'DM Mono', ui-monospace, monospace;
}
-code {
- font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
- monospace;
+* { box-sizing: border-box; margin: 0; padding: 0; }
+
+body {
+ background: #09090b;
+ color: #f0eeff;
+ font-family: 'DM Sans', system-ui, sans-serif;
+ font-size: 14px;
+ -webkit-font-smoothing: antialiased;
}
+
+input, select, button, textarea { font-family: inherit; }
+
+@keyframes fadeUp {
+ from { opacity: 0; transform: translateY(6px); }
+ to { opacity: 1; transform: translateY(0); }
+}
+@keyframes pulse {
+ 0%, 100% { opacity: 1; }
+ 50% { opacity: 0.4; }
+}
+
+.animate-fade-up { animation: fadeUp 0.18s ease; }
+.dot-pulse { animation: pulse 2.4s ease infinite; }
+
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.18); }
diff --git a/backend/dashboard/src/lib/api.ts b/backend/dashboard/src/lib/api.ts
new file mode 100644
index 0000000..aba0d97
--- /dev/null
+++ b/backend/dashboard/src/lib/api.ts
@@ -0,0 +1,67 @@
+import type {
+ Provider, VirtualKey, AdminModel, RequestLog,
+ CreateProviderParams, CreateKeyParams, ModelOverride,
+} from './types'
+
+const BASE = '/api/admin'
+
+export function getToken() { return localStorage.getItem('admin_token') ?? '' }
+export function setToken(t: string) { localStorage.setItem('admin_token', t) }
+export function clearToken() { localStorage.removeItem('admin_token') }
+
+async function req
+ {/* Topbar */}
+
+
+
+ {/* Content */}
+
+
+
+ + {section} +
+
+
+
+ /v1
+
+
+
+ {/* Time range picker */}
+
+ )
+}
diff --git a/backend/dashboard/src/pages/ApiKeys.tsx b/backend/dashboard/src/pages/ApiKeys.tsx
new file mode 100644
index 0000000..4ca2f86
--- /dev/null
+++ b/backend/dashboard/src/pages/ApiKeys.tsx
@@ -0,0 +1,161 @@
+import { useEffect, useState } from 'react'
+import { api } from '../lib/api'
+import type { VirtualKey } from '../lib/types'
+
+const D = 'rgba(237,237,240,'
+
+function fmtDate(s: string | null) {
+ if (!s) return '—'
+ return new Date(s).toLocaleDateString()
+}
+
+function Modal({ onClose, onCreate }: { onClose: () => void; onCreate: (key: string) => void }) {
+ const [name, setName] = useState('')
+ const [allModels, setAllModels] = useState(true)
+ const [rules, setRules] = useState('')
+ const [expiry, setExpiry] = useState(0)
+ const [loading, setLoading] = useState(false)
+ const [newKey, setNewKey] = useState('')
+
+ async function submit(e: React.FormEvent) {
+ e.preventDefault()
+ setLoading(true)
+ try {
+ const r = await api.keys.create({
+ name, allow_all_models: allModels,
+ rules: rules.split('\n').map(s => s.trim()).filter(Boolean),
+ expires_in_days: expiry,
+ })
+ setNewKey(r.key)
+ onCreate(r.key)
+ } finally {
+ setLoading(false)
+ }
+ }
+
+ return (
+
+ {RANGES.map((r, i) => (
+
+ ))}
+
+
+ {/* Stat cards */}
+
+ {stats.map(s => (
+
+
+
+
+ ))}
+ {s.label}
+
+ {loading ? '—' : s.value}
+
+
+ {/* Line chart */}
+
+
+
+
+ {/* Top models */}
+ Request Volume
+
+ {RANGES[rangeIdx].label === '24h' ? 'Hourly' : 'Periodic'}, last {RANGES[rangeIdx].label}
+
+
+ {['start','','','','now'].map((t, i) => (
+ {t}
+ ))}
+
+
+
+ Top Models
+ By token usage
+ {topModels.length === 0 && No data yet
}
+ {topModels.map(([name, tokens]) => (
+
+
+ ))}
+
+ {name}
+ {tokens > 1e6 ? `${(tokens/1e6).toFixed(1)}M` : tokens.toLocaleString()}
+
+
+
+
+ e.target === e.currentTarget && !newKey && onClose()}>
+
+
+ {newKey ? 'Key created' : 'Create API key'} +
+ + {newKey ? ( + <> +Copy this key now — it won't be shown again.
+{newKey}
+
+
+ ) : (
+