refactor(web): extract localStorage usage into injectable StorageService

src/app/app.component.spec.ts

@@ -37,6 +37,7 @@ import {FEATURE_FLAG_SERVICE} from './core/services/interfaces/feature-flag';
 import {GRAPH_SERVICE} from './core/services/interfaces/graph';
 import {LOCAL_FILE_SERVICE} from './core/services/interfaces/localfile';
 import {SAFE_VALUES_SERVICE} from './core/services/interfaces/safevalues';
+import {STORAGE_SERVICE} from './core/services/interfaces/storage';
 import {STRING_TO_COLOR_SERVICE} from './core/services/interfaces/string-to-color';
 import {THEME_SERVICE} from './core/services/interfaces/theme';
 import {LOCATION_SERVICE} from './core/services/location.service';
@@ -54,6 +55,7 @@ import {MockGraphService} from './core/services/testing/mock-graph.service';
 import {MockLocalFileService} from './core/services/testing/mock-local-file.service';
 import {MockSafeValuesService} from './core/services/testing/mock-safevalues.service';
 import {MockSessionService} from './core/services/testing/mock-session.service';
+import {MockStorageService} from './core/services/testing/mock-storage.service';
 import {MockStreamChatService} from './core/services/testing/mock-stream-chat.service';
 import {MockStringToColorService} from './core/services/testing/mock-string-to-color.service';
 import {MockThemeService} from './core/services/testing/mock-theme.service';
@@ -180,6 +182,10 @@ describe('AppComponent', () => {
               provide: SAFE_VALUES_SERVICE,
               useValue: safeValuesService,
             },
+            {
+              provide: STORAGE_SERVICE,
+              useClass: MockStorageService,
+            },
             {
               provide: LOCAL_FILE_SERVICE,
               useValue: localFileService,

src/app/components/chat/chat.component.spec.ts

@@ -46,6 +46,7 @@ import {SESSION_SERVICE, SessionService,} from '../../core/services/interfaces/s
 import {STREAM_CHAT_SERVICE} from '../../core/services/interfaces/stream-chat';
 import {STRING_TO_COLOR_SERVICE} from '../../core/services/interfaces/string-to-color';
 import {TRACE_SERVICE, TraceService} from '../../core/services/interfaces/trace';
+import {STORAGE_SERVICE} from '../../core/services/interfaces/storage';
 import {UI_STATE_SERVICE} from '../../core/services/interfaces/ui-state';
 import {VIDEO_SERVICE, VideoService} from '../../core/services/interfaces/video';
 import {WEBSOCKET_SERVICE, WebSocketService,} from '../../core/services/interfaces/websocket';
@@ -62,6 +63,7 @@ import {MockGraphService} from '../../core/services/testing/mock-graph.service';
 import {MockLocalFileService} from '../../core/services/testing/mock-local-file.service';
 import {MockSafeValuesService} from '../../core/services/testing/mock-safevalues.service';
 import {MockSessionService} from '../../core/services/testing/mock-session.service';
+import {MockStorageService} from '../../core/services/testing/mock-storage.service';
 import {MockStreamChatService} from '../../core/services/testing/mock-stream-chat.service';
 import {MockStringToColorService} from '../../core/services/testing/mock-string-to-color.service';
 import {MockTraceService} from '../../core/services/testing/mock-trace.service';
@@ -284,6 +286,7 @@ describe('ChatComponent', () => {
             },
             {provide: GRAPH_SERVICE, useValue: graphService},
             {provide: SAFE_VALUES_SERVICE, useValue: mockSafeValuesService},
+            {provide: STORAGE_SERVICE, useClass: MockStorageService},
             {provide: LOCAL_FILE_SERVICE, useValue: mockLocalFileService},
             {provide: MatDialog, useValue: mockDialog},
             {provide: SnackbarService, useValue: mockSnackBar},

src/app/components/chat/chat.component.ts

@@ -57,6 +57,7 @@ import { GRAPH_SERVICE } from '../../core/services/interfaces/graph';
 import { LOCAL_FILE_SERVICE } from '../../core/services/interfaces/localfile';
 import { SAFE_VALUES_SERVICE } from '../../core/services/interfaces/safevalues';
 import { SESSION_SERVICE } from '../../core/services/interfaces/session';
+import { STORAGE_SERVICE } from '../../core/services/interfaces/storage';
 import { STREAM_CHAT_SERVICE } from '../../core/services/interfaces/stream-chat';
 import { AUDIO_RECORDING_SERVICE } from '../../core/services/interfaces/audio-recording';
 import { AUDIO_PLAYING_SERVICE } from '../../core/services/interfaces/audio-playing';
@@ -210,6 +211,7 @@ export class ChatComponent implements OnInit, AfterViewInit, OnDestroy {
   private readonly renderer = inject(Renderer2);
   private readonly router = inject(Router);
   private readonly safeValuesService = inject(SAFE_VALUES_SERVICE);
+  private readonly storageService = inject(STORAGE_SERVICE);
   private readonly testsService = inject(TestsService);
   private readonly sessionService = inject(SESSION_SERVICE);
   private readonly streamChatService = inject(STREAM_CHAT_SERVICE);
@@ -313,11 +315,11 @@ export class ChatComponent implements OnInit, AfterViewInit, OnDestroy {
   private agentIdentityChannel: BroadcastChannel | null = null;
   private agentIdentityMsgListener: ((e: MessageEvent) => void) | null = null;
   isMobile = signal(window.innerWidth <= 768);
-  showSidePanel = window.localStorage.getItem('adk-side-panel-visible') !== 'false';
+  showSidePanel = this.storageService.getItem('adk-side-panel-visible') !== 'false';
   showBuilderAssistant = true;
   showAppSelectorDrawer = false;
   showSessionSelectorDrawer = false;
-  useSse = signal(window.localStorage.getItem('adk-use-sse') === 'true');
+  useSse = signal(this.storageService.getItem('adk-use-sse') === 'true');
   currentSessionState: SessionState | undefined = {};
   root_agent = ROOT_AGENT;
   updatedSessionState: WritableSignal<any> = signal(null);
@@ -332,7 +334,7 @@ export class ChatComponent implements OnInit, AfterViewInit, OnDestroy {
   protected readonly isSideBySide = signal(false);
   protected readonly showBranches = signal(false);
   protected readonly expectedUiEvents = signal<UiEvent[]>([]);
-  protected readonly viewMode = signal<'events' | 'traces'>((window.localStorage.getItem('chat-view-mode') as 'events' | 'traces') || 'events');
+  protected readonly viewMode = signal<'events' | 'traces'>((this.storageService.getItem('chat-view-mode') as 'events' | 'traces') || 'events');
   protected readonly invocationIdFilterActive = signal<boolean>(false);
   protected readonly nodePathFilterActive = signal<boolean>(false);
   protected readonly invocationIdFilter = signal<string>('');
@@ -551,7 +553,7 @@ export class ChatComponent implements OnInit, AfterViewInit, OnDestroy {
   onViewModeChange(mode: 'events' | 'traces') {
     this.viewMode.set(mode);
     try {
-      window.localStorage.setItem('chat-view-mode', mode);
+      this.storageService.setItem('chat-view-mode', mode);
     } catch (e) {
       // Ignored
     }
@@ -562,12 +564,12 @@ export class ChatComponent implements OnInit, AfterViewInit, OnDestroy {
     }
   }
   protected originalSessionId = '';
-  hideIntermediateEvents = signal(window.localStorage.getItem('adk-hide-intermediate-events') === 'true');
+  hideIntermediateEvents = signal(this.storageService.getItem('adk-hide-intermediate-events') === 'true');
 
   toggleHideIntermediateEvents() {
     const newVal = !this.hideIntermediateEvents();
     this.hideIntermediateEvents.set(newVal);
-    window.localStorage.setItem('adk-hide-intermediate-events', String(newVal));
+    this.storageService.setItem('adk-hide-intermediate-events', String(newVal));
   }
 
   // Sessions with an in-progress bidi stream, used to block concurrent starts.
@@ -778,7 +780,7 @@ export class ChatComponent implements OnInit, AfterViewInit, OnDestroy {
     if (this.isMobile()) {
       this.showSidePanel = false;
     } else {
-      this.showSidePanel = window.localStorage.getItem('adk-side-panel-visible') !== 'false';
+      this.showSidePanel = this.storageService.getItem('adk-side-panel-visible') !== 'false';
     }
 
     this.apps$.subscribe((apps) => {
@@ -896,7 +898,7 @@ export class ChatComponent implements OnInit, AfterViewInit, OnDestroy {
 
         if (!this.showSidePanel) {
           this.showSidePanel = true;
-          window.localStorage.setItem('adk-side-panel-visible', 'true');
+          this.storageService.setItem('adk-side-panel-visible', 'true');
           this.sideDrawer()?.open();
         }
 
@@ -2143,7 +2145,7 @@ export class ChatComponent implements OnInit, AfterViewInit, OnDestroy {
     if (this.selectedMessageIndex === i) {
       this.sideDrawer()?.open();
       this.showSidePanel = true;
-      window.localStorage.setItem('adk-side-panel-visible', 'true');
+      this.storageService.setItem('adk-side-panel-visible', 'true');
       return;
     }
 
@@ -2156,7 +2158,7 @@ export class ChatComponent implements OnInit, AfterViewInit, OnDestroy {
       this.llmResponse = undefined;
       this.sideDrawer()?.open();
       this.showSidePanel = true;
-      window.localStorage.setItem('adk-side-panel-visible', 'true');
+      this.storageService.setItem('adk-side-panel-visible', 'true');
       this.updateRenderedGraph();
       if (this.viewMode() !== 'events') {
         this.onViewModeChange('events');
@@ -2166,7 +2168,7 @@ export class ChatComponent implements OnInit, AfterViewInit, OnDestroy {
 
     this.sideDrawer()?.open();
     this.showSidePanel = true;
-    window.localStorage.setItem('adk-side-panel-visible', 'true');
+    this.storageService.setItem('adk-side-panel-visible', 'true');
     this.selectEvent(key, i);
   }
 
@@ -2451,7 +2453,7 @@ export class ChatComponent implements OnInit, AfterViewInit, OnDestroy {
       this.sideDrawer()?.open();
     }
     this.showSidePanel = !this.showSidePanel;
-    window.localStorage.setItem('adk-side-panel-visible', this.showSidePanel.toString());
+    this.storageService.setItem('adk-side-panel-visible', this.showSidePanel.toString());
   }
 
   toggleAppSelectorDrawer() {
@@ -3533,7 +3535,7 @@ export class ChatComponent implements OnInit, AfterViewInit, OnDestroy {
 
   toggleSse() {
     this.useSse.set(!this.useSse());
-    window.localStorage.setItem('adk-use-sse', String(this.useSse()));
+    this.storageService.setItem('adk-use-sse', String(this.useSse()));
   }
 
   enterBuilderMode() {

src/app/components/eval-tab/eval-tab.component.spec.ts

@@ -28,6 +28,8 @@ import {
 } from '../../core/services/feature-flag.service';
 import {EVAL_SERVICE} from '../../core/services/interfaces/eval';
 import {SESSION_SERVICE} from '../../core/services/interfaces/session';
+import {STORAGE_SERVICE} from '../../core/services/interfaces/storage';
+import {MockStorageService} from '../../core/services/testing/mock-storage.service';
 import {FEATURE_FLAG_SERVICE} from '../../core/services/interfaces/feature-flag';
 
 describe('EvalTabComponent', () => {
@@ -80,6 +82,7 @@ describe('EvalTabComponent', () => {
         { provide: MatDialog, useValue: jasmine.createSpyObj('MatDialog', ['open']) },
         { provide: EVAL_SERVICE, useValue: evalService },
         { provide: SESSION_SERVICE, useValue: sessionService },
+        { provide: STORAGE_SERVICE, useClass: MockStorageService },
         {
           provide: ActivatedRoute,
           useValue: {

src/app/components/eval-tab/eval-tab.component.ts

@@ -37,6 +37,7 @@ import {FeatureFlagService} from '../../core/services/feature-flag.service';
 import {EVAL_SERVICE} from '../../core/services/interfaces/eval';
 import {FEATURE_FLAG_SERVICE} from '../../core/services/interfaces/feature-flag';
 import {SESSION_SERVICE} from '../../core/services/interfaces/session';
+import {STORAGE_SERVICE} from '../../core/services/interfaces/storage';
 
 import {AddEvalSessionDialogComponent} from './add-eval-session-dialog/add-eval-session-dialog/add-eval-session-dialog.component';
 import {EvalTabMessagesInjectionToken} from './eval-tab.component.i18n';
@@ -188,6 +189,7 @@ export class EvalTabComponent implements OnInit, OnChanges {
   protected appEvaluationResults: AppEvaluationResult = {};
   private readonly evalService = inject(EVAL_SERVICE);
   private readonly sessionService = inject(SESSION_SERVICE);
+  private readonly storageService = inject(STORAGE_SERVICE);
 
   constructor() {
     this.evalCasesSubject.subscribe((evalCases: string[]) => {
@@ -215,7 +217,7 @@ export class EvalTabComponent implements OnInit, OnChanges {
       .pipe(first())
       .subscribe((enabled) => this.isEvalV2Enabled.set(enabled));
 
-    const savedMetrics = window.localStorage.getItem('adk_eval_metrics_selection');
+    const savedMetrics = this.storageService.getItem('adk_eval_metrics_selection');
     if (savedMetrics) {
       try {
         this.evalMetrics = JSON.parse(savedMetrics) as EvalMetric[];
@@ -906,7 +908,7 @@ export class EvalTabComponent implements OnInit, OnChanges {
           this.pendingUserSimulatorConfig = result.userSimulatorConfig ?? null;
 
           // Persist the user's metric selection so it is remembered next time.
-          window.localStorage.setItem(
+          this.storageService.setItem(
               'adk_eval_metrics_selection',
               JSON.stringify(result.metrics));
 

src/app/components/event-tab/event-tab.component.spec.ts

@@ -26,8 +26,10 @@ import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {Span, SpanValidator} from '../../core/models/Trace';
 import {FEATURE_FLAG_SERVICE} from '../../core/services/interfaces/feature-flag';
 import {TRACE_SERVICE} from '../../core/services/interfaces/trace';
+import {STORAGE_SERVICE} from '../../core/services/interfaces/storage';
 import {UI_STATE_SERVICE} from '../../core/services/interfaces/ui-state';
 import {MockFeatureFlagService} from '../../core/services/testing/mock-feature-flag.service';
+import {MockStorageService} from '../../core/services/testing/mock-storage.service';
 import {MockTraceService} from '../../core/services/testing/mock-trace.service';
 import {MockUiStateService} from '../../core/services/testing/mock-ui-state.service';
 
@@ -139,6 +141,7 @@ describe('EventTabComponent', () => {
             {provide: FEATURE_FLAG_SERVICE, useValue: featureFlagService},
             {provide: UI_STATE_SERVICE, useClass: MockUiStateService},
             {provide: TRACE_SERVICE, useClass: MockTraceService},
+            {provide: STORAGE_SERVICE, useClass: MockStorageService},
           ],
         })
         .compileComponents();

src/app/components/event-tab/event-tab.component.ts

@@ -33,6 +33,7 @@ import {UI_STATE_SERVICE} from '../../core/services/interfaces/ui-state';
 import {SidePanelMessagesInjectionToken} from '../side-panel/side-panel.component.i18n';
 import {Span} from '../../core/models/Trace';
 import {TRACE_SERVICE} from '../../core/services/interfaces/trace';
+import {STORAGE_SERVICE} from '../../core/services/interfaces/storage';
 import {addSvgNodeHoverEffects} from '../../utils/svg-interaction.utils';
 export type SpanNode = Span & {
   children: SpanNode[];
@@ -159,6 +160,7 @@ export class EventTabComponent {
 
   protected readonly uiStateService = inject(UI_STATE_SERVICE);
   protected readonly traceService = inject(TRACE_SERVICE);
+  private readonly storageService = inject(STORAGE_SERVICE);
   readonly i18n = inject(SidePanelMessagesInjectionToken);
 
   readonly isEventRequestResponseLoadingSignal = toSignal(
@@ -220,7 +222,7 @@ export class EventTabComponent {
 
   set selectedDetailTab(tab: 'event' | 'raw' | 'request' | 'response' | 'graph' | 'metadata' | 'state') {
     this._selectedDetailTab = tab;
-    window.localStorage.setItem('adk-event-tab-selected-tab', tab);
+    this.storageService.setItem('adk-event-tab-selected-tab', tab);
     if (tab === 'graph') {
       setTimeout(() => {
         if (this.graphContainer?.nativeElement) {
@@ -294,7 +296,7 @@ export class EventTabComponent {
   });
 
   constructor() {
-    const savedTab = window.localStorage.getItem('adk-event-tab-selected-tab');
+    const savedTab = this.storageService.getItem('adk-event-tab-selected-tab');
     if (savedTab && ['event', 'raw', 'request', 'response', 'graph', 'metadata', 'state'].includes(savedTab)) {
       this._selectedDetailTab = savedTab as 'event' | 'raw' | 'request' | 'response' | 'graph' | 'metadata' | 'state';
     }

src/app/components/side-panel/side-panel.component.spec.ts

@@ -46,12 +46,14 @@ import {SAFE_VALUES_SERVICE} from '../../core/services/interfaces/safevalues';
 import {SESSION_SERVICE} from '../../core/services/interfaces/session';
 import {THEME_SERVICE} from '../../core/services/interfaces/theme';
 import {TRACE_SERVICE} from '../../core/services/interfaces/trace';
+import {STORAGE_SERVICE} from '../../core/services/interfaces/storage';
 import {UI_STATE_SERVICE} from '../../core/services/interfaces/ui-state';
 import {VIDEO_SERVICE} from '../../core/services/interfaces/video';
 import {WEBSOCKET_SERVICE} from '../../core/services/interfaces/websocket';
 import {SessionService} from '../../core/services/session.service';
 import {MockFeatureFlagService} from '../../core/services/testing/mock-feature-flag.service';
 import {MockSafeValuesService} from '../../core/services/testing/mock-safevalues.service';
+import {MockStorageService} from '../../core/services/testing/mock-storage.service';
 import {MockThemeService} from '../../core/services/testing/mock-theme.service';
 import {MockUiStateService} from '../../core/services/testing/mock-ui-state.service';
 import {TraceService} from '../../core/services/trace.service';
@@ -203,6 +205,7 @@ describe('SidePanelComponent', () => {
         {provide: ActivatedRoute, useValue: mockActivatedRoute},
         {provide: Location, useValue: mockLocation},
         {provide: SAFE_VALUES_SERVICE, useClass: MockSafeValuesService},
+        {provide: STORAGE_SERVICE, useClass: MockStorageService},
         {provide: THEME_SERVICE, useClass: MockThemeService},
         {provide: AnalyticsService, useValue: jasmine.createSpyObj('AnalyticsService', ['setUserProperties', 'sendEvent'])}
       ],

src/app/components/trace-tab/trace-tab.component.spec.ts

@@ -22,7 +22,9 @@ import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 
 import {Span, SpanValidator} from '../../core/models/Trace';
 import {TRACE_SERVICE} from '../../core/services/interfaces/trace';
+import {STORAGE_SERVICE} from '../../core/services/interfaces/storage';
 
+import {MockStorageService} from './../../core/services/testing/mock-storage.service';
 import {MockTraceService} from './../../core/services/testing/mock-trace.service';
 import {TraceTabComponent} from './trace-tab.component';
 
@@ -77,6 +79,7 @@ describe('TraceTabComponent', () => {
           imports: [TraceTabComponent, NoopAnimationsModule],
           providers: [
             {provide: TRACE_SERVICE, useClass: MockTraceService},
+            {provide: STORAGE_SERVICE, useClass: MockStorageService},
           ],
         })
         .compileComponents();

src/app/components/trace-tab/trace-tab.component.ts

@@ -24,6 +24,7 @@ import {CustomJsonViewerComponent} from '../custom-json-viewer/custom-json-viewe
 import {InfoTable} from '../info-table/info-table';
 
 import {TRACE_SERVICE} from '../../core/services/interfaces/trace';
+import {STORAGE_SERVICE} from '../../core/services/interfaces/storage';
 import {Span} from '../../core/models/Trace';
 
 @Injectable()
@@ -97,6 +98,7 @@ export class TraceTabComponent {
   }
 
   protected readonly traceService = inject(TRACE_SERVICE);
+  private readonly storageService = inject(STORAGE_SERVICE);
   selectedSpan = toSignal(this.traceService.selectedTraceRow$);
 
   private static getValidTraceTab(tab: string | null): 'info' | 'attributes' | 'raw' {
@@ -107,14 +109,14 @@ export class TraceTabComponent {
   }
 
   selectedDetailTab = signal<'info' | 'attributes' | 'raw'>(
-    TraceTabComponent.getValidTraceTab(window.localStorage.getItem('adk-trace-tab-selected-tab'))
+    TraceTabComponent.getValidTraceTab(this.storageService.getItem('adk-trace-tab-selected-tab'))
   );
 
   switchToEvent = output<string>();
 
   constructor() {
     effect(() => {
-      window.localStorage.setItem('adk-trace-tab-selected-tab', this.selectedDetailTab());
+      this.storageService.setItem('adk-trace-tab-selected-tab', this.selectedDetailTab());
     });
   }