From 9f8b2906c41457b638f30b07e9b6302567ab5cf5 Mon Sep 17 00:00:00 2001
From: null <koga.industries@gmail.com>
Date: Sun, 24 May 2026 18:36:11 -0500
Subject: [PATCH] feat: enhance credential selection logic in
 ProviderNavbarStatus component

---
 .../organisms/ProviderNavbarStatus.tsx        | 69 +++++++++++--------
 1 file changed, 42 insertions(+), 27 deletions(-)

diff --git a/frontend/src/components/organisms/ProviderNavbarStatus.tsx b/frontend/src/components/organisms/ProviderNavbarStatus.tsx
index bc7b62d..693ceb4 100644
--- a/frontend/src/components/organisms/ProviderNavbarStatus.tsx
+++ b/frontend/src/components/organisms/ProviderNavbarStatus.tsx
@@ -134,6 +134,42 @@ function providerStatusColor(status: ProviderNavbarItem["status"]): string {
   return "bg-[color:var(--text-quiet)]";
 }
 
+function credentialIsUsable(cred: ProviderCredentialRead): boolean {
+  return cred.active && (cred.has_api_key || cred.has_session_key || Boolean(cred.base_url));
+}
+
+function navbarCredentialScore(cred: ProviderCredentialRead): number {
+  let score = 0;
+
+  if (cred.active) score += 100;
+  if (cred.has_session_key) score += 50;
+  if (cred.account_key === "default") score += 40;
+  if (cred.display_name.toLowerCase().includes("local")) score += 30;
+  if (cred.has_api_key) score += 10;
+  if (cred.base_url) score += 5;
+
+  return score;
+}
+
+function selectNavbarCredential(
+  credentials: ProviderCredentialRead[],
+  providerId: NavbarProviderId,
+): ProviderCredentialRead | null {
+  const providerCredentials = credentials.filter((cred) => cred.provider === providerId);
+  const usableCredentials = providerCredentials.filter(credentialIsUsable);
+
+  return (
+    [...usableCredentials].sort((a, b) => {
+      const scoreDelta = navbarCredentialScore(b) - navbarCredentialScore(a);
+      if (scoreDelta !== 0) return scoreDelta;
+      return a.account_key.localeCompare(b.account_key);
+    })[0] ??
+    providerCredentials.find((cred) => cred.active) ??
+    providerCredentials[0] ??
+    null
+  );
+}
+
 function MiniRemainingBar({
   pct,
   className = "w-10",
@@ -166,19 +202,9 @@ function buildProviderNavbarItems({
   isLoading: boolean;
 }): ProviderNavbarItem[] {
   return NAVBAR_PROVIDER_IDS.map((providerId) => {
-    const providerCredentials = credentials
-      .filter((cred) => cred.provider === providerId)
-      .sort((a, b) => a.account_key.localeCompare(b.account_key));
-    const activeCredential =
-      providerCredentials.find(
-        (cred) =>
-          cred.active &&
-          (cred.has_api_key || cred.has_session_key || Boolean(cred.base_url)),
-      ) ?? null;
-    const credential = activeCredential ?? providerCredentials[0] ?? null;
-    const usage = activeCredential
-      ? usageByCredentialId[activeCredential.id]
-      : null;
+    const credential = selectNavbarCredential(credentials, providerId);
+    const activeCredential = credential && credentialIsUsable(credential) ? credential : null;
+    const usage = activeCredential ? usageByCredentialId[activeCredential.id] : null;
     const status: ProviderNavbarItem["status"] = activeCredential
       ? isLoading && usage == null
         ? "Syncing"
@@ -266,20 +292,9 @@ export function ProviderNavbarStatus() {
   }, []);
 
   const usageCredentials = useMemo(() => {
-    return credentials
-      .filter(
-        (cred) =>
-          NAVBAR_PROVIDER_IDS.includes(cred.provider as NavbarProviderId) &&
-          cred.active &&
-          (cred.has_api_key || cred.has_session_key || Boolean(cred.base_url)),
-      )
-      .sort((a, b) => {
-        const providerDelta =
-          NAVBAR_PROVIDER_IDS.indexOf(a.provider as NavbarProviderId) -
-          NAVBAR_PROVIDER_IDS.indexOf(b.provider as NavbarProviderId);
-        if (providerDelta !== 0) return providerDelta;
-        return a.account_key.localeCompare(b.account_key);
-      });
+    return NAVBAR_PROVIDER_IDS.map((providerId) =>
+      selectNavbarCredential(credentials, providerId),
+    ).filter((cred): cred is ProviderCredentialRead => Boolean(cred && credentialIsUsable(cred)));
   }, [credentials]);
 
   const loadCredentials = useCallback(async () => {