ADK changes

PiperOrigin-RevId: 812476207

Author: google-genai-bot

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);
+  }
 }