@jeffusion/bungee-core 5.1.6 → 5.2.0

package/dist/plugins/token-stats/ui/TokenStatsPage.svelte

@@ -0,0 +1,136 @@
+<script lang="ts">
+  import { isLoading, locale } from 'svelte-i18n';
+  import RefreshCw from 'lucide-svelte/icons/refresh-cw';
+  import { _ } from '@bungee/plugin-sdk';
+  import { getPluginText } from '$utils/plugin-i18n';
+  import { KpiCard, PanelCard, MetricBar, BSegmentedControl, LoadingIndicator } from '$components/industrial';
+  import { Button } from '$components/ui/button';
+  import { Input } from '$components/ui/input';
+  import UsageTimeChart from './UsageTimeChart.svelte';
+  import { getStatsResource } from './stats';
+  import { cacheDetail, formatEstimatedUsd, formatTokenCount, modelTokenTotal, tokenComposition, usagePresentation, type TokenRange } from './labels';
+  import type { StatsState, StatsResource } from './stats-resource';
+
+  let { pluginName = 'token-stats' }: { pluginName?: string } = $props();
+  let range: TokenRange = $state('24h');
+  let sort = $state('tokens');
+  let search = $state('');
+  let models: StatsState = $state({ data: null, busy: false, error: '', refreshedAt: 0 });
+  let time: StatsState = $state({ data: null, busy: false, error: '', refreshedAt: 0 });
+  let modelResource: StatsResource | undefined = $state();
+  let timeResource: StatsResource | undefined = $state();
+  const t = (key: string) => $isLoading ? '' : getPluginText(key, pluginName, (id, options) => $_(id, options));
+  const display = (value: unknown) => formatTokenCount(value, $locale ?? undefined);
+  const usage = $derived(models.data ? usagePresentation(models.data) : null);
+  const composition = $derived(tokenComposition(models.data ?? {}));
+  const modelLabel = (id: string) => id === 'unknown' ? t('ui.unknownModel') : id;
+  const parts = (row: Parameters<typeof tokenComposition>[0]) => {
+    const c = tokenComposition(row);
+    return [
+      { key: 'input', label: t('ui.input'), value: c.input, tone: 'accent' as const },
+      { key: 'output', label: t('ui.output'), value: c.output, tone: 'ok' as const },
+      { key: 'cacheRead', label: t('page.cacheRead'), value: c.cacheRead, tone: 'warn' as const },
+      { key: 'cacheWrite', label: t('page.cacheWrite'), value: c.cacheWrite, tone: 'danger' as const },
+    ];
+  };
+  const knownPart = (key: string) => key === 'input' ? usage?.input !== undefined
+    : key === 'output' ? usage?.output !== undefined
+    : cacheDetail(key === 'cacheRead' ? models.data?.cacheReadTokens : models.data?.cacheWriteTokens) !== undefined;
+  const rankAmount = (row: NonNullable<typeof models.data>['data'][number]) => sort === 'cost'
+    ? row.estimatedCostUsd ?? -1 : modelTokenTotal(row) ?? -1;
+  const rows = $derived.by(() => [...models.data?.data ?? []]
+    .filter(row => modelLabel(row.dimension).toLowerCase().includes(search.trim().toLowerCase()))
+    .sort((a, b) => rankAmount(b) - rankAmount(a) || a.dimension.localeCompare(b.dimension)));
+  const maxRank = $derived(Math.max(0, ...rows.map(rankAmount)));
+  const busy = $derived(models.busy || time.busy);
+  const refreshedAt = $derived(Math.min(models.refreshedAt, time.refreshedAt));
+  const ranges = $derived(['1h', '12h', '24h'].map(value => ({ value, label: t(`page.range.${value}`) })));
+  const sorts = $derived(['tokens', 'cost'].map(value => ({ value, label: t(`page.sort.${value}`) })));
+  $effect(() => {
+    const nextModel = getStatsResource(pluginName, range, 'model');
+    const nextTime = getStatsResource(pluginName, range, 'time');
+    modelResource = nextModel; timeResource = nextTime;
+    const stopModels = nextModel.subscribe(next => { models = next; });
+    const stopTime = nextTime.subscribe(next => { time = next; });
+    return () => { stopModels(); stopTime(); };
+  });
+  function refresh() { void modelResource?.refresh(); void timeResource?.refresh(); }
+</script>
+
+<div class="min-w-0 space-y-4" data-testid="token-stats-page">
+  <div class="flex flex-wrap items-center justify-between gap-3">
+    <BSegmentedControl options={ranges} value={range} onchange={value => range = value as TokenRange} ariaLabel={t('page.range')} />
+    <div class="flex min-w-0 flex-wrap items-center gap-3">
+      <span class="font-mono text-[10px] text-zinc-400" aria-live="polite">{refreshedAt ? `${t('page.updatedAt')} ${new Date(refreshedAt).toLocaleTimeString($locale ?? undefined)}` : ''}</span>
+      <Button variant="ghost" size="sm" disabled={busy} onclick={refresh} aria-label={t('ui.refresh')} aria-busy={busy}>
+        <RefreshCw class={`mr-1.5 h-3.5 w-3.5 ${busy ? 'motion-safe:animate-spin' : ''}`} />{t('ui.refresh')}
+      </Button>
+      <a href={`/#/plugins/${pluginName}/pricing`} class="nx-btn nx-btn-ghost nx-btn-sm">{t('settings.title')}</a>
+    </div>
+  </div>
+  {#if models.error || time.error}
+    <div role="alert" class="flex flex-wrap items-center justify-between gap-2 border-l-2 border-red-500 bg-carbon-900 px-3 py-2 text-xs text-red-300">
+      <span>{t('ui.loadFailed')}</span><Button variant="ghost" size="sm" onclick={refresh} disabled={busy}>{t('page.retry')}</Button>
+    </div>
+  {/if}
+  {#if models.busy && !models.data}
+    <LoadingIndicator label={t('ui.loading')} height="sm" />
+  {:else if models.data}
+    <div class="grid grid-cols-2 gap-3 xl:grid-cols-4" data-testid="token-stats-page-summary">
+      <KpiCard class="min-w-0 [container-type:inline-size]" label={t('ui.input')} value={display(usage?.input)} />
+      <KpiCard class="min-w-0 [container-type:inline-size]" label={t('ui.output')} value={display(usage?.output)} />
+      <KpiCard class="min-w-0 [container-type:inline-size]" label={t('page.tokens')} value={display(modelTokenTotal(models.data))} />
+      <KpiCard class="min-w-0 [container-type:inline-size]" label={t('ui.estimatedCostUsd')} value={formatEstimatedUsd(models.data.estimatedCostUsd)} />
+    </div>
+    {#if usage?.state === 'empty'}<p class="py-8 text-center text-sm text-zinc-400" data-testid="token-stats-page-empty">{t('ui.noData')}</p>{/if}
+  {/if}
+
+  <PanelCard title={t('page.activity')} tag="TOKEN / TIME">
+    <div class="h-[240px] min-w-0 sm:h-[300px]">
+      {#if time.busy && !time.data}<LoadingIndicator label={t('ui.loading')} />
+      {:else if time.data && usagePresentation(time.data).positive}
+        <UsageTimeChart stats={time.data} {range} refreshedAt={time.refreshedAt} {pluginName} />
+      {:else}<p class="flex h-full items-center justify-center text-sm text-zinc-400">{t(time.data && usagePresentation(time.data).state === 'empty' ? 'ui.noData' : 'ui.noBreakdown')}</p>{/if}
+    </div>
+  </PanelCard>
+
+  {#if models.data}
+    <PanelCard title={t('page.composition')} tag="TOKEN">
+      <MetricBar label={t('page.tokens')} value={composition.total} max={composition.total} valueLabel={display(modelTokenTotal(models.data))}
+        segments={parts(models.data)} tone="neutral" />
+      <dl class="mt-3 grid grid-cols-2 gap-x-6 gap-y-3 sm:grid-cols-4" data-testid="token-stats-composition">
+        {#each parts(models.data) as part}
+          <div><dt class="nx-label">{part.label}</dt><dd class="mt-1 font-mono text-xs text-zinc-200">{knownPart(part.key) ? display(part.value) : '—'}
+            <span class="ml-2 text-zinc-400">{knownPart(part.key) && composition.total > 0 ? `${(part.value / composition.total * 100).toFixed(1)}%` : '—'}</span></dd></div>
+        {/each}
+      </dl>
+    </PanelCard>
+
+    <PanelCard title={t('dimension.model')} tag={`${rows.length} / ${models.data.data.length}`}>
+      <div class="mb-3 flex flex-wrap items-center justify-between gap-3">
+        <Input bind:value={search} aria-label={t('page.searchModels')} placeholder={t('page.searchModels')} class="w-full sm:w-64" />
+        <BSegmentedControl options={sorts} bind:value={sort} ariaLabel={t('page.sort')} />
+      </div>
+      <ol class="space-y-4" data-testid="token-stats-model-list">
+        {#each rows as row (row.dimension)}
+          {@const total = modelTokenTotal(row)}
+          <li class="min-w-0 border-b border-carbon-600 pb-4 last:border-0 last:pb-0" data-testid="token-stats-model-row">
+            <div class="mb-1.5 flex flex-wrap items-baseline justify-between gap-2">
+              <strong class="min-w-0 break-all font-mono text-xs font-normal text-zinc-200">{modelLabel(row.dimension)}</strong>
+              <span class="font-mono text-[11px] text-zinc-400">{display(total)} Token · {formatEstimatedUsd(row.estimatedCostUsd)}</span>
+            </div>
+            <MetricBar label={`${modelLabel(row.dimension)} · ${t(`page.sort.${sort}`)}`} value={Math.max(0, rankAmount(row))} max={maxRank}
+              valueLabel={sort === 'cost' ? formatEstimatedUsd(row.estimatedCostUsd) : display(total)}
+              tone={sort === 'tokens' ? 'neutral' : 'accent'} segments={sort === 'tokens' ? parts(row) : []} headless />
+            <dl class="mt-2 flex flex-wrap gap-x-5 gap-y-1 font-mono text-[10px] text-zinc-400">
+              <div>{t('ui.input')} <span class="text-zinc-200">{display(usagePresentation(row).input)}</span></div>
+              <div>{t('ui.output')} <span class="text-zinc-200">{display(usagePresentation(row).output)}</span></div>
+              <div>{t('page.cacheRead')} <span class="text-zinc-200">{display(row.cacheReadTokens)}</span></div>
+              <div>{t('page.cacheWrite')} <span class="text-zinc-200">{display(row.cacheWriteTokens)}</span></div>
+            </dl>
+          </li>
+        {:else}<li class="py-6 text-center text-xs text-zinc-400">{t(search ? 'page.noModels' : 'ui.noData')}</li>{/each}
+      </ol>
+    </PanelCard>
+  {/if}
+</div>

package/dist/plugins/token-stats/ui/UsageTimeChart.svelte

@@ -0,0 +1,181 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { isLoading, locale } from 'svelte-i18n';
+  import { getPluginText } from '$utils/plugin-i18n';
+  import * as Tooltip from '$components/ui/tooltip';
+  import { Bar, ChartJS, BarElement, CategoryScale, LinearScale, _, type ChartData, type ChartOptions } from '@bungee/plugin-sdk';
+  import type { Plugin } from 'chart.js';
+  import { buildTimeSeries, formatTokenCount, modelColorIndex, OTHER_MODEL, timeAxisLabels, type TimeBucket, type TokenRange } from './labels';
+  import type { StatsResponse } from './stats-resource';
+
+  ChartJS.register(BarElement, CategoryScale, LinearScale);
+  let { stats, range, refreshedAt, pluginName = 'token-stats' }:
+    { stats: StatsResponse; range: TokenRange; refreshedAt: number; pluginName?: string } = $props();
+  const t = (key: string) => $isLoading ? '' : getPluginText(key, pluginName, (id, options) => $_(id, options));
+  const display = (value: unknown) => formatTokenCount(value, $locale ?? undefined);
+  const trend = $derived(buildTimeSeries(stats.data, range, stats.bucketMs ?? 0, refreshedAt));
+  const axisTicks = $derived(trend.buckets.length ? timeAxisLabels([
+    trend.buckets[0].startMs, trend.buckets[Math.floor(trend.buckets.length / 2)].startMs,
+    trend.buckets[trend.buckets.length - 1].startMs,
+  ], $locale ?? undefined) : ['', '', '']);
+  const denseAxis = $derived(axisTicks.join('').length > 42);
+  const tones = ['bg-nexus-500', 'bg-sky-400', 'bg-emerald-400', 'bg-amber-400', 'bg-red-400'] as const;
+  // Match the original Tailwind palette, including carbon-500 and zinc-500.
+  const palette = ['#f97316', '#38bdf8', '#34d399', '#fbbf24', '#f87171'];
+  const data: ChartData<'bar'> = $derived({
+    labels: trend.buckets.map(bucket => bucket.startMs),
+    datasets: trend.models.map(id => ({
+      label: modelLabel(id),
+      data: trend.buckets.map(bucket => bucket.parts.find(part => part.id === id)?.tokens ?? 0),
+      backgroundColor: id === OTHER_MODEL ? '#373d4a' : id === 'unknown' ? '#71717a' : palette[modelColorIndex(id)],
+      borderWidth: 0, borderRadius: 0, inflateAmount: 0,
+    })),
+  });
+  const options: ChartOptions<'bar'> = $derived({
+    responsive: true, maintainAspectRatio: false, animation: false, events: [],
+    layout: { padding: 0 },
+    scales: {
+      x: { stacked: true, display: false, offset: true },
+      y: { stacked: true, display: false, min: 0, max: Math.max(1, trend.maxTokens) },
+    },
+    plugins: { legend: { display: false }, tooltip: { enabled: false } },
+  });
+  const chartPlugins: Plugin<'bar'>[] = [{
+    id: 'token-stats-bar-style',
+    beforeUpdate(chart) {
+      // Fill each time slot, keeping the same 12px gutter at every viewport width.
+      const width = Math.max(0, chart.width / Math.max(1, chart.data.labels?.length ?? 0) - 12);
+      for (const dataset of chart.data.datasets) dataset.barThickness = width;
+    },
+  }];
+  let selectedBucketStart: number | null = $state(null);
+  const tooltipId = $props.id();
+  let tooltipAnchor: HTMLElement | null = $state(null);
+  let tooltipBucket: TimeBucket | undefined = $state();
+  let tooltipMode: 'hover' | 'focus' | 'touch' = 'hover';
+  let closeTimer: ReturnType<typeof setTimeout> | undefined;
+  let touchBucketWasOpen = false;
+  const selectedBucket = $derived(trend.buckets.find(bucket => bucket.startMs === selectedBucketStart));
+  $effect(() => { if (selectedBucket) tooltipBucket = selectedBucket; });
+  function modelLabel(id: string): string {
+    return id === OTHER_MODEL ? t('ui.otherModels') : id === 'unknown' ? t('ui.unknownModel') : id;
+  }
+  function modelTone(id: string): string {
+    return id === OTHER_MODEL ? 'bg-carbon-500' : id === 'unknown' ? 'bg-zinc-500' : tones[modelColorIndex(id)];
+  }
+  function timeLabel(startMs: number, full = false): string {
+    return new Intl.DateTimeFormat($locale ?? undefined, {
+      ...(full ? { month: '2-digit' as const, day: '2-digit' as const, timeZoneName: 'shortOffset' as const } : {}),
+      hour: '2-digit', minute: '2-digit', hourCycle: 'h23',
+    }).format(startMs);
+  }
+  function bucketDescription(bucket: TimeBucket): string {
+    return `${timeLabel(bucket.startMs, true)} · ${bucket.details.length
+      ? `${display(bucket.total)} Token · ${bucket.details.map(part => `${modelLabel(part.id)} ${display(part.tokens)}`).join(' · ')}`
+      : t('ui.noCountedTokens')}`;
+  }
+
+  function cancelClose() {
+    clearTimeout(closeTimer);
+    closeTimer = undefined;
+  }
+  function closeBucket() {
+    cancelClose();
+    selectedBucketStart = null;
+    tooltipAnchor = null;
+  }
+  function showBucket(startMs: number, element: HTMLElement, mode: 'hover' | 'focus' | 'touch') {
+    cancelClose();
+    tooltipMode = mode;
+    tooltipAnchor = element;
+    selectedBucketStart = startMs;
+  }
+  function leaveBucket() {
+    if (tooltipMode !== 'hover') return;
+    cancelClose();
+    // Allow the pointer to cross the small gap into the shared tooltip to read or scroll it.
+    closeTimer = setTimeout(closeBucket, 100);
+  }
+
+  onMount(() => () => cancelClose());
+</script>
+
+<div class="relative flex min-h-0 min-w-0 h-full flex-col overflow-hidden" data-testid="token-stats-time-chart">
+  <div class="relative min-h-0 flex-1 border-b border-carbon-500">
+    <div class="pointer-events-none absolute -left-[6px] -right-[6px] inset-y-0 z-10">
+      <Bar {data} {options} plugins={chartPlugins} aria-hidden="true" />
+    </div>
+    <div class="flex h-full items-end gap-[12px]" role="group" aria-label={t('ui.timeChart')}>
+      {#each trend.buckets as bucket, index (bucket.startMs)}
+        <button type="button" aria-pressed={selectedBucketStart === bucket.startMs}
+          aria-label={bucketDescription(bucket)} aria-describedby={selectedBucketStart === bucket.startMs ? tooltipId : undefined} data-token-stats-bucket-trigger
+          class="flex min-w-0 flex-1 self-stretch flex-col justify-end transition-colors hover:bg-carbon-700/40 focus-visible:outline focus-visible:outline-2 focus-visible:outline-nexus-500 {selectedBucketStart === bucket.startMs ? 'bg-carbon-700/40' : ''}"
+          onpointerenter={(event) => {
+            if (event.pointerType !== 'touch') showBucket(bucket.startMs, event.currentTarget, 'hover');
+          }}
+          onpointerleave={leaveBucket}
+          onfocus={(event) => showBucket(bucket.startMs, event.currentTarget, 'focus')}
+          onpointerdown={(event) => {
+            touchBucketWasOpen = event.pointerType === 'touch' && selectedBucketStart === bucket.startMs;
+          }}
+          onclick={(event) => {
+            if ('pointerType' in event && event.pointerType === 'touch') {
+              if (touchBucketWasOpen) closeBucket();
+              else showBucket(bucket.startMs, event.currentTarget, 'touch');
+            } else showBucket(bucket.startMs, event.currentTarget, event.detail === 0 ? 'focus' : 'hover');
+          }}
+          onblur={(event) => {
+            if (selectedBucketStart === bucket.startMs && !(event.relatedTarget instanceof HTMLElement && event.currentTarget.parentElement?.contains(event.relatedTarget))) closeBucket();
+          }}
+          onkeydown={(event) => {
+            if (event.key === 'Escape') closeBucket();
+            if (['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) {
+              event.preventDefault();
+              const nextIndex = event.key === 'Home' ? 0 : event.key === 'End' ? trend.buckets.length - 1
+                : index + (event.key === 'ArrowRight' ? 1 : -1);
+              const next = event.currentTarget.parentElement?.children[nextIndex] as HTMLElement | undefined;
+              next?.focus();
+            }
+          }}>
+        </button>
+      {/each}
+    </div>
+  </div>
+  <Tooltip.SharedContent anchor={tooltipAnchor} open={selectedBucket !== undefined} id={tooltipId}
+    onclose={closeBucket} onpointerenter={cancelClose} onpointerleave={leaveBucket}
+    class="w-72 font-mono text-[11px]"
+    data-testid="token-stats-bucket-detail">
+    {#if tooltipBucket}
+      <div class="border-b border-carbon-600 pb-2 text-zinc-400">{timeLabel(tooltipBucket.startMs, true)}</div>
+      <div class="mt-2 flex items-baseline justify-between gap-3">
+        <span>Token</span><strong class="font-display text-sm text-zinc-50">{display(tooltipBucket.total)}</strong>
+      </div>
+      <div class="mt-2 space-y-1.5">
+        {#each tooltipBucket.details as part (part.id)}
+          <div class="flex items-start justify-between gap-3">
+            <span class="flex min-w-0 items-start gap-1.5">
+              <span class="mt-1 h-2 w-2 shrink-0 {modelTone(part.id)}" aria-hidden="true"></span>
+              <span class="break-all">{modelLabel(part.id)}</span>
+            </span>
+            <strong class="shrink-0 font-normal text-zinc-50">{display(part.tokens)}</strong>
+          </div>
+        {:else}
+          <span class="text-zinc-400">{t('ui.noCountedTokens')}</span>
+        {/each}
+      </div>
+    {/if}
+  </Tooltip.SharedContent>
+  <div class="mt-1 flex shrink-0 items-start justify-between gap-1 font-mono text-[10px] leading-tight text-zinc-400" aria-hidden="true">
+    <span class="shrink-0 whitespace-nowrap">{axisTicks[0]}</span>
+    <span class="min-w-0 whitespace-nowrap text-center {denseAxis ? 'hidden sm:inline' : ''}">{axisTicks[1]}</span>
+    <span class="shrink-0 whitespace-nowrap text-right">{axisTicks[2]}</span>
+  </div>
+  <div class="mt-2 flex shrink-0 flex-wrap gap-x-3 gap-y-1 font-mono text-[10px] text-zinc-300">
+    {#each trend.models as id (id)}
+      <span class="inline-flex min-w-0 items-center gap-1" title={modelLabel(id)}>
+        <span class="h-2 w-2 shrink-0 {modelTone(id)}" aria-hidden="true"></span>
+        <span class="max-w-28 truncate">{modelLabel(id)}</span>
+      </span>
+    {/each}
+  </div>
+</div>

package/dist/plugins/token-stats/ui/labels.ts

@@ -148,3 +148,31 @@ export function buildTimeSeries(rows: readonly ModelUsageRow[], range: TokenRang
   }
   return { buckets, models, maxTokens: Math.max(0, ...buckets.map(bucket => bucket.total)) };
 }
+
+export function formatTokenCount(value: unknown, locale?: string): string {
+  const amount = tokenAmount(value);
+  return amount === undefined ? '—' : new Intl.NumberFormat(locale, { maximumFractionDigits: 0 }).format(amount);
+}
+
+/** Cache tokens are subsets of input; clamping prevents double counting inconsistent partial reports. */
+export function tokenComposition(row: UsageSnapshot): { input: number; output: number; cacheRead: number; cacheWrite: number; total: number } {
+  const usage = usagePresentation(row);
+  const input = usage.input ?? 0;
+  const cacheRead = Math.min(input, tokenAmount(row.cacheReadTokens) ?? 0);
+  const cacheWrite = Math.min(input - cacheRead, tokenAmount(row.cacheWriteTokens) ?? 0);
+  const output = usage.output ?? 0;
+  return { input: input - cacheRead - cacheWrite, output, cacheRead, cacheWrite, total: input + output };
+}
+
+/** Dates and UTC offsets disambiguate midnight and repeated DST clock hours. */
+export function timeAxisLabels(starts: readonly number[], locale?: string, timeZone?: string): string[] {
+  const zone = timeZone ? { timeZone } : {};
+  const days = new Intl.DateTimeFormat(locale, { ...zone, year: 'numeric', month: '2-digit', day: '2-digit' });
+  const dates = new Intl.DateTimeFormat(locale, { ...zone, month: 'numeric', day: 'numeric' });
+  const clock = new Intl.DateTimeFormat(locale, { ...zone, hour: '2-digit', minute: '2-digit', hourCycle: 'h23' });
+  const offsets = new Intl.DateTimeFormat(locale, { ...zone, timeZoneName: 'shortOffset' });
+  const crossesDay = new Set(starts.map(start => days.format(start))).size > 1;
+  const zoneLabels = starts.map(start => offsets.formatToParts(start).find(part => part.type === 'timeZoneName')?.value ?? '');
+  const changesOffset = new Set(zoneLabels).size > 1;
+  return starts.map((start, index) => `${crossesDay ? `${dates.format(start)} ` : ''}${clock.format(start)}${changesOffset ? ` ${zoneLabels[index]}` : ''}`);
+}

package/dist/plugins/token-stats/ui/stats-resource.ts

@@ -0,0 +1,52 @@
+import { writable } from 'svelte/store';
+import type { ModelUsageRow, TokenRange, UsageSnapshot } from './labels';
+
+export type StatsResponse = UsageSnapshot & {
+  groupBy: 'model' | 'time';
+  estimatedCostUsd: number | null;
+  bucketMs?: number;
+  data: ModelUsageRow[];
+};
+export type StatsState = { data: StatsResponse | null; busy: boolean; error: string; refreshedAt: number };
+
+/** One request and timer for all subscribers; the last unsubscribe aborts pending work. */
+export function createStatsResource(
+  load: (signal: AbortSignal) => Promise<StatsResponse>,
+  onStop: () => void = () => {},
+) {
+  let current: StatsState = { data: null, busy: false, error: '', refreshedAt: 0 };
+  let controller: AbortController | undefined;
+  let pending: Promise<void> | undefined;
+  let generation = 0;
+  let active = false;
+  const state = writable<StatsState>(current, () => {
+    active = true;
+    void refresh();
+    const timer = setInterval(() => void refresh(), 60_000);
+    return () => {
+      active = false; generation++; controller?.abort(); pending = undefined;
+      clearInterval(timer); onStop();
+    };
+  });
+  function publish(next: StatsState) { current = next; state.set(next); }
+  function refresh(): Promise<void> {
+    if (!active) return Promise.resolve();
+    if (pending) return pending;
+    const request = new AbortController();
+    controller = request;
+    const version = ++generation;
+    publish({ ...current, busy: true });
+    pending = Promise.resolve().then(() => load(request.signal)).then(data => {
+      if (version === generation) publish({ data, busy: false, error: '', refreshedAt: Date.now() });
+    }).catch(error => {
+      if (version === generation && !request.signal.aborted) {
+        publish({ ...current, busy: false, error: error instanceof Error ? error.message : String(error) });
+      }
+    }).finally(() => { if (version === generation) pending = undefined; });
+    return pending;
+  }
+  return { subscribe: state.subscribe, refresh };
+}
+
+export type StatsResource = ReturnType<typeof createStatsResource>;
+export type StatsRange = TokenRange;

package/dist/plugins/token-stats/ui/stats.ts

@@ -0,0 +1,15 @@
+import { requestPluginControl } from '@bungee/plugin-sdk';
+import { createStatsResource, type StatsRange, type StatsResource, type StatsResponse } from './stats-resource';
+
+const resources = new Map<string, StatsResource>();
+export function getStatsResource(pluginName: string, range: StatsRange, groupBy: 'model' | 'time'): StatsResource {
+  const key = `${pluginName}:${range}:${groupBy}`;
+  let resource = resources.get(key);
+  if (!resource) {
+    resource = createStatsResource(signal => requestPluginControl<StatsResponse>(pluginName,
+      `/stats?range=${encodeURIComponent(range)}&groupBy=${groupBy}`, 'GET', undefined, signal),
+    () => { if (resources.get(key) === resource) resources.delete(key); });
+    resources.set(key, resource);
+  }
+  return resource;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jeffusion/bungee-core",
-  "version": "5.1.6",
+  "version": "5.2.0",
   "description": "Bungee reverse proxy core engine",
   "main": "./dist/main.js",
   "types": "./dist/main.d.ts",
@@ -12,7 +12,7 @@
     "test": "bun test"
   },
   "dependencies": {
-    "@jeffusion/bungee-types": "^5.1.6",
+    "@jeffusion/bungee-types": "^5.2.0",
     "@types/lodash-es": "^4.17.12",
     "acorn": "^8.15.0",
     "canonicalize": "3.0.0",