fix(gui): identify partial quota windows

luvs01 · luvs01 · commit e43fce7fddc4 · 2026-08-02T17:48:37.000+09:00
diff --git a/gui/src/components/QuotaBars.tsx b/gui/src/components/QuotaBars.tsx
@@ -7,7 +7,15 @@ import { type AccountQuota, normalizeQuotaForPlan } from "../codex-quota-utils";
 /* Helpers are co-located with QuotaBars for overview sorting / stacked layout. */
 /* eslint-disable react-refresh/only-export-components */
 
-export type QuotaBarRow = { label: string; limitLabel: string; percent: number; resetAt?: number };
+export type QuotaWindowKey = "fiveHour" | "weekly" | "monthly";
+export type QuotaBarRow = {
+  windowKey?: QuotaWindowKey;
+  customLabel?: string;
+  label: string;
+  limitLabel: string;
+  percent: number;
+  resetAt?: number;
+};
 
 /**
  * Window ordering is computed from RAW wire identities BEFORE localization
@@ -43,6 +51,7 @@ export function buildQuotaRows(quota: AccountQuota | null, plan: string | null |
     ranked.push({
       rank: 0,
       row: {
+        windowKey: "fiveHour",
         label: t("codexAuth.fiveHour"),
         limitLabel: t("quota.fiveHourLimit"),
         percent: displayQuota.fiveHourPercent,
@@ -54,6 +63,7 @@ export function buildQuotaRows(quota: AccountQuota | null, plan: string | null |
     ranked.push({
       rank: 1,
       row: {
+        windowKey: "weekly",
         label: t("codexAuth.weekly"),
         limitLabel: t("quota.weeklyLimit"),
         percent: displayQuota.weeklyPercent,
@@ -65,6 +75,7 @@ export function buildQuotaRows(quota: AccountQuota | null, plan: string | null |
     ranked.push({
       rank: 4,
       row: {
+        windowKey: "monthly",
         label: t("codexAuth.monthly"),
         limitLabel: t("quota.monthlyLimit"),
         percent: displayQuota.monthlyPercent,
@@ -76,7 +87,13 @@ export function buildQuotaRows(quota: AccountQuota | null, plan: string | null |
     const localized = localizeCustomQuotaLabel(w.label, t);
     ranked.push({
       rank: rawCustomWindowRank(w.label),
-      row: { label: localized, limitLabel: localized, percent: w.percent, resetAt: w.resetAt },
+      row: {
+        customLabel: w.label,
+        label: localized,
+        limitLabel: localized,
+        percent: w.percent,
+        resetAt: w.resetAt,
+      },
     });
   }
   return ranked.sort((a, b) => a.rank - b.rank).map(entry => entry.row);
@@ -138,7 +155,17 @@ function barFillStyle(percent: number): CSSProperties {
   return { ["--bar-scale" as string]: String(barWidth(percent) / 100) };
 }
 
-export default function QuotaBars({ quota, plan, threshold, t, className, layout = "compact", pending = false }: {
+export default function QuotaBars({
+  quota,
+  plan,
+  threshold,
+  t,
+  className,
+  layout = "compact",
+  pending = false,
+  incompleteWindowKeys,
+  incompleteCustomWindowLabels,
+}: {
   quota: AccountQuota | null;
   plan?: string | null;
   threshold: number;
@@ -151,6 +178,9 @@ export default function QuotaBars({ quota, plan, threshold, t, className, layout
    * bar slot so deferred fill does not shove the page down.
    */
   pending?: boolean;
+  /** Optional overview-only coverage status. Other quota surfaces remain unchanged when omitted. */
+  incompleteWindowKeys?: ReadonlySet<QuotaWindowKey>;
+  incompleteCustomWindowLabels?: ReadonlySet<string>;
 }) {
   const { locale } = useI18n();
   const rows = buildQuotaRows(quota, plan, t);
@@ -201,7 +231,16 @@ export default function QuotaBars({ quota, plan, threshold, t, className, layout
     return (
       <div className={`quota-stacked${className ? ` ${className}` : ""}`}>
         {rows.map(row => (
-          <StackedQuotaRow key={row.limitLabel} row={row} threshold={threshold} t={t} locale={locale} />
+          <StackedQuotaRow
+            key={row.limitLabel}
+            row={row}
+            threshold={threshold}
+            t={t}
+            locale={locale}
+            incomplete={row.windowKey
+              ? incompleteWindowKeys?.has(row.windowKey) === true
+              : row.customLabel !== undefined && incompleteCustomWindowLabels?.has(row.customLabel) === true}
+          />
         ))}
       </div>
     );
@@ -254,11 +293,12 @@ function QuotaRow({ label, percent, resetAt, threshold, t, locale }: {
   );
 }
 
-function StackedQuotaRow({ row, threshold, t, locale }: {
+function StackedQuotaRow({ row, threshold, t, locale, incomplete }: {
   row: QuotaBarRow;
   threshold: number;
   t: TFn;
   locale: Locale;
+  incomplete: boolean;
 }) {
   const exhausted = isQuotaExhausted(row.percent);
   const warn = isQuotaWarn(row.percent, threshold);
@@ -267,7 +307,18 @@ function StackedQuotaRow({ row, threshold, t, locale }: {
   return (
     <div className={`quota-stacked-row${warn ? " quota-stacked-row--warn" : ""}${exhausted ? " quota-stacked-row--exhausted" : ""}`}>
       <div className="quota-stacked-head">
-        <span className="quota-stacked-limit">{row.limitLabel}</span>
+        <span className="quota-stacked-limit-group">
+          <span className="quota-stacked-limit">{row.limitLabel}</span>
+          {incomplete && (
+            <span
+              className="quota-window-partial"
+              aria-label={t("pws.capacity.windowPartialA11y", { window: row.limitLabel })}
+              title={t("pws.capacity.windowPartialA11y", { window: row.limitLabel })}
+            >
+              {t("pws.capacity.windowPartial")}
+            </span>
+          )}
+        </span>
         <span className="quota-stacked-reset muted">{resetText}</span>
       </div>
       <div className="quota-stacked-bar-row">
diff --git a/gui/src/components/provider-workspace/ProviderOverviewDashboard.tsx b/gui/src/components/provider-workspace/ProviderOverviewDashboard.tsx
@@ -22,7 +22,7 @@ import {
   relativeTimeLabelsFromT,
   type ProviderUsageTotals,
 } from "../../provider-workspace/usage";
-import { maxQuotaUtilisation } from "../QuotaBars";
+import { maxQuotaUtilisation, type QuotaWindowKey } from "../QuotaBars";
 import { ProviderIcon } from "./ProviderRail";
 import { formatProviderDisplayName } from "../../provider-icons";
 import QuotaBars from "../QuotaBars";
@@ -242,6 +242,16 @@ function ProviderCapacityQuota({ report, pending }: { report: ProviderQuotaRepor
   const aggregation = capacityAggregationFromReport(report);
   const primaryQuota = accountQuotaFromReport(report);
   const showsAggregate = aggregation?.presentation === "aggregate";
+  const incompleteWindowKeys = new Set<QuotaWindowKey>();
+  const incompleteCustomWindowLabels = new Set<string>();
+  if (showsAggregate && aggregation) {
+    if (aggregation.fiveHour?.incomplete) incompleteWindowKeys.add("fiveHour");
+    if (aggregation.weekly?.incomplete) incompleteWindowKeys.add("weekly");
+    if (aggregation.monthly?.incomplete) incompleteWindowKeys.add("monthly");
+    for (const window of aggregation.customWindows ?? []) {
+      if (window.incomplete) incompleteCustomWindowLabels.add(window.label);
+    }
+  }
   const recoveryRows: Array<{ label: string; window: CapacityWindowView }> = showsAggregate && aggregation ? [
     ...(aggregation.fiveHour ? [{ label: t("codexAuth.fiveHour"), window: aggregation.fiveHour }] : []),
     ...(aggregation.weekly ? [{ label: t("codexAuth.weekly"), window: aggregation.weekly }] : []),
@@ -257,7 +267,17 @@ function ProviderCapacityQuota({ report, pending }: { report: ProviderQuotaRepor
   return (
     <>
       {showsAggregate && <div className="pws-capacity-label">{t("pws.capacity.estimate")}</div>}
-      {(primaryQuota || pending) && <QuotaBars quota={primaryQuota} threshold={80} t={t} layout="stacked" pending={pending} />}
+      {(primaryQuota || pending) && (
+        <QuotaBars
+          quota={primaryQuota}
+          threshold={80}
+          t={t}
+          layout="stacked"
+          pending={pending}
+          incompleteWindowKeys={showsAggregate ? incompleteWindowKeys : undefined}
+          incompleteCustomWindowLabels={showsAggregate ? incompleteCustomWindowLabels : undefined}
+        />
+      )}
       {aggregation && (
         <div className="pws-capacity-details">
           {recoveryRows.flatMap(({ label, window }) => (
diff --git a/gui/src/i18n/de.ts b/gui/src/i18n/de.ts
@@ -1386,6 +1386,8 @@ export const de: Record<TKey, string> = {
   "pws.capacity.recoveryShare": "+{percent} % Pool-Kapazität",
   "pws.capacity.incomplete": "Unvollständige Abdeckung: {excluded} Konten ausgeschlossen, davon {unknown} mit unbekanntem Tarif",
   "pws.capacity.partial": "Teilweise Fensterabdeckung: {count} Konten melden nicht jedes angezeigte Limitfenster",
+  "pws.capacity.windowPartial": "Teilweise",
+  "pws.capacity.windowPartialA11y": "{window}: unvollständige Kontoabdeckung",
   "pws.dashboard.recentlyUsed": "KÜRZLICH VERWENDET",
   "pws.dashboard.requests": "{count} Anfragen",
   "pws.dashboard.checkedAgo": "Geprüft {time}",
diff --git a/gui/src/i18n/en.ts b/gui/src/i18n/en.ts
@@ -1052,6 +1052,8 @@ export const en = {
   "pws.capacity.recoveryShare": "+{percent}% pool capacity",
   "pws.capacity.incomplete": "Incomplete coverage: {excluded} account(s) excluded, including {unknown} unknown plan(s)",
   "pws.capacity.partial": "Partial window coverage: {count} account(s) do not report every displayed limit window",
+  "pws.capacity.windowPartial": "Partial",
+  "pws.capacity.windowPartialA11y": "{window}: incomplete account coverage",
   "pws.dashboard.recentlyUsed": "RECENTLY USED",
   "pws.dashboard.requests": "{count} requests",
   "pws.dashboard.checkedAgo": "Checked {time}",
diff --git a/gui/src/i18n/ja.ts b/gui/src/i18n/ja.ts
@@ -1002,6 +1002,8 @@ export const ja: Record<TKey, string> = {
   "pws.capacity.recoveryShare": "+{percent}% のプール容量",
   "pws.capacity.incomplete": "対象範囲が不完全です: {excluded} 件を除外（不明なプラン {unknown} 件）",
   "pws.capacity.partial": "一部の期間の対象範囲が不完全です: {count} 件のアカウントでは表示中のすべての制限期間を取得できません",
+  "pws.capacity.windowPartial": "一部のみ",
+  "pws.capacity.windowPartialA11y": "{window}: アカウントの対象範囲が不完全です",
   "pws.dashboard.recentlyUsed": "最近の使用",
   "pws.dashboard.requests": "{count} リクエスト",
   "pws.dashboard.checkedAgo": "{time} に確認",
diff --git a/gui/src/i18n/ko.ts b/gui/src/i18n/ko.ts
@@ -1413,6 +1413,8 @@ export const ko: Record<TKey, string> = {
   "pws.capacity.recoveryShare": "+{percent}% 풀 용량",
   "pws.capacity.incomplete": "불완전한 범위: {excluded}개 계정 제외, 알 수 없는 요금제 {unknown}개 포함",
   "pws.capacity.partial": "일부 기간의 범위가 불완전합니다: {count}개 계정에서 표시된 모든 한도 기간을 확인할 수 없습니다",
+  "pws.capacity.windowPartial": "일부만",
+  "pws.capacity.windowPartialA11y": "{window}: 계정 범위가 불완전합니다",
   "pws.dashboard.recentlyUsed": "최근 사용",
   "pws.dashboard.requests": "{count}건 요청",
   "pws.dashboard.checkedAgo": "{time} 전 확인",
diff --git a/gui/src/i18n/ru.ts b/gui/src/i18n/ru.ts
@@ -1044,6 +1044,8 @@ export const ru: Record<TKey, string> = {
   "pws.capacity.recoveryShare": "+{percent}% ёмкости пула",
   "pws.capacity.incomplete": "Неполное покрытие: исключено аккаунтов: {excluded}, неизвестных планов: {unknown}",
   "pws.capacity.partial": "Частичное покрытие окон: для {count} аккаунтов доступны не все показанные окна лимитов",
+  "pws.capacity.windowPartial": "Частично",
+  "pws.capacity.windowPartialA11y": "{window}: неполное покрытие аккаунтов",
   "pws.dashboard.recentlyUsed": "Недавно использованные",
   "pws.dashboard.requests": "{count} запросов",
   "pws.dashboard.checkedAgo": "Проверено {time}",
diff --git a/gui/src/i18n/zh.ts b/gui/src/i18n/zh.ts
@@ -1406,6 +1406,8 @@ export const zh: Record<TKey, string> = {
   "pws.capacity.recoveryShare": "+{percent}% 账户池容量",
   "pws.capacity.incomplete": "覆盖不完整：已排除 {excluded} 个账户，其中 {unknown} 个套餐未知",
   "pws.capacity.partial": "部分窗口覆盖不完整：{count} 个账户未报告所有显示的限额窗口",
+  "pws.capacity.windowPartial": "部分",
+  "pws.capacity.windowPartialA11y": "{window}：账户覆盖不完整",
   "pws.dashboard.recentlyUsed": "最近使用",
   "pws.dashboard.requests": "{count} 个请求",
   "pws.dashboard.checkedAgo": "{time} 前检查",
diff --git a/gui/src/styles/provider-quota.css b/gui/src/styles/provider-quota.css
@@ -44,7 +44,31 @@
   font-weight: 600;
 }
 
+.quota-stacked-limit-group {
+  display: inline-flex;
+  flex: 1 1 auto;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 4px;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.quota-window-partial {
+  flex: 0 0 auto;
+  padding: 1px 5px;
+  border: 1px solid color-mix(in srgb, var(--amber) 45%, transparent);
+  border-radius: 999px;
+  color: var(--amber);
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 1.3;
+  white-space: nowrap;
+}
+
 .quota-stacked-reset {
+  min-width: 0;
+  overflow-wrap: anywhere;
   font-size: 12px;
 }
 
diff --git a/gui/tests/provider-capacity-shell.test.tsx b/gui/tests/provider-capacity-shell.test.tsx
@@ -56,6 +56,44 @@ function aggregatePayload() {
   };
 }
 
+function aggregateWindowPayload(weeklyIncomplete: boolean, monthlyIncomplete: boolean) {
+  const now = Date.now();
+  const incomplete = weeklyIncomplete || monthlyIncomplete;
+  return {
+    reports: [{
+      provider: "openai",
+      label: "OpenAI (Codex login)",
+      source: "chatgpt:wham",
+      updatedAt: now,
+      quota: { weeklyPercent: 20, monthlyPercent: 40, updatedAt: now },
+      aggregation: {
+        kind: "capacity-weighted-v1",
+        scope: "routable-known",
+        presentation: "aggregate",
+        includedAccounts: 2,
+        excludedAccounts: 0,
+        unknownPlanAccounts: 0,
+        partialWindowAccounts: incomplete ? 1 : 0,
+        incomplete,
+        weekly: {
+          usedPercent: 20,
+          includedAccounts: weeklyIncomplete ? 1 : 2,
+          excludedAccounts: weeklyIncomplete ? 1 : 0,
+          incomplete: weeklyIncomplete,
+          updatedAt: now,
+        },
+        monthly: {
+          usedPercent: 40,
+          includedAccounts: monthlyIncomplete ? 1 : 2,
+          excludedAccounts: monthlyIncomplete ? 1 : 0,
+          incomplete: monthlyIncomplete,
+          updatedAt: now,
+        },
+      },
+    }],
+  };
+}
+
 beforeEach(() => {
   previous = Object.fromEntries(globals.map(key => [key, Reflect.get(globalThis, key)])) as typeof previous;
   originalFetch = globalThis.fetch;
@@ -246,3 +284,64 @@ test("mixed-window coverage uses a distinct warning without whole-account exclus
   expect(text).toContain("Partial window coverage: 2 account(s) do not report every displayed limit window");
   expect(text).not.toContain("Incomplete coverage: 0 account(s) excluded");
 });
+
+test("only the monthly aggregate window receives a localized partial marker", async () => {
+  quotaPayload = aggregateWindowPayload(false, true);
+  await mountShell();
+
+  const markers = [...host.querySelectorAll<HTMLElement>(".quota-window-partial")];
+  expect(markers).toHaveLength(1);
+  expect(markers[0]?.textContent).toBe("Partial");
+  expect(markers[0]?.getAttribute("aria-label")).toBe("30-day limit: incomplete account coverage");
+});
+
+test("only the weekly aggregate window receives a localized partial marker", async () => {
+  quotaPayload = aggregateWindowPayload(true, false);
+  await mountShell();
+
+  const markers = [...host.querySelectorAll<HTMLElement>(".quota-window-partial")];
+  expect(markers).toHaveLength(1);
+  expect(markers[0]?.getAttribute("aria-label")).toBe("Weekly limit: incomplete account coverage");
+});
+
+test("complete aggregate windows do not receive partial markers", async () => {
+  quotaPayload = aggregateWindowPayload(false, false);
+  await mountShell();
+
+  expect(host.querySelectorAll(".quota-window-partial")).toHaveLength(0);
+  expect(host.textContent ?? "").not.toContain("Partial window coverage");
+});
+
+test("five-hour and custom aggregate windows can be marked independently", async () => {
+  const now = Date.now();
+  quotaPayload = {
+    reports: [{
+      provider: "openai",
+      label: "OpenAI (Codex login)",
+      source: "chatgpt:wham",
+      updatedAt: now,
+      quota: {
+        fiveHourPercent: 10,
+        customWindows: [{ label: "Burst", percent: 30 }],
+        updatedAt: now,
+      },
+      aggregation: {
+        kind: "capacity-weighted-v1",
+        scope: "routable-known",
+        presentation: "aggregate",
+        includedAccounts: 2,
+        excludedAccounts: 0,
+        unknownPlanAccounts: 0,
+        partialWindowAccounts: 1,
+        incomplete: true,
+        fiveHour: { usedPercent: 10, includedAccounts: 2, excludedAccounts: 0, incomplete: false, updatedAt: now },
+        customWindows: [{ label: "Burst", usedPercent: 30, includedAccounts: 1, excludedAccounts: 1, incomplete: true, updatedAt: now }],
+      },
+    }],
+  };
+  await mountShell();
+
+  const markers = [...host.querySelectorAll<HTMLElement>(".quota-window-partial")];
+  expect(markers).toHaveLength(1);
+  expect(markers[0]?.getAttribute("aria-label")).toBe("Burst: incomplete account coverage");
+});
diff --git a/gui/tests/provider-capacity.test.ts b/gui/tests/provider-capacity.test.ts
