feat: add cache routing alignment and usage visibility for 2.5.0

apps/showcase_ui/src/app/components/agent-stream/agent-stream.component.ts

@@ -31,6 +31,7 @@ import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { RouterLink } from '@angular/router';
 import { HttpClient } from '@angular/common/http';
+import { Subscription } from 'rxjs';
 import { AgentService, GuidanceEvent, StartupProgressEvent } from '../../services/agent.service';
 import { Session, ModelInfo, SessionUsage } from '../../core/models/session.model';
 import { TestResultBadgeComponent, TEST_RESULT_LABELS } from '../test-result-badge/test-result-badge.component';
@@ -41,6 +42,7 @@ import { OverlayModule, ConnectedPosition } from '@angular/cdk/overlay';
 import { StepBlock, PhaseBlock, StepEvent, ActionParam, CheckerResult, StreamResetNotice, DEFAULT_STREAM_RESET_MESSAGE } from '../../core/models/stream.model';
 import {
   contextPercent,
+  cachePercent,
   contextWindow,
   runMode,
   formatCompactTokens,
@@ -304,6 +306,9 @@ export class AgentStreamComponent implements AfterViewInit {
   // usage, executor context share and the Pro tuning the run started with.
   public isRunInfoOpen = signal<boolean>(false);
   public runUsage = signal<SessionUsage | null>(null);
+  public runUsageLoading = signal(false);
+  public runUsageError = signal(false);
+  public runInfoCachePercent = computed(() => cachePercent(this.runUsage()?.cached_tokens, this.runUsage()?.prompt_tokens));
   private runInfoClock = signal<number>(Date.now());
 
   public runInfoMode = computed(() => runMode(this.agentService.currentSession(), this.agentService.viewedModel()));
@@ -611,10 +616,17 @@ export class AgentStreamComponent implements AfterViewInit {
       if (untracked(() => this.runUsage())?.session_id !== sessionId) {
         this.runUsage.set(null);
       }
-      this.loadRunUsage(sessionId);
-      if (!running) return;
-      const usageInterval = setInterval(() => this.loadRunUsage(sessionId), 3000);
-      onCleanup(() => clearInterval(usageInterval));
+      let request: Subscription | null = null;
+      const refresh = () => {
+        if (request && !request.closed) return;
+        request = this.loadRunUsage(sessionId);
+      };
+      refresh();
+      const usageInterval = running ? setInterval(refresh, 3000) : null;
+      onCleanup(() => {
+        if (usageInterval !== null) clearInterval(usageInterval);
+        request?.unsubscribe();
+      });
     });
     effect((onCleanup) => {
       if (!this.isRunInfoOpen() || !this.agentService.isCurrentSessionRunning()) return;
@@ -923,13 +935,20 @@ export class AgentStreamComponent implements AfterViewInit {
     }
   }
 
-  private loadRunUsage(sessionId: string): void {
-    this.agentService.getSessionUsage(sessionId).subscribe({
+  private loadRunUsage(sessionId: string): Subscription {
+    this.runUsageLoading.set(true);
+    this.runUsageError.set(false);
+    return this.agentService.getSessionUsage(sessionId).subscribe({
       next: (usage) => {
         if (this.agentService.currentSessionId() !== sessionId) return;
+        this.runUsageLoading.set(false);
         this.runUsage.set(usage);
       },
-      error: (err) => console.error('Failed to load session usage:', err)
+      error: () => {
+        if (this.agentService.currentSessionId() !== sessionId) return;
+        this.runUsageLoading.set(false);
+        this.runUsageError.set(true);
+      }
     });
   }