Merge provider-family live route fix

Author: gitcommit90

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "rerouted",
-  "version": "0.4.11",
+  "version": "0.4.12",
   "description": "A macOS menu-bar router for accounts, models, and automatic fallback.",
   "author": "gitcommit90",
   "license": "MIT",

package.json

@@ -743,7 +743,7 @@ app.whenReady().then(async () => {
         !routeStage ||
         !path ||
         routeStage.querySelectorAll(".live-request-path").length !== 2 ||
-        routeStage.querySelectorAll(".live-provider").length !== 5 ||
+        routeStage.querySelectorAll(".live-provider").length !== 4 ||
         !copyButton
       ) {
         throw new Error("Status persistence controls did not render");

scripts/capture-ui.js

@@ -5,7 +5,8 @@ const { accountDisplayName, accountIdentityLabel, maskAccountEmail } =
   window.ReroutedAccountIdentity;
 const { compactNumber: fmtNum } = window.ReroutedNumberFormat;
 const { createLatestRequestGate, guardSensitiveRender } = window.ReroutedRendererLockState;
-const { buildProviderCatalog, canonicalProviderType } = window.ReroutedProviderCatalog;
+const { buildEnabledProviderGroups, buildProviderCatalog, canonicalProviderType } =
+  window.ReroutedProviderCatalog;
 const { buildRouteAccountOptions, modelsForRouteAccount } = window.ReroutedRoutePicker;
 const { oauthPrompt } = window.ReroutedOAuthPrompt;
 const $ = (sel, el = document) => el.querySelector(sel);
@@ -110,6 +111,7 @@ const PROVIDER_LABELS = {
   cloudflare: "Cloudflare",
   glm: "GLM Coding",
   "openai-compat": "API key",
+  custom: "Custom",
 };
 
 const PROVIDER_PRESENTATION = {
@@ -956,15 +958,14 @@ function homeRecentHtml(recent) {
 }
 
 function liveProviders() {
-  return (state?.providers || []).filter(
-    (provider) => provider.enabled !== false && provider.hasToken
-  );
+  return buildEnabledProviderGroups(state?.providers || []).map((provider) => ({
+    ...provider,
+    name: providerLabel(provider.id),
+  }));
 }
 
 function liveProviderKey(providers) {
-  return providers
-    .map((provider) => `${provider.id}:${provider.enabled}:${provider.hasToken}:${provider.name}`)
-    .join("|");
+  return providers.map((provider) => provider.id).join("|");
 }
 
 function liveProviderHtml(providers) {
@@ -974,15 +975,13 @@ function liveProviderHtml(providers) {
   return providers
     .map((provider, index) => {
       const presentation = providerPresentation(provider);
-      const account = aliasLabel(provider.accountAlias);
-      const name = provider.name || providerLabel(canonicalProviderType(provider.type));
+      const name = provider.name || providerLabel(provider.id);
       const center = (providers.length - 1) / 2;
       const archY = Math.round(Math.abs(index - center) * 1.8);
       return `<span class="live-provider" data-live-provider-id="${esc(provider.id)}" title="${esc(
-        account ? `${name} · ${account}` : name
+        name
       )}" style="--provider-order:${index};--arch-y:${archY}px">
         <img src="assets/providers/${esc(presentation.logo)}" alt="" />
-        ${account ? `<small>${esc(account.replace("Account ", ""))}</small>` : ""}
       </span>`;
     })
     .join("");
@@ -1014,7 +1013,10 @@ function drawLiveRequestPaths({ force = false } = {}) {
   const stageRect = stage.getBoundingClientRect();
   if (!stageRect.width || !stageRect.height) return;
   const pathKey = `${Math.round(stageRect.width)}x${Math.round(stageRect.height)}|${requests
-    .map((request) => `${request.id}:${request.providerId || "pending"}`)
+    .map(
+      (request) =>
+        `${request.id}:${canonicalProviderType(request.providerType) || "pending"}`
+    )
     .join("|")}`;
   if (!force && pathKey === liveRequestPathKey) return;
   liveRequestPathKey = pathKey;
@@ -1039,7 +1041,7 @@ function drawLiveRequestPaths({ force = false } = {}) {
   const count = requests.length;
   requests.forEach((request, index) => {
     const spread = (index - (count - 1) / 2) * 3.2;
-    const targetNode = providerNodes.get(request.providerId);
+    const targetNode = providerNodes.get(canonicalProviderType(request.providerType));
     if (targetNode) targetNode.classList.add("is-active");
     const target = targetNode
       ? liveRoutePoint(targetNode, stageRect, "bottom")
@@ -1065,7 +1067,7 @@ function drawLiveRequestPaths({ force = false } = {}) {
   }
   const routeText = stage.querySelector("[data-live-route-status]");
   if (routeText) {
-    const routed = requests.filter((request) => request.providerId).length;
+    const routed = requests.filter((request) => request.providerType).length;
     routeText.textContent = count
       ? routed === count
         ? `${count} routing live`
@@ -1117,7 +1119,7 @@ function renderHome() {
     <section class="hero-surface live-router-card" data-live-router-card>
       <div class="live-router-head">
         <div class="gateway-state"><span class="status-node ${online ? "" : "off"}" data-home-status-node></span><span data-home-gateway>${online ? "Gateway live" : "Gateway stopped"}</span></div>
-        <span class="live-provider-count">${providers.length} connected</span>
+        <span class="live-provider-count">${providers.length} provider${providers.length === 1 ? "" : "s"}</span>
       </div>
       <div class="live-router-stage" data-live-router-stage aria-label="${esc(
         activeRequests.length

src/renderer/app.js

@@ -95,7 +95,26 @@
     return entries;
   }
 
-  const api = { buildProviderCatalog, canonicalProviderType };
+  function buildEnabledProviderGroups(providers = []) {
+    const groups = [];
+    const groupsById = new Map();
+
+    for (const account of providers) {
+      if (account?.enabled === false || !account?.hasToken) continue;
+      const id = canonicalProviderType(account.type) || "unknown";
+      let group = groupsById.get(id);
+      if (!group) {
+        group = { id, type: id, accounts: [] };
+        groups.push(group);
+        groupsById.set(id, group);
+      }
+      group.accounts.push(account);
+    }
+
+    return groups;
+  }
+
+  const api = { buildProviderCatalog, buildEnabledProviderGroups, canonicalProviderType };
   if (typeof module !== "undefined" && module.exports) module.exports = api;
   if (root) root.ReroutedProviderCatalog = api;
 })(typeof window !== "undefined" ? window : null);

src/renderer/provider-catalog.js

@@ -664,23 +664,6 @@ summary:focus-visible,
   object-fit: contain;
 }
 
-.live-provider small {
-  position: absolute;
-  right: -2px;
-  bottom: -3px;
-  display: grid;
-  min-width: 12px;
-  height: 12px;
-  padding: 0 3px;
-  place-items: center;
-  border: 1px solid rgba(255, 255, 255, 0.7);
-  border-radius: 999px;
-  color: #fff;
-  background: var(--night-soft);
-  font-size: 7px;
-  font-weight: 750;
-}
-
 .live-provider.is-active {
   border-color: rgba(239, 91, 42, 0.95);
   box-shadow: 0 0 0 3px rgba(239, 91, 42, 0.16), 0 8px 22px rgba(0, 0, 0, 0.22);

src/renderer/styles.css

@@ -3,6 +3,7 @@
 const assert = require("node:assert/strict");
 const { describe, it } = require("node:test");
 const {
+  buildEnabledProviderGroups,
   buildProviderCatalog,
   canonicalProviderType,
 } = require("../src/renderer/provider-catalog");
@@ -104,4 +105,21 @@ describe("provider-first catalog", () => {
     assert.equal(catalog[2].name, "Mystery Provider");
     assert.deepEqual(catalog[2].accounts, providers.slice(2));
   });
+
+  it("builds one enabled live node per canonical provider, not per account", () => {
+    const providers = [
+      { id: "chatgpt_one", type: "chatgpt", enabled: true, hasToken: true },
+      { id: "chatgpt_two", type: "codex", enabled: true, hasToken: true },
+      { id: "claude_disabled", type: "claude", enabled: false, hasToken: true },
+      { id: "xai_signed_out", type: "xai", enabled: true, hasToken: false },
+      { id: "custom_one", type: "openai-compat", enabled: true, hasToken: true },
+      { id: "custom_two", type: "custom", enabled: true, hasToken: true },
+    ];
+
+    const groups = buildEnabledProviderGroups(providers);
+
+    assert.deepEqual(groups.map((group) => group.id), ["chatgpt", "custom"]);
+    assert.deepEqual(groups[0].accounts, providers.slice(0, 2));
+    assert.deepEqual(groups[1].accounts, providers.slice(4));
+  });
 });