feat(webui): vue admin panel source

Vue 3 + TypeScript + Pinia + Tailwind v4 + shadcn-vue + Chart.js admin panel source under webui/, built with Vite. Views: Overview (providers, redis/cache/retry status, model aliases), Usage (per-user/per-group/total tables with tokensIn/tokensOut/cost + limits), Charts (scope selector, req/tokens(stacked in-out)/cost metric tabs, 24h/30d/12mo window switcher, fed by GET /admin/api/usage/history). Pinia stores: auth (sessionStorage key gate, x-api-key header, 401/403 re-prompt), dashboard (5s poll), history (fetch-on-selection + 30s refresh). Design: deliberate neutral warm-neutral palette with a signature teal accent (no default Inter/purple-gradient/glassmorphism), real typographic hierarchy via the platform UI/mono font stacks (zero external assets - no Google Fonts), dark+light via prefers-color-scheme (no class toggle, no theme switcher). Charts: zero-based bars, honest axes, Okabe-Ito colorblind-safe series, tokens-in/out as a distinguishable stacked pair. vite.config.ts: base '/admin/' (matches admin.go's route layout) and build.modulePreload.polyfill:false (no inline bootstrap script, so the tightened admin CSP needs no 'unsafe-inline'). Code-split: Chart.js (ChartsView) loads lazily, not in the initial bundle. generate.mjs reads dist/ after `vite build` and writes ../admin_assets_gen.go (not committed by this change) - base64-encodes every asset, decoded once at package-var init; documented rationale in the script's own header comment. Hygiene: webui/go.mod walls webui/ off from the repo root's `go build`/ `vet`/`test ./...` (npm's node_modules bundles a stray .go file that would otherwise be swept in); tools/yaegi-check/main.go excludes webui/ from its GOPATH copy for the same reason. webui/ export-ignored (.gitattributes) from release source tarballs; webui/node_modules/ gitignored. tsconfig.app.json/tsconfig.node.json's JSONC comments dropped (TS itself is fine with either; the global pre-commit JSON validator is not) - no config values changed.
2026-10-15 05:29:28 +00:00 · 2026-08-21 09:21:41 +01:00
parent 47b22d2d7f
commit 655bbcbf2c
81 changed files with 9694 additions and 0 deletions
@@ -0,0 +1,58 @@
+import { defineStore } from 'pinia'
+
+import { AdminApiError, adminFetch } from '@/lib/api'
+import { useAuthStore } from '@/stores/auth'
+import type { AdminOverviewResponse, AdminUsageResponse } from '@/types/api'
+
+/** How often the Overview/Usage views poll (matches the replaced vanilla-JS page). */
+const POLL_MS = 5000
+
+/**
+ * useDashboardStore polls GET /admin/api/overview and GET /admin/api/usage
+ * together every POLL_MS, feeding the Overview and Usage views. A single
+ * store (not two) because both routes are always fetched together — the
+ * old vanilla-JS page's own Promise.all([overview, usage]) pattern.
+ */
+export const useDashboardStore = defineStore('dashboard', {
+  state: () => ({
+    overview: null as AdminOverviewResponse | null,
+    usage: null as AdminUsageResponse | null,
+    lastUpdated: null as Date | null,
+    error: '',
+    timer: undefined as ReturnType<typeof setInterval> | undefined,
+  }),
+  actions: {
+    async refresh(): Promise<void> {
+      const auth = useAuthStore()
+      if (!auth.isAuthenticated) return
+      try {
+        const [overview, usage] = await Promise.all([
+          adminFetch<AdminOverviewResponse>('/admin/api/overview'),
+          adminFetch<AdminUsageResponse>('/admin/api/usage'),
+        ])
+        this.overview = overview
+        this.usage = usage
+        this.lastUpdated = new Date()
+        this.error = ''
+      } catch (err) {
+        // A 401/403 already rejected the key (lib/api.ts) — the AuthGate
+        // takes over the view, nothing left to report here.
+        if (err instanceof AdminApiError && (err.status === 401 || err.status === 403)) {
+          return
+        }
+        this.error = err instanceof Error ? err.message : String(err)
+      }
+    },
+    /** startPolling is idempotent and safe to call before a key is stored — refresh() no-ops until then. */
+    startPolling(): void {
+      if (this.timer !== undefined) return
+      void this.refresh()
+      this.timer = setInterval(() => void this.refresh(), POLL_MS)
+    },
+    stopPolling(): void {
+      if (this.timer === undefined) return
+      clearInterval(this.timer)
+      this.timer = undefined
+    },
+  },
+})