npm - @jsonstudio/rcc - Versions diffs - 0.89.1086 → 0.89.1136 - Mend

@jsonstudio/rcc 0.89.1086 → 0.89.1136

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (101) hide show

package/dist/docs/daemon-admin-ui.html CHANGED Viewed

@@ -32,7 +32,7 @@
       }
       .container {
-        max-width: 1120px;
+        max-width: 1680px;
         margin: 22px auto 40px;
         padding: 0 16px;
       }
@@ -50,6 +50,7 @@
         align-items: center;
         justify-content: space-between;
         gap: 14px;
+        flex-wrap: wrap;
         margin-bottom: 14px;
       }
@@ -156,6 +157,7 @@
         display: flex;
         gap: 6px;
         margin: 14px 0 10px;
+        flex-wrap: wrap;
       }
       .tab {
@@ -178,6 +180,15 @@
         gap: 12px;
       }
+      .grid.grid-wide-left {
+        grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
+      }
+      /* Ensure grid children can shrink without overflowing into the next column */
+      .grid > .card {
+        min-width: 0;
+      }
       @media (max-width: 980px) {
         .grid {
           grid-template-columns: minmax(0, 1fr);
@@ -199,9 +210,7 @@
       .table {
         width: 100%;
         border-collapse: collapse;
-        border-radius: 12px;
-        overflow: hidden;
-        border: 1px solid var(--border);
+        table-layout: fixed;
       }
       .table th,
@@ -210,6 +219,8 @@
         font-size: 12px;
         border-bottom: 1px solid rgba(255, 255, 255, 0.06);
         vertical-align: top;
+        overflow-wrap: anywhere;
+        word-break: break-word;
       }
       .table th {
@@ -219,10 +230,52 @@
         background: rgba(255, 255, 255, 0.03);
       }
+      .table tr.group-row td {
+        background: rgba(255, 255, 255, 0.02);
+        color: rgba(255, 255, 255, 0.86);
+        font-weight: 650;
+      }
+      .indent {
+        padding-left: 22px !important;
+      }
+      .table-wrap {
+        width: 100%;
+        max-width: 100%;
+        overflow: auto;
+        border-radius: 12px;
+        border: 1px solid var(--border);
+      }
+      .table-wrap .table {
+        border: 0;
+        min-width: 860px;
+      }
+      .table td.actions-cell {
+        width: 220px;
+        overflow: visible;
+      }
+      .actions {
+        display: flex;
+        gap: 8px;
+        flex-wrap: wrap;
+        justify-content: flex-end;
+      }
+      .truncate {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
       .mono {
         font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
           "Courier New", monospace;
         color: var(--muted);
+        word-break: break-all;
       }
       .notice {
@@ -246,6 +299,25 @@
         border-radius: 12px;
         padding: 10px 12px;
       }
+      @media (max-width: 640px) {
+        header {
+          flex-direction: column;
+          align-items: flex-start;
+        }
+        .statusline {
+          width: 100%;
+          justify-content: flex-start;
+        }
+        .row {
+          align-items: stretch;
+        }
+        .row > input,
+        .row > select,
+        .row > button {
+          max-width: 100%;
+        }
+      }
     </style>
   </head>
   <body>
@@ -255,13 +327,15 @@
           <div class="title">
             <h1>RouteCodex Daemon Admin</h1>
             <p>
-              Local-only UI. Writes to <span class="mono">~/.routecodex/config.json</span>; restart
-              required to apply routing/provider changes.
+              Writes to <span class="mono">~/.routecodex/config.json</span>. If
+              <span class="mono">httpserver.apikey</span> is configured, remote access is allowed
+              with the key; otherwise this page is localhost-only.
             </p>
           </div>
           <div class="statusline">
             <div class="pill"><span id="statusDot" class="dot"></span><span id="statusText">connecting…</span></div>
             <div class="pill"><span class="mono" id="serverId">serverId: —</span></div>
+            <button id="restartRuntimeBtn" class="primary">Restart runtime</button>
           </div>
         </header>
@@ -280,12 +354,14 @@
         <div class="tabs">
           <button class="tab active" data-tab="providers">Provider Pool</button>
+          <button class="tab" data-tab="tokens">Token Stats</button>
           <button class="tab" data-tab="credentials">Auth Provider Pool</button>
+          <button class="tab" data-tab="quota">Quota Pool</button>
           <button class="tab" data-tab="routing">Runtime Routing Pool</button>
         </div>
         <section id="panelProviders" data-panel="providers">
-          <div class="grid">
+          <div class="grid grid-wide-left">
             <div class="card" style="box-shadow: none;">
               <p class="section-title">Providers in <span class="mono">virtualrouter.providers</span></p>
               <p class="section-sub">
@@ -295,20 +371,23 @@
                 <button id="refreshProvidersBtn" class="primary">Refresh</button>
                 <button id="newProviderBtn">New provider…</button>
               </div>
-              <table class="table">
-                <thead>
-                  <tr>
-                    <th>id</th>
-                    <th>type</th>
-                    <th>enabled</th>
-                    <th>baseURL</th>
-                    <th>models</th>
-                    <th>auth</th>
-                    <th></th>
-                  </tr>
-                </thead>
-                <tbody id="providersTbody"></tbody>
-              </table>
+              <div class="table-wrap">
+                <table class="table">
+                  <thead>
+                    <tr>
+                      <th>id</th>
+                      <th>type</th>
+                      <th>enabled</th>
+                      <th>baseURL</th>
+                      <th>models</th>
+                      <th>compat</th>
+                      <th>auth</th>
+                      <th></th>
+                    </tr>
+                  </thead>
+                  <tbody id="providersTbody"></tbody>
+                </table>
+              </div>
             </div>
             <div class="card" style="box-shadow: none;">
@@ -318,7 +397,7 @@
               </p>
               <div class="notice" style="margin-bottom: 10px;">
-                If you use <span class="mono">httpserver.apikey</span>, set it above so API calls don’t return 401. The HTML page is always local-only.
+                If you use <span class="mono">httpserver.apikey</span>, set it above so API calls don’t return 401. Without apikey configured, this page is localhost-only.
               </div>
               <div class="row" style="margin-bottom: 10px;">
@@ -412,6 +491,37 @@
           </div>
         </section>
+        <section id="panelTokens" data-panel="tokens" style="display:none;">
+          <div class="grid">
+            <div class="card" style="box-shadow:none;">
+              <p class="section-title">Token usage (session + historical)</p>
+              <p class="section-sub">
+                Session stats reset on server restart. Historical totals are aggregated from
+                <span class="mono">~/.routecodex/logs/provider-stats.jsonl</span> (best-effort).
+              </p>
+              <div class="row" style="margin-bottom: 10px;">
+                <button id="refreshTokensBtn" class="primary">Refresh</button>
+              </div>
+              <div class="notice mono" id="tokenTotalsBox" style="white-space: pre-wrap;"></div>
+              <div class="table-wrap" style="margin-top: 10px;">
+                <table class="table">
+                  <thead>
+                    <tr>
+                      <th>providerKey</th>
+                      <th>model</th>
+                      <th>session req/err</th>
+                      <th>session tokens in/out/total</th>
+                      <th>historical req/err</th>
+                      <th>historical tokens in/out/total</th>
+                    </tr>
+                  </thead>
+                  <tbody id="tokensTbody"></tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+        </section>
         <section id="panelCredentials" data-panel="credentials" style="display:none;">
           <div class="grid">
             <div class="card" style="box-shadow:none;">
@@ -422,19 +532,21 @@
               <div class="row" style="margin-bottom: 10px;">
                 <button id="refreshCredentialsBtn" class="primary">Refresh</button>
               </div>
-              <table class="table">
-                <thead>
-                  <tr>
-                    <th>kind</th>
-                    <th>provider</th>
-                    <th>alias</th>
-                    <th>status</th>
-                    <th>expires</th>
-                    <th>secretRef</th>
-                  </tr>
-                </thead>
-                <tbody id="credentialsTbody"></tbody>
-              </table>
+              <div class="table-wrap">
+                <table class="table">
+                  <thead>
+                    <tr>
+                      <th>kind</th>
+                      <th>provider</th>
+                      <th>alias</th>
+                      <th>status</th>
+                      <th>expires</th>
+                      <th>secretRef</th>
+                    </tr>
+                  </thead>
+                  <tbody id="credentialsTbody"></tbody>
+                </table>
+              </div>
             </div>
             <div class="card" style="box-shadow:none;">
@@ -474,6 +586,52 @@
           </div>
         </section>
+        <section id="panelQuota" data-panel="quota" style="display:none;">
+          <div class="grid">
+            <div class="card" style="box-shadow:none;">
+              <p class="section-title">Quota (daemon)</p>
+              <p class="section-sub">
+                VirtualRouter consumes this via <span class="mono">quotaView</span>. When
+                <span class="mono">inPool=false</span>, the provider is treated as removed from the route pool.
+              </p>
+              <div class="row" style="margin-bottom: 10px;">
+                <button id="refreshQuotaBtn" class="primary">Refresh</button>
+                <button id="resetQuotaBtn" class="danger">Reset quota module</button>
+              </div>
+              <div class="table-wrap">
+                <table class="table">
+                  <thead>
+                    <tr>
+                      <th>providerKey</th>
+                      <th>auth</th>
+                      <th>inPool</th>
+                      <th>reason</th>
+                      <th>cooldownUntil</th>
+                      <th>blacklistUntil</th>
+                      <th>errCount</th>
+                      <th></th>
+                    </tr>
+                  </thead>
+                  <tbody id="quotaTbody"></tbody>
+                </table>
+              </div>
+              <div id="quotaOpLog" class="log" style="margin-top: 10px; display:none;"></div>
+            </div>
+            <div class="card" style="box-shadow:none;">
+              <p class="section-title">Notes</p>
+              <div class="notice">
+                <div style="margin-bottom: 6px;">
+                  Use this view to confirm 429/backoff/blacklist decisions and whether a provider is currently eligible.
+                </div>
+                <div>
+                  If a provider looks stuck, try <span class="mono">Reset quota module</span>, then <span class="mono">Restart runtime</span>.
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
         <section id="panelRouting" data-panel="routing" style="display:none;">
           <div class="grid">
             <div class="card" style="box-shadow:none;">
@@ -495,18 +653,20 @@
               <div class="row" style="margin-bottom: 10px;">
                 <button id="refreshRuntimesBtn" class="primary">Refresh</button>
               </div>
-              <table class="table">
-                <thead>
-                  <tr>
-                    <th>providerKey</th>
-                    <th>runtimeKey</th>
-                    <th>family</th>
-                    <th>protocol</th>
-                    <th>series</th>
-                  </tr>
-                </thead>
-                <tbody id="runtimesTbody"></tbody>
-              </table>
+              <div class="table-wrap">
+                <table class="table">
+                  <thead>
+                    <tr>
+                      <th>providerKey</th>
+                      <th>runtimeKey</th>
+                      <th>family</th>
+                      <th>protocol</th>
+                      <th>series</th>
+                    </tr>
+                  </thead>
+                  <tbody id="runtimesTbody"></tbody>
+                </table>
+              </div>
             </div>
           </div>
         </section>
@@ -520,7 +680,10 @@
         const el = $(id);
         if (!el) return;
         el.style.display = value ? "block" : "none";
-        el.textContent = value || "";
+        const raw = value || "";
+        const max = 12000;
+        const out = raw.length > max ? raw.slice(0, max) + "\n…(truncated)" : raw;
+        el.textContent = out;
       }
       function getApiKey() {
@@ -569,10 +732,71 @@
         });
         const panels = [
           { name: "providers", el: $("panelProviders") },
+          { name: "tokens", el: $("panelTokens") },
           { name: "credentials", el: $("panelCredentials") },
+          { name: "quota", el: $("panelQuota") },
           { name: "routing", el: $("panelRouting") }
         ];
         for (const p of panels) p.el.style.display = p.name === name ? "block" : "none";
+        // Light auto-refresh on tab switch to avoid showing stale "Unauthorized" after setting apikey.
+        void maybeRefreshTab(name);
+      }
+      function getActiveTab() {
+        const active = document.querySelector(".tab.active");
+        const name = active ? active.getAttribute("data-tab") : null;
+        return name || "providers";
+      }
+      const tabLastRefreshedAt = {
+        providers: 0,
+        tokens: 0,
+        credentials: 0,
+        quota: 0,
+        routing: 0
+      };
+      async function maybeRefreshTab(name) {
+        const key = name in tabLastRefreshedAt ? name : "providers";
+        const now = Date.now();
+        if (now - tabLastRefreshedAt[key] < 1500) {
+          return;
+        }
+        tabLastRefreshedAt[key] = now;
+        try {
+          if (key === "providers") await refreshProviders();
+          else if (key === "tokens") await refreshTokens();
+          else if (key === "credentials") await refreshCredentials();
+          else if (key === "quota") await refreshQuota();
+          else if (key === "routing") await refreshRuntimes();
+        } catch {
+          // ignore refresh failures on tab switch
+        }
+      }
+      function textOf(value) {
+        if (value === null || value === undefined) return "";
+        return String(value);
+      }
+      function createCell(tag, text, className, opts = {}) {
+        const el = document.createElement(tag);
+        if (className) el.className = className;
+        const s = textOf(text);
+        el.textContent = s;
+        if (opts.title && s) el.title = s;
+        return el;
+      }
+      function createErrorRow(colSpan, message) {
+        const tr = document.createElement("tr");
+        const td = document.createElement("td");
+        td.colSpan = colSpan;
+        td.className = "mono";
+        td.textContent = `Failed to load: ${textOf(message)}`;
+        tr.appendChild(td);
+        return tr;
       }
       function presetFor(type) {
@@ -640,29 +864,67 @@
       async function refreshProviders() {
         const body = $("providersTbody");
-        body.innerHTML = "";
+        body.replaceChildren();
         try {
           const data = await apiFetch("/config/providers");
-          for (const p of data.providers || []) {
-            const tr = document.createElement("tr");
-            tr.innerHTML = `
-              <td class="mono">${p.id || ""}</td>
-              <td>${p.type || ""}</td>
-              <td>${String(p.enabled)}</td>
-              <td class="mono">${p.baseURL || ""}</td>
-              <td>${p.modelCount || 0}</td>
-              <td>${p.authType || ""}</td>
-              <td>
-                <button data-action="edit" data-id="${p.id}">Edit</button>
-                <button data-action="delete" data-id="${p.id}" class="danger">Delete</button>
-              </td>
-            `;
-            body.appendChild(tr);
+          const list = Array.isArray(data.providers) ? data.providers : [];
+          const grouped = new Map();
+          for (const p of list) {
+            const t = textOf(p.type || "unknown") || "unknown";
+            if (!grouped.has(t)) grouped.set(t, []);
+            grouped.get(t).push(p);
+          }
+          const types = Array.from(grouped.keys()).sort((a, b) => a.localeCompare(b));
+          for (const type of types) {
+            const groupRow = document.createElement("tr");
+            groupRow.className = "group-row";
+            const groupCell = document.createElement("td");
+            groupCell.colSpan = 8;
+            groupCell.textContent = `${type} (${grouped.get(type).length})`;
+            groupRow.appendChild(groupCell);
+            body.appendChild(groupRow);
+            const items = grouped.get(type);
+            items.sort((a, b) => textOf(a.id).localeCompare(textOf(b.id)));
+            for (const p of items) {
+              const tr = document.createElement("tr");
+              tr.appendChild(createCell("td", p.id || "", "mono indent"));
+              tr.appendChild(createCell("td", p.type || "", ""));
+              tr.appendChild(createCell("td", String(Boolean(p.enabled)), ""));
+              tr.appendChild(createCell("td", p.baseURL || "", "mono truncate", { title: true }));
+              const preview = Array.isArray(p.modelsPreview) ? p.modelsPreview.map((x) => textOf(x)).filter(Boolean) : [];
+              const modelSummary = preview.length ? `${p.modelCount || 0}: ${preview.join(", ")}${(p.modelCount || 0) > preview.length ? ", …" : ""}` : String(p.modelCount || 0);
+              tr.appendChild(createCell("td", modelSummary, "mono truncate", { title: true }));
+              tr.appendChild(createCell("td", p.compatibilityProfile || "", "mono truncate", { title: true }));
+              tr.appendChild(createCell("td", p.authType || "", ""));
+              const actionsTd = document.createElement("td");
+              actionsTd.className = "actions-cell";
+              const box = document.createElement("div");
+              box.className = "actions";
+              const edit = document.createElement("button");
+              edit.textContent = "Edit";
+              edit.setAttribute("data-action", "edit");
+              edit.setAttribute("data-id", textOf(p.id));
+              const test = document.createElement("button");
+              test.textContent = "Test";
+              test.setAttribute("data-action", "test");
+              test.setAttribute("data-id", textOf(p.id));
+              test.disabled = !(p && p.enabled !== false && Number(p.modelCount || 0) > 0);
+              const del = document.createElement("button");
+              del.textContent = "Delete";
+              del.className = "danger";
+              del.setAttribute("data-action", "delete");
+              del.setAttribute("data-id", textOf(p.id));
+              box.appendChild(edit);
+              box.appendChild(test);
+              box.appendChild(del);
+              actionsTd.appendChild(box);
+              tr.appendChild(actionsTd);
+              body.appendChild(tr);
+            }
           }
         } catch (e) {
-          const tr = document.createElement("tr");
-          tr.innerHTML = `<td colspan="7" class="mono">Failed to load: ${e.message}</td>`;
-          body.appendChild(tr);
+          body.appendChild(createErrorRow(8, e && e.message ? e.message : e));
         }
       }
@@ -775,26 +1037,22 @@
       async function refreshCredentials() {
         const body = $("credentialsTbody");
-        body.innerHTML = "";
+        body.replaceChildren();
         try {
           const items = await apiFetch("/daemon/credentials");
           for (const c of items || []) {
             const tr = document.createElement("tr");
             const exp = c.expiresInSec == null ? "—" : `${c.expiresInSec}s`;
-            tr.innerHTML = `
-              <td>${c.kind}</td>
-              <td class="mono">${c.provider}</td>
-              <td class="mono">${c.alias}</td>
-              <td>${c.status}</td>
-              <td class="mono">${exp}</td>
-              <td class="mono">${c.secretRef || "—"}</td>
-            `;
+            tr.appendChild(createCell("td", c.kind || "", ""));
+            tr.appendChild(createCell("td", c.provider || "", "mono"));
+            tr.appendChild(createCell("td", c.alias || "", "mono"));
+            tr.appendChild(createCell("td", c.status || "", ""));
+            tr.appendChild(createCell("td", exp, "mono"));
+            tr.appendChild(createCell("td", c.secretRef || "—", "mono"));
             body.appendChild(tr);
           }
         } catch (e) {
-          const tr = document.createElement("tr");
-          tr.innerHTML = `<td colspan="6" class="mono">Failed to load: ${e.message}</td>`;
-          body.appendChild(tr);
+          body.appendChild(createErrorRow(6, e && e.message ? e.message : e));
         }
       }
@@ -865,24 +1123,236 @@
       async function refreshRuntimes() {
         const body = $("runtimesTbody");
-        body.innerHTML = "";
+        body.replaceChildren();
         try {
           const items = await apiFetch("/providers/runtimes");
           for (const r of items || []) {
             const tr = document.createElement("tr");
-            tr.innerHTML = `
-              <td class="mono">${r.providerKey || ""}</td>
-              <td class="mono">${r.runtimeKey || ""}</td>
-              <td>${r.family || ""}</td>
-              <td>${r.protocol || ""}</td>
-              <td>${r.series || ""}</td>
-            `;
+            tr.appendChild(createCell("td", r.providerKey || "", "mono truncate", { title: true }));
+            tr.appendChild(createCell("td", r.runtimeKey || "", "mono truncate", { title: true }));
+            tr.appendChild(createCell("td", r.family || "", ""));
+            tr.appendChild(createCell("td", r.protocol || "", ""));
+            tr.appendChild(createCell("td", r.series || "", ""));
+            body.appendChild(tr);
+          }
+        } catch (e) {
+          body.appendChild(createErrorRow(5, e && e.message ? e.message : e));
+        }
+      }
+      function formatEpochMs(ms) {
+        if (typeof ms !== "number" || !Number.isFinite(ms) || ms <= 0) return "—";
+        try {
+          return new Date(ms).toLocaleString();
+        } catch {
+          return String(ms);
+        }
+      }
+      async function refreshQuota() {
+        const body = $("quotaTbody");
+        body.replaceChildren();
+        setLog("quotaOpLog", "");
+        try {
+          const out = await apiFetch("/quota/providers");
+          const list = Array.isArray(out.providers) ? out.providers : [];
+          for (const q of list) {
+            const tr = document.createElement("tr");
+            tr.appendChild(createCell("td", q.providerKey || "", "mono truncate", { title: true }));
+            tr.appendChild(createCell("td", q.authType || "", ""));
+            tr.appendChild(createCell("td", String(Boolean(q.inPool)), ""));
+            tr.appendChild(createCell("td", q.reason || "", ""));
+            tr.appendChild(createCell("td", formatEpochMs(q.cooldownUntil), "mono"));
+            tr.appendChild(createCell("td", formatEpochMs(q.blacklistUntil), "mono"));
+            tr.appendChild(createCell("td", q.consecutiveErrorCount ?? 0, "mono"));
+            const actionsTd = document.createElement("td");
+            actionsTd.className = "actions-cell";
+            const box = document.createElement("div");
+            box.className = "actions";
+            const recover = document.createElement("button");
+            recover.textContent = "Recover";
+            recover.setAttribute("data-action", "quota-recover");
+            recover.setAttribute("data-key", textOf(q.providerKey));
+            const reset = document.createElement("button");
+            reset.textContent = "Reset";
+            reset.setAttribute("data-action", "quota-reset");
+            reset.setAttribute("data-key", textOf(q.providerKey));
+            const disable = document.createElement("button");
+            disable.textContent = "Disable…";
+            disable.className = "danger";
+            disable.setAttribute("data-action", "quota-disable");
+            disable.setAttribute("data-key", textOf(q.providerKey));
+            box.appendChild(recover);
+            box.appendChild(reset);
+            box.appendChild(disable);
+            actionsTd.appendChild(box);
+            tr.appendChild(actionsTd);
+            body.appendChild(tr);
+          }
+        } catch (e) {
+          body.appendChild(createErrorRow(8, e && e.message ? e.message : e));
+        }
+      }
+      function formatInt(n) {
+        const v = typeof n === "number" && Number.isFinite(n) ? n : 0;
+        try { return v.toLocaleString(); } catch { return String(v); }
+      }
+      function formatTokensRow(label, totals) {
+        const inTok = formatInt(totals.totalPromptTokens);
+        const outTok = formatInt(totals.totalCompletionTokens);
+        const totTok = formatInt(totals.totalOutputTokens);
+        const req = formatInt(totals.requestCount);
+        const err = formatInt(totals.errorCount);
+        return `${label}: requests=${req} (err=${err}) tokens in/out/total=${inTok}/${outTok}/${totTok}`;
+      }
+      async function refreshTokens() {
+        const body = $("tokensTbody");
+        body.replaceChildren();
+        $("tokenTotalsBox").textContent = "";
+        try {
+          const out = await apiFetch("/daemon/stats");
+          const session = out && out.session ? out.session : null;
+          const historical = out && out.historical ? out.historical : null;
+          const totals = out && out.totals ? out.totals : null;
+          const sessionTotals = totals && totals.session ? totals.session : { requestCount: 0, errorCount: 0, totalPromptTokens: 0, totalCompletionTokens: 0, totalOutputTokens: 0 };
+          const historicalTotals = totals && totals.historical ? totals.historical : { requestCount: 0, errorCount: 0, totalPromptTokens: 0, totalCompletionTokens: 0, totalOutputTokens: 0 };
+          const lines = [];
+          lines.push(formatTokensRow("ALL (session)", sessionTotals));
+          lines.push(formatTokensRow("ALL (historical)", historicalTotals));
+          $("tokenTotalsBox").textContent = lines.join("\n");
+          const sessionRows = session && Array.isArray(session.totals) ? session.totals : [];
+          const histRows = historical && Array.isArray(historical.totals) ? historical.totals : [];
+          const byKey = new Map();
+          const keyOf = (r) => `${textOf(r.providerKey)}|${textOf(r.model || "")}`;
+          for (const r of sessionRows) {
+            if (!r || !r.providerKey) continue;
+            byKey.set(keyOf(r), { providerKey: textOf(r.providerKey), model: textOf(r.model || ""), session: r, historical: null });
+          }
+          for (const r of histRows) {
+            if (!r || !r.providerKey) continue;
+            const k = keyOf(r);
+            const existing = byKey.get(k) || { providerKey: textOf(r.providerKey), model: textOf(r.model || ""), session: null, historical: null };
+            existing.historical = r;
+            byKey.set(k, existing);
+          }
+          const rows = Array.from(byKey.values()).sort((a, b) => {
+            const ak = `${a.providerKey}.${a.model}`;
+            const bk = `${b.providerKey}.${b.model}`;
+            return ak.localeCompare(bk);
+          });
+          for (const row of rows) {
+            const tr = document.createElement("tr");
+            tr.appendChild(createCell("td", row.providerKey, "mono truncate", { title: true }));
+            tr.appendChild(createCell("td", row.model || "—", "mono truncate", { title: true }));
+            const s = row.session;
+            const sReqErr = s ? `${formatInt(s.requestCount)} / ${formatInt(s.errorCount)}` : "—";
+            const sTok = s ? `${formatInt(s.totalPromptTokens)}/${formatInt(s.totalCompletionTokens)}/${formatInt(s.totalOutputTokens)}` : "—";
+            tr.appendChild(createCell("td", sReqErr, "mono"));
+            tr.appendChild(createCell("td", sTok, "mono"));
+            const h = row.historical;
+            const hReqErr = h ? `${formatInt(h.requestCount)} / ${formatInt(h.errorCount)}` : "—";
+            const hTok = h ? `${formatInt(h.totalPromptTokens)}/${formatInt(h.totalCompletionTokens)}/${formatInt(h.totalOutputTokens)}` : "—";
+            tr.appendChild(createCell("td", hReqErr, "mono"));
+            tr.appendChild(createCell("td", hTok, "mono"));
             body.appendChild(tr);
           }
         } catch (e) {
-          const tr = document.createElement("tr");
-          tr.innerHTML = `<td colspan="5" class="mono">Failed to load: ${e.message}</td>`;
-          body.appendChild(tr);
+          body.appendChild(createErrorRow(6, e && e.message ? e.message : e));
+        }
+      }
+      async function testProviderFromPool(providerId) {
+        setLog("providerOpLog", "");
+        try {
+          const detail = await apiFetch(`/config/providers/${encodeURIComponent(providerId)}`);
+          const provider = detail && detail.provider ? detail.provider : null;
+          const models = provider && provider.models && typeof provider.models === "object" ? Object.keys(provider.models) : [];
+          if (!models.length) {
+            throw new Error("No models configured for this provider");
+          }
+          const modelId = models[0];
+          const directModel = `${providerId}.${modelId}`;
+          const payload = { model: directModel, input: [{ role: "user", content: "ping" }], stream: false };
+          const headers = new Headers({ "content-type": "application/json" });
+          const apiKey = getApiKey();
+          if (apiKey) headers.set("x-api-key", apiKey);
+          const started = Date.now();
+          const resp = await fetch("/v1/responses", { method: "POST", headers, body: JSON.stringify(payload) });
+          const text = await resp.text();
+          const ms = Date.now() - started;
+          if (!resp.ok) {
+            throw new Error(`HTTP ${resp.status} (${ms}ms): ${text}`);
+          }
+          let json = null;
+          try { json = text ? JSON.parse(text) : null; } catch { json = null; }
+          const summary =
+            json && typeof json.output_text === "string"
+              ? json.output_text.slice(0, 200)
+              : json && Array.isArray(json.output)
+                ? "(output items=" + json.output.length + ")"
+                : "(ok)";
+          setLog("providerOpLog", `Test OK (${ms}ms) model=${directModel}\n${summary}`);
+        } catch (e) {
+          setLog("providerOpLog", `Test failed: ${e && e.message ? e.message : e}`);
+        }
+      }
+      async function quotaAction(kind, providerKey) {
+        setLog("quotaOpLog", "");
+        if (!providerKey) return;
+        try {
+          if (kind === "recover") {
+            await apiFetch(`/quota/providers/${encodeURIComponent(providerKey)}/recover`, { method: "POST" });
+            await refreshQuota();
+            return;
+          }
+          if (kind === "reset") {
+            await apiFetch(`/quota/providers/${encodeURIComponent(providerKey)}/reset`, { method: "POST" });
+            await refreshQuota();
+            return;
+          }
+          if (kind === "disable") {
+            const minutesRaw = prompt("Disable duration (minutes)", "60");
+            if (!minutesRaw) return;
+            const minutes = Number.parseFloat(minutesRaw);
+            if (!Number.isFinite(minutes) || minutes <= 0) {
+              throw new Error("Invalid minutes");
+            }
+            const modeRaw = prompt("Mode: cooldown or blacklist", "cooldown");
+            const mode = (modeRaw || "cooldown").trim().toLowerCase() === "blacklist" ? "blacklist" : "cooldown";
+            await apiFetch(`/quota/providers/${encodeURIComponent(providerKey)}/disable`, {
+              method: "POST",
+              body: JSON.stringify({ mode, durationMinutes: minutes })
+            });
+            await refreshQuota();
+            return;
+          }
+        } catch (e) {
+          setLog("quotaOpLog", `Action failed: ${e && e.message ? e.message : e}`);
+        }
+      }
+      async function resetQuotaModule() {
+        setLog("quotaOpLog", "");
+        if (!confirm("Reset provider-quota module now? This clears cooldown/blacklist state.")) return;
+        try {
+          const out = await apiFetch("/daemon/modules/provider-quota/reset", { method: "POST" });
+          setLog("quotaOpLog", `OK. resetAt=${out.resetAt || "—"}`);
+          await refreshQuota();
+        } catch (e) {
+          setLog("quotaOpLog", `Reset failed: ${e.message}`);
         }
       }
@@ -895,14 +1365,40 @@
         const value = ($("apiKeyInput").value || "").trim();
         setApiKey(value);
         $("apiKeyHint").textContent = value ? "saved (session only)" : "";
+        Promise.resolve()
+          .then(refreshStatus)
+          .then(() => selectTab(getActiveTab()))
+          .catch(() => {});
       });
       $("clearApiKeyBtn").addEventListener("click", () => {
         setApiKey("");
         $("apiKeyInput").value = "";
         $("apiKeyHint").textContent = "";
+        Promise.resolve()
+          .then(refreshStatus)
+          .then(() => selectTab(getActiveTab()))
+          .catch(() => {});
+      });
+      $("restartRuntimeBtn").addEventListener("click", async () => {
+        setLog("providerOpLog", "");
+        if (!confirm("Reload config from disk and rebuild runtime now?")) return;
+        try {
+          const out = await apiFetch("/daemon/restart", { method: "POST" });
+          const warnings = Array.isArray(out.warnings) && out.warnings.length ? `\nWarnings:\n- ${out.warnings.join("\n- ")}` : "";
+          setLog("providerOpLog", `Restarted.\nconfigPath: ${out.configPath || "—"}\nreloadedAt: ${out.reloadedAt || "—"}${warnings}`);
+          await refreshStatus();
+          await refreshProviders();
+          await refreshCredentials();
+          await refreshQuota();
+          await refreshRuntimes();
+        } catch (e) {
+          setLog("providerOpLog", `Restart failed: ${e.message}`);
+        }
       });
       $("refreshProvidersBtn").addEventListener("click", refreshProviders);
+      $("refreshTokensBtn").addEventListener("click", refreshTokens);
       $("newProviderBtn").addEventListener("click", () => {
         $("providerEditorTitle").textContent = "Provider editor (new)";
         $("providerIdInput").value = "";
@@ -914,6 +1410,10 @@
         if (!btn) return;
         const id = btn.getAttribute("data-id");
         const action = btn.getAttribute("data-action");
+        if (action === "test" && id) {
+          await testProviderFromPool(id);
+          return;
+        }
         if (action === "edit") await loadProvider(id);
         if (action === "delete") await deleteProvider(id);
       });
@@ -936,6 +1436,18 @@
       $("saveOauthBrowserBtn").addEventListener("click", saveSettings);
       $("oauthAuthorizeBtn").addEventListener("click", authorizeOauth);
+      $("refreshQuotaBtn").addEventListener("click", refreshQuota);
+      $("quotaTbody").addEventListener("click", (ev) => {
+        const el = ev.target;
+        if (!el || el.tagName !== "BUTTON") return;
+        const action = el.getAttribute("data-action");
+        const key = el.getAttribute("data-key");
+        if (action === "quota-recover") void quotaAction("recover", key);
+        else if (action === "quota-reset") void quotaAction("reset", key);
+        else if (action === "quota-disable") void quotaAction("disable", key);
+      });
+      $("resetQuotaBtn").addEventListener("click", resetQuotaModule);
       $("loadRoutingBtn").addEventListener("click", loadRouting);
       $("saveRoutingBtn").addEventListener("click", saveRouting);
       $("refreshRuntimesBtn").addEventListener("click", refreshRuntimes);
@@ -950,9 +1462,10 @@
         await refreshStatus();
         await refreshProviders();
         await refreshCredentials();
+        await refreshQuota();
+        await refreshRuntimes();
         await loadSettings();
       })();
     </script>
   </body>
 </html>