status page usage

web/dist/status.js

@@ -148,9 +148,27 @@ function rateLimitCard(vendor, info) {
     const tone = statusText === "allowed" ? "ok" : statusText === "rejected" ? "danger" : "warn";
     const windows = (unifiedWindows ?? {});
     return h("div", { class: "card rate-limit" }, h("header", {}, h("span", { class: "vendor" }, vendor), h("span", { class: `rl-status ${tone}` }, statusText), rateLimitType !== undefined && h("span", {}, String(rateLimitType)), typeof resetsAt === "number" && h("span", { class: "resets" }, "resets ", resetText(resetsAt))), Object.keys(windows).length > 0 &&
-        h("table", { class: "rl-windows" }, h("tr", {}, h("th", {}, "Window"), h("th", {}, "Used"), h("th", {}, "Resets")), ...Object.entries(windows).map(([name, w]) => h("tr", {}, h("td", {}, name), h("td", { class: utilizationClass(w.utilization) }, w.utilization === undefined ? "—" : `${Math.round(w.utilization * 100)}%`), h("td", {}, w.resetsAt === undefined ? "—" : resetText(w.resetsAt))))), Object.keys(rest).length > 0 &&
+        h("table", { class: "rl-windows" }, h("tr", {}, h("th", {}, "Window"), h("th", {}, "Used"), h("th", {}, "Elapsed"), h("th", { class: "rl-pace-col" }, "Pace"), h("th", {}, "Resets")), ...Object.entries(windows).map(([name, w]) => {
+            const elapsed = elapsedFraction(w);
+            return h("tr", {}, h("td", {}, name), h("td", { class: utilizationClass(w.utilization) }, w.utilization === undefined ? "—" : `${Math.round(w.utilization * 100)}%`), h("td", {}, elapsed === undefined ? "—" : `${Math.round(elapsed * 100)}%`), h("td", { class: "rl-pace-col" }, paceBar(w.utilization, elapsed)), h("td", {}, w.resetsAt === undefined ? "—" : resetText(w.resetsAt)));
+        })), Object.keys(rest).length > 0 &&
         h("dl", { class: "kv" }, ...Object.entries(rest).flatMap(([k, v]) => [h("dt", {}, k), h("dd", {}, typeof v === "object" ? JSON.stringify(v) : String(v))])));
 }
+function elapsedFraction(w) {
+    if (w.resetsAt === undefined || w.windowMins === undefined) {
+        return undefined;
+    }
+    const remaining = w.resetsAt * 1000 - Date.now();
+    return Math.min(1, Math.max(0, 1 - remaining / (w.windowMins * 60000)));
+}
+function paceBar(used, elapsed) {
+    if (used === undefined || elapsed === undefined) {
+        return "—";
+    }
+    const diff = Math.round((used - elapsed) * 100);
+    const title = diff > 0 ? `${diff} points ahead of an even pace` : diff < 0 ? `${-diff} points behind an even pace` : "on an even pace";
+    return h("div", { class: `rl-pace ${used > elapsed ? "ahead" : "behind"}`, title }, h("div", { class: "rl-pace-used", style: `width: ${Math.min(1, used) * 100}%` }), h("div", { class: "rl-pace-now", style: `left: ${elapsed * 100}%` }));
+}
 function utilizationClass(u) {
     if (u === undefined) {
         return "";