Merge recent workflow changes to main

package.json

@@ -29,7 +29,6 @@
     "@viz-js/viz": "^3.12.0",
     "codemirror": "^6.0.2",
     "mermaid": "^11.14.0",
-    "ngx-json-viewer": "^3.2.1",
     "ngx-markdown": "^21.0.1",
     "ngx-vflow": "^1.16.4",
     "rxjs": "~7.8.0",
@@ -39,6 +38,7 @@
     "uuidv7": "^1.0.2",
     "vanilla-jsoneditor": "^3.6.0",
     "yaml": "^2.8.0",
+    "zod": "^4.4.3",
     "zone.js": "~0.15.0"
   },
   "devDependencies": {

src/app/components/add-item-dialog/add-item-dialog.component.ts

@@ -118,7 +118,7 @@ export class AddItemDialogComponent {
     const allTabAgents = new Map<string, AgentNode>();
     YamlUtils.generateYamlFile(rootAgent, formData, trimmedName, allTabAgents);
 
-    this.agentService.agentBuildTmp(formData).subscribe((success) => {
+    this.agentService.agentBuildTmp(trimmedName, formData).subscribe((success) => {
       if (success) {
         this.router.navigate(['/'], {
             queryParams: { app: trimmedName, mode: 'builder' }

src/app/components/builder-assistant/builder-assistant.component.ts

@@ -277,7 +277,7 @@ export class BuilderAssistantComponent implements OnInit, AfterViewChecked {
 
     YamlUtils.generateYamlFile(rootAgent, formData, appName, tabAgents);
 
-    this.agentService.agentBuildTmp(formData).subscribe((success) => {
+    this.agentService.agentBuildTmp(appName, formData).subscribe((success) => {
       if (success) {
         console.log("save to tmp")
       } else {

src/app/components/builder-tabs/builder-tabs.component.ts

@@ -774,9 +774,9 @@ export class BuilderTabsComponent {
 
     YamlUtils.generateYamlFile(rootAgent, formData, appName, tabAgents);
 
-    this.agentService.agentBuildTmp(formData).subscribe((success) => {
+    this.agentService.agentBuildTmp(appName, formData).subscribe((success) => {
       if (success) {
-        this.agentService.agentBuild(formData).subscribe((success) => {
+        this.agentService.agentBuild(appName, formData).subscribe((success) => {
           if (success) {
             this.router.navigate(['/'], {
               queryParams: { app: appName }

src/app/components/canvas/canvas.component.ts

@@ -1229,7 +1229,7 @@ export class CanvasComponent implements AfterViewInit, OnInit, OnChanges {
     const agentToolBoards = this.agentToolBoards();
     YamlUtils.generateYamlFile(rootAgent, formData, appName, agentToolBoards);
 
-    this.agentService.agentBuild(formData).subscribe((success) => {
+    this.agentService.agentBuild(appName, formData).subscribe((success) => {
       if (success) {
         this.router
           .navigate(["/"], {

src/app/components/chat-panel/chat-panel.component.html

@@ -58,7 +58,7 @@ <h3 style="margin: 0; color: var(--mat-sys-primary);">Evaluation Result</h3>
   @if (uiEvents.length === 0 && agentReadme) {
   <div class="readme-content">
     <ng-container [ngComponentOutlet]="markdownComponent"
-      [ngComponentOutletInputs]="{text: agentReadme, thought: false}"></ng-container>
+      [ngComponentOutletInputs]="{text: agentReadme, thought: false, isReadme: true}"></ng-container>
   </div>
   }
   @for (item of displayItems; track item; let i = $index) {

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

@@ -33,7 +33,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatSelectModule } from '@angular/material/select';
-import { NgxJsonViewerModule } from 'ngx-json-viewer';
+import { CustomJsonViewerComponent } from '../custom-json-viewer/custom-json-viewer.component';
 import { EMPTY, merge, NEVER, of, Subject } from 'rxjs';
 import { catchError, filter, first, switchMap, tap } from 'rxjs/operators';
 
@@ -42,6 +42,7 @@ import { isComputerUseResponse, isVisibleComputerUseClick } from '../../core/mod
 import type { EvalCase } from '../../core/models/Eval';
 import { FunctionCall, FunctionResponse } from '../../core/models/types';
 import { UiEvent } from '../../core/models/UiEvent';
+import { Span } from '../../core/models/Trace';
 import { AGENT_SERVICE } from '../../core/services/interfaces/agent';
 import { FEATURE_FLAG_SERVICE } from '../../core/services/interfaces/feature-flag';
 import { SAFE_VALUES_SERVICE } from '../../core/services/interfaces/safevalues';
@@ -110,7 +111,6 @@ export type DisplayItem = {
     MatMenuModule,
     MatProgressSpinnerModule,
     MatSlideToggleModule,
-    NgxJsonViewerModule,
     MatTooltipModule,
     MatButtonToggleModule,
     MatTabsModule,
@@ -126,7 +126,7 @@ export class ChatPanelComponent implements OnChanges, AfterViewInit {
   sessionName = input<string>('');
   @Input() uiEvents: UiEvent[] = [];
   @Input() showBranches: boolean = false;
-  @Input() traceData: any[] = [];
+  @Input() traceData: Span[] = [];
   @Input() isChatMode: boolean = true;
   @Input() evalCase: EvalCase | null = null;
   @Input() isEvalEditMode: boolean = false;
@@ -147,7 +147,7 @@ export class ChatPanelComponent implements OnChanges, AfterViewInit {
   @Input() sessionId: string = '';
   @Input() viewMode: 'events' | 'traces' = 'events';
   @Input() shouldShowEvent?: (uiEvent: UiEvent) => boolean;
-  spansByInvocationId = new Map<string, any[]>();
+  spansByInvocationId = new Map<string, Span[]>();
   displayItems: DisplayItem[] = [];
   eventsScrollTop = -1;
   tracesScrollTop = -1;
@@ -234,13 +234,6 @@ export class ChatPanelComponent implements OnChanges, AfterViewInit {
   evalCaseResult = input<any | null>(null);
   showEvalSummary = input<boolean>(false);
 
-
-
-
-
-
-
-
   constructor() {
     effect(() => {
       const sessionName = this.sessionName();
@@ -346,15 +339,15 @@ export class ChatPanelComponent implements OnChanges, AfterViewInit {
     if (changes['viewMode']) {
       const prevMode = changes['viewMode'].previousValue;
       const currentMode = changes['viewMode'].currentValue;
-      
+
       if (this.scrollContainer?.nativeElement) {
         if (prevMode === 'events') {
           this.eventsScrollTop = this.scrollContainer.nativeElement.scrollTop;
         } else if (prevMode === 'traces') {
           this.tracesScrollTop = this.scrollContainer.nativeElement.scrollTop;
         }
       }
-      
+
       setTimeout(() => {
         if (this.scrollContainer?.nativeElement) {
           if (currentMode === 'events' && this.eventsScrollTop !== -1) {
@@ -465,29 +458,25 @@ export class ChatPanelComponent implements OnChanges, AfterViewInit {
   }
 
   rebuildTrace() {
-    const invocTraces = this.traceData.reduce((map: any, item: any) => {
-      const key = item.trace_id;
+    const invocTraces = this.traceData.reduce((map: Map<string, Span[]>, item: Span) => {
+      const key = String(item.trace_id);
       const group = map.get(key);
       if (group) {
         group.push(item);
-        group.sort((a: any, b: any) => a.start_time - b.start_time);
+        group.sort((a: Span, b: Span) => a.start_time - b.start_time);
       } else {
         map.set(key, [item]);
       }
       return map;
-    }, new Map<string, any[]>());
+    }, new Map<string, Span[]>());
 
-    this.spansByInvocationId = new Map<string, any[]>();
+    this.spansByInvocationId = new Map<string, Span[]>();
     for (const [key, group] of invocTraces) {
-      let invocId = group.find(
-        (item: any) => item.attributes !== undefined && 'gcp.vertex.agent.invocation_id' in item.attributes
-      )?.attributes['gcp.vertex.agent.invocation_id'];
+      let invocId = group.find(s => s.attrInvocationId !== undefined)?.attrInvocationId;
 
       // Fallback 1: Use associated_event_ids
       if (!invocId) {
-        const associatedEventIds = group.find(
-          (item: any) => item.attributes !== undefined && 'gcp.vertex.agent.associated_event_ids' in item.attributes
-        )?.attributes['gcp.vertex.agent.associated_event_ids'];
+        const associatedEventIds = group.find(s => s.attrAssociatedEventIds !== undefined)?.attrAssociatedEventIds;
         if (associatedEventIds && associatedEventIds.length > 0) {
           invocId = associatedEventIds[0];
         }
@@ -499,7 +488,7 @@ export class ChatPanelComponent implements OnChanges, AfterViewInit {
       }
 
       if (invocId) {
-        this.spansByInvocationId.set(invocId, group);
+        this.spansByInvocationId.set(String(invocId), group);
       }
     }
   }

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

@@ -633,7 +633,7 @@ describe('ChatComponent', () => {
 
           it('should call getTrace', () => {
             expect(mockEventService.getTrace)
-                .toHaveBeenCalledWith(SESSION_1_ID);
+                .toHaveBeenCalledWith(component.appName, SESSION_1_ID);
           });
 
           describe('canEdit', () => {