Merge live request routing visualization

Author: gitcommit90

package-lock.json

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

package.json

@@ -105,6 +105,31 @@ function demoUsage(period = "24h") {
   };
 }
 
+function demoActiveRequests() {
+  return [
+    {
+      id: "request-demo-chatgpt",
+      model: "coding",
+      stream: true,
+      startedAt: demoStartedAt - 4_200,
+      providerId: "prov_chatgpt_demo",
+      providerType: "chatgpt",
+      providerName: "ChatGPT Plus",
+      upstreamModel: "gpt-5",
+    },
+    {
+      id: "request-demo-claude",
+      model: "claude/claude-sonnet-4-5",
+      stream: true,
+      startedAt: demoStartedAt - 1_800,
+      providerId: "prov_claude_demo",
+      providerType: "claude",
+      providerName: "Claude Pro",
+      upstreamModel: "claude-sonnet-4-5",
+    },
+  ];
+}
+
 let demoLogEntries = [
   { at: Date.now() - 35_000, level: "info", msg: "Gateway request completed", meta: { route: "coding", status: 200 } },
   { at: Date.now() - 7 * 60_000, level: "info", msg: "OAuth token refreshed", meta: { provider: "ChatGPT Plus" } },
@@ -242,6 +267,7 @@ function registerIpc() {
       combos: (cfg.combos || []).map(publicCombo),
       stats: demoStats(),
       usage: demoUsage(),
+      activeRequests: demoActiveRequests(),
       unlocked: true,
       hasAdminPassword: false,
       oauthProviders: Object.keys(OAUTH).map((k) => ({ id: k, name: OAUTH[k].name })),
@@ -709,18 +735,22 @@ app.whenReady().then(async () => {
   await win.webContents.executeJavaScript(`
     (() => {
       const details = document.querySelector("[data-home-credentials]");
-      const routeMap = document.querySelector("[data-home-route-map]");
-      const track = routeMap?.querySelector(".route-track");
+      const routeStage = document.querySelector("[data-live-router-stage]");
+      const path = routeStage?.querySelector(".live-request-path");
       const copyButton = document.getElementById("copy-url");
-      if (!details || !routeMap || !track || !copyButton) {
+      if (
+        !details ||
+        !routeStage ||
+        !path ||
+        routeStage.querySelectorAll(".live-request-path").length !== 2 ||
+        routeStage.querySelectorAll(".live-provider").length !== 5 ||
+        !copyButton
+      ) {
         throw new Error("Status persistence controls did not render");
       }
       details.open = true;
       copyButton.focus();
-      window.__rr_home_poll_test = { routeMap, track, copyButton, animationStarts: 0 };
-      routeMap.addEventListener("animationstart", () => {
-        window.__rr_home_poll_test.animationStarts += 1;
-      });
+      window.__rr_home_poll_test = { routeStage, path, copyButton };
       return true;
     })()
   `);
@@ -729,16 +759,13 @@ app.whenReady().then(async () => {
     (() => {
       const test = window.__rr_home_poll_test;
       const details = document.querySelector("[data-home-credentials]");
-      if (document.querySelector("[data-home-route-map] .route-track") !== test.track) {
-        throw new Error("Status polling replaced the route animation DOM");
+      if (document.querySelector("[data-live-router-stage] .live-request-path") !== test.path) {
+        throw new Error("Status polling replaced an unchanged live request path");
       }
       if (!details?.open) throw new Error("Status polling collapsed Credentials and network");
       if (document.activeElement !== test.copyButton) {
         throw new Error("Status polling moved focus away from the endpoint controls");
       }
-      if (test.animationStarts !== 0) {
-        throw new Error("Status polling restarted the route animation without new traffic");
-      }
       return true;
     })()
   `);

scripts/capture-ui.js

@@ -17,6 +17,7 @@ function createGateway({
   port = DEFAULT_PORT,
   host = "127.0.0.1",
   maxBodyBytes = MAX_JSON_BODY_BYTES,
+  requestActivity,
 } = {}) {
   let server = null;
   let listeningPort = null;
@@ -202,15 +203,27 @@ function createGateway({
           model: body.model,
           stream: !!body.stream,
         });
+        const activityId = requestActivity?.begin({
+          model: body.model,
+          stream: !!body.stream,
+        });
+        let activityStatus = 500;
+        let activityOutcome = "error";
         const clientAbort = new AbortController();
         const onClientAbort = () => {
           if (!clientAbort.signal.aborted) clientAbort.abort(new Error("Client disconnected"));
         };
         req.once("aborted", onClientAbort);
         res.once("close", onClientAbort);
         try {
-          const result = await router.chatCompletions({ body, signal: clientAbort.signal });
+          const result = await router.chatCompletions({
+            body,
+            signal: clientAbort.signal,
+            onProviderSelected: (provider) => requestActivity?.route(activityId, provider),
+          });
           if (!result.ok) {
+            activityStatus = result.status || 502;
+            activityOutcome = result.status === 499 ? "canceled" : "error";
             logger.error("chat/completions failed", {
               model: body.model,
               status: result.status,
@@ -235,7 +248,11 @@ function createGateway({
             });
             try {
               await result.streamPipe(res);
+              activityStatus = 200;
+              activityOutcome = "success";
             } catch (e) {
+              activityStatus = clientAbort.signal.aborted ? 499 : 502;
+              activityOutcome = clientAbort.signal.aborted ? "canceled" : "error";
               if (!res.writableEnded) {
                 res.write(
                   `data: ${JSON.stringify({ error: { message: e.message } })}\n\n`
@@ -248,10 +265,16 @@ function createGateway({
 
           res.writeHead(200, { "Content-Type": "application/json" });
           res.end(JSON.stringify(result.openAiJson));
+          activityStatus = 200;
+          activityOutcome = "success";
           return;
         } finally {
           req.removeListener("aborted", onClientAbort);
           res.removeListener("close", onClientAbort);
+          requestActivity?.end(activityId, {
+            status: activityStatus,
+            outcome: activityOutcome,
+          });
         }
       }
 

src/lib/gateway.js

@@ -0,0 +1,77 @@
+"use strict";
+
+const { randomUUID } = require("node:crypto");
+
+function createRequestActivity({ now = Date.now, idFactory = randomUUID } = {}) {
+  const active = new Map();
+  const listeners = new Set();
+
+  function snapshot() {
+    return [...active.values()].map((request) => ({ ...request }));
+  }
+
+  function publish(type, request) {
+    const event = { type, request: { ...request }, active: snapshot() };
+    for (const listener of listeners) {
+      try {
+        listener(event);
+      } catch {
+        // Activity is decorative telemetry and must never affect request routing.
+      }
+    }
+  }
+
+  function begin({ model, stream = false } = {}) {
+    const request = {
+      id: idFactory(),
+      model: String(model || ""),
+      stream: !!stream,
+      startedAt: now(),
+      providerId: null,
+      providerType: null,
+      providerName: null,
+    };
+    active.set(request.id, request);
+    publish("started", request);
+    return request.id;
+  }
+
+  function route(id, provider = {}) {
+    const current = active.get(id);
+    if (!current) return false;
+    const request = {
+      ...current,
+      providerId: provider.providerId || null,
+      providerType: provider.providerType || null,
+      providerName: provider.providerName || null,
+      upstreamModel: provider.upstreamModel || provider.model || null,
+      routedAt: now(),
+    };
+    active.set(id, request);
+    publish("routed", request);
+    return true;
+  }
+
+  function end(id, { status = 200, outcome = "success" } = {}) {
+    const current = active.get(id);
+    if (!current) return false;
+    active.delete(id);
+    publish("finished", {
+      ...current,
+      status,
+      outcome,
+      finishedAt: now(),
+    });
+    return true;
+  }
+
+  function subscribe(listener) {
+    if (typeof listener !== "function") return () => {};
+    listeners.add(listener);
+    return () => listeners.delete(listener);
+  }
+
+  return { begin, route, end, snapshot, subscribe };
+}
+
+module.exports = { createRequestActivity };

src/lib/request-activity.js

@@ -880,7 +880,7 @@ function createRouter({ store, fetchImpl = fetch, requestLog, timeoutMs, usage,
     }
   }
 
-  async function chatCompletions({ body, signal } = {}) {
+  async function chatCompletions({ body, signal, onProviderSelected } = {}) {
     const cfg = getConfig();
     const modelId = body.model;
     const stream = !!body.stream;
@@ -977,6 +977,19 @@ function createRouter({ store, fetchImpl = fetch, requestLog, timeoutMs, usage,
         }
 
         const attemptMember = { ...member, provider };
+        if (typeof onProviderSelected === "function") {
+          try {
+            onProviderSelected({
+              providerId: provider.id,
+              providerType: canonicalProviderType(provider.type),
+              providerName: provider.name,
+              accountAlias: provider.accountAlias || null,
+              upstreamModel: member.upstreamModel,
+            });
+          } catch {
+            // UI telemetry must remain isolated from routing.
+          }
+        }
         let result;
         try {
           result = await tryMember(attemptMember, body, stream, signal);

src/lib/router.js

@@ -19,6 +19,7 @@ const {
 const { createStore } = require("./lib/store");
 const { createRouter } = require("./lib/router");
 const { createGateway } = require("./lib/gateway");
+const { createRequestActivity } = require("./lib/request-activity");
 const { createUsageStore, hydrateUsageIdentity } = require("./lib/usage");
 const logger = require("./lib/logger");
 const { hashPassword, verifyPassword, generateId, generateApiKey } = require("./lib/password");
@@ -75,8 +76,9 @@ logger.info("ReRouted starting", { userData, logPath });
 
 const store = createStore(configPath);
 const usage = createUsageStore(usagePath, { legacyPath: legacyUsagePath });
+const requestActivity = createRequestActivity();
 const router = createRouter({ store, usage });
-const gateway = createGateway({ store, router });
+const gateway = createGateway({ store, router, requestActivity });
 const sessionAuth = createSessionAuth();
 const quota = createQuotaService({ store, refreshProvider: refreshProviderForQuota });
 
@@ -87,6 +89,15 @@ let detectedCache = [];
 let updateService = null;
 let updatePromptShown = false;
 
+requestActivity.subscribe((activity) => {
+  const cfg = store.load();
+  const canPublish =
+    !hasAdminPassword(cfg) || sessionAuth.isUnlocked(true) || harnessModeEnabled();
+  if (canPublish && panel && !panel.isDestroyed()) {
+    panel.webContents.send("app:request-activity", activity);
+  }
+});
+
 function publishUpdateState(update) {
   if (panel && !panel.isDestroyed()) {
     panel.webContents.send("app:update-state", update);
@@ -387,6 +398,7 @@ function registerIpc() {
       combos: (cfg.combos || []).map(publicCombo),
       stats: publicStats(router.stats(), cfg),
       usage: publicUsage(router.usageAggregate("24h"), cfg),
+      activeRequests: requestActivity.snapshot(),
       unlocked,
       hasAdminPassword: hasPassword,
       oauthProviders: Object.keys(OAUTH).map((k) => ({

src/main.js

@@ -54,6 +54,7 @@ const EVENT_CHANNELS = new Set([
   "app:update-state",
   "app:session-lock-changed",
   "app:provider-identities-updated",
+  "app:request-activity",
   "app:open-settings",
 ]);