feat(admin): show server version in sidebar, login and setup screens

The sidebar pill was hardcoded to "v0.9.1" and the setup wizard to
"v0.1.0", both of which were stale. Login displayed nothing.

Expose the server version via /api/health (already public, rate-limit
exempt) and add a small useVersion() hook with one cached fetch
shared across mounts. Sidebar, Login and Setup pull the live value;
the pill renders nothing until the first response lands so we never
flash a wrong number.

Author: khalidsheet

admin/src/components/Shell.tsx

@@ -3,6 +3,7 @@ import { NavLink, useNavigate } from "react-router-dom";
 import Icon from "./Icon.tsx";
 import { VaultbaseLogo } from "./VaultbaseLogo.tsx";
 import { useAuth } from "../stores/auth.ts";
+import { useVersion } from "../stores/version.ts";
 
 interface NavItem { to: string; label: string; icon: string; end?: boolean }
 interface NavSection { label: string; items: NavItem[] }
@@ -16,8 +17,6 @@ const SECTIONS: NavSection[] = [
       { to: "/_/",             label: "Dashboard",    icon: "grid", end: true },
       { to: "/_/collections",  label: "Collections",  icon: "stack" },
       { to: "/_/logs",         label: "Logs",         icon: "scroll" },
-      { to: "/_/api-preview",  label: "API preview",  icon: "play" },
-      { to: "/_/sql",          label: "SQL",          icon: "database" },
     ],
   },
   {
@@ -27,6 +26,13 @@ const SECTIONS: NavSection[] = [
       { to: "/_/flags",        label: "Feature flags", icon: "flag" },
       { to: "/_/webhooks",     label: "Webhooks",     icon: "arrowUp" },
       { to: "/_/api-tokens",   label: "API tokens",   icon: "key" },
+    ],
+  },
+  {
+    label: "Tools",
+    items: [
+      { to: "/_/api-preview",  label: "API preview",  icon: "play" },
+      { to: "/_/sql",          label: "SQL",          icon: "database" },
       { to: "/_/mcp",          label: "MCP",          icon: "zap" },
     ],
   },
@@ -42,6 +48,7 @@ const SECTIONS: NavSection[] = [
 
 export const Sidebar: React.FC = () => {
   const adminEmail = useAuth((s) => s.email);
+  const version = useVersion();
   const navigate = useNavigate();
   const initial = adminEmail ? adminEmail[0]!.toLowerCase() : "a";
   const truncatedEmail = adminEmail && adminEmail.length > 22
@@ -55,7 +62,7 @@ export const Sidebar: React.FC = () => {
           <VaultbaseLogo size={20} />
         </span>
         <div className="sb-brand-name">vaultbase</div>
-        <div className="sb-brand-version mono">v0.9.1</div>
+        {version && <div className="sb-brand-version mono">v{version}</div>}
       </div>
       {SECTIONS.map((sec) => (
         <div className="sb-section" key={sec.label}>

admin/src/pages/Login.tsx

@@ -4,6 +4,7 @@ import { api, type ApiResponse } from "../api.ts";
 import { useAuth } from "../stores/auth.ts";
 import { VaultbaseLogo } from "../components/VaultbaseLogo.tsx";
 import Icon from "../components/Icon.tsx";
+import { useVersion } from "../stores/version.ts";
 
 export default function Login() {
   const [email, setEmail] = useState("");
@@ -12,6 +13,7 @@ export default function Login() {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState("");
   const navigate = useNavigate();
+  const version = useVersion();
 
   async function handleSubmit(e: React.FormEvent) {
     e.preventDefault();
@@ -38,6 +40,11 @@ export default function Login() {
         <div className="auth-brand">
           <span className="sb-brand-mark"><VaultbaseLogo size={26} /></span>
           <div className="name">vaultbase</div>
+          {version && (
+            <span style={{ marginLeft: "auto", fontSize: 11, color: "var(--text-muted)", fontFamily: "var(--font-mono)" }}>
+              v{version}
+            </span>
+          )}
         </div>
         <div>
           <h1 className="auth-title">Welcome back</h1>

admin/src/pages/Setup.tsx

@@ -2,22 +2,26 @@ import { useState } from "react";
 import { api, type ApiResponse } from "../api.ts";
 import Icon from "../components/Icon.tsx";
 import { VaultbaseLogo } from "../components/VaultbaseLogo.tsx";
+import { useVersion } from "../stores/version.ts";
 
 type Step = "welcome" | "admin" | "done";
 
 export default function Setup() {
   const [step, setStep] = useState<Step>("welcome");
   const [adminEmail, setAdminEmail] = useState("");
+  const version = useVersion();
 
   return (
     <div className="auth-shell">
       <div className="auth-card wide" style={{ width: 520 }}>
         <div className="auth-brand">
           <span className="sb-brand-mark"><VaultbaseLogo size={26} /></span>
           <div className="name">vaultbase</div>
-          <span style={{ marginLeft: "auto", fontSize: 11, color: "var(--text-muted)", fontFamily: "var(--font-mono)" }}>
-            v0.1.0
-          </span>
+          {version && (
+            <span style={{ marginLeft: "auto", fontSize: 11, color: "var(--text-muted)", fontFamily: "var(--font-mono)" }}>
+              v{version}
+            </span>
+          )}
         </div>
 
         <StepIndicator step={step} />

admin/src/stores/version.ts

@@ -0,0 +1,33 @@
+import { useEffect, useState } from "react";
+
+let cached: string | null = null;
+let inflight: Promise<string> | null = null;
+
+async function fetchVersion(): Promise<string> {
+  if (cached) return cached;
+  if (inflight) return inflight;
+  inflight = fetch("/api/health", { headers: { accept: "application/json" } })
+    .then(async (r) => {
+      const json = await r.json().catch(() => ({}));
+      const v = json?.data?.version;
+      cached = typeof v === "string" && v.length > 0 ? v : "";
+      return cached;
+    })
+    .catch(() => {
+      cached = "";
+      return cached;
+    })
+    .finally(() => { inflight = null; });
+  return inflight;
+}
+
+export function useVersion(): string {
+  const [v, setV] = useState<string>(cached ?? "");
+  useEffect(() => {
+    if (cached) { if (v !== cached) setV(cached); return; }
+    let alive = true;
+    fetchVersion().then((value) => { if (alive) setV(value); });
+    return () => { alive = false; };
+  }, [v]);
+  return v;
+}

src/server.ts

@@ -225,7 +225,10 @@ export function createServer(config: Config) {
     )
     .use(makeAdminPlugin())
     .use(makeAuthPagesPlugin())
-    .get("/api/health", () => ({ data: { status: "ok" } }))
+    .get("/api/health", async () => {
+      const { VAULTBASE_VERSION } = await import("./core/version.ts");
+      return { data: { status: "ok", version: VAULTBASE_VERSION } };
+    })
     // Cluster health probe — admin proxies / load-balancers hit this. Worker
     // id (if running under cluster mode) helps debug which worker answered.
     .get("/_/health", () => ({