@jeffusion/bungee-core 5.15.1 → 5.16.0

package/dist/plugins/key-access/ui/KeyPolicy.svelte

@@ -2,7 +2,6 @@
   import { onMount } from 'svelte';
   import { isLoading, _, locale } from 'svelte-i18n';
   import { getPluginText } from '$utils/plugin-i18n';
-  import * as Tooltip from '$components/ui/tooltip';
   import { requestPluginControl, ApiError } from '$api/client';
   import { getConfigSnapshot } from '$api/config';
   import { PluginsAPI } from '$api/plugins';
@@ -14,11 +13,12 @@
   let tab = $state('keys'), keys = $state<ApiKey[]>([]), routes = $state<{id:string;path:string}[]>([]), protectedIds = $state<string[]>([]);
   let loading = $state(true), busy = $state(false), error = $state<Message | null>(null), status = $state<Message | null>(null), ready = $state(false), inactive = $state(false);
   let createOpen = $state(false), policyOpen = $state(false), secretOpen = $state(false), deleteOpen = $state(false);
-  let target = $state<ApiKey | null>(null), name = $state(''), expires = $state(''), allRoutes = $state(false), allowed = $state<string[]>([]), models = $state(''), review = $state(false);
+  let target = $state<ApiKey | null>(null), name = $state(''), expires = $state(''), allRoutes = $state(false), allowed = $state<string[]>([]), models = $state('');
   let secret = $state(''), copied = $state(false), secretStatus = $state<Message | null>(null), policyLoading = $state(false), policyReady = $state(false);
   let routeConfigOpen = $state(false), selectedRoute = $state<{id:string;path:string}|null>(null);
-  let pendingRouteKey = $state<ApiKey|null>(null);
   let routeKeyBindings = $state<Record<string,{id:string;name:string}[]>>({});
+  let unrestrictedKeyIds = $state<string[]>([]);
+  const isKeyApplied = (routeId:string, keyId:string) => unrestrictedKeyIds.includes(keyId) || !!routeKeyBindings[routeId]?.some(key => key.id === keyId);
   type Message = { key: string; values?: Record<string, string | number | string[] | Message>; append?: Message };
   const message = (key: string, values?: Message['values']): Message => ({ key, values });
   const t = (key: string, values?: Record<string, string | number>) => $isLoading ? '' : getPluginText(key, pluginName, (id, options) => $_(id, { ...options, values }));
@@ -32,11 +32,9 @@
     constructor(content: Message) { super(content.key); this.content = content; }
   }
   const keyStatusText = (key: ApiKey) => t(keyStatus(key) === '有效' ? 'ui.keyActive' : keyStatus(key) === '已过期' ? 'ui.keyExpired' : 'ui.keyRevoked');
-  function publicBlockedReason(id:string) { const bindings = routeKeyBindings[id] ?? []; return protectedIds.includes(id) && bindings.length ? message('ui.publicBlockedReason', { keys: bindings.map(key => key.name) }) : null; }
   function errorMessage(e: unknown): Message {
     if (e instanceof LocalizedError) return e.content;
     if (e instanceof ApiError && (e.body as any)?.error === 'key_name_exists') return message('ui.keyNameExists');
-    if (e instanceof ApiError && (e.body as any)?.error === 'route_has_api_keys') return message('ui.routeHasKeys');
     if (e instanceof ApiError && (e.body as any)?.persisted) return message('ui.persistedPending');
     if (e instanceof ApiError) {
       const code = (e.body as any)?.error;
@@ -51,7 +49,6 @@
     return message('ui.operationFailed');
   }
   const guard = latestRequest();
-  let selectedPublic = $derived(routes.filter(route => (allRoutes || allowed.includes(route.id)) && !protectedIds.includes(route.id)));
   const control = <T,>(path:string,method:'GET'|'PUT',body?:unknown) => requestPluginControl<T>(pluginName,path,method,body);
   function failure(e:unknown) { if (e instanceof ApiError && (e.body as any)?.ready === false) ready = false; error = errorMessage(e); }
   async function refresh() {
@@ -61,15 +58,15 @@
       keys = credentials.keys; routes = config.config.logical_configuration.routes.map(route => ({id:route.id,path:route.path}));
       inactive = !plugins.find(plugin => plugin.name === pluginName)?.enabled;
       if (inactive) { ready = false; status = message('ui.inactive'); return; }
-      const protection = await control<{protectedRouteIds:string[];routeKeyBindings:Record<string,{id:string;name:string}[]>;ready?:boolean}>('/routes','GET');
-      protectedIds = protection.protectedRouteIds; routeKeyBindings = protection.routeKeyBindings; ready = protection.ready !== false;
+      const protection = await control<{protectedRouteIds:string[];routeKeyBindings:Record<string,{id:string;name:string}[]>;unrestrictedKeyIds?:string[];ready?:boolean}>('/routes','GET');
+      protectedIds = protection.protectedRouteIds; routeKeyBindings = protection.routeKeyBindings; unrestrictedKeyIds = protection.unrestrictedKeyIds ?? []; ready = protection.ready !== false;
       status = ready ? null : message('ui.configurationPending');
     } catch(e) { ready = false; failure(e); } finally { loading = false; }
   }
   onMount(() => { void refresh(); return () => guard.invalidate(); });
-  function newKey(routeId?:string) { if (secretOpen) return; name = ''; expires = ''; allRoutes = false; allowed = routeId ? [routeId] : []; models = ''; review = false; error = null; createOpen = true; }
+  function newKey(routeId?:string) { if (secretOpen) return; name = ''; expires = ''; allRoutes = false; allowed = routeId ? [routeId] : []; models = ''; error = null; createOpen = true; }
   async function edit(key:ApiKey) {
-    target = key; name = key.name; expires = localDate(key.expiresAt); copied = false; policyOpen = true; policyLoading = true; policyReady = false; error = null; review = false;
+    target = key; name = key.name; expires = localDate(key.expiresAt); copied = false; policyOpen = true; policyLoading = true; policyReady = false; error = null;
     const generation = guard.begin();
     try {
       const result = await control<{value:{routes:string[]|null;models:string[]|null}|null}>(`/keys/${encodeURIComponent(key.id)}`,'GET');
@@ -77,18 +74,14 @@
       allRoutes = result.value?.routes == null; allowed = result.value?.routes ?? []; models = result.value?.models?.join('\n') ?? ''; policyReady = true;
     } catch(e) { if (guard.current(generation)) failure(e); } finally { if (guard.current(generation)) policyLoading = false; }
   }
-  async function applyRouteKey(key:ApiKey, confirmed=false) {
+  async function applyRouteKey(key:ApiKey) {
     if (busy || !selectedRoute) return;
-    if (!protectedIds.includes(selectedRoute.id) && !confirmed) { pendingRouteKey = key; return; }
     busy = true; error = null;
     try {
-      const result = await control<{protectedRouteIds:string[];routeKeyBindings:Record<string,{id:string;name:string}[]>;ready?:boolean;published?:boolean}>('/route-key','PUT',{routeId:selectedRoute.id,keyId:key.id,protect:confirmed});
-      protectedIds = result.protectedRouteIds; routeKeyBindings = result.routeKeyBindings; ready = result.ready !== false;
-      status = message(publicationMessage(result)); routeConfigOpen = false; pendingRouteKey = null;
-    } catch(e) {
-      if (e instanceof ApiError && (e.body as any)?.error === 'route_protection_confirmation_required') pendingRouteKey = key;
-      else failure(e);
-    } finally { busy = false; }
+      const result = await control<{protectedRouteIds:string[];routeKeyBindings:Record<string,{id:string;name:string}[]>;unrestrictedKeyIds?:string[];ready?:boolean;published?:boolean}>('/route-key','PUT',{routeId:selectedRoute.id,keyId:key.id});
+      protectedIds = result.protectedRouteIds; routeKeyBindings = result.routeKeyBindings; unrestrictedKeyIds = result.unrestrictedKeyIds ?? []; ready = result.ready !== false;
+      status = message(publicationMessage(result)); routeConfigOpen = false;
+    } catch(e) { failure(e); } finally { busy = false; }
   }
   function toggleRoute(id:string,checked:boolean) { allowed = checked ? [...allowed,id] : allowed.filter(value => value !== id); }
   function localDate(value:number|null) { return value === null ? '' : new Date(value - new Date(value).getTimezoneOffset()*60000).toISOString().slice(0,16); }
@@ -110,22 +103,13 @@
     const result = includeDetails ? await keysApi.update(id,{name,expiresAt:expiration(),...scope}) : await control<{ready?:boolean;published?:boolean}>(`/keys/${encodeURIComponent(id)}`,'PUT',scope);
     if ('key' in result) { const key = result.key as ApiKey; keys = keys.map(item => item.id === id ? key : item); target = key; }
     if (result.ready === false || result.published === false) throw new LocalizedError(message('ui.keyRoutesPending'));
-    if (selectedPublic.length) {
-      try {
-        const result = await control<{protectedRouteIds:string[];ready?:boolean;published?:boolean}>('/routes','PUT',{protectedRouteIds:[...new Set([...protectedIds,...selectedPublic.map(route => route.id)])]});
-        protectedIds = result.protectedRouteIds;
-        if (result.ready === false || result.published === false) throw new LocalizedError(message('ui.protectionPending'));
-      } catch (e) { throw new LocalizedError(message('ui.keySavedProtectionIncomplete', { reason: errorMessage(e) })); }
-    }
-    const protection = await control<{protectedRouteIds:string[];routeKeyBindings:Record<string,{id:string;name:string}[]>}>('/routes','GET');
-    protectedIds = protection.protectedRouteIds; routeKeyBindings = protection.routeKeyBindings;
+    const protection = await control<{protectedRouteIds:string[];routeKeyBindings:Record<string,{id:string;name:string}[]>;unrestrictedKeyIds?:string[]}>('/routes','GET');
+    protectedIds = protection.protectedRouteIds; routeKeyBindings = protection.routeKeyBindings; unrestrictedKeyIds = protection.unrestrictedKeyIds ?? [];
   }
   async function create(event:SubmitEvent) {
     event.preventDefault(); if (busy) return;
     const expiresAt = expires ? new Date(expires).getTime() : null;
     if (expiresAt !== null && (!Number.isFinite(expiresAt) || expiresAt <= Date.now())) { error = message('ui.expirationFuture'); return; }
-    if (selectedPublic.length && !review) { review = true; error = null; return; }
-    const protectionCount = selectedPublic.length;
     busy = true; error = null; status = null; secretStatus = null;
     let stage = 'ui.stageCreate';
     try {
@@ -138,7 +122,7 @@
       if (created.ready === false || created.published === false) { ready = false; secretStatus = message('ui.createdPending'); return; }
       stage = 'ui.stageSavePolicy';
       await savePolicy(created.key.id);
-      secretStatus = message(protectionCount ? 'ui.createdProtected' : 'ui.createdPublic');
+      secretStatus = message('ui.createdPublic');
       status = secretStatus;
     } catch(e) { failure(e); if (secret) secretStatus = message('ui.createdIncomplete', { stage: message(stage), reason: error ?? message('ui.operationFailed') }); }
     finally { busy = false; }
@@ -146,16 +130,14 @@
   async function update(event:SubmitEvent) {
     event.preventDefault(); if (busy || policyLoading || !policyReady || !target) return;
     try { expiration(); } catch(e) { failure(e); return; }
-    if (selectedPublic.length && !review) { review = true; error = null; return; }
     busy = true; error = null; status = null;
     try { await savePolicy(target.id,true); policyOpen = false; status = message('ui.policyPublished'); }
     catch(e) { failure(e); } finally { busy = false; }
   }
   async function protect(id:string,checked:boolean) {
     if (busy) return;
-    if (!checked && publicBlockedReason(id)) { error = publicBlockedReason(id); return; }
     busy = true; error = null; status = null;
-    try { const result = await control<{protectedRouteIds:string[];routeKeyBindings:Record<string,{id:string;name:string}[]>;ready?:boolean;published?:boolean}>('/routes','PUT',{protectedRouteIds:checked ? [...new Set([...protectedIds,id])] : protectedIds.filter(value => value !== id)}); protectedIds = result.protectedRouteIds; routeKeyBindings = result.routeKeyBindings; status = message(publicationMessage(result)); ready = result.ready !== false; }
+    try { const result = await control<{protectedRouteIds:string[];routeKeyBindings:Record<string,{id:string;name:string}[]>;unrestrictedKeyIds?:string[];ready?:boolean;published?:boolean}>('/routes','PUT',{protectedRouteIds:checked ? [...new Set([...protectedIds,id])] : protectedIds.filter(value => value !== id)}); protectedIds = result.protectedRouteIds; routeKeyBindings = result.routeKeyBindings; unrestrictedKeyIds = result.unrestrictedKeyIds ?? []; status = message(publicationMessage(result)); ready = result.ready !== false; }
     catch(e) { await refresh(); failure(e); } finally { busy = false; }
   }
   async function removeKey() {
@@ -178,26 +160,8 @@
   {:else}
     <PanelCard title={t('ui.routeAccess')} tag={t('ui.routeCount', { count: routes.length })}>
       <p class="text-sm text-zinc-400 mb-4">{t('ui.routeHelp')}</p>
-      {#if loading}<LoadingIndicator label={t('ui.loadingRoutes')} height="sm" />{:else if !routes.length}<p class="text-sm text-zinc-400">{t('ui.noRoutes')}</p>{:else}<div class="overflow-x-auto"><table class="w-full text-left text-sm"><thead class="text-zinc-400"><tr><th class="px-2 py-3">{t('ui.route')}</th><th class="px-2 py-3">{t('ui.public')}</th><th class="px-2 py-3">{t('ui.actions')}</th></tr></thead><tbody>{#each routes as route (route.id)}<tr class="border-t border-carbon-600"><td class="px-2 py-3 font-mono">{route.path}</td><td class="px-2 py-3">{#if publicBlockedReason(route.id)}
-        <Tooltip.Root openDelay={200} closeOnEscape>
-          <Tooltip.Trigger asChild let:builder>
-            <!-- Disabled controls cannot receive focus; the group exposes their explanation to keyboard users. -->
-            <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-            <span {...builder} use:builder.action tabindex="0" role="group" aria-label={t('ui.cannotMakePublic', { path: route.path })} class="inline-flex outline-none focus-visible:ring-2 focus-visible:ring-nexus-500">
-              <BSwitch checked={false} description={t('ui.isRoutePublic', { path: route.path })} disabled />
-            </span>
-          </Tooltip.Trigger>
-          <Tooltip.Content class="max-w-xs break-words" side="top">
-            <div class="space-y-2">
-              <p class="font-semibold">{t('ui.publicBlockedTitle')}</p>
-              <ul class="list-disc pl-4 space-y-1">{#each routeKeyBindings[route.id] ?? [] as key (key.id)}<li>{key.name}</li>{/each}</ul>
-              <p class="text-carbon-300">{t('ui.publicBlockedHelp')}</p>
-            </div>
-          </Tooltip.Content>
-        </Tooltip.Root>
-      {:else}
-        <BSwitch checked={!protectedIds.includes(route.id)} description={t('ui.isRoutePublic', { path: route.path })} disabled={busy || loading || !ready} onchange={isPublic => protect(route.id,!isPublic)} />
-      {/if}</td><td class="px-2 py-3"><button class="nx-btn-ghost nx-btn-sm" disabled={busy || loading || !ready || secretOpen} onclick={() => { selectedRoute = route; pendingRouteKey = null; error = null; routeConfigOpen = true; }}>{t('ui.configureKey')}</button></td></tr>{/each}</tbody></table></div>{/if}
+      {#if loading}<LoadingIndicator label={t('ui.loadingRoutes')} height="sm" />{:else if !routes.length}<p class="text-sm text-zinc-400">{t('ui.noRoutes')}</p>{:else}<div class="overflow-x-auto"><table class="w-full text-left text-sm"><thead class="text-zinc-400"><tr><th class="px-2 py-3">{t('ui.route')}</th><th class="px-2 py-3">{t('ui.public')}</th><th class="px-2 py-3">{t('ui.actions')}</th></tr></thead><tbody>{#each routes as route (route.id)}<tr class="border-t border-carbon-600"><td class="px-2 py-3 font-mono">{route.path}</td><td class="px-2 py-3"><BSwitch checked={!protectedIds.includes(route.id)} description={t('ui.isRoutePublic', { path: route.path })} disabled={busy || loading || !ready} onchange={isPublic => protect(route.id,!isPublic)} />
+      </td><td class="px-2 py-3"><button class="nx-btn-ghost nx-btn-sm" disabled={busy || loading || !ready || secretOpen} onclick={() => { selectedRoute = route; error = null; routeConfigOpen = true; }}>{t('ui.configureKey')}</button></td></tr>{/each}</tbody></table></div>{/if}
     </PanelCard>
   {/if}
 </div>
@@ -213,12 +177,12 @@
       {#each routes as route (route.id)}
         <label class="flex min-h-11 cursor-pointer items-center justify-between gap-3 px-3 py-2 hover:bg-carbon-700">
           <span class="flex min-w-0 items-center gap-3"><input type="checkbox" class="accent-nexus-500" checked={allRoutes || allowed.includes(route.id)} disabled={busy || policyLoading || allRoutes} onchange={event => toggleRoute(route.id,event.currentTarget.checked)} /><span class="font-mono text-sm text-zinc-200 break-all">{route.path}</span></span>
-          <StatusBadge variant={protectedIds.includes(route.id) ? 'active' : (allRoutes || allowed.includes(route.id)) ? 'standby' : 'muted'}>{protectedIds.includes(route.id) ? t('ui.requiresKey') : (allRoutes || allowed.includes(route.id)) ? t('ui.publicToProtected') : t('ui.publicRoute')}</StatusBadge>
+          <StatusBadge variant={protectedIds.includes(route.id) ? 'active' : 'muted'}>{protectedIds.includes(route.id) ? t('ui.requiresKey') : t('ui.publicRoute')}</StatusBadge>
         </label>
       {:else}<p class="p-3 text-sm text-zinc-400">{t('ui.createRoutesFirst')}</p>{/each}
       {#each allowed.filter(id => !routes.some(route => route.id === id)) as id}<label class="flex gap-2 p-3 text-sm text-amber-400"><input type="checkbox" checked disabled={busy} onchange={() => allowed = allowed.filter(value => value !== id)} />{t('ui.deletedRoute', { id })}</label>{/each}
     </div>{/if}
-    {#if selectedPublic.length}<p class="text-sm text-amber-400">{t('ui.selectedPublicWarning', { count: selectedPublic.length })}</p>{:else if !allRoutes && !allowed.length}<p class="text-sm text-zinc-400">{t('ui.noRoutesSelected')}</p>{/if}
+    {#if !allRoutes && !allowed.length}<p class="text-sm text-zinc-400">{t('ui.noRoutesSelected')}</p>{/if}
   </fieldset>
   <fieldset class="space-y-2 border-t border-carbon-600 pt-4">
     <legend class="nx-field-label">{t('ui.modelScopeOptional')}</legend>
@@ -226,30 +190,20 @@
     <p class="text-sm text-zinc-400">{t('ui.modelsHelp')}</p>
   </fieldset>
 {/snippet}
-{#snippet reviewChanges()}
-  <div class="space-y-4" role="region" aria-label={t('ui.reviewTitle')}>
-    <p class="text-sm text-zinc-200">{t('ui.reviewWarning', { count: selectedPublic.length })}</p>
-    <div class="border border-carbon-600 divide-y divide-carbon-600">{#each selectedPublic as route (route.id)}<div class="flex flex-wrap items-center justify-between gap-3 p-3"><span class="font-mono text-sm text-zinc-200 break-all">{route.path}</span><StatusBadge variant="standby">{t('ui.publicToProtected')}</StatusBadge></div>{/each}</div>
-    <p class="text-sm text-zinc-400">{t('ui.reviewHelp')}</p>
-    <dl class="grid grid-cols-[auto_1fr] gap-x-4 gap-y-2 text-sm"><dt class="text-zinc-400">{t('ui.keyName')}</dt><dd class="text-zinc-200 break-all">{name}</dd><dt class="text-zinc-400">{t('ui.modelScope')}</dt><dd class="text-zinc-200 whitespace-pre-wrap break-all">{models.trim() || t('ui.allModels')}</dd></dl>
-  </div>
-{/snippet}
-<IndustrialDialog bind:open={createOpen} title={review ? t('ui.reviewTitle') : t('ui.createKey')} description={review ? t('ui.createReviewHelp') : t('ui.createHelp')} width="48rem" {busy} scrollBody>
+<IndustrialDialog bind:open={createOpen} title={t('ui.createKey')} description={t('ui.createHelp')} width="48rem" {busy} scrollBody>
   {#snippet body()}
     <form id="create-api-key" class="space-y-5" onsubmit={create}>
-      {#if review}{@render reviewChanges()}{:else}
-        {@render basicFields()}
-        {@render routeFields()}
-      {/if}
+      {@render basicFields()}
+      {@render routeFields()}
       {#if error}<p role="alert" class="text-sm text-red-400">{displayMessage(error)}</p>{/if}
     </form>
   {/snippet}
-  {#snippet footer()}{#if review}<button class="nx-btn-ghost" disabled={busy} onclick={() => review = false}>{t('ui.back')}</button>{/if}<button class="nx-btn-ghost" disabled={busy} onclick={() => { createOpen = false; review = false; }}>{t('ui.cancel')}</button><button class="nx-btn-primary" form="create-api-key" disabled={busy}>{busy ? t('ui.saving') : !review && selectedPublic.length ? t('ui.next') : t('ui.save')}</button>{/snippet}
+  {#snippet footer()}<button class="nx-btn-ghost" disabled={busy} onclick={() => { createOpen = false; }}>{t('ui.cancel')}</button><button class="nx-btn-primary" form="create-api-key" disabled={busy}>{busy ? t('ui.saving') : t('ui.save')}</button>{/snippet}
 </IndustrialDialog>
-<IndustrialDialog bind:open={policyOpen} title={review ? t('ui.reviewTitle') : t('ui.editKey', { name: target?.name ?? '' })} description={review ? t('ui.editReviewHelp') : t('ui.editHelp')} width="48rem" {busy} scrollBody onOpenChange={open => { if (!open) { guard.invalidate(); } }}>
-  {#snippet body()}{#if policyLoading}<LoadingIndicator label={t('ui.loadingPolicy')} height="sm" />{:else}<form id="key-route-policy" class="space-y-5" onsubmit={update}>{#if review}{@render reviewChanges()}{:else}{@render basicFields()}
-      {@render routeFields()}{/if}{#if error}<p role="alert" class="text-sm text-red-400">{displayMessage(error)}</p>{/if}</form>{/if}{/snippet}
-  {#snippet footer()}{#if review}<button class="nx-btn-ghost" disabled={busy} onclick={() => review = false}>{t('ui.back')}</button>{/if}<button class="nx-btn-ghost" disabled={busy} onclick={() => { policyOpen = false; review = false; guard.invalidate(); }}>{t('ui.cancel')}</button><button class="nx-btn-primary" form="key-route-policy" disabled={busy || policyLoading || !policyReady || !target || target.revokedAt !== null}>{busy ? t('ui.saving') : !review && selectedPublic.length ? t('ui.next') : t('ui.save')}</button>{/snippet}
+<IndustrialDialog bind:open={policyOpen} title={t('ui.editKey', { name: target?.name ?? '' })} description={t('ui.editHelp')} width="48rem" {busy} scrollBody onOpenChange={open => { if (!open) { guard.invalidate(); } }}>
+  {#snippet body()}{#if policyLoading}<LoadingIndicator label={t('ui.loadingPolicy')} height="sm" />{:else}<form id="key-route-policy" class="space-y-5" onsubmit={update}>{@render basicFields()}
+      {@render routeFields()}{#if error}<p role="alert" class="text-sm text-red-400">{displayMessage(error)}</p>{/if}</form>{/if}{/snippet}
+  {#snippet footer()}<button class="nx-btn-ghost" disabled={busy} onclick={() => { policyOpen = false; guard.invalidate(); }}>{t('ui.cancel')}</button><button class="nx-btn-primary" form="key-route-policy" disabled={busy || policyLoading || !policyReady || !target || target.revokedAt !== null}>{busy ? t('ui.saving') : t('ui.save')}</button>{/snippet}
 </IndustrialDialog>
 <IndustrialDialog bind:open={secretOpen} title={t('ui.viewKey')} description={t('ui.viewHelp')} busy={busy} onOpenChange={open => { if (!open) { secret = ''; secretStatus = null; guard.invalidate(); } }}>
   {#snippet body()}{#if secret}<code class="block select-all break-all border border-carbon-600 bg-carbon-950 p-3 font-mono text-zinc-200">{secret}</code>{:else if busy}<LoadingIndicator label={t('ui.loadingKeys')} height="sm" />{/if}{#if secretStatus}<p role="status" class="text-sm text-zinc-300 mt-3">{displayMessage(secretStatus)}</p>{/if}{#if copied}<p class="text-sm text-emerald-400 mt-3">{t('ui.copied')}</p>{/if}{/snippet}
@@ -262,9 +216,6 @@
 
 <IndustrialDialog bind:open={routeConfigOpen} title={t('ui.configureKey')} description={t('ui.configureDescription', { path: selectedRoute?.path ?? '' })} {busy} scrollBody>
   {#snippet body()}
-    {#if pendingRouteKey}
-      <p class="text-sm text-zinc-200">{#each t('ui.applyRouteWarning', { path: '\uE000', name: '\uE001' }).split(/(\uE000|\uE001)/) as part}{#if part === '\uE000'}<strong>{selectedRoute?.path}</strong>{:else if part === '\uE001'}<strong>{pendingRouteKey.name}</strong>{:else}{part}{/if}{/each}</p>
-    {:else}
     <div class="space-y-4">
       <button class="nx-btn-primary" disabled={busy} onclick={() => { routeConfigOpen = false; newKey(selectedRoute?.id); }}>{t('ui.newKey')}</button>
       <div class="space-y-2">
@@ -274,14 +225,13 @@
           {#each keys.filter(key => key.revokedAt === null) as key (key.id)}
             <div class="flex items-center justify-between gap-3 py-3">
               <div class="min-w-0"><p class="text-sm text-zinc-200 break-all">{key.name}</p><p class="font-mono text-xs text-zinc-400">{key.prefix}… · {keyStatusText(key)}</p></div>
-              <button class="nx-btn-ghost nx-btn-sm" disabled={busy || !!routeKeyBindings[selectedRoute?.id ?? '']?.some(item => item.id === key.id)} onclick={() => void applyRouteKey(key)}>{routeKeyBindings[selectedRoute?.id ?? '']?.some(item => item.id === key.id) ? t('ui.applied') : t('ui.apply')}</button>
+              <button class="nx-btn-ghost nx-btn-sm" disabled={busy || isKeyApplied(selectedRoute?.id ?? '',key.id)} onclick={() => void applyRouteKey(key)}>{isKeyApplied(selectedRoute?.id ?? '',key.id) ? t('ui.applied') : t('ui.apply')}</button>
             </div>
           {:else}<p class="py-3 text-sm text-zinc-400">{t('ui.noUsableKeys')}</p>{/each}
         </div>
       </div>
     </div>
-    {/if}
     {#if error}<p role="alert" class="text-sm text-red-400 mt-3">{displayMessage(error)}</p>{/if}
   {/snippet}
-  {#snippet footer()}<button class="nx-btn-ghost" disabled={busy} onclick={() => routeConfigOpen = false}>{t('ui.cancel')}</button>{#if pendingRouteKey}<button class="nx-btn-primary" disabled={busy} onclick={() => pendingRouteKey && applyRouteKey(pendingRouteKey,true)}>{busy ? t('ui.saving') : t('ui.apply')}</button>{/if}{/snippet}
+  {#snippet footer()}<button class="nx-btn-ghost" disabled={busy} onclick={() => routeConfigOpen = false}>{t('ui.cancel')}</button>{/snippet}
 </IndustrialDialog>

package/dist/plugins/token-stats/manifest.json

@@ -242,6 +242,8 @@
       "ui.previousInterval": "vs previous {interval}",
       "ui.minutes": "min",
       "ui.hours": "h",
+      "ui.days": "d",
+      "page.trendHint": "Compares the two latest complete time buckets in the selected range; incomplete buckets are excluded.",
       "ui.newActivity": "New",
       "page.range": "Time range",
       "page.range.1h": "1 hour",
@@ -355,6 +357,8 @@
       "ui.previousInterval": "较上个{interval}",
       "ui.minutes": "分钟",
       "ui.hours": "小时",
+      "ui.days": "天",
+      "page.trendHint": "对比所选范围内最近两个完整统计时段，未完成时段不参与。",
       "ui.newActivity": "新增",
       "page.range": "时间范围",
       "page.range.1h": "1 小时",

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

@@ -11,6 +11,8 @@
   import { Input } from '$components/ui/input';
   import UsageTimeChart from './UsageTimeChart.svelte';
   import { getStatsResource } from './stats';
+  import KpiTrendValue from '$components/industrial/KpiTrendValue.svelte';
+  import { overviewTrends, PAGE_METRICS } from './overview-trends';
   import { formatCacheInputPercentage, formatEstimatedUsd, formatTokenCount, modelTokenTotal, tokenComposition, usagePresentation, type TokenPageRange } from './labels';
   import type { StatsState, StatsResource } from './stats-resource';
 
@@ -21,11 +23,12 @@
   let keysFailed = $state(false);
   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 models: StatsState = $state({ data: null, busy: true, error: '', refreshedAt: 0 });
+  let time: StatsState = $state({ data: null, busy: true, 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 t = (key: string, values?: Record<string, string>) => $isLoading ? '' : getPluginText(key, pluginName,
+    (id, options) => $_(id, { ...options, values }));
   const display = formatCompactNumber;
   const fullCount = (value: unknown) => formatTokenCount(value, $locale ?? undefined);
   const displayCost = (value: unknown) => typeof value === 'number' && value >= 1000
@@ -47,6 +50,16 @@
     .filter(row => modelLabel(row.dimension).toLowerCase().includes(search.trim().toLowerCase()))
     .sort((a, b) => rankAmount(b) - rankAmount(a) || a.dimension.localeCompare(b.dimension)));
   const maxTokens = $derived(Math.max(0, ...rows.map(row => modelTokenTotal(row) ?? 0)));
+  const modelsLoading = $derived(models.busy && !models.data);
+  const trends = $derived(overviewTrends(time.error || time.data?.reportingIncomplete ? null : time.data, PAGE_METRICS));
+  const comparisonCaption = $derived(t('ui.previousInterval', { interval: ['day', '1d'].includes(range)
+    ? `1${t('ui.hours')}` : `1${t('ui.days')}` }));
+  const summaryMetrics = $derived([
+    { metric: 'input', label: t('ui.input'), value: display(usage?.input), title: fullCount(usage?.input) },
+    { metric: 'output', label: t('ui.output'), value: display(usage?.output), title: fullCount(usage?.output) },
+    { metric: 'tokens', label: t('page.tokens'), value: display(models.data ? modelTokenTotal(models.data) : null), title: fullCount(models.data ? modelTokenTotal(models.data) : null) },
+    { metric: 'cost', label: t('ui.estimatedCostUsd'), value: displayCost(models.data?.estimatedCostUsd), title: formatEstimatedUsd(models.data?.estimatedCostUsd) },
+  ] as const);
   const busy = $derived(models.busy || time.busy);
   const refreshedAt = $derived(Math.min(models.refreshedAt, time.refreshedAt));
   const ranges = $derived(['day', 'week', 'month', '1d', '7d', '30d'].map(value => ({ value, label: t(`page.range.${value}`) })));
@@ -76,6 +89,10 @@
   function refresh() { void modelResource?.refresh(); void timeResource?.refresh(); }
 </script>
 
+{#snippet loadingKpi()}
+  <LoadingIndicator label={t('ui.loading')} size="sm" height="none" class="h-9 w-full" />
+{/snippet}
+
 <div class="min-w-0 space-y-4" data-testid="token-stats-page">
   <div class="flex flex-wrap items-center justify-between gap-3">
     <div class="flex flex-wrap items-center gap-3">
@@ -97,29 +114,40 @@
       <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)} valueTitle={fullCount(usage?.input)} />
-      <KpiCard class="min-w-0 [container-type:inline-size]" label={t('ui.output')} value={display(usage?.output)} valueTitle={fullCount(usage?.output)} />
-      <KpiCard class="min-w-0 [container-type:inline-size]" label={t('page.tokens')} value={display(modelTokenTotal(models.data))} valueTitle={fullCount(modelTokenTotal(models.data))} />
-      <KpiCard class="min-w-0 [container-type:inline-size]" label={t('ui.estimatedCostUsd')} value={displayCost(models.data.estimatedCostUsd)} valueTitle={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}
+  <div class="grid grid-cols-2 gap-3 xl:grid-cols-4" data-testid="token-stats-page-summary" aria-busy={modelsLoading}>
+    {#each summaryMetrics as item, index (item.metric)}
+      {@const trend = trends[index]!}
+      <KpiCard fillHeight reserveFooter class="h-[144px] min-w-0 [container-type:inline-size] xl:h-[168px]"
+        label={item.label} value={item.value} valueTitle={item.title} children={modelsLoading ? loadingKpi : undefined}>
+        {#snippet foot()}
+          <div class="flex h-full min-w-0 flex-wrap items-center gap-x-1.5 gap-y-0.5" data-testid={`token-stats-page-trend-${item.metric}`} title={t('page.trendHint')}>
+            {#if time.busy && !time.data}
+              <LoadingIndicator size="xs" centered={false} height="none" label={t('ui.loading')} />
+            {:else}
+              <KpiTrendValue value={trend.isNew ? t('ui.newActivity') : trend.percent == null ? '—' : `${trend.percent >= 0 ? '+' : ''}${trend.percent.toFixed(1)}%`}
+                change={trend.change} direction={item.metric === 'cost' ? 'down' : 'up'} clamp />
+              <span class="nx-label-sm">{comparisonCaption}</span>
+            {/if}
+          </div>
+        {/snippet}
+      </KpiCard>
+    {/each}
+  </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}
 
   <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')} />
+      {#if time.busy && !time.data}<LoadingIndicator label={t('ui.loading')} height="none" class="h-full" />
       {:else if time.data && usagePresentation(time.data).positive}
         <UsageTimeChart stats={time.data} {range} refreshedAt={time.refreshedAt} {pluginName} presentation="page" />
       {: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.models')} tag={`${rows.length} / ${models.data.data.length}`}>
+  <PanelCard title={t('page.models')} tag={models.data ? `${rows.length} / ${models.data.data.length}` : ''}>
+    {#if modelsLoading}
+      <LoadingIndicator label={t('ui.loading')} />
+    {:else if models.data}
       <div class="mb-3 flex flex-wrap items-center gap-3">
         <BSegmentedControl options={sorts} bind:value={sort} ariaLabel={t('page.sort')} class="shrink-0" />
         <Input bind:value={search} aria-label={t('page.searchModels')} placeholder={t('page.searchModels')} class="min-w-[140px] flex-1 sm:max-w-64" />
@@ -143,6 +171,8 @@
           </li>
         {:else}<li class="py-6 text-center text-xs text-zinc-400">{t(search ? 'page.noModels' : 'ui.noData')}</li>{/each}
       </ol>
-    </PanelCard>
-  {/if}
+    {:else}
+      <p class="py-6 text-center text-xs text-zinc-400">{t(models.error ? 'ui.loadFailed' : 'ui.noData')}</p>
+    {/if}
+  </PanelCard>
 </div>

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

@@ -1,29 +1,42 @@
 import { bucketTrend } from '../../../packages/ui/src/components/dashboard/trends';
-import { usagePresentation } from './labels';
+import { modelTokenTotal, usagePresentation } from './labels';
 import type { StatsResponse } from './stats-resource';
 
 export const OVERVIEW_METRICS = ['input', 'output', 'cost'] as const;
 export type OverviewMetric = typeof OVERVIEW_METRICS[number];
-export type OverviewTrend = { metric: OverviewMetric; percent: number | null; change: 'up' | 'down' | 'flat' | null; isNew: boolean };
+export const PAGE_METRICS = ['input', 'output', 'tokens', 'cost'] as const;
+export type SummaryMetric = typeof PAGE_METRICS[number];
+export type OverviewTrend = { metric: SummaryMetric; percent: number | null; change: 'up' | 'down' | 'flat' | null; isNew: boolean };
 
 /** Compare adjacent completed server buckets. Missing traffic is zero; missing metering stays unknown. */
-export function overviewTrends(snapshot: StatsResponse | null): OverviewTrend[] {
+export function overviewTrends(snapshot: StatsResponse | null, metrics: readonly SummaryMetric[] = OVERVIEW_METRICS): OverviewTrend[] {
   const { asOfMs, bucketMs } = snapshot ?? {};
-  const valid = snapshot?.groupBy === 'time' && Number.isSafeInteger(asOfMs) && Number.isSafeInteger(bucketMs) && bucketMs! > 0;
-  const currentStart = valid ? Math.floor(asOfMs! / bucketMs!) * bucketMs! - bucketMs! : NaN;
-  return OVERVIEW_METRICS.map(metric => {
+  let valid = snapshot?.groupBy === 'time' && Number.isSafeInteger(asOfMs) && Number.isSafeInteger(bucketMs) && bucketMs! > 0;
+  let currentStart = valid ? Math.floor(asOfMs! / bucketMs!) * bucketMs! - bucketMs! : NaN;
+  let previousStart = currentStart - bucketMs!;
+  if (valid && snapshot?.bucketStarts) {
+    const starts = snapshot.bucketStarts;
+    valid = starts.every((start, index) => Number.isSafeInteger(start) && (index === 0 || start > starts[index - 1]!));
+    // Calendar days can span 23/25 hours; rolling page windows need not align with the UTC clock.
+    const current = valid ? starts.findLastIndex((start, index) =>
+      (starts[index + 1] ?? snapshot.bucketEndMs ?? start + bucketMs!) <= asOfMs!) : -1;
+    valid = current >= 1;
+    currentStart = valid ? starts[current]! : NaN;
+    previousStart = valid ? starts[current - 1]! : NaN;
+  }
+  return metrics.map(metric => {
     const amount = (start: number): number | null => {
       if (!valid) return null;
       const rows = snapshot!.data.filter(row => row.bucketStartMs === start);
       let total = 0;
       for (const row of rows) {
-        const value = metric === 'cost' ? row.estimatedCostUsd : usagePresentation(row)[metric];
+        const value = metric === 'cost' ? row.estimatedCostUsd : metric === 'tokens' ? modelTokenTotal(row) : usagePresentation(row)[metric];
         if (value == null || !Number.isFinite(value) || value < 0) return null;
         total += value;
       }
       return total;
     };
-    const previous = amount(currentStart - bucketMs!), current = amount(currentStart);
+    const previous = amount(previousStart), current = amount(currentStart);
     const known = previous !== null && current !== null;
     const percent = known ? bucketTrend([previous, current]) : null;
     return { metric, percent: Number.isFinite(percent) ? percent : null,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jeffusion/bungee-core",
-  "version": "5.15.1",
+  "version": "5.16.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.15.1",
+    "@jeffusion/bungee-types": "^5.16.0",
     "@types/lodash-es": "^4.17.12",
     "acorn": "^8.15.0",
     "canonicalize": "3.0.0",