@jeffusion/bungee-core 6.3.0 → 6.3.1

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

@@ -1,17 +1,15 @@
 <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, endpointLabel, formatTps, rankedEndpoints, rankedModels } 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' | 'models' } = $props();
@@ -20,34 +18,13 @@
   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 maximum = $derived(Math.max(100,
-    (state.data?.endpoints ?? []).reduce((max, row) => Math.max(max, row.tps ?? 0), 0),
-    (state.data?.models ?? []).reduce((max, row) => Math.max(max, row.tps ?? 0), 0)));
   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 ?? NaN));
-  const services = $derived($configStore?.services ?? []);
-  const routeLabels = $derived(new Map($routesStore.map(route => [route.id,
-    'name' in route && typeof route.name === 'string' && route.name.trim() ? route.name.trim() : route.path || '—'])));
-  const labels = $derived.by(() => {
-    const result = new Map<string, { route: string; endpoint: string; description: 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: routeLabels.get(route.id) ?? '—',
-        endpoint: endpointLabel(endpoint.target, endpoint._uid),
-        description: endpoint.description?.trim() ?? '',
-      });
-    }
-    return result;
-  });
+  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, description: '' }))
-    : rankedEndpoints(state.data?.endpoints ?? []).map(row => {
-      const label = labels.get(JSON.stringify([row.routeId, row.endpointId]));
-      return { ...row, key: row.endpointId, label: label?.endpoint ?? endpointLabel(undefined, row.endpointId), description: label?.description ?? '' };
-    }));
+    ? 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));
   $effect(() => {
     const next = getTpsResource(pluginName, range);
     resource = next;
@@ -57,6 +34,7 @@
     const report = onHeaderChange;
     const header = { summary: range, refresh: { label: t('ui.refresh'), busy: state.busy,
       disabled: !resource, run: () => { void resource?.refresh(); } },
+      ...(mode !== 'overview' ? { actions: rankingUnit } : {}),
       ...(mode === 'overview' && state.data?.total.sampleCount ? { footer: sampleFooter } : {}) };
     untrack(() => report?.(header));
   });
@@ -66,6 +44,10 @@
   });
 </script>
 
+{#snippet rankingUnit()}
+  <span class="ranking-unit">TOKENS/S</span>
+{/snippet}
+
 {#snippet sampleFooter()}
   {#if sampleCount}
     <div class="tps-samples" data-testid="tps-total-samples">
@@ -80,13 +62,10 @@
     <span class="nx-metric text-zinc-50">—</span>
   {:else}
     {#if mode === 'overview'}
-      <div class="kpi-metric-row flex w-full min-w-0 items-center justify-between gap-3">
-        <div class="kpi-metric-group flex min-w-0 flex-wrap items-baseline gap-x-2 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="nx-label">TOKENS/S</span>
-        </div>
-        <div class="kpi-icon flex shrink-0 items-center"><Sparkline values={trendValues} tone="orange" /></div>
-      </div>
+      <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>
@@ -96,20 +75,19 @@
       {#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="ranking-unit">TOKENS/S</p>
         <!-- svelte-ignore a11y_no_noninteractive_tabindex (A scrolling region needs keyboard focus so every endpoint remains reachable.) -->
         <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-endpoint-id={mode === 'endpoints' ? endpointIdentity(row.key) : undefined} data-model={mode === 'models' ? row.key : undefined}>
+              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" title={row.description || undefined}>{row.label}</p>
-                <p class="ranking-route">{routeLabels.get(row.routeId) ?? '—'}</p>
+                <p class="ranking-name">{row.label}</p>
+                <p class="ranking-route">{row.routeId}</p>
               </div>
-              <span class="ranking-value nx-display" title={t('ui.samples', { count: row.sampleCount, estimated: row.estimatedSampleCount })}>{formatTps(row.sampleCount ? row.tps : null)}</span>
-              <div class="ranking-track" aria-hidden="true"><span class="ranking-bar" style:width={`${(row.tps ?? 0) / maximum * 100}%`}></span></div>
+              <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>
@@ -122,20 +100,21 @@
 <style>
   .tps-content { display: flex; flex-direction: column; gap: 6px; }
   .tps-content:not(.tps-overview) { height: 100%; min-height: 0; }
-  .tps-overview { justify-content: center; min-height: 64px; }
-  .tps-value { font-size: clamp(28px, 4cqw, 42px); overflow-wrap: anywhere; }
+  .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 { margin: 0; text-align: right; font: 10px var(--font-mono, 'DM Mono', monospace); letter-spacing: .08em; color: var(--nx-text-dim); }
-  .ranking-list { flex: 1; min-height: 0; max-height: 480px; overflow-y: auto; overscroll-behavior: contain; }
-  .ranking-items { list-style: none; margin: 0; padding: 0; }
-  .ranking-row { display: grid; grid-template-columns: 20px minmax(0, 1fr) max-content; align-items: center; gap: 6px 12px; padding: 12px 0; border-bottom: 1px solid var(--nx-edge); }
+  .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; font-size: 20px; font-variant-numeric: tabular-nums; color: var(--nx-text); }
+  .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

@@ -5,23 +5,9 @@ export function formatTps(value: number | null | undefined): string {
     ? 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';
-}
-
-/** Match the dashboard's host labels without exposing URL credentials, paths or queries. */
-export function endpointLabel(target: string | undefined, id: string): string {
-  try {
-    const url = new URL(target ?? '');
-    if (url.protocol === 'http:' || url.protocol === 'https:') return url.host;
-  } catch { /* Deleted or managed endpoints may have no URL. */ }
-  return `endpoint · ${endpointIdentity(id).slice(0, 8)}`;
-}
-
 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));
+    || a.routeId.localeCompare(b.routeId) || a.upstreamHost.localeCompare(b.upstreamHost));
 }
 
 export function rankedModels(rows: readonly TpsModelStats[]): TpsModelStats[] {

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>;
@@ -17,7 +17,7 @@ export function validateStats(data: TpsStatsResponse, range: TpsRange): TpsStats
     || 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' && typeof row.endpointId === 'string')
+    || !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');