status page usage

web/src/status.ts

@@ -215,7 +215,7 @@ function rateLimitCard(vendor: string, info: Record<string, unknown>): HTMLEleme
   const { status, rateLimitType, resetsAt, unifiedWindows, ...rest } = info;
   const statusText = String(status ?? "unknown");
   const tone = statusText === "allowed" ? "ok" : statusText === "rejected" ? "danger" : "warn";
-  const windows = (unifiedWindows ?? {}) as Record<string, { utilization?: number; resetsAt?: number }>;
+  const windows = (unifiedWindows ?? {}) as Record<string, RateWindow>;
 
   return h(
     "div",
@@ -232,16 +232,19 @@ function rateLimitCard(vendor: string, info: Record<string, unknown>): HTMLEleme
       h(
         "table",
         { class: "rl-windows" },
-        h("tr", {}, h("th", {}, "Window"), h("th", {}, "Used"), h("th", {}, "Resets")),
-        ...Object.entries(windows).map(([name, w]) =>
-          h(
+        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(
@@ -252,6 +255,30 @@ function rateLimitCard(vendor: string, info: Record<string, unknown>): HTMLEleme
   );
 }
 
+type RateWindow = { utilization?: number; resetsAt?: number; windowMins?: number };
+
+function elapsedFraction(w: RateWindow): number | undefined {
+  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: number | undefined, elapsed: number | undefined): HTMLElement | string {
+  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: number | undefined): string {
   if (u === undefined) {
     return "";