@kenz1117/dsh-ui-usage-billing 0.2.0 → 0.2.2

package/cordis.patch.yml

@@ -0,0 +1,8 @@
+# The ui-usage-billing bundle patch: inserts the billing dashboard plugin into
+# the profile root as one entry. Applied by `dsh plugin add @kenz1117/dsh-ui-usage-billing`;
+# the row id addresses this plugin's host half, whose `/api/billing/usage-stats`
+# route serves the browser half rendered in the sidebar footer.
+
+- insert:
+    - id: ui-usage-billing
+      name: '@kenz1117/dsh-ui-usage-billing'

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 = {
-			"chartTooltipDate": "VWh0dG_chartTooltipDate",
-			"chartCrosshair": "VWh0dG_chartCrosshair",
-			"panelTitle": "VWh0dG_panelTitle",
+			"costCol": "VWh0dG_costCol",
+			"rateBadge": "VWh0dG_rateBadge",
 			"pricingToggleText": "VWh0dG_pricingToggleText",
-			"heroValue": "VWh0dG_heroValue",
-			"trigger": "VWh0dG_trigger",
-			"pricingChevronOpen": "VWh0dG_pricingChevronOpen",
-			"kpiLabel": "VWh0dG_kpiLabel",
-			"heroDivider": "VWh0dG_heroDivider",
-			"dashboardSubtitle": "VWh0dG_dashboardSubtitle",
-			"modelCell": "VWh0dG_modelCell",
-			"bandTag": "VWh0dG_bandTag",
-			"healthDot": "VWh0dG_healthDot",
-			"deltaDown": "VWh0dG_deltaDown",
-			"triggerChevron": "VWh0dG_triggerChevron",
-			"dashboardRight": "VWh0dG_dashboardRight",
-			"chartLegend": "VWh0dG_chartLegend",
-			"heroSideValue": "VWh0dG_heroSideValue",
-			"chartWrap": "VWh0dG_chartWrap",
-			"heroMeta": "VWh0dG_heroMeta",
-			"heroSide": "VWh0dG_heroSide",
-			"triggerText": "VWh0dG_triggerText",
-			"tableScroll": "VWh0dG_tableScroll",
-			"flatTag": "VWh0dG_flatTag",
-			"chartLegendBar": "VWh0dG_chartLegendBar",
-			"dashboardHead": "VWh0dG_dashboardHead",
-			"chartAxisLabel": "VWh0dG_chartAxisLabel",
-			"pricingChevron": "VWh0dG_pricingChevron",
-			"modelProvider": "VWh0dG_modelProvider",
-			"chartLine": "VWh0dG_chartLine",
-			"chartDot": "VWh0dG_chartDot",
-			"bandPrice": "VWh0dG_bandPrice",
 			"bandTagOff": "VWh0dG_bandTagOff",
-			"hero": "VWh0dG_hero",
-			"modelTable": "VWh0dG_modelTable",
-			"planTag": "VWh0dG_planTag",
-			"chartGrid": "VWh0dG_chartGrid",
-			"triggerIcon": "VWh0dG_triggerIcon",
-			"healthOk": "VWh0dG_healthOk",
-			"chartTooltipSwatch": "VWh0dG_chartTooltipSwatch",
-			"healthIdle": "VWh0dG_healthIdle",
-			"pricingToggle": "VWh0dG_pricingToggle",
+			"healthDot": "VWh0dG_healthDot",
 			"kpiTile": "VWh0dG_kpiTile",
+			"deltaUp": "VWh0dG_deltaUp",
+			"delta": "VWh0dG_delta",
 			"panelHead": "VWh0dG_panelHead",
+			"panelTitle": "VWh0dG_panelTitle",
 			"chartBar": "VWh0dG_chartBar",
-			"na": "VWh0dG_na",
-			"chartTooltip": "VWh0dG_chartTooltip",
-			"bandPriceOff": "VWh0dG_bandPriceOff",
-			"triggerLabel": "VWh0dG_triggerLabel",
-			"numCol": "VWh0dG_numCol",
-			"panelHint": "VWh0dG_panelHint",
-			"healthBadgeOk": "VWh0dG_healthBadgeOk",
-			"healthBadgeBad": "VWh0dG_healthBadgeBad",
-			"chartStack": "VWh0dG_chartStack",
+			"hero": "VWh0dG_hero",
+			"emptyRow": "VWh0dG_emptyRow",
 			"dashboardModal": "VWh0dG_dashboardModal",
-			"kpiValue": "VWh0dG_kpiValue",
-			"chartSvg": "VWh0dG_chartSvg",
+			"chartLegendBar": "VWh0dG_chartLegendBar",
+			"tableScroll": "VWh0dG_tableScroll",
 			"heroMain": "VWh0dG_heroMain",
-			"chartLegendLine": "VWh0dG_chartLegendLine",
-			"dashboardTitle": "VWh0dG_dashboardTitle",
-			"closeButton": "VWh0dG_closeButton",
-			"costCol": "VWh0dG_costCol",
-			"healthBad": "VWh0dG_healthBad",
-			"triggerMeta": "VWh0dG_triggerMeta",
-			"modelName": "VWh0dG_modelName",
-			"delta": "VWh0dG_delta",
+			"heroSide": "VWh0dG_heroSide",
+			"pricingTable": "VWh0dG_pricingTable",
+			"kpiDetail": "VWh0dG_kpiDetail",
+			"healthBadgeOk": "VWh0dG_healthBadgeOk",
+			"triggerDivider": "VWh0dG_triggerDivider",
+			"heroLabel": "VWh0dG_heroLabel",
+			"pricingToggle": "VWh0dG_pricingToggle",
+			"dashboardRight": "VWh0dG_dashboardRight",
+			"railButton": "VWh0dG_railButton",
+			"kpiLabel": "VWh0dG_kpiLabel",
 			"healthBadge": "VWh0dG_healthBadge",
-			"chartEmpty": "VWh0dG_chartEmpty",
+			"triggerMonth": "VWh0dG_triggerMonth",
+			"triggerToday": "VWh0dG_triggerToday",
+			"rateBadgeBuiltin": "VWh0dG_rateBadgeBuiltin",
+			"dashboardSubtitle": "VWh0dG_dashboardSubtitle",
+			"flatTag": "VWh0dG_flatTag",
 			"dashboard": "VWh0dG_dashboard",
-			"heroLabel": "VWh0dG_heroLabel",
-			"deltaUp": "VWh0dG_deltaUp",
-			"heroSideItem": "VWh0dG_heroSideItem",
-			"kpiGrid": "VWh0dG_kpiGrid",
-			"dashboardBody": "VWh0dG_dashboardBody",
-			"kpiDetail": "VWh0dG_kpiDetail",
+			"chartWrap": "VWh0dG_chartWrap",
 			"panel": "VWh0dG_panel",
-			"railButton": "VWh0dG_railButton",
-			"emptyRow": "VWh0dG_emptyRow",
+			"chartLegendLine": "VWh0dG_chartLegendLine",
+			"deltaDown": "VWh0dG_deltaDown",
+			"kpiGrid": "VWh0dG_kpiGrid",
+			"chartSvg": "VWh0dG_chartSvg",
+			"closeButton": "VWh0dG_closeButton",
+			"chartLegend": "VWh0dG_chartLegend",
+			"modelName": "VWh0dG_modelName",
+			"pricingChevron": "VWh0dG_pricingChevron",
+			"na": "VWh0dG_na",
+			"healthBadgeBad": "VWh0dG_healthBadgeBad",
+			"chartStack": "VWh0dG_chartStack",
 			"chartTooltipRow": "VWh0dG_chartTooltipRow",
-			"pricingTable": "VWh0dG_pricingTable",
+			"modelTable": "VWh0dG_modelTable",
+			"chartCrosshair": "VWh0dG_chartCrosshair",
+			"bandTag": "VWh0dG_bandTag",
+			"heroValue": "VWh0dG_heroValue",
+			"heroMeta": "VWh0dG_heroMeta",
+			"healthOk": "VWh0dG_healthOk",
+			"kpiValue": "VWh0dG_kpiValue",
+			"planTag": "VWh0dG_planTag",
 			"heroSideLabel": "VWh0dG_heroSideLabel",
+			"chartDot": "VWh0dG_chartDot",
+			"healthBad": "VWh0dG_healthBad",
 			"kpiGreen": "VWh0dG_kpiGreen",
-			"modelDot": "VWh0dG_modelDot"
+			"heroSideItem": "VWh0dG_heroSideItem",
+			"pricingChevronOpen": "VWh0dG_pricingChevronOpen",
+			"dashboardBody": "VWh0dG_dashboardBody",
+			"panelHint": "VWh0dG_panelHint",
+			"chartTooltipDate": "VWh0dG_chartTooltipDate",
+			"heroSideValue": "VWh0dG_heroSideValue",
+			"triggerAmount": "VWh0dG_triggerAmount",
+			"trigger": "VWh0dG_trigger",
+			"chartAxisLabel": "VWh0dG_chartAxisLabel",
+			"modelProvider": "VWh0dG_modelProvider",
+			"chartGrid": "VWh0dG_chartGrid",
+			"healthIdle": "VWh0dG_healthIdle",
+			"chartLine": "VWh0dG_chartLine",
+			"numCol": "VWh0dG_numCol",
+			"rateBadgeLive": "VWh0dG_rateBadgeLive",
+			"triggerAmountSub": "VWh0dG_triggerAmountSub",
+			"bandPrice": "VWh0dG_bandPrice",
+			"dashboardTitle": "VWh0dG_dashboardTitle",
+			"triggerIcon": "VWh0dG_triggerIcon",
+			"dashboardHead": "VWh0dG_dashboardHead",
+			"bandPriceOff": "VWh0dG_bandPriceOff",
+			"chartTooltip": "VWh0dG_chartTooltip",
+			"chartEmpty": "VWh0dG_chartEmpty",
+			"modelCell": "VWh0dG_modelCell",
+			"modelDot": "VWh0dG_modelDot",
+			"chartTooltipSwatch": "VWh0dG_chartTooltipSwatch",
+			"triggerMeta": "VWh0dG_triggerMeta"
 		};
-		//#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,7 +659,7 @@ 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
@@ -659,10 +678,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 +707,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 +736,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 +749,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 +807,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 +834,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 +861,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 +896,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 +946,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 +1060,8 @@ 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";
 		/** Empty snapshot: shown before (or without) real host data — zeros, never fabricated samples. */
 		const EMPTY_STATS = {
 			total: {
@@ -1022,67 +1083,110 @@ 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 } : {}
+				};
 			} 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 {}
+		}
+		/**
 		* 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)
+						})]
 					})
 				]
 			});
@@ -1094,9 +1198,9 @@ window.__ModuleLoader__.load({
 		function BillingDashboard({ stats, t, onClose, health }) {
 			const { total, byModel, byDay } = stats;
 			const [pricingOpen, setPricingOpen] = (0, react.useState)(false);
+			const rateInfo = getRateInfo();
 			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 todayCost = byDay[today]?.cost ?? 0;
 			const monthPrefix = today.slice(0, 7);
@@ -1104,7 +1208,17 @@ window.__ModuleLoader__.load({
 			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(day.toISOString().slice(0, 10));
+				}
+				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 +1232,7 @@ window.__ModuleLoader__.load({
 					byModel
 				};
 			}), [
-				dates,
+				trendDates,
 				byDay,
 				stats.byDayModels
 			]);
@@ -1201,64 +1315,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,
@@ -1483,9 +1589,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),
@@ -1601,6 +1715,7 @@ window.__ModuleLoader__.load({
 				loadUsageStats().then((data) => {
 					if (mounted && data !== null) setStats(data);
 				});
+				loadLivePricing();
 				return () => {
 					mounted = false;
 				};
@@ -1665,7 +1780,10 @@ window.__ModuleLoader__.load({
 			"billing.openDashboard": "打开计费仪表盘",
 			"billing.close": "关闭",
 			"billing.lastUpdated": "数据更新于",
-			"billing.noData": "暂无计费数据"
+			"billing.noData": "暂无计费数据",
+			"billing.todayRate": "今日汇率",
+			"billing.rateLive": "实时",
+			"billing.rateBuiltin": "内置"
 		};
 		const en = {
 			"billing.title": "Usage",
@@ -1701,7 +1819,10 @@ 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"
 		};
 		//#endregion
 		//#region src/client/apply.ts

package/lib/index.js

@@ -1,27 +1,10 @@
 import { readFile } from "node:fs/promises";
 import { homedir } from "node:os";
 import { join } from "node:path";
-//#region lib/types/client/pricing.js
-/**
-* 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}).
-*/
-/**
-* 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.
-*/
-const USD_TO_CNY = 6.79;
+/** 当前汇率：实时覆盖优先，缺省回退内置固定值。 */
+function currentRate() {
+	return 6.79;
+}
 /** Default share of traffic assumed to fall in the peak band (0..1). */
 const DEFAULT_PEAK_SHARE = .5;
 /**
@@ -500,11 +483,11 @@ const MODEL_CATALOG = [
 ];
 /** 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");
+	return 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");
+	})();
 }
 /**
 * Price one band's token usage in CNY. The stats `input` field is the TOTAL
@@ -518,7 +501,7 @@ function priceBandCost(band, buckets, currency) {
 	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
@@ -673,6 +656,158 @@ async function aggregateUsage(persistence, options = {}) {
 	};
 }
 //#endregion
+//#region lib/types/pricing-fetch.js
+/**
+* One-shot live pricing refresh for the billing dashboard.
+*
+* Fetches the USD → CNY mid rate and the OpenRouter model price list, maps
+* matched models onto the built-in catalog keys, and returns the combined
+* LivePricing. Every fetch failure degrades to the built-in values: the node
+* half caches whatever succeeded and the browser dashboard falls back to the
+* catalog for the rest — a total outage answers `{ source: 'builtin' }`.
+*/
+/** Abort a fetch when the upstream hangs beyond this budget. */
+const FETCH_TIMEOUT_MS = 8e3;
+/**
+* USD → CNY 汇率源，按顺序尝试：国内可达的腾讯财经行情（免 key、`~` 分隔
+* 第 4 个字段为价格）优先，国外 open.er-api.com 兜底。任一源失败自动落到
+* 下一个；全部失败由调用方降级内置汇率。
+*/
+const RATE_SOURCES = [{
+	url: "https://qt.gtimg.cn/q=whUSDCNY",
+	parse: (text) => {
+		const price = /"([^"]*)"/.exec(text)?.[1]?.split("~")[3];
+		return price !== void 0 && price !== "" ? Number(price) : void 0;
+	}
+}, {
+	url: "https://open.er-api.com/v6/latest/USD",
+	parse: (text) => {
+		try {
+			const cny = JSON.parse(text).rates?.CNY;
+			return typeof cny === "number" && Number.isFinite(cny) && cny > 0 ? cny : void 0;
+		} catch {
+			return;
+		}
+	}
+}];
+/** OpenRouter's public model list: per-token USD prices, no key needed. */
+const ROUTER_URL = "https://openrouter.ai/api/v1/models";
+/**
+* Built-in catalog key → OpenRouter model-id candidates. Matching prefers an
+* exact id, then a single strong substring hit (the router id contains the
+* hint); an ambiguous hit is skipped so the built-in price stays
+* authoritative. Hints are provider+generation words the router ids carry —
+* correct or extend them as the market moves.
+*/
+const ROUTER_ID_HINTS = {
+	"flash": ["deepseek-v4-flash", "deepseek-v4"],
+	"pro": ["deepseek-v4-pro"],
+	"glm": ["glm-5"],
+	"qwen-3.8-max": ["qwen-3.8-max", "qwen3.8-max"],
+	"qwen-max": ["qwen-max"],
+	"qwen-plus": ["qwen-plus"],
+	"gemini-pro": ["gemini-3-pro", "gemini-pro"],
+	"gemini-flash": ["gemini-3-flash", "gemini-flash"],
+	"gpt-5.6-sol": ["gpt-5.6-sol"],
+	"gpt-5.6-terra": ["gpt-5.6-terra"],
+	"gpt-5.6-luna": ["gpt-5.6-luna"],
+	"grok": ["grok-4"],
+	"llama": ["llama-4"],
+	"kimi": ["kimi-k2"]
+};
+/** GET a URL's text body with a hard timeout; null on any failure. */
+async function fetchText(url) {
+	const controller = new AbortController();
+	const timer = setTimeout(() => controller.abort(), FETCH_TIMEOUT_MS);
+	try {
+		const response = await fetch(url, { signal: controller.signal });
+		if (!response.ok) return null;
+		return await response.text();
+	} catch {
+		return null;
+	} finally {
+		clearTimeout(timer);
+	}
+}
+/** GET a JSON endpoint with a hard timeout; null on any failure. */
+async function fetchJson(url) {
+	const text = await fetchText(url);
+	if (text === null) return null;
+	try {
+		return JSON.parse(text);
+	} catch {
+		return null;
+	}
+}
+/** Latest USD → CNY rate from the first working source, or undefined when none respond. */
+async function fetchRate() {
+	for (const source of RATE_SOURCES) {
+		const text = await fetchText(source.url);
+		if (text === null) continue;
+		const value = source.parse(text);
+		if (value !== void 0 && Number.isFinite(value) && value > 0) return value;
+	}
+}
+/** OpenRouter model rows with usable USD unit prices, or undefined on failure. */
+async function fetchRouterModels() {
+	const data = await fetchJson(ROUTER_URL);
+	if (data === null || typeof data !== "object") return void 0;
+	const list = data.data;
+	if (!Array.isArray(list)) return void 0;
+	const models = [];
+	for (const item of list) {
+		if (item === null || typeof item !== "object") continue;
+		const { id, pricing } = item;
+		if (typeof id !== "string" || pricing === null || typeof pricing !== "object") continue;
+		const { prompt, completion } = pricing;
+		if (typeof prompt !== "number" || typeof completion !== "number") continue;
+		if (!Number.isFinite(prompt) || !Number.isFinite(completion)) continue;
+		models.push({
+			id,
+			input: prompt * 1e6,
+			output: completion * 1e6
+		});
+	}
+	return models;
+}
+/** Match one catalog key's candidates: exact id first, then a single strong substring hit. */
+function matchRouterModel(hints, models) {
+	const exact = models.find((model) => hints.some((hint) => model.id === hint));
+	if (exact !== void 0) return exact;
+	const strong = models.filter((model) => hints.some((hint) => hint.length >= 8 && model.id.includes(hint)));
+	if (strong.length !== 1) return void 0;
+	return strong[0];
+}
+/** Map router matches onto catalog keys; undefined when nothing matched. */
+function buildPrices(models) {
+	const result = {};
+	for (const [key, hints] of Object.entries(ROUTER_ID_HINTS)) {
+		const hit = matchRouterModel(hints, models);
+		if (hit === void 0) continue;
+		result[key] = {
+			input: hit.input,
+			cacheHit: hit.input * .1,
+			output: hit.output
+		};
+	}
+	return Object.keys(result).length > 0 ? result : void 0;
+}
+/**
+* Fetch the live pricing once at boot. Both upstreams run in parallel; a
+* failure in either degrades independently to the built-in value.
+* @returns the live pricing snapshot (builtin when everything failed).
+*/
+async function fetchLivePricing() {
+	const [rate, models] = await Promise.all([fetchRate(), fetchRouterModels()]);
+	const prices = models === void 0 ? void 0 : buildPrices(models);
+	if (rate === void 0 && prices === void 0) return { source: "builtin" };
+	return {
+		source: "live",
+		...rate !== void 0 ? { rate } : {},
+		...prices !== void 0 ? { prices } : {}
+	};
+}
+//#endregion
 //#region lib/types/index.js
 /**
 * Usage billing surface plugin, node half.
@@ -700,6 +835,18 @@ function apply(ctx, config = {}) {
 		join(cwd, ".dsh-usage-stats.json"),
 		join(homedir(), ".dsh/.dsh-usage-stats.json")
 	].filter((path) => typeof path === "string" && path.length > 0);
+	let live = { source: "builtin" };
+	fetchLivePricing().then((result) => {
+		live = result;
+	});
+	ctx.effect(() => ctx.webServer.register({
+		kind: "exact",
+		path: "/api/billing/pricing",
+		handler: async (_req, res) => {
+			res.writeHead(200, { "content-type": "application/json; charset=utf-8" });
+			res.end(JSON.stringify(live));
+		}
+	}), "usage-billing: pricing route");
 	ctx.effect(() => ctx.webServer.register({
 		kind: "exact",
 		path: "/api/billing/usage-stats",

package/lib/types/client/locales.d.ts

@@ -1,5 +1,5 @@
 /** Locale dictionaries for the usage billing surface. */
-export type UsageBillingKey = 'billing.title' | 'billing.subtitle' | 'billing.cost' | 'billing.todayCost' | 'billing.monthCost' | 'billing.yearCost' | 'billing.totalCost' | 'billing.calls' | 'billing.cacheHitRate' | 'billing.tokens' | 'billing.inputTokens' | 'billing.outputTokens' | 'billing.avgCost' | 'billing.trend' | 'billing.trendEmpty' | 'billing.models' | 'billing.estimated' | 'billing.actual' | 'billing.pricing' | 'billing.showPricing' | 'billing.hidePricing' | 'billing.pricePerM' | 'billing.input' | 'billing.output' | 'billing.cacheHit' | 'billing.peak' | 'billing.offPeak' | 'billing.flat' | 'billing.peakHours' | 'billing.band' | 'billing.openDashboard' | 'billing.close' | 'billing.lastUpdated' | 'billing.noData';
+export type UsageBillingKey = 'billing.title' | 'billing.subtitle' | 'billing.cost' | 'billing.todayCost' | 'billing.monthCost' | 'billing.yearCost' | 'billing.totalCost' | 'billing.calls' | 'billing.cacheHitRate' | 'billing.tokens' | 'billing.inputTokens' | 'billing.outputTokens' | 'billing.avgCost' | 'billing.trend' | 'billing.trendEmpty' | 'billing.models' | 'billing.estimated' | 'billing.actual' | 'billing.pricing' | 'billing.showPricing' | 'billing.hidePricing' | 'billing.pricePerM' | 'billing.input' | 'billing.output' | 'billing.cacheHit' | 'billing.peak' | 'billing.offPeak' | 'billing.flat' | 'billing.peakHours' | 'billing.band' | 'billing.openDashboard' | 'billing.close' | 'billing.lastUpdated' | 'billing.noData' | 'billing.todayRate' | 'billing.rateLive' | 'billing.rateBuiltin';
 export declare const NS = "usageBilling";
 export declare const zh: Record<UsageBillingKey, string>;
 export declare const en: Record<UsageBillingKey, string>;

package/lib/types/client/pricing.d.ts

@@ -12,12 +12,29 @@
  * (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}).
  */
+import type { LivePricing } from '../pricing-shared.ts';
 /**
  * USD → CNY rate for display. Source: China Foreign Exchange Trade System
  * mid-rate 6.7878 on 2026-08-14; rounded to 6.79. Only applies to overseas
  * USD-priced models — domestic models never pass through this rate.
+ * The node half may refresh this at boot via `/api/billing/pricing`; until a
+ * live rate arrives the built-in value stays in force.
  */
 export declare const USD_TO_CNY = 6.79;
+/**
+ * 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.
+ */
+export declare function applyLivePricing(pricing: LivePricing): void;
+/**
+ * 当前生效的 USD → CNY 汇率及其来源：live = 启动时实时拉取成功，
+ * builtin = 实时拉取失败、正在用内置默认值。
+ */
+export declare function getRateInfo(): {
+    rate: number;
+    live: boolean;
+};
 /** Default share of traffic assumed to fall in the peak band (0..1). */
 export declare const DEFAULT_PEAK_SHARE = 0.5;
 /**

package/lib/types/pricing-fetch.d.ts

@@ -0,0 +1,17 @@
+/**
+ * One-shot live pricing refresh for the billing dashboard.
+ *
+ * Fetches the USD → CNY mid rate and the OpenRouter model price list, maps
+ * matched models onto the built-in catalog keys, and returns the combined
+ * LivePricing. Every fetch failure degrades to the built-in values: the node
+ * half caches whatever succeeded and the browser dashboard falls back to the
+ * catalog for the rest — a total outage answers `{ source: 'builtin' }`.
+ */
+import type { LivePricing } from './pricing-shared.ts';
+/**
+ * Fetch the live pricing once at boot. Both upstreams run in parallel; a
+ * failure in either degrades independently to the built-in value.
+ * @returns the live pricing snapshot (builtin when everything failed).
+ */
+export declare function fetchLivePricing(): Promise<LivePricing>;
+//# sourceMappingURL=pricing-fetch.d.ts.map

package/lib/types/pricing-shared.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Live-pricing wire types shared by the node half (which fetches and caches
+ * once at boot) and the browser half (which applies the overrides on top of
+ * the built-in catalog). An absent field means the built-in value still
+ * applies — the dashboard degrades to the catalog, never to fabricated data.
+ */
+/** One model's unit prices as reported by the router, in USD per 1M tokens. */
+export interface LivePrice {
+    /** Uncached input price per 1M tokens. */
+    input: number;
+    /** Cache-hit input price per 1M tokens (estimated as 10% of input; the router list carries no cache band). */
+    cacheHit: number;
+    /** Output price per 1M tokens. */
+    output: number;
+}
+/** Response of `/api/billing/pricing` consumed by the dashboard. */
+export interface LivePricing {
+    /** live = at least one fetch succeeded; builtin = full fallback to the catalog. */
+    source: 'live' | 'builtin';
+    /** USD → CNY mid rate (present when the rate fetch succeeded). */
+    rate?: number;
+    /** Overrides keyed by built-in catalog key (present when router matches succeeded). */
+    prices?: Record<string, LivePrice>;
+}
+//# sourceMappingURL=pricing-shared.d.ts.map

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kenz1117/dsh-ui-usage-billing",
   "description": "Usage billing dashboard for DeepSeek Harness: sidebar cost metrics plus a full dashboard modal, priced from a current multi-provider catalog with real usage aggregated from session logs.",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "publishConfig": {
     "access": "public"
   },
@@ -29,6 +29,9 @@
     "./package.json": "./package.json"
   },
   "dsh": {
+    "bundle": {
+      "patch": "./cordis.patch.yml"
+    },
     "client": {
       "inject": [
         "@deepseek-ai/dsh-client-runtime",
@@ -81,6 +84,7 @@
     "lib/index.js",
     "lib/invariant.js",
     "lib/client.js",
-    "lib/types/**/*.d.ts"
+    "lib/types/**/*.d.ts",
+    "cordis.patch.yml"
   ]
 }