@cassius0924/dsh-usage-dashboard 0.3.0

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

@@ -0,0 +1,10 @@
+export interface Store<T> {
+    get(): T;
+    set(value: T): void;
+    subscribe(fn: () => void): () => void;
+}
+/** Whether the floating balance widget is shown. */
+export declare const widgetVisibleStore: Store<boolean>;
+/** Balance (in the account's own currency) below which both surfaces warn.
+ *  0 turns the warning off. */
+export declare const lowBalanceStore: Store<number>;

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

@@ -0,0 +1,2 @@
+/** All plugin styles in one sheet, injected once at client load. */
+export declare const css = "\n.dsh-quota-root{position:absolute;right:16px;bottom:16px;z-index:2147483000;pointer-events:auto;font-family:system-ui,-apple-system,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial,sans-serif;font-size:13px;line-height:1.45;color:var(--dsw-alias-label-primary,#1f2328);transition:left .28s cubic-bezier(.22,1,.36,1),top .28s cubic-bezier(.22,1,.36,1)}\n.dsh-quota-root.dsh-quota-dragging{transition:none}\n.dsh-quota-card,.dsh-quota-card *{box-sizing:border-box}\n.dsh-quota-card{background:var(--dsw-alias-bg-overlay,#ffffff);border:1px solid var(--dsw-alias-border-l1,rgba(0,0,0,.12));border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.18);padding:12px 14px;min-width:208px;max-width:270px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}\n.dsh-quota-root.dsh-quota-dragging .dsh-quota-card{cursor:grabbing;box-shadow:0 12px 32px rgba(0,0,0,.28)}\n.dsh-quota-header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;min-width:0}\n.dsh-quota-title{font-weight:600;font-size:13px;color:var(--dsw-alias-label-primary,#1f2328);display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden}\n.dsh-quota-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n.dsh-quota-grip{color:var(--dsw-alias-label-secondary,#59636e);opacity:.7;font-size:11px;letter-spacing:0;cursor:grab;flex:none}\n.dsh-quota-dot{width:8px;height:8px;border-radius:50%;background:var(--dsw-alias-state-success-primary,#2da44e);flex:none}\n.dsh-quota-dot--error{background:var(--dsw-alias-state-error-primary,#cf222e)}\n.dsh-quota-dot--warn{background:var(--dsw-alias-state-warning-primary,#bf8700)}\n.dsh-quota-total--low{color:var(--dsw-alias-state-warning-primary,#9a6700)!important}\n.dsh-quota-dot--idle{background:var(--dsw-alias-label-secondary,#59636e);opacity:.6}\n.dsh-quota-collapsed-total{font-weight:700;font-size:13px;color:var(--dsw-alias-brand-primary,#0969da);flex:none;font-variant-numeric:tabular-nums}\n.dsh-quota-actions{display:flex;gap:2px;flex:none}\n.dsh-quota-btn{border:none;background:transparent;cursor:pointer;color:var(--dsw-alias-label-secondary,#59636e);padding:3px 7px;border-radius:6px;font-size:13px;line-height:1}\n.dsh-quota-btn:hover:not(:disabled){background:var(--dsw-alias-bg-layer-2,rgba(0,0,0,.06));color:var(--dsw-alias-label-primary,#1f2328)}\n.dsh-quota-btn:active:not(:disabled){transform:scale(.92)}\n.dsh-quota-btn:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary,#0969da);outline-offset:1px}\n.dsh-quota-btn:disabled{opacity:.5;cursor:default}\n.dsh-quota-body{color:var(--dsw-alias-label-secondary,#59636e)}\n.dsh-quota-remaining-label{font-size:11px;color:var(--dsw-alias-label-tertiary,#59636e);margin-bottom:2px}\n.dsh-quota-total{font-size:24px;font-weight:700;color:var(--dsw-alias-label-primary,#1f2328);letter-spacing:-.02em;font-variant-numeric:tabular-nums}\n.dsh-quota-currency{font-size:14px;font-weight:600;margin-left:3px;color:var(--dsw-alias-label-secondary,#59636e)}\n.dsh-quota-row{display:flex;justify-content:space-between;gap:12px;margin-top:6px;font-size:12px}\n.dsh-quota-label{color:var(--dsw-alias-label-secondary,#59636e)}\n.dsh-quota-value{color:var(--dsw-alias-label-primary,#1f2328);font-variant-numeric:tabular-nums}\n.dsh-quota-error{color:var(--dsw-alias-state-error-primary,#cf222e)}\n.dq-balance{display:flex;flex-direction:column;gap:16px;padding:20px 24px 48px;max-width:860px;margin:0 auto;font-family:system-ui,-apple-system,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial,sans-serif;font-size:13px;line-height:1.5;color:var(--dsw-alias-label-primary,#1f2328)}\n.dq-card{background:var(--dsw-alias-bg-layer-1,#ffffff);border:1px solid var(--dsw-alias-border-l1,rgba(0,0,0,.08));border-radius:12px;padding:16px}\n.dq-card-title{font-size:12px;font-weight:600;color:var(--dsw-alias-label-secondary,#59636e);margin:0 0 12px;letter-spacing:.02em}\n.dq-balance-grid{display:flex;flex-wrap:wrap;gap:12px 24px}\n.dq-stat{min-width:110px}\n.dq-stat-label{font-size:11px;color:var(--dsw-alias-label-tertiary,#59636e);margin-bottom:2px}\n.dq-stat-value{font-size:18px;font-weight:650;color:var(--dsw-alias-label-primary,#1f2328);font-variant-numeric:tabular-nums}\n.dq-stat-value--ok{color:var(--dsw-alias-state-success-primary,#2da44e)}\n.dq-stat-value--bad{color:var(--dsw-alias-state-error-primary,#cf222e)}\n.dq-runway{cursor:help;text-decoration:underline dotted var(--dsw-alias-border-l2,rgba(0,0,0,.25));text-underline-offset:4px}\n.dq-remaining{position:relative;cursor:help}\n.dq-remaining-breakdown{display:none;position:absolute;top:calc(100% + 6px);left:0;z-index:20;flex-direction:column;gap:4px;padding:8px 10px;background:var(--dsw-alias-bg-overlay,#ffffff);border:1px solid var(--dsw-alias-border-l1,rgba(0,0,0,.12));border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.15);white-space:nowrap;font-size:12px;font-weight:500;color:var(--dsw-alias-label-primary,#1f2328)}\n.dq-remaining:hover .dq-remaining-breakdown{display:flex}\n.dq-remaining-granted{color:var(--dsw-alias-label-tertiary,#59636e);font-weight:400;font-size:11px}\n.dq-period-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}\n@media (max-width:620px){.dq-period-grid{grid-template-columns:1fr}}\n.dq-period{background:var(--dsw-alias-bg-layer-2,rgba(120,130,150,.06));border-radius:10px;padding:12px 14px;min-width:0}\n.dq-period-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}\n.dq-period-label{font-size:11px;color:var(--dsw-alias-label-tertiary,#59636e)}\n.dq-period-cost{font-size:22px;font-weight:680;letter-spacing:-.01em;color:var(--dsw-alias-label-primary,#1f2328);font-variant-numeric:tabular-nums;line-height:1.25}\n.dq-period-sub{font-size:11.5px;color:var(--dsw-alias-label-secondary,#59636e);margin-top:2px;font-variant-numeric:tabular-nums;line-height:1.45}\n.dq-delta{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:600;padding:1px 6px;border-radius:999px;white-space:nowrap;cursor:help;font-variant-numeric:tabular-nums}\n.dq-delta--up{color:var(--dsw-alias-state-warning-primary,#9a6700);background:rgba(191,135,0,.14)}\n.dq-delta--down{color:var(--dsw-alias-state-success-primary,#1a7f37);background:rgba(45,164,78,.14)}\n.dq-delta--flat,.dq-delta--new{color:var(--dsw-alias-label-tertiary,#59636e);background:rgba(120,130,150,.14);font-weight:500}\n.dq-delta-label{font-weight:400;opacity:.8}\n.dq-pricing{margin-top:12px;border-top:1px solid var(--dsw-alias-border-l1,rgba(0,0,0,.08));padding-top:10px}\n.dq-pricing-summary{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--dsw-alias-label-secondary,#59636e);cursor:pointer;list-style:none;width:fit-content;border-radius:6px;padding:2px 4px;margin-left:-4px}\n.dq-pricing-summary::-webkit-details-marker{display:none}\n.dq-pricing-summary::before{content:\"\u25B8\";display:inline-block;font-size:10px;opacity:.7;transition:transform .15s ease}\n.dq-pricing[open] .dq-pricing-summary::before{transform:rotate(90deg)}\n.dq-pricing-summary:hover{color:var(--dsw-alias-label-primary,#1f2328)}\n.dq-pricing-summary:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary,#0969da);outline-offset:2px}\n.dq-pricing-now{font-size:11px;font-weight:600;padding:1px 7px;border-radius:999px;color:var(--dsw-alias-label-tertiary,#59636e);background:rgba(120,130,150,.14)}\n.dq-pricing-now--peak{color:var(--dsw-alias-state-warning-primary,#9a6700);background:rgba(191,135,0,.14)}\n.dq-pricing-body{margin-top:10px;overflow-x:auto}\n.dq-pricing-table{border-collapse:collapse;font-size:11.5px;font-variant-numeric:tabular-nums;min-width:100%}\n.dq-pricing-table th{text-align:left;font-weight:500;color:var(--dsw-alias-label-tertiary,#59636e);padding:4px 12px 4px 0;white-space:nowrap;border-bottom:1px solid var(--dsw-alias-border-l1,rgba(0,0,0,.08))}\n.dq-pricing-table td{padding:4px 12px 4px 0;color:var(--dsw-alias-label-primary,#1f2328);white-space:nowrap;vertical-align:top}\n.dq-pricing-table tbody tr+tr td{border-top:1px solid var(--dsw-alias-border-l1,rgba(0,0,0,.05))}\n.dq-pricing-foot{margin:8px 0 0;font-size:11.5px;line-height:1.6;color:var(--dsw-alias-label-secondary,#59636e)}\n.dq-peak-track{height:8px;border-radius:999px;background:var(--dsw-alias-state-success-primary,#2da44e);opacity:.85;overflow:hidden}\n.dq-peak-fill{height:100%;border-radius:999px;background:var(--dsw-alias-state-warning-primary,#bf8700);transition:width .35s cubic-bezier(.22,1,.36,1)}\n.dq-peak-legend{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:8px;font-size:11.5px;color:var(--dsw-alias-label-secondary,#59636e);font-variant-numeric:tabular-nums}\n.dq-peak-legend span{display:inline-flex;align-items:center;gap:6px}\n.dq-legend-swatch--peak{background:var(--dsw-alias-state-warning-primary,#bf8700)}\n.dq-legend-swatch--offpeak{background:var(--dsw-alias-state-success-primary,#2da44e);opacity:.85}\n.dq-peak-figures{display:flex;flex-wrap:wrap;gap:12px 32px;margin-top:14px}\n.dq-peak-delta{font-size:11px;font-weight:500;margin-left:8px;color:var(--dsw-alias-state-warning-primary,#9a6700)}\n.dq-peak-delta--save{color:var(--dsw-alias-state-success-primary,#1a7f37)}\n.dq-peak-foot{margin:10px 0 0;font-size:11.5px;line-height:1.6;color:var(--dsw-alias-label-secondary,#59636e)}\n.dq-cache-figures{display:flex;flex-wrap:wrap;gap:12px 32px;margin-bottom:12px}\n.dq-muted-value{color:var(--dsw-alias-label-secondary,#59636e)!important;font-weight:550}\n.dq-stat-value--warn{color:var(--dsw-alias-state-warning-primary,#9a6700)}\n.dq-cache-track{height:8px;border-radius:999px;background:var(--dsw-alias-state-warning-primary,#bf8700);overflow:hidden}\n.dq-cache-fill{height:100%;border-radius:999px;background:var(--dsw-alias-state-success-primary,#2da44e);transition:width .35s cubic-bezier(.22,1,.36,1)}\n.dq-cache-legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:8px;font-size:11.5px;color:var(--dsw-alias-label-secondary,#59636e);font-variant-numeric:tabular-nums}\n.dq-cache-legend span{display:inline-flex;align-items:center;gap:6px}\n.dq-legend-swatch--hit{background:var(--dsw-alias-state-success-primary,#2da44e)}\n.dq-legend-swatch--miss{background:var(--dsw-alias-state-warning-primary,#bf8700)}\n.dq-cache-foot{margin:10px 0 0;font-size:11.5px;line-height:1.6;color:var(--dsw-alias-label-secondary,#59636e)}\n.dq-sessions{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}\n.dq-session{display:flex;flex-direction:column;gap:5px;min-width:0}\n.dq-session-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}\n.dq-session-title{font-size:13px;font-weight:550;color:var(--dsw-alias-label-primary,#1f2328);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n.dq-session-cost{font-size:14px;font-weight:650;color:var(--dsw-alias-label-primary,#1f2328);font-variant-numeric:tabular-nums;flex:none}\n.dq-session-track{height:6px;border-radius:999px;background:var(--dsw-alias-bg-layer-2,rgba(120,130,150,.12));overflow:hidden}\n.dq-session-fill{height:100%;border-radius:999px;background:var(--dsw-alias-state-business-primary,#4176e6);transition:width .35s cubic-bezier(.22,1,.36,1)}\n.dq-session-sub{font-size:11.5px;color:var(--dsw-alias-label-secondary,#59636e);font-variant-numeric:tabular-nums;line-height:1.5}\n.dq-session-foot{margin:12px 0 0;font-size:11.5px;color:var(--dsw-alias-label-tertiary,#59636e)}\n.dq-rank{display:flex;flex-direction:column;gap:14px}\n.dq-rank-row{display:flex;flex-direction:column;gap:5px;min-width:0}\n.dq-rank-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}\n.dq-rank-name{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:550;color:var(--dsw-alias-label-primary,#1f2328);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n.dq-rank-cost{display:inline-flex;align-items:baseline;gap:8px;font-size:14px;font-weight:650;color:var(--dsw-alias-label-primary,#1f2328);font-variant-numeric:tabular-nums;flex:none}\n.dq-rank-share{font-size:11px;font-weight:500;color:var(--dsw-alias-label-tertiary,#59636e);min-width:30px;text-align:right}\n.dq-rank-track{height:6px;border-radius:999px;background:var(--dsw-alias-bg-layer-2,rgba(120,130,150,.12));overflow:hidden}\n.dq-rank-fill{height:100%;border-radius:999px;transition:width .35s cubic-bezier(.22,1,.36,1)}\n.dq-rank-sub{font-size:11.5px;color:var(--dsw-alias-label-secondary,#59636e);font-variant-numeric:tabular-nums;line-height:1.5}\n.dq-alert{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:10px;font-size:12.5px;line-height:1.6;color:var(--dsw-alias-state-warning-primary,#7a5200);background:rgba(191,135,0,.12);border:1px solid rgba(191,135,0,.35)}\n.dq-alert-icon{flex:none;width:18px;height:18px;border-radius:50%;background:var(--dsw-alias-state-warning-primary,#bf8700);color:#fff;font-weight:700;font-size:12px;line-height:18px;text-align:center}\n.dq-alert strong{font-weight:650}\n.dq-alert-link{margin-left:8px;color:inherit;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}\n.dq-setting{display:flex;align-items:flex-start;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid var(--dsw-alias-border-l1,rgba(0,0,0,.08))}\n.dq-setting-label{font-size:13px;color:var(--dsw-alias-label-primary,#1f2328);padding-top:6px;flex:none}\n.dq-setting-control{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}\n.dq-setting-hint{font-size:11.5px;color:var(--dsw-alias-label-secondary,#59636e);line-height:1.5}\n.dq-number{width:82px;padding:5px 8px;font-size:13px;border-radius:8px;border:1px solid var(--dsw-alias-border-l2,rgba(0,0,0,.16));background:var(--dsw-alias-bg-layer-1,#fff);color:var(--dsw-alias-label-primary,#1f2328);font-variant-numeric:tabular-nums}\n.dq-number:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary,#0969da);outline-offset:1px;border-color:transparent}\n.dq-links{display:flex;flex-wrap:wrap;gap:8px}\n.dq-link{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:1px solid var(--dsw-alias-border-l2,rgba(0,0,0,.12));border-radius:8px;background:var(--dsw-alias-bg-layer-1,#fff);color:var(--dsw-alias-state-business-primary,#0969da);text-decoration:none;font-size:13px;font-weight:500;cursor:pointer}\n.dq-link:hover{border-color:var(--dsw-alias-state-business-primary,#0969da);background:var(--dsw-alias-interactive-bg-hover,rgba(0,0,0,.04))}\n.dq-toggle{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:13px}\n.dq-toggle input{width:16px;height:16px;accent-color:var(--dsw-alias-state-business-primary,#0969da);cursor:pointer}\n.dq-toggle input:focus-visible,.dq-model-item input:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary,#0969da);outline-offset:2px}\n.dq-link:focus-visible,.dq-model-btn:focus-visible,.dq-chart-switch-btn:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary,#0969da);outline-offset:2px}\n.dq-usage-totals{display:flex;flex-wrap:wrap;gap:12px 24px;margin-bottom:16px}\n.dq-chart-peak{margin-left:10px;font-size:11px;font-weight:400;color:var(--dsw-alias-label-tertiary,#59636e);font-variant-numeric:tabular-nums}\n.dq-chart-title{font-size:12px;font-weight:600;color:var(--dsw-alias-label-secondary,#59636e);margin:18px 0 8px}\n.dq-chart-title:first-of-type{margin-top:0}\n.dq-chart-block-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:18px 0 8px}\n.dq-chart-block-head .dq-chart-title{margin:0}\n.dq-chart-controls{display:flex;align-items:center;gap:8px;flex:none}\n.dq-model-picker{position:relative}\n.dq-model-btn{border:1px solid var(--dsw-alias-border-l2,rgba(0,0,0,.12));background:var(--dsw-alias-bg-layer-1,#fff);color:var(--dsw-alias-label-secondary,#59636e);border-radius:8px;padding:4px 10px;font-size:12px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}\n.dq-model-btn:hover{border-color:var(--dsw-alias-state-business-primary,#0969da);color:var(--dsw-alias-state-business-primary,#0969da)}\n.dq-model-btn::after{content:\"\u25BE\";font-size:10px;opacity:.7}\n.dq-model-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:190px;max-height:280px;overflow-y:auto;background:var(--dsw-alias-bg-overlay,#fff);border:1px solid var(--dsw-alias-border-l1,rgba(0,0,0,.12));border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.16);padding:6px;display:flex;flex-direction:column;gap:2px}\n.dq-model-item{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;font-size:12px;cursor:pointer;color:var(--dsw-alias-label-primary,#1f2328)}\n.dq-model-item:hover{background:var(--dsw-alias-bg-layer-2,rgba(0,0,0,.06))}\n.dq-model-item input{width:14px;height:14px;accent-color:var(--dsw-alias-state-business-primary,#0969da);cursor:pointer;flex:none}\n.dq-model-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n.dq-model-item--all{border-bottom:1px solid var(--dsw-alias-border-l1,rgba(0,0,0,.08));padding-bottom:8px;margin-bottom:2px;border-radius:6px}\n.dq-model-tag{color:var(--dsw-alias-label-tertiary,#59636e);font-size:11px;flex:none}\n.dq-bar-group{display:flex;align-items:flex-end;gap:2px;height:100%;width:100%}\n.dq-bar-group .dq-bar{flex:1 1 0;min-width:0}\n.dq-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px;font-size:12px;color:var(--dsw-alias-label-secondary,#59636e)}\n.dq-legend-item{display:inline-flex;align-items:center;gap:6px}\n.dq-legend-swatch{width:10px;height:10px;border-radius:3px;flex:none}\n.dq-chart-switch{display:inline-flex;align-items:center;gap:2px;padding:2px;background:var(--dsw-alias-bg-layer-2,rgba(0,0,0,.06));border-radius:999px;flex:none}\n.dq-chart-switch-btn{border:none;background:transparent;color:var(--dsw-alias-label-secondary,#59636e);font-size:12px;line-height:1;padding:5px 12px;border-radius:999px;cursor:pointer;transition:background .15s ease,color .15s ease}\n.dq-chart-switch-btn:hover{color:var(--dsw-alias-label-primary,#1f2328)}\n.dq-chart-switch-btn--on{background:var(--dsw-alias-bg-overlay,#fff);color:var(--dsw-alias-label-primary,#1f2328);box-shadow:0 1px 3px rgba(0,0,0,.14)}\n.dq-chart-wrap{position:relative}\n.dq-tip{position:absolute;transform:translate(-50%,14px);z-index:40;pointer-events:none;background:var(--dsw-alias-bg-inverse,#1f2328);color:var(--dsw-alias-label-inverse,#fff);border-radius:8px;padding:7px 10px;font-size:11.5px;line-height:1.55;white-space:nowrap;box-shadow:0 6px 20px rgba(0,0,0,.28);font-variant-numeric:tabular-nums}\n.dq-tip-head{font-weight:650;margin-bottom:2px}\n.dq-tip-row{opacity:.85}\n.dq-bars{display:flex;align-items:flex-end;gap:2px;width:100%}\n.dq-bar-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch}\n.dq-bar{background:var(--dsw-alias-state-business-primary,#4176e6);border-radius:2px 2px 0 0;min-height:1px;transition:filter .12s ease}\n.dq-bar-col{cursor:default}\n.dq-bar-col:hover .dq-bar{filter:brightness(1.18) saturate(1.1)}\n.dq-heat-cell:not(.dq-heat-cell--pad):hover{outline:1.5px solid var(--dsw-alias-label-primary,#1f2328);outline-offset:1px}\n.dq-bar-label{font-size:9px;color:var(--dsw-alias-label-tertiary,#59636e);text-align:center;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n.dq-heat{display:flex;flex-direction:column;gap:8px;max-width:100%}\n.dq-heat-grid{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px}\n.dq-heat-dows{display:flex;flex-direction:column;gap:3px;padding-top:17px;flex:none}\n.dq-heat-dow{height:12px;line-height:12px;font-size:9px;color:var(--dsw-alias-label-tertiary,#59636e);text-align:right;width:12px}\n.dq-heat-cols{display:flex;flex-direction:column;gap:2px;min-width:0}\n.dq-heat-months{display:flex;gap:3px;height:12px}\n.dq-heat-month{width:12px;flex:none;font-size:9px;line-height:12px;color:var(--dsw-alias-label-tertiary,#59636e);white-space:nowrap;overflow:visible}\n.dq-heatmap{display:flex;gap:3px;width:max-content}\n.dq-heat-week{display:flex;flex-direction:column;gap:3px}\n.dq-heat-cell{width:12px;height:12px;border-radius:2px;flex:none}\n.dq-heat-cell--pad{background:transparent}\n.dq-heat-key{width:12px;height:12px;border-radius:2px;flex:none}\n.dq-heat-scale{display:flex;align-items:center;gap:3px;font-size:10px;color:var(--dsw-alias-label-tertiary,#59636e);align-self:flex-end}\n.dq-heat-scale>span:first-child{margin-right:2px}\n.dq-heat-scale>span:last-child{margin-left:2px}\n.dq-muted{color:var(--dsw-alias-label-secondary,#59636e)}\n.dq-error{color:var(--dsw-alias-state-error-primary,#cf222e)}\n.dq-warn{color:var(--dsw-alias-state-warning-primary,#9a6700)}\n.dq-empty{color:var(--dsw-alias-label-secondary,#59636e);font-size:12.5px;line-height:1.6;padding:6px 0}\n.dq-skel{background:linear-gradient(90deg,rgba(125,135,155,.10) 25%,rgba(125,135,155,.20) 37%,rgba(125,135,155,.10) 63%);background-size:400% 100%;border-radius:5px;animation:dq-shimmer 1.5s ease-in-out infinite}\n.dq-stat .dq-skel+.dq-skel{margin-top:6px}\n.dq-skel-bars{display:flex;align-items:flex-end;gap:2px;width:100%;height:120px;margin-top:10px}\n.dq-skel-bar{flex:1 1 0;min-width:0;border-radius:2px 2px 0 0}\n@keyframes dq-shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}\n@media (prefers-reduced-motion:reduce){.dq-skel{animation:none}.dq-refresh-icon--spin{animation:none}}\n.dq-status-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:20px}\n.dq-status-row .dq-muted,.dq-status-row .dq-error{font-size:12px}\n.dq-refresh-btn{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--dsw-alias-border-l2,rgba(0,0,0,.12));background:var(--dsw-alias-bg-layer-1,#fff);color:var(--dsw-alias-label-secondary,#59636e);border-radius:8px;padding:5px 10px;font-size:12px;cursor:pointer;transition:border-color .15s ease,color .15s ease}\n.dq-refresh-btn:hover:not(:disabled){border-color:var(--dsw-alias-state-business-primary,#0969da);color:var(--dsw-alias-state-business-primary,#0969da)}\n.dq-refresh-btn:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary,#0969da);outline-offset:2px}\n.dq-refresh-btn:disabled{cursor:default;opacity:.6}\n.dq-refresh-icon{display:inline-block;line-height:1}\n.dq-refresh-icon--spin{animation:dq-spin .9s linear infinite}\n@keyframes dq-spin{to{transform:rotate(360deg)}}\n";

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

@@ -0,0 +1,9 @@
+/** The draggable bottom-right floating balance widget.
+ *
+ * Where it sits (corner) and whether it is collapsed are user choices, so both
+ * are persisted (see ./prefs.ts) and restored before the first paint; the
+ * widget also re-snaps to its corner when the frame resizes (window resize,
+ * sidebar collapse) instead of stranding itself at stale pixel coordinates.
+ */
+import { type ReactElement } from 'react';
+export declare function QuotaWidget(): ReactElement | null;

package/lib/types/context.d.ts

@@ -0,0 +1,63 @@
+/**
+ * Structural service faces this plugin reads from the host Cordis context.
+ * They are deliberately minimal: the plugin only touches the methods it
+ * needs, so no extra `@deepseek-ai/dsh-*` type packages are required to
+ * build it.
+ */
+import type { Context } from '@deepseek-ai/cordis';
+import type { IncomingMessage, ServerResponse } from 'node:http';
+/** One HTTP route served by the host web server. */
+export interface WebRoute {
+    kind: 'exact' | 'prefix';
+    path: string;
+    handler: (req: IncomingMessage, res: ServerResponse) => void | Promise<void>;
+}
+/** Structural face of the host `webServer` service. */
+export interface WebServerFace {
+    register(route: WebRoute): () => void;
+}
+/** Structural face of the `credentials` service. */
+export interface CredentialsFace {
+    resolve(ref: string): Promise<{
+        value: string;
+        source: string;
+    } | undefined>;
+}
+/** Structural face of the `sessionPersistence` service. */
+export interface SessionHeaderFace {
+    id?: string;
+    sessionId?: string;
+}
+export interface TokenUsageFace {
+    inputTokens?: number;
+    outputTokens?: number;
+    cacheReadTokens?: number;
+    reasoningTokens?: number;
+}
+export interface SessionEventFace {
+    type?: string;
+    time?: number;
+    data?: {
+        usage?: TokenUsageFace;
+        header?: {
+            config?: {
+                provider?: string;
+                model?: string;
+            };
+        };
+        /** Payload of a `session/title` event. */
+        title?: string;
+    };
+}
+export interface SessionPersistenceFace {
+    list(): Promise<SessionHeaderFace[]>;
+    readFrom(id: string, fromSeq: number): Promise<{
+        events?: SessionEventFace[];
+    }>;
+}
+/** The host context this plugin's apply() receives. */
+export interface HostContext extends Context {
+    webServer: WebServerFace;
+    credentials: CredentialsFace;
+    sessionPersistence: SessionPersistenceFace;
+}

package/lib/types/contract.d.ts

@@ -0,0 +1,157 @@
+/** Wire contracts shared by the host API and the client fetchers. */
+export interface BalanceInfo {
+    currency: string;
+    total: string;
+    granted: string;
+    toppedUp: string;
+}
+export interface BalanceData {
+    isAvailable: boolean;
+    balances: BalanceInfo[];
+}
+export interface BalanceResponse {
+    ok: boolean;
+    error?: string;
+    data?: BalanceData;
+}
+export interface DailyUsage {
+    date: string;
+    input: number;
+    output: number;
+    cache: number;
+    total: number;
+    cost: number;
+    calls: number;
+}
+export interface HourlyUsage {
+    hour: number;
+    total: number;
+    cost: number;
+    calls: number;
+}
+export interface HeatmapUsage {
+    date: string;
+    total: number;
+    cost: number;
+    calls: number;
+}
+export interface UsageTotals {
+    input: number;
+    output: number;
+    cache: number;
+    reasoning: number;
+    total: number;
+    cost: number;
+    calls: number;
+    /**
+     * What the cache-hit tokens would have cost at cache-miss rates, minus what
+     * they actually cost — i.e. the money prefix caching saved. Folded per
+     * record so it respects each record's model and time-of-day rates.
+     */
+    cacheSavings: number;
+}
+/** One per-day / per-hour point of a single model's series. */
+export interface ModelSeriesPoint {
+    total: number;
+    cost: number;
+    calls: number;
+}
+/** Per-model usage aggregation: overall totals plus 30-day and 24-hour series. */
+export interface ModelUsage {
+    provider: string;
+    model: string;
+    input: number;
+    output: number;
+    cache: number;
+    total: number;
+    cost: number;
+    calls: number;
+    daily: ModelSeriesPoint[];
+    hourly: ModelSeriesPoint[];
+}
+/** Usage rolled up over one time window. */
+export interface PeriodUsage {
+    total: number;
+    cost: number;
+    calls: number;
+}
+/**
+ * Time-anchored rollups. "Accumulated since forever" answers no question a
+ * user actually has; these do: what did today cost, what has this month cost,
+ * and is that more or less than the comparable window before it.
+ */
+export interface UsageSummary {
+    today: PeriodUsage;
+    yesterday: PeriodUsage;
+    /** Current calendar month, to date. */
+    month: PeriodUsage;
+    /** Previous calendar month up to the same day-of-month, so a mid-month
+     *  comparison is against a same-length window rather than a full month. */
+    lastMonthToDate: PeriodUsage;
+}
+/** CNY per 1M tokens for one model tier. */
+export interface PricingRates {
+    cacheHit: number;
+    input: number;
+    output: number;
+}
+export interface PricingTier {
+    model: string;
+    peak: PricingRates;
+    /** Null while flat pricing is in effect (before the peak/off-peak switch). */
+    offPeak: PricingRates | null;
+}
+/** What the cost column was computed with, so the estimate can be audited. */
+export interface PricingInfo {
+    currency: string;
+    /** Date peak/off-peak pricing takes effect. */
+    switchDate: string;
+    splitActive: boolean;
+    inPeakNow: boolean;
+    peakWindows: string[];
+    tiers: PricingTier[];
+}
+/**
+ * How usage divides between DeepSeek's peak and off-peak windows, plus the
+ * same usage re-priced two ways — so the 2026-08-17 change can be answered
+ * before it lands ("what will this cost me") and after ("what would shifting
+ * off-peak save me").
+ */
+export interface PeakSplit {
+    peak: PeriodUsage;
+    offPeak: PeriodUsage;
+    /** Every record priced under the peak/off-peak table, as actually classified. */
+    peakEraCost: number;
+    /** Every record priced under that table as if it had landed off-peak. */
+    offPeakEraCost: number;
+}
+/** One session's share of the bill. */
+export interface SessionCost {
+    id: string;
+    /** The session's title from its log; falls back to a short id. */
+    title: string;
+    total: number;
+    cost: number;
+    calls: number;
+    /** Epoch ms of the last usage record in this session. */
+    lastActive: number;
+}
+export interface UsageData {
+    daily: DailyUsage[];
+    hourly: HourlyUsage[];
+    heatmap: HeatmapUsage[];
+    totals: UsageTotals;
+    models: ModelUsage[];
+    summary: UsageSummary;
+    pricing: PricingInfo;
+    peakSplit: PeakSplit;
+    /** Most expensive sessions first, capped — see SESSION_TOP_N. */
+    sessions: SessionCost[];
+    /** How many sessions contributed usage in total. */
+    sessionCount: number;
+}
+export interface UsageResponse {
+    ok: boolean;
+    error?: string;
+    data?: UsageData;
+}

package/lib/types/index.d.ts

@@ -0,0 +1,21 @@
+/**
+ * dsh-usage-dashboard host plugin.
+ *
+ * Registers the package's own fenced JSON API under
+ * `/api/dsh-usage-dashboard` (balance + usage), consumed by the client half
+ * through same-origin fetch. Both endpoints are memoized with a TTL so that
+ * tab switches and the widget's polling don't replay session logs or hammer
+ * the DeepSeek API; responses carry `Cache-Control` so the browser's HTTP
+ * cache serves repeat requests without a network round trip. `?refresh=1`
+ * bypasses the memo for an explicit force refresh.
+ */
+import type { HostContext } from './context.ts';
+/** Plugin identity for the cordis.patch.yml row (and the client bundle id). */
+export declare const name = "dsh-usage-dashboard";
+/** Services required before load: the web server plus the two data sources. */
+export declare const inject: string[];
+/**
+ * Mount the /api/dsh-usage-dashboard routes.
+ * @param ctx - host Cordis context.
+ */
+export declare function apply(ctx: HostContext): void;

package/lib/types/memo.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Tiny TTL memo for the /api routes.
+ *
+ * The usage endpoint replays every session log, so it must not run on every
+ * tab click; the balance endpoint also calls the DeepSeek API. The memo:
+ *
+ * - `get()` serves a successful cached response while it is within `ttlMs`,
+ *   otherwise recomputes;
+ * - `refresh()` recomputes unconditionally and reseeds the cache;
+ * - concurrent recomputes (of either kind) are deduped into one upstream
+ *   call;
+ * - `ok:false` responses are never cached, so a transient failure is retried
+ *   on the next request.
+ *
+ * No timers are held, so nothing needs disposal on plugin unload.
+ */
+export interface Memo<T> {
+    get(): Promise<T>;
+    refresh(): Promise<T>;
+}
+export declare function memoize<T extends {
+    ok: boolean;
+}>(ttlMs: number, compute: () => Promise<T>): Memo<T>;

package/lib/types/pricing.d.ts

@@ -0,0 +1,43 @@
+/**
+ * DeepSeek API price table and cost estimation.
+ *
+ * Two things the previous flat constant got wrong: every model was billed at
+ * deepseek-v4-pro rates (flash is ~3x cheaper), and the 2026-08-17 switch to
+ * peak/off-peak pricing was not modelled at all.
+ *
+ * Rates are CNY per 1M tokens, from DeepSeek's 2026-08-13 price announcement.
+ * Peak window is Beijing time 09:00–12:00 and 14:00–18:00; off-peak is half of
+ * peak. Usage recorded before the switch is still costed at the old flat rates,
+ * so historical days keep the price that was actually charged.
+ *
+ * Editing this table is the one place to touch when DeepSeek changes prices.
+ */
+import type { PricingInfo, PricingRates } from './contract.ts';
+/** 2026-08-17 00:00 Beijing time (UTC+8), when peak/off-peak pricing starts. */
+export declare const PEAK_PRICING_FROM_MS: number;
+type Tier = 'pro' | 'flash';
+/** Which price tier a model name falls into; anything unrecognised is billed
+ *  as pro, the conservative (more expensive) guess. */
+export declare function tierOf(model: string): Tier;
+/** Whether a moment falls in a peak window, judged in Beijing time so the
+ *  estimate does not drift with the machine's timezone. */
+export declare function isPeak(timeMs: number): boolean;
+/** Rates applying to one model at one moment. */
+export declare function ratesAt(timeMs: number, model: string): PricingRates;
+/**
+ * What prefix caching saved on one record: the cache-hit tokens re-priced at
+ * the cache-miss rate, minus what they actually cost.
+ */
+export declare function cacheSavingOf(timeMs: number, model: string, cache: number): number;
+/** Estimated CNY cost of one usage record. */
+export declare function costOf(timeMs: number, model: string, input: number, cache: number, output: number): number;
+/**
+ * The same record priced under the peak/off-peak table regardless of when it
+ * happened — `forceOffPeak` prices it as if it had landed in an idle window.
+ * Used to answer "what will the new pricing cost me" before the switch and
+ * "what would shifting off-peak save" after it.
+ */
+export declare function costUnderPeakEra(timeMs: number, model: string, input: number, cache: number, output: number, forceOffPeak?: boolean): number;
+/** The price table to show the user, describing whatever is in effect now. */
+export declare function pricingInfo(nowMs: number): PricingInfo;
+export {};

package/lib/types/trust-fence.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Browser-trust fence for the plugin's own /api route — the same fences the
+ * harness's /api gateway applies: the Host header must name a loopback
+ * authority, a browser-marked cross-site request is refused, and an attached
+ * Origin must be exactly this authority.
+ */
+import type { IncomingMessage } from 'node:http';
+export declare function isTrustedApiRequest(req: IncomingMessage): boolean;

package/lib/types/usage.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Balance and usage data sources.
+ *
+ * - Balance: DeepSeek API `GET /user/balance` with the key resolved through
+ *   the credentials service (`DEEPSEEK_API_KEY`).
+ * - Usage: token usage folded from the DSH session logs (`sessionPersistence`),
+ *   one record per `assistant/message` event, bucketed by local day / hour.
+ */
+import type { BalanceResponse, UsageResponse } from './contract.ts';
+import type { CredentialsFace, SessionPersistenceFace } from './context.ts';
+export declare function fetchBalance(credentials: CredentialsFace | undefined): Promise<BalanceResponse>;
+export declare function fetchUsage(persistence: SessionPersistenceFace | undefined): Promise<UsageResponse>;

package/lib/types/wire.d.ts

@@ -0,0 +1,2 @@
+import type { ServerResponse } from 'node:http';
+export declare function writeJson(res: ServerResponse, status: number, body: unknown, headers?: Record<string, string>): void;

package/package.json

@@ -0,0 +1,82 @@
+{
+  "name": "@cassius0924/dsh-usage-dashboard",
+  "version": "0.3.0",
+  "description": "DeepSeek 额度与用量仪表盘 —— DSH (DeepSeek Harness) Web 插件：余额还能撑几天、今日/本月花了多少、哪个模型和哪个会话最贵、缓存省了多少，以及 2026-08-17 峰谷定价后的账单预估",
+  "keywords": [
+    "deepseek",
+    "dsh",
+    "deepseek-harness",
+    "plugin",
+    "dashboard",
+    "usage",
+    "quota",
+    "cost",
+    "tokens"
+  ],
+  "homepage": "https://github.com/Cassius0924/dsh-usage-dashboard#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Cassius0924/dsh-usage-dashboard.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Cassius0924/dsh-usage-dashboard/issues"
+  },
+  "author": "Cassius0924",
+  "type": "module",
+  "main": "lib/index.js",
+  "types": "lib/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/types/index.d.ts",
+      "default": "./lib/index.js"
+    },
+    "./client": {
+      "types": "./lib/types/client/index.d.ts",
+      "default": "./lib/client.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "dsh": {
+    "bundle": {
+      "patch": "./cordis.patch.yml"
+    },
+    "client": {
+      "platform": "web",
+      "immediately": true,
+      "inject": [
+        "@deepseek-ai/dsh-client-runtime",
+        "@deepseek-ai/dsh-client-ui-conversation"
+      ]
+    }
+  },
+  "files": [
+    "lib",
+    "cordis.patch.yml",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "node build.mjs",
+    "typecheck": "tsc --noEmit",
+    "prepare": "node build.mjs"
+  },
+  "license": "MIT",
+  "engines": {
+    "node": ">=20"
+  },
+  "peerDependencies": {
+    "@deepseek-ai/cordis": "^4.0.0",
+    "react": "^18.2.0"
+  },
+  "devDependencies": {
+    "@deepseek-ai/cordis": "^4.0.1",
+    "@types/node": "^24.0.0",
+    "@types/react": "^18.2.0",
+    "esbuild": "^0.25.0",
+    "react": "^18.2.0",
+    "typescript": "^5.6.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}