quotacap 0.0.50 → 0.0.52

package/dist/web/src/components/AdviceDrawer.js

@@ -1,9 +1,10 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
-import { paceBadge, timeLeft } from "./PaceBar.js";
+import { quotaResetsAt, quotaUsedPct, timeLeft } from "./PaceBar.js";
 import { ProviderIcon, providerTint } from "./ProviderIcon.js";
 import { lanesFor } from "./Recommendation.js";
-export function AdviceDrawer({ open, recommendation, providers, asOf, onClose, }) {
+import { CopyButton } from "./CopyButton.js";
+export function AdviceDrawer({ open, recommendation, providers, asOf, onClose, onSelectProvider, }) {
     const dialogRef = useRef(null);
     const previouslyFocused = useRef(null);
     useEffect(() => {
@@ -47,8 +48,10 @@ export function AdviceDrawer({ open, recommendation, providers, asOf, onClose, }
     const pickId = recommendation.use !== "none" ? recommendation.use : useMore[0]?.provider;
     const pick = pickId ? providers.find((p) => p.id === pickId) : undefined;
     const pickName = pick ? pick.displayName : null;
-    const remaining = pick?.advisory?.remaining !== null && pick?.advisory?.remaining !== undefined
-        ? Math.round(pick.advisory.remaining)
+    const remaining = pick?.advisory
+        ? Math.round(pick.advisory.bindingWindow === "monthly"
+            ? pick.advisory.bindingRemaining
+            : pick.advisory.remaining)
         : null;
     // A monthly-bound pick's leftover is unusable until the month resets, so
     // the weekly expiry sentence would restate issue 109; show the reason.
@@ -60,23 +63,31 @@ export function AdviceDrawer({ open, recommendation, providers, asOf, onClose, }
             : pick?.advisory?.wastePct !== null && pick?.advisory?.wastePct !== undefined
                 ? Math.round(pick.advisory.wastePct)
                 : null;
-    const left = pick?.quota ? timeLeft(pick.quota.resetsAt, asOfMs) : null;
+    const pickReset = pick ? quotaResetsAt(pick) : null;
+    const left = pickReset ? timeLeft(pickReset, asOfMs) : null;
     const basis = pick?.advisory?.paceSource === "window-average" ? "window-average pace" : "current 24h pace";
     const othersMore = useMore.filter((a) => a.provider !== pickId);
     const titleId = "advice-drawer-title";
-    return (_jsxs(_Fragment, { children: [_jsx("div", { "data-testid": "advice-scrim", className: "scrim is-open", "aria-hidden": "true", onClick: onClose }), _jsxs("aside", { ref: dialogRef, tabIndex: -1, "data-testid": "advice-drawer", role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, className: "drawer is-open", onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { className: "drawer-head", children: [_jsx("span", { className: "picon rec-picon", "aria-hidden": "true", children: _jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "m12 3-1.9 5.8a2 2 0 0 1-1.3 1.3L3 12l5.8 1.9a2 2 0 0 1 1.3 1.3L12 21l1.9-5.8a2 2 0 0 1 1.3-1.3L21 12l-5.8-1.9a2 2 0 0 1-1.3-1.3z" }) }) }), _jsxs("div", { style: { flex: 1 }, children: [_jsx("h2", { id: titleId, children: "Quota Advice & Pacing" }), _jsx("span", { className: "sub", children: "Actionable recommendations based on quota pacing & reset schedules" })] }), _jsx("button", { className: "drawer-close", type: "button", "aria-label": "Close advice", onClick: onClose, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round", "aria-hidden": "true", children: _jsx("path", { d: "M6 6l12 12M18 6L6 18" }) }) })] }), _jsxs("div", { className: "dsec", children: [_jsx("h3", { children: "Recommended for next session" }), pick && pickName ? (_jsxs("div", { className: "advice-card", style: { marginTop: 8 }, children: [_jsxs("div", { className: "advice-card-main", children: [_jsxs("div", { className: "advice-card-lead", children: [_jsx("span", { className: "sq", style: providerTint(pick.id), children: _jsx(ProviderIcon, { id: pick.id, title: pickName, size: 16 }) }), _jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [_jsx("span", { className: "name", children: pickName }), _jsxs("span", { className: "recommended-badge", children: [_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("path", { d: "m12 3-1.9 5.8a2 2 0 0 1-1.3 1.3L3 12l5.8 1.9a2 2 0 0 1 1.3 1.3L12 21l1.9-5.8a2 2 0 0 1 1.3-1.3L21 12l-5.8-1.9a2 2 0 0 1-1.3-1.3z" }) }), "Recommended"] })] })] }), waste !== null && left && (_jsxs("div", { className: "advice-card-stats", children: [_jsxs("b", { children: [waste, "%"] }), " unused quota expires in ", _jsx("b", { children: left })] }))] }), _jsx("p", { className: "advice-card-body", children: remaining !== null && left && waste !== null ? (_jsxs(_Fragment, { children: [_jsx("b", { children: pickName }), " has ", remaining, "% quota remaining with its reset window closing in ", left, ". At the ", basis, ", ", waste, "% unused quota is projected at reset. Using this subscription now avoids unused quota expiration."] })) : (recommendation.reason) })] })) : (_jsx("p", { className: "advice-card-body", children: recommendation.reason }))] }), _jsxs("div", { className: "dsec", children: [_jsx("h3", { children: "Fleet Pacing Breakdown" }), _jsxs("dl", { className: "dkv", children: [_jsx("dt", { children: "Use more" }), _jsx("dd", { children: othersMore.length
-                                            ? othersMore.map((a, i) => {
+    return (_jsxs(_Fragment, { children: [_jsx("div", { "data-testid": "advice-scrim", className: "scrim is-open", "aria-hidden": "true", onClick: onClose }), _jsxs("aside", { ref: dialogRef, tabIndex: -1, "data-testid": "advice-drawer", role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, className: "drawer is-open", onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { className: "drawer-head", children: [_jsx("span", { className: "picon rec-picon", "aria-hidden": "true", children: _jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "m12 3-1.9 5.8a2 2 0 0 1-1.3 1.3L3 12l5.8 1.9a2 2 0 0 1 1.3 1.3L12 21l1.9-5.8a2 2 0 0 1 1.3-1.3L21 12l-5.8-1.9a2 2 0 0 1-1.3-1.3z" }) }) }), _jsxs("div", { style: { flex: 1 }, children: [_jsx("h2", { id: titleId, children: "Quota Advice & Pacing" }), _jsx("span", { className: "sub", children: "Which quota to burn next, and why" })] }), _jsx("button", { className: "drawer-close", type: "button", "aria-label": "Close advice", onClick: onClose, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round", "aria-hidden": "true", children: _jsx("path", { d: "M6 6l12 12M18 6L6 18" }) }) })] }), _jsxs("div", { className: "dsec", children: [_jsx("h3", { children: "Recommended for next session" }), pick && pickName ? (_jsxs("div", { className: "advice-card", style: { marginTop: 8 }, children: [_jsxs("div", { className: "advice-card-main", children: [_jsxs("div", { className: "advice-card-lead", children: [_jsx("span", { className: "sq", style: providerTint(pick.id), children: _jsx(ProviderIcon, { id: pick.id, title: pickName, size: 16 }) }), _jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [_jsx("span", { className: "name", children: pickName }), _jsxs("span", { className: "recommended-badge", children: [_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("path", { d: "m12 3-1.9 5.8a2 2 0 0 1-1.3 1.3L3 12l5.8 1.9a2 2 0 0 1 1.3 1.3L12 21l1.9-5.8a2 2 0 0 1 1.3-1.3L21 12l-5.8-1.9a2 2 0 0 1-1.3-1.3z" }) }), "Recommended"] })] })] }), waste !== null && left && (_jsxs("div", { className: "advice-card-stats", children: [_jsxs("b", { children: [waste, "%"] }), " unused quota expires in ", _jsx("b", { children: left })] }))] }), _jsx("p", { className: "advice-card-body", children: remaining !== null && left && !monthlyBound ? (_jsxs(_Fragment, { children: [_jsx("b", { children: pickName }), " has ", remaining, "% quota remaining with ", left, " to reset, forecast at the ", basis, "."] })) : (recommendation.reason) }), onSelectProvider && (_jsx("div", { children: _jsxs("button", { type: "button", className: "goto-link", onClick: () => onSelectProvider(pick.id), children: ["View ", pickName, " details \u2192"] }) }))] })) : (_jsx("p", { className: "advice-card-body", children: recommendation.reason }))] }), _jsxs("div", { className: "dsec", children: [_jsx("h3", { children: "Fleet Pacing Breakdown" }), _jsxs("dl", { className: "lane-group", children: [_jsxs("dt", { className: "um", children: [_jsx("span", { "aria-hidden": "true", children: "\u2191" }), " Use more"] }), _jsx("dd", { children: othersMore.length
+                                            ? othersMore.map((a) => {
                                                 const p = providers.find((x) => x.id === a.provider);
-                                                const w = a.wastePct !== null ? `${Math.round(a.wastePct)}% unused` : null;
-                                                const t = p?.quota ? timeLeft(p.quota.resetsAt, asOfMs) : null;
-                                                const bits = [w, t ? `resets in ${t}` : null].filter(Boolean).join(" · ");
-                                                return (_jsxs("span", { children: [i > 0 ? ", " : "", _jsx("b", { children: p?.displayName ?? a.provider }), bits ? ` (${bits})` : ""] }, a.provider));
+                                                const name = p?.displayName ?? a.provider;
+                                                const unused = a.wastePct !== null ? `${Math.round(a.wastePct)}% unused` : null;
+                                                const resetIso = p ? quotaResetsAt(p) : null;
+                                                const t = resetIso ? timeLeft(resetIso, asOfMs) : null;
+                                                const meta = [unused, t ? `resets in ${t}` : null].filter(Boolean).join(" · ");
+                                                return (_jsxs("div", { className: "lane-row", children: [_jsx("span", { className: "nm", children: name }), _jsx("span", { className: "meta", children: meta })] }, a.provider));
                                             })
-                                            : "None" }), _jsx("dt", { children: "Ease off" }), _jsx("dd", { children: easeOff.length
-                                            ? easeOff.map((a, i) => {
+                                            : "None" }), _jsxs("dt", { className: "eo", children: [_jsx("span", { "aria-hidden": "true", children: "\u2193" }), " Ease off"] }), _jsx("dd", { children: easeOff.length
+                                            ? easeOff.map((a) => {
                                                 const p = providers.find((x) => x.id === a.provider);
-                                                const badge = p ? paceBadge(p) : a.urgency;
-                                                return (_jsxs("span", { children: [i > 0 ? ", " : "", _jsx("b", { children: p?.displayName ?? a.provider }), " (", badge, ")"] }, a.provider));
+                                                const name = p?.displayName ?? a.provider;
+                                                const usedRaw = p ? quotaUsedPct(p) : null;
+                                                const used = usedRaw !== null ? `${Math.round(usedRaw)}% used` : null;
+                                                const resetIso2 = p ? quotaResetsAt(p) : null;
+                                                const t = resetIso2 ? timeLeft(resetIso2, asOfMs) : null;
+                                                const meta = [used, t ? `resets in ${t}` : null].filter(Boolean).join(" · ");
+                                                return (_jsxs("div", { className: "lane-row", children: [_jsx("span", { className: "nm", children: name }), _jsx("span", { className: "meta", children: meta })] }, a.provider));
                                             })
-                                            : "None" })] })] }), _jsxs("div", { className: "dsec", children: [_jsx("h3", { children: "CLI Command" }), _jsx("p", { style: { fontSize: "var(--t-2)", color: "var(--ink-soft)", marginBottom: 8 }, children: "Equivalent terminal command:" }), _jsx("pre", { className: "advice-cli", children: _jsx("code", { children: "$ quotacap advise" }) })] })] })] }));
+                                            : "None" })] })] }), _jsxs("div", { className: "dsec", children: [_jsx("h3", { children: "CLI Command" }), _jsxs("div", { className: "cli-wrap", children: [_jsx("pre", { className: "advice-cli", children: _jsx("code", { children: "$ quotacap advise" }) }), _jsx(CopyButton, { text: "quotacap advise" })] })] })] })] }));
 }

package/dist/web/src/components/BurnDown.d.ts

@@ -0,0 +1,37 @@
+import React from "react";
+import type { ProviderView } from "../state.js";
+export type BurnTone = "cap" | "behind" | "ontrack";
+/** Chart tone from the shared badge: cap risk paints cap, behind-pace paints
+ * behind, and on-track/ahead share the ontrack tone on the ahead token. */
+export declare function burnTone(provider: ProviderView): BurnTone;
+export interface BurnGeometry {
+    usedPct: number;
+    elapsedPct: number;
+    projXPct: number;
+    projYPct: number;
+    exhaustsBeforeReset: boolean;
+    tone: BurnTone;
+}
+/**
+ * Burn-down geometry in quota-window data space (x = elapsed %, y = used %).
+ * Actual runs (0,0) to (elapsed, used); projection ends at 100% when
+ * exhaustion precedes the quota reset, else at (100, used + rate × days
+ * left). Weekly projects at the server burn rate; monthly projects at the
+ * monthly window average (no monthly burn history is tracked). Null when
+ * the quota pace is unknown.
+ */
+export declare function burnGeometry(provider: ProviderView, asOfMs: number): BurnGeometry | null;
+export declare function burnAriaLabel(provider: ProviderView, geo: BurnGeometry): string;
+/**
+ * Pace section: burn-down SVG, the shared four-cell pace grid, and the
+ * basis line. Returns null (omitting the whole section) when pace is
+ * unknown, burnRate or elapsed is missing, or the provider is excluded.
+ * The drawer may pass the basis line derived from paceBasis; standalone
+ * use falls back to the same basis wording from period timestamps and
+ * PACE_TIPS.
+ */
+export declare function BurnDown({ provider, asOf, basis, }: {
+    provider: ProviderView;
+    asOf: string;
+    basis?: string;
+}): React.JSX.Element | null;

package/dist/web/src/components/BurnDown.js

@@ -0,0 +1,182 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PACE_TIPS, PaceStats, barGeometry, isMonthlyBound, paceBadge, paceFigures, quotaAvgPace, quotaResetsAt, quotaWindowName, quotaWindowStartIso, } from "./PaceBar.js";
+/** Chart tone from the shared badge: cap risk paints cap, behind-pace paints
+ * behind, and on-track/ahead share the ontrack tone on the ahead token. */
+export function burnTone(provider) {
+    const badge = paceBadge(provider);
+    switch (badge) {
+        case "Cap risk":
+        case "Monthly exhausted":
+        case "Watch":
+            return "cap";
+        case "Behind pace":
+            return "behind";
+        default:
+            return "ontrack";
+    }
+}
+/**
+ * Burn-down geometry in quota-window data space (x = elapsed %, y = used %).
+ * Actual runs (0,0) to (elapsed, used); projection ends at 100% when
+ * exhaustion precedes the quota reset, else at (100, used + rate × days
+ * left). Weekly projects at the server burn rate; monthly projects at the
+ * monthly window average (no monthly burn history is tracked). Null when
+ * the quota pace is unknown.
+ */
+export function burnGeometry(provider, asOfMs) {
+    if (!provider.quota || !provider.advisory)
+        return null;
+    if (provider.exclusionReason !== null)
+        return null;
+    const advisory = provider.advisory;
+    const monthly = isMonthlyBound(provider);
+    let burnRate;
+    let daysLeft;
+    let daysToExhaust;
+    if (monthly) {
+        burnRate = quotaAvgPace(provider, asOfMs);
+        daysLeft = advisory.bindingDaysLeft;
+        daysToExhaust =
+            burnRate !== null && burnRate > 0 ? advisory.bindingRemaining / burnRate : Infinity;
+    }
+    else {
+        if (advisory.paceSource === "unknown")
+            return null;
+        burnRate = advisory.burnRate;
+        daysLeft = advisory.daysLeft;
+        daysToExhaust = advisory.daysToExhaust;
+    }
+    if (burnRate === null || !Number.isFinite(burnRate))
+        return null;
+    const { usedPct, elapsedPct } = barGeometry(provider, asOfMs);
+    if (elapsedPct === null || !Number.isFinite(elapsedPct))
+        return null;
+    let projXPct;
+    let projYPct;
+    let exhaustsBeforeReset = false;
+    if (daysToExhaust !== null &&
+        Number.isFinite(daysToExhaust) &&
+        daysToExhaust < daysLeft) {
+        exhaustsBeforeReset = true;
+        projYPct = 100;
+        if (usedPct >= 100) {
+            projXPct = elapsedPct;
+        }
+        else {
+            const startIso = quotaWindowStartIso(provider);
+            const resetIso = quotaResetsAt(provider);
+            const startMs = startIso ? Date.parse(startIso) : NaN;
+            const resetMs = resetIso ? Date.parse(resetIso) : NaN;
+            if (Number.isFinite(startMs) &&
+                Number.isFinite(resetMs) &&
+                resetMs > startMs &&
+                Number.isFinite(asOfMs)) {
+                const totalDays = (resetMs - startMs) / 86_400_000;
+                const elapsedDays = (asOfMs - startMs) / 86_400_000;
+                projXPct = ((elapsedDays + daysToExhaust) / totalDays) * 100;
+            }
+            else if (elapsedPct < 100 && daysLeft > 0) {
+                projXPct = elapsedPct + (daysToExhaust * (100 - elapsedPct)) / daysLeft;
+            }
+            else {
+                projXPct = 100;
+            }
+            projXPct = Math.min(100, Math.max(elapsedPct, projXPct));
+        }
+    }
+    else {
+        projXPct = 100;
+        projYPct = usedPct + burnRate * daysLeft;
+        if (!Number.isFinite(projYPct))
+            projYPct = usedPct;
+        projYPct = Math.min(100, Math.max(usedPct, projYPct));
+    }
+    return {
+        usedPct,
+        elapsedPct,
+        projXPct,
+        projYPct,
+        exhaustsBeforeReset,
+        tone: burnTone(provider),
+    };
+}
+export function burnAriaLabel(provider, geo) {
+    const used = Math.round(geo.usedPct);
+    const elapsed = Math.round(geo.elapsedPct);
+    const window = `${quotaWindowName(provider).toLowerCase()} quota window`;
+    if (geo.exhaustsBeforeReset) {
+        return `Burn-down: ${used} percent used at ${elapsed} percent elapsed, forecast exhausts the quota before reset (${window})`;
+    }
+    const lands = Math.round(geo.projYPct);
+    const waste = Math.round(100 - geo.projYPct);
+    if (waste > 0) {
+        return `Burn-down: ${used} percent used at ${elapsed} percent elapsed, forecast lands at ${lands} percent with ${waste} percent waste (${window})`;
+    }
+    return `Burn-down: ${used} percent used at ${elapsed} percent elapsed, forecast lands at ${lands} percent (${window})`;
+}
+function fallbackBasis(provider, asOfMs) {
+    const advisory = provider.advisory;
+    if (!advisory)
+        return "No current reading";
+    if (!isMonthlyBound(provider) && advisory.paceSource === "unknown")
+        return "No current reading";
+    const { avg, recent } = paceFigures(advisory);
+    if (!isMonthlyBound(provider) && avg === null && recent !== null)
+        return PACE_TIPS.recent;
+    const startIso = quotaWindowStartIso(provider);
+    const start = startIso ? Date.parse(startIso) : NaN;
+    if (Number.isFinite(start) && Number.isFinite(asOfMs) && asOfMs > start) {
+        const days = (asOfMs - start) / 86_400_000;
+        if (days >= 0.1)
+            return `averaged over ${days.toFixed(1)} days of this window`;
+    }
+    if (provider.evidence.includes("measured") || advisory.burnMeasured)
+        return "Measured";
+    if (advisory.paceSource === "window-average" || provider.evidence.includes("window-average")) {
+        return "Window avg";
+    }
+    return PACE_TIPS.avg;
+}
+const PLOT = { left: 48, right: 388, top: 28, bottom: 142 };
+const PLOT_MID_X = (PLOT.left + PLOT.right) / 2;
+const PLOT_MID_Y = (PLOT.top + PLOT.bottom) / 2;
+function sx(pct) {
+    return PLOT.left + (pct / 100) * (PLOT.right - PLOT.left);
+}
+function sy(pct) {
+    return PLOT.bottom - (pct / 100) * (PLOT.bottom - PLOT.top);
+}
+function n(v) {
+    return String(Math.round(v * 10) / 10);
+}
+/**
+ * Pace section: burn-down SVG, the shared four-cell pace grid, and the
+ * basis line. Returns null (omitting the whole section) when pace is
+ * unknown, burnRate or elapsed is missing, or the provider is excluded.
+ * The drawer may pass the basis line derived from paceBasis; standalone
+ * use falls back to the same basis wording from period timestamps and
+ * PACE_TIPS.
+ */
+export function BurnDown({ provider, asOf, basis, }) {
+    const asOfMs = Date.parse(asOf);
+    const geo = burnGeometry(provider, asOfMs);
+    if (!geo)
+        return null;
+    const basisLine = basis ?? fallbackBasis(provider, asOfMs);
+    const tone = geo.tone;
+    const nowX = sx(geo.elapsedPct);
+    const nowY = sy(geo.usedPct);
+    const projX = sx(geo.projXPct);
+    const projY = sy(geo.projYPct);
+    const showProjDot = Math.hypot(projX - nowX, projY - nowY) >= 3;
+    const label = burnAriaLabel(provider, geo);
+    const windowName = quotaWindowName(provider);
+    const elapsedLabel = `${Math.round(geo.elapsedPct)}% elapsed`;
+    // Center the now readout in the top callout band above PLOT.top, clamped to plot edges.
+    const nowTextX = Math.min(PLOT.right - 46, Math.max(PLOT.left + 46, nowX));
+    // Place "ideal pace" on whichever half of the diagonal is clear of the vertical now-line.
+    const idealPct = geo.elapsedPct > 52 ? 35 : 66;
+    const idealX = sx(idealPct);
+    const idealY = sy(idealPct) - 5;
+    return (_jsxs("section", { className: "dsec", "aria-label": "Pace", "data-testid": "burn-down-section", children: [_jsxs("div", { className: "burn-head", children: [_jsx("h3", { children: "Pace" }), _jsxs("span", { className: "burn-win", children: [windowName, " quota window"] })] }), _jsxs("svg", { className: "burn", viewBox: "0 0 400 184", role: "img", "aria-label": label, "data-testid": "burn-down", children: [_jsx("text", { x: 11, y: PLOT_MID_Y, className: "axis-y", transform: `rotate(-90 11 ${PLOT_MID_Y})`, children: "Quota used (%)" }), _jsx("line", { x1: PLOT.left, y1: PLOT.bottom, x2: PLOT.right, y2: PLOT.bottom, className: "grid" }), _jsx("line", { x1: PLOT.left, y1: PLOT_MID_Y, x2: PLOT.right, y2: PLOT_MID_Y, className: "grid" }), _jsx("line", { x1: PLOT.left, y1: PLOT.top, x2: PLOT.right, y2: PLOT.top, className: "grid" }), _jsx("line", { x1: PLOT.left, y1: PLOT.bottom, x2: PLOT.left, y2: PLOT.bottom + 4, className: "grid-tick" }), _jsx("line", { x1: PLOT_MID_X, y1: PLOT.bottom, x2: PLOT_MID_X, y2: PLOT.bottom + 4, className: "grid-tick" }), _jsx("line", { x1: PLOT.right, y1: PLOT.bottom, x2: PLOT.right, y2: PLOT.bottom + 4, className: "grid-tick" }), _jsx("text", { x: 40, y: PLOT.bottom + 3.5, className: "ylab", children: "0%" }), _jsx("text", { x: 40, y: PLOT_MID_Y + 3.5, className: "ylab", children: "50%" }), _jsx("text", { x: 40, y: PLOT.top + 3.5, className: "ylab", children: "100%" }), _jsx("line", { x1: PLOT.left, y1: PLOT.bottom, x2: PLOT.right, y2: PLOT.top, className: "ideal" }), _jsx("text", { x: n(idealX), y: n(idealY), className: "ideal-lab", textAnchor: "middle", transform: `rotate(-18.5 ${n(idealX)} ${n(idealY)})`, children: "ideal pace" }), _jsx("line", { x1: n(nowX), y1: PLOT.top - 8, x2: n(nowX), y2: PLOT.bottom, className: "now" }), _jsxs("text", { x: n(nowTextX), y: 12, className: "now-lab", textAnchor: "middle", children: ["now \u00B7 ", elapsedLabel] }), _jsx("line", { x1: PLOT.left, y1: PLOT.bottom, x2: n(nowX), y2: n(nowY), className: `actual ${tone}`, "data-testid": "burn-actual" }), _jsx("line", { x1: n(nowX), y1: n(nowY), x2: n(projX), y2: n(projY), className: `proj ${tone}`, "data-testid": "burn-proj", "data-proj-x": n(geo.projXPct), "data-proj-y": n(geo.projYPct) }), _jsx("circle", { cx: n(nowX), cy: n(nowY), r: 4.5, className: `dot ${tone}` }), showProjDot && (_jsx("circle", { cx: n(projX), cy: n(projY), r: 3.5, className: `dot ${tone} hollow` })), _jsx("text", { x: PLOT.left, y: 160, className: "xlab", children: "start \u00B7 0%" }), _jsx("text", { x: PLOT_MID_X, y: 160, className: "xlab mid", children: "50%" }), _jsx("text", { x: PLOT.right, y: 160, className: "xlab end", children: "quota reset \u00B7 100%" }), _jsx("text", { x: PLOT_MID_X, y: 178, className: "axis-x", children: "Time elapsed in window (%)" })] }), _jsxs("p", { className: "burn-legend", children: [_jsx("span", { className: "legend-label", children: "Legend" }), _jsxs("span", { className: "legend-item", children: [_jsx("span", { className: `burn-swatch-dot ${tone}`, "aria-hidden": "true" }), "Dot is now"] }), _jsxs("span", { className: "legend-item", children: [_jsx("span", { className: `burn-swatch-proj ${tone}`, "aria-hidden": "true" }), "Dashed is forecast"] })] }), _jsx(PaceStats, { provider: provider, asOf: asOf }), _jsx("p", { className: "pacecap", children: _jsx("span", { className: "basis", children: basisLine }) })] }));
+}

package/dist/web/src/components/ClosedWeeks.d.ts

@@ -7,10 +7,11 @@ export declare function closeDateLabel(resetsAt: string | null): string | null;
 export declare function closeIsStale(c: WindowCloseView): boolean;
 export declare function closeSampleStamp(sampledAt: string): string | null;
 export declare function closeResetStamp(resetsAt: string): string | null;
-/** Four-cell strip of closed weekly windows, oldest left. Fill is used at
- * close, the hatch is the stored leftover. One cell per real close, never a
- * placeholder. Stale samples name their reading on the cell and under the
- * strip. */
-export declare function ClosedWeeks({ closes }: {
+/** Bar chart of closed quota windows, oldest left. The solid segment is
+ * used at close, the hatched cap is the stored leftover; a cap under 3% is
+ * label-only. One bar per real close, never a placeholder. Stale samples
+ * name their earliness on the label; exact stamps stay in the tooltip. */
+export declare function ClosedWeeks({ closes, windowName, }: {
     closes: WindowCloseView[];
+    windowName?: "Weekly" | "Monthly";
 }): React.JSX.Element | null;

package/dist/web/src/components/ClosedWeeks.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { format } from "date-fns";
 const STALE_EARLY_MS = 15 * 60 * 1000;
 export function lastClose(provider) {
@@ -34,7 +34,7 @@ export function closeResetStamp(resetsAt) {
         return null;
     return format(new Date(ms), "d MMM HH:mm");
 }
-/** One floored duration for both the compact cell line and the strip note. */
+/** One floored duration for both the compact label and the word form. */
 function earlyParts(ms) {
     if (ms < 60_000)
         return { n: Math.max(1, Math.floor(ms / 1000)), unit: "s" };
@@ -60,43 +60,31 @@ function earlyWords(ms) {
     const { n, unit } = earlyParts(ms);
     return `${n} ${EARLY_UNIT_WORDS[unit]}${n === 1 ? "" : "s"}`;
 }
-/** Four-cell strip of closed weekly windows, oldest left. Fill is used at
- * close, the hatch is the stored leftover. One cell per real close, never a
- * placeholder. Stale samples name their reading on the cell and under the
- * strip. */
-export function ClosedWeeks({ closes }) {
+/** Bar chart of closed quota windows, oldest left. The solid segment is
+ * used at close, the hatched cap is the stored leftover; a cap under 3% is
+ * label-only. One bar per real close, never a placeholder. Stale samples
+ * name their earliness on the label; exact stamps stay in the tooltip. */
+export function ClosedWeeks({ closes, windowName, }) {
     if (!Array.isArray(closes) || closes.length === 0)
         return null;
     const cells = [...closes].reverse();
     const labels = cells.map((c) => closeDateLabel(c.resetsAt));
-    return (_jsxs("section", { className: "dsec", "aria-label": "Closed weeks", children: [_jsx("h3", { children: "Closed weeks" }), _jsx("div", { className: "weeks", "data-testid": "closed-weeks", children: cells.map((c, i) => {
-                    const used = Math.min(100, Math.max(0, c.usedPct));
-                    const leftover = Math.min(100, Math.max(0, c.leftoverPct));
-                    const stale = closeIsStale(c);
-                    const sampled = closeSampleStamp(c.sampledAt);
-                    const reset = c.resetsAt ? closeResetStamp(c.resetsAt) : null;
-                    const earlyMs = c.resetsAt ? Date.parse(c.resetsAt) - Date.parse(c.sampledAt) : NaN;
-                    const est = c.resetsAtEstimated ? " (est.)" : "";
-                    const title = [
-                        `${c.usedPct}% used`,
-                        `${c.leftoverPct}% leftover`,
-                        reset ? `reset ${reset}${est}` : "reset unknown",
-                        stale && sampled ? `last reading ${sampled}` : null,
-                    ]
-                        .filter(Boolean)
-                        .join(", ");
-                    return (_jsxs("div", { className: "week", title: title, children: [_jsxs("div", { className: "track", role: "img", "aria-label": title, children: [_jsx("div", { className: "fill", style: { width: `${used}%` } }), leftover > 0 && (_jsx("div", { className: "band band-waste", style: { left: `${used}%`, width: `${leftover}%` } }))] }), _jsxs("div", { className: "lab", children: [_jsx("span", { children: labels[i] ?? "date unknown" }), _jsxs("b", { children: [c.leftoverPct, "% leftover", est] }), stale && Number.isFinite(earlyMs) && earlyMs > 0 && (_jsxs("span", { className: "stale-note", children: ["read ", earlyCompact(earlyMs), " early"] }))] })] }, `${c.detectedAt}-${c.sampledAt}`));
-                }) }), cells.map((c, i) => {
-                const resetMs = c.resetsAt ? Date.parse(c.resetsAt) : NaN;
-                const sampledMs = Date.parse(c.sampledAt);
-                const sampled = closeSampleStamp(c.sampledAt);
-                if (!closeIsStale(c) ||
-                    !sampled ||
-                    !Number.isFinite(resetMs) ||
-                    !Number.isFinite(sampledMs) ||
-                    resetMs <= sampledMs) {
-                    return null;
-                }
-                return (_jsxs("p", { className: "cell-s stale-note", children: [labels[i] ?? "Date unknown", " leftover is from the ", sampled, " reading, ", earlyWords(resetMs - sampledMs), " ", "before that reset."] }, `note-${c.detectedAt}-${c.sampledAt}`));
-            })] }));
+    return (_jsxs("section", { className: "dsec", "aria-label": "History", children: [windowName ? (_jsxs("div", { className: "burn-head", children: [_jsx("h3", { children: "History" }), _jsxs("span", { className: "burn-win", children: [windowName, " quota window"] })] })) : (_jsx("h3", { children: "History" })), _jsxs("div", { className: "hchart", "data-testid": "closed-weeks", children: [_jsx("div", { className: "hgrid", children: _jsx("span", { children: "100%" }) }), cells.map((c, i) => {
+                        const used = Math.min(100, Math.max(0, c.usedPct));
+                        const leftover = Math.min(100, Math.max(0, c.leftoverPct));
+                        const stale = closeIsStale(c);
+                        const sampled = closeSampleStamp(c.sampledAt);
+                        const reset = c.resetsAt ? closeResetStamp(c.resetsAt) : null;
+                        const earlyMs = c.resetsAt ? Date.parse(c.resetsAt) - Date.parse(c.sampledAt) : NaN;
+                        const est = c.resetsAtEstimated ? " (est.)" : "";
+                        const title = [
+                            `${c.usedPct}% used`,
+                            `${c.leftoverPct}% leftover`,
+                            reset ? `reset ${reset}${est}` : "reset unknown",
+                            stale && sampled ? `last reading ${sampled}` : null,
+                        ]
+                            .filter(Boolean)
+                            .join(", ");
+                        return (_jsxs("div", { className: "hcol", title: title, children: [_jsx("div", { className: "hbars", children: _jsxs("div", { className: "hbar", children: [leftover >= 3 && _jsx("span", { className: "hatch", style: { height: `${leftover}%` } }), _jsx("span", { className: "solid", style: { height: `${used}%` } })] }) }), _jsxs("div", { className: "hlab", children: [labels[i] ?? "date unknown", _jsxs("b", { children: [c.leftoverPct, "% leftover", est] }), stale && Number.isFinite(earlyMs) && earlyMs > 0 && _jsxs(_Fragment, { children: ["read ", earlyCompact(earlyMs), " early"] })] })] }, `${c.detectedAt}-${c.sampledAt}`));
+                    })] })] }));
 }

package/dist/web/src/components/CopyButton.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+export declare function CopyButton({ text }: {
+    text: string;
+}): React.JSX.Element;

package/dist/web/src/components/CopyButton.js

@@ -0,0 +1,27 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+export function CopyButton({ text }) {
+    const [copied, setCopied] = useState(false);
+    const timer = useRef(null);
+    useEffect(() => {
+        return () => {
+            if (timer.current)
+                clearTimeout(timer.current);
+        };
+    }, []);
+    const handleCopy = async () => {
+        try {
+            if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
+                await navigator.clipboard.writeText(text);
+            }
+        }
+        catch {
+            // Clipboard may be unavailable; still give feedback like the mock.
+        }
+        setCopied(true);
+        if (timer.current)
+            clearTimeout(timer.current);
+        timer.current = setTimeout(() => setCopied(false), 1500);
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "btn btn-quiet btn-sm", onClick: handleCopy, children: copied ? "Copied" : "Copy" }), _jsx("span", { className: "sr-live", role: "status", "aria-live": "polite", children: copied ? "Copied to clipboard." : "" })] }));
+}

package/dist/web/src/components/ErrorBoundary.d.ts

@@ -0,0 +1,37 @@
+import React from "react";
+interface BoundaryProps {
+    fallback: React.ReactNode;
+    /** A changed key clears a shown fallback and retries the render. */
+    resetKey?: unknown;
+    children?: React.ReactNode;
+}
+/**
+ * A render crash inside shows fallback UI; the rest of the dashboard
+ * survives. Without this, one bad provider unmounts the whole tree into
+ * a blank page.
+ */
+export declare class ErrorBoundary extends React.Component<BoundaryProps, {
+    error: unknown;
+}> {
+    state: {
+        error: unknown;
+    };
+    static getDerivedStateFromError(error: unknown): {
+        error: unknown;
+    };
+    componentDidUpdate(prevProps: BoundaryProps): void;
+    render(): React.ReactNode;
+}
+export declare function CardErrorFallback({ id, name }: {
+    id: string;
+    name: string;
+}): React.JSX.Element;
+export declare function RowErrorFallback({ id, name }: {
+    id: string;
+    name: string;
+}): React.JSX.Element;
+export declare function DrawerErrorFallback({ name, onClose }: {
+    name: string;
+    onClose: () => void;
+}): React.JSX.Element;
+export {};

package/dist/web/src/components/ErrorBoundary.js

@@ -0,0 +1,32 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+/**
+ * A render crash inside shows fallback UI; the rest of the dashboard
+ * survives. Without this, one bad provider unmounts the whole tree into
+ * a blank page.
+ */
+export class ErrorBoundary extends React.Component {
+    state = { error: null };
+    static getDerivedStateFromError(error) {
+        return { error };
+    }
+    componentDidUpdate(prevProps) {
+        if (prevProps.resetKey !== this.props.resetKey && this.state.error !== null) {
+            this.setState({ error: null });
+        }
+    }
+    render() {
+        if (this.state.error !== null)
+            return this.props.fallback;
+        return this.props.children;
+    }
+}
+export function CardErrorFallback({ id, name }) {
+    return (_jsxs("article", { "data-testid": `provider-card-${id}-error`, className: "pcard", role: "alert", children: [_jsx("div", { className: "pcard-head", children: _jsx("div", { className: "who", children: _jsx("b", { children: name }) }) }), _jsx("div", { className: "pcard-body", children: _jsx("p", { className: "cell-s", children: "Couldn't show this subscription." }) })] }));
+}
+export function RowErrorFallback({ id, name }) {
+    return (_jsxs("div", { "data-testid": `provider-row-${id}-error`, className: "lrow", role: "alert", children: [_jsx("div", { className: "prov", "data-label": "Provider", children: _jsx("span", { children: _jsx("span", { className: "nm", children: name }) }) }), _jsx("div", { "data-label": "Used vs elapsed", children: _jsx("span", { className: "cell-s", children: "Couldn't show this subscription." }) })] }));
+}
+export function DrawerErrorFallback({ name, onClose }) {
+    return (_jsxs(_Fragment, { children: [_jsx("div", { "data-testid": "drawer-scrim", className: "scrim is-open", "aria-hidden": "true", onClick: onClose }), _jsxs("aside", { "data-testid": "provider-drawer-error", role: "alert", className: "drawer is-open", children: [_jsxs("div", { className: "drawer-head", children: [_jsx("div", { style: { flex: 1, minWidth: 0 }, children: _jsx("h2", { children: name }) }), _jsx("button", { className: "drawer-close", type: "button", "aria-label": "Close provider details", onClick: onClose, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round", "aria-hidden": "true", children: _jsx("path", { d: "M6 6l12 12M18 6L6 18" }) }) })] }), _jsx("section", { className: "dsec", "aria-label": "Details unavailable", children: _jsx("p", { className: "cell-s", children: "Couldn't show these details." }) })] })] }));
+}

package/dist/web/src/components/FaultBanner.d.ts

@@ -15,10 +15,11 @@ export declare function authInstruction(name: string, attempt: {
  * a re-poll. Service start/install is covered by the service-unavailable
  * panel when the daemon itself is down.
  */
-export declare function repairFor(provider: ProviderView): Repair;
-export declare function FaultBanner({ providers, onRepoll, repolling, polling, }: {
+export declare function repairFor(provider: ProviderView, opencodeLoginCommand?: string | null): Repair;
+export declare function FaultBanner({ providers, onRepoll, repolling, polling, opencodeLoginCommand, }: {
     providers: ProviderView[];
     onRepoll: () => void;
     repolling: boolean;
     polling?: "idle" | "in-progress" | "degraded" | string;
+    opencodeLoginCommand?: string | null;
 }): React.JSX.Element | null;

package/dist/web/src/components/FaultBanner.js

@@ -16,12 +16,15 @@ export function authInstruction(name, attempt) {
  * a re-poll. Service start/install is covered by the service-unavailable
  * panel when the daemon itself is down.
  */
-export function repairFor(provider) {
+export function repairFor(provider, opencodeLoginCommand) {
     const name = provider.displayName;
     if (provider.lastAttempt?.failureCategory === "auth") {
         if (provider.id === "opencode-go") {
+            const run = opencodeLoginCommand
+                ? `Run \`${opencodeLoginCommand}\`, then re-poll.`
+                : "Run the login command for your OpenCode CLI version — v2 `opencode auth login opencode` or v1 `opencode console login` — then re-poll.";
             return {
-                text: "Run `opencode auth login -p opencode-go`, then re-poll. QuotaCap reads that key only because you enabled OpenCode Go — `quotacap providers disable opencode-go` stops it.",
+                text: `${run} QuotaCap reads that key only because you enabled OpenCode Go — \`quotacap providers disable opencode-go\` stops it.`,
             };
         }
         return { text: authInstruction(name, provider.lastAttempt) };
@@ -65,7 +68,7 @@ function bannerVerb(provider) {
             return "needs attention";
     }
 }
-export function FaultBanner({ providers, onRepoll, repolling, polling, }) {
+export function FaultBanner({ providers, onRepoll, repolling, polling, opencodeLoginCommand, }) {
     const isPolling = repolling || polling === "in-progress";
     const faulted = providers.filter((p) => {
         if (!p.enabled || p.exclusionReason === null)
@@ -79,7 +82,7 @@ export function FaultBanner({ providers, onRepoll, repolling, polling, }) {
         return null;
     return (_jsx("div", { children: faulted.map((p) => {
             const age = ageDuration(p.ageMs);
-            const repair = repairFor(p);
+            const repair = repairFor(p, opencodeLoginCommand);
             return (_jsxs("div", { "data-testid": "fault-banner", role: "alert", className: "alert", children: [_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.3", strokeLinecap: "round", "aria-hidden": "true", children: [_jsx("path", { d: "M12 8v5" }), _jsx("path", { d: "M12 16.5v.01" }), _jsx("circle", { cx: "12", cy: "12", r: "9" })] }), _jsxs("span", { children: [_jsxs("strong", { children: [p.displayName, " ", bannerVerb(p), "."] }), " ", age ? `Last read ${age} ago; ` : "", "excluded from ranking. ", repair.text] }), _jsx("button", { type: "button", className: "linkbtn", onClick: onRepoll, disabled: repolling, style: { flex: "none", marginLeft: "auto" }, children: repolling
                             ? "Polling…"
                             : (p.lastAttempt?.failureCategory === "auth"

package/dist/web/src/components/OpencodeGoBanner.d.ts

@@ -1,12 +1,14 @@
 import React from "react";
 import type { ProviderView, RuntimeView } from "../state.js";
+export declare function openCodeGoConsentCopy(loginCommand?: string | null): string;
 export declare const OPENCODE_GO_CONSENT_COPY: string;
 export declare function showOpenCodeGoBanner(runtime: Pick<RuntimeView, "detectedProviders"> | undefined, providers: Array<Pick<ProviderView, "id" | "enabled">>, suppressed: boolean): boolean;
 export declare function OpencodeGoBanner({ onEnable }: {
     onEnable: () => void;
 }): React.JSX.Element;
-export declare function ConsentModal({ onConfirm, onCancel, busy, }: {
+export declare function ConsentModal({ onConfirm, onCancel, busy, loginCommand, }: {
     onConfirm: () => void;
     onCancel: () => void;
     busy?: boolean;
+    loginCommand?: string | null;
 }): React.JSX.Element;