@jeffusion/bungee-core 6.1.1 → 6.2.0

package/dist/plugins/llm-tps/manifest.json

@@ -0,0 +1,115 @@
+{
+  "name": "llm-tps",
+  "version": "1.0.0",
+  "schemaVersion": 3,
+  "artifactKind": "runtime-plugin",
+  "main": "index.js",
+  "capabilities": [
+    "hooks",
+    "api",
+    "nativeWidgetsStatic",
+    "dynamicRuntimeLoad",
+    "controlPlane"
+  ],
+  "uiExtensionMode": "native-static",
+  "engines": {
+    "bungee": "^6.0.0"
+  },
+  "runtimeScope": "scoped",
+  "control": {
+    "entry": "control.js",
+    "rpc": []
+  },
+  "builtin": true,
+  "author": "Bungee Team",
+  "ui": {
+    "components": [
+      {
+        "name": "TpsOverview",
+        "entry": "ui/TpsOverview.svelte"
+      },
+      {
+        "name": "TpsEndpoints",
+        "entry": "ui/TpsEndpoints.svelte"
+      }
+    ]
+  },
+  "dependencies": {
+    "token-metering": "^1.0.0"
+  },
+  "services": {
+    "provides": [],
+    "consumes": [
+      {
+        "id": "token-metering.v1",
+        "version": 1,
+        "process": "worker",
+        "plugin": "token-metering"
+      }
+    ]
+  },
+  "contributes": {
+    "nativeWidgets": [
+      {
+        "id": "llm-tps-overview",
+        "title": "widgets.overview.title",
+        "size": "medium",
+        "component": "TpsOverview",
+        "presentation": "kpi"
+      },
+      {
+        "id": "llm-tps-endpoints",
+        "title": "widgets.endpoints.title",
+        "size": "full",
+        "component": "TpsEndpoints"
+      }
+    ],
+    "api": [
+      {
+        "path": "/stats",
+        "methods": [
+          "GET"
+        ],
+        "handler": "getStats",
+        "execution": "control",
+        "capability": "logs.read"
+      }
+    ]
+  },
+  "metadata": {
+    "name": "metadata.name",
+    "description": "plugin.description",
+    "icon": "speed"
+  },
+  "configSchema": [],
+  "translations": {
+    "en": {
+      "metadata.name": "LLM Generation Speed",
+      "plugin.description": "Measure streamed output generation speed for routes with this plugin bound.",
+      "widgets.overview.title": "LLM Generation Speed",
+      "widgets.endpoints.title": "Endpoint Generation Speed",
+      "ui.refresh": "Refresh",
+      "ui.loading": "Loading generation speed",
+      "ui.loadFailed": "Unable to load generation speed. Refresh to retry.",
+      "ui.noData": "No valid streaming samples in this range",
+      "ui.weightedHint": "Time-weighted generation speed: output tokens divided by total time from first valid output to generation end.",
+      "ui.samples": "Valid samples: {count} · estimated: {estimated}",
+      "ui.ranking": "Generation speed by route and endpoint, fastest first",
+      "ui.incomplete": "Reporting is incomplete. Some samples may be missing."
+    },
+    "zh-CN": {
+      "metadata.name": "LLM 生成速度",
+      "plugin.description": "统计绑定此插件的路由上的流式输出生成速度。",
+      "widgets.overview.title": "LLM 生成速度",
+      "widgets.endpoints.title": "端点生成速度",
+      "ui.refresh": "刷新",
+      "ui.loading": "正在加载生成速度",
+      "ui.loadFailed": "生成速度加载失败，请刷新重试。",
+      "ui.noData": "所选范围暂无有效流式样本",
+      "ui.weightedHint": "耗时加权平均生成速度：输出 Token 总量除以从首个有效输出到生成结束的总耗时。",
+      "ui.samples": "有效样本：{count} · 其中估算：{estimated}",
+      "ui.ranking": "按路由与端点统计生成速度，由高到低排列",
+      "ui.incomplete": "上报不完整，部分样本可能缺失。"
+    }
+  }
+}

package/dist/plugins/llm-tps/ui/TpsEndpoints.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import type { TimeRange } from '@bungee/plugin-sdk';
+  import type { NativeWidgetHeaderChange } from '$components/native-widgets/widget-header';
+  import TpsWidget from './TpsWidget.svelte';
+  let { pluginName = 'llm-tps', selectedRange = '24h', onHeaderChange }:
+    { pluginName?: string; selectedRange?: TimeRange; onHeaderChange?: NativeWidgetHeaderChange } = $props();
+</script>
+
+<TpsWidget {pluginName} {selectedRange} {onHeaderChange} mode="endpoints" />

package/dist/plugins/llm-tps/ui/TpsOverview.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import type { TimeRange } from '@bungee/plugin-sdk';
+  import type { NativeWidgetHeaderChange } from '$components/native-widgets/widget-header';
+  import TpsWidget from './TpsWidget.svelte';
+  let { pluginName = 'llm-tps', selectedRange = '24h', onHeaderChange }:
+    { pluginName?: string; selectedRange?: TimeRange; onHeaderChange?: NativeWidgetHeaderChange } = $props();
+</script>
+
+<TpsWidget {pluginName} {selectedRange} {onHeaderChange} mode="overview" />

package/dist/plugins/llm-tps/ui/TpsWidget.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+  import { onMount, untrack } from 'svelte';
+  import { isLoading } from 'svelte-i18n';
+  import { _, type TimeRange } from '@bungee/plugin-sdk';
+  import { getPluginText } from '$utils/plugin-i18n';
+  import { configStore, routesStore } from '$stores/config';
+  import { resolveRouteEndpoints } from '$api/routes';
+  import { toEditorRoute, toEditorService } from '$api/config-adapters';
+  import type { NativeWidgetHeaderChange } from '$components/native-widgets/widget-header';
+  import type { TpsRange } from '../contract';
+  import type { TpsResource, TpsState } from './stats-resource';
+  import { getTpsResource } from './stats';
+  import { endpointIdentity, formatTps, rankedEndpoints } from './presentation';
+
+  let { pluginName, selectedRange, onHeaderChange, mode }:
+    { pluginName: string; selectedRange: TimeRange; onHeaderChange?: NativeWidgetHeaderChange; mode: 'overview' | 'endpoints' } = $props();
+  let state: TpsState = $state({ data: null, busy: true, error: false });
+  let resource: TpsResource | undefined = $state();
+  const range: TpsRange = $derived(selectedRange === '1h' || selectedRange === '12h' ? selectedRange : '24h');
+  const t = (key: string, values?: Record<string, string | number>) => $isLoading ? '' : getPluginText(key, pluginName,
+    (id, options) => $_(id, { ...options, values }));
+  const rows = $derived(rankedEndpoints(state.data?.endpoints ?? []));
+  const maximum = $derived(rows.reduce((max, row) => Math.max(max, row.tps ?? 0), 0));
+  const services = $derived($configStore?.services ?? []);
+  const labels = $derived.by(() => {
+    const result = new Map<string, { route: string; endpoint: string }>();
+    const editorServices = services.map(toEditorService);
+    for (const route of $routesStore) {
+      const endpoints = resolveRouteEndpoints(toEditorRoute(route, services), editorServices);
+      for (const endpoint of endpoints) if (endpoint._uid) result.set(JSON.stringify([route.id, endpoint._uid]), {
+        route: 'name' in route && typeof route.name === 'string' ? route.name.trim() || route.path || route.id : route.path || route.id,
+        endpoint: endpoint.description?.trim() || endpointIdentity(endpoint._uid),
+      });
+    }
+    return result;
+  });
+  $effect(() => {
+    const next = getTpsResource(pluginName, range);
+    resource = next;
+    return next.subscribe(value => { state = value; });
+  });
+  $effect(() => {
+    const report = onHeaderChange;
+    const header = { summary: range, refresh: { label: t('ui.refresh'), busy: state.busy,
+      disabled: !resource, run: () => { void resource?.refresh(); } } };
+    untrack(() => report?.(header));
+  });
+  onMount(() => {
+    const report = onHeaderChange;
+    return () => report?.(null);
+  });
+</script>
+
+<div class="tps-content min-w-0 w-full" data-testid={`tps-${mode}`} aria-busy={state.busy}>
+  {#if $isLoading}
+    <span class="nx-metric text-zinc-50">—</span>
+  {:else}
+    {#if mode === 'overview'}
+      <div class="flex min-w-0 flex-wrap items-baseline gap-x-3 gap-y-1.5">
+        <span class="nx-metric tps-value text-zinc-50" data-testid="tps-total-value">{formatTps(state.data?.total.sampleCount ? state.data.total.tps : null)}</span>
+        <span class="font-mono text-sm text-zinc-400">tokens/s</span>
+      </div>
+      <p class="mt-3 text-sm text-zinc-400">{t('ui.weightedHint')}</p>
+    {/if}
+    {#if state.error}
+      <p role="alert" class="text-sm text-red-300" data-testid="tps-error">{t('ui.loadFailed')}</p>
+    {:else if state.busy && !state.data}
+      <p role="status" class="text-sm text-zinc-400">{t('ui.loading')}</p>
+    {:else if state.data}
+      {#if !state.data.total.sampleCount}
+        <p class="text-sm text-zinc-400" data-testid="tps-empty">{t('ui.noData')}</p>
+      {:else if mode === 'overview'}
+        <p class="mt-3 font-mono text-sm text-zinc-300" data-testid="tps-total-samples">{t('ui.samples', {
+          count: state.data.total.sampleCount, estimated: state.data.total.estimatedSampleCount })}</p>
+      {:else}
+        <!-- svelte-ignore a11y_no_noninteractive_tabindex (A scrolling region needs keyboard focus so every endpoint remains reachable.) -->
+        <div class="endpoint-list" role="region" aria-label={t('ui.ranking')} data-testid="tps-endpoint-list" tabindex="0">
+        <ol class="endpoint-items">
+          {#each rows as row (JSON.stringify([row.routeId, row.endpointId]))}
+            {@const label = labels.get(JSON.stringify([row.routeId, row.endpointId]))}
+            <li class="endpoint-row" data-testid="tps-endpoint-row" data-route-id={row.routeId} data-endpoint-id={endpointIdentity(row.endpointId)}>
+              <div class="endpoint-heading">
+                <div class="min-w-0">
+                  <p class="endpoint-label text-sm text-zinc-200">{label?.endpoint ?? endpointIdentity(row.endpointId)}</p>
+                  <p class="endpoint-label mt-1 text-xs text-zinc-400">{label?.route ?? row.routeId}</p>
+                </div>
+                <p class="font-mono text-sm text-zinc-50">{formatTps(row.sampleCount ? row.tps : null)} <span class="text-xs text-zinc-400">tokens/s</span></p>
+              </div>
+              <div class="mt-2 h-1.5 bg-carbon-700" aria-hidden="true"><div class="h-full bg-nexus-500" style:width={`${maximum && row.tps !== null ? Math.max(0, row.tps / maximum * 100) : 0}%`}></div></div>
+              <p class="mt-2 font-mono text-xs text-zinc-400">{t('ui.samples', { count: row.sampleCount, estimated: row.estimatedSampleCount })}</p>
+            </li>
+          {/each}
+        </ol>
+        </div>
+      {/if}
+      {#if state.data.reportingIncomplete}
+        <p class="mt-3 text-sm text-amber-400" role="status" data-testid="tps-incomplete">{t('ui.incomplete')}</p>
+      {/if}
+    {/if}
+  {/if}
+</div>
+
+<style>
+  .tps-content { display: flex; flex-direction: column; gap: 6px; }
+  .tps-value { font-size: clamp(28px, 4cqw, 42px); overflow-wrap: anywhere; }
+  .endpoint-list { max-height: 360px; overflow-y: auto; overscroll-behavior: contain; }
+  .endpoint-items { list-style: none; margin: 0; padding: 0; }
+  .endpoint-row { padding: 12px 0; border-bottom: 1px solid var(--nx-edge); }
+  .endpoint-row:first-child { padding-top: 0; }
+  .endpoint-row:last-child { border-bottom: 0; }
+  .endpoint-heading { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: 6px 18px; }
+  .endpoint-heading > div { flex: 1 1 180px; }
+  .endpoint-heading > p { flex: 0 1 auto; overflow-wrap: anywhere; }
+  .endpoint-label { overflow-wrap: anywhere; }
+</style>

package/dist/plugins/llm-tps/ui/presentation.ts

@@ -0,0 +1,16 @@
+import type { TpsEndpointStats } from '../contract';
+
+export function formatTps(value: number | null | undefined): string {
+  return typeof value === 'number' && Number.isFinite(value) && value >= 0
+    ? new Intl.NumberFormat(undefined, { maximumFractionDigits: 2 }).format(value) : '—';
+}
+
+/** Host-issued opaque identities are safe fallbacks; URL-shaped values are never labels. */
+export function endpointIdentity(id: string): string {
+  return /^[a-zA-Z0-9_-]+$/.test(id) ? id : 'endpoint';
+}
+
+export function rankedEndpoints(rows: readonly TpsEndpointStats[]): TpsEndpointStats[] {
+  return [...rows].sort((a, b) => (b.tps ?? -1) - (a.tps ?? -1)
+    || a.routeId.localeCompare(b.routeId) || a.endpointId.localeCompare(b.endpointId));
+}

package/dist/plugins/llm-tps/ui/stats-resource.ts

@@ -0,0 +1,77 @@
+import { writable } from 'svelte/store';
+import type { TpsAggregate, TpsRange, TpsStatsResponse } from '../contract';
+
+export type TpsState = { data: TpsStatsResponse | null; busy: boolean; error: boolean };
+type Load = (plugin: string, range: TpsRange, signal: AbortSignal) => Promise<TpsStatsResponse>;
+type Poll = (refresh: () => void) => () => void;
+
+function validAggregate(value: TpsAggregate): boolean {
+  return !!value && (value.tps === null || typeof value.tps === 'number' && Number.isFinite(value.tps) && value.tps >= 0)
+    && [value.outputTokens, value.generationDurationMs].every(n => typeof n === 'number' && Number.isFinite(n) && n >= 0)
+    && [value.sampleCount, value.estimatedSampleCount].every(n => Number.isSafeInteger(n) && n >= 0)
+    && value.estimatedSampleCount <= value.sampleCount;
+}
+
+export function validateStats(data: TpsStatsResponse, range: TpsRange): TpsStatsResponse {
+  if (!data || data.range !== range || !Number.isFinite(data.asOfMs) || !validAggregate(data.total)
+    || typeof data.reportingIncomplete !== 'boolean' || !Array.isArray(data.endpoints)
+    || !data.endpoints.every(row => validAggregate(row) && typeof row.routeId === 'string' && typeof row.endpointId === 'string')) {
+    throw new Error('invalid_tps_stats');
+  }
+  return data;
+}
+
+/** One active request and polling timer per plugin/range; no snapshots survive the last subscriber. */
+export function createTpsResources(load: Load, poll: Poll = refresh => {
+  const timer = setInterval(refresh, 60_000);
+  return () => clearInterval(timer);
+}) {
+  const resources = new Map<string, TpsResource>();
+  function get(plugin: string, range: TpsRange): TpsResource {
+    const key = JSON.stringify([plugin, range]);
+    const cached = resources.get(key);
+    if (cached) return cached;
+    let active = false;
+    let generation = 0;
+    let controller: AbortController | undefined;
+    let pending: Promise<void> | undefined;
+    const state = writable<TpsState>({ data: null, busy: false, error: false }, () => {
+      active = true;
+      state.set({ data: null, busy: true, error: false });
+      void refresh();
+      const stopPoll = poll(() => { void refresh(); });
+      return () => {
+        active = false;
+        generation++;
+        controller?.abort();
+        pending = undefined;
+        stopPoll();
+        if (resources.get(key) === resource) resources.delete(key);
+      };
+    });
+    function refresh(): Promise<void> {
+      if (!active) return Promise.resolve();
+      if (pending) return pending;
+      const version = ++generation;
+      const request = new AbortController();
+      controller = request;
+      state.update(current => ({ ...current, busy: true }));
+      pending = Promise.resolve().then(() => load(plugin, range, request.signal)).then(data => {
+        const valid = validateStats(data, range);
+        if (active && version === generation) state.set({ data: valid, busy: false, error: false });
+      }).catch(() => {
+        if (active && version === generation && !request.signal.aborted) state.set({ data: null, busy: false, error: true });
+      }).finally(() => { if (version === generation) pending = undefined; });
+      return pending;
+    }
+    const resource: TpsResource = { subscribe: state.subscribe, refresh };
+    resources.set(key, resource);
+    return resource;
+  }
+  return { get };
+}
+
+export type TpsResource = {
+  subscribe: ReturnType<typeof writable<TpsState>>['subscribe'];
+  refresh: () => Promise<void>;
+};

package/dist/plugins/llm-tps/ui/stats.ts

@@ -0,0 +1,7 @@
+import { requestPluginControl } from '@bungee/plugin-sdk';
+import type { TpsStatsResponse } from '../contract';
+import { createTpsResources } from './stats-resource';
+
+const resources = createTpsResources((plugin, range, signal) =>
+  requestPluginControl<TpsStatsResponse>(plugin, `/stats?range=${range}`, 'GET', undefined, signal));
+export const getTpsResource = resources.get;