@jeffusion/bungee-core 6.2.1 → 6.3.1

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

@@ -31,6 +31,10 @@
       {
         "name": "TpsEndpoints",
         "entry": "ui/TpsEndpoints.svelte"
+      },
+      {
+        "name": "TpsModels",
+        "entry": "ui/TpsModels.svelte"
       }
     ]
   },
@@ -62,6 +66,12 @@
         "title": "widgets.endpoints.title",
         "size": "full",
         "component": "TpsEndpoints"
+      },
+      {
+        "id": "llm-tps-models",
+        "title": "widgets.models.title",
+        "size": "full",
+        "component": "TpsModels"
       }
     ],
     "api": [
@@ -88,28 +98,32 @@
       "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",
+      "widgets.models.title": "Model 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.noData": "No data in this range",
+      "ui.sampleCount": "Samples",
+      "ui.estimatedCount": "Estimated",
       "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."
+      "ui.modelRanking": "Generation speed by route and model, fastest first"
     },
     "zh-CN": {
       "metadata.name": "LLM 生成速度",
       "plugin.description": "统计绑定此插件的路由上的流式输出生成速度。",
       "widgets.overview.title": "LLM 生成速度",
       "widgets.endpoints.title": "端点生成速度",
+      "widgets.models.title": "模型生成速度",
       "ui.refresh": "刷新",
       "ui.loading": "正在加载生成速度",
       "ui.loadFailed": "生成速度加载失败，请刷新重试。",
-      "ui.noData": "所选范围暂无有效流式样本",
-      "ui.weightedHint": "耗时加权平均生成速度：输出 Token 总量除以从首个有效输出到生成结束的总耗时。",
+      "ui.noData": "所选范围暂无数据",
+      "ui.sampleCount": "样本",
+      "ui.estimatedCount": "估算",
       "ui.samples": "有效样本：{count} · 其中估算：{estimated}",
       "ui.ranking": "按路由与端点统计生成速度，由高到低排列",
-      "ui.incomplete": "上报不完整，部分样本可能缺失。"
+      "ui.modelRanking": "按路由与模型统计生成速度，由高到低排列"
     }
   }
 }

package/dist/plugins/llm-tps/ui/TpsModels.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="models" />

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

@@ -1,39 +1,30 @@
 <script lang="ts">
   import { onMount, untrack } from 'svelte';
   import { isLoading } from 'svelte-i18n';
-  import { _, type TimeRange } from '@bungee/plugin-sdk';
+  import { _, formatCompactNumber, 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';
+  import { formatTps, rankedEndpoints, rankedModels } from './presentation';
+  import Sparkline from '$components/dashboard/Sparkline.svelte';
+  import { BKpiMetric } from '$components/industrial';
 
   let { pluginName, selectedRange, onHeaderChange, mode }:
-    { pluginName: string; selectedRange: TimeRange; onHeaderChange?: NativeWidgetHeaderChange; mode: 'overview' | 'endpoints' } = $props();
+    { pluginName: string; selectedRange: TimeRange; onHeaderChange?: NativeWidgetHeaderChange; mode: 'overview' | 'endpoints' | 'models' } = $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 sampleCount = $derived(state.data?.total.sampleCount ?? 0);
+  const estimatedCount = $derived(state.data?.total.estimatedSampleCount ?? 0);
+  const trendValues = $derived((state.data?.history ?? []).map(point => point.tps ?? 0));
+  const rows = $derived(mode === 'models'
+    ? rankedModels(state.data?.models ?? []).map(row => ({ ...row, key: row.model, label: row.model }))
+    : rankedEndpoints(state.data?.endpoints ?? []).map(row => ({ ...row, key: row.upstreamHost, label: row.upstreamHost })));
   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;
@@ -42,7 +33,9 @@
   $effect(() => {
     const report = onHeaderChange;
     const header = { summary: range, refresh: { label: t('ui.refresh'), busy: state.busy,
-      disabled: !resource, run: () => { void resource?.refresh(); } } };
+      disabled: !resource, run: () => { void resource?.refresh(); } },
+      ...(mode !== 'overview' ? { actions: rankingUnit } : {}),
+      ...(mode === 'overview' && state.data?.total.sampleCount ? { footer: sampleFooter } : {}) };
     untrack(() => report?.(header));
   });
   onMount(() => {
@@ -51,65 +44,77 @@
   });
 </script>
 
-<div class="tps-content min-w-0 w-full" data-testid={`tps-${mode}`} aria-busy={state.busy}>
+{#snippet rankingUnit()}
+  <span class="ranking-unit">TOKENS/S</span>
+{/snippet}
+
+{#snippet sampleFooter()}
+  {#if sampleCount}
+    <div class="tps-samples" data-testid="tps-total-samples">
+      <span>{t('ui.sampleCount')} <b class="nx-display">{sampleCount.toLocaleString()}</b></span>
+      {#if estimatedCount > 0}<span>{t('ui.estimatedCount')} <b class="nx-display">{estimatedCount.toLocaleString()}</b></span>{/if}
+    </div>
+  {/if}
+{/snippet}
+
+<div class="tps-content min-w-0 w-full" class:tps-overview={mode === 'overview'} 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>
+      <BKpiMetric value={formatCompactNumber(state.data?.total.sampleCount ? state.data.total.tps : null)}
+        valueTitle={`${formatTps(state.data?.total.sampleCount ? state.data.total.tps : null)} TOKENS/S`} unit="TOKENS/S" valueTestId="tps-total-value">
+        {#snippet icon()}<Sparkline values={trendValues} tone="orange" wide />{/snippet}
+      </BKpiMetric>
     {/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}
+      {#if mode === 'overview' ? !state.data.total.sampleCount : !rows.length}
         <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}
+      {:else if mode !== 'overview'}
         <!-- 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 class="ranking-list" role="region" aria-label={t(mode === 'models' ? 'ui.modelRanking' : 'ui.ranking')} data-testid={mode === 'models' ? 'tps-model-list' : 'tps-endpoint-list'} tabindex="0">
+        <ol class="ranking-items">
+          {#each rows as row, index (JSON.stringify([row.routeId, row.key]))}
+            <li class="ranking-row" data-testid={mode === 'models' ? 'tps-model-row' : 'tps-endpoint-row'} data-route-id={row.routeId}
+              data-upstream-host={mode === 'endpoints' ? row.key : undefined} data-model={mode === 'models' ? row.key : undefined}>
+              <span class="ranking-position nx-display" aria-hidden="true">{index + 1}</span>
+              <div class="ranking-identity">
+                <p class="ranking-name">{row.label}</p>
+                <p class="ranking-route">{row.routeId}</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>
+              <span class="ranking-value nx-display" title={`${formatTps(row.sampleCount ? row.tps : null)} TOKENS/S · ${t('ui.samples', { count: row.sampleCount, estimated: row.estimatedSampleCount })}`}>{formatCompactNumber(row.sampleCount ? row.tps : null)}</span>
+              <div class="ranking-track" aria-hidden="true"><span class="ranking-bar" style:width={`${maximum > 0 ? (row.tps ?? 0) / maximum * 100 : 0}%`}></span></div>
             </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; }
+  .tps-content:not(.tps-overview) { height: 100%; min-height: 0; }
+  .tps-overview { justify-content: center; }
+  .tps-samples { display: flex; flex-wrap: wrap; gap: 6px 18px; font-family: var(--font-mono, 'DM Mono', monospace); font-size: 10px; letter-spacing: .08em; color: var(--nx-text-mute); }
+  .tps-samples b { margin-left: 4px; font-weight: 400; font-variant-numeric: tabular-nums; color: var(--nx-text); }
+  .ranking-unit { white-space: nowrap; font: 10px var(--font-mono, 'DM Mono', monospace); letter-spacing: .08em; color: var(--nx-text-dim); }
+  .ranking-list { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; }
+  .ranking-list::-webkit-scrollbar { display: none; }
+  .ranking-items { display: grid; grid-template-columns: 20px minmax(0, 1fr) max-content; column-gap: 8px; list-style: none; margin: 0; padding: 0; }
+  .ranking-row { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; gap: 4px 8px; padding: 6px 0; border-bottom: 1px solid var(--nx-edge); }
+  .ranking-row:first-child { padding-top: 0; }
+  .ranking-row:last-child { border-bottom: 0; }
+  .ranking-position { grid-column: 1; grid-row: 1 / 3; color: var(--nx-text-dim); font-size: 12px; font-variant-numeric: tabular-nums; }
+  .ranking-identity { min-width: 0; }
+  .ranking-name { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--nx-text); overflow-wrap: anywhere; }
+  .ranking-route { margin: 3px 0 0; font: 12px/1.4 var(--font-mono, 'DM Mono', monospace); color: var(--nx-text-dim); overflow-wrap: anywhere; }
+  .ranking-value { grid-column: 3; grid-row: 1 / 3; text-align: right; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--nx-text); }
+  .ranking-track { grid-column: 2; height: 6px; }
+  .ranking-bar { display: block; height: 100%; background: var(--nx-accent); }
 </style>

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

@@ -1,16 +1,16 @@
-import type { TpsEndpointStats } from '../contract';
+import type { TpsEndpointStats, TpsModelStats } 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.upstreamHost.localeCompare(b.upstreamHost));
 }
 
-export function rankedEndpoints(rows: readonly TpsEndpointStats[]): TpsEndpointStats[] {
+export function rankedModels(rows: readonly TpsModelStats[]): TpsModelStats[] {
   return [...rows].sort((a, b) => (b.tps ?? -1) - (a.tps ?? -1)
-    || a.routeId.localeCompare(b.routeId) || a.endpointId.localeCompare(b.endpointId));
+    || a.routeId.localeCompare(b.routeId) || a.model.localeCompare(b.model));
 }

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

@@ -1,5 +1,5 @@
 import { writable } from 'svelte/store';
-import type { TpsAggregate, TpsRange, TpsStatsResponse } from '../contract';
+import { isUpstreamHost, type TpsAggregate, type TpsRange, type TpsStatsResponse } from '../contract';
 
 export type TpsState = { data: TpsStatsResponse | null; busy: boolean; error: boolean };
 type Load = (plugin: string, range: TpsRange, signal: AbortSignal) => Promise<TpsStatsResponse>;
@@ -14,8 +14,12 @@ function validAggregate(value: TpsAggregate): boolean {
 
 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')) {
+    || typeof data.reportingIncomplete !== 'boolean' || !Array.isArray(data.endpoints) || !Array.isArray(data.models) || !Array.isArray(data.history)
+    || !data.history.every((row, index) => validAggregate(row) && Number.isSafeInteger(row.bucketStartMs) && row.bucketStartMs >= 0
+      && (index === 0 || row.bucketStartMs > data.history[index - 1]!.bucketStartMs))
+    || !data.endpoints.every(row => validAggregate(row) && typeof row.routeId === 'string' && !!row.routeId.trim() && isUpstreamHost(row.upstreamHost))
+    || !data.models.every(row => validAggregate(row) && typeof row.routeId === 'string' && !!row.routeId.trim()
+      && typeof row.model === 'string' && !!row.model.trim())) {
     throw new Error('invalid_tps_stats');
   }
   return data;