From 834fa4fdb026c337e2f46f45ab3b8a2052c38245 Mon Sep 17 00:00:00 2001
From: null <koga.industries@gmail.com>
Date: Thu, 21 May 2026 20:30:01 -0500
Subject: [PATCH] feat(ui): top navbar ai info

---
 .../src/app/settings/ai-providers/page.tsx    | 262 +++++++++++++++++-
 .../templates/DashboardPageLayout.tsx         |   4 +-
 .../components/templates/DashboardShell.tsx   |  21 +-
 3 files changed, 280 insertions(+), 7 deletions(-)

diff --git a/frontend/src/app/settings/ai-providers/page.tsx b/frontend/src/app/settings/ai-providers/page.tsx
index 170865f..0c17ff8 100644
--- a/frontend/src/app/settings/ai-providers/page.tsx
+++ b/frontend/src/app/settings/ai-providers/page.tsx
@@ -2,7 +2,7 @@
 
 export const dynamic = "force-dynamic";
 
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import {
   Bot,
   CheckCircle2,
@@ -26,7 +26,11 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { ConfirmActionDialog } from "@/components/ui/confirm-action-dialog";
 import { useOrganizationMembership } from "@/lib/use-organization-membership";
-import type { ProviderCredentialRead, ProviderUsageLiveRead } from "@/api/generated/model";
+import type {
+  ProviderCredentialRead,
+  ProviderUsageLiveRead,
+  SubscriptionWindowRead,
+} from "@/api/generated/model";
 import { customFetch } from "@/api/mutator";
 import {
   listProviderCredentialsApiV1ProviderCredentialsGet,
@@ -812,6 +816,194 @@ function UsageStrip({ credentialId, provider }: { credentialId: string; provider
   );
 }
 
+// ---------------------------------------------------------------------------
+// Navbar provider status — compact mirror of the active provider card
+// ---------------------------------------------------------------------------
+
+function providerShortLabel(provider: string): string {
+  const config = PROVIDERS.find((item) => item.id === provider);
+  if (!config) return provider;
+  return config.label.split(" ")[0].replace("/", "");
+}
+
+function clampPct(pct: number): number {
+  return Math.max(0, Math.min(100, pct));
+}
+
+function remainingPct(window: SubscriptionWindowRead | null): number | null {
+  if (!window) return null;
+  return clampPct(100 - window.pct_used);
+}
+
+function remainingColor(pct: number | null): string {
+  if (pct == null) return "bg-[color:var(--text-quiet)]";
+  if (pct <= 10) return "bg-[color:var(--danger)]";
+  if (pct <= 25) return "bg-[color:var(--warning)]";
+  return "bg-[color:var(--success)]";
+}
+
+function findSessionWindow(usage: ProviderUsageLiveRead | null | undefined) {
+  const windows = usage?.subscription_windows ?? [];
+  return (
+    windows.find((window) => {
+      const key = `${window.key} ${window.label}`.toLowerCase();
+      return (
+        key.includes("current") ||
+        key.includes("session") ||
+        key.includes("five") ||
+        key.includes("hour")
+      );
+    }) ??
+    windows[0] ??
+    null
+  );
+}
+
+function findModelsWindow(
+  usage: ProviderUsageLiveRead | null | undefined,
+  sessionWindow: SubscriptionWindowRead | null,
+) {
+  const windows = usage?.subscription_windows ?? [];
+  return (
+    windows.find((window) => {
+      if (window.key === sessionWindow?.key) return false;
+      const key = `${window.key} ${window.label}`.toLowerCase();
+      return key.includes("all") || key.includes("model") || key.includes("week");
+    }) ??
+    windows.find((window) => window.key !== sessionWindow?.key) ??
+    null
+  );
+}
+
+function resetLabel(
+  sessionWindow: SubscriptionWindowRead | null,
+  modelsWindow: SubscriptionWindowRead | null,
+): string {
+  const resetInMs = sessionWindow?.reset_in_ms ?? modelsWindow?.reset_in_ms;
+  return resetInMs == null ? "—" : fmtResetMs(resetInMs);
+}
+
+function keyLabel(cred: ProviderCredentialRead): string {
+  if (cred.has_api_key && cred.api_key_last_four) return `API ••••${cred.api_key_last_four}`;
+  if (cred.has_api_key) return "API set";
+  if (cred.base_url) return "API local";
+  return "API missing";
+}
+
+function tokenLabel(
+  cred: ProviderCredentialRead,
+  usage: ProviderUsageLiveRead | null | undefined,
+): string {
+  if ((usage?.subscription_windows?.length ?? 0) > 0) return "Token connected";
+  if (cred.has_session_key) return "Token set";
+  return "Token auto";
+}
+
+function MiniRemainingBar({
+  pct,
+  className = "w-10",
+}: {
+  pct: number | null;
+  className?: string;
+}) {
+  const width = pct == null ? 0 : clampPct(pct);
+  return (
+    <span
+      className={`h-1.5 overflow-hidden rounded-full bg-[color:var(--surface-strong)] ${className}`}
+      aria-hidden="true"
+    >
+      <span
+        className={`block h-full rounded-full ${remainingColor(pct)}`}
+        style={{ width: `${width}%` }}
+      />
+    </span>
+  );
+}
+
+function ProviderNavbarStatus({
+  credentials,
+  usageByCredentialId,
+  isLoading,
+}: {
+  credentials: ProviderCredentialRead[];
+  usageByCredentialId: Record<string, ProviderUsageLiveRead | null>;
+  isLoading: boolean;
+}) {
+  const primary = credentials[0];
+  if (!primary) return null;
+
+  const usage = usageByCredentialId[primary.id];
+  const sessionWindow = findSessionWindow(usage);
+  const modelsWindow = findModelsWindow(usage, sessionWindow);
+  const sessionRemaining = remainingPct(sessionWindow);
+  const modelsRemaining = remainingPct(modelsWindow);
+  const primaryRemaining = sessionRemaining ?? modelsRemaining;
+  const providerLabel = providerShortLabel(primary.provider);
+  const extraCount = Math.max(0, credentials.length - 1);
+  const loadingLabel = isLoading && usage == null ? "Syncing" : "Active";
+
+  const miniStat = (
+    label: string,
+    pct: number | null,
+    title: string,
+  ) => (
+    <span
+      className="inline-flex h-7 min-w-0 items-center gap-1.5 rounded-full border border-[color:var(--border)] bg-[color:var(--surface-muted)] px-2 text-[11px] font-medium text-[color:var(--text-muted)]"
+      title={title}
+    >
+      <span className="text-[color:var(--text-quiet)]">{label}</span>
+      <MiniRemainingBar pct={pct} />
+      <span className="tabular-nums text-[color:var(--text)]">
+        {pct == null ? "—" : `${Math.round(pct)}% left`}
+      </span>
+    </span>
+  );
+
+  return (
+    <div className="flex h-9 min-w-0 items-center">
+      <div className="hidden h-9 min-w-0 items-center gap-1.5 xl:flex">
+        <span className="inline-flex h-7 items-center gap-1.5 rounded-full border border-[color:rgba(52,211,153,0.35)] bg-[color:rgba(52,211,153,0.08)] px-2 text-[11px] font-semibold text-[color:var(--text)]">
+          <span className="h-1.5 w-1.5 rounded-full bg-[color:var(--success)]" />
+          {providerLabel}: {loadingLabel}
+          {extraCount > 0 ? (
+            <span className="text-[color:var(--text-muted)]">+{extraCount}</span>
+          ) : null}
+        </span>
+        <span className="inline-flex h-7 items-center rounded-full border border-[color:var(--border)] bg-[color:var(--surface-muted)] px-2 text-[11px] font-medium text-[color:var(--text-muted)]">
+          {keyLabel(primary)}
+        </span>
+        <span className="inline-flex h-7 items-center rounded-full border border-[color:var(--border)] bg-[color:var(--surface-muted)] px-2 text-[11px] font-medium text-[color:var(--text-muted)]">
+          {tokenLabel(primary, usage)}
+        </span>
+        {miniStat(
+          "Session",
+          sessionRemaining,
+          sessionWindow ? `${sessionWindow.label}: ${Math.round(sessionWindow.pct_used)}% used` : "No session usage returned",
+        )}
+        {miniStat(
+          "Models",
+          modelsRemaining,
+          modelsWindow ? `${modelsWindow.label}: ${Math.round(modelsWindow.pct_used)}% used` : "No model usage returned",
+        )}
+        <span className="inline-flex h-7 items-center rounded-full border border-[color:var(--border)] bg-[color:var(--surface-muted)] px-2 text-[11px] font-medium text-[color:var(--text-muted)]">
+          Reset {resetLabel(sessionWindow, modelsWindow)}
+        </span>
+      </div>
+      <div
+        className="hidden h-8 min-w-0 max-w-[46vw] items-center gap-2 rounded-full border border-[color:var(--border)] bg-[color:var(--surface-muted)] px-2.5 text-[11px] font-semibold text-[color:var(--text)] sm:flex xl:hidden"
+        title={`${providerLabel}: ${loadingLabel}`}
+      >
+        <span className="h-1.5 w-1.5 shrink-0 rounded-full bg-[color:var(--success)]" />
+        <span className="truncate">{providerLabel}</span>
+        <MiniRemainingBar pct={primaryRemaining} className="w-12 shrink-0" />
+        <span className="shrink-0 tabular-nums text-[color:var(--text-muted)]">
+          {primaryRemaining == null ? "Usage —" : `${Math.round(primaryRemaining)}% left`}
+        </span>
+      </div>
+    </div>
+  );
+}
+
 // ---------------------------------------------------------------------------
 // Credential row
 // ---------------------------------------------------------------------------
@@ -1096,11 +1288,30 @@ export default function AIProvidersSettingsPage() {
   const { isSignedIn } = useAuth();
   const { isAdmin } = useOrganizationMembership(isSignedIn);
   const [credentials, setCredentials] = useState<ProviderCredentialRead[]>([]);
+  const [navbarUsageByCredentialId, setNavbarUsageByCredentialId] = useState<
+    Record<string, ProviderUsageLiveRead | null>
+  >({});
+  const [isNavbarUsageLoading, setIsNavbarUsageLoading] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [deleteTarget, setDeleteTarget] = useState<ProviderCredentialRead | null>(null);
   const [isDeleting, setIsDeleting] = useState(false);
   const [deleteError, setDeleteError] = useState<string | null>(null);
+  const activeNavbarCredentials = useMemo(() => {
+    const order = new Map(PROVIDERS.map((provider, index) => [provider.id, index]));
+    return credentials
+      .filter(
+        (cred) =>
+          cred.active && (cred.has_api_key || cred.has_session_key || Boolean(cred.base_url)),
+      )
+      .sort((a, b) => {
+        const providerDelta =
+          (order.get(a.provider as ProviderId) ?? 99) -
+          (order.get(b.provider as ProviderId) ?? 99);
+        if (providerDelta !== 0) return providerDelta;
+        return a.account_key.localeCompare(b.account_key);
+      });
+  }, [credentials]);
 
   const load = useCallback(async () => {
     try {
@@ -1121,6 +1332,46 @@ export default function AIProvidersSettingsPage() {
     if (isSignedIn) void load();
   }, [isSignedIn, load]);
 
+  useEffect(() => {
+    if (!isSignedIn || activeNavbarCredentials.length === 0) {
+      setNavbarUsageByCredentialId({});
+      setIsNavbarUsageLoading(false);
+      return;
+    }
+
+    let cancelled = false;
+    const fetchNavbarUsage = async (refresh = false) => {
+      setIsNavbarUsageLoading(true);
+      const pairs = await Promise.all(
+        activeNavbarCredentials.slice(0, 3).map(async (cred) => {
+          try {
+            const res = await getProviderUsageLiveApiV1ProviderCredentialsCredentialIdUsageGet(
+              cred.id,
+              refresh ? { refresh: true } : undefined,
+            );
+            return [cred.id, res.status === 200 ? res.data : null] as const;
+          } catch {
+            return [cred.id, null] as const;
+          }
+        }),
+      );
+      if (!cancelled) {
+        setNavbarUsageByCredentialId(Object.fromEntries(pairs));
+        setIsNavbarUsageLoading(false);
+      }
+    };
+
+    void fetchNavbarUsage();
+    const interval = window.setInterval(() => {
+      void fetchNavbarUsage(true);
+    }, 60_000);
+
+    return () => {
+      cancelled = true;
+      window.clearInterval(interval);
+    };
+  }, [activeNavbarCredentials, isSignedIn]);
+
   const handleAdd = async (
     providerId: ProviderId,
     data: CredentialFormData,
@@ -1232,6 +1483,13 @@ export default function AIProvidersSettingsPage() {
         }}
         title="AI Providers"
         description="Configure API keys and subscription tokens for the AI providers your gateway uses."
+        topNavContent={
+          <ProviderNavbarStatus
+            credentials={activeNavbarCredentials}
+            usageByCredentialId={navbarUsageByCredentialId}
+            isLoading={isNavbarUsageLoading}
+          />
+        }
       >
         {isLoading ? (
           <div className="flex items-center gap-2 rounded-xl border border-[color:var(--border)] bg-[color:var(--surface)] p-6 text-sm text-muted">
diff --git a/frontend/src/components/templates/DashboardPageLayout.tsx b/frontend/src/components/templates/DashboardPageLayout.tsx
index 6fd8b09..4aeca18 100644
--- a/frontend/src/components/templates/DashboardPageLayout.tsx
+++ b/frontend/src/components/templates/DashboardPageLayout.tsx
@@ -23,6 +23,7 @@ type DashboardPageLayoutProps = {
   title: ReactNode;
   description?: ReactNode;
   headerActions?: ReactNode;
+  topNavContent?: ReactNode;
   children: ReactNode;
   isAdmin?: boolean;
   adminOnlyMessage?: string;
@@ -38,6 +39,7 @@ export function DashboardPageLayout({
   title,
   description,
   headerActions,
+  topNavContent,
   children,
   isAdmin,
   adminOnlyMessage,
@@ -51,7 +53,7 @@ export function DashboardPageLayout({
     typeof isAdmin === "boolean" && Boolean(adminOnlyMessage) && !isAdmin;
 
   return (
-    <DashboardShell>
+    <DashboardShell topNavContent={topNavContent}>
       <SignedOut>
         <SignedOutPanel
           message={signedOut.message}
diff --git a/frontend/src/components/templates/DashboardShell.tsx b/frontend/src/components/templates/DashboardShell.tsx
index 37097ea..3b4ae7e 100644
--- a/frontend/src/components/templates/DashboardShell.tsx
+++ b/frontend/src/components/templates/DashboardShell.tsx
@@ -18,7 +18,13 @@ import { ThemeToggle } from "@/components/organisms/ThemeToggle";
 import { UserMenu } from "@/components/organisms/UserMenu";
 import { isOnboardingComplete } from "@/lib/onboarding";
 
-export function DashboardShell({ children }: { children: ReactNode }) {
+export function DashboardShell({
+  children,
+  topNavContent,
+}: {
+  children: ReactNode;
+  topNavContent?: ReactNode;
+}) {
   const router = useRouter();
   const pathname = usePathname();
   const { isSignedIn } = useAuth();
@@ -122,14 +128,21 @@ export function DashboardShell({ children }: { children: ReactNode }) {
             <BrandMark />
           </div>
           <SignedIn>
-            <div className="hidden md:flex flex-1 items-center">
-              <div className="max-w-[220px]">
+            <div className="flex min-w-0 flex-1 items-center gap-3">
+              <div className="hidden max-w-[220px] shrink-0 md:block">
                 <OrgSwitcher />
               </div>
+              {topNavContent ? (
+                <div className="min-w-0 flex-1 overflow-hidden">
+                  {topNavContent}
+                </div>
+              ) : (
+                <div className="min-w-0 flex-1" />
+              )}
             </div>
           </SignedIn>
           <SignedIn>
-            <div className="ml-auto flex items-center gap-3 px-4 md:px-6">
+            <div className="flex shrink-0 items-center gap-3 px-4 md:px-6">
               <div className="hidden text-right lg:block">
                 <p className="text-sm font-semibold text-[color:var(--text)]">
                   {displayName}