@kenz1117/dsh-ui-usage-billing 0.2.1 → 0.2.3

package/lib/client.js

@@ -23,7 +23,7 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region \0dsh-css:/Users/ken/deepseek-harness/packages/client/ui-usage-billing/src/client/UsageBilling.module.css.mjs
-		const css = ".VWh0dG_railButton{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-1);width:36px;height:36px;color:var(--dsw-static-blue-500);cursor:pointer;border-radius:10px;justify-content:center;align-items:center;padding:0;transition:background-color .14s,border-color .14s,color .14s;display:flex}.VWh0dG_railButton:hover,.VWh0dG_railButton:focus-visible{background:var(--dsw-alias-interactive-bg-hover);border-color:var(--dsw-alias-border-l3);color:var(--dsw-static-blue-400);outline:none}.VWh0dG_railButton svg{stroke-width:2px;width:18px;height:18px}.VWh0dG_trigger{border:1px solid var(--dsw-alias-border-l2);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:10px;padding:9px 12px;transition:border-color .14s,background-color .14s,transform .12s;display:flex}.VWh0dG_trigger:hover,.VWh0dG_trigger:focus-visible{border-color:var(--dsw-alias-border-l3);background:var(--dsw-alias-interactive-bg-hover);outline:none}.VWh0dG_trigger:active{transform:scale(.985)}.VWh0dG_triggerIcon{background:linear-gradient(135deg, var(--dsw-static-blue-500), var(--dsw-static-deepseek-500));width:30px;height:30px;color:var(--dsw-static-neutral-bluish-00);border-radius:9px;flex:none;justify-content:center;align-items:center;display:inline-flex}.VWh0dG_triggerIcon svg{stroke-width:2.2px;width:15px;height:15px}.VWh0dG_triggerText{flex-direction:column;gap:1px;min-width:0;display:flex}.VWh0dG_triggerLabel{color:var(--dsw-alias-label-primary);font-size:12px;font-weight:500;line-height:16px}.VWh0dG_triggerMeta{color:var(--dsw-alias-label-tertiary);white-space:nowrap;align-items:baseline;gap:6px;font-size:11px;line-height:15px;display:flex}.VWh0dG_triggerMeta strong{color:var(--dsw-static-blue-500);font-variant-numeric:tabular-nums;font-size:13px;font-weight:600}.VWh0dG_triggerMeta em{color:var(--dsw-alias-label-caption);font-style:normal}.VWh0dG_triggerChevron{width:14px;height:14px;color:var(--dsw-alias-label-caption);flex:none;margin-left:auto}.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{background:linear-gradient(135deg, var(--dsw-static-blue-800) 0%, var(--dsw-static-deepseek-600) 55%, var(--dsw-static-deepseek-500) 100%);min-height:118px;color:var(--dsw-static-neutral-bluish-00);border-radius:16px;align-items:center;gap:24px;padding:18px 22px;display:flex;position:relative;overflow:hidden}.VWh0dG_hero:after{content:\"\";pointer-events:none;background:radial-gradient(circle,#ffffff29 0%,#fff0 70%);border-radius:50%;width:200px;height:200px;position:absolute;top:-60px;right:-40px}.VWh0dG_heroMain{flex-direction:column;flex:auto;justify-content:center;gap:3px;min-width:0;display:flex}.VWh0dG_heroLabel{opacity:.82;white-space:nowrap;font-size:12px;font-weight:500;line-height:17px}.VWh0dG_heroValue{letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap;font-size:38px;font-weight:700;line-height:46px}.VWh0dG_heroMeta{opacity:.82;white-space:nowrap;align-items:center;gap:6px;font-size:12px;line-height:17px;display:flex}.VWh0dG_heroMeta em{background:#ffffff29;border-radius:6px;margin-left:2px;padding:1px 6px;font-style:normal}.VWh0dG_heroDivider{background:#ffffff38;flex:none;align-self:stretch;width:1px}.VWh0dG_heroSide{flex:none;align-items:center;gap:28px;min-width:140px;display:flex}.VWh0dG_heroSideItem{flex-direction:column;justify-content:center;gap:3px;display:flex}.VWh0dG_heroSideLabel{opacity:.82;white-space:nowrap;font-size:12px;line-height:17px}.VWh0dG_heroSideValue{font-variant-numeric:tabular-nums;white-space:nowrap;font-size:22px;font-weight:600;line-height:28px}.VWh0dG_delta{align-items:center;gap:2px;font-size:12px;font-weight:600;line-height:17px;display:inline-flex}.VWh0dG_deltaUp{color:#9ff0b8}.VWh0dG_deltaDown{color:#ffb4b4}.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_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-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_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}@media (width<=640px){.VWh0dG_kpiGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.VWh0dG_hero{flex-direction:column;align-items:flex-start;gap:12px}.VWh0dG_heroMain{width:100%;min-width:0}.VWh0dG_heroDivider{align-self:stretch;width:100%;height:1px}.VWh0dG_heroSide{min-width:0}}";
+		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_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}@media (width<=640px){.VWh0dG_kpiGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.VWh0dG_hero{flex-direction:column;align-items:flex-start;gap:14px}.VWh0dG_heroSide{flex-direction:row;gap:20px}}";
 		const tagId = "@kenz1117/dsh-ui-usage-billing/UsageBilling.module.css";
 		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId) + "]") === null) {
 			const tag = document.createElement("style");
@@ -33,112 +33,120 @@ window.__ModuleLoader__.load({
 			document.head.appendChild(tag);
 		}
 		var UsageBilling_module_css_default = {
-			"bandPrice": "VWh0dG_bandPrice",
-			"heroSideItem": "VWh0dG_heroSideItem",
-			"chartWrap": "VWh0dG_chartWrap",
-			"bandPriceOff": "VWh0dG_bandPriceOff",
-			"pricingToggle": "VWh0dG_pricingToggle",
-			"chartCrosshair": "VWh0dG_chartCrosshair",
-			"healthBadgeBad": "VWh0dG_healthBadgeBad",
-			"hero": "VWh0dG_hero",
-			"kpiTile": "VWh0dG_kpiTile",
-			"kpiDetail": "VWh0dG_kpiDetail",
-			"triggerIcon": "VWh0dG_triggerIcon",
+			"panelTitle": "VWh0dG_panelTitle",
+			"chartLegendLine": "VWh0dG_chartLegendLine",
+			"dashboardModal": "VWh0dG_dashboardModal",
+			"emptyRow": "VWh0dG_emptyRow",
+			"heroValue": "VWh0dG_heroValue",
+			"modelDot": "VWh0dG_modelDot",
+			"chartLegendBar": "VWh0dG_chartLegendBar",
+			"rateBadge": "VWh0dG_rateBadge",
+			"bandTagOff": "VWh0dG_bandTagOff",
+			"heroSideLabel": "VWh0dG_heroSideLabel",
+			"triggerAmountSub": "VWh0dG_triggerAmountSub",
+			"healthIdle": "VWh0dG_healthIdle",
+			"chartGrid": "VWh0dG_chartGrid",
+			"deltaUp": "VWh0dG_deltaUp",
+			"healthBadgeOk": "VWh0dG_healthBadgeOk",
+			"kpiValue": "VWh0dG_kpiValue",
+			"kpiGrid": "VWh0dG_kpiGrid",
+			"heroSide": "VWh0dG_heroSide",
 			"chartDot": "VWh0dG_chartDot",
-			"numCol": "VWh0dG_numCol",
-			"railButton": "VWh0dG_railButton",
+			"heroSideItem": "VWh0dG_heroSideItem",
+			"chartTooltipSwatch": "VWh0dG_chartTooltipSwatch",
 			"deltaDown": "VWh0dG_deltaDown",
-			"kpiValue": "VWh0dG_kpiValue",
-			"kpiLabel": "VWh0dG_kpiLabel",
-			"chartLine": "VWh0dG_chartLine",
-			"pricingChevronOpen": "VWh0dG_pricingChevronOpen",
+			"rateBadgeLive": "VWh0dG_rateBadgeLive",
+			"pricingChevron": "VWh0dG_pricingChevron",
 			"heroLabel": "VWh0dG_heroLabel",
-			"delta": "VWh0dG_delta",
-			"heroValue": "VWh0dG_heroValue",
+			"trigger": "VWh0dG_trigger",
 			"chartAxisLabel": "VWh0dG_chartAxisLabel",
-			"heroMain": "VWh0dG_heroMain",
 			"modelTable": "VWh0dG_modelTable",
-			"panelTitle": "VWh0dG_panelTitle",
-			"na": "VWh0dG_na",
+			"chartBar": "VWh0dG_chartBar",
 			"modelProvider": "VWh0dG_modelProvider",
-			"triggerText": "VWh0dG_triggerText",
-			"modelCell": "VWh0dG_modelCell",
-			"chartLegendBar": "VWh0dG_chartLegendBar",
-			"modelDot": "VWh0dG_modelDot",
-			"healthBadgeOk": "VWh0dG_healthBadgeOk",
-			"triggerLabel": "VWh0dG_triggerLabel",
+			"dashboardBody": "VWh0dG_dashboardBody",
+			"chartCrosshair": "VWh0dG_chartCrosshair",
+			"triggerAmount": "VWh0dG_triggerAmount",
+			"chartTooltip": "VWh0dG_chartTooltip",
+			"pricingToggleText": "VWh0dG_pricingToggleText",
+			"closeButton": "VWh0dG_closeButton",
+			"costCol": "VWh0dG_costCol",
+			"bandPriceOff": "VWh0dG_bandPriceOff",
+			"hero": "VWh0dG_hero",
+			"heroMain": "VWh0dG_heroMain",
 			"chartEmpty": "VWh0dG_chartEmpty",
-			"chartBar": "VWh0dG_chartBar",
-			"heroDivider": "VWh0dG_heroDivider",
-			"triggerChevron": "VWh0dG_triggerChevron",
-			"dashboardRight": "VWh0dG_dashboardRight",
+			"triggerMeta": "VWh0dG_triggerMeta",
+			"kpiDetail": "VWh0dG_kpiDetail",
+			"pricingChevronOpen": "VWh0dG_pricingChevronOpen",
 			"dashboardTitle": "VWh0dG_dashboardTitle",
+			"healthDot": "VWh0dG_healthDot",
+			"planTag": "VWh0dG_planTag",
+			"heroSideValue": "VWh0dG_heroSideValue",
+			"pricingToggle": "VWh0dG_pricingToggle",
+			"triggerDivider": "VWh0dG_triggerDivider",
 			"panelHint": "VWh0dG_panelHint",
-			"panelHead": "VWh0dG_panelHead",
-			"tableScroll": "VWh0dG_tableScroll",
-			"heroSideLabel": "VWh0dG_heroSideLabel",
-			"panel": "VWh0dG_panel",
-			"closeButton": "VWh0dG_closeButton",
-			"triggerMeta": "VWh0dG_triggerMeta",
-			"modelName": "VWh0dG_modelName",
-			"pricingChevron": "VWh0dG_pricingChevron",
-			"deltaUp": "VWh0dG_deltaUp",
-			"emptyRow": "VWh0dG_emptyRow",
+			"modelCell": "VWh0dG_modelCell",
 			"healthOk": "VWh0dG_healthOk",
-			"chartStack": "VWh0dG_chartStack",
-			"dashboardBody": "VWh0dG_dashboardBody",
-			"dashboardHead": "VWh0dG_dashboardHead",
-			"dashboardModal": "VWh0dG_dashboardModal",
-			"kpiGrid": "VWh0dG_kpiGrid",
+			"chartWrap": "VWh0dG_chartWrap",
+			"bandTag": "VWh0dG_bandTag",
 			"kpiGreen": "VWh0dG_kpiGreen",
-			"heroSide": "VWh0dG_heroSide",
-			"bandTagOff": "VWh0dG_bandTagOff",
-			"planTag": "VWh0dG_planTag",
-			"pricingToggleText": "VWh0dG_pricingToggleText",
-			"heroMeta": "VWh0dG_heroMeta",
-			"chartGrid": "VWh0dG_chartGrid",
-			"healthDot": "VWh0dG_healthDot",
-			"chartTooltipSwatch": "VWh0dG_chartTooltipSwatch",
-			"dashboardSubtitle": "VWh0dG_dashboardSubtitle",
+			"flatTag": "VWh0dG_flatTag",
+			"dashboardHead": "VWh0dG_dashboardHead",
 			"pricingTable": "VWh0dG_pricingTable",
-			"healthIdle": "VWh0dG_healthIdle",
-			"costCol": "VWh0dG_costCol",
+			"kpiLabel": "VWh0dG_kpiLabel",
+			"numCol": "VWh0dG_numCol",
+			"tableScroll": "VWh0dG_tableScroll",
+			"chartStack": "VWh0dG_chartStack",
+			"modelName": "VWh0dG_modelName",
+			"dashboard": "VWh0dG_dashboard",
+			"rateBadgeBuiltin": "VWh0dG_rateBadgeBuiltin",
+			"kpiTile": "VWh0dG_kpiTile",
+			"panel": "VWh0dG_panel",
+			"bandPrice": "VWh0dG_bandPrice",
 			"healthBad": "VWh0dG_healthBad",
-			"bandTag": "VWh0dG_bandTag",
-			"chartTooltipRow": "VWh0dG_chartTooltipRow",
 			"chartLegend": "VWh0dG_chartLegend",
+			"chartLine": "VWh0dG_chartLine",
+			"chartTooltipRow": "VWh0dG_chartTooltipRow",
+			"triggerMonth": "VWh0dG_triggerMonth",
+			"healthBadgeBad": "VWh0dG_healthBadgeBad",
+			"railButton": "VWh0dG_railButton",
+			"triggerIcon": "VWh0dG_triggerIcon",
+			"healthBadge": "VWh0dG_healthBadge",
 			"chartSvg": "VWh0dG_chartSvg",
-			"dashboard": "VWh0dG_dashboard",
+			"panelHead": "VWh0dG_panelHead",
+			"heroMeta": "VWh0dG_heroMeta",
+			"delta": "VWh0dG_delta",
 			"chartTooltipDate": "VWh0dG_chartTooltipDate",
-			"chartTooltip": "VWh0dG_chartTooltip",
-			"chartLegendLine": "VWh0dG_chartLegendLine",
-			"healthBadge": "VWh0dG_healthBadge",
-			"heroSideValue": "VWh0dG_heroSideValue",
-			"trigger": "VWh0dG_trigger",
-			"flatTag": "VWh0dG_flatTag"
+			"triggerToday": "VWh0dG_triggerToday",
+			"dashboardRight": "VWh0dG_dashboardRight",
+			"dashboardSubtitle": "VWh0dG_dashboardSubtitle",
+			"na": "VWh0dG_na"
 		};
-		//#endregion
-		//#region src/client/pricing.ts
+		/** 运行时实时覆盖：undefined = 用内置目录与内置汇率（默认值降级）。 */
+		let liveRate;
+		let livePrices;
 		/**
-		* Billing engine: per-model price tables and token-usage cost estimation.
-		*
-		* Each model's price table uses its NATIVE currency: domestic providers
-		* (DeepSeek, 智谱, 通义…) publish RMB prices and store them directly;
-		* overseas providers (OpenAI, Google, xAI, Meta) publish USD.
-		* Cost is always computed and displayed in CNY — only USD-priced models go
-		* through the exchange rate, never domestic ones.
-		*
-		* Google-style two-band billing is modeled per model: Gemini's Flex tier
-		* prices spare-capacity traffic at -50%; DeepSeek V4 splits peak
-		* (09:00-12:00 / 14:00-18:00 Beijing) at 2x the off-peak rate. The estimator
-		* mixes both bands by a configured peak share ({@link DEFAULT_PEAK_SHARE}).
+		* Apply the node half's live pricing snapshot. Absent fields keep the
+		* built-in catalog and rate; callers never fabricate values.
+		* @param pricing - the `/api/billing/pricing` response.
 		*/
+		function applyLivePricing(pricing) {
+			liveRate = pricing.rate;
+			livePrices = pricing.prices;
+		}
+		/** 当前汇率：实时覆盖优先，缺省回退内置固定值。 */
+		function currentRate() {
+			return liveRate ?? 6.79;
+		}
 		/**
-		* USD → CNY rate for display. Source: China Foreign Exchange Trade System
-		* mid-rate 6.7878 on 2026-08-14; rounded to 6.79. Only applies to overseas
-		* USD-priced models — domestic models never pass through this rate.
+		* 当前生效的 USD → CNY 汇率及其来源：live = 启动时实时拉取成功，
+		* builtin = 实时拉取失败、正在用内置默认值。
 		*/
-		const USD_TO_CNY = 6.79;
+		function getRateInfo() {
+			return {
+				rate: currentRate(),
+				live: liveRate !== void 0
+			};
+		}
 		/** Default share of traffic assumed to fall in the peak band (0..1). */
 		const DEFAULT_PEAK_SHARE = .5;
 		/**
@@ -617,11 +625,22 @@ window.__ModuleLoader__.load({
 		];
 		/** Lookup a model by its stats key; falls back to the generic `other` entry. */
 		function modelOf(key) {
-			const found = MODEL_CATALOG.find((entry) => entry.key === key);
-			if (found !== void 0) return found;
-			const fallback = MODEL_CATALOG.at(-1);
-			if (fallback !== void 0) return fallback;
-			throw new Error("MODEL_CATALOG must not be empty");
+			const base = MODEL_CATALOG.find((entry) => entry.key === key) ?? (() => {
+				const fallback = MODEL_CATALOG.at(-1);
+				if (fallback !== void 0) return fallback;
+				throw new Error("MODEL_CATALOG must not be empty");
+			})();
+			const live = livePrices?.[key];
+			if (live === void 0) return base;
+			return {
+				...base,
+				price: {
+					currency: "USD",
+					input: live.input,
+					cacheHit: live.cacheHit,
+					output: live.output
+				}
+			};
 		}
 		/** Resolve a price-table row by its CSS variable name (theme token or fallback color). */
 		function resolveToken(name) {
@@ -640,12 +659,18 @@ window.__ModuleLoader__.load({
 			const miss = buckets.cacheMiss > 0 ? buckets.cacheMiss : Math.max(0, buckets.input - buckets.cacheHit);
 			const hit = Math.min(buckets.cacheHit, buckets.input);
 			const raw = (miss * (band.cacheMiss ?? band.input) + hit * band.cacheHit + buckets.output * band.output) / 1e6;
-			return currency === "USD" ? raw * USD_TO_CNY : raw;
+			return currency === "USD" ? raw * currentRate() : raw;
 		}
 		/**
 		* Estimate the CNY cost of one model's token usage, mixing the peak and
 		* off-peak bands by the given peak share (flat-priced models cost the same in
 		* both bands).
+		*
+		* 计费维度是「缓存命中价 × 时段价」的交叉：每个时段档内部分别按缓存命中
+		* 价（cacheHit）与未命中价（input/cacheMiss）计价，两个时段档再按
+		* peakShare 混合。时段定义以北京时间为准（如 DeepSeek V4 高峰
+		* 09:00-12:00 / 14:00-18:00）。因聚合只有按日 token 量、没有请求级时间戳，
+		* 时段只能按比例估算，而非逐请求判定。
 		* @param entry - the catalog entry whose prices apply.
 		* @param buckets - token usage counts.
 		* @param peakShare - share of traffic in the peak band (0..1); defaults to {@link DEFAULT_PEAK_SHARE}.
@@ -659,10 +684,12 @@ window.__ModuleLoader__.load({
 		}
 		/** Format a CNY amount with adaptive precision. */
 		function formatMoney(cny) {
-			if (cny >= 1e3) return `¥${cny.toFixed(0)}`;
-			if (cny >= 10) return `¥${cny.toFixed(1)}`;
-			if (cny >= .1) return `¥${cny.toFixed(2)}`;
-			return `¥${cny.toFixed(3)}`;
+			const value = Number(cny);
+			if (!Number.isFinite(value)) return "¥0";
+			if (value >= 1e3) return `¥${value.toFixed(0)}`;
+			if (value >= 10) return `¥${value.toFixed(1)}`;
+			if (value >= .1) return `¥${value.toFixed(2)}`;
+			return `¥${value.toFixed(3)}`;
 		}
 		/**
 		* Format a per-1M-token price in its native currency (free when the rate is
@@ -686,23 +713,27 @@ window.__ModuleLoader__.load({
 		}
 		/** Format a percentage. */
 		function formatPercent(value) {
-			return `${value.toFixed(1)}%`;
+			const normalized = Number(value);
+			if (!Number.isFinite(normalized)) return "0.0%";
+			return `${normalized.toFixed(1)}%`;
 		}
 		//#endregion
 		//#region src/client/TrendChart.tsx
 		/**
-		* TrendChart: dependency-free SVG stacked bar chart of daily cost per model.
-		* Each day's column stacks every model's share in its brand color, so the
-		* total trend and the per-model composition are visible at once. A hover
-		* crosshair shows the day's model breakdown. No chart library — the surface
-		* stays self-contained and offline.
+		* TrendChart: dependency-free SVG chart of daily cost + calls.
+		*
+		* The columns are GROUPED per model — one bar per model per day, each in its
+		* brand color, so per-model cost is directly comparable. The blue line is the
+		* total call volume across all models, plotted on its own right-hand axis.
+		* A hover crosshair shows the day's model breakdown. No chart library — the
+		* surface stays self-contained and offline.
 		*/
 		/** Fixed viewBox; the SVG scales to its container. */
 		const W = 680;
 		const H = 220;
 		const PAD = {
 			top: 18,
-			right: 16,
+			right: 40,
 			bottom: 26,
 			left: 46
 		};
@@ -711,6 +742,12 @@ window.__ModuleLoader__.load({
 			const [, month, day] = iso.split("-");
 			return `${Number(month)}/${Number(day)}`;
 		}
+		/** Compact tick label for the calls axis: `1.2K` / `3.4M`. */
+		function shortNumber(value) {
+			if (value >= 1e6) return `${(value / 1e6).toFixed(1)}M`;
+			if (value >= 1e3) return `${(value / 1e3).toFixed(1)}K`;
+			return String(Math.round(value));
+		}
 		/** Ticks every `step` items for sparse axis labels. */
 		function tickIndexes(length, step) {
 			const out = [];
@@ -718,52 +755,56 @@ window.__ModuleLoader__.load({
 			if (length > 0 && out[out.length - 1] !== length - 1) out.push(length - 1);
 			return out;
 		}
+		/** Single-color fallback identity used when the stats carry no per-model detail. */
+		const TOTAL_MODEL = {
+			key: "__total__",
+			name: "总计",
+			color: ""
+		};
 		/**
-		* Render the daily per-model stacked cost chart.
+		* Render the daily grouped cost bars plus the total-calls line.
 		* @param props.data - sorted daily rows (ascending date).
-		* @param props.models - the model legend, in stack order (bottom first).
+		* @param props.models - the model legend, in bar order.
 		*/
 		function TrendChart({ data, models = [] }) {
 			const [hover, setHover] = (0, react.useState)(null);
 			const layout = (0, react.useMemo)(() => {
 				const n = data.length;
 				if (n === 0) return null;
-				const maxCost = Math.max(...data.map((d) => d.cost), 1e-4);
 				const plotW = W - PAD.left - PAD.right;
 				const plotH = H - PAD.top - PAD.bottom;
 				const inner = (i) => {
 					if (n === 1) return PAD.left + plotW / 2;
 					return PAD.left + plotW * i / (n - 1);
 				};
+				const maxCost = Math.max(...data.flatMap((d) => Object.values(d.byModel ?? {})), ...data.map((d) => d.cost), 1e-4);
 				const yCost = (value) => PAD.top + plotH - value / maxCost * plotH;
+				const maxCalls = Math.max(...data.map((d) => d.calls), 1);
+				const yCalls = (value) => PAD.top + plotH - value / maxCalls * plotH;
+				const groupW = plotW / n;
+				const barCount = Math.max(models.length, 1);
+				const barW = Math.min(14, groupW / barCount * .7);
 				return {
 					n,
 					plotW,
 					plotH,
 					inner,
 					yCost,
-					barW: Math.min(18, plotW / n * .5),
-					columns: data.map((d, i) => {
-						let acc = 0;
-						const segments = models.map((model) => {
-							const value = d.byModel?.[model.key] ?? 0;
-							const y0 = acc;
-							acc += value;
-							return {
-								model,
-								y0,
-								y1: acc,
-								rounded: false
-							};
-						});
-						const top = segments.at(-1);
-						if (top !== void 0) top.rounded = true;
-						return {
+					yCalls,
+					barW,
+					bars: data.flatMap((d, i) => {
+						if (models.length === 0) return [{
 							date: d.date,
-							x: inner(i),
-							segments,
-							total: acc
-						};
+							model: TOTAL_MODEL,
+							x: inner(i) - barW / 2,
+							value: d.cost
+						}];
+						return models.map((model, k) => ({
+							date: d.date,
+							model,
+							x: inner(i) - groupW / 2 + groupW * (k + .5) / models.length - barW / 2,
+							value: d.byModel?.[model.key] ?? 0
+						}));
 					}),
 					costTicks: [
 						0,
@@ -772,15 +813,24 @@ window.__ModuleLoader__.load({
 						.75,
 						1
 					].map((f) => maxCost * f).reverse(),
-					maxCost
+					callsTicks: [
+						0,
+						.25,
+						.5,
+						.75,
+						1
+					].map((f) => maxCalls * f).reverse(),
+					linePath: data.map((d, i) => {
+						const y = yCalls(d.calls);
+						return `${i === 0 ? "M" : "L"}${inner(i)} ${y}`;
+					}).join(" ")
 				};
 			}, [data, models]);
 			if (layout === null) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: UsageBilling_module_css_default.chartEmpty,
 				children: "暂无趋势数据"
 			});
-			const { n, plotW, inner, yCost, barW, columns, costTicks } = layout;
-			const activeColumn = hover === null ? void 0 : columns[hover];
+			const { n, plotW, plotH, inner, yCost, yCalls, barW, bars, costTicks, callsTicks, linePath } = layout;
 			const activePoint = hover === null ? void 0 : data[hover];
 			const indices = tickIndexes(n, Math.max(1, Math.ceil(n / 8)));
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -790,7 +840,7 @@ window.__ModuleLoader__.load({
 						viewBox: `0 0 ${W} ${H}`,
 						className: UsageBilling_module_css_default.chartSvg,
 						role: "img",
-						"aria-label": "Daily cost by model",
+						"aria-label": "Daily cost by model and total calls",
 						onMouseLeave: () => {
 							setHover(null);
 						},
@@ -817,15 +867,30 @@ window.__ModuleLoader__.load({
 									children: formatMoney(value)
 								})] }, `cost-${idx}`);
 							}),
-							columns.map((column) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("g", { children: column.segments.map((segment) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
-								x: column.x - barW / 2,
-								y: yCost(segment.y1),
+							bars.map((bar) => bar.value > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+								x: bar.x,
+								y: yCost(bar.value),
 								width: barW,
-								height: Math.max(segment.y1 - segment.y0 > 0 ? 1 : 0, yCost(segment.y0) - yCost(segment.y1)),
-								rx: segment.rounded ? 3 : 0,
-								className: UsageBilling_module_css_default.chartStack,
-								style: { fill: segment.model.color }
-							}, segment.model.key)) }, column.date)),
+								height: yCost(0) - yCost(bar.value),
+								rx: 2,
+								className: bar.model.color === "" ? UsageBilling_module_css_default.chartBar : UsageBilling_module_css_default.chartStack,
+								style: bar.model.color === "" ? void 0 : { fill: bar.model.color }
+							}, `${bar.date}-${bar.model.key}`) : null),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+								d: linePath,
+								fill: "none",
+								className: UsageBilling_module_css_default.chartLine
+							}),
+							callsTicks.map((value, idx) => {
+								const y = yCalls(value);
+								return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
+									x: W - PAD.right + 8,
+									y: y + 3,
+									textAnchor: "start",
+									className: UsageBilling_module_css_default.chartAxisLabel,
+									children: shortNumber(value)
+								}, `calls-${idx}`);
+							}),
 							indices.map((i) => {
 								const point = data[i];
 								if (point === void 0) return null;
@@ -837,44 +902,44 @@ window.__ModuleLoader__.load({
 									children: shortDate(point.date)
 								}, point.date);
 							}),
-							activeColumn !== void 0 && hover !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+							hover !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
 								x1: inner(hover),
 								x2: inner(hover),
 								y1: PAD.top,
-								y2: PAD.top + layout.plotH,
+								y2: PAD.top + plotH,
 								className: UsageBilling_module_css_default.chartCrosshair
 							})
 						]
 					}),
-					activeColumn !== void 0 && activePoint !== void 0 && hover !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					activePoint !== void 0 && hover !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: UsageBilling_module_css_default.chartTooltip,
 						style: {
 							left: `${inner(hover) / W * 100}%`,
-							top: `${yCost(activeColumn.total) / H * 100}%`
+							top: `${yCost(activePoint.cost) / H * 100}%`
 						},
 						children: [
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 								className: UsageBilling_module_css_default.chartTooltipDate,
 								children: activePoint.date
 							}),
-							activeColumn.segments.filter((segment) => segment.y1 - segment.y0 > 0).map((segment) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							models.filter((model) => (activePoint.byModel?.[model.key] ?? 0) > 0).map((model) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 								className: UsageBilling_module_css_default.chartTooltipRow,
 								children: [
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 										className: UsageBilling_module_css_default.chartTooltipSwatch,
-										style: { background: segment.model.color }
+										style: { background: model.color }
 									}),
-									segment.model.name,
+									model.name,
 									" ",
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: formatMoney(segment.y1 - segment.y0) })
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: formatMoney(activePoint.byModel?.[model.key] ?? 0) })
 								]
-							}, segment.model.key)),
+							}, model.key)),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 								className: UsageBilling_module_css_default.chartTooltipRow,
 								children: [
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: UsageBilling_module_css_default.chartLegendBar }),
 									"总计 ",
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: formatMoney(activeColumn.total) })
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: formatMoney(activePoint.cost) })
 								]
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -887,12 +952,12 @@ window.__ModuleLoader__.load({
 							})
 						]
 					}),
-					models.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					models.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: UsageBilling_module_css_default.chartLegend,
-						children: models.map((model) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						children: [models.map((model) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 							className: UsageBilling_module_css_default.chartTooltipSwatch,
 							style: { background: model.color }
-						}), model.name] }, model.key))
+						}), model.name] }, model.key)), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: UsageBilling_module_css_default.chartLegendLine }), "调用"] })]
 					})
 				]
 			});
@@ -1001,6 +1066,43 @@ window.__ModuleLoader__.load({
 		}
 		/** Path to the usage-stats endpoint served by this plugin's node half. */
 		const USAGE_STATS_PATH = "/api/billing/usage-stats";
+		/** Path to the live-pricing endpoint served by this plugin's node half. */
+		const PRICING_PATH = "/api/billing/pricing";
+		/** Path to the account-balance endpoint served by this plugin's node half. */
+		const BALANCE_PATH = "/api/billing/balance";
+		/** 弹窗打开期间统计与定价的自动刷新间隔（毫秒）。 */
+		const STATS_REFRESH_INTERVAL_MS = 3e4;
+		/**
+		* 本地时区（北京时间）日期戳：与服务端聚合的 dayStamp 一致。不要用
+		* `toISOString()`——那是 UTC，北京时间的凌晨 0-8 点会取到前一天。
+		*/
+		function localDayStamp(time = Date.now()) {
+			const date = new Date(time);
+			const pad = (n) => String(n).padStart(2, "0");
+			return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+		}
+		/** 本地时区时钟：`HH:MM:SS`。 */
+		function formatClock(time) {
+			const date = new Date(time);
+			const pad = (n) => String(n).padStart(2, "0");
+			return `${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`;
+		}
+		/**
+		* 高区分度图表色板：趋势图柱、图例与计费表圆点按模型分配。不用模型品牌色
+		* （目录里多为蓝色系，视觉上几乎分不开），保证每个模型一眼可辨。
+		*/
+		const CHART_PALETTE = [
+			"#3b82f6",
+			"#06b6d4",
+			"#8b5cf6",
+			"#f59e0b",
+			"#10b981",
+			"#ef4444",
+			"#ec4899",
+			"#6366f1",
+			"#f97316",
+			"#14b8a6"
+		];
 		/** Empty snapshot: shown before (or without) real host data — zeros, never fabricated samples. */
 		const EMPTY_STATS = {
 			total: {
@@ -1022,89 +1124,174 @@ window.__ModuleLoader__.load({
 				if (!response.ok) return null;
 				const text = await response.text();
 				const parsed = JSON.parse(text);
-				if (parsed !== null && typeof parsed === "object" && "total" in parsed) return parsed;
-				return null;
+				if (parsed === null || typeof parsed !== "object" || !("total" in parsed)) return null;
+				const candidate = parsed;
+				return {
+					total: candidate.total ?? EMPTY_STATS.total,
+					byModel: candidate.byModel ?? {},
+					byDay: candidate.byDay ?? {},
+					...candidate.byDayModels !== void 0 ? { byDayModels: candidate.byDayModels } : {},
+					...candidate.updatedAt !== void 0 ? { updatedAt: candidate.updatedAt } : {}
+				};
 			} catch {
 				return null;
 			}
 		}
 		/**
+		* Apply the node half's live pricing snapshot. The node half refreshes once
+		* at boot, so an early `builtin` answer may just mean the refresh is still
+		* in flight — retry briefly before settling for the built-in values.
+		* Any final failure keeps the built-in catalog and rate — degrade, never
+		* fabricate.
+		* @param attempt - current retry index (0-based).
+		*/
+		async function loadLivePricing(attempt = 0) {
+			const MAX_ATTEMPTS = 4;
+			try {
+				const response = await fetch(PRICING_PATH);
+				if (!response.ok) return;
+				const text = await response.text();
+				const parsed = JSON.parse(text);
+				if (parsed === null || typeof parsed !== "object" || !("source" in parsed)) return;
+				const pricing = parsed;
+				if (pricing.source === "builtin" && attempt < MAX_ATTEMPTS - 1) {
+					setTimeout(() => {
+						loadLivePricing(attempt + 1);
+					}, 2e3);
+					return;
+				}
+				applyLivePricing(pricing);
+			} catch {}
+		}
+		/**
+		* 拉取各提供方账户余额（供模型计费明细表的余额列）；失败返回空列表。
+		* @returns the balance rows, or an empty list on any failure.
+		*/
+		async function fetchBalances() {
+			try {
+				const response = await fetch(BALANCE_PATH);
+				if (!response.ok) return [];
+				const text = await response.text();
+				const parsed = JSON.parse(text);
+				if (parsed !== null && typeof parsed === "object" && "balances" in parsed) return parsed.balances;
+				return [];
+			} catch {
+				return [];
+			}
+		}
+		/**
 		* Sidebar footer trigger: compact pill in wide mode, icon in rail mode.
 		* @param props - framework props plus `wide` column state.
 		*/
 		function UsageBillingTrigger(props) {
-			const { wide, onOpen, monthCost, todayCost } = props;
+			const { wide, t, onOpen, monthCost, todayCost } = props;
+			const cardIcon = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+				viewBox: "0 0 24 24",
+				fill: "none",
+				stroke: "currentColor",
+				"aria-hidden": "true",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+						x: "2.5",
+						y: "5",
+						width: "19",
+						height: "14",
+						rx: "2.5"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M2.5 9.5h19" }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+						x: "6",
+						y: "12",
+						width: "4",
+						height: "3.5",
+						rx: "0.75"
+					})
+				]
+			});
 			if (!wide) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 				type: "button",
 				className: UsageBilling_module_css_default.railButton,
 				onClick: onOpen,
-				title: formatMoney(monthCost),
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-					viewBox: "0 0 24 24",
-					fill: "none",
-					stroke: "currentColor",
-					"aria-hidden": "true",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" })
-				})
+				title: `${t("billing.title")} · ${formatMoney(monthCost)}`,
+				children: cardIcon
 			});
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 				type: "button",
 				className: UsageBilling_module_css_default.trigger,
 				onClick: onOpen,
+				title: `${t("billing.title")} · 本月 ${formatMoney(monthCost)}`,
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 						className: UsageBilling_module_css_default.triggerIcon,
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-							viewBox: "0 0 24 24",
-							fill: "none",
-							stroke: "currentColor",
-							"aria-hidden": "true",
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" })
-						})
+						children: cardIcon
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-						className: UsageBilling_module_css_default.triggerText,
+						className: UsageBilling_module_css_default.triggerToday,
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: UsageBilling_module_css_default.triggerLabel,
-							children: "计费仪表盘"
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 							className: UsageBilling_module_css_default.triggerMeta,
-							children: [
-								"当月 ",
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: formatMoney(monthCost) }),
-								todayCost > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("em", { children: ["今日 ", formatMoney(todayCost)] })
-							]
+							children: "今日"
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: UsageBilling_module_css_default.triggerAmount,
+							children: formatMoney(todayCost)
 						})]
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-						className: UsageBilling_module_css_default.triggerChevron,
-						viewBox: "0 0 24 24",
-						fill: "none",
-						stroke: "currentColor",
-						"aria-hidden": "true",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m9 6 6 6-6 6" })
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: UsageBilling_module_css_default.triggerDivider }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: UsageBilling_module_css_default.triggerMonth,
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: UsageBilling_module_css_default.triggerMeta,
+							children: "当月"
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: UsageBilling_module_css_default.triggerAmountSub,
+							children: formatMoney(monthCost)
+						})]
 					})
 				]
 			});
 		}
 		/**
 		* The centered billing dashboard modal.
-		* @param props - stats, locale function, close handler, and model health.
+		* @param props - stats, locale function, close handler, model health, balances.
 		*/
-		function BillingDashboard({ stats, t, onClose, health }) {
+		function BillingDashboard({ stats, t, onClose, health, balances }) {
 			const { total, byModel, byDay } = stats;
 			const [pricingOpen, setPricingOpen] = (0, react.useState)(false);
+			const rateInfo = getRateInfo();
+			const balanceFor = (provider) => balances.find((balance) => normalizeProvider(balance.provider) === normalizeProvider(provider));
+			const renderBalance = (balance) => {
+				if (balance === void 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: UsageBilling_module_css_default.na,
+					children: "—"
+				});
+				if (balance.error === "unconfigured") return t("billing.balanceUnconfigured");
+				if (balance.error === "unauthorized") return t("billing.balanceUnauthorized");
+				if (balance.error === "unreachable") return t("billing.balanceUnreachable");
+				if (balance.totalBalance === void 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: UsageBilling_module_css_default.na,
+					children: "—"
+				});
+				return balance.currency === "USD" ? `$${balance.totalBalance.toFixed(2)}` : formatMoney(balance.totalBalance);
+			};
 			const cacheHitRate = total.cacheHit + total.cacheMiss > 0 ? total.cacheHit / (total.cacheHit + total.cacheMiss) * 100 : 0;
 			const dates = Object.keys(byDay).sort();
-			const latestDate = dates.at(-1) ?? "";
-			const today = (/* @__PURE__ */ new Date()).toISOString().slice(0, 10);
+			const today = localDayStamp();
 			const todayCost = byDay[today]?.cost ?? 0;
 			const monthPrefix = today.slice(0, 7);
 			const yearPrefix = today.slice(0, 4);
 			const monthCost = dates.reduce((sum, d) => sum + (d.startsWith(monthPrefix) ? byDay[d]?.cost ?? 0 : 0), 0);
 			const monthCalls = dates.reduce((sum, d) => sum + (d.startsWith(monthPrefix) ? byDay[d]?.calls ?? 0 : 0), 0);
 			const yearCost = dates.reduce((sum, d) => sum + (d.startsWith(yearPrefix) ? byDay[d]?.cost ?? 0 : 0), 0);
-			const trend = (0, react.useMemo)(() => dates.map((date) => {
+			const trendDates = (0, react.useMemo)(() => {
+				const out = [];
+				for (let offset = 6; offset >= 0; offset -= 1) {
+					const day = /* @__PURE__ */ new Date();
+					day.setDate(day.getDate() - offset);
+					out.push(localDayStamp(day.getTime()));
+				}
+				return out;
+			}, []);
+			const latestDate = trendDates.at(-1) ?? today;
+			const trend = (0, react.useMemo)(() => trendDates.map((date) => {
 				const byModel = {};
 				const dayModels = stats.byDayModels?.[date];
 				if (dayModels !== void 0) {
@@ -1118,7 +1305,7 @@ window.__ModuleLoader__.load({
 					byModel
 				};
 			}), [
-				dates,
+				trendDates,
 				byDay,
 				stats.byDayModels
 			]);
@@ -1134,7 +1321,6 @@ window.__ModuleLoader__.load({
 					key,
 					name: entry.name,
 					provider: entry.provider,
-					color: resolveToken(entry.colorVar),
 					calls: data.calls,
 					input: data.input,
 					output: data.output,
@@ -1143,7 +1329,10 @@ window.__ModuleLoader__.load({
 					plan: isSubscriptionPlan(key),
 					...data.cost > 0 ? { actual: data.cost } : {}
 				};
-			}).sort((a, b) => (b.actual ?? b.estimated) - (a.actual ?? a.estimated)), [byModel]);
+			}).sort((a, b) => (b.actual ?? b.estimated) - (a.actual ?? a.estimated)).map((row, index) => ({
+				...row,
+				color: CHART_PALETTE[index % CHART_PALETTE.length] ?? "#8b95a3"
+			})), [byModel]);
 			const estimatedTotal = modelRows.reduce((sum, row) => sum + row.estimated, 0);
 			const displayTotal = total.cost > 0 ? total.cost : estimatedTotal;
 			const avgPerCall = total.calls > 0 ? displayTotal / total.calls : 0;
@@ -1201,64 +1390,56 @@ window.__ModuleLoader__.load({
 						children: [
 							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
 								className: UsageBilling_module_css_default.hero,
-								children: [
-									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-										className: UsageBilling_module_css_default.heroMain,
-										children: [
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-												className: UsageBilling_module_css_default.heroLabel,
-												children: t("billing.monthCost")
-											}),
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-												className: UsageBilling_module_css_default.heroValue,
-												children: formatMoney(monthCost)
-											}),
-											/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-												className: UsageBilling_module_css_default.heroMeta,
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: UsageBilling_module_css_default.heroMain,
+									children: [
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: UsageBilling_module_css_default.heroLabel,
+											children: t("billing.monthCost")
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: UsageBilling_module_css_default.heroValue,
+											children: formatMoney(monthCost)
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+											className: UsageBilling_module_css_default.heroMeta,
+											children: [
+												monthCalls.toLocaleString(),
+												" ",
+												t("billing.calls")
+											]
+										})
+									]
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: UsageBilling_module_css_default.heroSide,
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+										className: UsageBilling_module_css_default.heroSideItem,
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: UsageBilling_module_css_default.heroSideLabel,
+											children: t("billing.yearCost")
+										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: UsageBilling_module_css_default.heroSideValue,
+											children: formatMoney(yearCost)
+										})]
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+										className: UsageBilling_module_css_default.heroSideItem,
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: UsageBilling_module_css_default.heroSideLabel,
+											children: t("billing.todayCost")
+										}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+											className: UsageBilling_module_css_default.heroSideValue,
+											children: [formatMoney(todayCost), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+												className: clsx(UsageBilling_module_css_default.delta, deltaPct >= 0 ? UsageBilling_module_css_default.deltaUp : UsageBilling_module_css_default.deltaDown),
 												children: [
-													monthCalls.toLocaleString(),
+													deltaPct >= 0 ? "▲" : "▼",
 													" ",
-													t("billing.calls")
+													Math.abs(deltaPct).toFixed(1),
+													"%"
 												]
-											})
-										]
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: UsageBilling_module_css_default.heroDivider }),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-										className: UsageBilling_module_css_default.heroSide,
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-											className: UsageBilling_module_css_default.heroSideItem,
-											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-												className: UsageBilling_module_css_default.heroSideLabel,
-												children: t("billing.yearCost")
-											}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-												className: UsageBilling_module_css_default.heroSideValue,
-												children: formatMoney(yearCost)
 											})]
-										}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-											className: UsageBilling_module_css_default.heroSideItem,
-											children: [
-												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-													className: UsageBilling_module_css_default.heroSideLabel,
-													children: t("billing.todayCost")
-												}),
-												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-													className: UsageBilling_module_css_default.heroSideValue,
-													children: formatMoney(todayCost)
-												}),
-												/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-													className: clsx(UsageBilling_module_css_default.delta, deltaPct >= 0 ? UsageBilling_module_css_default.deltaUp : UsageBilling_module_css_default.deltaDown),
-													children: [
-														deltaPct >= 0 ? "▲" : "▼",
-														" ",
-														Math.abs(deltaPct).toFixed(1),
-														"%"
-													]
-												})
-											]
 										})]
-									})
-								]
+									})]
+								})]
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
 								className: UsageBilling_module_css_default.kpiGrid,
@@ -1376,13 +1557,9 @@ window.__ModuleLoader__.load({
 									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
 										className: UsageBilling_module_css_default.panelTitle,
 										children: t("billing.models")
-									}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 										className: UsageBilling_module_css_default.panelHint,
-										children: [
-											t("billing.estimated"),
-											" · ",
-											t("billing.pricePerM")
-										]
+										children: stats.updatedAt !== void 0 ? `${t("billing.lastUpdated")} ${formatClock(stats.updatedAt)}` : ""
 									})]
 								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 									className: UsageBilling_module_css_default.tableScroll,
@@ -1408,11 +1585,11 @@ window.__ModuleLoader__.load({
 											}),
 											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
 												className: UsageBilling_module_css_default.numCol,
-												children: t("billing.estimated")
+												children: t("billing.actual")
 											}),
 											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
 												className: UsageBilling_module_css_default.numCol,
-												children: t("billing.actual")
+												children: t("billing.balance")
 											})
 										] }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tbody", { children: [modelRows.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
 											colSpan: 7,
@@ -1448,13 +1625,6 @@ window.__ModuleLoader__.load({
 												className: UsageBilling_module_css_default.numCol,
 												children: formatPercent(row.cacheHitRate)
 											}),
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
-												className: clsx(UsageBilling_module_css_default.numCol, UsageBilling_module_css_default.costCol),
-												children: row.plan ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-													className: UsageBilling_module_css_default.planTag,
-													children: "订阅包含"
-												}) : formatMoney(row.estimated)
-											}),
 											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
 												className: UsageBilling_module_css_default.numCol,
 												children: row.plan ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -1464,6 +1634,10 @@ window.__ModuleLoader__.load({
 													className: UsageBilling_module_css_default.na,
 													children: "—"
 												})
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+												className: UsageBilling_module_css_default.numCol,
+												children: renderBalance(balanceFor(row.provider))
 											})
 										] }, row.key))] })]
 									})
@@ -1483,9 +1657,17 @@ window.__ModuleLoader__.load({
 										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 											className: UsageBilling_module_css_default.panelTitle,
 											children: t("billing.pricing")
-										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 											className: UsageBilling_module_css_default.panelHint,
-											children: t("billing.pricePerM")
+											children: [
+												t("billing.todayRate"),
+												" 1 USD = ",
+												formatMoney(rateInfo.rate),
+												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+													className: clsx(UsageBilling_module_css_default.rateBadge, rateInfo.live ? UsageBilling_module_css_default.rateBadgeLive : UsageBilling_module_css_default.rateBadgeBuiltin),
+													children: rateInfo.live ? t("billing.rateLive") : t("billing.rateBuiltin")
+												})
+											]
 										})]
 									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
 										className: clsx(UsageBilling_module_css_default.pricingChevron, pricingOpen && UsageBilling_module_css_default.pricingChevronOpen),
@@ -1589,22 +1771,37 @@ window.__ModuleLoader__.load({
 			const { t, checkModels } = props;
 			const [stats, setStats] = (0, react.useState)(EMPTY_STATS);
 			const [health, setHealth] = (0, react.useState)(IDLE_HEALTH);
+			const [balances, setBalances] = (0, react.useState)([]);
 			const [open, setOpen] = (0, react.useState)(false);
 			const close = (0, react.useCallback)(() => {
 				setOpen(false);
 			}, []);
+			const reloadStats = (0, react.useCallback)(() => {
+				loadUsageStats().then((data) => {
+					if (data !== null) setStats(data);
+				});
+				fetchBalances().then((list) => {
+					if (list.length > 0) setBalances(list);
+				});
+			}, []);
 			const openDashboard = (0, react.useCallback)(() => {
+				reloadStats();
+				loadLivePricing();
 				setOpen(true);
-			}, []);
+			}, [reloadStats]);
 			(0, react.useEffect)(() => {
-				let mounted = true;
-				loadUsageStats().then((data) => {
-					if (mounted && data !== null) setStats(data);
-				});
+				reloadStats();
+				loadLivePricing();
+			}, [reloadStats]);
+			(0, react.useEffect)(() => {
+				const timer = setInterval(() => {
+					reloadStats();
+					loadLivePricing();
+				}, STATS_REFRESH_INTERVAL_MS);
 				return () => {
-					mounted = false;
+					clearInterval(timer);
 				};
-			}, []);
+			}, [reloadStats]);
 			(0, react.useEffect)(() => {
 				let mounted = true;
 				checkModels().then((result) => {
@@ -1614,7 +1811,7 @@ window.__ModuleLoader__.load({
 					mounted = false;
 				};
 			}, [checkModels]);
-			const today = (/* @__PURE__ */ new Date()).toISOString().slice(0, 10);
+			const today = localDayStamp();
 			const monthCost = Object.entries(stats.byDay).filter(([date]) => date.startsWith(today.slice(0, 7))).reduce((sum, [, day]) => sum + day.cost, 0);
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UsageBillingTrigger, {
 				...props,
@@ -1625,7 +1822,8 @@ window.__ModuleLoader__.load({
 				stats,
 				t,
 				onClose: close,
-				health
+				health,
+				balances
 			})] });
 		}
 		//#endregion
@@ -1665,7 +1863,14 @@ window.__ModuleLoader__.load({
 			"billing.openDashboard": "打开计费仪表盘",
 			"billing.close": "关闭",
 			"billing.lastUpdated": "数据更新于",
-			"billing.noData": "暂无计费数据"
+			"billing.noData": "暂无计费数据",
+			"billing.todayRate": "今日汇率",
+			"billing.rateLive": "实时",
+			"billing.rateBuiltin": "内置",
+			"billing.balance": "余额",
+			"billing.balanceUnconfigured": "未配置",
+			"billing.balanceUnauthorized": "密钥无效",
+			"billing.balanceUnreachable": "查询失败"
 		};
 		const en = {
 			"billing.title": "Usage",
@@ -1701,7 +1906,14 @@ window.__ModuleLoader__.load({
 			"billing.openDashboard": "Open billing dashboard",
 			"billing.close": "Close",
 			"billing.lastUpdated": "Updated",
-			"billing.noData": "No billing data yet"
+			"billing.noData": "No billing data yet",
+			"billing.todayRate": "Today rate",
+			"billing.rateLive": "Live",
+			"billing.rateBuiltin": "Built-in",
+			"billing.balance": "Balance",
+			"billing.balanceUnconfigured": "Not set",
+			"billing.balanceUnauthorized": "Bad key",
+			"billing.balanceUnreachable": "Unavailable"
 		};
 		//#endregion
 		//#region src/client/apply.ts