@kenz1117/dsh-ui-usage-billing 0.3.0 → 0.4.0

package/lib/client.js

@@ -24,7 +24,7 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region \0dsh-css:/Users/ken/deepseek-harness/packages/client/ui-usage-billing/src/client/UsageBilling.module.css.mjs
-		const css = ".VWh0dG_railButton{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-1);width:36px;height:36px;color:var(--dsw-static-blue-500);cursor:pointer;border-radius:10px;justify-content:center;align-items:center;padding:0;transition:background-color .14s,border-color .14s,color .14s;display:flex}.VWh0dG_railButton:hover,.VWh0dG_railButton:focus-visible{background:var(--dsw-alias-interactive-bg-hover);border-color:var(--dsw-alias-border-l3);color:var(--dsw-static-blue-400);outline:none}.VWh0dG_railButton svg{stroke-width:2px;width:18px;height:18px}.VWh0dG_trigger{border:1px solid var(--dsw-alias-border-l1);background:var(--dsw-alias-bg-layer-1);width:100%;color:var(--dsw-alias-label-primary);cursor:pointer;text-align:left;border-radius:12px;align-items:center;gap:12px;padding:10px 14px;transition:border-color .14s,background-color .14s;display:flex}.VWh0dG_trigger:hover,.VWh0dG_trigger:focus-visible{border-color:var(--dsw-alias-border-l2);background:var(--dsw-alias-interactive-bg-hover);outline:none}.VWh0dG_triggerIcon{width:16px;height:16px;color:var(--dsw-alias-label-tertiary);flex:none;justify-content:center;align-items:center;display:inline-flex}.VWh0dG_triggerIcon svg{stroke-width:1.8px;width:15px;height:15px}.VWh0dG_triggerToday,.VWh0dG_triggerMonth{align-items:baseline;gap:4px;min-width:0;display:flex}.VWh0dG_triggerDivider{background:var(--dsw-alias-border-l1);align-self:stretch;width:1px}.VWh0dG_triggerAmount{color:var(--dsw-alias-label-primary);letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap;font-size:17px;font-weight:600;line-height:22px}.VWh0dG_triggerAmountSub{color:var(--dsw-alias-label-secondary);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:13px;font-weight:600;line-height:18px}.VWh0dG_triggerMeta{color:var(--dsw-alias-label-tertiary);white-space:nowrap;font-size:10.5px;line-height:14px}.VWh0dG_dashboardModal{width:min(760px,100vw - 48px);max-height:min(760px,88vh)}.VWh0dG_dashboard{flex-direction:column;width:100%;max-height:min(760px,88vh);display:flex}.VWh0dG_dashboardHead{border-bottom:1px solid var(--dsw-alias-border-l1);justify-content:space-between;align-items:flex-start;gap:12px;padding:20px 24px 14px;display:flex}.VWh0dG_dashboardTitle{color:var(--dsw-alias-label-primary);margin:0;font-size:17px;font-weight:600;line-height:24px}.VWh0dG_dashboardSubtitle{color:var(--dsw-alias-label-caption);margin:3px 0 0;font-size:12px;line-height:17px}.VWh0dG_closeButton{width:30px;height:30px;color:var(--dsw-alias-label-secondary);cursor:pointer;background:0 0;border:none;border-radius:8px;flex:none;justify-content:center;align-items:center;transition:background-color .14s;display:inline-flex}.VWh0dG_closeButton:hover{background:var(--dsw-alias-interactive-bg-hover)}.VWh0dG_closeButton svg{stroke-width:2px;width:16px;height:16px}.VWh0dG_dashboardBody{flex-direction:column;gap:14px;padding:16px 24px 24px;display:flex;overflow-y:auto}.VWh0dG_hero{border:1px solid var(--dsw-alias-border-l1);background:var(--dsw-alias-bg-layer-1);border-radius:16px;justify-content:space-between;align-items:center;gap:24px;padding:20px 24px;display:flex}.VWh0dG_heroMain{flex-direction:column;gap:4px;min-width:0;display:flex}.VWh0dG_heroLabel{color:var(--dsw-alias-label-tertiary);white-space:nowrap;font-size:12px;line-height:17px}.VWh0dG_heroValue{letter-spacing:-.02em;color:var(--dsw-alias-label-primary);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:40px;font-weight:600;line-height:48px}.VWh0dG_heroMeta{color:var(--dsw-alias-label-caption);white-space:nowrap;font-size:12px;line-height:17px}.VWh0dG_heroSide{flex-direction:column;flex:none;gap:10px;display:flex}.VWh0dG_heroSideItem{align-items:baseline;gap:8px;display:flex}.VWh0dG_heroSideLabel{color:var(--dsw-alias-label-tertiary);white-space:nowrap;font-size:12px;line-height:17px}.VWh0dG_heroSideValue{color:var(--dsw-alias-label-primary);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:16px;font-weight:600;line-height:22px}.VWh0dG_delta{align-items:center;gap:2px;margin-left:4px;font-size:11px;font-weight:600;line-height:17px;display:inline-flex}.VWh0dG_deltaUp{color:var(--dsw-static-green-500)}.VWh0dG_deltaDown{color:var(--dsw-static-red-500)}.VWh0dG_kpiGrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;display:grid}.VWh0dG_kpiTile{border:1px solid var(--dsw-alias-border-l1);background:var(--dsw-alias-bg-layer-1);border-radius:14px;flex-direction:column;gap:3px;padding:14px 15px;transition:border-color .14s,background-color .14s;display:flex}.VWh0dG_kpiTile:hover{border-color:var(--dsw-alias-border-l2);background:var(--dsw-alias-interactive-bg-hover)}.VWh0dG_kpiLabel{color:var(--dsw-alias-label-tertiary);font-size:11px;line-height:15px}.VWh0dG_kpiValue{color:var(--dsw-alias-label-primary);font-variant-numeric:tabular-nums;font-size:21px;font-weight:600;line-height:27px}.VWh0dG_kpiGreen{color:var(--dsw-static-green-500)}.VWh0dG_kpiDetail{color:var(--dsw-alias-label-caption);white-space:nowrap;text-overflow:ellipsis;font-size:11px;line-height:15px;overflow:hidden}.VWh0dG_panel{border:1px solid var(--dsw-alias-border-l1);background:var(--dsw-alias-bg-layer-1);border-radius:16px;flex-direction:column;gap:10px;padding:16px 18px;display:flex}.VWh0dG_panelHead{justify-content:space-between;align-items:baseline;gap:10px;display:flex}.VWh0dG_panelTitle{color:var(--dsw-alias-label-primary);margin:0;font-size:14px;font-weight:600;line-height:20px}.VWh0dG_panelHint{color:var(--dsw-alias-label-caption);white-space:nowrap;font-size:11px;line-height:16px}.VWh0dG_rangeToggle{border:1px solid var(--dsw-alias-border-l1);background:var(--dsw-alias-bg-layer-1);border-radius:8px;gap:2px;padding:2px;display:inline-flex}.VWh0dG_rangeButton{color:var(--dsw-alias-label-tertiary);cursor:pointer;background:0 0;border:none;border-radius:6px;padding:2px 8px;font-size:11px;line-height:16px;transition:background-color .14s,color .14s}.VWh0dG_rangeButtonActive{background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-primary);font-weight:600}.VWh0dG_budget{border:1px solid var(--dsw-alias-border-l1);background:var(--dsw-alias-bg-layer-1);border-radius:14px;flex-direction:column;gap:8px;padding:12px 16px;display:flex}.VWh0dG_budgetHead{justify-content:space-between;align-items:baseline;gap:10px;display:flex}.VWh0dG_budgetLabel{color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:17px}.VWh0dG_budgetValue{color:var(--dsw-alias-label-secondary);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:12px;line-height:17px}.VWh0dG_budgetControls{align-items:center;gap:8px;min-width:0;display:inline-flex}.VWh0dG_budgetInputWrap{border:1px solid var(--dsw-alias-border-l1);background:var(--dsw-alias-bg-layer-1);border-radius:6px;align-items:center;gap:2px;padding:2px 6px;display:inline-flex}.VWh0dG_budgetInputWrap:focus-within{border-color:var(--dsw-alias-border-l3)}.VWh0dG_budgetUnit{color:var(--dsw-alias-label-tertiary);font-size:11px;line-height:16px}.VWh0dG_budgetInput{width:64px;color:var(--dsw-alias-label-primary);font-variant-numeric:tabular-nums;text-align:right;background:0 0;border:none;padding:0;font-size:12px;line-height:16px}.VWh0dG_budgetInput:focus-visible{outline:none}.VWh0dG_switch{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-module-platform);cursor:pointer;border-radius:999px;flex:none;width:30px;height:17px;padding:0;transition:background-color .16s,border-color .16s;position:relative}.VWh0dG_switchOn{border-color:var(--dsw-static-blue-500);background:var(--dsw-static-blue-500)}.VWh0dG_switchKnob{background:var(--dsw-static-neutral-bluish-00);border-radius:50%;width:11px;height:11px;transition:transform .16s;position:absolute;top:2px;left:2px}.VWh0dG_switchOn .VWh0dG_switchKnob{transform:translate(13px)}.VWh0dG_budgetTrack{background:var(--dsw-alias-bg-module-platform);border-radius:999px;height:6px;overflow:hidden}.VWh0dG_budgetFill{background:var(--dsw-static-blue-500);border-radius:999px;height:100%;transition:width .2s}.VWh0dG_budgetFillOver{background:var(--dsw-static-red-500);animation:1.6s ease-in-out infinite VWh0dG_budgetOverPulse}@keyframes VWh0dG_budgetOverPulse{50%{opacity:.55}}.VWh0dG_chartWrap{width:100%;position:relative}.VWh0dG_chartSvg{width:100%;height:auto;display:block}.VWh0dG_chartEmpty{height:140px;color:var(--dsw-alias-label-caption);justify-content:center;align-items:center;font-size:13px;display:flex}.VWh0dG_emptyRow{text-align:center;color:var(--dsw-alias-label-caption);padding:28px 0;font-size:13px}.VWh0dG_chartGrid{stroke:var(--dsw-alias-border-l1);stroke-width:1px}.VWh0dG_chartAxisLabel{fill:var(--dsw-alias-label-tertiary);font-size:10px}.VWh0dG_chartBar{fill:var(--dsw-static-blue-500);opacity:.35}.VWh0dG_chartBar:hover{opacity:.6}.VWh0dG_chartStack{stroke:var(--dsw-alias-bg-layer-1);stroke-width:.75px}.VWh0dG_chartStack:hover{opacity:.85}.VWh0dG_chartLine{stroke:var(--dsw-static-blue-500);stroke-width:2px;stroke-linecap:round;stroke-linejoin:round}.VWh0dG_chartCrosshair{stroke:var(--dsw-alias-label-dimmed);stroke-width:1px;stroke-dasharray:3 3}.VWh0dG_chartDot{fill:var(--dsw-static-neutral-bluish-00);stroke:var(--dsw-static-blue-500);stroke-width:2.5px}.VWh0dG_chartTooltip{pointer-events:none;z-index:2;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-3);box-shadow:var(--dsw-shadow-lv2);white-space:nowrap;border-radius:10px;padding:8px 10px;position:absolute;transform:translate(-50%,calc(-100% - 10px))}.VWh0dG_chartTooltipDate{color:var(--dsw-alias-label-primary);margin-bottom:3px;font-size:11px;font-weight:600}.VWh0dG_chartTooltipRow{color:var(--dsw-alias-label-secondary);align-items:center;gap:5px;font-size:11px;line-height:17px;display:flex}.VWh0dG_chartTooltipRow strong{color:var(--dsw-alias-label-primary);font-variant-numeric:tabular-nums;font-weight:600}.VWh0dG_chartLegendLine{background:var(--dsw-static-blue-500);border-radius:2px;width:10px;height:3px;display:inline-block}.VWh0dG_chartLegendBar{background:var(--dsw-static-blue-500);opacity:.5;border-radius:2px;width:7px;height:7px;display:inline-block}.VWh0dG_chartTooltipSwatch{border-radius:3px;flex:none;width:8px;height:8px;display:inline-block}.VWh0dG_chartLegend{color:var(--dsw-alias-label-tertiary);justify-content:flex-end;gap:14px;margin-top:2px;font-size:11px;display:flex}.VWh0dG_chartLegend span{align-items:center;gap:5px;display:inline-flex}.VWh0dG_tableScroll{border:1px solid var(--dsw-alias-border-l1);--dsh-scrollbar-thumb:var(--dsw-alias-scrollbar-bg-l2);--dsh-scrollbar-thumb-hover:var(--dsw-alias-scrollbar-hover-l2);border-radius:12px;overflow:auto}.VWh0dG_modelTable,.VWh0dG_pricingTable{border-collapse:collapse;width:100%;font-size:12.5px}.VWh0dG_modelTable th,.VWh0dG_modelTable td,.VWh0dG_pricingTable th,.VWh0dG_pricingTable td{border-bottom:1px solid var(--dsw-alias-border-l1);text-align:left;white-space:nowrap;padding:9px 12px}.VWh0dG_modelTable tbody tr:last-child td,.VWh0dG_pricingTable tbody tr:last-child td{border-bottom:0}.VWh0dG_modelTable thead th,.VWh0dG_pricingTable thead th{color:var(--dsw-alias-label-tertiary);background:var(--dsw-alias-bg-module-platform);font-size:11px;font-weight:500}.VWh0dG_modelTable tbody tr,.VWh0dG_pricingTable tbody tr{transition:background-color .12s}.VWh0dG_modelTable tbody tr:hover,.VWh0dG_pricingTable tbody tr:hover{background:var(--dsw-alias-interactive-bg-hover)}.VWh0dG_numCol{text-align:right;font-variant-numeric:tabular-nums}.VWh0dG_costCol{color:var(--dsw-static-blue-500);font-weight:600}.VWh0dG_na{color:var(--dsw-alias-label-dimmed)}.VWh0dG_modelCell{align-items:center;gap:8px;display:inline-flex}.VWh0dG_modelDot{width:9px;height:9px;box-shadow:0 0 0 3px color-mix(in srgb, var(--dsw-alias-bg-layer-1) 60%, transparent);border-radius:50%;flex:none}.VWh0dG_modelName{color:var(--dsw-alias-label-primary);font-weight:500;line-height:16px;display:block}.VWh0dG_modelProvider{color:var(--dsw-alias-label-caption);font-size:10.5px;line-height:14px;display:block}.VWh0dG_pricingToggle{cursor:pointer;text-align:left;background:0 0;border:none;justify-content:space-between;align-items:center;gap:10px;width:100%;padding:0;display:flex}.VWh0dG_pricingToggle:hover .VWh0dG_panelTitle,.VWh0dG_pricingToggle:focus-visible .VWh0dG_panelTitle{color:var(--dsw-static-blue-500)}.VWh0dG_rateBadge{vertical-align:1px;white-space:nowrap;border-radius:999px;align-items:center;margin-left:6px;padding:1px 6px;font-size:10px;font-weight:500;line-height:14px;display:inline-flex}.VWh0dG_rateBadgeLive{color:var(--dsw-static-green-500);background:color-mix(in srgb, var(--dsw-static-green-500) 10%, transparent)}.VWh0dG_rateBadgeBuiltin{color:var(--dsw-alias-label-tertiary);background:var(--dsw-alias-bg-module-platform)}.VWh0dG_pricingToggleText{align-items:baseline;gap:10px;min-width:0;display:flex}.VWh0dG_pricingChevron{width:16px;height:16px;color:var(--dsw-alias-label-tertiary);flex:none;transition:transform .16s}.VWh0dG_pricingChevronOpen{transform:rotate(180deg)}.VWh0dG_bandPrice{align-items:baseline;gap:6px;display:inline-flex}.VWh0dG_bandPriceOff{color:var(--dsw-alias-label-caption)}.VWh0dG_bandPriceOff:before{content:\"/\";color:var(--dsw-alias-label-dimmed);margin-right:4px}.VWh0dG_bandTag{color:var(--dsw-alias-label-secondary);flex-direction:column;gap:1px;font-size:10.5px;line-height:14px;display:inline-flex}.VWh0dG_bandTagOff{color:var(--dsw-static-green-500);font-weight:600}.VWh0dG_flatTag{color:var(--dsw-alias-label-caption);font-size:10.5px;line-height:14px}.VWh0dG_healthDot{border-radius:50%;flex:none;width:8px;height:8px;display:inline-block}.VWh0dG_healthOk{background:var(--dsw-static-green-500);box-shadow:0 0 0 3px color-mix(in srgb, var(--dsw-static-green-500) 18%, transparent)}.VWh0dG_healthBad{background:var(--dsw-static-red-500);box-shadow:0 0 0 3px color-mix(in srgb, var(--dsw-static-red-500) 18%, transparent)}.VWh0dG_healthIdle{background:var(--dsw-static-neutral-bluish-400)}.VWh0dG_dashboardRight{align-items:center;gap:8px;min-width:0;display:flex}.VWh0dG_healthBadge{white-space:nowrap;border-radius:999px;align-items:center;gap:6px;padding:3px 9px;font-size:11px;line-height:16px;display:inline-flex}.VWh0dG_healthBadgeOk{color:var(--dsw-static-green-500);background:color-mix(in srgb, var(--dsw-static-green-500) 10%, transparent)}.VWh0dG_healthBadgeBad{color:var(--dsw-static-red-500);background:color-mix(in srgb, var(--dsw-static-red-500) 10%, transparent)}.VWh0dG_planTag{color:var(--dsw-static-green-500);background:color-mix(in srgb, var(--dsw-static-green-500) 12%, transparent);border-radius:999px;align-items:center;padding:1px 8px;font-size:11px;font-weight:500;line-height:17px;display:inline-flex}.VWh0dG_uncataloguedTag{vertical-align:1px;color:var(--dsw-static-amber-500);background:color-mix(in srgb, var(--dsw-static-amber-500) 12%, transparent);border-radius:999px;margin-left:6px;padding:0 6px;font-size:10px;font-weight:600;line-height:16px;display:inline-block}.VWh0dG_balanceCell{flex-direction:column;align-items:flex-end;gap:2px;display:inline-flex}.VWh0dG_balanceDays{color:var(--dsw-alias-label-caption);white-space:nowrap;font-size:10.5px;line-height:14px}.VWh0dG_balanceDaysLow{color:var(--dsw-static-red-500);font-weight:600}body[data-zine-mode] .VWh0dG_trigger,body[data-zine-mode] .VWh0dG_railButton{display:none}body[data-zine-mode] .VWh0dG_dashboardHead{background:#000;border-bottom:2px solid #e8ff00}body[data-zine-mode] .VWh0dG_headTitleRow{align-items:center;gap:8px;margin-top:4px;display:flex}body[data-zine-mode] .VWh0dG_dashboardTitle{color:#e8ff00;letter-spacing:.04em;text-transform:uppercase;text-shadow:0 0 8px #e8ff0066;font-weight:900}body[data-zine-mode] .VWh0dG_dashboardSubtitle{color:#c9d98a;letter-spacing:.08em;text-transform:uppercase;font-size:10px}body[data-zine-mode] .VWh0dG_closeButton{color:#0a0a05;background:#ff2d95;border:1.5px solid #ff2d95;border-radius:0;box-shadow:0 0 10px #ff2d9573}body[data-zine-mode] .VWh0dG_hero{background:#000;border:2.5px solid #e8ff00;border-radius:0;position:relative;box-shadow:0 0 0 1px #0009,0 0 24px #e8ff002e}body[data-zine-mode] .VWh0dG_heroLabel{color:#c9d98a;letter-spacing:.12em;text-transform:uppercase;font-size:10px;font-weight:900}body[data-zine-mode] .VWh0dG_heroValue{color:#e8ff00;letter-spacing:-.02em;text-shadow:0 0 12px #e8ff0073;font-size:38px;font-weight:900}body[data-zine-mode] .VWh0dG_heroMeta{color:#c9d98a;letter-spacing:.06em;text-transform:uppercase;font-size:10.5px}body[data-zine-mode] .VWh0dG_heroSideLabel{color:#c9d98a;letter-spacing:.1em;text-transform:uppercase;font-size:10px;font-weight:900}body[data-zine-mode] .VWh0dG_heroSideValue{color:#e8ff00;text-shadow:0 0 6px #e8ff0059}body[data-zine-mode] .VWh0dG_delta{font-weight:900}body[data-zine-mode] .VWh0dG_deltaUp{color:#ff2d95}body[data-zine-mode] .VWh0dG_deltaDown{color:#c9d98a}body[data-zine-mode] .VWh0dG_panel{background:#000;border:2px solid #e8ff00;border-radius:0}body[data-zine-mode] .VWh0dG_trendPanel{position:relative}body[data-zine-mode] .VWh0dG_panelTitle{color:#e8ff00;letter-spacing:.06em;text-transform:uppercase;text-shadow:0 0 6px #e8ff0066;font-weight:900}body[data-zine-mode] .VWh0dG_panelHint{color:#c9d98a;letter-spacing:.08em;text-transform:uppercase;font-size:10px;font-weight:900}body[data-zine-mode] .VWh0dG_modelTableScroll{background:#000;border:1.5px solid #e8ff0080;border-radius:0}@media (width<=640px){.VWh0dG_kpiGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.VWh0dG_hero{flex-direction:column;align-items:flex-start;gap:14px}.VWh0dG_heroSide{flex-direction:row;gap:20px}}";
+		const css = ".VWh0dG_railButton{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-1);width:36px;height:36px;color:var(--dsw-static-blue-500);cursor:pointer;border-radius:10px;justify-content:center;align-items:center;padding:0;transition:background-color .14s,border-color .14s,color .14s;display:flex}.VWh0dG_railButton:hover,.VWh0dG_railButton:focus-visible{background:var(--dsw-alias-interactive-bg-hover);border-color:var(--dsw-alias-border-l3);color:var(--dsw-static-blue-400);outline:none}.VWh0dG_railButton svg{stroke-width:2px;width:18px;height:18px}.VWh0dG_trigger{border:1px solid var(--dsw-alias-border-l1);background:var(--dsw-alias-bg-layer-1);width:100%;color:var(--dsw-alias-label-primary);cursor:pointer;text-align:left;border-radius:12px;align-items:center;gap:12px;padding:10px 14px;transition:border-color .14s,background-color .14s;display:flex}.VWh0dG_trigger:hover,.VWh0dG_trigger:focus-visible{border-color:var(--dsw-alias-border-l2);background:var(--dsw-alias-interactive-bg-hover);outline:none}.VWh0dG_triggerIcon{width:16px;height:16px;color:var(--dsw-alias-label-tertiary);flex:none;justify-content:center;align-items:center;display:inline-flex}.VWh0dG_triggerIcon svg{stroke-width:1.8px;width:15px;height:15px}.VWh0dG_triggerToday,.VWh0dG_triggerMonth{align-items:baseline;gap:4px;min-width:0;display:flex}.VWh0dG_triggerDivider{background:var(--dsw-alias-border-l1);align-self:stretch;width:1px}.VWh0dG_triggerAmount{color:var(--dsw-alias-label-primary);letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap;font-size:17px;font-weight:600;line-height:22px}.VWh0dG_triggerAmountSub{color:var(--dsw-alias-label-secondary);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:13px;font-weight:600;line-height:18px}.VWh0dG_triggerMeta{color:var(--dsw-alias-label-tertiary);white-space:nowrap;font-size:10.5px;line-height:14px}.VWh0dG_dashboardModal{width:min(760px,100vw - 48px);max-height:min(760px,88vh)}.VWh0dG_dashboard{flex-direction:column;width:100%;max-height:min(760px,88vh);display:flex}.VWh0dG_dashboardHead{border-bottom:1px solid var(--dsw-alias-border-l1);justify-content:space-between;align-items:flex-start;gap:12px;padding:20px 24px 14px;display:flex}.VWh0dG_dashboardTitle{color:var(--dsw-alias-label-primary);margin:0;font-size:17px;font-weight:600;line-height:24px}.VWh0dG_dashboardSubtitle{color:var(--dsw-alias-label-caption);margin:3px 0 0;font-size:12px;line-height:17px}.VWh0dG_closeButton{width:30px;height:30px;color:var(--dsw-alias-label-secondary);cursor:pointer;background:0 0;border:none;border-radius:8px;flex:none;justify-content:center;align-items:center;transition:background-color .14s;display:inline-flex}.VWh0dG_closeButton:hover{background:var(--dsw-alias-interactive-bg-hover)}.VWh0dG_closeButton svg{stroke-width:2px;width:16px;height:16px}.VWh0dG_dashboardBody{flex-direction:column;gap:14px;padding:16px 24px 24px;display:flex;overflow-y:auto}.VWh0dG_hero{border:1px solid var(--dsw-alias-border-l1);background:var(--dsw-alias-bg-layer-1);border-radius:16px;justify-content:space-between;align-items:center;gap:24px;padding:20px 24px;display:flex}.VWh0dG_heroMain{flex-direction:column;gap:4px;min-width:0;display:flex}.VWh0dG_heroLabel{color:var(--dsw-alias-label-tertiary);white-space:nowrap;font-size:12px;line-height:17px}.VWh0dG_heroValue{letter-spacing:-.02em;color:var(--dsw-alias-label-primary);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:40px;font-weight:600;line-height:48px}.VWh0dG_heroMeta{color:var(--dsw-alias-label-caption);white-space:nowrap;font-size:12px;line-height:17px}.VWh0dG_heroSide{flex-direction:column;flex:none;gap:10px;display:flex}.VWh0dG_heroSideItem{align-items:baseline;gap:8px;display:flex}.VWh0dG_heroSideLabel{color:var(--dsw-alias-label-tertiary);white-space:nowrap;font-size:12px;line-height:17px}.VWh0dG_heroSideValue{color:var(--dsw-alias-label-primary);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:16px;font-weight:600;line-height:22px}.VWh0dG_delta{align-items:center;gap:2px;margin-left:4px;font-size:11px;font-weight:600;line-height:17px;display:inline-flex}.VWh0dG_deltaUp{color:var(--dsw-static-green-500)}.VWh0dG_deltaDown{color:var(--dsw-static-red-500)}.VWh0dG_kpiGrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;display:grid}.VWh0dG_kpiTile{border:1px solid var(--dsw-alias-border-l1);background:var(--dsw-alias-bg-layer-1);border-radius:14px;flex-direction:column;gap:3px;padding:14px 15px;transition:border-color .14s,background-color .14s;display:flex}.VWh0dG_kpiTile:hover{border-color:var(--dsw-alias-border-l2);background:var(--dsw-alias-interactive-bg-hover)}.VWh0dG_kpiLabel{color:var(--dsw-alias-label-tertiary);font-size:11px;line-height:15px}.VWh0dG_kpiValue{color:var(--dsw-alias-label-primary);font-variant-numeric:tabular-nums;font-size:21px;font-weight:600;line-height:27px}.VWh0dG_kpiGreen{color:var(--dsw-static-green-500)}.VWh0dG_kpiDetail{color:var(--dsw-alias-label-caption);white-space:nowrap;text-overflow:ellipsis;font-size:11px;line-height:15px;overflow:hidden}.VWh0dG_panel{border:1px solid var(--dsw-alias-border-l1);background:var(--dsw-alias-bg-layer-1);border-radius:16px;flex-direction:column;gap:10px;padding:16px 18px;display:flex}.VWh0dG_panelHead{justify-content:space-between;align-items:baseline;gap:10px;display:flex}.VWh0dG_panelTitle{color:var(--dsw-alias-label-primary);margin:0;font-size:14px;font-weight:600;line-height:20px}.VWh0dG_panelHint{color:var(--dsw-alias-label-caption);white-space:nowrap;font-size:11px;line-height:16px}.VWh0dG_rangeToggle{border:1px solid var(--dsw-alias-border-l1);background:var(--dsw-alias-bg-layer-1);border-radius:8px;gap:2px;padding:2px;display:inline-flex}.VWh0dG_rangeButton{color:var(--dsw-alias-label-tertiary);cursor:pointer;background:0 0;border:none;border-radius:6px;padding:2px 8px;font-size:11px;line-height:16px;transition:background-color .14s,color .14s}.VWh0dG_rangeButtonActive{background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-primary);font-weight:600}.VWh0dG_budget{border:1px solid var(--dsw-alias-border-l1);background:var(--dsw-alias-bg-layer-1);border-radius:14px;flex-direction:column;gap:8px;padding:12px 16px;display:flex}.VWh0dG_budgetHead{justify-content:space-between;align-items:baseline;gap:10px;display:flex}.VWh0dG_budgetLabel{color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:17px}.VWh0dG_budgetValue{color:var(--dsw-alias-label-secondary);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:12px;line-height:17px}.VWh0dG_budgetControls{align-items:center;gap:8px;min-width:0;display:inline-flex}.VWh0dG_budgetInputWrap{border:1px solid var(--dsw-alias-border-l1);background:var(--dsw-alias-bg-layer-1);border-radius:6px;align-items:center;gap:2px;padding:2px 6px;display:inline-flex}.VWh0dG_budgetInputWrap:focus-within{border-color:var(--dsw-alias-border-l3)}.VWh0dG_budgetUnit{color:var(--dsw-alias-label-tertiary);font-size:11px;line-height:16px}.VWh0dG_budgetInput{width:64px;color:var(--dsw-alias-label-primary);font-variant-numeric:tabular-nums;text-align:right;background:0 0;border:none;padding:0;font-size:12px;line-height:16px}.VWh0dG_budgetInput:focus-visible{outline:none}.VWh0dG_switch{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-module-platform);cursor:pointer;border-radius:999px;flex:none;width:30px;height:17px;padding:0;transition:background-color .16s,border-color .16s;position:relative}.VWh0dG_switchOn{border-color:var(--dsw-static-blue-500);background:var(--dsw-static-blue-500)}.VWh0dG_switchKnob{background:var(--dsw-static-neutral-bluish-00);border-radius:50%;width:11px;height:11px;transition:transform .16s;position:absolute;top:2px;left:2px}.VWh0dG_switchOn .VWh0dG_switchKnob{transform:translate(13px)}.VWh0dG_budgetTrack{background:var(--dsw-alias-bg-module-platform);border-radius:999px;height:6px;overflow:hidden}.VWh0dG_budgetFill{background:var(--dsw-static-blue-500);border-radius:999px;height:100%;transition:width .2s}.VWh0dG_budgetFillOver{background:var(--dsw-static-red-500);animation:1.6s ease-in-out infinite VWh0dG_budgetOverPulse}@keyframes VWh0dG_budgetOverPulse{50%{opacity:.55}}.VWh0dG_chartWrap{width:100%;position:relative}.VWh0dG_chartSvg{width:100%;height:auto;display:block}.VWh0dG_chartEmpty{height:140px;color:var(--dsw-alias-label-caption);justify-content:center;align-items:center;font-size:13px;display:flex}.VWh0dG_emptyRow{text-align:center;color:var(--dsw-alias-label-caption);padding:28px 0;font-size:13px}.VWh0dG_chartGrid{stroke:var(--dsw-alias-border-l1);stroke-width:1px}.VWh0dG_chartAxisLabel{fill:var(--dsw-alias-label-tertiary);font-size:10px}.VWh0dG_chartBar{fill:var(--dsw-static-blue-500);opacity:.35}.VWh0dG_chartBar:hover{opacity:.6}.VWh0dG_chartStack{stroke:var(--dsw-alias-bg-layer-1);stroke-width:.75px}.VWh0dG_chartStack:hover{opacity:.85}.VWh0dG_chartLine{stroke:var(--dsw-static-blue-500);stroke-width:2px;stroke-linecap:round;stroke-linejoin:round}.VWh0dG_chartCrosshair{stroke:var(--dsw-alias-label-dimmed);stroke-width:1px;stroke-dasharray:3 3}.VWh0dG_chartDot{fill:var(--dsw-static-neutral-bluish-00);stroke:var(--dsw-static-blue-500);stroke-width:2.5px}.VWh0dG_chartTooltip{pointer-events:none;z-index:2;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-3);box-shadow:var(--dsw-shadow-lv2);white-space:nowrap;border-radius:10px;padding:8px 10px;position:absolute;transform:translate(-50%,calc(-100% - 10px))}.VWh0dG_chartTooltipDate{color:var(--dsw-alias-label-primary);margin-bottom:3px;font-size:11px;font-weight:600}.VWh0dG_chartTooltipRow{color:var(--dsw-alias-label-secondary);align-items:center;gap:5px;font-size:11px;line-height:17px;display:flex}.VWh0dG_chartTooltipRow strong{color:var(--dsw-alias-label-primary);font-variant-numeric:tabular-nums;font-weight:600}.VWh0dG_chartLegendLine{background:var(--dsw-static-blue-500);border-radius:2px;width:10px;height:3px;display:inline-block}.VWh0dG_chartLegendBar{background:var(--dsw-static-blue-500);opacity:.5;border-radius:2px;width:7px;height:7px;display:inline-block}.VWh0dG_chartTooltipSwatch{border-radius:3px;flex:none;width:8px;height:8px;display:inline-block}.VWh0dG_chartLegend{color:var(--dsw-alias-label-tertiary);justify-content:flex-end;gap:14px;margin-top:2px;font-size:11px;display:flex}.VWh0dG_chartLegend span{align-items:center;gap:5px;display:inline-flex}.VWh0dG_tableScroll{border:1px solid var(--dsw-alias-border-l1);--dsh-scrollbar-thumb:var(--dsw-alias-scrollbar-bg-l2);--dsh-scrollbar-thumb-hover:var(--dsw-alias-scrollbar-hover-l2);border-radius:12px;overflow:auto}.VWh0dG_modelTable,.VWh0dG_pricingTable{border-collapse:collapse;width:100%;font-size:12.5px}.VWh0dG_modelTable th,.VWh0dG_modelTable td,.VWh0dG_pricingTable th,.VWh0dG_pricingTable td{border-bottom:1px solid var(--dsw-alias-border-l1);text-align:left;white-space:nowrap;padding:9px 12px}.VWh0dG_modelTable tbody tr:last-child td,.VWh0dG_pricingTable tbody tr:last-child td{border-bottom:0}.VWh0dG_modelTable thead th,.VWh0dG_pricingTable thead th{color:var(--dsw-alias-label-tertiary);background:var(--dsw-alias-bg-module-platform);font-size:11px;font-weight:500}.VWh0dG_modelTable tbody tr,.VWh0dG_pricingTable tbody tr{transition:background-color .12s}.VWh0dG_modelTable tbody tr:hover,.VWh0dG_pricingTable tbody tr:hover{background:var(--dsw-alias-interactive-bg-hover)}.VWh0dG_numCol{text-align:right;font-variant-numeric:tabular-nums}.VWh0dG_costCol{color:var(--dsw-static-blue-500);font-weight:600}.VWh0dG_na{color:var(--dsw-alias-label-dimmed)}.VWh0dG_modelCell{align-items:center;gap:8px;display:inline-flex}.VWh0dG_modelDot{width:9px;height:9px;box-shadow:0 0 0 3px color-mix(in srgb, var(--dsw-alias-bg-layer-1) 60%, transparent);border-radius:50%;flex:none}.VWh0dG_modelName{color:var(--dsw-alias-label-primary);font-weight:500;line-height:16px;display:block}.VWh0dG_modelProvider{color:var(--dsw-alias-label-caption);font-size:10.5px;line-height:14px;display:block}.VWh0dG_pricingToggle{cursor:pointer;text-align:left;background:0 0;border:none;justify-content:space-between;align-items:center;gap:10px;width:100%;padding:0;display:flex}.VWh0dG_pricingToggle:hover .VWh0dG_panelTitle,.VWh0dG_pricingToggle:focus-visible .VWh0dG_panelTitle{color:var(--dsw-static-blue-500)}.VWh0dG_rateBadge{vertical-align:1px;white-space:nowrap;border-radius:999px;align-items:center;margin-left:6px;padding:1px 6px;font-size:10px;font-weight:500;line-height:14px;display:inline-flex}.VWh0dG_rateBadgeLive{color:var(--dsw-static-green-500);background:color-mix(in srgb, var(--dsw-static-green-500) 10%, transparent)}.VWh0dG_rateBadgeBuiltin{color:var(--dsw-alias-label-tertiary);background:var(--dsw-alias-bg-module-platform)}.VWh0dG_pricingToggleText{align-items:baseline;gap:10px;min-width:0;display:flex}.VWh0dG_pricingChevron{width:16px;height:16px;color:var(--dsw-alias-label-tertiary);flex:none;transition:transform .16s}.VWh0dG_pricingChevronOpen{transform:rotate(180deg)}.VWh0dG_bandPrice{align-items:baseline;gap:6px;display:inline-flex}.VWh0dG_bandPriceOff{color:var(--dsw-alias-label-caption)}.VWh0dG_bandPriceOff:before{content:\"/\";color:var(--dsw-alias-label-dimmed);margin-right:4px}.VWh0dG_bandTag{color:var(--dsw-alias-label-secondary);flex-direction:column;gap:1px;font-size:10.5px;line-height:14px;display:inline-flex}.VWh0dG_bandTagOff{color:var(--dsw-static-green-500);font-weight:600}.VWh0dG_flatTag{color:var(--dsw-alias-label-caption);font-size:10.5px;line-height:14px}.VWh0dG_healthDot{border-radius:50%;flex:none;width:8px;height:8px;display:inline-block}.VWh0dG_healthOk{background:var(--dsw-static-green-500);box-shadow:0 0 0 3px color-mix(in srgb, var(--dsw-static-green-500) 18%, transparent)}.VWh0dG_healthBad{background:var(--dsw-static-red-500);box-shadow:0 0 0 3px color-mix(in srgb, var(--dsw-static-red-500) 18%, transparent)}.VWh0dG_healthIdle{background:var(--dsw-static-neutral-bluish-400)}.VWh0dG_dashboardRight{align-items:center;gap:8px;min-width:0;display:flex}.VWh0dG_healthBadge{white-space:nowrap;border-radius:999px;align-items:center;gap:6px;padding:3px 9px;font-size:11px;line-height:16px;display:inline-flex}.VWh0dG_healthBadgeOk{color:var(--dsw-static-green-500);background:color-mix(in srgb, var(--dsw-static-green-500) 10%, transparent)}.VWh0dG_healthBadgeBad{color:var(--dsw-static-red-500);background:color-mix(in srgb, var(--dsw-static-red-500) 10%, transparent)}.VWh0dG_planTag{color:var(--dsw-static-green-500);background:color-mix(in srgb, var(--dsw-static-green-500) 12%, transparent);border-radius:999px;align-items:center;padding:1px 8px;font-size:11px;font-weight:500;line-height:17px;display:inline-flex}.VWh0dG_uncataloguedTag{vertical-align:1px;color:var(--dsw-static-amber-500);background:color-mix(in srgb, var(--dsw-static-amber-500) 12%, transparent);border-radius:999px;margin-left:6px;padding:0 6px;font-size:10px;font-weight:600;line-height:16px;display:inline-block}.VWh0dG_balanceCell{flex-direction:column;align-items:flex-end;gap:2px;display:inline-flex}.VWh0dG_balanceDays{color:var(--dsw-alias-label-caption);white-space:nowrap;font-size:10.5px;line-height:14px}.VWh0dG_balanceDaysLow{color:var(--dsw-static-red-500);font-weight:600}body[data-zine-mode] .VWh0dG_trigger,body[data-zine-mode] .VWh0dG_railButton{display:none}body[data-zine-mode] .VWh0dG_dashboardHead{background:#000;border-bottom:2px solid #e8ff00}body[data-zine-mode] .VWh0dG_headTitleRow{align-items:center;gap:8px;margin-top:4px;display:flex}body[data-zine-mode] .VWh0dG_dashboardTitle{color:#e8ff00;letter-spacing:.04em;text-transform:uppercase;text-shadow:0 0 8px #e8ff0066;font-weight:900}body[data-zine-mode] .VWh0dG_dashboardSubtitle{color:#c9d98a;letter-spacing:.08em;text-transform:uppercase;font-size:10px}body[data-zine-mode] .VWh0dG_closeButton{color:#0a0a05;background:#ff2d95;border:1.5px solid #ff2d95;border-radius:0;box-shadow:0 0 10px #ff2d9573}body[data-zine-mode] .VWh0dG_hero{background:#000;border:2.5px solid #e8ff00;border-radius:0;position:relative;box-shadow:0 0 0 1px #0009,0 0 24px #e8ff002e}body[data-zine-mode] .VWh0dG_heroLabel{color:#c9d98a;letter-spacing:.12em;text-transform:uppercase;font-size:10px;font-weight:900}body[data-zine-mode] .VWh0dG_heroValue{color:#e8ff00;letter-spacing:-.02em;text-shadow:0 0 12px #e8ff0073;font-size:38px;font-weight:900}body[data-zine-mode] .VWh0dG_heroMeta{color:#c9d98a;letter-spacing:.06em;text-transform:uppercase;font-size:10.5px}body[data-zine-mode] .VWh0dG_heroSideLabel{color:#c9d98a;letter-spacing:.1em;text-transform:uppercase;font-size:10px;font-weight:900}body[data-zine-mode] .VWh0dG_heroSideValue{color:#e8ff00;text-shadow:0 0 6px #e8ff0059}body[data-zine-mode] .VWh0dG_delta{font-weight:900}body[data-zine-mode] .VWh0dG_deltaUp{color:#ff2d95}body[data-zine-mode] .VWh0dG_deltaDown{color:#c9d98a}body[data-zine-mode] .VWh0dG_panel{background:#000;border:2px solid #e8ff00;border-radius:0}body[data-zine-mode] .VWh0dG_trendPanel{position:relative}body[data-zine-mode] .VWh0dG_panelTitle{color:#e8ff00;letter-spacing:.06em;text-transform:uppercase;text-shadow:0 0 6px #e8ff0066;font-weight:900}body[data-zine-mode] .VWh0dG_panelHint{color:#c9d98a;letter-spacing:.08em;text-transform:uppercase;font-size:10px;font-weight:900}body[data-zine-mode] .VWh0dG_modelTableScroll{background:#000;border:1.5px solid #e8ff0080;border-radius:0}.VWh0dG_currencyToggle{border:1px solid var(--dsw-alias-border-muted,#3a4250);background:var(--dsw-alias-bg-layer-2,#232a33);border-radius:6px;align-items:center;gap:2px;margin-right:8px;padding:2px;display:inline-flex}.VWh0dG_currencyButton{color:var(--dsw-alias-text-secondary,#9aa5b1);cursor:pointer;background:0 0;border:0;border-radius:4px;padding:4px 7px;font-size:11px;font-weight:700;line-height:1}.VWh0dG_currencyButtonActive{background:var(--dsw-alias-accent-muted,#2f6fed);color:#fff}.VWh0dG_subscriptionGrid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;margin-top:10px;display:grid}.VWh0dG_subscriptionCard{border:1px solid var(--dsw-alias-border-muted,#3a4250);background:var(--dsw-alias-bg-layer-2,#232a33);border-radius:8px;padding:10px 12px}.VWh0dG_subscriptionHead{align-items:baseline;gap:8px;margin-bottom:6px;display:flex}.VWh0dG_subscriptionName{font-size:13px;font-weight:700}.VWh0dG_subscriptionPlan{color:var(--dsw-alias-text-secondary,#9aa5b1);font-size:11px}.VWh0dG_subscriptionStatus{color:var(--dsw-alias-warning,#e0a63c);margin-bottom:6px;font-size:11px}.VWh0dG_subscriptionWindow{align-items:center;gap:8px;margin-top:6px;font-size:11px;display:flex}.VWh0dG_subscriptionWindowLabel{color:var(--dsw-alias-text-secondary,#9aa5b1);flex:0 0 44px}.VWh0dG_subscriptionTrack{background:var(--dsw-alias-bg-layer-3,#1a2028);border-radius:3px;flex:1;height:5px;overflow:hidden}.VWh0dG_subscriptionFill{background:var(--dsw-alias-accent,#3b82f6);border-radius:3px;height:100%;display:block}.VWh0dG_subscriptionPct{text-align:right;font-variant-numeric:tabular-nums;flex:none;min-width:52px}.VWh0dG_subscriptionReset{color:var(--dsw-alias-text-secondary,#9aa5b1);flex:none}.VWh0dG_providerGroupList{flex-direction:column;gap:10px;display:flex}.VWh0dG_providerGroup{border:1px solid var(--dsw-alias-border-l1);background:var(--dsw-alias-bg-layer-1);border-radius:12px;padding:12px 14px}.VWh0dG_providerGroupHead{justify-content:space-between;align-items:baseline;gap:12px;display:flex}.VWh0dG_providerGroupTitle{align-items:center;gap:7px;min-width:0;display:inline-flex}.VWh0dG_providerGroupName{color:var(--dsw-alias-label-primary);font-size:13px;font-weight:600;line-height:18px}.VWh0dG_providerGroupMeta{flex:none;align-items:center;gap:10px;display:inline-flex}.VWh0dG_providerGroupBadge{color:var(--dsw-static-green-500);background:color-mix(in srgb, var(--dsw-static-green-500) 12%, transparent);border-radius:999px;align-items:center;padding:1px 8px;font-size:11px;font-weight:500;line-height:17px;display:inline-flex}.VWh0dG_providerGroupBalance{color:var(--dsw-alias-label-secondary);font-variant-numeric:tabular-nums;white-space:nowrap;align-items:baseline;gap:6px;font-size:12px;line-height:17px;display:inline-flex}.VWh0dG_providerGroupBalanceLabel{color:var(--dsw-alias-label-caption);font-size:11px;line-height:17px}.VWh0dG_roundsFlagBadge{color:#fff;background:#ef4444;border-radius:999px;margin-left:8px;padding:1px 7px;font-size:10px;font-weight:800}.VWh0dG_rounds{margin-top:10px}.VWh0dG_roundsBars{align-items:flex-end;gap:3px;height:110px;padding:4px 2px 0;display:flex;overflow-x:auto}.VWh0dG_roundsBarCol{flex-direction:column;flex:1 0 28px;justify-content:flex-end;align-items:stretch;height:100%;display:flex}.VWh0dG_roundsBarLabel{text-align:center;color:var(--dsw-alias-text-secondary,#9aa5b1);white-space:nowrap;text-overflow:ellipsis;max-width:100%;margin-bottom:2px;font-size:8px;line-height:1;overflow:hidden}.VWh0dG_roundsBarWrap{flex:1;align-items:flex-end;min-height:0;display:flex}.VWh0dG_roundsBar{background:var(--dsw-alias-accent,#3b82f6);border-radius:2px 2px 0 0;width:100%;min-height:2px;position:relative}.VWh0dG_roundsBarFlagged{outline-offset:1px;background:#ef4444;border-radius:2px 2px 0 0;outline:1.5px solid #ef4444;width:100%;min-height:2px;position:relative}.VWh0dG_roundsFlagMark{background:#ef4444;border-radius:50%;width:7px;height:7px;position:absolute;top:-3px;right:-3px;box-shadow:0 0 4px #ef4444}.VWh0dG_roundsAxis{color:var(--dsw-alias-text-secondary,#9aa5b1);justify-content:space-between;margin-top:6px;font-size:10px;display:flex}.VWh0dG_roundsEmpty{color:var(--dsw-alias-text-secondary,#9aa5b1);margin-top:10px;font-size:12px}.VWh0dG_heatmap{margin-top:10px}.VWh0dG_heatmapGrid{grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;display:grid}.VWh0dG_heatmapCellEmpty{background:var(--dsw-alias-bg-layer-1);height:30px;color:var(--dsw-alias-label-dimmed,#6b7480);font-variant-numeric:tabular-nums;border-radius:8px;justify-content:center;align-items:center;font-size:11px;display:flex}.VWh0dG_heatmapCell{font-variant-numeric:tabular-nums;cursor:pointer;border:0;border-radius:8px;justify-content:center;align-items:center;height:30px;padding:0;font-size:11px;display:flex}.VWh0dG_heatmapCell[data-level=\"0\"],.VWh0dG_heatmapCell[data-level=\"1\"],.VWh0dG_heatmapCell[data-level=\"2\"]{color:var(--dsw-alias-label-primary)}.VWh0dG_heatmapCell[data-level=\"3\"],.VWh0dG_heatmapCell[data-level=\"4\"]{color:var(--dsw-static-neutral-bluish-00,#fff)}.VWh0dG_heatmapFooter{color:var(--dsw-alias-text-secondary,#9aa5b1);align-items:center;gap:8px;margin-top:10px;font-size:10px;display:flex}.VWh0dG_heatmapLegend{gap:3px;display:inline-flex}.VWh0dG_heatmapLegend i{border-radius:4px;width:14px;height:14px;display:block}.VWh0dG_heatmapHover{font-variant-numeric:tabular-nums;margin-left:auto}@media (width<=640px){.VWh0dG_kpiGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.VWh0dG_hero{flex-direction:column;align-items:flex-start;gap:14px}.VWh0dG_heroSide{flex-direction:row;gap:20px}}";
 		const tagId = "@kenz1117/dsh-ui-usage-billing/UsageBilling.module.css";
 		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId) + "]") === null) {
 			const tag = document.createElement("style");
@@ -34,119 +34,171 @@ window.__ModuleLoader__.load({
 			document.head.appendChild(tag);
 		}
 		var UsageBilling_module_css_default = {
-			"chartGrid": "VWh0dG_chartGrid",
-			"pricingTable": "VWh0dG_pricingTable",
-			"rateBadgeBuiltin": "VWh0dG_rateBadgeBuiltin",
-			"chartLegendBar": "VWh0dG_chartLegendBar",
+			"providerGroupBalance": "VWh0dG_providerGroupBalance",
+			"chartCrosshair": "VWh0dG_chartCrosshair",
+			"panelHead": "VWh0dG_panelHead",
+			"triggerAmountSub": "VWh0dG_triggerAmountSub",
+			"heatmapCellEmpty": "VWh0dG_heatmapCellEmpty",
+			"subscriptionTrack": "VWh0dG_subscriptionTrack",
 			"numCol": "VWh0dG_numCol",
-			"budgetFill": "VWh0dG_budgetFill",
-			"modelDot": "VWh0dG_modelDot",
-			"uncataloguedTag": "VWh0dG_uncataloguedTag",
-			"trendPanel": "VWh0dG_trendPanel",
-			"kpiTile": "VWh0dG_kpiTile",
-			"healthDot": "VWh0dG_healthDot",
-			"triggerMeta": "VWh0dG_triggerMeta",
-			"heroSide": "VWh0dG_heroSide",
-			"tableScroll": "VWh0dG_tableScroll",
-			"dashboardRight": "VWh0dG_dashboardRight",
-			"modelProvider": "VWh0dG_modelProvider",
-			"costCol": "VWh0dG_costCol",
-			"chartStack": "VWh0dG_chartStack",
-			"chartLine": "VWh0dG_chartLine",
-			"kpiGreen": "VWh0dG_kpiGreen",
-			"dashboardModal": "VWh0dG_dashboardModal",
-			"trigger": "VWh0dG_trigger",
-			"rangeToggle": "VWh0dG_rangeToggle",
-			"budgetInputWrap": "VWh0dG_budgetInputWrap",
-			"modelName": "VWh0dG_modelName",
-			"planTag": "VWh0dG_planTag",
-			"heroSideItem": "VWh0dG_heroSideItem",
-			"rangeButtonActive": "VWh0dG_rangeButtonActive",
-			"hero": "VWh0dG_hero",
-			"switchKnob": "VWh0dG_switchKnob",
-			"chartTooltipRow": "VWh0dG_chartTooltipRow",
+			"rangeButton": "VWh0dG_rangeButton",
+			"healthOk": "VWh0dG_healthOk",
 			"chartLegendLine": "VWh0dG_chartLegendLine",
-			"modelTableScroll": "VWh0dG_modelTableScroll",
-			"chartWrap": "VWh0dG_chartWrap",
-			"chartTooltip": "VWh0dG_chartTooltip",
-			"heroMeta": "VWh0dG_heroMeta",
-			"healthBad": "VWh0dG_healthBad",
-			"budgetFillOver": "VWh0dG_budgetFillOver",
-			"closeButton": "VWh0dG_closeButton",
-			"budgetLabel": "VWh0dG_budgetLabel",
-			"chartTooltipDate": "VWh0dG_chartTooltipDate",
+			"switchOn": "VWh0dG_switchOn",
+			"rangeButtonActive": "VWh0dG_rangeButtonActive",
+			"rateBadgeBuiltin": "VWh0dG_rateBadgeBuiltin",
+			"flatTag": "VWh0dG_flatTag",
 			"balanceDays": "VWh0dG_balanceDays",
-			"heroSideLabel": "VWh0dG_heroSideLabel",
-			"heroMain": "VWh0dG_heroMain",
-			"panelHead": "VWh0dG_panelHead",
-			"pricingChevron": "VWh0dG_pricingChevron",
-			"dashboard": "VWh0dG_dashboard",
+			"triggerMeta": "VWh0dG_triggerMeta",
+			"kpiLabel": "VWh0dG_kpiLabel",
+			"bandPriceOff": "VWh0dG_bandPriceOff",
+			"triggerAmount": "VWh0dG_triggerAmount",
+			"budgetFillOver": "VWh0dG_budgetFillOver",
+			"bandTagOff": "VWh0dG_bandTagOff",
+			"subscriptionPlan": "VWh0dG_subscriptionPlan",
+			"rounds": "VWh0dG_rounds",
+			"dashboardHead": "VWh0dG_dashboardHead",
 			"chartSvg": "VWh0dG_chartSvg",
-			"kpiGrid": "VWh0dG_kpiGrid",
-			"heroLabel": "VWh0dG_heroLabel",
-			"chartBar": "VWh0dG_chartBar",
-			"switch": "VWh0dG_switch",
-			"chartTooltipSwatch": "VWh0dG_chartTooltipSwatch",
+			"pricingTable": "VWh0dG_pricingTable",
 			"pricingToggle": "VWh0dG_pricingToggle",
-			"pricingToggleText": "VWh0dG_pricingToggleText",
-			"bandPriceOff": "VWh0dG_bandPriceOff",
-			"railButton": "VWh0dG_railButton",
-			"budgetHead": "VWh0dG_budgetHead",
-			"pricingChevronOpen": "VWh0dG_pricingChevronOpen",
-			"triggerAmountSub": "VWh0dG_triggerAmountSub",
+			"modelTable": "VWh0dG_modelTable",
+			"kpiTile": "VWh0dG_kpiTile",
+			"budget": "VWh0dG_budget",
+			"hero": "VWh0dG_hero",
+			"subscriptionStatus": "VWh0dG_subscriptionStatus",
+			"dashboardRight": "VWh0dG_dashboardRight",
+			"kpiGreen": "VWh0dG_kpiGreen",
 			"emptyRow": "VWh0dG_emptyRow",
+			"heatmapLegend": "VWh0dG_heatmapLegend",
+			"chartAxisLabel": "VWh0dG_chartAxisLabel",
+			"providerGroupBalanceLabel": "VWh0dG_providerGroupBalanceLabel",
+			"budgetValue": "VWh0dG_budgetValue",
 			"deltaDown": "VWh0dG_deltaDown",
-			"dashboardSubtitle": "VWh0dG_dashboardSubtitle",
+			"currencyButton": "VWh0dG_currencyButton",
+			"pricingChevron": "VWh0dG_pricingChevron",
+			"rangeToggle": "VWh0dG_rangeToggle",
+			"budgetLabel": "VWh0dG_budgetLabel",
 			"budgetOverPulse": "VWh0dG_budgetOverPulse",
-			"chartDot": "VWh0dG_chartDot",
-			"dashboardBody": "VWh0dG_dashboardBody",
+			"pricingChevronOpen": "VWh0dG_pricingChevronOpen",
+			"heatmapFooter": "VWh0dG_heatmapFooter",
+			"triggerMonth": "VWh0dG_triggerMonth",
+			"heroMain": "VWh0dG_heroMain",
+			"budgetInputWrap": "VWh0dG_budgetInputWrap",
+			"modelProvider": "VWh0dG_modelProvider",
+			"dashboardTitle": "VWh0dG_dashboardTitle",
 			"kpiDetail": "VWh0dG_kpiDetail",
-			"rangeButton": "VWh0dG_rangeButton",
-			"heroValue": "VWh0dG_heroValue",
-			"bandTagOff": "VWh0dG_bandTagOff",
-			"bandPrice": "VWh0dG_bandPrice",
-			"kpiLabel": "VWh0dG_kpiLabel",
-			"panelTitle": "VWh0dG_panelTitle",
+			"chartTooltipRow": "VWh0dG_chartTooltipRow",
+			"currencyButtonActive": "VWh0dG_currencyButtonActive",
+			"closeButton": "VWh0dG_closeButton",
+			"deltaUp": "VWh0dG_deltaUp",
+			"chartTooltip": "VWh0dG_chartTooltip",
+			"subscriptionHead": "VWh0dG_subscriptionHead",
+			"roundsBarWrap": "VWh0dG_roundsBarWrap",
+			"costCol": "VWh0dG_costCol",
+			"healthDot": "VWh0dG_healthDot",
+			"headTitleRow": "VWh0dG_headTitleRow",
+			"roundsBarCol": "VWh0dG_roundsBarCol",
+			"healthBadgeBad": "VWh0dG_healthBadgeBad",
 			"chartEmpty": "VWh0dG_chartEmpty",
-			"chartCrosshair": "VWh0dG_chartCrosshair",
-			"triggerDivider": "VWh0dG_triggerDivider",
-			"budgetTrack": "VWh0dG_budgetTrack",
-			"rateBadge": "VWh0dG_rateBadge",
-			"healthOk": "VWh0dG_healthOk",
-			"dashboardTitle": "VWh0dG_dashboardTitle",
-			"chartAxisLabel": "VWh0dG_chartAxisLabel",
-			"switchOn": "VWh0dG_switchOn",
+			"heatmapGrid": "VWh0dG_heatmapGrid",
+			"subscriptionGrid": "VWh0dG_subscriptionGrid",
+			"subscriptionWindow": "VWh0dG_subscriptionWindow",
+			"chartLegend": "VWh0dG_chartLegend",
+			"subscriptionFill": "VWh0dG_subscriptionFill",
+			"panelTitle": "VWh0dG_panelTitle",
+			"roundsBarLabel": "VWh0dG_roundsBarLabel",
+			"heatmapCell": "VWh0dG_heatmapCell",
+			"heroLabel": "VWh0dG_heroLabel",
+			"heroValue": "VWh0dG_heroValue",
+			"heroSideItem": "VWh0dG_heroSideItem",
+			"modelDot": "VWh0dG_modelDot",
+			"providerGroupMeta": "VWh0dG_providerGroupMeta",
 			"healthBadgeOk": "VWh0dG_healthBadgeOk",
-			"healthBadgeBad": "VWh0dG_healthBadgeBad",
+			"triggerIcon": "VWh0dG_triggerIcon",
+			"healthBadge": "VWh0dG_healthBadge",
+			"budgetHead": "VWh0dG_budgetHead",
 			"balanceCell": "VWh0dG_balanceCell",
-			"budget": "VWh0dG_budget",
-			"bandTag": "VWh0dG_bandTag",
-			"delta": "VWh0dG_delta",
-			"rateBadgeLive": "VWh0dG_rateBadgeLive",
-			"triggerAmount": "VWh0dG_triggerAmount",
-			"triggerToday": "VWh0dG_triggerToday",
+			"heroSide": "VWh0dG_heroSide",
+			"currencyToggle": "VWh0dG_currencyToggle",
+			"railButton": "VWh0dG_railButton",
+			"roundsEmpty": "VWh0dG_roundsEmpty",
+			"heatmap": "VWh0dG_heatmap",
+			"subscriptionWindowLabel": "VWh0dG_subscriptionWindowLabel",
+			"chartTooltipSwatch": "VWh0dG_chartTooltipSwatch",
+			"chartBar": "VWh0dG_chartBar",
+			"subscriptionCard": "VWh0dG_subscriptionCard",
+			"heroSideLabel": "VWh0dG_heroSideLabel",
+			"modelTableScroll": "VWh0dG_modelTableScroll",
+			"trigger": "VWh0dG_trigger",
+			"chartTooltipDate": "VWh0dG_chartTooltipDate",
+			"bandPrice": "VWh0dG_bandPrice",
+			"trendPanel": "VWh0dG_trendPanel",
 			"panel": "VWh0dG_panel",
-			"budgetUnit": "VWh0dG_budgetUnit",
-			"heroSideValue": "VWh0dG_heroSideValue",
-			"budgetInput": "VWh0dG_budgetInput",
-			"chartLegend": "VWh0dG_chartLegend",
-			"modelTable": "VWh0dG_modelTable",
+			"providerGroupList": "VWh0dG_providerGroupList",
+			"roundsBars": "VWh0dG_roundsBars",
+			"dashboardSubtitle": "VWh0dG_dashboardSubtitle",
+			"healthIdle": "VWh0dG_healthIdle",
+			"roundsAxis": "VWh0dG_roundsAxis",
 			"budgetControls": "VWh0dG_budgetControls",
-			"modelCell": "VWh0dG_modelCell",
+			"chartLine": "VWh0dG_chartLine",
+			"balanceDaysLow": "VWh0dG_balanceDaysLow",
+			"providerGroupBadge": "VWh0dG_providerGroupBadge",
+			"heroSideValue": "VWh0dG_heroSideValue",
+			"pricingToggleText": "VWh0dG_pricingToggleText",
 			"panelHint": "VWh0dG_panelHint",
-			"budgetValue": "VWh0dG_budgetValue",
+			"chartWrap": "VWh0dG_chartWrap",
+			"bandTag": "VWh0dG_bandTag",
+			"triggerDivider": "VWh0dG_triggerDivider",
+			"heatmapHover": "VWh0dG_heatmapHover",
+			"kpiValue": "VWh0dG_kpiValue",
+			"budgetUnit": "VWh0dG_budgetUnit",
+			"chartLegendBar": "VWh0dG_chartLegendBar",
+			"switch": "VWh0dG_switch",
+			"modelName": "VWh0dG_modelName",
+			"chartStack": "VWh0dG_chartStack",
+			"roundsBar": "VWh0dG_roundsBar",
+			"budgetFill": "VWh0dG_budgetFill",
+			"roundsFlagMark": "VWh0dG_roundsFlagMark",
+			"dashboard": "VWh0dG_dashboard",
+			"budgetInput": "VWh0dG_budgetInput",
 			"na": "VWh0dG_na",
-			"flatTag": "VWh0dG_flatTag",
-			"healthBadge": "VWh0dG_healthBadge",
-			"balanceDaysLow": "VWh0dG_balanceDaysLow",
-			"triggerMonth": "VWh0dG_triggerMonth",
-			"headTitleRow": "VWh0dG_headTitleRow",
-			"healthIdle": "VWh0dG_healthIdle",
-			"deltaUp": "VWh0dG_deltaUp",
-			"dashboardHead": "VWh0dG_dashboardHead",
-			"triggerIcon": "VWh0dG_triggerIcon",
-			"kpiValue": "VWh0dG_kpiValue"
+			"uncataloguedTag": "VWh0dG_uncataloguedTag",
+			"subscriptionPct": "VWh0dG_subscriptionPct",
+			"providerGroupTitle": "VWh0dG_providerGroupTitle",
+			"dashboardModal": "VWh0dG_dashboardModal",
+			"dashboardBody": "VWh0dG_dashboardBody",
+			"heroMeta": "VWh0dG_heroMeta",
+			"triggerToday": "VWh0dG_triggerToday",
+			"delta": "VWh0dG_delta",
+			"planTag": "VWh0dG_planTag",
+			"providerGroup": "VWh0dG_providerGroup",
+			"modelCell": "VWh0dG_modelCell",
+			"tableScroll": "VWh0dG_tableScroll",
+			"subscriptionReset": "VWh0dG_subscriptionReset",
+			"providerGroupHead": "VWh0dG_providerGroupHead",
+			"chartDot": "VWh0dG_chartDot",
+			"budgetTrack": "VWh0dG_budgetTrack",
+			"kpiGrid": "VWh0dG_kpiGrid",
+			"rateBadge": "VWh0dG_rateBadge",
+			"chartGrid": "VWh0dG_chartGrid",
+			"providerGroupName": "VWh0dG_providerGroupName",
+			"roundsFlagBadge": "VWh0dG_roundsFlagBadge",
+			"healthBad": "VWh0dG_healthBad",
+			"roundsBarFlagged": "VWh0dG_roundsBarFlagged",
+			"switchKnob": "VWh0dG_switchKnob",
+			"rateBadgeLive": "VWh0dG_rateBadgeLive",
+			"subscriptionName": "VWh0dG_subscriptionName"
 		};
+		//#endregion
+		//#region src/client/pricing.ts
+		/**
+		* USD → CNY rate for display. Source: China Foreign Exchange Trade System
+		* mid-rate 6.7878 on 2026-08-14; rounded to 6.79. Only applies to overseas
+		* USD-priced models — domestic models never pass through this rate.
+		* The node half may refresh this at boot via `/api/billing/pricing`; until a
+		* live rate arrives the built-in value stays in force.
+		*/
+		const USD_TO_CNY = 6.79;
 		/** 运行时实时覆盖：undefined = 用内置目录与内置汇率（默认值降级）。 */
 		let liveRate;
 		let livePrices;
@@ -209,6 +261,24 @@ window.__ModuleLoader__.load({
 				},
 				peakHours: "09:00-12:00 / 14:00-18:00"
 			},
+			{
+				key: "flash-vision-exp",
+				name: "DeepSeek V4 Flash Vision (Exp)",
+				provider: "DeepSeek",
+				colorVar: "dsw-static-blue-500",
+				price: {
+					currency: "CNY",
+					input: 3,
+					cacheHit: .1,
+					output: 9,
+					offPeak: {
+						input: 1.5,
+						cacheHit: .05,
+						output: 4.5
+					}
+				},
+				peakHours: "09:00-12:00 / 14:00-18:00"
+			},
 			{
 				key: "pro",
 				name: "DeepSeek V4 Pro",
@@ -649,14 +719,35 @@ window.__ModuleLoader__.load({
 				}
 			}
 		];
+		/**
+		* 真实 provider model id → 计费目录键（`MODEL_CATALOG[].key`）的映射。未知 id
+		* 原样保留并落回 `other`（未知模型不估算费用）。聚合层（aggregate.ts）在折叠时
+		* 用同一张表把日志里的 model id 归并为目录键，客户端渲染（`modelOf`）也按它
+		* 解析，两侧共用一份映射，避免同一模型两侧不一致导致「未收录」。
+		*/
+		const MODEL_KEY_ALIASES = {
+			"deepseek-v4-flash": "flash",
+			"deepseek-v4-flash-vision-exp": "flash-vision-exp",
+			"deepseek-v4-pro": "pro",
+			"glm-5.2": "glm",
+			"qwen3.8-max": "qwen-3.8-max",
+			"qwen3.7-max": "qwen-max",
+			"qwen-max": "qwen-max",
+			"hunyuan-t1": "hunyuan-t1",
+			"step-3.7-flash": "step",
+			"seed-2.0-mini": "doubao-mini",
+			"k3": "kimi-k3",
+			"kimi-k3": "kimi-k3"
+		};
 		/** Lookup a model by its stats key; falls back to the generic `other` entry. */
 		function modelOf(key) {
-			const base = MODEL_CATALOG.find((entry) => entry.key === key) ?? (() => {
+			const resolved = MODEL_KEY_ALIASES[key] ?? key;
+			const base = MODEL_CATALOG.find((entry) => entry.key === resolved) ?? (() => {
 				const fallback = MODEL_CATALOG.at(-1);
 				if (fallback !== void 0) return fallback;
 				throw new Error("MODEL_CATALOG must not be empty");
 			})();
-			const live = livePrices?.[key];
+			const live = livePrices?.[resolved];
 			if (live === void 0) return base;
 			return {
 				...base,
@@ -707,14 +798,24 @@ window.__ModuleLoader__.load({
 			const off = entry.price.offPeak === void 0 ? peak : priceBandCost(entry.price.offPeak, buckets, entry.price.currency);
 			return peak * peakShare + off * (1 - peakShare);
 		}
-		/** Format a CNY amount with adaptive precision. */
-		function formatMoney(cny) {
-			const value = Number(cny);
-			if (!Number.isFinite(value)) return "¥0";
-			if (value >= 1e3) return `¥${value.toFixed(0)}`;
-			if (value >= 10) return `¥${value.toFixed(1)}`;
-			if (value >= .1) return `¥${value.toFixed(2)}`;
-			return `¥${value.toFixed(3)}`;
+		/** 人民币 → 美元（显示换算用）：1 USD = {@link USD_TO_CNY} CNY。 */
+		function cnyToUsd(cny) {
+			return cny / USD_TO_CNY;
+		}
+		/**
+		* Format an amount with adaptive precision and the given currency symbol.
+		* @param amount - the amount (CNY by default; pass `usd` for dollar display).
+		* @param currency - display currency; default `cny`.
+		*/
+		function formatMoney(amount, currency = "cny") {
+			const value = Number(amount);
+			if (!Number.isFinite(value)) return currency === "cny" ? "¥0" : "$0";
+			const symbol = currency === "cny" ? "¥" : "$";
+			if (value <= 0) return `${symbol}0`;
+			if (value >= 1e3) return `${symbol}${value.toFixed(0)}`;
+			if (value >= 10) return `${symbol}${value.toFixed(1)}`;
+			if (value >= .1) return `${symbol}${value.toFixed(2)}`;
+			return `${symbol}${value.toFixed(3)}`;
 		}
 		/**
 		* Format a per-1M-token price in its native currency (free when the rate is
@@ -791,9 +892,11 @@ window.__ModuleLoader__.load({
 		* Render the daily stacked cost bars plus the total-calls line.
 		* @param props.data - sorted daily rows (ascending date).
 		* @param props.models - the model legend, in bar order.
+		* @param props.currency - display currency for the cost labels.
 		*/
-		function TrendChart({ data, models = [] }) {
+		function TrendChart({ data, models = [], currency = "cny" }) {
 			const [hover, setHover] = (0, react.useState)(null);
+			const money = (cny) => formatMoney(currency === "usd" ? cnyToUsd(cny) : cny, currency);
 			const layout = (0, react.useMemo)(() => {
 				const n = data.length;
 				if (n === 0) return null;
@@ -902,7 +1005,7 @@ window.__ModuleLoader__.load({
 									y: y + 3,
 									textAnchor: "end",
 									className: UsageBilling_module_css_default.chartAxisLabel,
-									children: formatMoney(value)
+									children: money(value)
 								})] }, `cost-${idx}`);
 							}),
 							bars.map((bar) => bar.value > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
@@ -969,7 +1072,7 @@ window.__ModuleLoader__.load({
 									}),
 									model.name,
 									" ",
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: formatMoney(activePoint.byModel?.[model.key] ?? 0) })
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: money(activePoint.byModel?.[model.key] ?? 0) })
 								]
 							}, model.key)),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -977,7 +1080,7 @@ window.__ModuleLoader__.load({
 								children: [
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: UsageBilling_module_css_default.chartLegendBar }),
 									"总计 ",
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: formatMoney(activePoint.cost) })
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: money(activePoint.cost) })
 								]
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -1001,6 +1104,318 @@ window.__ModuleLoader__.load({
 			});
 		}
 		//#endregion
+		//#region src/client/round-chart.tsx
+		/**
+		* RoundCostChart: dependency-free per-turn cost bars with spike markers.
+		*
+		* One bar per turn (most recent N, newest last), height scaled to the window
+		* maximum. Turns flagged by {@link flagAnomalies} get a warning outline and a
+		* corner marker; hover shows the turn's model, cost, and window time. Styling
+		* lives in the billing CSS module (`.rounds*`).
+		*/
+		/** Local time `HH:MM`. */
+		function clock(time) {
+			const date = new Date(time);
+			const pad = (n) => String(n).padStart(2, "0");
+			return `${pad(date.getHours())}:${pad(date.getMinutes())}`;
+		}
+		/** Local date + time for the hover line. */
+		function dateTime(time) {
+			const date = new Date(time);
+			const pad = (n) => String(n).padStart(2, "0");
+			return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}`;
+		}
+		/**
+		* Render the per-turn cost bars.
+		* @param props.rounds - turns, most recent last (ascending startedAt); oldest beyond the limit are dropped.
+		* @param props.flags - spike flags matched by sessionId+turn.
+		* @param props.currency - display currency for the amount labels.
+		* @param props.t - locale function for the model label.
+		*/
+		function RoundCostChart({ rounds, flags, currency, t }) {
+			const visible = (0, react.useMemo)(() => rounds.slice(-40), [rounds]);
+			const flagKey = (0, react.useMemo)(() => new Set(flags.map((flag) => `${flag.sessionId}:${flag.turn}`)), [flags]);
+			const maxCost = (0, react.useMemo)(() => Math.max(1e-4, ...visible.map((round) => round.cost)), [visible]);
+			if (visible.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: UsageBilling_module_css_default.roundsEmpty,
+				children: [t("billing.model"), " —"]
+			});
+			const money = (cny) => formatMoney(currency === "usd" ? cnyToUsd(cny) : cny, currency);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: UsageBilling_module_css_default.rounds,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: UsageBilling_module_css_default.roundsBars,
+					role: "img",
+					"aria-label": "cost per turn",
+					children: visible.map((round) => {
+						const flagged = flagKey.has(`${round.sessionId}:${round.turn}`);
+						const height = Math.max(1, round.cost / maxCost * 100);
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: UsageBilling_module_css_default.roundsBarCol,
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: UsageBilling_module_css_default.roundsBarLabel,
+								children: money(round.cost)
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: UsageBilling_module_css_default.roundsBarWrap,
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: flagged ? UsageBilling_module_css_default.roundsBarFlagged : UsageBilling_module_css_default.roundsBar,
+									style: { height: `${height}%` },
+									"data-testid": "round-bar",
+									title: `${t("billing.model")} ${round.model} · ${money(round.cost)} · ${dateTime(round.startedAt)}${round.endedAt !== void 0 ? ` → ${clock(round.endedAt)}` : ""}`,
+									children: flagged && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: UsageBilling_module_css_default.roundsFlagMark,
+										"aria-hidden": "true"
+									})
+								})
+							})]
+						}, `${round.sessionId}:${round.turn}`);
+					})
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: UsageBilling_module_css_default.roundsAxis,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
+						t("billing.costAbbr"),
+						" ",
+						money(maxCost)
+					] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [visible.length, " 轮"] })]
+				})]
+			});
+		}
+		//#endregion
+		//#region src/client/heatmap.tsx
+		/**
+		* UsageHeatmap: dependency-free month calendar heatmap of daily cost.
+		*
+		* Styled after an "activity map": one large rounded cell per day with the
+		* date number printed inside, laid out in a 7-column grid (Sunday-first).
+		* Week-first data layout: each week is one array element of 7 cells, so the
+		* grid auto-rows place them correctly without per-cell gridColumnStart hacks.
+		* Cell intensity is the day's cost quantized to five levels against the month
+		* maximum (mint-green gradient, like the reference activity map). Leading
+		* slots before the 1st and trailing slots after the last day carry the
+		* cross-month dates as gray placeholders; future days of this month render as
+		* gray placeholders too. Hover shows the exact date and amount.
+		*/
+		const LEVEL_COLORS = [
+			"var(--dsw-alias-bg-layer-2)",
+			"color-mix(in srgb, #10b981 22%, var(--dsw-alias-bg-layer-2))",
+			"color-mix(in srgb, #10b981 45%, var(--dsw-alias-bg-layer-2))",
+			"color-mix(in srgb, #10b981 70%, var(--dsw-alias-bg-layer-2))",
+			"#10b981"
+		];
+		/** Local-time `YYYY-MM-DD` stamp (matches the dashboard's day keys). */
+		function dayStamp(date) {
+			const pad = (n) => String(n).padStart(2, "0");
+			return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+		}
+		/**
+		* Build the current-month cells arranged in week rows (Sunday-first).
+		* The grid is a complete calendar month view: leading slots before the 1st
+		* carry the previous month's date number, trailing slots after the last day
+		* carry the next month's date number, and every future day of this month is a
+		* gray placeholder — so the rectangle always fills whole weeks, like the
+		* reference activity map.
+		*/
+		function buildMonthWeeks(days, now) {
+			const byDate = /* @__PURE__ */ new Map();
+			for (const day of days) byDate.set(day.date, day.value);
+			let max = 0;
+			for (const value of byDate.values()) if (value > max) max = value;
+			const year = now.getFullYear();
+			const month = now.getMonth();
+			const today = now.getDate();
+			const daysInMonth = new Date(year, month + 1, 0).getDate();
+			const firstDow = new Date(year, month, 1).getDay();
+			const totalCells = firstDow + daysInMonth;
+			const totalWeeks = Math.ceil(totalCells / 7);
+			const weeks = [];
+			for (let week = 0; week < totalWeeks; week += 1) {
+				const row = [];
+				for (let col = 0; col < 7; col += 1) {
+					const dayNum = week * 7 + col - firstDow + 1;
+					if (dayNum < 1) {
+						const d = new Date(year, month, dayNum);
+						row.push({
+							date: dayStamp(d),
+							dayNum: d.getDate(),
+							value: 0,
+							level: 0,
+							placeholder: true
+						});
+						continue;
+					}
+					if (dayNum > daysInMonth) {
+						const d = new Date(year, month + 1, dayNum - daysInMonth);
+						row.push({
+							date: dayStamp(d),
+							dayNum: d.getDate(),
+							value: 0,
+							level: 0,
+							placeholder: true
+						});
+						continue;
+					}
+					const iso = dayStamp(new Date(year, month, dayNum));
+					const value = byDate.get(iso) ?? 0;
+					let level = 0;
+					if (value > 0 && max > 0) {
+						const scaled = Math.ceil(value / max * 4);
+						level = Math.min(4, Math.max(1, scaled));
+					}
+					const isFuture = dayNum > today;
+					row.push({
+						date: iso,
+						dayNum,
+						value: isFuture ? 0 : value,
+						level: isFuture ? 0 : level,
+						placeholder: isFuture
+					});
+				}
+				weeks.push(row);
+			}
+			return weeks;
+		}
+		/**
+		* Render the month heatmap.
+		* @param props.days - daily cost rows (keys are `YYYY-MM-DD`).
+		* @param props.currency - display currency for the hover amount.
+		* @param props.now - anchor date (defaults to today); injectable for tests.
+		* @param props.t - locale function (used for the legend labels).
+		*/
+		function UsageHeatmap({ days, currency, now, t }) {
+			const [hover, setHover] = (0, react.useState)(null);
+			const weeks = (0, react.useMemo)(() => buildMonthWeeks(days, now ?? /* @__PURE__ */ new Date()), [days, now]);
+			const money = (cny) => formatMoney(currency === "usd" ? cnyToUsd(cny) : cny, currency);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: UsageBilling_module_css_default.heatmap,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: UsageBilling_module_css_default.heatmapGrid,
+					role: "img",
+					"aria-label": "daily cost heatmap",
+					children: weeks.map((week) => week.map((cell) => {
+						if (cell.placeholder) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: UsageBilling_module_css_default.heatmapCellEmpty,
+							children: cell.dayNum
+						}, cell.date);
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							className: UsageBilling_module_css_default.heatmapCell,
+							"data-testid": "heatmap-cell",
+							"data-level": cell.level,
+							style: { background: LEVEL_COLORS[cell.level] },
+							title: `${cell.date} · ${money(cell.value)}`,
+							"aria-label": `${cell.date}: ${money(cell.value)}`,
+							onMouseEnter: () => {
+								setHover(cell);
+							},
+							onMouseLeave: () => {
+								setHover(null);
+							},
+							onFocus: () => {
+								setHover(cell);
+							},
+							onBlur: () => {
+								setHover(null);
+							},
+							children: cell.dayNum
+						}, cell.date);
+					}))
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: UsageBilling_module_css_default.heatmapFooter,
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: UsageBilling_module_css_default.heatmapLegendText,
+							children: t("billing.heatmapLess")
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: UsageBilling_module_css_default.heatmapLegend,
+							children: LEVEL_COLORS.map((color, level) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("i", { style: { background: color } }, level))
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: UsageBilling_module_css_default.heatmapLegendText,
+							children: t("billing.heatmapMore")
+						}),
+						hover !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: UsageBilling_module_css_default.heatmapHover,
+							"data-testid": "heatmap-hover",
+							children: [
+								hover.date,
+								" · ",
+								money(hover.value)
+							]
+						})
+					]
+				})]
+			});
+		}
+		//#endregion
+		//#region src/client/anomaly.ts
+		const DEFAULTS = {
+			window: 6,
+			threshold: 2,
+			reasonFactor: 1.8,
+			reasonHitDropPp: 15
+		};
+		function mean(values) {
+			if (values.length === 0) return null;
+			let sum = 0;
+			for (const value of values) sum += value;
+			return sum / values.length;
+		}
+		/** 输入侧缓存命中率（百分比）；无输入时 null。 */
+		function cacheHitRate(round) {
+			const denominator = round.cacheHit + round.cacheMiss;
+			return denominator <= 0 ? null : round.cacheHit / denominator * 100;
+		}
+		/**
+		* 标记成本异常轮次（按时间顺序传入；最近的轮次排在末尾）。
+		* @param rounds - 按起始时间升序的轮次序列（最早在前）。
+		* @param options - 窗口/阈值/归因灵敏度。
+		* @returns 异常标记数组（保持输入顺序）。
+		*/
+		function flagAnomalies(rounds, options) {
+			const opts = {
+				...DEFAULTS,
+				...options
+			};
+			const flags = [];
+			if (opts.window <= 0 || opts.threshold <= 0) return flags;
+			const baselineCosts = [];
+			const baselineOutputs = [];
+			const baselineInputs = [];
+			const baselineHits = [];
+			for (const round of rounds) {
+				if (round.cost <= 0) continue;
+				const output = round.output;
+				const input = round.input;
+				const hit = cacheHitRate(round);
+				const baselineCost = mean(baselineCosts);
+				const reasons = [];
+				if (baselineCost !== null && baselineCost > 0 && round.cost > baselineCost * opts.threshold) {
+					const baselineOutput = mean(baselineOutputs);
+					const baselineInput = mean(baselineInputs);
+					const baselineHit = mean(baselineHits);
+					if (baselineOutput !== null && baselineOutput > 0 && output > baselineOutput * opts.reasonFactor) reasons.push("output-growth");
+					if (baselineInput !== null && baselineInput > 0 && input > baselineInput * opts.reasonFactor) reasons.push("context-bloat");
+					if (baselineHit !== null && hit !== null && hit < baselineHit - opts.reasonHitDropPp) reasons.push("cache-hit-drop");
+					flags.push({
+						sessionId: round.sessionId,
+						turn: round.turn,
+						cost: round.cost,
+						reasons
+					});
+				}
+				baselineCosts.push(round.cost);
+				baselineOutputs.push(output);
+				baselineInputs.push(input);
+				if (hit !== null) baselineHits.push(hit);
+				while (baselineCosts.length > opts.window) baselineCosts.shift();
+				while (baselineOutputs.length > opts.window) baselineOutputs.shift();
+				while (baselineInputs.length > opts.window) baselineInputs.shift();
+				while (baselineHits.length > opts.window) baselineHits.shift();
+			}
+			return flags;
+		}
+		//#endregion
 		//#region src/client/UsageBilling.tsx
 		/**
 		* UsageBilling: sidebar footer trigger + full billing dashboard modal.
@@ -1024,7 +1439,7 @@ window.__ModuleLoader__.load({
 		const IDLE_HEALTH = {
 			checked: false,
 			available: false,
-			providers: 0,
+			models: 0,
 			failures: 0,
 			okProviders: [],
 			badProviders: []
@@ -1133,6 +1548,36 @@ window.__ModuleLoader__.load({
 				if (compact.includes(a)) return display;
 			}
 		}
+		/**
+		* 订阅套餐 provider id → 所属模型厂商（用于把订阅额度归并到对应厂商组）。
+		* 厂商名与 PROVIDER_ALIASES 保持一致，使订阅卡片与模型用量落在同一组下。
+		* opencode 是跨厂商订阅通道、无单一模型厂商，按自身显示名独立成组。
+		*/
+		const SUBSCRIPTION_VENDORS = {
+			"kimi-coding": "月之暗面",
+			"zai-coding-cn": "智谱 AI",
+			"zai-coding": "智谱 AI",
+			"qwen-token-plan": "阿里通义",
+			"qwen-token-plan-cn": "阿里通义",
+			"xiaomi-token-plan-ams": "小米",
+			"xiaomi-token-plan-cn": "小米",
+			"xiaomi-token-plan-sgp": "小米",
+			"volcengine-token-plan": "字节豆包",
+			"ark-token-plan": "字节豆包",
+			"doubao-token-plan": "字节豆包",
+			"ernie": "百度文心",
+			"baidu": "百度文心",
+			"wenxin": "百度文心",
+			"minimax": "MiniMax",
+			"opencode": "OpenCode",
+			"opencode-go": "OpenCode"
+		};
+		/** 订阅套餐归并到的厂商显示名；未知 id 回退为从 model id 反推或 id 本身。 */
+		function subscriptionVendorOf(provider) {
+			const mapped = SUBSCRIPTION_VENDORS[provider];
+			if (mapped !== void 0) return mapped;
+			return providerFromModelKey(provider) ?? provider;
+		}
 		/** 余额不足告警的默认阈值（人民币元）：宿主 Config 未配置时客户端兜底。 */
 		const DEFAULT_LOW_BALANCE_THRESHOLD = 50;
 		/**
@@ -1151,12 +1596,34 @@ window.__ModuleLoader__.load({
 			if (health.badProviders.some((live) => providerMatches(provider, live))) return UsageBilling_module_css_default.healthBad;
 			return UsageBilling_module_css_default.healthIdle;
 		}
+		/** 订阅额度查询状态的文案（ok 时无需额外标注，返回空串）。 */
+		function subscriptionStatusText(status, t) {
+			switch (status) {
+				case "ok": return "";
+				case "not-configured": return t("billing.subscriptionNotConfigured");
+				case "unauthorized": return t("billing.subscriptionUnauthorized");
+				case "rate-limited": return t("billing.subscriptionRateLimited");
+				case "invalid-response": return t("billing.subscriptionInvalid");
+				default: return t("billing.subscriptionUnavailable");
+			}
+		}
+		/** 订阅额度窗口的类型标签（本次 / 本周 / 本月 / 计费周期）。 */
+		function subscriptionWindowLabel(kind, t) {
+			switch (kind) {
+				case "session": return t("billing.subscriptionSession");
+				case "weekly": return t("billing.subscriptionWeekly");
+				case "monthly": return t("billing.subscriptionMonthly");
+				case "billing": return t("billing.subscriptionBilling");
+			}
+		}
 		/** Path to the usage-stats endpoint served by this plugin's node half. */
 		const USAGE_STATS_PATH = "/api/billing/usage-stats";
 		/** Path to the live-pricing endpoint served by this plugin's node half. */
 		const PRICING_PATH = "/api/billing/pricing";
 		/** Path to the account-balance endpoint served by this plugin's node half. */
 		const BALANCE_PATH = "/api/billing/balance";
+		/** Path to the subscription-plan quota endpoint served by this plugin's node half. */
+		const SUBSCRIPTIONS_PATH = "/api/billing/subscriptions";
 		/** 弹窗打开期间统计与定价的自动刷新间隔（毫秒）。 */
 		const STATS_REFRESH_INTERVAL_MS = 3e4;
 		/**
@@ -1221,7 +1688,9 @@ window.__ModuleLoader__.load({
 					...candidate.updatedAt !== void 0 ? { updatedAt: candidate.updatedAt } : {},
 					...typeof candidate.budget === "number" ? { budget: candidate.budget } : {},
 					...typeof candidate.lowBalanceThreshold === "number" ? { lowBalanceThreshold: candidate.lowBalanceThreshold } : {},
-					...Array.isArray(candidate.bySession) ? { bySession: candidate.bySession } : {}
+					...Array.isArray(candidate.bySession) ? { bySession: candidate.bySession } : {},
+					...Array.isArray(candidate.byTurn) ? { byTurn: candidate.byTurn } : {},
+					...Array.isArray(candidate.byWorkspace) ? { byWorkspace: candidate.byWorkspace } : {}
 				};
 			} catch {
 				return null;
@@ -1270,6 +1739,22 @@ window.__ModuleLoader__.load({
 			}
 		}
 		/**
+		* 拉取订阅套餐剩余额度（供订阅面板）；失败返回空列表。
+		* @returns the quota rows, or an empty list on any failure.
+		*/
+		async function fetchSubscriptions() {
+			try {
+				const response = await fetch(SUBSCRIPTIONS_PATH);
+				if (!response.ok) return [];
+				const text = await response.text();
+				const parsed = JSON.parse(text);
+				if (parsed !== null && typeof parsed === "object" && "quotas" in parsed) return parsed.quotas;
+				return [];
+			} catch {
+				return [];
+			}
+		}
+		/**
 		* Sidebar footer trigger: compact pill in wide mode, icon in rail mode.
 		* ZINE 模式下入口由主题插件的贴纸层承担，本触发器由 CSS
 		* （body[data-zine-mode] 选择器）隐藏，组件本身无 zine 分支。
@@ -1350,12 +1835,17 @@ window.__ModuleLoader__.load({
 		* The centered billing dashboard modal.
 		* @param props - stats, locale function, close handler, model health, balances, renderSlot.
 		*/
-		function BillingDashboard({ stats, t, onClose, health, balances, renderSlot, budgetEnabled, budgetAmount, onToggleBudget, onBudgetAmount }) {
+		function BillingDashboard({ stats, t, onClose, health, balances, quotas, currency, onCurrency, turns, renderSlot, budgetEnabled, budgetAmount, onToggleBudget, onBudgetAmount }) {
 			const { total, byModel, byDay } = stats;
 			const [pricingOpen, setPricingOpen] = (0, react.useState)(false);
 			const [sessionsOpen, setSessionsOpen] = (0, react.useState)(false);
+			const [roundsOpen, setRoundsOpen] = (0, react.useState)(false);
+			const [heatmapOpen, setHeatmapOpen] = (0, react.useState)(true);
+			const [workspacesOpen, setWorkspacesOpen] = (0, react.useState)(false);
 			const [trendDays, setTrendDays] = (0, react.useState)(7);
 			const rateInfo = getRateInfo();
+			const money = (cny) => formatMoney(currency === "usd" ? cnyToUsd(cny) : cny, currency);
+			const roundFlags = (0, react.useMemo)(() => flagAnomalies([...turns].reverse()), [turns]);
 			const dailyBurn = dailyBurnRate(byDay, localDayStamp());
 			const balanceFor = (provider) => balances.find((balance) => normalizeProvider(balance.provider) === normalizeProvider(provider));
 			const renderBalance = (balance) => {
@@ -1370,7 +1860,7 @@ window.__ModuleLoader__.load({
 					className: UsageBilling_module_css_default.na,
 					children: "—"
 				});
-				const amount = balance.currency === "USD" ? `$${balance.totalBalance.toFixed(2)}` : formatMoney(balance.totalBalance);
+				const amount = balance.currency === "USD" ? `$${balance.totalBalance.toFixed(2)}` : money(balance.totalBalance);
 				const balanceCny = balance.currency === "USD" ? balance.totalBalance * rateInfo.rate : balance.totalBalance;
 				if (dailyBurn <= 0) return amount;
 				const days = Math.floor(balanceCny / dailyBurn);
@@ -1402,6 +1892,10 @@ window.__ModuleLoader__.load({
 				return out;
 			}, [trendDays]);
 			const latestDate = trendDates.at(-1) ?? today;
+			const heatmapDays = (0, react.useMemo)(() => Object.entries(byDay).map(([date, day]) => ({
+				date,
+				value: day.cost
+			})), [byDay]);
 			const trend = (0, react.useMemo)(() => trendDates.map((date) => {
 				const byModel = {};
 				const dayModels = stats.byDayModels?.[date];
@@ -1447,6 +1941,42 @@ window.__ModuleLoader__.load({
 				...row,
 				color: CHART_PALETTE[index % CHART_PALETTE.length] ?? "#8b95a3"
 			})), [byModel]);
+			const providerGroups = (0, react.useMemo)(() => {
+				const subscriptionsByVendor = /* @__PURE__ */ new Map();
+				for (const quota of quotas) {
+					if (quota.status === "not-configured") continue;
+					const vendor = subscriptionVendorOf(quota.provider);
+					const list = subscriptionsByVendor.get(vendor);
+					if (list === void 0) subscriptionsByVendor.set(vendor, [quota]);
+					else list.push(quota);
+				}
+				const modelsByVendor = /* @__PURE__ */ new Map();
+				for (const row of modelRows) {
+					const list = modelsByVendor.get(row.provider);
+					if (list === void 0) modelsByVendor.set(row.provider, [row]);
+					else list.push(row);
+				}
+				return [...new Set([...modelsByVendor.keys(), ...subscriptionsByVendor.keys()])].map((name) => ({
+					name,
+					models: modelsByVendor.get(name) ?? [],
+					subscriptions: subscriptionsByVendor.get(name) ?? [],
+					balance: balanceFor(name),
+					dot: providerDot(health, name)
+				})).sort((a, b) => {
+					const costOf = (group) => group.models.reduce((sum, m) => sum + (m.actual ?? m.estimated), 0);
+					const diff = costOf(b) - costOf(a);
+					if (diff !== 0) return diff;
+					if (a.models.length === 0 && b.models.length === 0) return 0;
+					if (b.models.length === 0) return -1;
+					if (a.models.length === 0) return 1;
+					return a.name.localeCompare(b.name, "zh");
+				});
+			}, [
+				modelRows,
+				quotas,
+				balances,
+				health
+			]);
 			const estimatedTotal = modelRows.reduce((sum, row) => sum + row.estimated, 0);
 			const displayTotal = total.cost > 0 ? total.cost : estimatedTotal;
 			const avgPerCall = total.calls > 0 ? displayTotal / total.calls : 0;
@@ -1488,26 +2018,45 @@ window.__ModuleLoader__.load({
 							})
 						] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							className: UsageBilling_module_css_default.dashboardRight,
-							children: [health.checked && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-								className: clsx(UsageBilling_module_css_default.healthBadge, health.available ? UsageBilling_module_css_default.healthBadgeOk : UsageBilling_module_css_default.healthBadgeBad),
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: clsx(UsageBilling_module_css_default.healthDot, health.available ? UsageBilling_module_css_default.healthOk : UsageBilling_module_css_default.healthBad),
-									"aria-hidden": "true"
-								}), health.available ? `${health.providers} 模型可用${health.failures > 0 ? ` · ${health.failures} 失效` : ""}` : `${health.failures} 模型不可用`]
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-								type: "button",
-								className: UsageBilling_module_css_default.closeButton,
-								"aria-label": t("billing.close"),
-								"data-testid": "billing-close",
-								onClick: onClose,
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
-									viewBox: "0 0 24 24",
-									fill: "none",
-									stroke: "currentColor",
-									"aria-hidden": "true",
-									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M18 6 6 18" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m6 6 12 12" })]
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: UsageBilling_module_css_default.currencyToggle,
+									role: "group",
+									"aria-label": t("billing.currency"),
+									children: ["cny", "usd"].map((unit) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										type: "button",
+										className: clsx(UsageBilling_module_css_default.currencyButton, currency === unit && UsageBilling_module_css_default.currencyButtonActive),
+										"aria-pressed": currency === unit,
+										"data-testid": `billing-currency-${unit}`,
+										title: unit === "cny" ? t("billing.currencyCny") : t("billing.currencyUsd"),
+										onClick: () => {
+											onCurrency(unit);
+										},
+										children: unit === "cny" ? "¥" : "$"
+									}, unit))
+								}),
+								health.checked && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+									className: clsx(UsageBilling_module_css_default.healthBadge, health.available ? UsageBilling_module_css_default.healthBadgeOk : UsageBilling_module_css_default.healthBadgeBad),
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: clsx(UsageBilling_module_css_default.healthDot, health.available ? UsageBilling_module_css_default.healthOk : UsageBilling_module_css_default.healthBad),
+										"aria-hidden": "true"
+									}), health.available ? `${health.models} 模型可用${health.failures > 0 ? ` · ${health.failures} 厂商失效` : ""}` : `${health.failures} 厂商不可用`]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									className: UsageBilling_module_css_default.closeButton,
+									"aria-label": t("billing.close"),
+									"data-testid": "billing-close",
+									onClick: onClose,
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+										viewBox: "0 0 24 24",
+										fill: "none",
+										stroke: "currentColor",
+										"aria-hidden": "true",
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M18 6 6 18" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m6 6 12 12" })]
+									})
 								})
-							})]
+							]
 						})]
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: UsageBilling_module_css_default.dashboardBody,
@@ -1526,7 +2075,7 @@ window.__ModuleLoader__.load({
 											}),
 											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 												className: UsageBilling_module_css_default.heroValue,
-												children: formatMoney(monthCost)
+												children: money(monthCost)
 											}),
 											/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 												className: UsageBilling_module_css_default.heroMeta,
@@ -1547,7 +2096,7 @@ window.__ModuleLoader__.load({
 												children: t("billing.yearCost")
 											}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 												className: UsageBilling_module_css_default.heroSideValue,
-												children: formatMoney(yearCost)
+												children: money(yearCost)
 											})]
 										}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 											className: UsageBilling_module_css_default.heroSideItem,
@@ -1556,7 +2105,7 @@ window.__ModuleLoader__.load({
 												children: t("billing.todayCost")
 											}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 												className: UsageBilling_module_css_default.heroSideValue,
-												children: [formatMoney(todayCost), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+												children: [money(todayCost), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 													className: clsx(UsageBilling_module_css_default.delta, deltaPct >= 0 ? UsageBilling_module_css_default.deltaUp : UsageBilling_module_css_default.deltaDown),
 													children: [
 														deltaPct >= 0 ? "▲" : "▼",
@@ -1609,9 +2158,9 @@ window.__ModuleLoader__.load({
 													className: UsageBilling_module_css_default.budgetValue,
 													"data-testid": "billing-budget-value",
 													children: [
-														formatMoney(monthCost),
+														money(monthCost),
 														" / ",
-														formatMoney(budgetAmount),
+														money(budgetAmount),
 														" · ",
 														pct.toFixed(1),
 														"%"
@@ -1702,7 +2251,7 @@ window.__ModuleLoader__.load({
 											}),
 											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 												className: UsageBilling_module_css_default.kpiValue,
-												children: formatMoney(avgPerCall)
+												children: money(avgPerCall)
 											}),
 											/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 												className: UsageBilling_module_css_default.kpiDetail,
@@ -1770,19 +2319,20 @@ window.__ModuleLoader__.load({
 									]
 								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TrendChart, {
 									data: trend,
-									models: chartModels
+									models: chartModels,
+									currency
 								})]
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
 								className: UsageBilling_module_css_default.panel,
-								"data-testid": "billing-panel-models",
+								"data-testid": "billing-panel-providers",
 								children: [
 									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 										className: UsageBilling_module_css_default.panelHead,
 										children: [
 											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
 												className: UsageBilling_module_css_default.panelTitle,
-												children: t("billing.models")
+												children: t("billing.providerBilling")
 											}),
 											renderSlot("billing.dashboard.decor", { position: "models" }),
 											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -1791,95 +2341,328 @@ window.__ModuleLoader__.load({
 											})
 										]
 									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-										className: clsx(UsageBilling_module_css_default.tableScroll, UsageBilling_module_css_default.modelTableScroll),
-										"data-testid": "billing-table-scroll",
-										children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("table", {
-											className: UsageBilling_module_css_default.modelTable,
-											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [
-												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", { children: t("billing.models") }),
-												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
-													className: UsageBilling_module_css_default.numCol,
-													children: t("billing.calls")
-												}),
-												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
-													className: UsageBilling_module_css_default.numCol,
-													children: t("billing.inputTokens")
-												}),
-												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
-													className: UsageBilling_module_css_default.numCol,
-													children: t("billing.outputTokens")
-												}),
-												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
-													className: UsageBilling_module_css_default.numCol,
-													children: t("billing.cacheHitRate")
-												}),
-												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
-													className: UsageBilling_module_css_default.numCol,
-													children: t("billing.actual")
-												}),
-												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
-													className: UsageBilling_module_css_default.numCol,
-													children: t("billing.balance")
-												})
-											] }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tbody", { children: [modelRows.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
-												colSpan: 7,
-												className: UsageBilling_module_css_default.emptyRow,
-												children: t("billing.noData")
-											}) }), modelRows.map((row) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [
-												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-													className: UsageBilling_module_css_default.modelCell,
-													children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-														className: clsx(UsageBilling_module_css_default.modelDot, providerDot(health, row.provider)),
-														"aria-hidden": "true"
-													}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-														className: UsageBilling_module_css_default.modelName,
-														children: [row.name, row.uncatalogued && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-															className: UsageBilling_module_css_default.uncataloguedTag,
-															"data-testid": "billing-uncatalogued-tag",
-															children: t("billing.uncatalogued")
+									providerGroups.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+										className: UsageBilling_module_css_default.emptyRow,
+										"data-testid": "billing-provider-empty",
+										children: t("billing.noData")
+									}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+										className: UsageBilling_module_css_default.providerGroupList,
+										"data-testid": "billing-provider-groups",
+										children: providerGroups.map((group) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+											className: UsageBilling_module_css_default.providerGroup,
+											"data-testid": "billing-provider-group",
+											children: [
+												/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+													className: UsageBilling_module_css_default.providerGroupHead,
+													children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+														className: UsageBilling_module_css_default.providerGroupTitle,
+														children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+															className: clsx(UsageBilling_module_css_default.healthDot, group.dot),
+															"aria-hidden": "true"
+														}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+															className: UsageBilling_module_css_default.providerGroupName,
+															children: group.name
 														})]
-													}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-														className: UsageBilling_module_css_default.modelProvider,
-														children: row.provider
-													})] })]
-												}) }),
-												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
-													className: UsageBilling_module_css_default.numCol,
-													children: row.calls.toLocaleString()
-												}),
-												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
-													className: UsageBilling_module_css_default.numCol,
-													children: formatTokens(row.input)
-												}),
-												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
-													className: UsageBilling_module_css_default.numCol,
-													children: formatTokens(row.output)
-												}),
-												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
-													className: UsageBilling_module_css_default.numCol,
-													children: formatPercent(row.cacheHitRate)
+													}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+														className: UsageBilling_module_css_default.providerGroupMeta,
+														children: [group.subscriptions.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+															className: UsageBilling_module_css_default.providerGroupBadge,
+															"data-testid": "billing-provider-sub-count",
+															children: [group.subscriptions.length, " 套餐"]
+														}), group.balance !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+															className: UsageBilling_module_css_default.providerGroupBalance,
+															"data-testid": "billing-provider-balance",
+															children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+																className: UsageBilling_module_css_default.providerGroupBalanceLabel,
+																children: t("billing.balance")
+															}), renderBalance(group.balance)]
+														})]
+													})]
 												}),
-												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
-													className: UsageBilling_module_css_default.numCol,
-													children: row.plan ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-														className: UsageBilling_module_css_default.planTag,
-														children: "订阅包含"
-													}) : row.actual !== void 0 ? formatMoney(row.actual) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-														className: UsageBilling_module_css_default.na,
-														children: "—"
+												group.models.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+													className: clsx(UsageBilling_module_css_default.tableScroll, UsageBilling_module_css_default.modelTableScroll),
+													"data-testid": "billing-table-scroll",
+													children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("table", {
+														className: UsageBilling_module_css_default.modelTable,
+														children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [
+															/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", { children: t("billing.model") }),
+															/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+																className: UsageBilling_module_css_default.numCol,
+																children: t("billing.calls")
+															}),
+															/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+																className: UsageBilling_module_css_default.numCol,
+																children: t("billing.inputTokens")
+															}),
+															/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+																className: UsageBilling_module_css_default.numCol,
+																children: t("billing.outputTokens")
+															}),
+															/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+																className: UsageBilling_module_css_default.numCol,
+																children: t("billing.cacheHitRate")
+															}),
+															/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+																className: UsageBilling_module_css_default.numCol,
+																children: t("billing.actual")
+															})
+														] }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", { children: group.models.map((row) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [
+															/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+																className: UsageBilling_module_css_default.modelCell,
+																children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+																	className: UsageBilling_module_css_default.modelName,
+																	children: [row.name, row.uncatalogued && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+																		className: UsageBilling_module_css_default.uncataloguedTag,
+																		"data-testid": "billing-uncatalogued-tag",
+																		children: t("billing.uncatalogued")
+																	})]
+																}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+																	className: UsageBilling_module_css_default.modelProvider,
+																	children: row.provider
+																})] })
+															}) }),
+															/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+																className: UsageBilling_module_css_default.numCol,
+																children: row.calls.toLocaleString()
+															}),
+															/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+																className: UsageBilling_module_css_default.numCol,
+																children: formatTokens(row.input)
+															}),
+															/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+																className: UsageBilling_module_css_default.numCol,
+																children: formatTokens(row.output)
+															}),
+															/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+																className: UsageBilling_module_css_default.numCol,
+																children: formatPercent(row.cacheHitRate)
+															}),
+															/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+																className: UsageBilling_module_css_default.numCol,
+																children: row.plan ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+																	className: UsageBilling_module_css_default.planTag,
+																	children: "订阅包含"
+																}) : row.actual !== void 0 ? money(row.actual) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+																	className: UsageBilling_module_css_default.na,
+																	children: "—"
+																})
+															})
+														] }, row.key)) })]
 													})
 												}),
-												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
-													className: UsageBilling_module_css_default.numCol,
-													children: renderBalance(balanceFor(row.provider))
+												group.subscriptions.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+													className: UsageBilling_module_css_default.subscriptionGrid,
+													"data-testid": "billing-subscriptions-grid",
+													children: group.subscriptions.map((quota) => {
+														const statusText = subscriptionStatusText(quota.status, t);
+														return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+															className: UsageBilling_module_css_default.subscriptionCard,
+															"data-testid": "billing-subscription-card",
+															children: [
+																/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+																	className: UsageBilling_module_css_default.subscriptionHead,
+																	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+																		className: UsageBilling_module_css_default.subscriptionName,
+																		children: quota.displayName
+																	}), quota.plan !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+																		className: UsageBilling_module_css_default.subscriptionPlan,
+																		children: quota.plan
+																	})]
+																}),
+																statusText !== "" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+																	className: UsageBilling_module_css_default.subscriptionStatus,
+																	children: statusText
+																}),
+																quota.windows.length === 0 && statusText === "" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+																	className: UsageBilling_module_css_default.subscriptionStatus,
+																	children: t("billing.subscriptionNoApi")
+																}),
+																quota.windows.map((window) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+																	className: UsageBilling_module_css_default.subscriptionWindow,
+																	children: [
+																		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+																			className: UsageBilling_module_css_default.subscriptionWindowLabel,
+																			children: subscriptionWindowLabel(window.kind, t)
+																		}),
+																		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+																			className: UsageBilling_module_css_default.subscriptionTrack,
+																			"aria-hidden": "true",
+																			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+																				className: UsageBilling_module_css_default.subscriptionFill,
+																				style: { width: `${Math.min(100, Math.max(0, window.remainingPercent))}%` }
+																			})
+																		}),
+																		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+																			className: UsageBilling_module_css_default.subscriptionPct,
+																			children: t("billing.subscriptionRemaining").replace("{pct}", String(window.remainingPercent))
+																		}),
+																		window.resetsAt !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+																			className: UsageBilling_module_css_default.subscriptionReset,
+																			children: t("billing.subscriptionReset").replace("{date}", window.resetsAt.slice(0, 10))
+																		})
+																	]
+																}, window.kind))
+															]
+														}, quota.provider);
+													})
 												})
-											] }, row.key))] })]
-										})
+											]
+										}, group.name))
 									}),
 									renderSlot("billing.dashboard.decor", { position: "footer" })
 								]
 							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+								className: UsageBilling_module_css_default.panel,
+								"data-testid": "billing-panel-heatmap",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+									type: "button",
+									className: UsageBilling_module_css_default.pricingToggle,
+									"data-testid": "billing-heatmap-toggle",
+									onClick: () => {
+										setHeatmapOpen((prev) => !prev);
+									},
+									"aria-expanded": heatmapOpen,
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: UsageBilling_module_css_default.pricingToggleText,
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: UsageBilling_module_css_default.panelTitle,
+											children: t("billing.heatmap")
+										})
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+										className: clsx(UsageBilling_module_css_default.pricingChevron, heatmapOpen && UsageBilling_module_css_default.pricingChevronOpen),
+										viewBox: "0 0 24 24",
+										fill: "none",
+										stroke: "currentColor",
+										"aria-hidden": "true",
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m6 9 6 6 6-6" })
+									})]
+								}), heatmapOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UsageHeatmap, {
+									days: heatmapDays,
+									currency,
+									t
+								})]
+							}),
+							turns.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+								className: UsageBilling_module_css_default.panel,
+								"data-testid": "billing-panel-rounds",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+									type: "button",
+									className: UsageBilling_module_css_default.pricingToggle,
+									"data-testid": "billing-rounds-toggle",
+									onClick: () => {
+										setRoundsOpen((prev) => !prev);
+									},
+									"aria-expanded": roundsOpen,
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+										className: UsageBilling_module_css_default.pricingToggleText,
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: UsageBilling_module_css_default.panelTitle,
+											children: t("billing.rounds")
+										}), roundFlags.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+											className: UsageBilling_module_css_default.roundsFlagBadge,
+											"data-testid": "billing-rounds-flag-count",
+											children: [
+												roundFlags.length,
+												" ",
+												t("billing.anomaly")
+											]
+										})]
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+										className: clsx(UsageBilling_module_css_default.pricingChevron, roundsOpen && UsageBilling_module_css_default.pricingChevronOpen),
+										viewBox: "0 0 24 24",
+										fill: "none",
+										stroke: "currentColor",
+										"aria-hidden": "true",
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m6 9 6 6 6-6" })
+									})]
+								}), roundsOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RoundCostChart, {
+									rounds: turns,
+									flags: roundFlags,
+									currency,
+									t
+								})]
+							}),
+							stats.byWorkspace !== void 0 && stats.byWorkspace.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+								className: UsageBilling_module_css_default.panel,
+								"data-testid": "billing-panel-workspaces",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+									type: "button",
+									className: UsageBilling_module_css_default.pricingToggle,
+									"data-testid": "billing-workspaces-toggle",
+									onClick: () => {
+										setWorkspacesOpen((prev) => !prev);
+									},
+									"aria-expanded": workspacesOpen,
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: UsageBilling_module_css_default.pricingToggleText,
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: UsageBilling_module_css_default.panelTitle,
+											children: t("billing.workspaces")
+										})
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+										className: clsx(UsageBilling_module_css_default.pricingChevron, workspacesOpen && UsageBilling_module_css_default.pricingChevronOpen),
+										viewBox: "0 0 24 24",
+										fill: "none",
+										stroke: "currentColor",
+										"aria-hidden": "true",
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m6 9 6 6 6-6" })
+									})]
+								}), workspacesOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: UsageBilling_module_css_default.tableScroll,
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("table", {
+										className: UsageBilling_module_css_default.modelTable,
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", { children: t("billing.project") }),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+												className: UsageBilling_module_css_default.numCol,
+												children: t("billing.calls")
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+												className: UsageBilling_module_css_default.numCol,
+												children: t("billing.inputTokens")
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+												className: UsageBilling_module_css_default.numCol,
+												children: t("billing.outputTokens")
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+												className: UsageBilling_module_css_default.numCol,
+												children: t("billing.actual")
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+												className: UsageBilling_module_css_default.numCol,
+												children: t("billing.lastActive")
+											})
+										] }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", { children: stats.byWorkspace.map((row) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+												className: UsageBilling_module_css_default.modelName,
+												children: row.name
+											}) }),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+												className: UsageBilling_module_css_default.numCol,
+												children: row.calls.toLocaleString()
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+												className: UsageBilling_module_css_default.numCol,
+												children: formatTokens(row.input)
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+												className: UsageBilling_module_css_default.numCol,
+												children: formatTokens(row.output)
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+												className: UsageBilling_module_css_default.numCol,
+												children: money(row.cost)
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+												className: UsageBilling_module_css_default.numCol,
+												children: row.lastActive > 0 ? `${localDayStamp(row.lastActive)}` : "—"
+											})
+										] }, row.name)) })]
+									})
+								})]
+							}),
 							stats.bySession !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
 								className: UsageBilling_module_css_default.panel,
 								"data-testid": "billing-panel-sessions",
@@ -1947,7 +2730,7 @@ window.__ModuleLoader__.load({
 											}),
 											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
 												className: UsageBilling_module_css_default.numCol,
-												children: formatMoney(row.cost)
+												children: money(row.cost)
 											}),
 											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
 												className: UsageBilling_module_css_default.numCol,
@@ -2088,6 +2871,8 @@ window.__ModuleLoader__.load({
 			const [stats, setStats] = (0, react.useState)(EMPTY_STATS);
 			const [health, setHealth] = (0, react.useState)(IDLE_HEALTH);
 			const [balances, setBalances] = (0, react.useState)([]);
+			const [quotas, setQuotas] = (0, react.useState)([]);
+			const [currency, setCurrency] = (0, react.useState)("cny");
 			const [open, setOpen] = (0, react.useState)(false);
 			const close = (0, react.useCallback)(() => {
 				setOpen(false);
@@ -2099,6 +2884,9 @@ window.__ModuleLoader__.load({
 				fetchBalances().then((list) => {
 					if (list.length > 0) setBalances(list);
 				});
+				fetchSubscriptions().then((list) => {
+					if (list.length > 0) setQuotas(list);
+				});
 			}, []);
 			const openDashboard = (0, react.useCallback)(() => {
 				reloadStats();
@@ -2209,6 +2997,7 @@ window.__ModuleLoader__.load({
 				publishCosts
 			]);
 			(0, react.useEffect)(() => registerOpen(openDashboard), [registerOpen, openDashboard]);
+			const turns = (0, react.useMemo)(() => stats.byTurn ?? [], [stats.byTurn]);
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UsageBillingTrigger, {
 				...props,
 				onOpen: openDashboard,
@@ -2220,6 +3009,10 @@ window.__ModuleLoader__.load({
 				onClose: close,
 				health,
 				balances,
+				quotas,
+				currency,
+				onCurrency: setCurrency,
+				turns,
 				renderSlot,
 				budgetEnabled,
 				budgetAmount: effectiveBudget,
@@ -2255,6 +3048,7 @@ window.__ModuleLoader__.load({
 			"billing.sessionOverflow": "仅显示花费前 {limit} 个，共 {total} 个会话",
 			"billing.budgetOverBody": "本月花费 {cost} 已超过预算 {budget}（{pct}%）",
 			"billing.models": "模型计费明细",
+			"billing.providerBilling": "厂商计费与订阅",
 			"billing.estimated": "估算",
 			"billing.actual": "实际",
 			"billing.pricing": "模型单价表",
@@ -2282,7 +3076,35 @@ window.__ModuleLoader__.load({
 			"billing.balanceUnreachable": "查询失败",
 			"billing.uncatalogued": "未收录",
 			"billing.balanceDays": "约可撑 {days} 天",
-			"billing.balanceLowBody": "{name} 余额 {balance}，约可撑 {days} 天，请及时充值"
+			"billing.balanceLowBody": "{name} 余额 {balance}，约可撑 {days} 天，请及时充值",
+			"billing.subscriptions": "订阅套餐",
+			"billing.subscriptionNotConfigured": "未配置密钥",
+			"billing.subscriptionUnauthorized": "密钥无效",
+			"billing.subscriptionUnavailable": "查询失败",
+			"billing.subscriptionInvalid": "响应异常",
+			"billing.subscriptionRateLimited": "触发限流",
+			"billing.subscriptionSession": "本次",
+			"billing.subscriptionWeekly": "本周",
+			"billing.subscriptionMonthly": "本月",
+			"billing.subscriptionBilling": "计费周期",
+			"billing.subscriptionRemaining": "剩余 {pct}%",
+			"billing.subscriptionReset": "{date} 重置",
+			"billing.subscriptionNoApi": "该厂商暂未提供用量查询接口",
+			"billing.heatmapLess": "少",
+			"billing.heatmapMore": "多",
+			"billing.currency": "币种",
+			"billing.currencyCny": "人民币",
+			"billing.currencyUsd": "美元",
+			"billing.heatmap": "用量热力图",
+			"billing.rounds": "每轮费用",
+			"billing.anomaly": "成本突增",
+			"billing.workspaces": "工作区统计",
+			"billing.plan": "套餐",
+			"billing.remaining": "剩余",
+			"billing.unknownModel": "未定价",
+			"billing.model": "模型",
+			"billing.currentRound": "当前",
+			"billing.costAbbr": "费用"
 		};
 		const en = {
 			"billing.title": "Usage",
@@ -2309,6 +3131,7 @@ window.__ModuleLoader__.load({
 			"billing.sessionOverflow": "Top {limit} of {total} sessions by cost",
 			"billing.budgetOverBody": "This month {cost} exceeded the budget {budget} ({pct}%)",
 			"billing.models": "Model billing",
+			"billing.providerBilling": "Provider billing & subscriptions",
 			"billing.estimated": "Est.",
 			"billing.actual": "Actual",
 			"billing.pricing": "Model pricing",
@@ -2336,7 +3159,35 @@ window.__ModuleLoader__.load({
 			"billing.balanceUnreachable": "Unavailable",
 			"billing.uncatalogued": "Not catalogued",
 			"billing.balanceDays": "~{days} days left",
-			"billing.balanceLowBody": "{name} balance {balance}, ~{days} days left, please top up"
+			"billing.balanceLowBody": "{name} balance {balance}, ~{days} days left, please top up",
+			"billing.subscriptions": "Subscriptions",
+			"billing.subscriptionNotConfigured": "Key not set",
+			"billing.subscriptionUnauthorized": "Bad key",
+			"billing.subscriptionUnavailable": "Unavailable",
+			"billing.subscriptionInvalid": "Bad response",
+			"billing.subscriptionRateLimited": "Rate limited",
+			"billing.subscriptionSession": "Current",
+			"billing.subscriptionWeekly": "Weekly",
+			"billing.subscriptionMonthly": "Monthly",
+			"billing.subscriptionBilling": "Billing",
+			"billing.subscriptionRemaining": "{pct}% left",
+			"billing.subscriptionReset": "Resets {date}",
+			"billing.subscriptionNoApi": "Provider does not offer a usage API",
+			"billing.heatmapLess": "Less",
+			"billing.heatmapMore": "More",
+			"billing.currency": "Currency",
+			"billing.currencyCny": "CNY",
+			"billing.currencyUsd": "USD",
+			"billing.heatmap": "Usage heatmap",
+			"billing.rounds": "Cost per turn",
+			"billing.anomaly": "Cost spike",
+			"billing.workspaces": "Workspaces",
+			"billing.plan": "Plan",
+			"billing.remaining": "Left",
+			"billing.unknownModel": "Unpriced",
+			"billing.model": "Model",
+			"billing.currentRound": "current",
+			"billing.costAbbr": "cost"
 		};
 		//#endregion
 		//#region src/client/billing-service.ts
@@ -2444,7 +3295,7 @@ window.__ModuleLoader__.load({
 							if (!result.ok) return {
 								checked: true,
 								available: false,
-								providers: 0,
+								models: 0,
 								failures: 0,
 								okProviders: [],
 								badProviders: []
@@ -2452,7 +3303,7 @@ window.__ModuleLoader__.load({
 							return {
 								checked: true,
 								available: result.value.groups.length > 0,
-								providers: result.value.groups.length,
+								models: result.value.groups.reduce((sum, group) => sum + group.models.length, 0),
 								failures: result.value.failures.length,
 								okProviders: result.value.groups.map((group) => group.name),
 								badProviders: result.value.failures.map((failure) => failure.name)
@@ -2461,7 +3312,7 @@ window.__ModuleLoader__.load({
 							return {
 								checked: true,
 								available: false,
-								providers: 0,
+								models: 0,
 								failures: 0,
 								okProviders: [],
 								badProviders: []