feat: enhance credential selection logic in ProviderNavbarStatus component

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
+    const credential = selectNavbarCredential(credentials, providerId);
-      .filter((cred) => cred.provider === providerId)
+    const activeCredential = credential && credentialIsUsable(credential) ? credential : null;
-      .sort((a, b) => a.account_key.localeCompare(b.account_key));
+    const usage = activeCredential ? usageByCredentialId[activeCredential.id] : null;
-    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 status: ProviderNavbarItem["status"] = activeCredential
       ? isLoading && usage == null
         ? "Syncing"
@@ -266,20 +292,9 @@ export function ProviderNavbarStatus() {
   }, []);
 
   const usageCredentials = useMemo(() => {
-    return credentials
+    return NAVBAR_PROVIDER_IDS.map((providerId) =>
-      .filter(
+      selectNavbarCredential(credentials, providerId),
-        (cred) =>
+    ).filter((cred): cred is ProviderCredentialRead => Boolean(cred && credentialIsUsable(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);
-      });
   }, [credentials]);
 
   const loadCredentials = useCallback(async () => {