google · copybara-service · Mar 17, 2026 · Mar 17, 2026
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/app/components/chat/chat.component.spec.ts b/src/app/components/chat/chat.component.spec.ts
@@ -17,7 +17,7 @@
 
 import {Location} from '@angular/common';
 import {HttpErrorResponse} from '@angular/common/http';
-import {Component, ErrorHandler} from '@angular/core';
+import {ChangeDetectionStrategy, Component, ErrorHandler} from '@angular/core';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {MatDialog, MatDialogModule} from '@angular/material/dialog';
 import {MatSnackBar} from '@angular/material/snack-bar';
@@ -74,6 +74,7 @@ import {ChatComponent, HIDE_SIDE_PANEL_QUERY_PARAM, INITIAL_USER_INPUT_QUERY_PAR
 
 // Mock EvalTabComponent to satisfy the required viewChild in ChatComponent
 @Component({
+  changeDetection: ChangeDetectionStrategy.Eager,
   selector: 'app-eval-tab',
   template: '',
   standalone: true,
@@ -86,6 +87,7 @@ class MockEvalTabComponent {
 }
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.Eager,
   selector: 'test-host-component',
   template: `<app-chat>
     <div adk-web-chat-container-top id="projected-content">
@@ -510,7 +512,8 @@ describe('ChatComponent', () => {
     it(
         'should display landing page content from "landing" query param',
         fakeAsync(() => {
-          const markdownContent = '# Welcome to the App\n\nThis is the landing page.';
+          const markdownContent =
+              '# Welcome to the App\n\nThis is the landing page.';
           const encodedContent = encodeURIComponent(markdownContent);
           const queryParams = {
             [LANDING_PAGE_CONTENT_QUERY_PARAM]: encodedContent,
@@ -525,7 +528,7 @@ describe('ChatComponent', () => {
           fixture = TestBed.createComponent(ChatComponent);
           component = fixture.componentInstance;
           fixture.detectChanges();
-          tick(); // Allow component to stabilize and load session
+          tick();  // Allow component to stabilize and load session
 
           // Manually call displayLandingPageContent to simulate the effect
           (component as any).displayLandingPageContent();

diff --git a/src/app/components/chat/chat.component.ts b/src/app/components/chat/chat.component.ts
@@ -17,7 +17,7 @@
 
 import {AsyncPipe, DOCUMENT, NgClass} from '@angular/common';
 import {HttpErrorResponse} from '@angular/common/http';
-import {AfterViewInit, ChangeDetectorRef, Component, ElementRef, HostListener, inject, Injectable, OnDestroy, OnInit, Renderer2, signal, viewChild, WritableSignal} from '@angular/core';
+import {AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, HostListener, inject, Injectable, OnDestroy, OnInit, Renderer2, signal, viewChild, WritableSignal} from '@angular/core';
 import {toSignal} from '@angular/core/rxjs-interop';
 import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatButton, MatFabButton} from '@angular/material/button';
@@ -123,6 +123,7 @@ const BIDI_STREAMING_RESTART_WARNING =
     'Restarting bidirectional streaming is not currently supported. Please refresh the page or start a new session.';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.Eager,
   selector: 'app-chat',
   templateUrl: './chat.component.html',
   styleUrl: './chat.component.scss',
@@ -478,10 +479,10 @@ export class ChatComponent implements OnInit, AfterViewInit, OnDestroy {
           const decodedContent = decodeURIComponent(landingContent);
           // Check if the landing message already exists
           if (!this.messages().some(m => m.isLanding)) {
-            this.messages.update(messages => [
-              {role: 'bot', text: decodedContent, isLanding: true},
-              ...messages
-            ]);
+            this.messages.update(
+                messages =>
+                    [{role: 'bot', text: decodedContent, isLanding: true},
+                     ...messages]);
           }
         } catch (e) {
           console.error('Error decoding landing page content:', e);

diff --git a/src/app/components/json-editor/json-editor.component.ts b/src/app/components/json-editor/json-editor.component.ts
@@ -15,11 +15,11 @@
  * limitations under the License.
  */
 
-import {AfterViewInit, Component, ElementRef, Input} from '@angular/core';
+import {AfterViewInit, Component, ElementRef, Input, ChangeDetectionStrategy} from '@angular/core';
 import {createJSONEditor, Mode} from 'vanilla-jsoneditor';
 
 @Component({
-    selector: 'app-json-editor',
+    changeDetection: ChangeDetectionStrategy.Eager,selector: 'app-json-editor',
     templateUrl: './json-editor.component.html',
     styleUrls: ['./json-editor.component.scss'],
 })

diff --git a/src/app/components/message-feedback/message-feedback.component.ts b/src/app/components/message-feedback/message-feedback.component.ts
@@ -16,7 +16,7 @@
  */
 
 import {CommonModule} from '@angular/common';
-import {Component, computed, inject, input, signal} from '@angular/core';
+import {ChangeDetectionStrategy, Component, computed, inject, input, signal} from '@angular/core';
 import {rxResource} from '@angular/core/rxjs-interop';
 import {FormControl, ReactiveFormsModule} from '@angular/forms';
 import {MatButtonModule} from '@angular/material/button';
@@ -31,6 +31,7 @@ import {Feedback, FEEDBACK_SERVICE} from '../../core/services/interfaces/feedbac
 import {MessageFeedbackMessagesInjectionToken} from './message-feedback.component.i18n';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.Eager,
   selector: 'app-message-feedback',
   templateUrl: './message-feedback.component.html',
   styleUrl: './message-feedback.component.scss',

diff --git a/src/app/components/session-tab/delete-session-dialog/delete-session-dialog.component.ts b/src/app/components/session-tab/delete-session-dialog/delete-session-dialog.component.ts
@@ -16,7 +16,7 @@
  */
 
 import {CdkScrollable} from '@angular/cdk/scrolling';
-import {Component, Inject} from '@angular/core';
+import {Component, Inject, ChangeDetectionStrategy} from '@angular/core';
 import {MatButton} from '@angular/material/button';
 import {MAT_DIALOG_DATA, MatDialogActions, MatDialogContent, MatDialogRef, MatDialogTitle} from '@angular/material/dialog';
 
@@ -34,6 +34,7 @@ export interface DeleteSessionDialogData {
  * Dialog component to confirm deleting a session.
  */
 @Component({
+    changeDetection: ChangeDetectionStrategy.Eager,
     selector: 'app-delete-session-dialog',
     templateUrl: './delete-session-dialog.component.html',
     styleUrls: ['./delete-session-dialog.component.scss'],

diff --git a/src/app/components/session-tab/session-tab.component.ts b/src/app/components/session-tab/session-tab.component.ts
@@ -16,7 +16,7 @@
  */
 
 import {AsyncPipe, NgClass} from '@angular/common';
-import {ChangeDetectorRef, Component, EventEmitter, inject, Input, OnInit, Output, signal} from '@angular/core';
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, inject, Input, OnInit, Output, signal} from '@angular/core';
 import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatButtonModule} from '@angular/material/button';
 import {MatFormFieldModule} from '@angular/material/form-field';
@@ -38,6 +38,7 @@ import {SessionTabMessagesInjectionToken} from './session-tab.component.i18n';
  * Displays a list of sessions and handles session loading and pagination.
  */
 @Component({
+  changeDetection: ChangeDetectionStrategy.Eager,
   selector: 'app-session-tab',
   templateUrl: './session-tab.component.html',
   styleUrl: './session-tab.component.scss',

diff --git a/src/app/components/side-panel/side-panel.component.ts b/src/app/components/side-panel/side-panel.component.ts
@@ -16,7 +16,7 @@
  */
 
 import {AsyncPipe, NgComponentOutlet, NgTemplateOutlet} from '@angular/common';
-import {AfterViewInit, Component, computed, effect, EnvironmentInjector, inject, input, output, runInInjectionContext, signal, Type, viewChild, ViewContainerRef, type WritableSignal} from '@angular/core';
+import {AfterViewInit, ChangeDetectionStrategy, Component, computed, effect, EnvironmentInjector, inject, input, output, runInInjectionContext, signal, Type, viewChild, ViewContainerRef, type WritableSignal} from '@angular/core';
 import {toObservable} from '@angular/core/rxjs-interop';
 import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatMiniFabButton} from '@angular/material/button';
@@ -54,6 +54,7 @@ import {SidePanelMessagesInjectionToken} from './side-panel.component.i18n';
  * Side panel component.
  */
 @Component({
+  changeDetection: ChangeDetectionStrategy.Eager,
   selector: 'app-side-panel',
   templateUrl: './side-panel.component.html',
   styleUrls: ['./side-panel.component.scss'],

diff --git a/src/app/components/state-tab/state-tab.component.ts b/src/app/components/state-tab/state-tab.component.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import {Component, inject, Input} from '@angular/core';
+import {ChangeDetectionStrategy, Component, inject, Input} from '@angular/core';
 import {NgxJsonViewerModule} from 'ngx-json-viewer';
 
 import type {SessionState} from '../../core/models/Session';
@@ -24,6 +24,7 @@ import {StateTabMessagesInjectionToken} from './state-tab.component.i18n';
 
 /** Component to display contents of a SessionState. */
 @Component({
+  changeDetection: ChangeDetectionStrategy.Eager,
   selector: 'app-state-tab',
   templateUrl: './state-tab.component.html',
   styleUrl: './state-tab.component.scss',

diff --git a/src/app/components/theme-toggle/theme-toggle.ts b/src/app/components/theme-toggle/theme-toggle.ts
@@ -15,13 +15,15 @@
  * limitations under the License.
  */
 
-import { Component, inject } from '@angular/core';
-import { MatIconModule } from '@angular/material/icon';
-import { MatButtonModule } from '@angular/material/button';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { THEME_SERVICE } from '../../core/services/interfaces/theme';
+import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
+import {MatButtonModule} from '@angular/material/button';
+import {MatIconModule} from '@angular/material/icon';
+import {MatTooltipModule} from '@angular/material/tooltip';
+
+import {THEME_SERVICE} from '../../core/services/interfaces/theme';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.Eager,
   selector: 'app-theme-toggle',
   imports: [MatIconModule, MatButtonModule, MatTooltipModule],
   templateUrl: './theme-toggle.html',

diff --git a/src/app/components/trace-tab/trace-event/trace-event.component.ts b/src/app/components/trace-tab/trace-event/trace-event.component.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 import {AsyncPipe} from '@angular/common';
-import {Component, EventEmitter, inject, Input, OnInit, Output, signal} from '@angular/core';
+import {ChangeDetectionStrategy, Component, EventEmitter, inject, Input, OnInit, Output, signal} from '@angular/core';
 import {toSignal} from '@angular/core/rxjs-interop';
 import {MatIconButton} from '@angular/material/button';
 import {MatDialog} from '@angular/material/dialog';
@@ -36,6 +36,7 @@ import {UI_STATE_SERVICE} from '../../../core/services/interfaces/ui-state';
 import {ViewImageDialogComponent} from '../../view-image-dialog/view-image-dialog.component';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.Eager,
   selector: 'app-trace-event',
   templateUrl: './trace-event.component.html',
   styleUrl: './trace-event.component.scss',

diff --git a/src/app/components/trace-tab/trace-tab.component.ts b/src/app/components/trace-tab/trace-tab.component.ts
@@ -14,20 +14,26 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import {Component, inject, Input, OnChanges, OnInit, SimpleChanges} from '@angular/core';
-import { MatDialogTitle } from '@angular/material/dialog';
-import { MatExpansionPanel, MatExpansionPanelHeader, MatExpansionPanelTitle } from '@angular/material/expansion';
-import { TraceTreeComponent } from './trace-tree/trace-tree.component';
-import { KeyValuePipe } from '@angular/common';
+import {KeyValuePipe} from '@angular/common';
+import {ChangeDetectionStrategy, Component, inject, Input, OnChanges, OnInit, SimpleChanges} from '@angular/core';
+import {MatDialogTitle} from '@angular/material/dialog';
+import {MatExpansionPanel, MatExpansionPanelHeader, MatExpansionPanelTitle} from '@angular/material/expansion';
+
 import {LlmRequest} from '../../core/models/types';
-import { TraceTabMessagesInjectionToken } from './trace-tab.component.i18n';
+
+import {TraceTabMessagesInjectionToken} from './trace-tab.component.i18n';
+import {TraceTreeComponent} from './trace-tree/trace-tree.component';
 
 @Component({
-    selector: 'app-trace-tab',
-    templateUrl: './trace-tab.component.html',
-    styleUrl: './trace-tab.component.scss',
-    standalone: true,
-    imports: [MatDialogTitle, MatExpansionPanel, MatExpansionPanelHeader, MatExpansionPanelTitle, TraceTreeComponent, KeyValuePipe]
+  changeDetection: ChangeDetectionStrategy.Eager,
+  selector: 'app-trace-tab',
+  templateUrl: './trace-tab.component.html',
+  styleUrl: './trace-tab.component.scss',
+  standalone: true,
+  imports: [
+    MatDialogTitle, MatExpansionPanel, MatExpansionPanelHeader,
+    MatExpansionPanelTitle, TraceTreeComponent, KeyValuePipe
+  ]
 })
 
 export class TraceTabComponent implements OnInit, OnChanges {

diff --git a/src/app/components/trace-tab/trace-tree/trace-tree.component.ts b/src/app/components/trace-tab/trace-tree/trace-tree.component.ts
@@ -14,12 +14,13 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import {Component, inject, Input} from '@angular/core';
+import {ChangeDetectionStrategy, Component, inject, Input} from '@angular/core';
 
 import {Span} from '../../../core/models/Trace';
 import {TRACE_SERVICE} from '../../../core/services/interfaces/trace';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.Eager,
   selector: 'app-trace-tree',
   templateUrl: './trace-tree.component.html',
   styleUrl: './trace-tree.component.scss',

diff --git a/src/app/components/view-image-dialog/view-image-dialog.component.ts b/src/app/components/view-image-dialog/view-image-dialog.component.ts
@@ -16,7 +16,7 @@
  */
 
 import {SAFE_VALUES_SERVICE} from '../../core/services/interfaces/safevalues';
-import {Component, inject, OnInit} from '@angular/core';
+import {Component, inject, OnInit, ChangeDetectionStrategy} from '@angular/core';
 import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
 import {SafeHtml, SafeUrl} from '@angular/platform-browser';
 
@@ -25,6 +25,7 @@ export interface ViewImageDialogData {
 }
 
 @Component({
+    changeDetection: ChangeDetectionStrategy.Eager,
     selector: 'app-view-image-dialog',
     templateUrl: './view-image-dialog.component.html',
     styleUrls: ['./view-image-dialog.component.scss'],

diff --git a/src/app/directives/resizable-drawer.directive.spec.ts b/src/app/directives/resizable-drawer.directive.spec.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import {Component} from '@angular/core';
+import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 
@@ -31,6 +31,7 @@ const MOCKED_WINDOW_WIDTH = 2000;
 const MAX_WIDTH = MOCKED_WINDOW_WIDTH / 2;  // 1000
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.Eager,
   template: `
     <div appResizableDrawer>Drawer</div>
     <div class="resize-handler"></div>