dsh-token-chart 0.0.0-stage → 0.1.0

package/lib/token-chart.css

@@ -0,0 +1,568 @@
+/* dsh-token-chart — Tailwind utilities + Less components. Generated by scripts/build-styles.mjs. */
+/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-leading:initial}}}@layer theme{:root,:host{--spacing:.25rem;--radius-md:.375rem}}@layer utilities{.box-border{box-sizing:border-box}.flex{display:flex}.h-\[22px\]{height:22px}.w-\[22px\]{width:22px}.min-w-11{min-width:calc(var(--spacing) * 11)}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.justify-end{justify-content:flex-end}.gap-1{gap:var(--spacing)}.rounded-md{border-radius:var(--radius-md)}.border{border-style:var(--tw-border-style);border-width:1px}.border-\[color\:var\(--dsw-alias-border-l1\)\]{border-color:var(--dsw-alias-border-l1)}.bg-transparent{background-color:#0000}.p-0{padding:0}.text-center{text-align:center}.text-\[11px\]{font-size:11px}.text-\[13px\]{font-size:13px}.leading-none{--tw-leading:1;line-height:1}.text-\[color\:var\(--dsw-alias-label-primary\)\]{color:var(--dsw-alias-label-primary)}.text-\[color\:var\(--dsw-alias-label-secondary\)\]{color:var(--dsw-alias-label-secondary)}.\[font-variant-numeric\:tabular-nums\]{font-variant-numeric:tabular-nums}.opacity-70{opacity:.7}@media (hover:hover){.hover\:opacity-100:hover{opacity:1}.enabled\:hover\:bg-\[color\:var\(--dsw-alias-interactive-bg-hover\)\]:enabled:hover{background-color:var(--dsw-alias-interactive-bg-hover)}}.disabled\:cursor-default:disabled{cursor:default}.disabled\:opacity-40:disabled{opacity:.4}}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}
+/**
+ * Entry point for the plugin stylesheet, compiled by `npm run build:styles`
+ * into `client/token-chart.css`.
+ *
+ * @module dsh-token-chart/client/styles
+ */
+/**
+ * Component styles for the plugin's surfaces.
+ *
+ * Everything is namespaced with the `dtc-` prefix so a plugin stylesheet can
+ * never reach into the product's own DOM. Utility classes (Tailwind) handle
+ * layout in the newer surfaces; the rules here carry the pieces that read
+ * better as named components.
+ *
+ * @module dsh-token-chart/client/styles/components
+ */
+/**
+ * Shared Less variables for the plugin's styles.
+ *
+ * They deliberately hold the product's own CSS custom properties rather than
+ * literal colors: the tokens resolve at paint time, so the plugin follows the
+ * active theme (light / dark / high contrast) without a second definition.
+ */
+/** Radius and spacing the plugin reuses across surfaces. */
+.dtc-root {
+  color: var(--dsw-alias-label-primary);
+  font-size: 13px;
+  line-height: 1.55;
+}
+.dtc-panel {
+  padding: 20px 24px 32px;
+  overflow: auto;
+  height: 100%;
+  box-sizing: border-box;
+}
+.dtc-drawer {
+  padding: 12px 14px 24px;
+  overflow: auto;
+  height: 100%;
+  box-sizing: border-box;
+}
+.dtc-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+.dtc-title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+}
+.dtc-subtitle {
+  margin: 2px 0 0;
+  color: var(--dsw-alias-label-secondary);
+  font-size: 12px;
+}
+.dtc-toolbar {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+.dtc-button {
+  border: 1px solid var(--dsw-alias-border-l2);
+  background: var(--dsw-alias-bg-layer-1);
+  color: var(--dsw-alias-label-primary);
+  border-radius: 8px;
+  padding: 5px 12px;
+  font-size: 12px;
+  cursor: pointer;
+}
+.dtc-button:hover {
+  background: var(--dsw-alias-bg-layer-2);
+}
+.dtc-filters {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+  margin-bottom: 14px;
+}
+.dtc-segmented {
+  display: inline-flex;
+  border: 1px solid var(--dsw-alias-border-l1);
+  border-radius: 9px;
+  overflow: hidden;
+  background: var(--dsw-alias-bg-layer-1);
+}
+.dtc-segment {
+  border: 0;
+  background: transparent;
+  color: var(--dsw-alias-label-secondary);
+  padding: 5px 14px;
+  font-size: 12px;
+  cursor: pointer;
+}
+.dtc-segment + .dtc-segment {
+  border-left: 1px solid var(--dsw-alias-border-l1);
+}
+.dtc-segment-active {
+  background: var(--dsw-alias-bg-layer-2);
+  color: var(--dsw-alias-label-primary);
+  font-weight: 600;
+}
+.dtc-meta {
+  color: var(--dsw-alias-label-secondary);
+  font-size: 11px;
+}
+.dtc-banner {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  padding: 12px 14px;
+  border: 1px solid var(--dsw-alias-border-l1);
+  border-radius: 12px;
+  background: var(--dsw-alias-bg-layer-1);
+  margin-bottom: 12px;
+}
+.dtc-banner-label {
+  color: var(--dsw-alias-label-secondary);
+  font-size: 12px;
+}
+.dtc-banner-value {
+  font-size: 24px;
+  font-weight: 650;
+  letter-spacing: 0.5px;
+}
+.dtc-banner-extra {
+  margin-left: auto;
+  color: var(--dsw-alias-label-secondary);
+  font-size: 11px;
+}
+.dtc-kpis {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
+  gap: 8px;
+  margin-bottom: 14px;
+}
+.dtc-kpi {
+  border: 1px solid var(--dsw-alias-border-l1);
+  border-radius: 10px;
+  padding: 8px 10px;
+  background: var(--dsw-alias-bg-layer-1);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.dtc-kpi-label {
+  color: var(--dsw-alias-label-secondary);
+  font-size: 11px;
+}
+.dtc-kpi-value {
+  font-size: 17px;
+  font-weight: 600;
+}
+.dtc-kpi-exact {
+  color: var(--dsw-alias-label-secondary);
+  font-size: 10px;
+}
+.dtc-facts {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 2px 12px;
+  margin: 0 0 14px;
+  padding: 10px 12px;
+  border: 1px solid var(--dsw-alias-border-l1);
+  border-radius: 10px;
+  background: var(--dsw-alias-bg-layer-1);
+  font-size: 12px;
+}
+.dtc-facts dt {
+  color: var(--dsw-alias-label-secondary);
+}
+.dtc-facts dd {
+  margin: 0;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+.dtc-section-title {
+  font-size: 12px;
+  color: var(--dsw-alias-label-secondary);
+  margin: 4px 0 6px;
+}
+.dtc-chart {
+  width: 100%;
+}
+.dtc-chart svg {
+  display: block;
+  max-width: 100%;
+}
+.dtc-chart-pie {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+.dtc-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 6px;
+  font-size: 11px;
+  color: var(--dsw-alias-label-secondary);
+}
+.dtc-legend-column {
+  flex-direction: column;
+  gap: 4px;
+  margin-top: 0;
+}
+.dtc-legend-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+.dtc-swatch {
+  width: 9px;
+  height: 9px;
+  border-radius: 2px;
+  display: inline-block;
+}
+/* The block spans the surface; only the table inside it scrolls. */
+.dtc-table-block {
+  width: 100%;
+}
+.dtc-table-wrap {
+  margin-top: 12px;
+  overflow: auto;
+  border: 1px solid var(--dsw-alias-border-l1);
+  border-radius: 10px;
+}
+.dtc-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12px;
+}
+.dtc-table th,
+.dtc-table td {
+  padding: 6px 10px;
+  border-bottom: 1px solid var(--dsw-alias-border-l1);
+  text-align: left;
+  white-space: nowrap;
+}
+.dtc-table th {
+  color: var(--dsw-alias-label-secondary);
+  font-weight: 500;
+  background: var(--dsw-alias-bg-layer-1);
+  position: sticky;
+  top: 0;
+}
+.dtc-table tbody tr:last-child td {
+  border-bottom: 0;
+}
+.dtc-right {
+  text-align: right !important;
+  font-variant-numeric: tabular-nums;
+}
+.dtc-empty {
+  color: var(--dsw-alias-label-secondary);
+  font-size: 12px;
+  padding: 18px 2px;
+}
+.dtc-error {
+  color: var(--dsw-alias-state-error-primary);
+  font-size: 12px;
+}
+.dtc-warn {
+  color: var(--dsw-alias-state-warn-primary);
+  font-size: 11px;
+  margin: 6px 0 0;
+}
+.dtc-footnote {
+  color: var(--dsw-alias-label-secondary);
+  font-size: 11px;
+  line-height: 1.5;
+  margin: 8px 0 0;
+}
+.dtc-settings {
+  padding: 4px 2px 16px;
+  max-width: 760px;
+}
+.dtc-card {
+  border: 1px solid var(--dsw-alias-border-l1);
+  border-radius: 12px;
+  padding: 14px 16px;
+  margin: 12px 0;
+  background: var(--dsw-alias-bg-layer-1);
+}
+.dtc-card-title {
+  margin: 0 0 2px;
+  font-size: 13px;
+  font-weight: 600;
+}
+.dtc-card-hint {
+  margin: 0 0 10px;
+  color: var(--dsw-alias-label-secondary);
+  font-size: 11px;
+}
+.dtc-field-label {
+  margin: 12px 0 6px;
+  font-size: 12px;
+  color: var(--dsw-alias-label-secondary);
+}
+.dtc-picker {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+.dtc-chip {
+  border: 1px solid var(--dsw-alias-border-l1);
+  background: var(--dsw-alias-bg-base);
+  color: var(--dsw-alias-label-secondary);
+  border-radius: 999px;
+  padding: 4px 12px;
+  font-size: 12px;
+  cursor: pointer;
+}
+.dtc-chip:hover {
+  border-color: var(--dsw-alias-border-l2);
+  color: var(--dsw-alias-label-primary);
+}
+.dtc-chip-active {
+  border-color: var(--dsw-alias-brand-primary);
+  color: var(--dsw-alias-brand-primary);
+  background: color-mix(in srgb, var(--dsw-alias-brand-primary) 10%, transparent);
+  font-weight: 600;
+}
+.dtc-switch-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 8px 0;
+  border-bottom: 1px solid var(--dsw-alias-border-l1);
+}
+.dtc-switch-row:last-child {
+  border-bottom: 0;
+}
+.dtc-switch-text {
+  display: flex;
+  flex-direction: column;
+}
+.dtc-switch-label {
+  font-size: 12.5px;
+}
+.dtc-switch-hint {
+  color: var(--dsw-alias-label-secondary);
+  font-size: 11px;
+}
+.dtc-switch {
+  width: 36px;
+  height: 20px;
+  border-radius: 999px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  background: var(--dsw-alias-bg-layer-2);
+  position: relative;
+  cursor: pointer;
+  padding: 0;
+  flex: none;
+}
+.dtc-switch-on {
+  background: var(--dsw-alias-brand-primary);
+  border-color: var(--dsw-alias-brand-primary);
+}
+.dtc-switch-knob {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--dsw-alias-bg-base);
+  transition: transform 0.16s ease;
+}
+.dtc-switch-on .dtc-switch-knob {
+  transform: translateX(16px);
+}
+.dtc-settings-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-top: 10px;
+}
+.dtc-status {
+  color: var(--dsw-alias-label-secondary);
+  font-size: 11px;
+}
+.dtc-status-error {
+  color: var(--dsw-alias-state-error-primary);
+}
+.dtc-plugin-head {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin: 2px 0 6px;
+}
+.dtc-plugin-id {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.dtc-plugin-icon {
+  display: inline-flex;
+  color: var(--dsw-alias-label-primary);
+}
+.dtc-plugin-name {
+  color: var(--dsw-alias-label-secondary);
+  font-size: 12px;
+}
+.dtc-plugin-version {
+  color: var(--dsw-alias-label-secondary);
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+}
+.dtc-update-button {
+  margin-left: auto;
+  border: 1px solid var(--dsw-alias-label-primary);
+  background: var(--dsw-alias-label-primary);
+  color: var(--dsw-alias-bg-base);
+  border-radius: 8px;
+  padding: 4px 12px;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+}
+.dtc-update-button:hover {
+  opacity: 0.88;
+}
+.dtc-update-button:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.dtc-plugin-note {
+  color: var(--dsw-alias-label-secondary);
+  font-size: 11px;
+}
+/* The settings shell owns the nav row; our own row gets the sidebar glyph. */
+[data-dtc-settings-nav] > svg:first-child {
+  display: none;
+}
+[data-dtc-settings-nav]::before {
+  content: '';
+  flex: none;
+  width: 16px;
+  height: 16px;
+  background: currentColor;
+  -webkit-mask: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'><g%20fill='black'><rect%20x='3'%20y='12'%20width='4'%20height='9'%20rx='1'/><rect%20x='9'%20y='8'%20width='4'%20height='13'%20rx='1'/><rect%20x='15'%20y='4'%20width='4'%20height='17'%20rx='1'/></g></svg>") center / contain no-repeat;
+  mask: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'><g%20fill='black'><rect%20x='3'%20y='12'%20width='4'%20height='9'%20rx='1'/><rect%20x='9'%20y='8'%20width='4'%20height='13'%20rx='1'/><rect%20x='15'%20y='4'%20width='4'%20height='17'%20rx='1'/></g></svg>") center / contain no-repeat;
+}
+.dtc-echarts {
+  min-width: 120px;
+}
+.dtc-echarts svg {
+  display: block;
+  max-width: 100%;
+}
+.dtc-engine {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  font-size: 12px;
+}
+.dtc-engine-label {
+  color: var(--dsw-alias-label-secondary);
+}
+.dtc-engine[data-dtc-engine="echarts"] {
+  color: var(--dsw-alias-label-primary);
+}
+.dtc-engine[data-dtc-engine="svg"] {
+  color: var(--dsw-alias-state-warn-primary);
+}
+.dtc-header-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  border: 1px solid var(--dsw-alias-border-l1);
+  background: transparent;
+  color: var(--dsw-alias-label-secondary);
+  border-radius: 8px;
+  padding: 3px 9px;
+  font-size: 12px;
+  cursor: pointer;
+}
+.dtc-header-button:hover {
+  color: var(--dsw-alias-label-primary);
+  border-color: var(--dsw-alias-border-l2);
+}
+.dtc-header-label {
+  white-space: nowrap;
+}
+/* ---------------------------------------------------------------- pager */
+/* The pager sits at the bottom-right of the table; the row count stays left. */
+/* Layout lives here rather than only in utilities: these rules are unlayered, so
+   a product rule that targets `nav` cannot outrank the pager's own class. */
+.dtc-pager {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 4px;
+  margin-top: 10px;
+  font-size: 11px;
+  color: var(--dsw-alias-label-secondary);
+}
+.dtc-pager-total {
+  margin-right: auto;
+}
+.dtc-page {
+  box-sizing: border-box;
+  min-width: 26px;
+  height: 26px;
+  padding: 0 6px;
+  border: 1px solid var(--dsw-alias-border-l1);
+  border-radius: 6px;
+  background: var(--dsw-alias-bg-layer-1);
+  color: var(--dsw-alias-label-primary);
+  font: inherit;
+  font-size: 12px;
+  line-height: 1;
+  cursor: pointer;
+}
+.dtc-page:hover:not(:disabled) {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+.dtc-page:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+/* The page in view: brand border and text, no fill. */
+.dtc-page-current {
+  border-color: var(--dsw-alias-brand-primary);
+  color: var(--dsw-alias-brand-primary);
+  background: transparent;
+}
+.dtc-page-gap {
+  padding: 0 2px;
+}
+.dtc-page-size {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  margin-left: 6px;
+}
+.dtc-select {
+  appearance: none;
+  height: 26px;
+  padding: 0 22px 0 8px;
+  border: 1px solid var(--dsw-alias-border-l1);
+  border-radius: 6px;
+  background: var(--dsw-alias-bg-layer-1);
+  color: var(--dsw-alias-label-primary);
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+}
+.dtc-select-chevron {
+  position: absolute;
+  right: 6px;
+  color: var(--dsw-alias-label-secondary);
+  pointer-events: none;
+}
+

package/lib/types/buckets.d.ts

@@ -0,0 +1,24 @@
+import type { Buckets, Derived, SessionEvent, UsageSample } from './types.ts';
+/** One zeroed bucket set. */
+export declare function zeroBuckets(): Buckets;
+export declare function isCount(value: unknown): value is number;
+/**
+ * The last `usage` chunk embedded in one durable Assistant settlement stream.
+ * @param stream - compact records of the settlement.
+ * @returns the provider usage object, or undefined.
+ */
+export declare function lastStreamUsage(stream: readonly unknown[] | undefined): UsageSample | undefined;
+/** The usage one durable settlement reports, if any. */
+export declare function usageOf(event: SessionEvent): UsageSample | undefined;
+/** Normalize one provider usage sample into the four billed buckets. */
+export declare function bucketsFrom(usage: UsageSample | undefined): Buckets | undefined;
+export declare function bucketsEqual(left: Buckets, right: Buckets): boolean;
+export declare function addInto(total: Buckets, buckets: Buckets): Buckets;
+export declare function subtract(total: Buckets, buckets: Buckets): Buckets;
+/** Derived figures shared by every response. */
+export declare function derived<T extends Record<string, unknown>>(buckets: Buckets, extra?: T): Derived & T;
+/** Local calendar-day key `YYYY-MM-DD`. */
+export declare function dayKey(time: number): string;
+/** Epoch ms of local midnight, `offset` days back. */
+export declare function startOfLocalDay(offset?: number): number;
+export declare function timeLabel(time: number): string;

package/lib/types/chunk/echarts.entry.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Build entry for the package-local lazy chunk `client.echarts.js`.
+ *
+ * Only what the token-usage surfaces actually draw is pulled in: bar, line and
+ * pie series plus the grid/tooltip/legend/dataZoom components and the SVG
+ * renderer.
+ * Everything else ECharts ships (maps, 3D, GL, canvas renderer, the full
+ * component set) is tree-shaken away by the bundler.
+ */
+import * as echarts from 'echarts/core';
+export default echarts;

package/lib/types/constants.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Values both halves and every Host module agree on.
+ *
+ * @module dsh-token-chart/constants
+ */
+/** The plugin's package name: the client entry id and the artifact key. */
+export declare const PACKAGE_NAME = "dsh-token-chart";
+/** Retention window: only the newest 7 calendar days are kept on disk. */
+export declare const RETENTION_DAYS = 7;
+/** Store schema version; a document from another version is rebuilt from logs. */
+export declare const STORE_VERSION = 2;
+export declare const DAY_MS: number;
+/** Browser half and Host half agree on this prefix; it is part of the package contract. */
+export declare const API_PREFIX = "/token-chart/api";
+export declare const SAVE_DEBOUNCE_MS = 1200;
+export declare const BACKFILL_SESSION_LIMIT = 40;
+/** Fallback registry for the update check when the profile names none. */
+export declare const DEFAULT_REGISTRY = "https://registry.npmmirror.com/";
+export declare const UPDATE_CHECK_TTL_MS: number;
+export declare const UPDATE_FETCH_TIMEOUT_MS = 12000;
+export declare const METRIC_IDS: readonly ['input', 'output', 'cache', 'total'];
+export declare const CHART_IDS: readonly ['bar', 'line', 'pie', 'table', 'multi-bar', 'multi-line', 'bar-line'];

package/lib/types/index.d.ts

@@ -0,0 +1,8 @@
+import { HostContext } from './types.ts';
+export declare const name = "dsh-token-chart";
+export { compareVersions, fetchLatestVersion, readOwnManifest } from './update.ts';
+/**
+ * Mount the collector, the store, and the browser API.
+ * @param ctx - the plugin's Cordis context.
+ */
+export declare function apply(ctx: HostContext): void;

package/lib/types/paths.d.ts

@@ -0,0 +1,3 @@
+export declare function dataDir(): string;
+export declare function usageFile(): string;
+export declare function prefsFile(): string;

package/lib/types/prefs.d.ts

@@ -0,0 +1,8 @@
+import type { Prefs } from './types.ts';
+/** Preference defaults — the single definition shared by Host and browser halves. */
+export declare const DEFAULT_PREFS: Prefs;
+/**
+ * Coerce one stored preference document into the accepted shape.
+ * @param raw - whatever `prefs.json` (or a client patch) held.
+ */
+export declare function normalizePrefs(raw: unknown): Prefs;