@kenz1117/dsh-ui-usage-billing 0.4.2 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/README.md +12 -11
  2. package/lib/client.js +1177 -995
  3. package/lib/index.js +7 -3
  4. package/lib/types/client/TrendChart.d.ts +4 -1
  5. package/lib/types/client/UsageBilling.d.ts +27 -4
  6. package/lib/types/client/anomaly.d.ts +52 -0
  7. package/lib/types/client/heatmap.d.ts +35 -0
  8. package/lib/types/client/live-cost.d.ts +55 -0
  9. package/lib/types/client/locales.d.ts +1 -1
  10. package/lib/types/client/pricing.d.ts +5 -0
  11. package/lib/types/client/round-chart.d.ts +37 -0
  12. package/lib/types/index.d.ts +2 -1
  13. package/package.json +1 -1
package/lib/client.js CHANGED
@@ -24,7 +24,7 @@ window.__ModuleLoader__.load({
24
24
  }
25
25
  //#endregion
26
26
  //#region \0dsh-css:/Users/ken/deepseek-harness/packages/client/ui-usage-billing/src/client/UsageBilling.module.css.mjs
27
- 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}}";
27
+ const css = ".VWh0dG_railButton{border:1px solid color-mix(in srgb, var(--dsw-static-blue-500) 28%, var(--dsw-alias-border-l2));background:linear-gradient(135deg, color-mix(in srgb, var(--dsw-static-blue-500) 14%, var(--dsw-alias-bg-layer-1)), 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:border-color .16s,box-shadow .16s,transform .16s,color .16s;display:flex}.VWh0dG_railButton:hover,.VWh0dG_railButton:focus-visible{border-color:color-mix(in srgb, var(--dsw-static-blue-500) 48%, var(--dsw-alias-border-l2));box-shadow:0 4px 14px -6px color-mix(in srgb, var(--dsw-static-blue-500) 55%, transparent);color:var(--dsw-static-blue-400);outline:none;transform:translateY(-1px)}.VWh0dG_railButton svg{stroke-width:2px;width:18px;height:18px}.VWh0dG_trigger{border:1px solid color-mix(in srgb, var(--dsw-static-blue-500) 20%, var(--dsw-alias-border-l1));background:radial-gradient(130% 180% at 0% 0%, color-mix(in srgb, var(--dsw-static-blue-500) 12%, transparent), transparent 55%), radial-gradient(150% 200% at 100% 110%, color-mix(in srgb, var(--dsw-static-blue-400) 9%, transparent), transparent 60%), 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 .16s,box-shadow .16s,transform .16s;display:flex;position:relative;overflow:hidden}@supports (backdrop-filter:blur(1px)){.VWh0dG_trigger{background:radial-gradient(130% 180% at 0% 0%, color-mix(in srgb, var(--dsw-static-blue-500) 14%, transparent), transparent 55%), radial-gradient(150% 200% at 100% 110%, color-mix(in srgb, var(--dsw-static-blue-400) 10%, transparent), transparent 60%), color-mix(in srgb, var(--dsw-alias-bg-layer-1) 72%, transparent);backdrop-filter:blur(12px)}}.VWh0dG_trigger:hover,.VWh0dG_trigger:focus-visible{border-color:color-mix(in srgb, var(--dsw-static-blue-500) 42%, var(--dsw-alias-border-l1));box-shadow:0 8px 24px -10px color-mix(in srgb, var(--dsw-static-blue-500) 45%, transparent);outline:none;transform:translateY(-1px)}.VWh0dG_triggerIcon{background:linear-gradient(135deg, var(--dsw-static-blue-500), var(--dsw-static-blue-400));width:28px;height:28px;color:var(--dsw-static-neutral-bluish-00);box-shadow:0 2px 8px -2px color-mix(in srgb, var(--dsw-static-blue-500) 60%, transparent);border-radius:8px;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:18px;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{background:linear-gradient(var(--dsw-alias-bg-layer-2), var(--dsw-alias-bg-layer-2)) padding-box, linear-gradient(135deg, color-mix(in srgb, var(--dsw-static-blue-500) 55%, transparent), color-mix(in srgb, var(--dsw-static-blue-400) 22%, transparent) 45%, color-mix(in srgb, var(--dsw-static-blue-500) 38%, transparent)) border-box;width:min(760px,100vw - 48px);max-height:min(760px,88vh);box-shadow:var(--dsw-shadow-lv3), 0 24px 80px -24px color-mix(in srgb, var(--dsw-static-blue-500) 35%, transparent);border:1px solid #0000;animation:.18s ease-out VWh0dG_dashboardIn}@keyframes VWh0dG_dashboardIn{0%{opacity:0;transform:translateY(8px)scale(.98)}to{opacity:1;transform:none}}div[role=presentation]:has(>.dsh-billing-modal)>div[aria-hidden=true]:first-child{backdrop-filter:blur(8px)saturate(1.25)}.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_tabNav{border-bottom:1px solid var(--dsw-alias-border-l1);align-items:center;gap:4px;padding:10px 24px;display:flex}.VWh0dG_tabButton{color:var(--dsw-alias-label-tertiary);cursor:pointer;background:0 0;border:none;border-radius:999px;padding:5px 14px;font-size:12.5px;font-weight:500;line-height:18px;transition:background-color .16s,color .16s,box-shadow .16s}.VWh0dG_tabButton:hover,.VWh0dG_tabButton:focus-visible{color:var(--dsw-alias-label-primary);background:var(--dsw-alias-interactive-bg-hover);outline:none}.VWh0dG_tabButtonActive,.VWh0dG_tabButtonActive:hover,.VWh0dG_tabButtonActive:focus-visible{background:linear-gradient(135deg, var(--dsw-static-blue-500), color-mix(in srgb, var(--dsw-static-blue-500) 72%, var(--dsw-static-blue-400)));color:var(--dsw-static-neutral-bluish-00);box-shadow:0 2px 10px -3px color-mix(in srgb, var(--dsw-static-blue-500) 55%, transparent);font-weight:600}.VWh0dG_tabPanel{flex-direction:column;gap:14px;animation:.14s ease-out VWh0dG_tabPanelIn;display:flex}@keyframes VWh0dG_tabPanelIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}.VWh0dG_hero{border:1px solid color-mix(in srgb, var(--dsw-static-blue-500) 16%, var(--dsw-alias-border-l1));background:radial-gradient(90% 150% at 6% 0%, color-mix(in srgb, var(--dsw-static-blue-500) 10%, transparent), transparent 60%), radial-gradient(70% 130% at 96% 100%, color-mix(in srgb, var(--dsw-static-blue-400) 8%, transparent), transparent 55%), var(--dsw-alias-bg-layer-1);border-radius:16px;justify-content:space-between;align-items:center;gap:24px;padding:20px 24px;display:flex;position:relative;overflow:hidden}.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;font-variant-numeric:tabular-nums;white-space:nowrap;background:linear-gradient(120deg, var(--dsw-alias-label-primary) 25%, color-mix(in srgb, var(--dsw-static-blue-500) 85%, var(--dsw-alias-label-primary)));color:#0000;-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:44px;font-weight:600;line-height:52px}.VWh0dG_heroMeta{color:var(--dsw-alias-label-caption);white-space:nowrap;font-size:12px;line-height:17px}.VWh0dG_heroSide{border-left:1px solid var(--dsw-alias-border-l1);flex-direction:column;flex:none;gap:10px;padding-left:24px;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 .16s,background-color .16s,transform .16s,box-shadow .16s;display:flex;position:relative;overflow:hidden}.VWh0dG_kpiTile:before{content:\"\";background:linear-gradient(90deg, color-mix(in srgb, var(--dsw-static-blue-500) 70%, transparent), transparent);opacity:.7;height:2px;position:absolute;inset:0 0 auto}.VWh0dG_kpiTile:has(.VWh0dG_kpiGreen):before{background:linear-gradient(90deg, color-mix(in srgb, var(--dsw-static-green-500) 70%, transparent), transparent)}.VWh0dG_kpiTile:hover{border-color:var(--dsw-alias-border-l2);background:var(--dsw-alias-interactive-bg-hover);box-shadow:0 6px 16px -8px color-mix(in srgb, var(--dsw-alias-label-primary) 35%, transparent);transform:translateY(-1px)}.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_estimatedTag{vertical-align:1px;color:var(--dsw-static-blue-500);background:color-mix(in srgb, var(--dsw-static-blue-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_liveCostBar{color:var(--dsw-static-neutral-400);font-variant-numeric:tabular-nums;align-items:center;gap:6px;font-size:11px;line-height:16px;display:inline-flex}.VWh0dG_liveCostItem{white-space:nowrap}.VWh0dG_liveCostSep{color:var(--dsw-static-neutral-300)}.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;-webkit-text-fill-color:#e8ff00;background:0 0;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_tabNav{background:#000;border-bottom:2px solid #e8ff00}body[data-zine-mode] .VWh0dG_tabButton{color:#c9d98a;letter-spacing:.08em;text-transform:uppercase;border-radius:0;font-size:10.5px;font-weight:900}body[data-zine-mode] .VWh0dG_tabButton:hover,body[data-zine-mode] .VWh0dG_tabButton:focus-visible{color:#e8ff00;background:#e8ff001f}body[data-zine-mode] .VWh0dG_tabButtonActive,body[data-zine-mode] .VWh0dG_tabButtonActive:hover,body[data-zine-mode] .VWh0dG_tabButtonActive:focus-visible{color:#0a0a05;background:#e8ff00;box-shadow:0 0 10px #e8ff0073}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{border-left:none;border-top:1px solid var(--dsw-alias-border-l1);flex-direction:row;align-self:stretch;gap:20px;padding-top:14px;padding-left:0}}";
28
28
  const tagId = "@kenz1117/dsh-ui-usage-billing/UsageBilling.module.css";
29
29
  if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId) + "]") === null) {
30
30
  const tag = document.createElement("style");
@@ -34,160 +34,170 @@ window.__ModuleLoader__.load({
34
34
  document.head.appendChild(tag);
35
35
  }
36
36
  var UsageBilling_module_css_default = {
37
- "rateBadge": "VWh0dG_rateBadge",
38
- "balanceCell": "VWh0dG_balanceCell",
39
- "healthOk": "VWh0dG_healthOk",
40
- "railButton": "VWh0dG_railButton",
41
- "trendPanel": "VWh0dG_trendPanel",
42
- "pricingChevron": "VWh0dG_pricingChevron",
43
- "dashboardTitle": "VWh0dG_dashboardTitle",
44
- "modelProvider": "VWh0dG_modelProvider",
37
+ "panelHead": "VWh0dG_panelHead",
45
38
  "bandPrice": "VWh0dG_bandPrice",
46
- "triggerToday": "VWh0dG_triggerToday",
47
- "panelTitle": "VWh0dG_panelTitle",
48
- "modelName": "VWh0dG_modelName",
49
- "triggerDivider": "VWh0dG_triggerDivider",
50
- "kpiGreen": "VWh0dG_kpiGreen",
51
- "switchOn": "VWh0dG_switchOn",
52
- "chartEmpty": "VWh0dG_chartEmpty",
39
+ "chartDot": "VWh0dG_chartDot",
40
+ "healthBadgeOk": "VWh0dG_healthBadgeOk",
41
+ "headTitleRow": "VWh0dG_headTitleRow",
42
+ "estimatedTag": "VWh0dG_estimatedTag",
43
+ "tabButtonActive": "VWh0dG_tabButtonActive",
44
+ "flatTag": "VWh0dG_flatTag",
45
+ "roundsBarFlagged": "VWh0dG_roundsBarFlagged",
46
+ "rangeToggle": "VWh0dG_rangeToggle",
47
+ "liveCostSep": "VWh0dG_liveCostSep",
48
+ "heatmapCellEmpty": "VWh0dG_heatmapCellEmpty",
49
+ "triggerAmount": "VWh0dG_triggerAmount",
50
+ "kpiDetail": "VWh0dG_kpiDetail",
51
+ "chartSvg": "VWh0dG_chartSvg",
53
52
  "subscriptionReset": "VWh0dG_subscriptionReset",
54
- "costCol": "VWh0dG_costCol",
55
- "budgetLabel": "VWh0dG_budgetLabel",
56
- "roundsFlagBadge": "VWh0dG_roundsFlagBadge",
57
- "budgetUnit": "VWh0dG_budgetUnit",
58
- "budgetInput": "VWh0dG_budgetInput",
59
- "subscriptionWindow": "VWh0dG_subscriptionWindow",
60
- "heroSideItem": "VWh0dG_heroSideItem",
53
+ "rateBadge": "VWh0dG_rateBadge",
54
+ "roundsBarCol": "VWh0dG_roundsBarCol",
55
+ "chartLegendLine": "VWh0dG_chartLegendLine",
56
+ "healthBadge": "VWh0dG_healthBadge",
57
+ "heroMeta": "VWh0dG_heroMeta",
58
+ "tabPanelIn": "VWh0dG_tabPanelIn",
59
+ "chartEmpty": "VWh0dG_chartEmpty",
60
+ "subscriptionPct": "VWh0dG_subscriptionPct",
61
+ "budgetOverPulse": "VWh0dG_budgetOverPulse",
61
62
  "subscriptionHead": "VWh0dG_subscriptionHead",
62
- "roundsBarFlagged": "VWh0dG_roundsBarFlagged",
63
+ "dashboardBody": "VWh0dG_dashboardBody",
64
+ "chartTooltipRow": "VWh0dG_chartTooltipRow",
65
+ "liveCostBar": "VWh0dG_liveCostBar",
66
+ "budgetUnit": "VWh0dG_budgetUnit",
63
67
  "currencyButton": "VWh0dG_currencyButton",
64
- "rangeButtonActive": "VWh0dG_rangeButtonActive",
65
- "heatmapCell": "VWh0dG_heatmapCell",
66
- "chartSvg": "VWh0dG_chartSvg",
67
- "roundsBarWrap": "VWh0dG_roundsBarWrap",
68
- "providerGroupTitle": "VWh0dG_providerGroupTitle",
69
- "chartTooltipSwatch": "VWh0dG_chartTooltipSwatch",
70
- "budgetFill": "VWh0dG_budgetFill",
71
- "chartStack": "VWh0dG_chartStack",
68
+ "budget": "VWh0dG_budget",
69
+ "switchKnob": "VWh0dG_switchKnob",
70
+ "panelTitle": "VWh0dG_panelTitle",
71
+ "healthOk": "VWh0dG_healthOk",
72
72
  "currencyToggle": "VWh0dG_currencyToggle",
73
- "subscriptionGrid": "VWh0dG_subscriptionGrid",
74
- "pricingToggle": "VWh0dG_pricingToggle",
75
- "chartLegendBar": "VWh0dG_chartLegendBar",
76
- "balanceDaysLow": "VWh0dG_balanceDaysLow",
73
+ "heroValue": "VWh0dG_heroValue",
74
+ "triggerMeta": "VWh0dG_triggerMeta",
75
+ "heroSide": "VWh0dG_heroSide",
76
+ "providerGroupList": "VWh0dG_providerGroupList",
77
+ "rateBadgeBuiltin": "VWh0dG_rateBadgeBuiltin",
78
+ "chartAxisLabel": "VWh0dG_chartAxisLabel",
79
+ "dashboard": "VWh0dG_dashboard",
80
+ "pricingChevronOpen": "VWh0dG_pricingChevronOpen",
81
+ "roundsEmpty": "VWh0dG_roundsEmpty",
82
+ "bandTag": "VWh0dG_bandTag",
83
+ "chartGrid": "VWh0dG_chartGrid",
84
+ "roundsBars": "VWh0dG_roundsBars",
77
85
  "modelTable": "VWh0dG_modelTable",
78
- "dashboardBody": "VWh0dG_dashboardBody",
79
- "roundsAxis": "VWh0dG_roundsAxis",
80
- "dashboardSubtitle": "VWh0dG_dashboardSubtitle",
86
+ "heroSideItem": "VWh0dG_heroSideItem",
87
+ "kpiLabel": "VWh0dG_kpiLabel",
88
+ "kpiGreen": "VWh0dG_kpiGreen",
89
+ "budgetFill": "VWh0dG_budgetFill",
90
+ "kpiTile": "VWh0dG_kpiTile",
81
91
  "trigger": "VWh0dG_trigger",
82
- "chartBar": "VWh0dG_chartBar",
83
- "chartLine": "VWh0dG_chartLine",
84
- "roundsFlagMark": "VWh0dG_roundsFlagMark",
85
- "kpiGrid": "VWh0dG_kpiGrid",
86
- "modelTableScroll": "VWh0dG_modelTableScroll",
87
- "bandTagOff": "VWh0dG_bandTagOff",
92
+ "bandPriceOff": "VWh0dG_bandPriceOff",
93
+ "liveCostItem": "VWh0dG_liveCostItem",
94
+ "subscriptionTrack": "VWh0dG_subscriptionTrack",
95
+ "na": "VWh0dG_na",
96
+ "delta": "VWh0dG_delta",
97
+ "heroSideLabel": "VWh0dG_heroSideLabel",
98
+ "pricingToggleText": "VWh0dG_pricingToggleText",
99
+ "rangeButtonActive": "VWh0dG_rangeButtonActive",
100
+ "budgetFillOver": "VWh0dG_budgetFillOver",
101
+ "chartStack": "VWh0dG_chartStack",
88
102
  "closeButton": "VWh0dG_closeButton",
89
- "headTitleRow": "VWh0dG_headTitleRow",
90
- "chartWrap": "VWh0dG_chartWrap",
91
- "chartGrid": "VWh0dG_chartGrid",
92
- "rateBadgeBuiltin": "VWh0dG_rateBadgeBuiltin",
93
- "uncataloguedTag": "VWh0dG_uncataloguedTag",
94
- "subscriptionPct": "VWh0dG_subscriptionPct",
95
- "hero": "VWh0dG_hero",
96
- "providerGroupBalanceLabel": "VWh0dG_providerGroupBalanceLabel",
97
- "heroMeta": "VWh0dG_heroMeta",
98
- "balanceDays": "VWh0dG_balanceDays",
103
+ "budgetLabel": "VWh0dG_budgetLabel",
104
+ "heroLabel": "VWh0dG_heroLabel",
105
+ "numCol": "VWh0dG_numCol",
106
+ "rangeButton": "VWh0dG_rangeButton",
107
+ "balanceCell": "VWh0dG_balanceCell",
108
+ "balanceDaysLow": "VWh0dG_balanceDaysLow",
109
+ "currencyButtonActive": "VWh0dG_currencyButtonActive",
110
+ "deltaDown": "VWh0dG_deltaDown",
111
+ "heroSideValue": "VWh0dG_heroSideValue",
112
+ "switchOn": "VWh0dG_switchOn",
99
113
  "emptyRow": "VWh0dG_emptyRow",
100
- "subscriptionWindowLabel": "VWh0dG_subscriptionWindowLabel",
101
- "subscriptionTrack": "VWh0dG_subscriptionTrack",
114
+ "modelTableScroll": "VWh0dG_modelTableScroll",
115
+ "heroMain": "VWh0dG_heroMain",
116
+ "budgetTrack": "VWh0dG_budgetTrack",
117
+ "chartBar": "VWh0dG_chartBar",
118
+ "budgetValue": "VWh0dG_budgetValue",
119
+ "chartLegend": "VWh0dG_chartLegend",
120
+ "rounds": "VWh0dG_rounds",
121
+ "modelDot": "VWh0dG_modelDot",
122
+ "switch": "VWh0dG_switch",
102
123
  "panel": "VWh0dG_panel",
103
- "heatmapLegend": "VWh0dG_heatmapLegend",
104
- "heroSide": "VWh0dG_heroSide",
105
124
  "roundsBarLabel": "VWh0dG_roundsBarLabel",
106
- "budgetFillOver": "VWh0dG_budgetFillOver",
107
- "budgetInputWrap": "VWh0dG_budgetInputWrap",
125
+ "pricingTable": "VWh0dG_pricingTable",
126
+ "dashboardHead": "VWh0dG_dashboardHead",
127
+ "healthDot": "VWh0dG_healthDot",
108
128
  "triggerMonth": "VWh0dG_triggerMonth",
109
- "rateBadgeLive": "VWh0dG_rateBadgeLive",
110
- "heatmapHover": "VWh0dG_heatmapHover",
111
- "healthBadgeOk": "VWh0dG_healthBadgeOk",
112
- "healthBad": "VWh0dG_healthBad",
113
- "bandTag": "VWh0dG_bandTag",
129
+ "providerGroupHead": "VWh0dG_providerGroupHead",
130
+ "modelProvider": "VWh0dG_modelProvider",
131
+ "triggerAmountSub": "VWh0dG_triggerAmountSub",
132
+ "triggerToday": "VWh0dG_triggerToday",
133
+ "deltaUp": "VWh0dG_deltaUp",
114
134
  "heatmapGrid": "VWh0dG_heatmapGrid",
115
- "chartLegend": "VWh0dG_chartLegend",
116
- "modelDot": "VWh0dG_modelDot",
117
- "budgetControls": "VWh0dG_budgetControls",
118
- "panelHint": "VWh0dG_panelHint",
119
- "dashboard": "VWh0dG_dashboard",
120
- "currencyButtonActive": "VWh0dG_currencyButtonActive",
121
- "tableScroll": "VWh0dG_tableScroll",
122
- "bandPriceOff": "VWh0dG_bandPriceOff",
123
- "pricingToggleText": "VWh0dG_pricingToggleText",
124
- "modelCell": "VWh0dG_modelCell",
125
- "pricingChevronOpen": "VWh0dG_pricingChevronOpen",
126
- "providerGroupBalance": "VWh0dG_providerGroupBalance",
127
- "roundsBars": "VWh0dG_roundsBars",
128
- "heroSideLabel": "VWh0dG_heroSideLabel",
129
- "roundsEmpty": "VWh0dG_roundsEmpty",
130
- "deltaDown": "VWh0dG_deltaDown",
135
+ "chartWrap": "VWh0dG_chartWrap",
131
136
  "subscriptionFill": "VWh0dG_subscriptionFill",
132
- "rangeToggle": "VWh0dG_rangeToggle",
133
- "chartCrosshair": "VWh0dG_chartCrosshair",
134
- "chartTooltipRow": "VWh0dG_chartTooltipRow",
135
- "numCol": "VWh0dG_numCol",
136
- "kpiValue": "VWh0dG_kpiValue",
137
- "chartTooltipDate": "VWh0dG_chartTooltipDate",
138
- "triggerAmountSub": "VWh0dG_triggerAmountSub",
139
- "providerGroupMeta": "VWh0dG_providerGroupMeta",
140
- "triggerAmount": "VWh0dG_triggerAmount",
141
- "dashboardModal": "VWh0dG_dashboardModal",
142
- "kpiDetail": "VWh0dG_kpiDetail",
143
- "kpiTile": "VWh0dG_kpiTile",
144
137
  "subscriptionStatus": "VWh0dG_subscriptionStatus",
145
- "budgetOverPulse": "VWh0dG_budgetOverPulse",
146
- "subscriptionName": "VWh0dG_subscriptionName",
147
- "roundsBar": "VWh0dG_roundsBar",
148
- "budgetTrack": "VWh0dG_budgetTrack",
149
- "switch": "VWh0dG_switch",
150
- "roundsBarCol": "VWh0dG_roundsBarCol",
151
- "chartLegendLine": "VWh0dG_chartLegendLine",
152
- "healthIdle": "VWh0dG_healthIdle",
153
- "deltaUp": "VWh0dG_deltaUp",
154
- "panelHead": "VWh0dG_panelHead",
138
+ "subscriptionWindowLabel": "VWh0dG_subscriptionWindowLabel",
139
+ "roundsFlagMark": "VWh0dG_roundsFlagMark",
140
+ "heatmapCell": "VWh0dG_heatmapCell",
141
+ "providerGroupTitle": "VWh0dG_providerGroupTitle",
142
+ "tabPanel": "VWh0dG_tabPanel",
155
143
  "dashboardRight": "VWh0dG_dashboardRight",
156
- "providerGroupBadge": "VWh0dG_providerGroupBadge",
157
- "pricingTable": "VWh0dG_pricingTable",
158
- "triggerMeta": "VWh0dG_triggerMeta",
159
- "chartAxisLabel": "VWh0dG_chartAxisLabel",
160
- "rounds": "VWh0dG_rounds",
161
- "na": "VWh0dG_na",
162
- "heroValue": "VWh0dG_heroValue",
163
- "chartDot": "VWh0dG_chartDot",
164
- "healthBadge": "VWh0dG_healthBadge",
165
- "rangeButton": "VWh0dG_rangeButton",
166
- "heatmapCellEmpty": "VWh0dG_heatmapCellEmpty",
167
- "heatmapFooter": "VWh0dG_heatmapFooter",
168
- "providerGroupHead": "VWh0dG_providerGroupHead",
169
- "chartTooltip": "VWh0dG_chartTooltip",
170
- "healthBadgeBad": "VWh0dG_healthBadgeBad",
171
- "delta": "VWh0dG_delta",
172
- "providerGroup": "VWh0dG_providerGroup",
173
- "heatmap": "VWh0dG_heatmap",
174
144
  "triggerIcon": "VWh0dG_triggerIcon",
175
- "dashboardHead": "VWh0dG_dashboardHead",
176
- "heroSideValue": "VWh0dG_heroSideValue",
177
- "heroMain": "VWh0dG_heroMain",
178
- "budgetValue": "VWh0dG_budgetValue",
179
- "healthDot": "VWh0dG_healthDot",
180
145
  "subscriptionCard": "VWh0dG_subscriptionCard",
181
- "budgetHead": "VWh0dG_budgetHead",
182
- "planTag": "VWh0dG_planTag",
183
- "heroLabel": "VWh0dG_heroLabel",
184
- "budget": "VWh0dG_budget",
185
- "kpiLabel": "VWh0dG_kpiLabel",
186
- "switchKnob": "VWh0dG_switchKnob",
146
+ "providerGroup": "VWh0dG_providerGroup",
147
+ "tabNav": "VWh0dG_tabNav",
148
+ "subscriptionName": "VWh0dG_subscriptionName",
149
+ "budgetInputWrap": "VWh0dG_budgetInputWrap",
187
150
  "subscriptionPlan": "VWh0dG_subscriptionPlan",
188
- "flatTag": "VWh0dG_flatTag",
151
+ "triggerDivider": "VWh0dG_triggerDivider",
152
+ "heatmap": "VWh0dG_heatmap",
153
+ "subscriptionGrid": "VWh0dG_subscriptionGrid",
189
154
  "providerGroupName": "VWh0dG_providerGroupName",
190
- "providerGroupList": "VWh0dG_providerGroupList"
155
+ "dashboardIn": "VWh0dG_dashboardIn",
156
+ "panelHint": "VWh0dG_panelHint",
157
+ "chartLine": "VWh0dG_chartLine",
158
+ "budgetInput": "VWh0dG_budgetInput",
159
+ "budgetControls": "VWh0dG_budgetControls",
160
+ "chartTooltip": "VWh0dG_chartTooltip",
161
+ "tableScroll": "VWh0dG_tableScroll",
162
+ "dashboardModal": "VWh0dG_dashboardModal",
163
+ "healthBad": "VWh0dG_healthBad",
164
+ "trendPanel": "VWh0dG_trendPanel",
165
+ "heatmapFooter": "VWh0dG_heatmapFooter",
166
+ "heatmapHover": "VWh0dG_heatmapHover",
167
+ "tabButton": "VWh0dG_tabButton",
168
+ "chartTooltipSwatch": "VWh0dG_chartTooltipSwatch",
169
+ "healthIdle": "VWh0dG_healthIdle",
170
+ "budgetHead": "VWh0dG_budgetHead",
171
+ "balanceDays": "VWh0dG_balanceDays",
172
+ "subscriptionWindow": "VWh0dG_subscriptionWindow",
173
+ "roundsBar": "VWh0dG_roundsBar",
174
+ "kpiValue": "VWh0dG_kpiValue",
175
+ "pricingChevron": "VWh0dG_pricingChevron",
176
+ "roundsAxis": "VWh0dG_roundsAxis",
177
+ "providerGroupBadge": "VWh0dG_providerGroupBadge",
178
+ "dashboardTitle": "VWh0dG_dashboardTitle",
179
+ "costCol": "VWh0dG_costCol",
180
+ "modelName": "VWh0dG_modelName",
181
+ "kpiGrid": "VWh0dG_kpiGrid",
182
+ "pricingToggle": "VWh0dG_pricingToggle",
183
+ "heatmapLegend": "VWh0dG_heatmapLegend",
184
+ "planTag": "VWh0dG_planTag",
185
+ "roundsFlagBadge": "VWh0dG_roundsFlagBadge",
186
+ "healthBadgeBad": "VWh0dG_healthBadgeBad",
187
+ "rateBadgeLive": "VWh0dG_rateBadgeLive",
188
+ "providerGroupMeta": "VWh0dG_providerGroupMeta",
189
+ "modelCell": "VWh0dG_modelCell",
190
+ "bandTagOff": "VWh0dG_bandTagOff",
191
+ "providerGroupBalanceLabel": "VWh0dG_providerGroupBalanceLabel",
192
+ "roundsBarWrap": "VWh0dG_roundsBarWrap",
193
+ "hero": "VWh0dG_hero",
194
+ "dashboardSubtitle": "VWh0dG_dashboardSubtitle",
195
+ "uncataloguedTag": "VWh0dG_uncataloguedTag",
196
+ "chartCrosshair": "VWh0dG_chartCrosshair",
197
+ "chartLegendBar": "VWh0dG_chartLegendBar",
198
+ "chartTooltipDate": "VWh0dG_chartTooltipDate",
199
+ "providerGroupBalance": "VWh0dG_providerGroupBalance",
200
+ "railButton": "VWh0dG_railButton"
191
201
  };
192
202
  //#endregion
193
203
  //#region src/client/pricing.ts
@@ -475,7 +485,8 @@ window.__ModuleLoader__.load({
475
485
  input: 4,
476
486
  cacheHit: .4,
477
487
  output: 12
478
- }
488
+ },
489
+ estimated: true
479
490
  },
480
491
  {
481
492
  key: "minimax",
@@ -559,7 +570,8 @@ window.__ModuleLoader__.load({
559
570
  input: 5,
560
571
  cacheHit: .5,
561
572
  output: 10
562
- }
573
+ },
574
+ estimated: true
563
575
  },
564
576
  {
565
577
  key: "sensenova",
@@ -571,7 +583,8 @@ window.__ModuleLoader__.load({
571
583
  input: 4.5,
572
584
  cacheHit: .45,
573
585
  output: 9
574
- }
586
+ },
587
+ estimated: true
575
588
  },
576
589
  {
577
590
  key: "baichuan",
@@ -1430,6 +1443,33 @@ window.__ModuleLoader__.load({
1430
1443
  */
1431
1444
  /** 会话明细面板最多展示的行数（完整长尾在服务端另有一层封顶）。 */
1432
1445
  const SESSION_DISPLAY_LIMIT = 20;
1446
+ /**
1447
+ * Tab 定义（顺序即渲染顺序）：概览=主数字/预算/KPI/热力图，趋势=趋势图/每轮费用，
1448
+ * 明细=厂商计费与订阅，统计=工作区/会话明细，费率=模型单价表。导出供测试断言
1449
+ * tab 与文案 key 对齐、decor 锚点落在正确分区。
1450
+ */
1451
+ const DASHBOARD_TABS = [
1452
+ {
1453
+ id: "overview",
1454
+ labelKey: "billing.tabOverview"
1455
+ },
1456
+ {
1457
+ id: "trends",
1458
+ labelKey: "billing.tabTrends"
1459
+ },
1460
+ {
1461
+ id: "providers",
1462
+ labelKey: "billing.tabProviders"
1463
+ },
1464
+ {
1465
+ id: "details",
1466
+ labelKey: "billing.tabDetails"
1467
+ },
1468
+ {
1469
+ id: "pricing",
1470
+ labelKey: "billing.tabPricing"
1471
+ }
1472
+ ];
1433
1473
  /** 项目名取 cwd 的末级目录；无 cwd 时由调用方回退为 em dash。 */
1434
1474
  function projectName(cwd) {
1435
1475
  if (cwd === void 0) return void 0;
@@ -1589,6 +1629,22 @@ window.__ModuleLoader__.load({
1589
1629
  if (dates.length === 0) return 0;
1590
1630
  return dates.reduce((sum, d) => sum + (byDay[d]?.cost ?? 0), 0) / dates.length;
1591
1631
  }
1632
+ /**
1633
+ * 本月预计总花费：按本月已有记录的平均日消耗 × 本月天数外推；无本月记录时
1634
+ * 回退为最近 7 天日均 × 本月天数；无任何记录时返回 0（调用方不展示）。
1635
+ * 导出供测试：纯函数，不依赖组件。
1636
+ * @param byDay - 按日费用表。
1637
+ * @param monthPrefix - 本月前缀（YYYY-MM）。
1638
+ * @param today - 今日日期戳（YYYY-MM-DD）。
1639
+ * @returns 本月预计花费（人民币元）；无数据时为 0。
1640
+ */
1641
+ function projectMonthCost(byDay, monthPrefix, today) {
1642
+ const dates = Object.keys(byDay).filter((d) => d.startsWith(monthPrefix));
1643
+ const monthLen = new Date((/* @__PURE__ */ new Date()).getFullYear(), (/* @__PURE__ */ new Date()).getMonth() + 1, 0).getDate();
1644
+ const avg = dates.length > 0 ? dates.reduce((sum, d) => sum + (byDay[d]?.cost ?? 0), 0) / dates.length : dailyBurnRate(byDay, today);
1645
+ if (avg <= 0) return 0;
1646
+ return avg * monthLen;
1647
+ }
1592
1648
  /** Resolve one provider's dot state: green when live, red when failed, gray when unknown. */
1593
1649
  function providerDot(health, provider) {
1594
1650
  if (!health.checked) return UsageBilling_module_css_default.healthIdle;
@@ -1617,7 +1673,7 @@ window.__ModuleLoader__.load({
1617
1673
  }
1618
1674
  }
1619
1675
  /** Path to the usage-stats endpoint served by this plugin's node half. */
1620
- const USAGE_STATS_PATH = "/api/billing/usage-stats";
1676
+ const USAGE_STATS_PATH$1 = "/api/billing/usage-stats";
1621
1677
  /** Path to the live-pricing endpoint served by this plugin's node half. */
1622
1678
  const PRICING_PATH = "/api/billing/pricing";
1623
1679
  /** Path to the account-balance endpoint served by this plugin's node half. */
@@ -1674,7 +1730,7 @@ window.__ModuleLoader__.load({
1674
1730
  /** Try to load stats from the server; returns null when no valid JSON stats are served. */
1675
1731
  async function loadUsageStats() {
1676
1732
  try {
1677
- const response = await fetch(USAGE_STATS_PATH);
1733
+ const response = await fetch(USAGE_STATS_PATH$1);
1678
1734
  if (!response.ok) return null;
1679
1735
  const text = await response.text();
1680
1736
  const parsed = JSON.parse(text);
@@ -1837,11 +1893,7 @@ window.__ModuleLoader__.load({
1837
1893
  */
1838
1894
  function BillingDashboard({ stats, t, onClose, health, balances, quotas, currency, onCurrency, turns, renderSlot, budgetEnabled, budgetAmount, onToggleBudget, onBudgetAmount }) {
1839
1895
  const { total, byModel, byDay } = stats;
1840
- const [pricingOpen, setPricingOpen] = (0, react.useState)(false);
1841
- const [sessionsOpen, setSessionsOpen] = (0, react.useState)(false);
1842
- const [roundsOpen, setRoundsOpen] = (0, react.useState)(false);
1843
- const [heatmapOpen, setHeatmapOpen] = (0, react.useState)(true);
1844
- const [workspacesOpen, setWorkspacesOpen] = (0, react.useState)(false);
1896
+ const [tab, setTab] = (0, react.useState)("overview");
1845
1897
  const [trendDays, setTrendDays] = (0, react.useState)(7);
1846
1898
  const rateInfo = getRateInfo();
1847
1899
  const money = (cny) => formatMoney(currency === "usd" ? cnyToUsd(cny) : cny, currency);
@@ -1882,6 +1934,11 @@ window.__ModuleLoader__.load({
1882
1934
  const monthCost = dates.reduce((sum, d) => sum + (d.startsWith(monthPrefix) ? byDay[d]?.cost ?? 0 : 0), 0);
1883
1935
  const monthCalls = dates.reduce((sum, d) => sum + (d.startsWith(monthPrefix) ? byDay[d]?.calls ?? 0 : 0), 0);
1884
1936
  const yearCost = dates.reduce((sum, d) => sum + (d.startsWith(yearPrefix) ? byDay[d]?.cost ?? 0 : 0), 0);
1937
+ const monthCostProjected = (0, react.useMemo)(() => projectMonthCost(byDay, monthPrefix, today), [
1938
+ byDay,
1939
+ monthPrefix,
1940
+ today
1941
+ ]);
1885
1942
  const trendDates = (0, react.useMemo)(() => {
1886
1943
  const out = [];
1887
1944
  for (let offset = trendDays - 1; offset >= 0; offset -= 1) {
@@ -1935,7 +1992,8 @@ window.__ModuleLoader__.load({
1935
1992
  estimated: computeCost(entry, buckets),
1936
1993
  plan: data.plan === true,
1937
1994
  ...data.cost > 0 ? { actual: data.cost } : {},
1938
- uncatalogued
1995
+ uncatalogued,
1996
+ estimatedPricing: entry.estimated === true
1939
1997
  };
1940
1998
  }).sort((a, b) => (b.actual ?? b.estimated) - (a.actual ?? a.estimated)).map((row, index) => ({
1941
1999
  ...row,
@@ -1983,882 +2041,860 @@ window.__ModuleLoader__.load({
1983
2041
  const chartModels = (0, react.useMemo)(() => modelRows.map((row) => ({
1984
2042
  key: row.key,
1985
2043
  name: row.name,
1986
- color: row.color
1987
- })), [modelRows]);
1988
- const prevDayCost = trend.length >= 2 ? trend.at(-2)?.cost ?? 0 : 0;
1989
- const deltaPct = prevDayCost > 0 ? (todayCost - prevDayCost) / prevDayCost * 100 : 0;
1990
- return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Modal, {
1991
- open: true,
1992
- onClose,
1993
- title: t("billing.title"),
1994
- headless: true,
1995
- className: UsageBilling_module_css_default.dashboardModal ?? "",
1996
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
1997
- className: UsageBilling_module_css_default.dashboard,
1998
- "data-testid": "billing-dashboard",
1999
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2000
- className: UsageBilling_module_css_default.dashboardHead,
2001
- "data-testid": "billing-dashboard-head",
2002
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
2003
- renderSlot("billing.dashboard.decor", { position: "head" }),
2004
- /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2005
- className: UsageBilling_module_css_default.headTitleRow,
2006
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
2007
- className: UsageBilling_module_css_default.dashboardTitle,
2008
- children: t("billing.title")
2009
- }), renderSlot("billing.dashboard.decor", { position: "headTitle" })]
2010
- }),
2011
- /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
2012
- className: UsageBilling_module_css_default.dashboardSubtitle,
2013
- children: [
2014
- t("billing.lastUpdated"),
2015
- " ",
2016
- latestDate
2017
- ]
2018
- })
2019
- ] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2020
- className: UsageBilling_module_css_default.dashboardRight,
2021
- children: [
2022
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2023
- className: UsageBilling_module_css_default.currencyToggle,
2024
- role: "group",
2025
- "aria-label": t("billing.currency"),
2026
- children: ["cny", "usd"].map((unit) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
2027
- type: "button",
2028
- className: clsx(UsageBilling_module_css_default.currencyButton, currency === unit && UsageBilling_module_css_default.currencyButtonActive),
2029
- "aria-pressed": currency === unit,
2030
- "data-testid": `billing-currency-${unit}`,
2031
- title: unit === "cny" ? t("billing.currencyCny") : t("billing.currencyUsd"),
2032
- onClick: () => {
2033
- onCurrency(unit);
2034
- },
2035
- children: unit === "cny" ? "¥" : "$"
2036
- }, unit))
2037
- }),
2038
- health.checked && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
2039
- className: clsx(UsageBilling_module_css_default.healthBadge, health.available ? UsageBilling_module_css_default.healthBadgeOk : UsageBilling_module_css_default.healthBadgeBad),
2040
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2041
- className: clsx(UsageBilling_module_css_default.healthDot, health.available ? UsageBilling_module_css_default.healthOk : UsageBilling_module_css_default.healthBad),
2042
- "aria-hidden": "true"
2043
- }), health.available ? `${health.models} 模型可用${health.failures > 0 ? ` · ${health.failures} 厂商失效` : ""}` : `${health.failures} 厂商不可用`]
2044
- }),
2045
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
2046
- type: "button",
2047
- className: UsageBilling_module_css_default.closeButton,
2048
- "aria-label": t("billing.close"),
2049
- "data-testid": "billing-close",
2050
- onClick: onClose,
2051
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
2052
- viewBox: "0 0 24 24",
2053
- fill: "none",
2054
- stroke: "currentColor",
2055
- "aria-hidden": "true",
2056
- 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" })]
2057
- })
2058
- })
2059
- ]
2060
- })]
2061
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2062
- className: UsageBilling_module_css_default.dashboardBody,
2063
- children: [
2064
- /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
2065
- className: UsageBilling_module_css_default.hero,
2066
- "data-testid": "billing-hero",
2067
- children: [
2068
- renderSlot("billing.dashboard.decor", { position: "hero" }),
2069
- /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2070
- className: UsageBilling_module_css_default.heroMain,
2071
- children: [
2072
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2073
- className: UsageBilling_module_css_default.heroLabel,
2074
- children: t("billing.monthCost")
2075
- }),
2076
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2077
- className: UsageBilling_module_css_default.heroValue,
2078
- children: money(monthCost)
2079
- }),
2080
- /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
2081
- className: UsageBilling_module_css_default.heroMeta,
2082
- children: [
2083
- monthCalls.toLocaleString(),
2084
- " ",
2085
- t("billing.calls")
2086
- ]
2087
- })
2088
- ]
2089
- }),
2090
- /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2091
- className: UsageBilling_module_css_default.heroSide,
2092
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2093
- className: UsageBilling_module_css_default.heroSideItem,
2094
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2095
- className: UsageBilling_module_css_default.heroSideLabel,
2096
- children: t("billing.yearCost")
2097
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2098
- className: UsageBilling_module_css_default.heroSideValue,
2099
- children: money(yearCost)
2100
- })]
2101
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2102
- className: UsageBilling_module_css_default.heroSideItem,
2103
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2104
- className: UsageBilling_module_css_default.heroSideLabel,
2105
- children: t("billing.todayCost")
2106
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
2107
- className: UsageBilling_module_css_default.heroSideValue,
2108
- children: [money(todayCost), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
2109
- className: clsx(UsageBilling_module_css_default.delta, deltaPct >= 0 ? UsageBilling_module_css_default.deltaUp : UsageBilling_module_css_default.deltaDown),
2110
- children: [
2111
- deltaPct >= 0 ? "▲" : "▼",
2112
- " ",
2113
- Math.abs(deltaPct).toFixed(1),
2114
- "%"
2115
- ]
2116
- })]
2117
- })]
2118
- })]
2119
- })
2120
- ]
2121
- }),
2122
- /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
2123
- className: UsageBilling_module_css_default.budget,
2124
- "data-testid": "billing-budget",
2125
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2126
- className: UsageBilling_module_css_default.budgetHead,
2127
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2128
- className: UsageBilling_module_css_default.budgetLabel,
2129
- children: t("billing.budget")
2130
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
2131
- className: UsageBilling_module_css_default.budgetControls,
2132
- children: [
2133
- budgetEnabled && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
2134
- className: UsageBilling_module_css_default.budgetInputWrap,
2135
- "data-testid": "billing-budget-input-wrap",
2136
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2137
- className: UsageBilling_module_css_default.budgetUnit,
2138
- "aria-hidden": "true",
2139
- children: "¥"
2140
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
2141
- className: UsageBilling_module_css_default.budgetInput,
2142
- "data-testid": "billing-budget-input",
2143
- type: "number",
2144
- min: 0,
2145
- step: 1,
2146
- value: budgetAmount === 0 ? "" : budgetAmount,
2147
- placeholder: stats.budget !== void 0 ? String(stats.budget) : "0",
2148
- "aria-label": `${t("billing.budget")}（元）`,
2149
- title: `${t("billing.budget")}（元）`,
2150
- onChange: (e) => {
2151
- onBudgetAmount(e.target.valueAsNumber);
2152
- }
2153
- })]
2154
- }),
2155
- budgetEnabled && budgetAmount > 0 && (() => {
2156
- const pct = monthCost / budgetAmount * 100;
2157
- return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
2158
- className: UsageBilling_module_css_default.budgetValue,
2159
- "data-testid": "billing-budget-value",
2160
- children: [
2161
- money(monthCost),
2162
- " / ",
2163
- money(budgetAmount),
2164
- " · ",
2165
- pct.toFixed(1),
2166
- "%"
2167
- ]
2168
- });
2169
- })(),
2170
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
2171
- type: "button",
2172
- role: "switch",
2173
- "aria-checked": budgetEnabled,
2174
- "aria-label": t("billing.budget"),
2175
- "data-testid": "billing-budget-toggle",
2176
- className: clsx(UsageBilling_module_css_default.switch, budgetEnabled && UsageBilling_module_css_default.switchOn),
2177
- onClick: onToggleBudget,
2178
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: UsageBilling_module_css_default.switchKnob })
2179
- })
2180
- ]
2181
- })]
2182
- }), budgetEnabled && budgetAmount > 0 && (() => {
2183
- const pct = monthCost / budgetAmount * 100;
2184
- return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
2185
- className: UsageBilling_module_css_default.budgetTrack,
2186
- "data-testid": "billing-budget-track",
2187
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
2188
- className: clsx(UsageBilling_module_css_default.budgetFill, pct >= 100 && UsageBilling_module_css_default.budgetFillOver),
2189
- style: { width: `${Math.min(pct, 100)}%` }
2190
- })
2191
- });
2192
- })()]
2193
- }),
2194
- /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
2195
- className: UsageBilling_module_css_default.kpiGrid,
2196
- "data-testid": "billing-kpi-grid",
2044
+ color: row.color
2045
+ })), [modelRows]);
2046
+ const prevDayCost = trend.length >= 2 ? trend.at(-2)?.cost ?? 0 : 0;
2047
+ const deltaPct = prevDayCost > 0 ? (todayCost - prevDayCost) / prevDayCost * 100 : 0;
2048
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Modal, {
2049
+ open: true,
2050
+ onClose,
2051
+ title: t("billing.title"),
2052
+ headless: true,
2053
+ className: clsx(UsageBilling_module_css_default.dashboardModal, "dsh-billing-modal"),
2054
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2055
+ className: UsageBilling_module_css_default.dashboard,
2056
+ "data-testid": "billing-dashboard",
2057
+ children: [
2058
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2059
+ className: UsageBilling_module_css_default.dashboardHead,
2060
+ "data-testid": "billing-dashboard-head",
2061
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
2062
+ renderSlot("billing.dashboard.decor", { position: "head" }),
2063
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2064
+ className: UsageBilling_module_css_default.headTitleRow,
2065
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
2066
+ className: UsageBilling_module_css_default.dashboardTitle,
2067
+ children: t("billing.title")
2068
+ }), renderSlot("billing.dashboard.decor", { position: "headTitle" })]
2069
+ }),
2070
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
2071
+ className: UsageBilling_module_css_default.dashboardSubtitle,
2072
+ children: [
2073
+ t("billing.lastUpdated"),
2074
+ " ",
2075
+ latestDate
2076
+ ]
2077
+ })
2078
+ ] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2079
+ className: UsageBilling_module_css_default.dashboardRight,
2197
2080
  children: [
2198
- /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2199
- className: UsageBilling_module_css_default.kpiTile,
2200
- "data-testid": "billing-kpi-tile",
2201
- children: [
2202
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2203
- className: UsageBilling_module_css_default.kpiLabel,
2204
- children: t("billing.cacheHitRate")
2205
- }),
2206
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2207
- className: clsx(UsageBilling_module_css_default.kpiValue, UsageBilling_module_css_default.kpiGreen),
2208
- children: formatPercent(cacheHitRate)
2209
- }),
2210
- /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
2211
- className: UsageBilling_module_css_default.kpiDetail,
2212
- children: [
2213
- formatTokens(total.cacheHit),
2214
- " / ",
2215
- formatTokens(total.cacheHit + total.cacheMiss)
2216
- ]
2217
- })
2218
- ]
2219
- }),
2220
- /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2221
- className: UsageBilling_module_css_default.kpiTile,
2222
- children: [
2223
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2224
- className: UsageBilling_module_css_default.kpiLabel,
2225
- children: t("billing.tokens")
2226
- }),
2227
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2228
- className: UsageBilling_module_css_default.kpiValue,
2229
- children: formatTokens(total.input + total.output)
2230
- }),
2231
- /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
2232
- className: UsageBilling_module_css_default.kpiDetail,
2233
- children: [
2234
- t("billing.inputTokens"),
2235
- " ",
2236
- formatTokens(total.input),
2237
- " · ",
2238
- t("billing.outputTokens"),
2239
- " ",
2240
- formatTokens(total.output)
2241
- ]
2242
- })
2243
- ]
2081
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2082
+ className: UsageBilling_module_css_default.currencyToggle,
2083
+ role: "group",
2084
+ "aria-label": t("billing.currency"),
2085
+ children: ["cny", "usd"].map((unit) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
2086
+ type: "button",
2087
+ className: clsx(UsageBilling_module_css_default.currencyButton, currency === unit && UsageBilling_module_css_default.currencyButtonActive),
2088
+ "aria-pressed": currency === unit,
2089
+ "data-testid": `billing-currency-${unit}`,
2090
+ title: unit === "cny" ? t("billing.currencyCny") : t("billing.currencyUsd"),
2091
+ onClick: () => {
2092
+ onCurrency(unit);
2093
+ },
2094
+ children: unit === "cny" ? "¥" : "$"
2095
+ }, unit))
2244
2096
  }),
2245
- /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2246
- className: UsageBilling_module_css_default.kpiTile,
2247
- children: [
2248
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2249
- className: UsageBilling_module_css_default.kpiLabel,
2250
- children: t("billing.avgCost")
2251
- }),
2252
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2253
- className: UsageBilling_module_css_default.kpiValue,
2254
- children: money(avgPerCall)
2255
- }),
2256
- /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
2257
- className: UsageBilling_module_css_default.kpiDetail,
2258
- children: [
2259
- t("billing.calls"),
2260
- " ",
2261
- total.calls.toLocaleString()
2262
- ]
2263
- })
2264
- ]
2097
+ health.checked && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
2098
+ className: clsx(UsageBilling_module_css_default.healthBadge, health.available ? UsageBilling_module_css_default.healthBadgeOk : UsageBilling_module_css_default.healthBadgeBad),
2099
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2100
+ className: clsx(UsageBilling_module_css_default.healthDot, health.available ? UsageBilling_module_css_default.healthOk : UsageBilling_module_css_default.healthBad),
2101
+ "aria-hidden": "true"
2102
+ }), health.available ? `${health.models} 模型可用${health.failures > 0 ? ` · ${health.failures} 厂商失效` : ""}` : `${health.failures} 厂商不可用`]
2265
2103
  }),
2266
- /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2267
- className: UsageBilling_module_css_default.kpiTile,
2268
- children: [
2269
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2270
- className: UsageBilling_module_css_default.kpiLabel,
2271
- children: t("billing.calls")
2272
- }),
2273
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2274
- className: UsageBilling_module_css_default.kpiValue,
2275
- children: total.calls.toLocaleString()
2276
- }),
2277
- /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
2278
- className: UsageBilling_module_css_default.kpiDetail,
2279
- children: [
2280
- modelRows.length,
2281
- " ",
2282
- t("billing.models")
2283
- ]
2284
- })
2285
- ]
2104
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
2105
+ type: "button",
2106
+ className: UsageBilling_module_css_default.closeButton,
2107
+ "aria-label": t("billing.close"),
2108
+ "data-testid": "billing-close",
2109
+ onClick: onClose,
2110
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
2111
+ viewBox: "0 0 24 24",
2112
+ fill: "none",
2113
+ stroke: "currentColor",
2114
+ "aria-hidden": "true",
2115
+ 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" })]
2116
+ })
2286
2117
  })
2287
2118
  ]
2288
- }),
2289
- /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
2290
- className: clsx(UsageBilling_module_css_default.panel, UsageBilling_module_css_default.trendPanel),
2291
- "data-testid": "billing-panel-trend",
2292
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2293
- className: UsageBilling_module_css_default.panelHead,
2119
+ })]
2120
+ }),
2121
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
2122
+ className: UsageBilling_module_css_default.tabNav,
2123
+ "data-testid": "billing-tab-nav",
2124
+ role: "tablist",
2125
+ "aria-label": t("billing.title"),
2126
+ children: DASHBOARD_TABS.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
2127
+ type: "button",
2128
+ role: "tab",
2129
+ "aria-selected": tab === item.id,
2130
+ className: clsx(UsageBilling_module_css_default.tabButton, tab === item.id && UsageBilling_module_css_default.tabButtonActive),
2131
+ "data-testid": `billing-tab-${item.id}`,
2132
+ onClick: () => {
2133
+ setTab(item.id);
2134
+ },
2135
+ children: t(item.labelKey)
2136
+ }, item.id))
2137
+ }),
2138
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2139
+ className: UsageBilling_module_css_default.dashboardBody,
2140
+ children: [
2141
+ tab === "overview" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2142
+ className: UsageBilling_module_css_default.tabPanel,
2143
+ "data-testid": "billing-tab-panel-overview",
2294
2144
  children: [
2295
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
2296
- className: UsageBilling_module_css_default.panelTitle,
2297
- children: t("billing.trend")
2145
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
2146
+ className: UsageBilling_module_css_default.hero,
2147
+ "data-testid": "billing-hero",
2148
+ children: [
2149
+ renderSlot("billing.dashboard.decor", { position: "hero" }),
2150
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2151
+ className: UsageBilling_module_css_default.heroMain,
2152
+ children: [
2153
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2154
+ className: UsageBilling_module_css_default.heroLabel,
2155
+ children: t("billing.monthCost")
2156
+ }),
2157
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2158
+ className: UsageBilling_module_css_default.heroValue,
2159
+ children: money(monthCost)
2160
+ }),
2161
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
2162
+ className: UsageBilling_module_css_default.heroMeta,
2163
+ children: [
2164
+ monthCalls.toLocaleString(),
2165
+ " ",
2166
+ t("billing.calls")
2167
+ ]
2168
+ })
2169
+ ]
2170
+ }),
2171
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2172
+ className: UsageBilling_module_css_default.heroSide,
2173
+ children: [
2174
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2175
+ className: UsageBilling_module_css_default.heroSideItem,
2176
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2177
+ className: UsageBilling_module_css_default.heroSideLabel,
2178
+ children: t("billing.yearCost")
2179
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2180
+ className: UsageBilling_module_css_default.heroSideValue,
2181
+ children: money(yearCost)
2182
+ })]
2183
+ }),
2184
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2185
+ className: UsageBilling_module_css_default.heroSideItem,
2186
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2187
+ className: UsageBilling_module_css_default.heroSideLabel,
2188
+ children: t("billing.todayCost")
2189
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
2190
+ className: UsageBilling_module_css_default.heroSideValue,
2191
+ children: [money(todayCost), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
2192
+ className: clsx(UsageBilling_module_css_default.delta, deltaPct >= 0 ? UsageBilling_module_css_default.deltaUp : UsageBilling_module_css_default.deltaDown),
2193
+ children: [
2194
+ deltaPct >= 0 ? "▲" : "▼",
2195
+ " ",
2196
+ Math.abs(deltaPct).toFixed(1),
2197
+ "%"
2198
+ ]
2199
+ })]
2200
+ })]
2201
+ }),
2202
+ monthCostProjected > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2203
+ className: UsageBilling_module_css_default.heroSideItem,
2204
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2205
+ className: UsageBilling_module_css_default.heroSideLabel,
2206
+ children: t("billing.monthProjected")
2207
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2208
+ className: UsageBilling_module_css_default.heroSideValue,
2209
+ children: money(monthCostProjected)
2210
+ })]
2211
+ })
2212
+ ]
2213
+ })
2214
+ ]
2298
2215
  }),
2299
- renderSlot("billing.dashboard.decor", { position: "trend" }),
2300
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2301
- className: UsageBilling_module_css_default.rangeToggle,
2302
- role: "group",
2303
- "aria-label": t("billing.trend"),
2304
- children: [7, 30].map((days) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
2305
- type: "button",
2306
- className: clsx(UsageBilling_module_css_default.rangeButton, trendDays === days && UsageBilling_module_css_default.rangeButtonActive),
2307
- "aria-pressed": trendDays === days,
2308
- "data-testid": `billing-trend-${days}d`,
2309
- onClick: () => {
2310
- setTrendDays(days);
2311
- },
2312
- children: days === 7 ? t("billing.trend7d") : t("billing.trend30d")
2313
- }, days))
2216
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
2217
+ className: UsageBilling_module_css_default.budget,
2218
+ "data-testid": "billing-budget",
2219
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2220
+ className: UsageBilling_module_css_default.budgetHead,
2221
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2222
+ className: UsageBilling_module_css_default.budgetLabel,
2223
+ children: t("billing.budget")
2224
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
2225
+ className: UsageBilling_module_css_default.budgetControls,
2226
+ children: [
2227
+ budgetEnabled && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
2228
+ className: UsageBilling_module_css_default.budgetInputWrap,
2229
+ "data-testid": "billing-budget-input-wrap",
2230
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2231
+ className: UsageBilling_module_css_default.budgetUnit,
2232
+ "aria-hidden": "true",
2233
+ children: "¥"
2234
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
2235
+ className: UsageBilling_module_css_default.budgetInput,
2236
+ "data-testid": "billing-budget-input",
2237
+ type: "number",
2238
+ min: 0,
2239
+ step: 1,
2240
+ value: budgetAmount === 0 ? "" : budgetAmount,
2241
+ placeholder: stats.budget !== void 0 ? String(stats.budget) : "0",
2242
+ "aria-label": `${t("billing.budget")}（元）`,
2243
+ title: `${t("billing.budget")}（元）`,
2244
+ onChange: (e) => {
2245
+ onBudgetAmount(e.target.valueAsNumber);
2246
+ }
2247
+ })]
2248
+ }),
2249
+ budgetEnabled && budgetAmount > 0 && (() => {
2250
+ const pct = monthCost / budgetAmount * 100;
2251
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
2252
+ className: UsageBilling_module_css_default.budgetValue,
2253
+ "data-testid": "billing-budget-value",
2254
+ children: [
2255
+ money(monthCost),
2256
+ " / ",
2257
+ money(budgetAmount),
2258
+ " · ",
2259
+ pct.toFixed(1),
2260
+ "%"
2261
+ ]
2262
+ });
2263
+ })(),
2264
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
2265
+ type: "button",
2266
+ role: "switch",
2267
+ "aria-checked": budgetEnabled,
2268
+ "aria-label": t("billing.budget"),
2269
+ "data-testid": "billing-budget-toggle",
2270
+ className: clsx(UsageBilling_module_css_default.switch, budgetEnabled && UsageBilling_module_css_default.switchOn),
2271
+ onClick: onToggleBudget,
2272
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: UsageBilling_module_css_default.switchKnob })
2273
+ })
2274
+ ]
2275
+ })]
2276
+ }), budgetEnabled && budgetAmount > 0 && (() => {
2277
+ const pct = monthCost / budgetAmount * 100;
2278
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
2279
+ className: UsageBilling_module_css_default.budgetTrack,
2280
+ "data-testid": "billing-budget-track",
2281
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
2282
+ className: clsx(UsageBilling_module_css_default.budgetFill, pct >= 100 && UsageBilling_module_css_default.budgetFillOver),
2283
+ style: { width: `${Math.min(pct, 100)}%` }
2284
+ })
2285
+ });
2286
+ })()]
2314
2287
  }),
2315
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2316
- className: UsageBilling_module_css_default.panelHint,
2317
- children: latestDate
2318
- })
2319
- ]
2320
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TrendChart, {
2321
- data: trend,
2322
- models: chartModels,
2323
- currency
2324
- })]
2325
- }),
2326
- /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
2327
- className: UsageBilling_module_css_default.panel,
2328
- "data-testid": "billing-panel-providers",
2329
- children: [
2330
- /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2331
- className: UsageBilling_module_css_default.panelHead,
2332
- children: [
2333
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
2334
- className: UsageBilling_module_css_default.panelTitle,
2335
- children: t("billing.providerBilling")
2336
- }),
2337
- renderSlot("billing.dashboard.decor", { position: "models" }),
2338
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2339
- className: UsageBilling_module_css_default.panelHint,
2340
- children: stats.updatedAt !== void 0 ? `${t("billing.lastUpdated")} ${formatClock(stats.updatedAt)}` : ""
2341
- })
2342
- ]
2343
- }),
2344
- providerGroups.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
2345
- className: UsageBilling_module_css_default.emptyRow,
2346
- "data-testid": "billing-provider-empty",
2347
- children: t("billing.noData")
2348
- }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
2349
- className: UsageBilling_module_css_default.providerGroupList,
2350
- "data-testid": "billing-provider-groups",
2351
- children: providerGroups.map((group) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2352
- className: UsageBilling_module_css_default.providerGroup,
2353
- "data-testid": "billing-provider-group",
2288
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
2289
+ className: UsageBilling_module_css_default.kpiGrid,
2290
+ "data-testid": "billing-kpi-grid",
2354
2291
  children: [
2355
2292
  /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2356
- className: UsageBilling_module_css_default.providerGroupHead,
2357
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
2358
- className: UsageBilling_module_css_default.providerGroupTitle,
2359
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2360
- className: clsx(UsageBilling_module_css_default.healthDot, group.dot),
2361
- "aria-hidden": "true"
2362
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2363
- className: UsageBilling_module_css_default.providerGroupName,
2364
- children: group.name
2365
- })]
2366
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
2367
- className: UsageBilling_module_css_default.providerGroupMeta,
2368
- children: [group.subscriptions.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
2369
- className: UsageBilling_module_css_default.providerGroupBadge,
2370
- "data-testid": "billing-provider-sub-count",
2371
- children: [group.subscriptions.length, " 套餐"]
2372
- }), group.balance !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
2373
- className: UsageBilling_module_css_default.providerGroupBalance,
2374
- "data-testid": "billing-provider-balance",
2375
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2376
- className: UsageBilling_module_css_default.providerGroupBalanceLabel,
2377
- children: t("billing.balance")
2378
- }), renderBalance(group.balance)]
2379
- })]
2380
- })]
2293
+ className: UsageBilling_module_css_default.kpiTile,
2294
+ "data-testid": "billing-kpi-tile",
2295
+ children: [
2296
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2297
+ className: UsageBilling_module_css_default.kpiLabel,
2298
+ children: t("billing.cacheHitRate")
2299
+ }),
2300
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2301
+ className: clsx(UsageBilling_module_css_default.kpiValue, UsageBilling_module_css_default.kpiGreen),
2302
+ children: formatPercent(cacheHitRate)
2303
+ }),
2304
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
2305
+ className: UsageBilling_module_css_default.kpiDetail,
2306
+ children: [
2307
+ formatTokens(total.cacheHit),
2308
+ " / ",
2309
+ formatTokens(total.cacheHit + total.cacheMiss)
2310
+ ]
2311
+ })
2312
+ ]
2381
2313
  }),
2382
- group.models.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
2383
- className: clsx(UsageBilling_module_css_default.tableScroll, UsageBilling_module_css_default.modelTableScroll),
2384
- "data-testid": "billing-table-scroll",
2385
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("table", {
2386
- className: UsageBilling_module_css_default.modelTable,
2387
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [
2388
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", { children: t("billing.model") }),
2389
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
2390
- className: UsageBilling_module_css_default.numCol,
2391
- children: t("billing.calls")
2392
- }),
2393
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
2394
- className: UsageBilling_module_css_default.numCol,
2395
- children: t("billing.inputTokens")
2396
- }),
2397
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
2398
- className: UsageBilling_module_css_default.numCol,
2399
- children: t("billing.outputTokens")
2400
- }),
2401
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
2402
- className: UsageBilling_module_css_default.numCol,
2403
- children: t("billing.cacheHitRate")
2404
- }),
2405
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
2406
- className: UsageBilling_module_css_default.numCol,
2407
- children: t("billing.actual")
2408
- })
2409
- ] }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", { children: group.models.map((row) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [
2410
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2411
- className: UsageBilling_module_css_default.modelCell,
2412
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
2413
- className: UsageBilling_module_css_default.modelName,
2414
- children: [row.name, row.uncatalogued && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2415
- className: UsageBilling_module_css_default.uncataloguedTag,
2416
- "data-testid": "billing-uncatalogued-tag",
2417
- children: t("billing.uncatalogued")
2418
- })]
2419
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2420
- className: UsageBilling_module_css_default.modelProvider,
2421
- children: row.provider
2422
- })] })
2423
- }) }),
2424
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
2425
- className: UsageBilling_module_css_default.numCol,
2426
- children: row.calls.toLocaleString()
2427
- }),
2428
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
2429
- className: UsageBilling_module_css_default.numCol,
2430
- children: formatTokens(row.input)
2431
- }),
2432
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
2433
- className: UsageBilling_module_css_default.numCol,
2434
- children: formatTokens(row.output)
2435
- }),
2436
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
2437
- className: UsageBilling_module_css_default.numCol,
2438
- children: formatPercent(row.cacheHitRate)
2439
- }),
2440
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
2441
- className: UsageBilling_module_css_default.numCol,
2442
- children: row.plan ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2443
- className: UsageBilling_module_css_default.planTag,
2444
- children: "订阅包含"
2445
- }) : row.actual !== void 0 ? money(row.actual) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2446
- className: UsageBilling_module_css_default.na,
2447
- children: "—"
2448
- })
2449
- })
2450
- ] }, row.key)) })]
2451
- })
2314
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2315
+ className: UsageBilling_module_css_default.kpiTile,
2316
+ children: [
2317
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2318
+ className: UsageBilling_module_css_default.kpiLabel,
2319
+ children: t("billing.tokens")
2320
+ }),
2321
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2322
+ className: UsageBilling_module_css_default.kpiValue,
2323
+ children: formatTokens(total.input + total.output)
2324
+ }),
2325
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
2326
+ className: UsageBilling_module_css_default.kpiDetail,
2327
+ children: [
2328
+ t("billing.inputTokens"),
2329
+ " ",
2330
+ formatTokens(total.input),
2331
+ " · ",
2332
+ t("billing.outputTokens"),
2333
+ " ",
2334
+ formatTokens(total.output)
2335
+ ]
2336
+ })
2337
+ ]
2452
2338
  }),
2453
- group.subscriptions.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
2454
- className: UsageBilling_module_css_default.subscriptionGrid,
2455
- "data-testid": "billing-subscriptions-grid",
2456
- children: group.subscriptions.map((quota) => {
2457
- const statusText = subscriptionStatusText(quota.status, t);
2458
- return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2459
- className: UsageBilling_module_css_default.subscriptionCard,
2460
- "data-testid": "billing-subscription-card",
2339
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2340
+ className: UsageBilling_module_css_default.kpiTile,
2341
+ children: [
2342
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2343
+ className: UsageBilling_module_css_default.kpiLabel,
2344
+ children: t("billing.avgCost")
2345
+ }),
2346
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2347
+ className: UsageBilling_module_css_default.kpiValue,
2348
+ children: money(avgPerCall)
2349
+ }),
2350
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
2351
+ className: UsageBilling_module_css_default.kpiDetail,
2461
2352
  children: [
2462
- /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2463
- className: UsageBilling_module_css_default.subscriptionHead,
2464
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2465
- className: UsageBilling_module_css_default.subscriptionName,
2466
- children: quota.displayName
2467
- }), quota.plan !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2468
- className: UsageBilling_module_css_default.subscriptionPlan,
2469
- children: quota.plan
2470
- })]
2471
- }),
2472
- statusText !== "" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
2473
- className: UsageBilling_module_css_default.subscriptionStatus,
2474
- children: statusText
2475
- }),
2476
- quota.windows.length === 0 && statusText === "" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
2477
- className: UsageBilling_module_css_default.subscriptionStatus,
2478
- children: t("billing.subscriptionNoApi")
2479
- }),
2480
- quota.windows.map((window) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2481
- className: UsageBilling_module_css_default.subscriptionWindow,
2482
- children: [
2483
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2484
- className: UsageBilling_module_css_default.subscriptionWindowLabel,
2485
- children: subscriptionWindowLabel(window.kind, t)
2486
- }),
2487
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2488
- className: UsageBilling_module_css_default.subscriptionTrack,
2489
- "aria-hidden": "true",
2490
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2491
- className: UsageBilling_module_css_default.subscriptionFill,
2492
- style: { width: `${Math.min(100, Math.max(0, window.remainingPercent))}%` }
2493
- })
2494
- }),
2495
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2496
- className: UsageBilling_module_css_default.subscriptionPct,
2497
- children: t("billing.subscriptionRemaining").replace("{pct}", String(window.remainingPercent))
2498
- }),
2499
- window.resetsAt !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2500
- className: UsageBilling_module_css_default.subscriptionReset,
2501
- children: t("billing.subscriptionReset").replace("{date}", window.resetsAt.slice(0, 10))
2502
- })
2503
- ]
2504
- }, window.kind))
2353
+ t("billing.calls"),
2354
+ " ",
2355
+ total.calls.toLocaleString()
2505
2356
  ]
2506
- }, quota.provider);
2507
- })
2357
+ })
2358
+ ]
2359
+ }),
2360
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2361
+ className: UsageBilling_module_css_default.kpiTile,
2362
+ children: [
2363
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2364
+ className: UsageBilling_module_css_default.kpiLabel,
2365
+ children: t("billing.calls")
2366
+ }),
2367
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2368
+ className: UsageBilling_module_css_default.kpiValue,
2369
+ children: total.calls.toLocaleString()
2370
+ }),
2371
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
2372
+ className: UsageBilling_module_css_default.kpiDetail,
2373
+ children: [
2374
+ modelRows.length,
2375
+ " ",
2376
+ t("billing.models")
2377
+ ]
2378
+ })
2379
+ ]
2508
2380
  })
2509
2381
  ]
2510
- }, group.name))
2511
- }),
2512
- renderSlot("billing.dashboard.decor", { position: "footer" })
2513
- ]
2514
- }),
2515
- /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
2516
- className: UsageBilling_module_css_default.panel,
2517
- "data-testid": "billing-panel-heatmap",
2518
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
2519
- type: "button",
2520
- className: UsageBilling_module_css_default.pricingToggle,
2521
- "data-testid": "billing-heatmap-toggle",
2522
- onClick: () => {
2523
- setHeatmapOpen((prev) => !prev);
2524
- },
2525
- "aria-expanded": heatmapOpen,
2526
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2527
- className: UsageBilling_module_css_default.pricingToggleText,
2528
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2529
- className: UsageBilling_module_css_default.panelTitle,
2530
- children: t("billing.heatmap")
2382
+ }),
2383
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
2384
+ className: UsageBilling_module_css_default.panel,
2385
+ "data-testid": "billing-panel-heatmap",
2386
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
2387
+ className: UsageBilling_module_css_default.panelHead,
2388
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
2389
+ className: UsageBilling_module_css_default.panelTitle,
2390
+ children: t("billing.heatmap")
2391
+ })
2392
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UsageHeatmap, {
2393
+ days: heatmapDays,
2394
+ currency,
2395
+ t
2396
+ })]
2531
2397
  })
2532
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
2533
- className: clsx(UsageBilling_module_css_default.pricingChevron, heatmapOpen && UsageBilling_module_css_default.pricingChevronOpen),
2534
- viewBox: "0 0 24 24",
2535
- fill: "none",
2536
- stroke: "currentColor",
2537
- "aria-hidden": "true",
2538
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m6 9 6 6 6-6" })
2539
- })]
2540
- }), heatmapOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UsageHeatmap, {
2541
- days: heatmapDays,
2542
- currency,
2543
- t
2544
- })]
2545
- }),
2546
- turns.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
2547
- className: UsageBilling_module_css_default.panel,
2548
- "data-testid": "billing-panel-rounds",
2549
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
2550
- type: "button",
2551
- className: UsageBilling_module_css_default.pricingToggle,
2552
- "data-testid": "billing-rounds-toggle",
2553
- onClick: () => {
2554
- setRoundsOpen((prev) => !prev);
2555
- },
2556
- "aria-expanded": roundsOpen,
2557
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
2558
- className: UsageBilling_module_css_default.pricingToggleText,
2559
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2560
- className: UsageBilling_module_css_default.panelTitle,
2561
- children: t("billing.rounds")
2562
- }), roundFlags.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
2563
- className: UsageBilling_module_css_default.roundsFlagBadge,
2564
- "data-testid": "billing-rounds-flag-count",
2398
+ ]
2399
+ }),
2400
+ tab === "trends" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2401
+ className: UsageBilling_module_css_default.tabPanel,
2402
+ "data-testid": "billing-tab-panel-trends",
2403
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
2404
+ className: clsx(UsageBilling_module_css_default.panel, UsageBilling_module_css_default.trendPanel),
2405
+ "data-testid": "billing-panel-trend",
2406
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2407
+ className: UsageBilling_module_css_default.panelHead,
2565
2408
  children: [
2566
- roundFlags.length,
2567
- " ",
2568
- t("billing.anomaly")
2409
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
2410
+ className: UsageBilling_module_css_default.panelTitle,
2411
+ children: t("billing.trend")
2412
+ }),
2413
+ renderSlot("billing.dashboard.decor", { position: "trend" }),
2414
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2415
+ className: UsageBilling_module_css_default.rangeToggle,
2416
+ role: "group",
2417
+ "aria-label": t("billing.trend"),
2418
+ children: [7, 30].map((days) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
2419
+ type: "button",
2420
+ className: clsx(UsageBilling_module_css_default.rangeButton, trendDays === days && UsageBilling_module_css_default.rangeButtonActive),
2421
+ "aria-pressed": trendDays === days,
2422
+ "data-testid": `billing-trend-${days}d`,
2423
+ onClick: () => {
2424
+ setTrendDays(days);
2425
+ },
2426
+ children: days === 7 ? t("billing.trend7d") : t("billing.trend30d")
2427
+ }, days))
2428
+ }),
2429
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2430
+ className: UsageBilling_module_css_default.panelHint,
2431
+ children: latestDate
2432
+ })
2569
2433
  ]
2434
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TrendChart, {
2435
+ data: trend,
2436
+ models: chartModels,
2437
+ currency
2570
2438
  })]
2571
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
2572
- className: clsx(UsageBilling_module_css_default.pricingChevron, roundsOpen && UsageBilling_module_css_default.pricingChevronOpen),
2573
- viewBox: "0 0 24 24",
2574
- fill: "none",
2575
- stroke: "currentColor",
2576
- "aria-hidden": "true",
2577
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m6 9 6 6 6-6" })
2578
- })]
2579
- }), roundsOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RoundCostChart, {
2580
- rounds: turns,
2581
- flags: roundFlags,
2582
- currency,
2583
- t
2584
- })]
2585
- }),
2586
- stats.byWorkspace !== void 0 && stats.byWorkspace.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
2587
- className: UsageBilling_module_css_default.panel,
2588
- "data-testid": "billing-panel-workspaces",
2589
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
2590
- type: "button",
2591
- className: UsageBilling_module_css_default.pricingToggle,
2592
- "data-testid": "billing-workspaces-toggle",
2593
- onClick: () => {
2594
- setWorkspacesOpen((prev) => !prev);
2595
- },
2596
- "aria-expanded": workspacesOpen,
2597
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2598
- className: UsageBilling_module_css_default.pricingToggleText,
2599
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2600
- className: UsageBilling_module_css_default.panelTitle,
2601
- children: t("billing.workspaces")
2602
- })
2603
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
2604
- className: clsx(UsageBilling_module_css_default.pricingChevron, workspacesOpen && UsageBilling_module_css_default.pricingChevronOpen),
2605
- viewBox: "0 0 24 24",
2606
- fill: "none",
2607
- stroke: "currentColor",
2608
- "aria-hidden": "true",
2609
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m6 9 6 6 6-6" })
2610
- })]
2611
- }), workspacesOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
2612
- className: UsageBilling_module_css_default.tableScroll,
2613
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("table", {
2614
- className: UsageBilling_module_css_default.modelTable,
2615
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [
2616
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", { children: t("billing.project") }),
2617
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
2618
- className: UsageBilling_module_css_default.numCol,
2619
- children: t("billing.calls")
2620
- }),
2621
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
2622
- className: UsageBilling_module_css_default.numCol,
2623
- children: t("billing.inputTokens")
2624
- }),
2625
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
2626
- className: UsageBilling_module_css_default.numCol,
2627
- children: t("billing.outputTokens")
2628
- }),
2629
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
2630
- className: UsageBilling_module_css_default.numCol,
2631
- children: t("billing.actual")
2632
- }),
2633
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
2634
- className: UsageBilling_module_css_default.numCol,
2635
- children: t("billing.lastActive")
2636
- })
2637
- ] }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", { children: stats.byWorkspace.map((row) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [
2638
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2639
- className: UsageBilling_module_css_default.modelName,
2640
- children: row.name
2641
- }) }),
2642
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
2643
- className: UsageBilling_module_css_default.numCol,
2644
- children: row.calls.toLocaleString()
2645
- }),
2646
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
2647
- className: UsageBilling_module_css_default.numCol,
2648
- children: formatTokens(row.input)
2649
- }),
2650
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
2651
- className: UsageBilling_module_css_default.numCol,
2652
- children: formatTokens(row.output)
2653
- }),
2654
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
2655
- className: UsageBilling_module_css_default.numCol,
2656
- children: money(row.cost)
2657
- }),
2658
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
2659
- className: UsageBilling_module_css_default.numCol,
2660
- children: row.lastActive > 0 ? `${localDayStamp(row.lastActive)}` : "—"
2661
- })
2662
- ] }, row.name)) })]
2663
- })
2664
- })]
2665
- }),
2666
- stats.bySession !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
2667
- className: UsageBilling_module_css_default.panel,
2668
- "data-testid": "billing-panel-sessions",
2669
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
2670
- type: "button",
2671
- className: UsageBilling_module_css_default.pricingToggle,
2672
- "data-testid": "billing-sessions-toggle",
2673
- onClick: () => {
2674
- setSessionsOpen((prev) => !prev);
2675
- },
2676
- "aria-expanded": sessionsOpen,
2677
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
2678
- className: UsageBilling_module_css_default.pricingToggleText,
2679
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2680
- className: UsageBilling_module_css_default.panelTitle,
2681
- children: t("billing.sessions")
2682
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2683
- className: UsageBilling_module_css_default.panelHint,
2684
- children: stats.bySession.length > SESSION_DISPLAY_LIMIT ? t("billing.sessionOverflow").replace("{limit}", String(SESSION_DISPLAY_LIMIT)).replace("{total}", String(stats.bySession.length)) : `${stats.bySession.length}`
2439
+ }), turns.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
2440
+ className: UsageBilling_module_css_default.panel,
2441
+ "data-testid": "billing-panel-rounds",
2442
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2443
+ className: UsageBilling_module_css_default.panelHead,
2444
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
2445
+ className: UsageBilling_module_css_default.panelTitle,
2446
+ children: t("billing.rounds")
2447
+ }), roundFlags.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
2448
+ className: UsageBilling_module_css_default.roundsFlagBadge,
2449
+ "data-testid": "billing-rounds-flag-count",
2450
+ children: [
2451
+ roundFlags.length,
2452
+ " ",
2453
+ t("billing.anomaly")
2454
+ ]
2455
+ })]
2456
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RoundCostChart, {
2457
+ rounds: turns,
2458
+ flags: roundFlags,
2459
+ currency,
2460
+ t
2685
2461
  })]
2686
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
2687
- className: clsx(UsageBilling_module_css_default.pricingChevron, sessionsOpen && UsageBilling_module_css_default.pricingChevronOpen),
2688
- viewBox: "0 0 24 24",
2689
- fill: "none",
2690
- stroke: "currentColor",
2691
- "aria-hidden": "true",
2692
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m6 9 6 6 6-6" })
2693
2462
  })]
2694
- }), sessionsOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
2695
- className: UsageBilling_module_css_default.tableScroll,
2696
- "data-testid": "billing-sessions-table",
2697
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("table", {
2698
- className: UsageBilling_module_css_default.modelTable,
2699
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [
2700
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", { children: t("billing.sessions") }),
2701
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", { children: t("billing.project") }),
2702
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
2703
- className: UsageBilling_module_css_default.numCol,
2704
- children: t("billing.calls")
2705
- }),
2706
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
2707
- className: UsageBilling_module_css_default.numCol,
2708
- children: t("billing.actual")
2709
- }),
2710
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
2711
- className: UsageBilling_module_css_default.numCol,
2712
- children: t("billing.lastActive")
2713
- })
2714
- ] }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tbody", { children: [stats.bySession.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
2715
- colSpan: 5,
2716
- className: UsageBilling_module_css_default.emptyRow,
2717
- children: t("billing.noData")
2718
- }) }), stats.bySession.slice(0, SESSION_DISPLAY_LIMIT).map((row) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [
2719
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2720
- className: UsageBilling_module_css_default.modelName,
2721
- children: row.title ?? row.id.slice(0, 8)
2722
- }) }),
2723
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2724
- className: UsageBilling_module_css_default.modelProvider,
2725
- children: projectName(row.cwd) ?? "—"
2726
- }) }),
2727
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
2728
- className: UsageBilling_module_css_default.numCol,
2729
- children: row.calls.toLocaleString()
2730
- }),
2731
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
2732
- className: UsageBilling_module_css_default.numCol,
2733
- children: money(row.cost)
2734
- }),
2735
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
2736
- className: UsageBilling_module_css_default.numCol,
2737
- children: row.lastActive > 0 ? `${localDayStamp(row.lastActive)} ${formatClock(row.lastActive)}` : "—"
2738
- })
2739
- ] }, row.id))] })]
2740
- })
2741
- })]
2742
- }),
2743
- /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
2744
- className: UsageBilling_module_css_default.panel,
2745
- "data-testid": "billing-panel-pricing",
2746
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
2747
- type: "button",
2748
- className: UsageBilling_module_css_default.pricingToggle,
2749
- "data-testid": "billing-pricing-toggle",
2750
- onClick: () => {
2751
- setPricingOpen((prev) => !prev);
2752
- },
2753
- "aria-expanded": pricingOpen,
2754
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
2755
- className: UsageBilling_module_css_default.pricingToggleText,
2756
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2757
- className: UsageBilling_module_css_default.panelTitle,
2758
- children: t("billing.pricing")
2759
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
2760
- className: UsageBilling_module_css_default.panelHint,
2463
+ }),
2464
+ tab === "providers" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
2465
+ className: UsageBilling_module_css_default.tabPanel,
2466
+ "data-testid": "billing-tab-panel-providers",
2467
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
2468
+ className: UsageBilling_module_css_default.panel,
2469
+ "data-testid": "billing-panel-providers",
2470
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2471
+ className: UsageBilling_module_css_default.panelHead,
2761
2472
  children: [
2762
- t("billing.todayRate"),
2763
- " 1 USD = ",
2764
- formatMoney(rateInfo.rate),
2473
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
2474
+ className: UsageBilling_module_css_default.panelTitle,
2475
+ children: t("billing.providerBilling")
2476
+ }),
2477
+ renderSlot("billing.dashboard.decor", { position: "models" }),
2765
2478
  /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2766
- className: clsx(UsageBilling_module_css_default.rateBadge, rateInfo.live ? UsageBilling_module_css_default.rateBadgeLive : UsageBilling_module_css_default.rateBadgeBuiltin),
2767
- children: rateInfo.live ? t("billing.rateLive") : t("billing.rateBuiltin")
2479
+ className: UsageBilling_module_css_default.panelHint,
2480
+ children: stats.updatedAt !== void 0 ? `${t("billing.lastUpdated")} ${formatClock(stats.updatedAt)}` : ""
2768
2481
  })
2769
2482
  ]
2483
+ }), providerGroups.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
2484
+ className: UsageBilling_module_css_default.emptyRow,
2485
+ "data-testid": "billing-provider-empty",
2486
+ children: t("billing.noData")
2487
+ }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
2488
+ className: UsageBilling_module_css_default.providerGroupList,
2489
+ "data-testid": "billing-provider-groups",
2490
+ children: providerGroups.map((group) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2491
+ className: UsageBilling_module_css_default.providerGroup,
2492
+ "data-testid": "billing-provider-group",
2493
+ children: [
2494
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2495
+ className: UsageBilling_module_css_default.providerGroupHead,
2496
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
2497
+ className: UsageBilling_module_css_default.providerGroupTitle,
2498
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2499
+ className: clsx(UsageBilling_module_css_default.healthDot, group.dot),
2500
+ "aria-hidden": "true"
2501
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2502
+ className: UsageBilling_module_css_default.providerGroupName,
2503
+ children: group.name
2504
+ })]
2505
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
2506
+ className: UsageBilling_module_css_default.providerGroupMeta,
2507
+ children: [group.subscriptions.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
2508
+ className: UsageBilling_module_css_default.providerGroupBadge,
2509
+ "data-testid": "billing-provider-sub-count",
2510
+ children: [group.subscriptions.length, " 套餐"]
2511
+ }), group.balance !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
2512
+ className: UsageBilling_module_css_default.providerGroupBalance,
2513
+ "data-testid": "billing-provider-balance",
2514
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2515
+ className: UsageBilling_module_css_default.providerGroupBalanceLabel,
2516
+ children: t("billing.balance")
2517
+ }), renderBalance(group.balance)]
2518
+ })]
2519
+ })]
2520
+ }),
2521
+ group.models.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
2522
+ className: clsx(UsageBilling_module_css_default.tableScroll, UsageBilling_module_css_default.modelTableScroll),
2523
+ "data-testid": "billing-table-scroll",
2524
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("table", {
2525
+ className: UsageBilling_module_css_default.modelTable,
2526
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [
2527
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", { children: t("billing.model") }),
2528
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
2529
+ className: UsageBilling_module_css_default.numCol,
2530
+ children: t("billing.calls")
2531
+ }),
2532
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
2533
+ className: UsageBilling_module_css_default.numCol,
2534
+ children: t("billing.inputTokens")
2535
+ }),
2536
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
2537
+ className: UsageBilling_module_css_default.numCol,
2538
+ children: t("billing.outputTokens")
2539
+ }),
2540
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
2541
+ className: UsageBilling_module_css_default.numCol,
2542
+ children: t("billing.cacheHitRate")
2543
+ }),
2544
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
2545
+ className: UsageBilling_module_css_default.numCol,
2546
+ children: t("billing.actual")
2547
+ })
2548
+ ] }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", { children: group.models.map((row) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [
2549
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2550
+ className: UsageBilling_module_css_default.modelCell,
2551
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
2552
+ className: UsageBilling_module_css_default.modelName,
2553
+ children: [
2554
+ row.name,
2555
+ row.uncatalogued && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2556
+ className: UsageBilling_module_css_default.uncataloguedTag,
2557
+ "data-testid": "billing-uncatalogued-tag",
2558
+ children: t("billing.uncatalogued")
2559
+ }),
2560
+ row.estimatedPricing && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2561
+ className: UsageBilling_module_css_default.estimatedTag,
2562
+ "data-testid": "billing-estimated-tag",
2563
+ children: t("billing.estimatedPricing")
2564
+ })
2565
+ ]
2566
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2567
+ className: UsageBilling_module_css_default.modelProvider,
2568
+ children: row.provider
2569
+ })] })
2570
+ }) }),
2571
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
2572
+ className: UsageBilling_module_css_default.numCol,
2573
+ children: row.calls.toLocaleString()
2574
+ }),
2575
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
2576
+ className: UsageBilling_module_css_default.numCol,
2577
+ children: formatTokens(row.input)
2578
+ }),
2579
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
2580
+ className: UsageBilling_module_css_default.numCol,
2581
+ children: formatTokens(row.output)
2582
+ }),
2583
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
2584
+ className: UsageBilling_module_css_default.numCol,
2585
+ children: formatPercent(row.cacheHitRate)
2586
+ }),
2587
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
2588
+ className: UsageBilling_module_css_default.numCol,
2589
+ children: row.plan ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2590
+ className: UsageBilling_module_css_default.planTag,
2591
+ children: "订阅包含"
2592
+ }) : row.actual !== void 0 ? money(row.actual) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2593
+ className: UsageBilling_module_css_default.na,
2594
+ children: "—"
2595
+ })
2596
+ })
2597
+ ] }, row.key)) })]
2598
+ })
2599
+ }),
2600
+ group.subscriptions.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
2601
+ className: UsageBilling_module_css_default.subscriptionGrid,
2602
+ "data-testid": "billing-subscriptions-grid",
2603
+ children: group.subscriptions.map((quota) => {
2604
+ const statusText = subscriptionStatusText(quota.status, t);
2605
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2606
+ className: UsageBilling_module_css_default.subscriptionCard,
2607
+ "data-testid": "billing-subscription-card",
2608
+ children: [
2609
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2610
+ className: UsageBilling_module_css_default.subscriptionHead,
2611
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2612
+ className: UsageBilling_module_css_default.subscriptionName,
2613
+ children: quota.displayName
2614
+ }), quota.plan !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2615
+ className: UsageBilling_module_css_default.subscriptionPlan,
2616
+ children: quota.plan
2617
+ })]
2618
+ }),
2619
+ statusText !== "" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
2620
+ className: UsageBilling_module_css_default.subscriptionStatus,
2621
+ children: statusText
2622
+ }),
2623
+ quota.windows.length === 0 && statusText === "" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
2624
+ className: UsageBilling_module_css_default.subscriptionStatus,
2625
+ children: t("billing.subscriptionNoApi")
2626
+ }),
2627
+ quota.windows.map((window) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2628
+ className: UsageBilling_module_css_default.subscriptionWindow,
2629
+ children: [
2630
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2631
+ className: UsageBilling_module_css_default.subscriptionWindowLabel,
2632
+ children: subscriptionWindowLabel(window.kind, t)
2633
+ }),
2634
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2635
+ className: UsageBilling_module_css_default.subscriptionTrack,
2636
+ "aria-hidden": "true",
2637
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2638
+ className: UsageBilling_module_css_default.subscriptionFill,
2639
+ style: { width: `${Math.min(100, Math.max(0, window.remainingPercent))}%` }
2640
+ })
2641
+ }),
2642
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2643
+ className: UsageBilling_module_css_default.subscriptionPct,
2644
+ children: t("billing.subscriptionRemaining").replace("{pct}", String(window.remainingPercent))
2645
+ }),
2646
+ window.resetsAt !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2647
+ className: UsageBilling_module_css_default.subscriptionReset,
2648
+ children: t("billing.subscriptionReset").replace("{date}", window.resetsAt.slice(0, 10))
2649
+ })
2650
+ ]
2651
+ }, window.kind))
2652
+ ]
2653
+ }, quota.provider);
2654
+ })
2655
+ })
2656
+ ]
2657
+ }, group.name))
2658
+ })]
2659
+ })
2660
+ }),
2661
+ tab === "details" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2662
+ className: UsageBilling_module_css_default.tabPanel,
2663
+ "data-testid": "billing-tab-panel-details",
2664
+ children: [stats.byWorkspace !== void 0 && stats.byWorkspace.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
2665
+ className: UsageBilling_module_css_default.panel,
2666
+ "data-testid": "billing-panel-workspaces",
2667
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
2668
+ className: UsageBilling_module_css_default.panelHead,
2669
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
2670
+ className: UsageBilling_module_css_default.panelTitle,
2671
+ children: t("billing.workspaces")
2672
+ })
2673
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
2674
+ className: UsageBilling_module_css_default.tableScroll,
2675
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("table", {
2676
+ className: UsageBilling_module_css_default.modelTable,
2677
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [
2678
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", { children: t("billing.project") }),
2679
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
2680
+ className: UsageBilling_module_css_default.numCol,
2681
+ children: t("billing.calls")
2682
+ }),
2683
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
2684
+ className: UsageBilling_module_css_default.numCol,
2685
+ children: t("billing.inputTokens")
2686
+ }),
2687
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
2688
+ className: UsageBilling_module_css_default.numCol,
2689
+ children: t("billing.outputTokens")
2690
+ }),
2691
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
2692
+ className: UsageBilling_module_css_default.numCol,
2693
+ children: t("billing.actual")
2694
+ }),
2695
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
2696
+ className: UsageBilling_module_css_default.numCol,
2697
+ children: t("billing.lastActive")
2698
+ })
2699
+ ] }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", { children: stats.byWorkspace.map((row) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [
2700
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2701
+ className: UsageBilling_module_css_default.modelName,
2702
+ children: row.name
2703
+ }) }),
2704
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
2705
+ className: UsageBilling_module_css_default.numCol,
2706
+ children: row.calls.toLocaleString()
2707
+ }),
2708
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
2709
+ className: UsageBilling_module_css_default.numCol,
2710
+ children: formatTokens(row.input)
2711
+ }),
2712
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
2713
+ className: UsageBilling_module_css_default.numCol,
2714
+ children: formatTokens(row.output)
2715
+ }),
2716
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
2717
+ className: UsageBilling_module_css_default.numCol,
2718
+ children: money(row.cost)
2719
+ }),
2720
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
2721
+ className: UsageBilling_module_css_default.numCol,
2722
+ children: row.lastActive > 0 ? `${localDayStamp(row.lastActive)}` : "—"
2723
+ })
2724
+ ] }, row.name)) })]
2725
+ })
2726
+ })]
2727
+ }), stats.bySession !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
2728
+ className: UsageBilling_module_css_default.panel,
2729
+ "data-testid": "billing-panel-sessions",
2730
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2731
+ className: UsageBilling_module_css_default.panelHead,
2732
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
2733
+ className: UsageBilling_module_css_default.panelTitle,
2734
+ children: t("billing.sessions")
2735
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2736
+ className: UsageBilling_module_css_default.panelHint,
2737
+ children: stats.bySession.length > SESSION_DISPLAY_LIMIT ? t("billing.sessionOverflow").replace("{limit}", String(SESSION_DISPLAY_LIMIT)).replace("{total}", String(stats.bySession.length)) : `${stats.bySession.length}`
2738
+ })]
2739
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
2740
+ className: UsageBilling_module_css_default.tableScroll,
2741
+ "data-testid": "billing-sessions-table",
2742
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("table", {
2743
+ className: UsageBilling_module_css_default.modelTable,
2744
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [
2745
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", { children: t("billing.sessions") }),
2746
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", { children: t("billing.project") }),
2747
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
2748
+ className: UsageBilling_module_css_default.numCol,
2749
+ children: t("billing.calls")
2750
+ }),
2751
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
2752
+ className: UsageBilling_module_css_default.numCol,
2753
+ children: t("billing.actual")
2754
+ }),
2755
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
2756
+ className: UsageBilling_module_css_default.numCol,
2757
+ children: t("billing.lastActive")
2758
+ })
2759
+ ] }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tbody", { children: [stats.bySession.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
2760
+ colSpan: 5,
2761
+ className: UsageBilling_module_css_default.emptyRow,
2762
+ children: t("billing.noData")
2763
+ }) }), stats.bySession.slice(0, SESSION_DISPLAY_LIMIT).map((row) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [
2764
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2765
+ className: UsageBilling_module_css_default.modelName,
2766
+ children: row.title ?? row.id.slice(0, 8)
2767
+ }) }),
2768
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2769
+ className: UsageBilling_module_css_default.modelProvider,
2770
+ children: projectName(row.cwd) ?? "—"
2771
+ }) }),
2772
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
2773
+ className: UsageBilling_module_css_default.numCol,
2774
+ children: row.calls.toLocaleString()
2775
+ }),
2776
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
2777
+ className: UsageBilling_module_css_default.numCol,
2778
+ children: money(row.cost)
2779
+ }),
2780
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
2781
+ className: UsageBilling_module_css_default.numCol,
2782
+ children: row.lastActive > 0 ? `${localDayStamp(row.lastActive)} ${formatClock(row.lastActive)}` : "—"
2783
+ })
2784
+ ] }, row.id))] })]
2785
+ })
2770
2786
  })]
2771
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
2772
- className: clsx(UsageBilling_module_css_default.pricingChevron, pricingOpen && UsageBilling_module_css_default.pricingChevronOpen),
2773
- viewBox: "0 0 24 24",
2774
- fill: "none",
2775
- stroke: "currentColor",
2776
- "aria-hidden": "true",
2777
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m6 9 6 6 6-6" })
2778
2787
  })]
2779
- }), pricingOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
2780
- className: UsageBilling_module_css_default.tableScroll,
2781
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("table", {
2782
- className: UsageBilling_module_css_default.pricingTable,
2783
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [
2784
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", { children: "Model" }),
2785
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
2786
- className: UsageBilling_module_css_default.numCol,
2787
- children: t("billing.input")
2788
- }),
2789
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
2790
- className: UsageBilling_module_css_default.numCol,
2791
- children: t("billing.cacheHit")
2792
- }),
2793
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
2794
- className: UsageBilling_module_css_default.numCol,
2795
- children: t("billing.output")
2796
- }),
2797
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", { children: t("billing.band") })
2798
- ] }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", { children: MODEL_CATALOG.map((entry) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [
2799
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
2800
- className: UsageBilling_module_css_default.modelCell,
2801
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2802
- className: UsageBilling_module_css_default.modelDot,
2803
- style: { background: resolveToken(entry.colorVar) }
2804
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2805
- className: UsageBilling_module_css_default.modelName,
2806
- children: entry.name
2807
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2808
- className: UsageBilling_module_css_default.modelProvider,
2809
- children: entry.provider
2810
- })] })]
2811
- }) }),
2812
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
2813
- className: UsageBilling_module_css_default.numCol,
2814
- children: entry.price.offPeak !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
2815
- className: UsageBilling_module_css_default.bandPrice,
2816
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: formatUnitPrice(entry.price.input, entry.price.currency) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2817
- className: UsageBilling_module_css_default.bandPriceOff,
2818
- children: formatUnitPrice(entry.price.offPeak.input, entry.price.currency)
2819
- })]
2820
- }) : formatUnitPrice(entry.price.input, entry.price.currency)
2821
- }),
2822
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
2823
- className: UsageBilling_module_css_default.numCol,
2824
- children: entry.price.offPeak !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
2825
- className: UsageBilling_module_css_default.bandPrice,
2826
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: formatUnitPrice(entry.price.cacheHit, entry.price.currency) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2827
- className: UsageBilling_module_css_default.bandPriceOff,
2828
- children: formatUnitPrice(entry.price.offPeak.cacheHit, entry.price.currency)
2829
- })]
2830
- }) : formatUnitPrice(entry.price.cacheHit, entry.price.currency)
2831
- }),
2832
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
2833
- className: UsageBilling_module_css_default.numCol,
2834
- children: entry.price.offPeak !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
2835
- className: UsageBilling_module_css_default.bandPrice,
2836
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: formatUnitPrice(entry.price.output, entry.price.currency) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2837
- className: UsageBilling_module_css_default.bandPriceOff,
2838
- children: formatUnitPrice(entry.price.offPeak.output, entry.price.currency)
2839
- })]
2840
- }) : formatUnitPrice(entry.price.output, entry.price.currency)
2841
- }),
2842
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", { children: entry.price.offPeak !== void 0 && entry.peakHours !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
2843
- className: UsageBilling_module_css_default.bandTag,
2844
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
2845
- t("billing.peak"),
2846
- " ",
2847
- entry.peakHours
2848
- ] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
2849
- className: UsageBilling_module_css_default.bandTagOff,
2850
- children: [t("billing.offPeak"), " 50%"]
2851
- })]
2852
- }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2853
- className: UsageBilling_module_css_default.flatTag,
2854
- children: t("billing.flat")
2855
- }) })
2856
- ] }, entry.key)) })]
2788
+ }),
2789
+ tab === "pricing" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
2790
+ className: UsageBilling_module_css_default.tabPanel,
2791
+ "data-testid": "billing-tab-panel-pricing",
2792
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
2793
+ className: UsageBilling_module_css_default.panel,
2794
+ "data-testid": "billing-panel-pricing",
2795
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2796
+ className: UsageBilling_module_css_default.panelHead,
2797
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
2798
+ className: UsageBilling_module_css_default.panelTitle,
2799
+ children: t("billing.pricing")
2800
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
2801
+ className: UsageBilling_module_css_default.panelHint,
2802
+ children: [
2803
+ t("billing.todayRate"),
2804
+ " 1 USD = ",
2805
+ formatMoney(rateInfo.rate),
2806
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2807
+ className: clsx(UsageBilling_module_css_default.rateBadge, rateInfo.live ? UsageBilling_module_css_default.rateBadgeLive : UsageBilling_module_css_default.rateBadgeBuiltin),
2808
+ children: rateInfo.live ? t("billing.rateLive") : t("billing.rateBuiltin")
2809
+ })
2810
+ ]
2811
+ })]
2812
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
2813
+ className: UsageBilling_module_css_default.tableScroll,
2814
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("table", {
2815
+ className: UsageBilling_module_css_default.pricingTable,
2816
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [
2817
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", { children: "Model" }),
2818
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
2819
+ className: UsageBilling_module_css_default.numCol,
2820
+ children: t("billing.input")
2821
+ }),
2822
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
2823
+ className: UsageBilling_module_css_default.numCol,
2824
+ children: t("billing.cacheHit")
2825
+ }),
2826
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
2827
+ className: UsageBilling_module_css_default.numCol,
2828
+ children: t("billing.output")
2829
+ }),
2830
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", { children: t("billing.band") })
2831
+ ] }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", { children: MODEL_CATALOG.map((entry) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [
2832
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
2833
+ className: UsageBilling_module_css_default.modelCell,
2834
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2835
+ className: UsageBilling_module_css_default.modelDot,
2836
+ style: { background: resolveToken(entry.colorVar) }
2837
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2838
+ className: UsageBilling_module_css_default.modelName,
2839
+ children: entry.name
2840
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2841
+ className: UsageBilling_module_css_default.modelProvider,
2842
+ children: entry.provider
2843
+ })] })]
2844
+ }) }),
2845
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
2846
+ className: UsageBilling_module_css_default.numCol,
2847
+ children: entry.price.offPeak !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
2848
+ className: UsageBilling_module_css_default.bandPrice,
2849
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: formatUnitPrice(entry.price.input, entry.price.currency) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2850
+ className: UsageBilling_module_css_default.bandPriceOff,
2851
+ children: formatUnitPrice(entry.price.offPeak.input, entry.price.currency)
2852
+ })]
2853
+ }) : formatUnitPrice(entry.price.input, entry.price.currency)
2854
+ }),
2855
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
2856
+ className: UsageBilling_module_css_default.numCol,
2857
+ children: entry.price.offPeak !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
2858
+ className: UsageBilling_module_css_default.bandPrice,
2859
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: formatUnitPrice(entry.price.cacheHit, entry.price.currency) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2860
+ className: UsageBilling_module_css_default.bandPriceOff,
2861
+ children: formatUnitPrice(entry.price.offPeak.cacheHit, entry.price.currency)
2862
+ })]
2863
+ }) : formatUnitPrice(entry.price.cacheHit, entry.price.currency)
2864
+ }),
2865
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
2866
+ className: UsageBilling_module_css_default.numCol,
2867
+ children: entry.price.offPeak !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
2868
+ className: UsageBilling_module_css_default.bandPrice,
2869
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: formatUnitPrice(entry.price.output, entry.price.currency) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2870
+ className: UsageBilling_module_css_default.bandPriceOff,
2871
+ children: formatUnitPrice(entry.price.offPeak.output, entry.price.currency)
2872
+ })]
2873
+ }) : formatUnitPrice(entry.price.output, entry.price.currency)
2874
+ }),
2875
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", { children: entry.price.offPeak !== void 0 && entry.peakHours !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
2876
+ className: UsageBilling_module_css_default.bandTag,
2877
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
2878
+ t("billing.peak"),
2879
+ " ",
2880
+ entry.peakHours
2881
+ ] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
2882
+ className: UsageBilling_module_css_default.bandTagOff,
2883
+ children: [t("billing.offPeak"), " 50%"]
2884
+ })]
2885
+ }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2886
+ className: UsageBilling_module_css_default.flatTag,
2887
+ children: t("billing.flat")
2888
+ }) })
2889
+ ] }, entry.key)) })]
2890
+ })
2891
+ })]
2857
2892
  })
2858
- })]
2859
- })
2860
- ]
2861
- })]
2893
+ }),
2894
+ renderSlot("billing.dashboard.decor", { position: "footer" })
2895
+ ]
2896
+ })
2897
+ ]
2862
2898
  })
2863
2899
  });
2864
2900
  }
@@ -3021,6 +3057,128 @@ window.__ModuleLoader__.load({
3021
3057
  })] });
3022
3058
  }
3023
3059
  //#endregion
3060
+ //#region src/client/live-cost.tsx
3061
+ /**
3062
+ * LiveCostBar: the session-scope cost ticker mounted on the composer's dock,
3063
+ * showing the current session's accumulated spend and the latest turn's cost.
3064
+ *
3065
+ * It rides `conversation.composer.dock` (the stats-line family seat under the
3066
+ * composer card, same posture as ui-conversation's own StatsLine), so it stays
3067
+ * visible while working without opening the full dashboard. Data comes from the
3068
+ * same `/api/billing/usage-stats` endpoint the dashboard polls; the bar reads
3069
+ * the current session id off the framework snapshot (`useSession` parent of
3070
+ * `sessionId`) and matches `bySession` (session total) and `byTurn` (latest
3071
+ * turn cost). Rendering is a pure function of the snapshot, never a side effect.
3072
+ */
3073
+ /**
3074
+ * 当前会话累计费用：bySession 里会话 id 匹配的那行；缺省为 0。
3075
+ * 导出供测试：纯函数。
3076
+ * @param stats - 薄统计切片。
3077
+ * @param sessionId - 当前会话 id。
3078
+ * @returns 该会话累计费用（人民币元）。
3079
+ */
3080
+ function sessionCostOf(stats, sessionId) {
3081
+ if (sessionId === void 0 || stats?.bySession === void 0) return 0;
3082
+ return stats.bySession.find((item) => item.id === sessionId)?.cost ?? 0;
3083
+ }
3084
+ /**
3085
+ * 当前轮费用：byTurn 里该会话最新一轮的 cost；缺省为 0。
3086
+ * byTurn 服务端按起始时间倒序下发，但求 max(turn) 更稳健（不依赖顺序）。
3087
+ * 导出供测试：纯函数。
3088
+ * @param stats - 薄统计切片。
3089
+ * @param sessionId - 当前会话 id。
3090
+ * @returns 最新一轮费用（人民币元）。
3091
+ */
3092
+ function turnCostOf(stats, sessionId) {
3093
+ if (sessionId === void 0 || stats?.byTurn === void 0) return 0;
3094
+ let latest = 0;
3095
+ let latestTurn = -1;
3096
+ for (const item of stats.byTurn) {
3097
+ if (item.sessionId !== sessionId) continue;
3098
+ if (latestTurn === -1 || item.turn > latestTurn) {
3099
+ latestTurn = item.turn;
3100
+ latest = item.cost;
3101
+ }
3102
+ }
3103
+ return latest;
3104
+ }
3105
+ /** Endpoint the node half serves (same constant the dashboard uses). */
3106
+ const USAGE_STATS_PATH = "/api/billing/usage-stats";
3107
+ /** Refresh cadence (ms): matching the dashboard so the bar stays current. */
3108
+ const REFRESH_INTERVAL_MS = 3e4;
3109
+ /** Load the thin stats slice; null when the endpoint does not answer valid JSON. */
3110
+ async function loadLiveStats() {
3111
+ try {
3112
+ const response = await fetch(USAGE_STATS_PATH);
3113
+ if (!response.ok) return null;
3114
+ const text = await response.text();
3115
+ const parsed = JSON.parse(text);
3116
+ if (parsed === null || typeof parsed !== "object") return null;
3117
+ const doc = parsed;
3118
+ return {
3119
+ ...Array.isArray(doc.bySession) ? { bySession: doc.bySession } : {},
3120
+ ...Array.isArray(doc.byTurn) ? { byTurn: doc.byTurn } : {}
3121
+ };
3122
+ } catch {
3123
+ return null;
3124
+ }
3125
+ }
3126
+ /**
3127
+ * Render the live cost ticker for the current session.
3128
+ * @param props - framework session snapshot hook and locale.
3129
+ */
3130
+ function LiveCostBar({ useSession, t }) {
3131
+ const sessionId = useSession((s) => s.sessionId);
3132
+ const [stats, setStats] = (0, react.useState)(null);
3133
+ (0, react.useEffect)(() => {
3134
+ let cancelled = false;
3135
+ const load = () => {
3136
+ loadLiveStats().then((data) => {
3137
+ if (!cancelled && data !== null) setStats(data);
3138
+ });
3139
+ };
3140
+ load();
3141
+ const timer = setInterval(load, REFRESH_INTERVAL_MS);
3142
+ return () => {
3143
+ cancelled = true;
3144
+ clearInterval(timer);
3145
+ };
3146
+ }, [sessionId]);
3147
+ const sessionCost = (0, react.useMemo)(() => sessionCostOf(stats, sessionId), [stats, sessionId]);
3148
+ const turnCost = (0, react.useMemo)(() => turnCostOf(stats, sessionId), [stats, sessionId]);
3149
+ const money = (cny) => formatMoney(cny, "cny");
3150
+ if (sessionId === void 0 || sessionCost <= 0 && turnCost <= 0) return null;
3151
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
3152
+ className: UsageBilling_module_css_default.liveCostBar,
3153
+ "data-testid": "billing-live-cost-bar",
3154
+ children: [
3155
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
3156
+ className: UsageBilling_module_css_default.liveCostItem,
3157
+ "data-testid": "billing-live-turn",
3158
+ children: [
3159
+ t("billing.liveTurn"),
3160
+ " ",
3161
+ money(turnCost)
3162
+ ]
3163
+ }),
3164
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
3165
+ className: UsageBilling_module_css_default.liveCostSep,
3166
+ "aria-hidden": "true",
3167
+ children: "·"
3168
+ }),
3169
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
3170
+ className: UsageBilling_module_css_default.liveCostItem,
3171
+ "data-testid": "billing-live-session",
3172
+ children: [
3173
+ t("billing.liveSession"),
3174
+ " ",
3175
+ money(sessionCost)
3176
+ ]
3177
+ })
3178
+ ]
3179
+ });
3180
+ }
3181
+ //#endregion
3024
3182
  //#region src/client/locales.ts
3025
3183
  const NS = "usageBilling";
3026
3184
  const zh = {
@@ -3030,6 +3188,9 @@ window.__ModuleLoader__.load({
3030
3188
  "billing.todayCost": "今日费用",
3031
3189
  "billing.monthCost": "本月费用",
3032
3190
  "billing.yearCost": "本年费用",
3191
+ "billing.monthProjected": "本月预计",
3192
+ "billing.liveTurn": "本轮",
3193
+ "billing.liveSession": "会话",
3033
3194
  "billing.totalCost": "总费用",
3034
3195
  "billing.calls": "调用",
3035
3196
  "billing.cacheHitRate": "缓存命中率",
@@ -3075,6 +3236,7 @@ window.__ModuleLoader__.load({
3075
3236
  "billing.balanceUnauthorized": "密钥无效",
3076
3237
  "billing.balanceUnreachable": "查询失败",
3077
3238
  "billing.uncatalogued": "未收录",
3239
+ "billing.estimatedPricing": "估算价",
3078
3240
  "billing.balanceDays": "约可撑 {days} 天",
3079
3241
  "billing.balanceLowBody": "{name} 余额 {balance}，约可撑 {days} 天，请及时充值",
3080
3242
  "billing.subscriptions": "订阅套餐",
@@ -3104,7 +3266,12 @@ window.__ModuleLoader__.load({
3104
3266
  "billing.unknownModel": "未定价",
3105
3267
  "billing.model": "模型",
3106
3268
  "billing.currentRound": "当前",
3107
- "billing.costAbbr": "费用"
3269
+ "billing.costAbbr": "费用",
3270
+ "billing.tabOverview": "概览",
3271
+ "billing.tabTrends": "趋势",
3272
+ "billing.tabProviders": "明细",
3273
+ "billing.tabDetails": "统计",
3274
+ "billing.tabPricing": "费率"
3108
3275
  };
3109
3276
  const en = {
3110
3277
  "billing.title": "Usage",
@@ -3113,6 +3280,9 @@ window.__ModuleLoader__.load({
3113
3280
  "billing.todayCost": "Today",
3114
3281
  "billing.monthCost": "This month",
3115
3282
  "billing.yearCost": "This year",
3283
+ "billing.monthProjected": "Projected",
3284
+ "billing.liveTurn": "Turn",
3285
+ "billing.liveSession": "Session",
3116
3286
  "billing.totalCost": "Total",
3117
3287
  "billing.calls": "Calls",
3118
3288
  "billing.cacheHitRate": "Cache Hit",
@@ -3158,6 +3328,7 @@ window.__ModuleLoader__.load({
3158
3328
  "billing.balanceUnauthorized": "Bad key",
3159
3329
  "billing.balanceUnreachable": "Unavailable",
3160
3330
  "billing.uncatalogued": "Not catalogued",
3331
+ "billing.estimatedPricing": "Estimated",
3161
3332
  "billing.balanceDays": "~{days} days left",
3162
3333
  "billing.balanceLowBody": "{name} balance {balance}, ~{days} days left, please top up",
3163
3334
  "billing.subscriptions": "Subscriptions",
@@ -3187,7 +3358,12 @@ window.__ModuleLoader__.load({
3187
3358
  "billing.unknownModel": "Unpriced",
3188
3359
  "billing.model": "Model",
3189
3360
  "billing.currentRound": "current",
3190
- "billing.costAbbr": "cost"
3361
+ "billing.costAbbr": "cost",
3362
+ "billing.tabOverview": "Overview",
3363
+ "billing.tabTrends": "Trends",
3364
+ "billing.tabProviders": "Details",
3365
+ "billing.tabDetails": "Stats",
3366
+ "billing.tabPricing": "Rates"
3191
3367
  };
3192
3368
  //#endregion
3193
3369
  //#region src/client/billing-service.ts
@@ -3325,6 +3501,12 @@ window.__ModuleLoader__.load({
3325
3501
  registerOpen: (handler) => metrics.registerOpen(handler)
3326
3502
  })
3327
3503
  }, UsageBilling));
3504
+ ctx.slots.inject("conversation.composer.dock", () => ctx.slots.register({
3505
+ name: "conversation.composer.dock",
3506
+ id: "usage-billing-cost",
3507
+ order: 0,
3508
+ locale: NS
3509
+ }, LiveCostBar));
3328
3510
  }
3329
3511
  //#endregion
3330
3512
  exports.UsageBilling = UsageBilling;