ADK changes

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

@@ -53,7 +53,7 @@ import {EVAL_SERVICE, EvalService} from '../../core/services/eval.service';
 import {EVENT_SERVICE, EventService} from '../../core/services/event.service';
 import {FEATURE_FLAG_SERVICE, FeatureFlagService} from '../../core/services/feature-flag.service';
 import {GRAPH_SERVICE, GraphService} from '../../core/services/graph.service';
-import {SAFE_VALUES_SERVICE} from '../../core/services/interfaces/safevalues';
+import {SAFE_VALUES_SERVICE, SafeValuesService} from '../../core/services/interfaces/safevalues';
 import {STRING_TO_COLOR_SERVICE} from '../../core/services/interfaces/string-to-color';
 import {SESSION_SERVICE, SessionService} from '../../core/services/session.service';
 import {TRACE_SERVICE, TraceService} from '../../core/services/trace.service';
@@ -271,7 +271,6 @@ export class ChatComponent implements OnInit, AfterViewInit, OnDestroy {
   hoveredEventMessageIndices: number[] = [];
 
   constructor(
-      private sanitizer: DomSanitizer,
       @Inject(SESSION_SERVICE) private sessionService: SessionService,
       @Inject(ARTIFACT_SERVICE) private artifactService: ArtifactService,
       @Inject(AUDIO_SERVICE) private audioService: AudioService,
@@ -951,7 +950,8 @@ export class ChatComponent implements OnInit, AfterViewInit, OnDestroy {
         const graphSrc = res.dotSrc;
         const svg = await this.graphService.render(graphSrc);
         this.rawSvgString = svg;
-        this.renderedEventGraph = this.sanitizer.bypassSecurityTrustHtml(svg);
+        this.renderedEventGraph =
+            this.safeValuesService.bypassSecurityTrustHtml(svg);
       });
   }
 
@@ -1405,7 +1405,8 @@ export class ChatComponent implements OnInit, AfterViewInit, OnDestroy {
         }
         const svg = await this.graphService.render(res.dotSrc);
         this.rawSvgString = svg;
-        this.renderedEventGraph = this.sanitizer.bypassSecurityTrustHtml(svg);
+        this.renderedEventGraph =
+            this.safeValuesService.bypassSecurityTrustHtml(svg);
       });
   }
 

src/app/components/markdown/testing/mock-markdown.component.ts

@@ -0,0 +1,44 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {CommonModule} from '@angular/common';
+import {Component, input} from '@angular/core';
+
+import {MarkdownComponentInterface} from '../markdown.component.interface';
+
+/**
+ * Mock markdown component for testing.
+ */
+@Component({
+  selector: 'app-markdown',
+  imports: [CommonModule],
+  template: `
+    <div class="mock-markdown-content">
+      <span [ngStyle]="{
+              'font-style': thought() ? 'italic' : 'normal',
+              'color': thought() ? '#9aa0a6' : 'white'
+            }">
+          {{ text() }}
+      </span>
+    </div>
+  `,
+  standalone: true,
+})
+export class MockMarkdownComponent implements MarkdownComponentInterface {
+  text = input<string>('');
+  thought = input<boolean>(false);
+}

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

@@ -35,8 +35,9 @@ import {EVENT_SERVICE, EventService} from '../../core/services/event.service';
 import {FEATURE_FLAG_SERVICE, FeatureFlagService,} from '../../core/services/feature-flag.service';
 import {SAFE_VALUES_SERVICE} from '../../core/services/interfaces/safevalues';
 import {SESSION_SERVICE, SessionService,} from '../../core/services/session.service';
-import {TRACE_SERVICE, TraceService} from '../../core/services/trace.service';
+import {MockFeatureFlagService} from '../../core/services/testing/mock-feature-flag.service';
 import {MockSafeValuesService} from '../../core/services/testing/mock-safevalues.service';
+import {TRACE_SERVICE, TraceService} from '../../core/services/trace.service';
 import {VIDEO_SERVICE, VideoService} from '../../core/services/video.service';
 import {WEBSOCKET_SERVICE, WebSocketService,} from '../../core/services/websocket.service';
 
@@ -71,7 +72,7 @@ describe('SidePanelComponent', () => {
   let mockEvalService: jasmine.SpyObj<EvalService>;
   let mockTraceService: jasmine.SpyObj<TraceService>;
   let mockAgentService: jasmine.SpyObj<AgentService>;
-  let mockFeatureFlagService: jasmine.SpyObj<FeatureFlagService>;
+  let mockFeatureFlagService: MockFeatureFlagService;
   let mockDialog: jasmine.SpyObj<MatDialog>;
   let mockSnackBar: jasmine.SpyObj<MatSnackBar>;
   let mockRouter: jasmine.SpyObj<Router>;
@@ -135,10 +136,7 @@ describe('SidePanelComponent', () => {
         'AgentService',
         ['listApps', 'getApp', 'getLoadingState', 'setApp', 'runSse'],
     );
-    mockFeatureFlagService = jasmine.createSpyObj(
-        'FeatureFlagService',
-        ['isImportSessionEnabled', 'isEditFunctionArgsEnabled'],
-    );
+    mockFeatureFlagService = new MockFeatureFlagService();
     mockDialog = jasmine.createSpyObj('MatDialog', ['open']);
     mockSnackBar = jasmine.createSpyObj('MatSnackBar', ['open']);
     mockRouter = jasmine.createSpyObj('Router', ['navigate']);
@@ -154,6 +152,8 @@ describe('SidePanelComponent', () => {
     mockEvalService.listEvalResults.and.returnValue(of([]));
     mockFeatureFlagService.isEditFunctionArgsEnabled.and.returnValue(of(false));
     mockFeatureFlagService.isImportSessionEnabled.and.returnValue(of(false));
+    mockFeatureFlagService.isAlwaysOnSidePanelEnabled.and.returnValue(
+        of(false));
     mockEvalService.getEvalResult.and.returnValue(of({}));
 
     await TestBed

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

@@ -69,6 +69,11 @@ describe('TraceEventComponent', () => {
     traceService.eventData$.next(
         new Map<string, any>([[EVENT_ID, EVENT_DATA]]));
     eventService.getEventTraceResponse.next({
+      name: 'test-span',
+      trace_id: 'trace-id',
+      span_id: 'span-id',
+      start_time: 1,
+      end_time: 2,
       'gcp.vertex.agent.llm_request': '{"data": "request"}',
       'gcp.vertex.agent.llm_response': '{"data": "response"}',
     });

src/app/components/trace-tab/trace-tree/trace-tree.component.html

@@ -36,14 +36,14 @@
         <span
           class="material-symbols-outlined"
           style="margin-right: 8px"
-          [ngStyle]="{ color: isEventRow(node)? '#8AB4F8' : 'white' }"
+          [class.is-event-row]="isEventRow(node)"
         >
           {{ getSpanIcon(node.span.name) }}
         </span>
         <div
           class="trace-label"
           [style.width.px]="400 - node.level * 20"
-          [ngStyle]="{ color: isEventRow(node)? '#8AB4F8' : 'white' }"
+          [class.is-event-row]="isEventRow(node)"
         >
           {{ node.span.name }}
         </div>
@@ -58,7 +58,7 @@
         </div>
         @if (getRelativeWidth(node.span) < 10) {
         <span
-          style="position: absolute; color: #8dabbf"
+          class="short-trace-bar-duration"
           [style.left.%]="getRelativeStart(node.span) + 5"
           >{{ (toMs(node.span.end_time) - toMs(node.span.start_time)).toFixed(2) }}ms</span
         >

src/app/components/trace-tab/trace-tree/trace-tree.component.scss

@@ -52,6 +52,11 @@
   font-family: 'Google Sans';
 }
 
+.short-trace-bar-duration {
+  position: absolute;
+  color: #8dabbf;
+}
+
 .trace-duration {
   color: #888;
   font-weight: normal;
@@ -124,3 +129,12 @@
 .invocation-id {
   font-family: 'Google Sans Mono', monospace;
 }
+
+.trace-row-left span,
+.trace-row-left div {
+  color: white;
+}
+
+.trace-row-left .is-event-row {
+  color: #8ab4f8;
+}

src/app/core/models/Session.ts

@@ -32,4 +32,5 @@ export interface Session {
   userId?: string;
   state?: SessionState;
   events?: Event[];
+  lastUpdateTime?: number;
 }

src/app/core/models/Trace.ts

@@ -23,6 +23,9 @@ export interface Span {
   trace_id: string;
   attributes?: any;
   children?: Span[];
+  // For backward compatibility.
+  'gcp.vertex.agent.llm_request'?: string;
+  'gcp.vertex.agent.llm_response'?: string;
 }
 
 export interface SpanNode extends Span {

src/app/core/services/interfaces/safevalues.ts

@@ -16,6 +16,7 @@
  */
 
 import {InjectionToken} from '@angular/core';
+import {SafeHtml} from '@angular/platform-browser';
 
 export const SAFE_VALUES_SERVICE = new InjectionToken<SafeValuesService>(
   'SafeValuesService',
@@ -37,6 +38,8 @@ export abstract class SafeValuesService {
 
   abstract setAnchorHref(a: HTMLAnchorElement, url: string): void;
 
+  abstract bypassSecurityTrustHtml(value: string): SafeHtml;
+
   openBase64InNewTab(dataUrl: string, mimeType: string) {
     try {
       if (!dataUrl) {

src/app/core/services/safevalues.service.ts

@@ -15,7 +15,8 @@
  * limitations under the License.
  */
 
-import {Injectable} from '@angular/core';
+import {inject, Injectable} from '@angular/core';
+import {DomSanitizer, SafeHtml} from '@angular/platform-browser';
 
 import {SafeValuesService} from './interfaces/safevalues';
 
@@ -27,6 +28,8 @@ import {SafeValuesService} from './interfaces/safevalues';
   providedIn: 'root',
 })
 export class SafeValuesServiceImpl extends SafeValuesService {
+  private sanitizer = inject(DomSanitizer);
+
   windowOpen(window: Window,
     url: string,
     target?: string,
@@ -47,4 +50,8 @@ export class SafeValuesServiceImpl extends SafeValuesService {
   setAnchorHref(a: HTMLAnchorElement, url: string) {
     a.href = url;
   }
+
+  bypassSecurityTrustHtml(content: string): SafeHtml {
+    return this.sanitizer.bypassSecurityTrustHtml(content);
+  }
 }

src/app/core/services/session.service.ts

@@ -20,6 +20,7 @@ import {Injectable, InjectionToken} from '@angular/core';
 import {Observable} from 'rxjs';
 
 import {URLUtil} from '../../../utils/url-util';
+import {Session} from '../models/Session';
 
 export const SESSION_SERVICE = new InjectionToken<SessionService>('SessionService');
 
@@ -36,7 +37,7 @@ export class SessionService {
           this.apiServerDomain + `/apps/${appName}/users/${userId}/sessions`;
       return this.http.post<any>(url, null);
     }
-    return new Observable<any>();
+    return new Observable<Session>();
   }
 
   listSessions(userId: string, appName: string) {
@@ -46,7 +47,7 @@ export class SessionService {
 
       return this.http.get<any>(url);
     }
-    return new Observable<[]>();
+    return new Observable<Session[]>();
   }
 
   deleteSession(userId: string, appName: string, sessionId: string) {
@@ -60,21 +61,21 @@ export class SessionService {
     const url = this.apiServerDomain +
         `/apps/${appName}/users/${userId}/sessions/${sessionId}`;
 
-    return this.http.get<any>(url);
+    return this.http.get<Session>(url);
   }
 
   importSession(userId: string, appName: string, events: any[]) {
     if (this.apiServerDomain != undefined) {
       const url = this.apiServerDomain +
           `/apps/${appName}/users/${userId}/sessions`;
 
-      return this.http.post<any>(url, {
+      return this.http.post<Session>(url, {
         appName: appName,
         userId: userId,
         events: events,
       });
     }
 
-    return new Observable<any>();
+    return new Observable<Session>();
   }
 }

src/app/core/services/testing/mock-event.service.ts

@@ -18,17 +18,18 @@
 import {Injectable} from '@angular/core';
 import {of, ReplaySubject} from 'rxjs';
 
+import {Span} from '../../models/Trace';
 import {EventService} from '../event.service';
 
 @Injectable()
 export class MockEventService implements Partial<EventService> {
-  getEventTraceResponse = new ReplaySubject<any>(1);
+  getEventTraceResponse = new ReplaySubject<Span>(1);
   getEventTrace = jasmine.createSpy('getEventTrace')
                       .and.returnValue(this.getEventTraceResponse);
-  getTraceResponse = new ReplaySubject<any[]>(1);
+  getTraceResponse = new ReplaySubject<Span[]>(1);
   getTrace =
       jasmine.createSpy('getTrace').and.returnValue(this.getTraceResponse);
-  getEventResponse = new ReplaySubject<any>(1);
+  getEventResponse = new ReplaySubject<{dotSrc?: string}>(1);
   getEvent =
       jasmine.createSpy('getEvent').and.returnValue(this.getEventResponse);
 }

src/app/core/services/testing/mock-feature-flag.service.ts

@@ -36,4 +36,12 @@ export class MockFeatureFlagService implements Partial<FeatureFlagService> {
   isA2ACardEnabledResponse = new ReplaySubject<boolean>(1);
   isA2ACardEnabled = jasmine.createSpy('isA2ACardEnabled')
                          .and.returnValue(this.isA2ACardEnabledResponse);
+  isAlwaysOnSidePanelEnabledResponse = new ReplaySubject<boolean>(1);
+  isAlwaysOnSidePanelEnabled =
+      jasmine.createSpy('isAlwaysOnSidePanelEnabled')
+          .and.returnValue(this.isAlwaysOnSidePanelEnabledResponse);
+  isApplicationSelectorEnabledResponse = new ReplaySubject<boolean>(1);
+  isApplicationSelectorEnabled =
+      jasmine.createSpy('isApplicationSelectorEnabled')
+          .and.returnValue(this.isApplicationSelectorEnabledResponse);
 }

src/app/core/services/testing/mock-safevalues.service.ts

@@ -26,4 +26,5 @@ export class MockSafeValuesService implements Partial<SafeValuesService> {
   openBlobUrl = jasmine.createSpy('openBlobUrl');
   setAnchorHref = jasmine.createSpy('setAnchorHref');
   openBase64InNewTab = jasmine.createSpy('openBase64InNewTab');
+  bypassSecurityTrustHtml = jasmine.createSpy('bypassSecurityTrustHtml');
 }