google · copybara-service · Oct 27, 2025 · Oct 27, 2025
diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
@@ -24,6 +24,7 @@ import {ActivatedRoute} from '@angular/router';
 import {of} from 'rxjs';
 
 import {AppComponent} from './app.component';
+import {EVAL_TAB_COMPONENT, EvalTabComponent} from './components/eval-tab/eval-tab.component';
 import {AGENT_SERVICE} from './core/services/interfaces/agent';
 import {ARTIFACT_SERVICE} from './core/services/interfaces/artifact';
 import {AUDIO_PLAYING_SERVICE} from './core/services/interfaces/audio-playing';
@@ -171,6 +172,10 @@ describe('AppComponent', () => {
               provide: LOCAL_FILE_SERVICE,
               useValue: localFileService,
             },
+            {
+              provide: EVAL_TAB_COMPONENT,
+              useValue: EvalTabComponent
+            },
             {
               provide: LOCATION_SERVICE,
               useClass: Location,

diff --git a/src/app/components/chat/chat.component.spec.ts b/src/app/components/chat/chat.component.spec.ts
@@ -28,6 +28,10 @@ import {ActivatedRoute, NavigationEnd, Router} from '@angular/router';
 import {BehaviorSubject, NEVER, of, Subject, throwError} from 'rxjs';
 
 import {EvalCase} from '../../core/models/Eval';
+import {
+  EVAL_TAB_COMPONENT,
+  EvalTabComponent,
+} from '../eval-tab/eval-tab.component';
 import {AGENT_SERVICE, AgentService} from '../../core/services/interfaces/agent';
 import {ARTIFACT_SERVICE, ArtifactService,} from '../../core/services/interfaces/artifact';
 import {DOWNLOAD_SERVICE, DownloadService,} from '../../core/services/interfaces/download';
@@ -194,6 +198,7 @@ describe('ChatComponent', () => {
             MockEvalTabComponent,
           ],
           providers: [
+            {provide: EVAL_TAB_COMPONENT, useValue: EvalTabComponent},
             {provide: SESSION_SERVICE, useValue: mockSessionService},
             {provide: ARTIFACT_SERVICE, useValue: mockArtifactService},
             {provide: WEBSOCKET_SERVICE, useValue: mockWebSocketService},

diff --git a/src/app/components/eval-tab/eval-tab.component.ts b/src/app/components/eval-tab/eval-tab.component.ts
@@ -16,7 +16,7 @@
  */
 
 import {SelectionModel} from '@angular/cdk/collections';
-import {ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, input, OnChanges, OnInit, output, signal, SimpleChanges, viewChildren} from '@angular/core';
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, input, OnChanges, OnInit, output, signal, SimpleChanges, viewChildren, InjectionToken, Type} from '@angular/core';
 import {MatCheckbox} from '@angular/material/checkbox';
 import {MatDialog} from '@angular/material/dialog';
 import { MatTableDataSource, MatTable, MatColumnDef, MatHeaderCellDef, MatHeaderCell, MatCellDef, MatCell, MatHeaderRowDef, MatHeaderRow, MatRowDef, MatRow } from '@angular/material/table';
@@ -39,6 +39,9 @@ import { MatTooltip } from '@angular/material/tooltip';
 import { NgClass } from '@angular/common';
 import { MatProgressSpinner } from '@angular/material/progress-spinner';
 
+export const EVAL_TAB_COMPONENT = new InjectionToken<Type<EvalTabComponent>>(
+    'EVAL_TAB_COMPONENT',
+);
 
 interface EvaluationResult {
   setId: string;
@@ -75,7 +78,6 @@ interface AppEvaluationResult {
   [key: string]: SetEvaluationResult;
 }
 
-
 @Component({
     selector: 'app-eval-tab',
     templateUrl: './eval-tab.component.html',
@@ -183,6 +185,7 @@ export class EvalTabComponent implements OnInit, OnChanges {
             if (sets !== null) {
               this.shouldShowTab.emit(true);
               this.evalsets = sets;
+              this.changeDetectorRef.detectChanges();
             }
           });
       ;
@@ -198,6 +201,7 @@ export class EvalTabComponent implements OnInit, OnChanges {
     dialogRef.afterClosed().subscribe((needRefresh) => {
       if (needRefresh) {
         this.getEvalSet();
+        this.changeDetectorRef.detectChanges();
       }
     });
   }
@@ -216,6 +220,7 @@ export class EvalTabComponent implements OnInit, OnChanges {
     dialogRef.afterClosed().subscribe((needRefresh) => {
       if (needRefresh) {
         this.listEvalCases();
+        this.changeDetectorRef.detectChanges();
       }
     });
   }
@@ -256,6 +261,7 @@ export class EvalTabComponent implements OnInit, OnChanges {
           this.currentEvalResultBySet.set(this.selectedEvalSet, res);
 
           this.getEvaluationResult();
+          this.changeDetectorRef.detectChanges();
         });
   }
 
@@ -490,6 +496,7 @@ export class EvalTabComponent implements OnInit, OnChanges {
           this.deletedEvalCaseIndex = this.evalCases.indexOf(evalCaseId);
           this.selectedEvalCase.set(null);
           this.listEvalCases();
+          this.changeDetectorRef.detectChanges();
         });
   }
 
@@ -543,6 +550,7 @@ export class EvalTabComponent implements OnInit, OnChanges {
 
                   this.appEvaluationResults[this.appName()][res.evalSetId][timeStamp] =
                       uiEvaluationResult;
+                  this.changeDetectorRef.detectChanges();
                 });
           }
         });

diff --git a/src/app/components/side-panel/side-panel.component.html b/src/app/components/side-panel/side-panel.component.html
@@ -95,16 +95,7 @@
         <ng-template mat-tab-label>
           <span class="tab-label">{{ i18n.evalTabLabel }}</span>
         </ng-template>
-        <app-eval-tab
-          [appName]="appName()"
-          [userId]="userId()"
-          [sessionId]="sessionId()"
-          (sessionSelected)="sessionSelected.emit($event)"
-          (evalCaseSelected)="evalCaseSelected.emit($event)"
-          (evalSetIdSelected)="evalSetIdSelected.emit($event)"
-          (shouldReturnToSession)="returnToSession.emit($event)"
-          (evalNotInstalledMsg)="evalNotInstalled.emit($event)"
-        ></app-eval-tab>
+        <ng-container #evalTabContainer></ng-container>
       </mat-tab>
     }
   </mat-tab-group>

diff --git a/src/app/components/side-panel/side-panel.component.spec.ts b/src/app/components/side-panel/side-panel.component.spec.ts
@@ -27,7 +27,10 @@ import {By} from '@angular/platform-browser';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {ActivatedRoute, Router} from '@angular/router';
 import {of} from 'rxjs';
-
+import {
+  EVAL_TAB_COMPONENT,
+  EvalTabComponent,
+} from '../eval-tab/eval-tab.component';
 import {AgentService} from '../../core/services/agent.service';
 import {ArtifactService} from '../../core/services/artifact.service';
 import {AudioRecordingService} from '../../core/services/audio-recording.service';
@@ -181,6 +184,7 @@ describe('SidePanelComponent', () => {
         .configureTestingModule({
           imports: [SidePanelComponent, MatDialogModule, NoopAnimationsModule],
           providers: [
+            {provide: EVAL_TAB_COMPONENT, useValue: EvalTabComponent},
             {provide: SESSION_SERVICE, useValue: mockSessionService},
             {provide: ARTIFACT_SERVICE, useValue: mockArtifactService},
             {
@@ -202,8 +206,7 @@ describe('SidePanelComponent', () => {
             {provide: Location, useValue: mockLocation},
             {provide: SAFE_VALUES_SERVICE, useClass: MockSafeValuesService},
           ],
-        })
-        .compileComponents();
+        });
 
     fixture = TestBed.createComponent(SidePanelComponent);
     component = fixture.componentInstance;
@@ -426,8 +429,10 @@ describe('SidePanelComponent', () => {
           beforeEach(() => {
             spyOn(component.evalCaseSelected, 'emit');
             const evalTab = fixture.debugElement.query(EVAL_TAB_SELECTOR);
-            evalTab.triggerEventHandler(
-                'evalCaseSelected', {evalId: 'eval1'} as any);
+            evalTab.componentInstance.evalCaseSelected.emit({
+              evalId: 'eval1',
+            } as any);
+            fixture.detectChanges();
           });
           it('emits evalCaseSelected', () => {
             expect(component.evalCaseSelected.emit).toHaveBeenCalledWith({
@@ -440,7 +445,8 @@ describe('SidePanelComponent', () => {
           beforeEach(() => {
             spyOn(component.evalSetIdSelected, 'emit');
             const evalTab = fixture.debugElement.query(EVAL_TAB_SELECTOR);
-            evalTab.triggerEventHandler('evalSetIdSelected', 'set1');
+            evalTab.componentInstance.evalSetIdSelected.emit('set1');
+            fixture.detectChanges();
           });
           it('emits evalSetIdSelected', () => {
             expect(component.evalSetIdSelected.emit)
@@ -452,7 +458,8 @@ describe('SidePanelComponent', () => {
           beforeEach(() => {
             spyOn(component.returnToSession, 'emit');
             const evalTab = fixture.debugElement.query(EVAL_TAB_SELECTOR);
-            evalTab.triggerEventHandler('shouldReturnToSession', true);
+            evalTab.componentInstance.shouldReturnToSession.emit(true);
+            fixture.detectChanges();
           });
           it('emits returnToSession', () => {
             expect(component.returnToSession.emit).toHaveBeenCalledWith(true);
@@ -463,7 +470,8 @@ describe('SidePanelComponent', () => {
           beforeEach(() => {
             spyOn(component.evalNotInstalled, 'emit');
             const evalTab = fixture.debugElement.query(EVAL_TAB_SELECTOR);
-            evalTab.triggerEventHandler('evalNotInstalledMsg', 'error');
+            evalTab.componentInstance.evalNotInstalledMsg.emit('error');
+            fixture.detectChanges();
           });
           it('emits evalNotInstalled', () => {
             expect(component.evalNotInstalled.emit)

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} from '@angular/common';
-import {Component, inject, input, output, signal, Type, viewChild, type WritableSignal} from '@angular/core';
+import {Component, inject, input, output, signal, Type, viewChild, type WritableSignal, ViewContainerRef, AfterViewInit, EnvironmentInjector, DestroyRef, effect, runInInjectionContext} from '@angular/core';
 import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatMiniFabButton} from '@angular/material/button';
 import {MatOption} from '@angular/material/core';
@@ -28,13 +28,14 @@ import {MatTooltip} from '@angular/material/tooltip';
 import {type SafeHtml} from '@angular/platform-browser';
 import {NgxJsonViewerModule} from 'ngx-json-viewer';
 import {Observable, of} from 'rxjs';
+import {first} from 'rxjs/operators';
 
 import {EvalCase} from '../../core/models/Eval';
 import {Session} from '../../core/models/Session';
 import {FEATURE_FLAG_SERVICE} from '../../core/services/interfaces/feature-flag';
 import {LOGO_COMPONENT} from '../../injection_tokens';
 import {ArtifactTabComponent} from '../artifact-tab/artifact-tab.component';
-import {EvalTabComponent} from '../eval-tab/eval-tab.component';
+import {EVAL_TAB_COMPONENT, EvalTabComponent} from '../eval-tab/eval-tab.component';
 import {EventTabComponent} from '../event-tab/event-tab.component';
 import {SessionTabComponent} from '../session-tab/session-tab.component';
 import {StateTabComponent} from '../state-tab/state-tab.component';
@@ -51,16 +52,28 @@ import {SidePanelMessagesInjectionToken} from './side-panel.component.i18n';
   styleUrls: ['./side-panel.component.scss'],
   standalone: true,
   imports: [
-    AsyncPipe,         FormsModule,          NgComponentOutlet,
-    MatTooltip,        MatTabGroup,          MatTab,
-    MatTabLabel,       TraceTabComponent,    EventTabComponent,
-    StateTabComponent, ArtifactTabComponent, SessionTabComponent,
-    EvalTabComponent,  MatPaginator,         MatMiniFabButton,
-    MatIcon,           NgxJsonViewerModule,  MatOption,
-    MatSelect,         ReactiveFormsModule,
+    AsyncPipe,
+    FormsModule,
+    NgComponentOutlet,
+    MatTooltip,
+    MatTabGroup,
+    MatTab,
+    MatTabLabel,
+    TraceTabComponent,
+    EventTabComponent,
+    StateTabComponent,
+    ArtifactTabComponent,
+    SessionTabComponent,
+    MatPaginator,
+    MatMiniFabButton,
+    MatIcon,
+    NgxJsonViewerModule,
+    MatOption,
+    MatSelect,
+    ReactiveFormsModule,
   ],
 })
-export class SidePanelComponent {
+export class SidePanelComponent implements AfterViewInit {
   appName = input('');
   userId = input('');
   sessionId = input('');
@@ -99,12 +112,17 @@ export class SidePanelComponent {
   readonly eventTabComponent = viewChild(EventTabComponent);
   readonly sessionTabComponent = viewChild(SessionTabComponent);
   readonly evalTabComponent = viewChild(EvalTabComponent);
+  readonly evalTabContainer =
+      viewChild('evalTabContainer', {read: ViewContainerRef});
 
   readonly logoComponent: Type<Component> | null = inject(LOGO_COMPONENT, {
     optional: true,
   });
   readonly i18n = inject(SidePanelMessagesInjectionToken);
   readonly featureFlagService = inject(FEATURE_FLAG_SERVICE);
+  readonly evalTabComponentClass = inject(EVAL_TAB_COMPONENT, {optional: true});
+  private readonly environmentInjector = inject(EnvironmentInjector);
+  private readonly destroyRef = inject(DestroyRef);
 
   // Feature flag references for use in template.
   readonly isAlwaysOnSidePanelEnabledObs =
@@ -120,5 +138,59 @@ export class SidePanelComponent {
   readonly isManualStateUpdateEnabledObs =
       this.featureFlagService.isManualStateUpdateEnabled();
   readonly isBidiStreamingEnabledObs =
-      this.featureFlagService.isBidiStreamingEnabled
+      this.featureFlagService.isBidiStreamingEnabled;
+
+  ngAfterViewInit() {
+    // Wait one tick until the eval tab container is ready.
+    setTimeout(() => {
+      this.initEvalTab();
+    });
+  }
+
+  /**
+   * Dynamically create the eval tab. We must do this programmatically until
+   * ngComponentOutlet supports input/output bindings: https://github.com/angular/angular/issues/63099
+  */
+  private initEvalTab() {
+    this.isEvalEnabledObs.pipe(first()).subscribe((isEvalEnabled) => {
+      if (isEvalEnabled) {
+        const evalTabComponent = this.evalTabContainer()?.createComponent(
+            this.evalTabComponentClass ?? EvalTabComponent,
+            {
+              environmentInjector: this.environmentInjector,
+            }
+        );
+        if (!evalTabComponent) return;
+
+        runInInjectionContext(this.environmentInjector, () => {
+          // Ensure inputs are updated dynamically using effect.
+          effect(() => {
+            evalTabComponent.setInput('appName', this.appName());
+            evalTabComponent.setInput('userId', this.userId());
+            evalTabComponent.setInput('sessionId', this.sessionId());
+          });
+        });
+        evalTabComponent.instance.sessionSelected
+          .subscribe((session: Session) => {
+            this.sessionSelected.emit(session);
+          });
+        evalTabComponent.instance.evalCaseSelected
+          .subscribe((evalCase: EvalCase) => {
+            this.evalCaseSelected.emit(evalCase);
+          });
+        evalTabComponent.instance.evalSetIdSelected
+          .subscribe((evalSetId: string) => {
+            this.evalSetIdSelected.emit(evalSetId);
+          });
+        evalTabComponent.instance.shouldReturnToSession
+          .subscribe((returnToSession: boolean) => {
+            this.returnToSession.emit(returnToSession);
+          });
+        evalTabComponent.instance.evalNotInstalledMsg
+          .subscribe((message: string) => {
+            this.evalNotInstalled.emit(message);
+          });
+      }
+    });
+  }
 }
diff --git a/src/main.ts b/src/main.ts
@@ -29,6 +29,7 @@ import {provideAnimations} from '@angular/platform-browser/animations';
 import {AppRoutingModule} from './app/app-routing.module';
 import {AppComponent} from './app/app.component';
 import {CustomLogoComponent} from './app/components/custom-logo/custom-logo.component';
+import {EVAL_TAB_COMPONENT, EvalTabComponent} from './app/components/eval-tab/eval-tab.component';
 import {MarkdownComponent} from './app/components/markdown/markdown.component';
 import {MARKDOWN_COMPONENT} from './app/components/markdown/markdown.component.interface';
 import {AgentService} from './app/core/services/agent.service';
@@ -109,6 +110,7 @@ fetch('./assets/config/runtime-config.json')
           ...(config.logo ?
                   [{provide: LOGO_COMPONENT, useValue: CustomLogoComponent}] :
                   []),
+          {provide: EVAL_TAB_COMPONENT, useValue: EvalTabComponent},
           provideAnimations(),
           {provide: LOCATION_SERVICE, useClass: Location}
         ]