diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..4a854a2f Binary files /dev/null and b/.DS_Store differ diff --git a/package-lock.json b/package-lock.json index aadf9dea..52ce2f30 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24,7 +24,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", @@ -34,6 +33,7 @@ "uuidv7": "^1.0.2", "vanilla-jsoneditor": "^3.6.0", "yaml": "^2.8.0", + "zod": "^4.4.3", "zone.js": "~0.15.0" }, "devDependencies": { @@ -88,6 +88,15 @@ "zod-to-json-schema": "^3.25.1" } }, + "node_modules/@a2ui/web_core/node_modules/zod": { + "version": "3.25.76", + "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz", + "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==", + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/colinhacks" + } + }, "node_modules/@algolia/abtesting": { "version": "1.14.1", "resolved": "https://registry.npmjs.org/@algolia/abtesting/-/abtesting-1.14.1.tgz", @@ -13124,15 +13133,6 @@ "dev": true, "license": "MIT" }, - "node_modules/ngx-json-viewer": { - "version": "3.2.1", - "resolved": "https://registry.npmjs.org/ngx-json-viewer/-/ngx-json-viewer-3.2.1.tgz", - "integrity": "sha512-TTHtXsrBX+IXPqqAIsxklHPqSNmyGeQaziFZbCDJq1PnPOQmTrEHfwNrzN3LnWGhf7UxeM1cK0njegVPChwEcg==", - "license": "MIT", - "dependencies": { - "tslib": "^2.3.0" - } - }, "node_modules/ngx-markdown": { "version": "21.1.0", "resolved": "https://registry.npmjs.org/ngx-markdown/-/ngx-markdown-21.1.0.tgz", @@ -17494,9 +17494,9 @@ "license": "MIT" }, "node_modules/zod": { - "version": "3.25.76", - "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz", - "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==", + "version": "4.4.3", + "resolved": "https://registry.npmjs.org/zod/-/zod-4.4.3.tgz", + "integrity": "sha512-ytENFjIJFl2UwYglde2jchW2Hwm4GJFLDiSXWdTrJQBIN9Fcyp7n4DhxJEiWNAJMV1/BqWfW/kkg71UDcHJyTQ==", "license": "MIT", "funding": { "url": "https://github.com/sponsors/colinhacks" diff --git a/package.json b/package.json index 4244bf46..74d58df5 100644 --- a/package.json +++ b/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": { diff --git a/src/app/components/add-item-dialog/add-item-dialog.component.ts b/src/app/components/add-item-dialog/add-item-dialog.component.ts index b27a9039..b8300046 100644 --- a/src/app/components/add-item-dialog/add-item-dialog.component.ts +++ b/src/app/components/add-item-dialog/add-item-dialog.component.ts @@ -118,7 +118,7 @@ export class AddItemDialogComponent { const allTabAgents = new Map(); 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' } diff --git a/src/app/components/builder-assistant/builder-assistant.component.ts b/src/app/components/builder-assistant/builder-assistant.component.ts index 615ddc51..4fa4805f 100644 --- a/src/app/components/builder-assistant/builder-assistant.component.ts +++ b/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 { diff --git a/src/app/components/builder-tabs/builder-tabs.component.ts b/src/app/components/builder-tabs/builder-tabs.component.ts index fbf6608a..48bf86c0 100644 --- a/src/app/components/builder-tabs/builder-tabs.component.ts +++ b/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 } diff --git a/src/app/components/canvas/canvas.component.ts b/src/app/components/canvas/canvas.component.ts index 0cb5466d..0a88b718 100644 --- a/src/app/components/canvas/canvas.component.ts +++ b/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(["/"], { diff --git a/src/app/components/chat-panel/chat-panel.component.html b/src/app/components/chat-panel/chat-panel.component.html index d9c7e656..53b8127a 100644 --- a/src/app/components/chat-panel/chat-panel.component.html +++ b/src/app/components/chat-panel/chat-panel.component.html @@ -58,7 +58,7 @@

Evaluation Result

@if (uiEvents.length === 0 && agentReadme) {
+ [ngComponentOutletInputs]="{text: agentReadme, thought: false, isReadme: true}">
} @for (item of displayItems; track item; let i = $index) { diff --git a/src/app/components/chat-panel/chat-panel.component.ts b/src/app/components/chat-panel/chat-panel.component.ts index 207f54c6..2222fea3 100644 --- a/src/app/components/chat-panel/chat-panel.component.ts +++ b/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(''); @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(); + spansByInvocationId = new Map(); displayItems: DisplayItem[] = []; eventsScrollTop = -1; tracesScrollTop = -1; @@ -234,13 +234,6 @@ export class ChatPanelComponent implements OnChanges, AfterViewInit { evalCaseResult = input(null); showEvalSummary = input(false); - - - - - - - constructor() { effect(() => { const sessionName = this.sessionName(); @@ -346,7 +339,7 @@ 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; @@ -354,7 +347,7 @@ export class ChatPanelComponent implements OnChanges, AfterViewInit { 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, 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()); + }, new Map()); - this.spansByInvocationId = new Map(); + this.spansByInvocationId = new Map(); 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); } } } diff --git a/src/app/components/chat/chat.component.spec.ts b/src/app/components/chat/chat.component.spec.ts index 301a8d2a..34d48920 100644 --- a/src/app/components/chat/chat.component.spec.ts +++ b/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', () => { diff --git a/src/app/components/chat/chat.component.ts b/src/app/components/chat/chat.component.ts index e2fc1d2d..fd5f7fc2 100644 --- a/src/app/components/chat/chat.component.ts +++ b/src/app/components/chat/chat.component.ts @@ -36,7 +36,7 @@ import { MatTooltip } from '@angular/material/tooltip'; import { MatToolbar } from '@angular/material/toolbar'; import { SafeHtml } from '@angular/platform-browser'; import { ActivatedRoute, NavigationEnd, Router } from '@angular/router'; -import { NgxJsonViewerModule } from 'ngx-json-viewer'; +import { CustomJsonViewerComponent } from '../custom-json-viewer/custom-json-viewer.component'; import { combineLatest, firstValueFrom, Observable, of, Subscription } from 'rxjs'; import { catchError, distinctUntilChanged, filter, first, map, shareReplay, startWith, switchMap, take, tap } from 'rxjs/operators'; @@ -87,6 +87,7 @@ import { FormatMetricNamePipe } from '../eval-tab/format-metric-name.pipe'; import { ChatMessagesInjectionToken } from './chat.component.i18n'; import { SidePanelMessagesInjectionToken } from '../side-panel/side-panel.component.i18n'; +import { Span, OPERATION_GENERATE_CONTENT, SpanIo } from '../../core/models/Trace'; const ROOT_AGENT = 'root_agent'; /** Query parameter for pre-filling user input. */ @@ -154,7 +155,6 @@ const BIDI_STREAMING_RESTART_WARNING = FormsModule, ReactiveFormsModule, MatIcon, - NgxJsonViewerModule, MatButton, MatIconButton, MatMenuModule, @@ -206,7 +206,7 @@ export class ChatComponent implements OnInit, AfterViewInit, OnDestroy { private readonly traceService = inject(TRACE_SERVICE); protected readonly uiStateService = inject(UI_STATE_SERVICE); protected readonly agentBuilderService = inject(AGENT_BUILDER_SERVICE); - protected readonly themeService = inject(THEME_SERVICE, {optional: true}); + protected readonly themeService = inject(THEME_SERVICE, { optional: true }); protected readonly logoComponent: Type | null = inject(LOGO_COMPONENT, { optional: true, }); @@ -535,7 +535,7 @@ export class ChatComponent implements OnInit, AfterViewInit, OnDestroy { sessionHasUsedBidi = new Set(); eventData = new Map(); - traceData: any[] = []; + traceData: Span[] = []; renderedEventGraph: SafeHtml | undefined; rawSvgString: string | null = null; agentGraphData = signal(null); @@ -555,8 +555,6 @@ export class ChatComponent implements OnInit, AfterViewInit, OnDestroy { selectedMessageIndex: number | undefined = undefined; llmRequest: any = undefined; llmResponse: any = undefined; - llmRequestKey = 'gcp.vertex.agent.llm_request'; - llmResponseKey = 'gcp.vertex.agent.llm_response'; getMediaTypeFromMimetype = getMediaTypeFromMimetype; @@ -1333,7 +1331,7 @@ export class ChatComponent implements OnInit, AfterViewInit, OnDestroy { if (existingIndex >= 0) { const existingEvent = events[existingIndex]; - + // Preserve functionResponses and functionCalls if not present in new event if (!uiEvent.functionResponses || uiEvent.functionResponses.length === 0) { uiEvent.functionResponses = existingEvent.functionResponses; @@ -1555,8 +1553,6 @@ export class ChatComponent implements OnInit, AfterViewInit, OnDestroy { } } - - private formatBase64Data(data: string, mimeType: string) { const fixedBase64Data = fixBase64String(data); return `data:${mimeType};base64,${fixedBase64Data}`; @@ -1701,14 +1697,14 @@ export class ChatComponent implements OnInit, AfterViewInit, OnDestroy { next: (res: any) => { let mimeType = res.mimeType; let data = res.data; - + if (!mimeType || !data) { if (res.inlineData) { mimeType = res.inlineData.mimeType; data = res.inlineData.data; } } - + if (!mimeType && !data && res.text) { mimeType = 'text/plain'; try { @@ -1719,7 +1715,7 @@ export class ChatComponent implements OnInit, AfterViewInit, OnDestroy { return; } } - + if (!mimeType || !data) { this.handleArtifactFetchFailure(uiEvent, artifactId, versionId, { message: 'Invalid response data: missing mimeType or data or text' }); return; @@ -2104,8 +2100,8 @@ export class ChatComponent implements OnInit, AfterViewInit, OnDestroy { private loadTraceData() { if (!this.sessionId) return; this.uiStateService.setIsEventRequestResponseLoading(true); - this.eventService.getTrace(this.sessionId) - .pipe(first(), catchError((err) => { console.error('[DEBUG] getTrace error:', err); return of([]); })) + this.eventService.getTrace(this.appName, this.sessionId) + .pipe(first(), catchError((err) => { console.error('[DEBUG] getTrace error:', err); return of([] as Span[]); })) .subscribe(res => { this.traceData = res; this.traceService.setEventData(this.eventData); @@ -3656,30 +3652,30 @@ export class ChatComponent implements OnInit, AfterViewInit, OnDestroy { if (!this.selectedEvent) return; - const matchingSpan = this.traceData?.find( - (span: any) => span?.attributes?.['gcp.vertex.agent.event_id'] === this.selectedEvent.id && span?.name === 'call_llm' - ); + const io = this.findSpanIoForSelectedEvent(); + if (io === undefined) return; + + // The downstream JSON viewer renders whatever shape comes in, so we + // pass the discriminated {@link SpanIo} payload through verbatim. + this.llmRequest = io.inputs; + this.llmResponse = io.outputs; + } - if (matchingSpan) { - const requestStr = matchingSpan.attributes?.[this.llmRequestKey]; - const responseStr = matchingSpan.attributes?.[this.llmResponseKey]; + private findSpanIoForSelectedEvent(): SpanIo | undefined { + const eventId = this.selectedEvent?.id; + if (eventId === undefined) return undefined; - if (requestStr) { - try { - this.llmRequest = typeof requestStr === 'string' ? JSON.parse(requestStr) : requestStr; - } catch (e) { - console.warn('Failed to parse LLM request', e); - } - } + const generateContentSpan = this.traceData?.find( + (span) => + span.attrOperationName === OPERATION_GENERATE_CONTENT + && span.attrEventId === eventId + ); + if (generateContentSpan?.io !== undefined) return generateContentSpan.io; - if (responseStr) { - try { - this.llmResponse = typeof responseStr === 'string' ? JSON.parse(responseStr) : responseStr; - } catch (e) { - console.warn('Failed to parse LLM response', e); - } - } - } + const legacySpan = this.traceData?.find( + (span) => span.attrEventId === eventId && span.name === 'call_llm', + ); + return legacySpan?.io; } deleteSession(session: string) { diff --git a/src/app/components/content-bubble/content-bubble.component.html b/src/app/components/content-bubble/content-bubble.component.html index 118b79d2..9df472e4 100644 --- a/src/app/components/content-bubble/content-bubble.component.html +++ b/src/app/components/content-bubble/content-bubble.component.html @@ -185,11 +185,11 @@ @if (uiEvent.actualInvocationToolUses) {
{{ i18n.actualToolUsesLabel }}
- +
{{ i18n.expectedToolUsesLabel }}
- +
} @else if (uiEvent.actualFinalResponse) {
@@ -213,17 +213,17 @@
} } @else if (type === 'output') { - + > } @else if (type === 'error') { - + > } @else if (type === 'transcription') { @if (role === 'user' && uiEvent.event.inputTranscription) { {{ uiEvent.event.inputTranscription.text }} diff --git a/src/app/components/content-bubble/content-bubble.component.scss b/src/app/components/content-bubble/content-bubble.component.scss index 67663139..5e9c7ab4 100644 --- a/src/app/components/content-bubble/content-bubble.component.scss +++ b/src/app/components/content-bubble/content-bubble.component.scss @@ -1,5 +1,6 @@ :host { - display: contents; /* Ensure the wrapper doesn't break flex layouts of the parent */ + display: contents; + /* Ensure the wrapper doesn't break flex layouts of the parent */ } .content-bubble { @@ -89,6 +90,7 @@ transition: transform 0.2s ease-in-out; } + .generated-image-container { max-width: 400px; margin-top: 8px; @@ -123,7 +125,8 @@ padding: 5px 12px !important; max-width: 90% !important; } + .role-user { max-width: 90% !important; } -} +} \ No newline at end of file diff --git a/src/app/components/content-bubble/content-bubble.component.ts b/src/app/components/content-bubble/content-bubble.component.ts index 59bf364d..de945aa0 100644 --- a/src/app/components/content-bubble/content-bubble.component.ts +++ b/src/app/components/content-bubble/content-bubble.component.ts @@ -21,7 +21,7 @@ import {CommonModule} from '@angular/common'; import {FormsModule} from '@angular/forms'; import {MatIconModule} from '@angular/material/icon'; import {MatTooltipModule} from '@angular/material/tooltip'; -import {NgxJsonViewerModule} from 'ngx-json-viewer'; +import {CustomJsonViewerComponent} from '../custom-json-viewer/custom-json-viewer.component'; import {UiEvent} from '../../core/models/UiEvent'; import {SAFE_VALUES_SERVICE} from '../../core/services/interfaces/safevalues'; @@ -42,7 +42,7 @@ import { ARTIFACT_SERVICE } from '../../core/services/interfaces/artifact'; FormsModule, MatIconModule, MatTooltipModule, - NgxJsonViewerModule, + CustomJsonViewerComponent, A2uiCanvasComponent, AudioPlayerComponent, JsonTooltipDirective, diff --git a/src/app/components/custom-json-viewer/custom-json-viewer.component.html b/src/app/components/custom-json-viewer/custom-json-viewer.component.html new file mode 100644 index 00000000..d892e236 --- /dev/null +++ b/src/app/components/custom-json-viewer/custom-json-viewer.component.html @@ -0,0 +1,65 @@ +
+
+ @if (isExpandable() && depth > 0) { + + } + + @if (key !== undefined) { + {{ key }} + : + @if (showMarkdown && hasLineBreaks(json)) { + + } +   + } + + @if (isExpandable()) { + + @if (isArray(json)) { + [ + @if (!isExpanded) { + ... + ] + } + } @else { + @if (!isExpanded) { + ... + } + } + + } @else { + + @if (isString(json)) { + "{{ json }}" + } @else if (isNumber(json)) { + {{ json }} + } @else if (isBoolean(json)) { + {{ json }} + } @else if (isNull(json)) { + null + } @else if (isUndefined(json)) { + undefined + } + + } +
+ + @if (isExpandable() && isExpanded) { +
+ @if (isArray(json)) { + @for (item of json; track $index; let last = $last) { + + } + } @else { + @for (k of getKeys(json); track k; let last = $last) { + + } + } + @if (isArray(json)) { +
]
+ } +
+ } +
diff --git a/src/app/components/custom-json-viewer/custom-json-viewer.component.scss b/src/app/components/custom-json-viewer/custom-json-viewer.component.scss new file mode 100644 index 00000000..9ae57503 --- /dev/null +++ b/src/app/components/custom-json-viewer/custom-json-viewer.component.scss @@ -0,0 +1,154 @@ +:host { + display: block; + font-family: var(--ngx-json-font-family, monospace); + font-size: var(--ngx-json-font-size, 13px); + line-height: 1.4; +} + +.segment { + margin: 2px 0; + display: block; +} + +.segment-header { + display: flex; + align-items: flex-start; + flex-wrap: wrap; +} + +.segment-toggler { + cursor: pointer; + display: inline-block; + width: 0; + height: 0; + border-style: solid; + border-width: 5px 0 5px 6px; + border-color: transparent transparent transparent var(--mat-sys-outline); + margin-right: 8px; + margin-top: 4px; + transition: transform 0.15s ease; + + &.expanded { + transform: rotate(90deg); + } + + &:hover { + border-left-color: var(--mat-sys-primary); + } +} + +.segment-key { + color: var(--mat-sys-primary); + font-weight: normal; + cursor: pointer; +} + +.segment-separator { + color: var(--mat-sys-on-surface); +} + +.segment-space { + display: inline-block; + width: 4px; + user-select: none; +} + +.segment-value { + color: var(--mat-sys-on-surface); +} + +.bracket { + color: var(--mat-sys-outline); + font-weight: normal; +} + +.collapsed-summary { + color: var(--mat-sys-on-surface-variant); + font-size: 11px; + margin: 0 4px; +} + +.segment-children { + margin-left: 12px; + padding-left: 4px; + + &.root-children { + margin-left: 0; + padding-left: 0; + } +} + +.close-bracket { + display: block; +} + +/* MD Button styling */ +.md-btn { + border: none; + outline: none; + cursor: pointer; + font-family: 'Roboto', sans-serif; + font-size: 10px; + font-weight: 700; + letter-spacing: 0.5px; + color: var(--mat-sys-primary); + background-color: var(--mat-sys-primary-container); + border-radius: 4px; + padding: 2px 6px; + margin-left: 4px; + margin-right: 2px; + display: inline-flex; + align-items: center; + justify-content: center; + opacity: 0; + visibility: hidden; + transition: opacity 0.2s ease, visibility 0.2s ease, background-color 0.2s ease, color 0.2s ease, transform 0.2s ease; + height: 16px; + + &:hover { + opacity: 1 !important; + transform: scale(1.05); + background-color: var(--mat-sys-primary); + color: var(--mat-sys-on-primary); + } +} + +.segment-header:hover { + .md-btn { + opacity: 0.5; + visibility: visible; + } +} + +/* Type highlighting classes */ +.segment-type-string { + color: var(--ngx-json-string, #FF6B6B); + + .value-string { + white-space: pre-wrap; + word-break: break-word; + } +} + +.segment-type-number { + color: var(--mat-sys-error); +} + +.segment-type-boolean { + color: var(--mat-sys-secondary); +} + +.segment-type-null, .segment-type-undefined { + color: var(--mat-sys-outline); + font-style: italic; +} + +/* Dialog styling customization */ +::ng-deep .custom-md-dialog { + .mat-mdc-dialog-container { + border-radius: 12px !important; + border: 1px solid var(--mat-sys-outline-variant); + box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3) !important; + background-color: var(--mat-sys-surface-container-high) !important; + } +} diff --git a/src/app/components/custom-json-viewer/custom-json-viewer.component.ts b/src/app/components/custom-json-viewer/custom-json-viewer.component.ts new file mode 100644 index 00000000..487f9869 --- /dev/null +++ b/src/app/components/custom-json-viewer/custom-json-viewer.component.ts @@ -0,0 +1,184 @@ +/** + * @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 { ChangeDetectionStrategy, Component, Input, OnInit, inject } from '@angular/core'; +import { MatIconButton } from '@angular/material/button'; +import { MatIcon } from '@angular/material/icon'; +import { MatTooltip } from '@angular/material/tooltip'; +import { MAT_DIALOG_DATA, MatDialog, MatDialogModule, MatDialogRef } from '@angular/material/dialog'; +import { MarkdownComponent } from '../markdown/markdown.component'; + +@Component({ + changeDetection: ChangeDetectionStrategy.OnPush, + selector: 'app-markdown-preview-dialog', + standalone: true, + imports: [ + CommonModule, + MatDialogModule, + MatIcon, + MatIconButton, + MarkdownComponent + ], + template: ` +
+

+ article + Markdown Preview - {{ data.key }} +

+ +
+ + + + `, + styles: [` + .md-dialog-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 16px 24px 8px; + border-bottom: 1px solid var(--mat-sys-outline-variant); + } + .md-title { + display: flex; + align-items: center; + gap: 8px; + margin: 0; + font-size: 1.25rem; + font-weight: 500; + color: var(--mat-sys-on-surface); + } + .title-icon { + color: var(--mat-sys-primary); + } + .close-button { + color: var(--mat-sys-on-surface-variant); + } + .md-dialog-content { + padding: 24px; + min-width: 500px; + max-width: 80vw; + max-height: 70vh; + overflow-y: auto; + background-color: var(--mat-sys-surface-container-high); + color: var(--mat-sys-on-surface); + } + `] +}) +export class MarkdownPreviewDialogComponent { + dialogRef = inject(MatDialogRef); + data = inject(MAT_DIALOG_DATA) as { key: string; value: string }; + + close(): void { + this.dialogRef.close(); + } +} + +@Component({ + changeDetection: ChangeDetectionStrategy.OnPush, + selector: 'app-custom-json-viewer', + templateUrl: './custom-json-viewer.component.html', + styleUrls: ['./custom-json-viewer.component.scss'], + standalone: true, + imports: [ + CommonModule, + MatTooltip, + MatDialogModule, + ], +}) +export class CustomJsonViewerComponent implements OnInit { + @Input() json: any; + @Input() key: string | number | undefined; + @Input() expanded = true; + @Input() depth = 0; + @Input() showMarkdown = false; + + private readonly dialog = inject(MatDialog); + + isExpanded = true; + + ngOnInit() { + this.isExpanded = this.expanded; + } + + isExpandable(): boolean { + return this.json !== null && typeof this.json === 'object'; + } + + isObject(val: any): boolean { + return val !== null && typeof val === 'object' && !Array.isArray(val); + } + + isArray(val: any): boolean { + return Array.isArray(val); + } + + isString(val: any): boolean { + return typeof val === 'string'; + } + + hasLineBreaks(val: any): boolean { + return typeof val === 'string' && val.includes('\n'); + } + + isNumber(val: any): boolean { + return typeof val === 'number'; + } + + isBoolean(val: any): boolean { + return typeof val === 'boolean'; + } + + isNull(val: any): boolean { + return val === null; + } + + isUndefined(val: any): boolean { + return val === undefined; + } + + getKeys(val: any): string[] { + if (!val) return []; + return Object.keys(val); + } + + getTypeClass(val: any): string { + if (this.isString(val)) return 'segment-type-string'; + if (this.isNumber(val)) return 'segment-type-number'; + if (this.isBoolean(val)) return 'segment-type-boolean'; + if (this.isNull(val)) return 'segment-type-null'; + return 'segment-type-undefined'; + } + + toggleExpand(event: Event): void { + event.stopPropagation(); + this.isExpanded = !this.isExpanded; + } + + openMarkdownDialog(key: string | number, value: string, event: Event): void { + event.stopPropagation(); + this.dialog.open(MarkdownPreviewDialogComponent, { + data: { key: key.toString(), value }, + width: '800px', + maxWidth: '90vw', + panelClass: 'custom-md-dialog' + }); + } +} diff --git a/src/app/components/event-content/event-content.component.html b/src/app/components/event-content/event-content.component.html index 77fadba4..5376b6f7 100644 --- a/src/app/components/event-content/event-content.component.html +++ b/src/app/components/event-content/event-content.component.html @@ -47,7 +47,7 @@ @for (functionCall of uiEvent.functionCalls; track functionCall.id) { diff --git a/src/app/components/event-content/event-content.component.scss b/src/app/components/event-content/event-content.component.scss index 96326aef..c5eddcee 100644 --- a/src/app/components/event-content/event-content.component.scss +++ b/src/app/components/event-content/event-content.component.scss @@ -4,7 +4,7 @@ width: 100%; } -app-content-bubble + app-content-bubble { +app-content-bubble+app-content-bubble { margin-top: 5px; } @@ -47,6 +47,7 @@ app-content-bubble + app-content-bubble { width: 100%; } + .function-response-chip-container { display: inline-flex; align-items: center; @@ -79,4 +80,4 @@ app-content-bubble + app-content-bubble { .function-response-chip-container:hover .menu-trigger-btn { visibility: visible; -} +} \ No newline at end of file diff --git a/src/app/components/event-content/event-content.component.ts b/src/app/components/event-content/event-content.component.ts index f9316b23..699cb760 100644 --- a/src/app/components/event-content/event-content.component.ts +++ b/src/app/components/event-content/event-content.component.ts @@ -15,27 +15,27 @@ * limitations under the License. */ -import {CommonModule, NgClass} from '@angular/common'; -import {Component, EventEmitter, Input, Output, inject} from '@angular/core'; -import {MatButtonModule} from '@angular/material/button'; -import {MatIconModule} from '@angular/material/icon'; -import {MatTooltipModule} from '@angular/material/tooltip'; -import {MatDialog} from '@angular/material/dialog'; -import {MatMenuModule} from '@angular/material/menu'; -import {FunctionResponse} from '../../core/models/types'; -import {EditJsonDialogComponent} from '../edit-json-dialog/edit-json-dialog.component'; - -import {AgentRunRequest} from '../../core/models/AgentRunRequest'; -import {isComputerUseResponse, isVisibleComputerUseClick} from '../../core/models/ComputerUse'; -import type {EvalCase} from '../../core/models/Eval'; -import {UiEvent} from '../../core/models/UiEvent'; -import {WorkflowGraphTooltipDirective} from '../../directives/workflow-graph-tooltip.directive'; -import {JsonTooltipDirective} from '../../directives/html-tooltip.directive'; -import {ComputerActionComponent} from '../computer-action/computer-action.component'; -import {HoverInfoButtonComponent} from '../hover-info-button/hover-info-button.component'; -import {LongRunningResponseComponent} from '../long-running-response/long-running-response'; -import {ChatPanelMessagesInjectionToken} from '../chat-panel/chat-panel.component.i18n'; -import {ContentBubbleComponent} from '../content-bubble/content-bubble.component'; +import { CommonModule, NgClass } from '@angular/common'; +import { Component, EventEmitter, Input, Output, inject } from '@angular/core'; +import { MatButtonModule } from '@angular/material/button'; +import { MatIconModule } from '@angular/material/icon'; +import { MatTooltipModule } from '@angular/material/tooltip'; +import { MatDialog } from '@angular/material/dialog'; +import { MatMenuModule } from '@angular/material/menu'; +import { FunctionCall, FunctionResponse } from '../../core/models/types'; +import { EditJsonDialogComponent } from '../edit-json-dialog/edit-json-dialog.component'; + +import { AgentRunRequest } from '../../core/models/AgentRunRequest'; +import { isComputerUseResponse, isVisibleComputerUseClick } from '../../core/models/ComputerUse'; +import type { EvalCase } from '../../core/models/Eval'; +import { UiEvent } from '../../core/models/UiEvent'; +import { WorkflowGraphTooltipDirective } from '../../directives/workflow-graph-tooltip.directive'; +import { JsonTooltipDirective } from '../../directives/html-tooltip.directive'; +import { ComputerActionComponent } from '../computer-action/computer-action.component'; +import { HoverInfoButtonComponent } from '../hover-info-button/hover-info-button.component'; +import { LongRunningResponseComponent } from '../long-running-response/long-running-response'; +import { ChatPanelMessagesInjectionToken } from '../chat-panel/chat-panel.component.i18n'; +import { ContentBubbleComponent } from '../content-bubble/content-bubble.component'; @Component({ selector: 'app-event-content', @@ -58,39 +58,39 @@ import {ContentBubbleComponent} from '../content-bubble/content-bubble.component ], }) export class EventContentComponent { - @Input({required: true}) uiEvent!: UiEvent; - @Input({required: true}) index!: number; + @Input({ required: true }) uiEvent!: UiEvent; + @Input({ required: true }) index!: number; @Input() uiEvents: UiEvent[] = []; - + @Input() appName: string = ''; @Input() userId: string = ''; @Input() sessionId: string = ''; @Input() sessionName: string = ''; - + @Input() evalCase: EvalCase | null = null; @Input() isEvalEditMode: boolean = false; @Input() isEvalCaseEditing: boolean = false; @Input() isEditFunctionArgsEnabled: boolean = false; @Input() userEditEvalCaseMessage: string = ''; - + @Input() agentGraphData: any = null; @Input() allWorkflowNodes: any = null; - @Output() readonly handleKeydown = new EventEmitter<{event: KeyboardEvent, message: any}>(); + @Output() readonly handleKeydown = new EventEmitter<{ event: KeyboardEvent, message: any }>(); @Output() readonly cancelEditMessage = new EventEmitter(); @Output() readonly saveEditMessage = new EventEmitter(); @Output() readonly userEditEvalCaseMessageChange = new EventEmitter(); - - @Output() readonly openViewImageDialog = new EventEmitter<{images: string[], currentIndex: number, urls?: string[], coordinates?: ({x: number, y: number} | null)[]}>(); - @Output() readonly openBase64InNewTab = new EventEmitter<{data: string, mimeType: string}>(); - + + @Output() readonly openViewImageDialog = new EventEmitter<{ images: string[], currentIndex: number, urls?: string[], coordinates?: ({ x: number, y: number } | null)[] }>(); + @Output() readonly openBase64InNewTab = new EventEmitter<{ data: string, mimeType: string }>(); + @Output() readonly editEvalCaseMessage = new EventEmitter(); - @Output() readonly deleteEvalCaseMessage = new EventEmitter<{message: any, index: number}>(); + @Output() readonly deleteEvalCaseMessage = new EventEmitter<{ message: any, index: number }>(); @Output() readonly editFunctionArgs = new EventEmitter(); - + @Output() readonly clickEvent = new EventEmitter(); @Output() readonly longRunningResponseComplete = new EventEmitter(); - @Output() readonly agentStateClick = new EventEmitter<{event: Event, index: number}>(); + @Output() readonly agentStateClick = new EventEmitter<{ event: Event, index: number }>(); protected readonly i18n = inject(ChatPanelMessagesInjectionToken); private readonly dialog = inject(MatDialog); @@ -98,13 +98,69 @@ export class EventContentComponent { readonly Object = Object; readonly String = String; + getFunctionCallButtonText(functionCall: FunctionCall): string { + let args: any = functionCall.args; + if (args && typeof args === 'string') { + try { + args = JSON.parse(args); + } catch { + // ignore parsing error, treat as raw string + } + } + if (args && typeof args === 'object') { + const specialFuncArgMap: Record = { + 'EditFile': 'path', + 'WriteFile': 'path', + }; + if (functionCall.name in specialFuncArgMap) { + const argKey = specialFuncArgMap[functionCall.name]; + if (argKey in args) { + const valueStr = this.formatPythonValue(args[argKey]); + const hasMore = Object.keys(args).length > 1; + return `${functionCall.name}(${valueStr}${hasMore ? ', …' : ''})`; + } + } + + const keys = Object.keys(args); + if (keys.length === 1) { + const value = args[keys[0]]; + const valueStr = this.formatPythonValue(value); + return `${functionCall.name}(${valueStr})`; + } else if (keys.length === 0) { + return `${functionCall.name}()`; + } + } else if (!args) { + return `${functionCall.name}()`; + } + return functionCall.name; + } + + private formatPythonValue(value: any): string { + if (value === null || value === undefined) { + return 'None'; + } + if (typeof value === 'boolean') { + return value ? 'True' : 'False'; + } + if (typeof value === 'string') { + return `"${value}"`; + } + if (typeof value === 'object') { + return JSON.stringify(value) + .replace(/\btrue\b/g, 'True') + .replace(/\bfalse\b/g, 'False') + .replace(/\bnull\b/g, 'None'); + } + return String(value); + } + shouldShowMessageCard(message: any): boolean { return !!( - message.text || message.attachments || message.inlineData || - message.executableCode || message.codeExecutionResult || - message.a2uiData || message.renderedContent || message.isLoading || - (message.failedMetric && message.evalStatus === 2) || - message.event?.content?.parts?.some((part: any) => part.fileData)); + message.text || message.attachments || message.inlineData || + message.executableCode || message.codeExecutionResult || + message.a2uiData || message.renderedContent || message.isLoading || + (message.failedMetric && message.evalStatus === 2) || + message.event?.content?.parts?.some((part: any) => part.fileData)); } isComputerUseClick(input: any): boolean { @@ -122,7 +178,7 @@ export class EventContentComponent { getFilteredStateDelta(stateDelta: any): any { if (!stateDelta) return null; - const filtered = {...stateDelta}; + const filtered = { ...stateDelta }; delete filtered['__llm_request_key__']; return filtered; } @@ -155,7 +211,7 @@ export class EventContentComponent { if (!callId) { return false; } - return this.uiEvents.some(event => + return this.uiEvents.some(event => event.functionResponses?.some(response => response.id === callId && (response.response as any)?.status !== 'pending') ); } @@ -163,7 +219,7 @@ export class EventContentComponent { openSendAnotherResponseDialog(functionResponse: FunctionResponse) { let functionCallEventId = ''; const callId = functionResponse.id; - + if (callId) { for (const event of this.uiEvents) { if (event.functionCalls) { @@ -256,6 +312,6 @@ export class EventContentComponent { onImageClick(clickedImage: string) { const images = this.getAllImages(); const currentIndex = images.indexOf(clickedImage); - this.openViewImageDialog.emit({images, currentIndex}); + this.openViewImageDialog.emit({ images, currentIndex }); } } diff --git a/src/app/components/event-tab/event-tab.component.html b/src/app/components/event-tab/event-tab.component.html index 352ccfde..9356b690 100644 --- a/src/app/components/event-tab/event-tab.component.html +++ b/src/app/components/event-tab/event-tab.component.html @@ -82,7 +82,7 @@ @if (selectedEvent()!.nodeInfo!['outputFor']) {
- + @@ -109,7 +109,7 @@ @if (isObject($any(selectedEvent()!.actions)[key])) {
- + @@ -130,7 +130,7 @@ {{ fc?.name }}
- + @@ -171,7 +171,7 @@
}
- + @@ -258,7 +258,7 @@ } @if (selectedDetailTab === 'raw') {
- + @@ -275,7 +275,7 @@
Old Value
@if (isObject(change.oldValue)) { - + } @else { {{ change.oldValue }} } @@ -285,7 +285,7 @@
New Value
@if (isObject(change.newValue)) { - + } @else { {{ change.newValue }} } @@ -398,7 +398,7 @@
Select an LLM response to see request details.
} @else {
- + @@ -414,7 +414,7 @@
Select an LLM response to see response details.
} @else {
- + @@ -423,4 +423,4 @@ }
-
\ No newline at end of file +
diff --git a/src/app/components/event-tab/event-tab.component.spec.ts b/src/app/components/event-tab/event-tab.component.spec.ts index a8a25689..b1f76d45 100644 --- a/src/app/components/event-tab/event-tab.component.spec.ts +++ b/src/app/components/event-tab/event-tab.component.spec.ts @@ -23,7 +23,7 @@ import {MatDialog} from '@angular/material/dialog'; import {MatListHarness} from '@angular/material/list/testing'; import {NoopAnimationsModule} from '@angular/platform-browser/animations'; -import {Span} from '../../core/models/Trace'; +import {Span, SpanValidator} from '../../core/models/Trace'; import {FEATURE_FLAG_SERVICE} from '../../core/services/interfaces/feature-flag'; import {TRACE_SERVICE} from '../../core/services/interfaces/trace'; import {UI_STATE_SERVICE} from '../../core/services/interfaces/ui-state'; @@ -34,8 +34,21 @@ import {MockUiStateService} from '../../core/services/testing/mock-ui-state.serv import {EventTabComponent} from './event-tab.component'; import {TraceChartComponent} from './trace-chart/trace-chart.component'; +/** + * Helper that builds a `Span` (optionally with `children`) by routing the + * envelope through `SpanValidator` so promoted `attr*` fields are + * populated and the raw `attributes` bag is dropped. + */ +function makeSpan(raw: unknown, children: Span[] = []): Span { + const result = SpanValidator.safeParse(raw); + if (!result.success) { + throw new Error(`Failed to build test span: ${result.error.message}`); + } + return children.length > 0 ? {...result.data, children} : result.data; +} + const MOCK_TRACE_DATA: Span[] = [ - { + makeSpan({ name: 'agent.act', start_time: 1733084700000000000, end_time: 1733084760000000000, @@ -47,41 +60,44 @@ const MOCK_TRACE_DATA: Span[] = [ 'gcp.vertex.agent.llm_request': '{"contents":[{"role":"user","parts":[{"text":"Hello"}]},{"role":"agent","parts":[{"text":"Hi. What can I help you with?"}]},{"role":"user","parts":[{"text":"I need help with my project."}]}]}', }, - }, - { - name: 'tool.invoke', - start_time: 1733084705000000000, - end_time: 1733084755000000000, - span_id: 'span-2', - parent_span_id: 'span-1', - trace_id: 'trace-1', - attributes: { - 'tool_name': 'project_helper', - }, - children: [ + }), + makeSpan( { - name: 'sub-tool-1.invoke', - start_time: 1733084710000000000, - end_time: 1733084750000000000, - span_id: 'span-3', - parent_span_id: 'span-2', + name: 'tool.invoke', + start_time: 1733084705000000000, + end_time: 1733084755000000000, + span_id: 'span-2', + parent_span_id: 'span-1', trace_id: 'trace-1', attributes: { - 'sub_tool_name': 'sub_project_helper_1', + 'tool_name': 'project_helper', }, - children: [ + }, + [makeSpan( { - name: 'sub-tool-2.invoke', - start_time: 1733084715000000000, - end_time: 1733084745000000000, - span_id: 'span-4', - parent_span_id: 'span-3', + name: 'sub-tool-1.invoke', + start_time: 1733084710000000000, + end_time: 1733084750000000000, + span_id: 'span-3', + parent_span_id: 'span-2', trace_id: 'trace-1', attributes: { - 'sub_tool_name': 'sub_project_helper_2', + 'sub_tool_name': 'sub_project_helper_1', }, - children: [ + }, + [makeSpan( { + name: 'sub-tool-2.invoke', + start_time: 1733084715000000000, + end_time: 1733084745000000000, + span_id: 'span-4', + parent_span_id: 'span-3', + trace_id: 'trace-1', + attributes: { + 'sub_tool_name': 'sub_project_helper_2', + }, + }, + [makeSpan({ name: 'sub-tool-3.invoke', start_time: 1733084720000000000, end_time: 1733084740000000000, @@ -91,15 +107,8 @@ const MOCK_TRACE_DATA: Span[] = [ attributes: { 'sub_tool_name': 'sub_project_helper_3', }, - children: [], - }, - ], - }, - ], - }, - ], - } -] as Span[]; + })])])]), +]; const MOCK_EVENTS_MAP = new Map([ ['event1', {title: 'Event 1 Title'}], diff --git a/src/app/components/event-tab/event-tab.component.ts b/src/app/components/event-tab/event-tab.component.ts index 379728c7..d3398c99 100644 --- a/src/app/components/event-tab/event-tab.component.ts +++ b/src/app/components/event-tab/event-tab.component.ts @@ -25,15 +25,21 @@ import {MatProgressSpinner} from '@angular/material/progress-spinner'; import {MatTooltip} from '@angular/material/tooltip'; import {MatMenuModule, MatMenuTrigger} from '@angular/material/menu'; import {type SafeHtml} from '@angular/platform-browser'; -import {NgxJsonViewerModule} from 'ngx-json-viewer'; +import {CustomJsonViewerComponent} from '../custom-json-viewer/custom-json-viewer.component'; import {InfoTable} from '../info-table/info-table'; import {Event, Part} from '../../core/models/types'; import {UI_STATE_SERVICE} from '../../core/services/interfaces/ui-state'; import {SidePanelMessagesInjectionToken} from '../side-panel/side-panel.component.i18n'; -import {SpanNode} from '../../core/models/Trace'; +import {Span} from '../../core/models/Trace'; import {TRACE_SERVICE} from '../../core/services/interfaces/trace'; import {addSvgNodeHoverEffects} from '../../utils/svg-interaction.utils'; +export type SpanNode = Span & { + children: SpanNode[]; + depth: number; + duration: number; + id: string; // Using span_id as string ID +}; @Component({ changeDetection: ChangeDetectionStrategy.OnPush, @@ -52,7 +58,7 @@ import {addSvgNodeHoverEffects} from '../../utils/svg-interaction.utils'; MatProgressSpinner, MatTooltip, MatMenuModule, - NgxJsonViewerModule, + CustomJsonViewerComponent, InfoTable, ], }) @@ -66,7 +72,7 @@ export class EventTabComponent { readonly rawSvgString = input(null); readonly llmRequest = input(); readonly llmResponse = input(); - readonly traceData = input([]); + readonly traceData = input([]); readonly appName = input(''); readonly selectedEventGraphPath = input(''); readonly hasSubWorkflows = input(false); @@ -161,10 +167,10 @@ export class EventTabComponent { readonly associatedSpans = computed(() => { const ev = this.selectedEvent(); if (!ev || !ev.id) return []; - + const allSpans = this.traceData(); if (!allSpans) return []; - + const flatten = (arr: any[]): any[] => { let result: any[] = []; for (const item of arr) { @@ -175,9 +181,9 @@ export class EventTabComponent { } return result; }; - + const flatSpans = flatten(allSpans); - return flatSpans.filter(s => s.attributes && s.attributes['gcp.vertex.agent.event_id'] === ev.id); + return flatSpans.filter(s => s.attrEventId === ev.id); }); readonly sessionUsageMetadata = computed(() => { @@ -207,11 +213,11 @@ export class EventTabComponent { }); private _selectedDetailTab: 'event' | 'raw' | 'request' | 'response' | 'graph' | 'metadata' | 'state' = 'event'; - + get selectedDetailTab() { return this._selectedDetailTab; } - + set selectedDetailTab(tab: 'event' | 'raw' | 'request' | 'response' | 'graph' | 'metadata' | 'state') { this._selectedDetailTab = tab; window.localStorage.setItem('adk-event-tab-selected-tab', tab); @@ -311,7 +317,7 @@ export class EventTabComponent { effect(() => { const force = this.forceGraphTab(); const event = this.selectedEvent(); - + if (force && !prevForceGraphTab) { this.selectedDetailTab = this.graphsAvailable() ? 'graph' : 'event'; } @@ -354,7 +360,7 @@ export class EventTabComponent { if (targetInvocationId) { allEvents = allEvents.filter(ev => ev.invocationId === targetInvocationId); } - + const travelsForNode: any[][] = []; let currentTravel: any[] = []; let lastNodeName = ''; @@ -381,7 +387,7 @@ export class EventTabComponent { } else { evGraphPath = segments.slice(1, -1).join('/'); } - + if (evGraphPath === this.selectedEventGraphPath()) { const fullSegments = np.split('/'); const fullEvNodeName = fullSegments[fullSegments.length - 1]; @@ -394,7 +400,7 @@ export class EventTabComponent { lastNodeName = currentName; currentTravel = []; } - + if (currentName === nodeName) { currentTravel.push(ev); } diff --git a/src/app/components/event-tab/invoc-id.pipe.ts b/src/app/components/event-tab/invoc-id.pipe.ts index 237f7818..6eb10377 100644 --- a/src/app/components/event-tab/invoc-id.pipe.ts +++ b/src/app/components/event-tab/invoc-id.pipe.ts @@ -27,10 +27,11 @@ export class InvocIdPipe implements PipeTransform { if (!spans) { return undefined; } - return spans.find( - (item) => - item.attributes !== undefined && - 'gcp.vertex.agent.invocation_id' in item.attributes, - )?.attributes['gcp.vertex.agent.invocation_id']; + for (const span of spans) { + if (span.attrInvocationId !== undefined) { + return span.attrInvocationId; + } + } + return undefined; } } diff --git a/src/app/components/json-tooltip/json-tooltip.component.ts b/src/app/components/json-tooltip/json-tooltip.component.ts index 517a4eef..fe9f391b 100644 --- a/src/app/components/json-tooltip/json-tooltip.component.ts +++ b/src/app/components/json-tooltip/json-tooltip.component.ts @@ -15,7 +15,7 @@ * limitations under the License. */ import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; -import { NgxJsonViewerModule } from 'ngx-json-viewer'; +import { CustomJsonViewerComponent } from '../custom-json-viewer/custom-json-viewer.component'; @Component({ changeDetection: ChangeDetectionStrategy.Default, @@ -26,7 +26,7 @@ import { NgxJsonViewerModule } from 'ngx-json-viewer';
{{ title }}
}
- +
`, @@ -64,14 +64,14 @@ import { NgxJsonViewerModule } from 'ngx-json-viewer'; background: inherit; z-index: 1; } - ngx-json-viewer { + app-custom-json-viewer { display: block; height: auto !important; min-width: 0; } `], standalone: true, - imports: [NgxJsonViewerModule], + imports: [CustomJsonViewerComponent], }) export class JsonTooltipComponent { @Input() title: string = ''; diff --git a/src/app/components/long-running-response/long-running-response.html b/src/app/components/long-running-response/long-running-response.html index 1d8ac910..30410605 100644 --- a/src/app/components/long-running-response/long-running-response.html +++ b/src/app/components/long-running-response/long-running-response.html @@ -44,7 +44,7 @@
Payload
- +
@@ -141,7 +141,7 @@
Payload
- +
diff --git a/src/app/components/long-running-response/long-running-response.ts b/src/app/components/long-running-response/long-running-response.ts index 7591d588..eaea3680 100644 --- a/src/app/components/long-running-response/long-running-response.ts +++ b/src/app/components/long-running-response/long-running-response.ts @@ -15,16 +15,16 @@ * limitations under the License. */ -import {ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, inject, Input, OnChanges, Output, SimpleChanges} from '@angular/core'; -import {FormsModule} from '@angular/forms'; -import {NgxJsonViewerModule} from 'ngx-json-viewer'; -import {MatButton, MatIconButton} from '@angular/material/button'; -import {MatIcon} from '@angular/material/icon'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, inject, Input, OnChanges, Output, SimpleChanges } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { CustomJsonViewerComponent } from '../custom-json-viewer/custom-json-viewer.component'; +import { MatButton, MatIconButton } from '@angular/material/button'; +import { MatIcon } from '@angular/material/icon'; - import {AgentRunRequest} from '../../core/models/AgentRunRequest'; - import {MarkdownComponent} from '../markdown/markdown.component'; +import { AgentRunRequest } from '../../core/models/AgentRunRequest'; +import { MarkdownComponent } from '../markdown/markdown.component'; @@ -38,8 +38,8 @@ import {MatIcon} from '@angular/material/icon'; MatIconButton, MatButton, MatIcon, - NgxJsonViewerModule, MarkdownComponent, + CustomJsonViewerComponent, ], }) export class LongRunningResponseComponent implements OnChanges { @@ -75,7 +75,7 @@ export class LongRunningResponseComponent implements OnChanges { initForm() { this.formModel = {}; this.formFields = []; - + if (this.isConfirmationRequest) { this.confirmationModel.confirmed = this.functionCall.args?.toolConfirmation?.confirmed || false; this.confirmationModel.payload = JSON.stringify(this.functionCall.args?.originalFunctionCall?.args || {}, null, 2); @@ -87,7 +87,7 @@ export class LongRunningResponseComponent implements OnChanges { for (const key of Object.keys(schema.properties)) { const prop = schema.properties[key]; let type = prop.type; - + if (!type && prop.anyOf) { // Find the first non-null type const nonNullType = prop.anyOf.find((t: any) => t.type !== 'null'); @@ -120,7 +120,7 @@ export class LongRunningResponseComponent implements OnChanges { if (!schema || schema.type !== 'object' || !schema.properties) { return this.formModel; } - const cleaned = {...this.formModel}; + const cleaned = { ...this.formModel }; for (const key of Object.keys(schema.properties)) { const prop = schema.properties[key]; const value = cleaned[key]; @@ -132,7 +132,7 @@ export class LongRunningResponseComponent implements OnChanges { type = nonNullType.type; } } - + if (type === 'integer') { cleaned[key] = parseInt(value, 10); } else if (type === 'number') { @@ -175,7 +175,7 @@ export class LongRunningResponseComponent implements OnChanges { hasPayload(): boolean { return this.functionCall.args?.payload !== undefined && - this.functionCall.args?.payload !== null; + this.functionCall.args?.payload !== null; } getPayloadJson(): string { @@ -206,25 +206,25 @@ export class LongRunningResponseComponent implements OnChanges { } catch (e) { payloadObj = this.functionCall.args?.originalFunctionCall?.args || {}; } - + const responseValue = { confirmed: this.confirmationModel.confirmed, payload: payloadObj }; - + this.functionCall.responseStatus = 'sent'; this.cdr.detectChanges(); const content = { - role: 'user', - parts: [{ - functionResponse: { - id: this.functionCall.id, - name: this.functionCall.name, - response: responseValue, - }, - }], - functionCallEventId: this.functionCall.functionCallEventId + role: 'user', + parts: [{ + functionResponse: { + id: this.functionCall.id, + name: this.functionCall.name, + response: responseValue, + }, + }], + functionCallEventId: this.functionCall.functionCallEventId }; this.responseComplete.emit(content); @@ -242,7 +242,7 @@ export class LongRunningResponseComponent implements OnChanges { this.functionCall.sentUserResponse = this.functionCall.userResponse; } else { if (!this.functionCall.userResponse || - !this.functionCall.userResponse.trim()) { + !this.functionCall.userResponse.trim()) { return; } @@ -266,15 +266,15 @@ export class LongRunningResponseComponent implements OnChanges { this.cdr.detectChanges(); const content = { - role: 'user', - parts: [{ - functionResponse: { - id: this.functionCall.id, - name: this.functionCall.name, - response: responseValue, - }, - }], - functionCallEventId: this.functionCall.functionCallEventId + role: 'user', + parts: [{ + functionResponse: { + id: this.functionCall.id, + name: this.functionCall.name, + response: responseValue, + }, + }], + functionCallEventId: this.functionCall.functionCallEventId }; this.responseComplete.emit(content); diff --git a/src/app/components/markdown/markdown.component.interface.ts b/src/app/components/markdown/markdown.component.interface.ts index da2d1f91..59dea71a 100644 --- a/src/app/components/markdown/markdown.component.interface.ts +++ b/src/app/components/markdown/markdown.component.interface.ts @@ -30,4 +30,5 @@ export const MARKDOWN_COMPONENT = new InjectionToken; thought: InputSignal; + isReadme?: InputSignal; } diff --git a/src/app/components/markdown/markdown.component.ts b/src/app/components/markdown/markdown.component.ts index 91593aea..bec108ac 100644 --- a/src/app/components/markdown/markdown.component.ts +++ b/src/app/components/markdown/markdown.component.ts @@ -16,7 +16,8 @@ */ import {CommonModule} from '@angular/common'; -import {ChangeDetectionStrategy, Component, input, ElementRef, effect, OnInit} from '@angular/core'; +import {ChangeDetectionStrategy, Component, input, ElementRef, effect, OnInit, Optional} from '@angular/core'; +import {ChatPanelComponent} from '../chat-panel/chat-panel.component'; import {MarkdownModule, provideMarkdown} from 'ngx-markdown'; import mermaid from 'mermaid'; @@ -58,24 +59,140 @@ import 'prismjs/components/prism-yaml'; max-width: 100%; height: auto; } - .mermaid .node rect, - .mermaid .node circle, - .mermaid .node ellipse, - .mermaid .node polygon, - .mermaid .node path { - stroke-width: 1px; + ::ng-deep .copy-code-button { + position: absolute; + top: 4px; + right: 4px; + z-index: 10; + display: flex; + align-items: center; + justify-content: center; + width: 28px; + height: 28px; + padding: 0; + border-radius: 4px; + background-color: var(--mat-sys-surface-container-high) !important; + color: var(--mat-sys-on-surface-variant); + border: none; + cursor: pointer; + opacity: 0; + transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out, color 0.2s ease-in-out; + } + ::ng-deep pre:hover .copy-code-button { + opacity: 1; + } + ::ng-deep .copy-code-button:hover { + background-color: var(--mat-sys-secondary-container) !important; + color: var(--mat-sys-on-secondary-container) !important; + } + ::ng-deep .copy-code-button:active { + transform: scale(0.95); + } + ::ng-deep .copy-code-button.copied { + color: #81c784 !important; + background-color: rgba(76, 175, 80, 0.15) !important; + opacity: 1; + } + ::ng-deep pre:not(:hover) .copy-code-button.copied, + ::ng-deep code:not(pre code):not(:hover) .copy-code-button.copied { + opacity: 0 !important; + transition: none !important; + } + ::ng-deep .copy-code-button svg { + width: 16px; + height: 16px; + } + ::ng-deep .run-code-button { + position: absolute; + top: 4px; + right: 4px; + z-index: 10; + display: flex; + align-items: center; + justify-content: center; + width: 28px; + height: 28px; + padding: 0; + border-radius: 4px; + background-color: var(--mat-sys-surface-container-high) !important; + color: var(--mat-sys-on-surface-variant); + border: none; + cursor: pointer; + opacity: 0; + transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out, color 0.2s ease-in-out; + } + ::ng-deep .run-code-button:hover { + background-color: var(--mat-sys-primary-container) !important; + color: var(--mat-sys-on-primary-container) !important; + } + ::ng-deep .run-code-button:active { + transform: scale(0.95); + } + ::ng-deep .run-code-button svg { + width: 16px; + height: 16px; + } + ::ng-deep code:not(pre code) { + display: inline-block; + position: relative; + padding: 0 4px; + background-color: var(--mat-sys-surface-container-high); + vertical-align: top; + } + ::ng-deep code:not(pre code).runnable:hover { + padding-right: 68px !important; + } + ::ng-deep code:not(pre code) .copy-code-button { + position: absolute; + top: 50%; + right: 2px; + transform: translateY(-50%); + width: 28px; + height: 28px; + opacity: 0; + transition: none !important; + } + ::ng-deep code:not(pre code):hover .copy-code-button { + opacity: 1; + } + ::ng-deep code:not(pre code).runnable:hover .copy-code-button { + right: 32px !important; + } + ::ng-deep code:not(pre code) .copy-code-button:active { + transform: translateY(-50%) !important; + } + ::ng-deep code:not(pre code) .run-code-button { + position: absolute; + top: 50%; + right: 2px; + transform: translateY(-50%); + width: 28px; + height: 28px; + opacity: 0; + transition: none !important; + } + ::ng-deep code:not(pre code).runnable:hover .run-code-button { + opacity: 1; + } + ::ng-deep code:not(pre code) .run-code-button:active { + transform: translateY(-50%) !important; } `] }) export class MarkdownComponent implements OnInit { text = input(''); thought = input(false); + isReadme = input(false); - constructor(private elementRef: ElementRef) { + constructor( + private elementRef: ElementRef, + @Optional() private chatPanel: ChatPanelComponent + ) { effect(() => { const _ = this.text(); setTimeout(() => { this.renderMermaid(); + this.addCopyButtons(); }, 100); }); } @@ -127,4 +244,117 @@ export class MarkdownComponent implements OnInit { mermaid.run(); } } + + private addCopyButtons() { + const container = this.elementRef.nativeElement; + + // Handle block pre elements + const preElements = container.querySelectorAll('pre'); + preElements.forEach((preEl: HTMLElement) => { + if (preEl.querySelector('.copy-code-button') || preEl.closest('.mermaid-container')) { + return; + } + + preEl.style.position = 'relative'; + this.createCopyButton(preEl, preEl.querySelector('code') || preEl); + }); + + // Handle inline code elements or headings to track section context + let currentHeading = ''; + const allElements = container.querySelectorAll('*'); + allElements.forEach((el: HTMLElement) => { + if (/^H[1-6]$/.test(el.tagName)) { + currentHeading = el.textContent || ''; + } else if (el.tagName === 'CODE') { + const codeEl = el; + // Skip if it is inside a pre tag or has a copy button already or is mermaid + if (codeEl.closest('pre') || codeEl.querySelector('.copy-code-button') || codeEl.closest('.mermaid-container')) { + return; + } + + // If it is the readme.md showing in the chat and under 'Sample Inputs' section, show copy and run buttons + if (this.isReadme() && currentHeading.toLowerCase().includes('sample inputs')) { + codeEl.style.position = 'relative'; + this.createCopyButton(codeEl, codeEl); + codeEl.classList.add('runnable'); + this.createRunButton(codeEl, codeEl); + } + } + }); + } + + private createCopyButton(parentEl: HTMLElement, textEl: HTMLElement) { + const button = document.createElement('button'); + button.className = 'copy-code-button'; + button.setAttribute('aria-label', 'Copy code'); + button.type = 'button'; + + const copyIcon = ` + + + + `; + + const checkIcon = ` + + + + `; + + button.innerHTML = copyIcon; + + button.addEventListener('click', (e) => { + e.stopPropagation(); + const textToCopy = (textEl.textContent || '').trim(); + + navigator.clipboard.writeText(textToCopy).then(() => { + button.innerHTML = checkIcon; + button.classList.add('copied'); + + setTimeout(() => { + button.innerHTML = copyIcon; + button.classList.remove('copied'); + }, 2000); + }).catch(err => { + console.error('Failed to copy text: ', err); + }); + }); + + parentEl.appendChild(button); + } + + private createRunButton(parentEl: HTMLElement, textEl: HTMLElement) { + if (parentEl.querySelector('.run-code-button')) { + return; + } + + const button = document.createElement('button'); + button.className = 'run-code-button'; + button.setAttribute('aria-label', 'Run sample input'); + button.type = 'button'; + + const runIcon = ` + + + + `; + + button.innerHTML = runIcon; + + button.addEventListener('click', (e) => { + e.stopPropagation(); + const codeText = (textEl.textContent || '').trim(); + + // Run the sample input + if (this.chatPanel) { + this.chatPanel.userInput = codeText; + this.chatPanel.userInputChange.emit(codeText); + setTimeout(() => { + this.chatPanel.sendMessage.emit(new Event('submit')); + }, 50); + } + }); + + parentEl.appendChild(button); + } } diff --git a/src/app/components/markdown/testing/mock-markdown.component.ts b/src/app/components/markdown/testing/mock-markdown.component.ts index fefd9b41..2b57fbb8 100644 --- a/src/app/components/markdown/testing/mock-markdown.component.ts +++ b/src/app/components/markdown/testing/mock-markdown.component.ts @@ -39,4 +39,5 @@ import {MarkdownComponentInterface} from '../markdown.component.interface'; export class MockMarkdownComponent implements MarkdownComponentInterface { text = input(''); thought = input(false); + isReadme = input(false); } diff --git a/src/app/components/side-panel/side-panel.component.spec.ts b/src/app/components/side-panel/side-panel.component.spec.ts index fa7f6154..4b921018 100644 --- a/src/app/components/side-panel/side-panel.component.spec.ts +++ b/src/app/components/side-panel/side-panel.component.spec.ts @@ -436,4 +436,31 @@ describe('SidePanelComponent', () => { }); }); }); + + describe('Dynamic Eval Tab Initialization', () => { + it('should initialize Eval tab dynamically when appName transitions from empty to non-empty', async () => { + fixture = TestBed.createComponent(SidePanelComponent); + component = fixture.componentInstance; + fixture.componentRef.setInput('appName', ''); + fixture.componentRef.setInput('showSidePanel', true); + fixture.detectChanges(); + + // Assert: Tab container is not rendered + expect(fixture.debugElement.query(TABS_CONTAINER_SELECTOR)).toBeNull(); + expect(fixture.debugElement.query(EVAL_TAB_SELECTOR)).toBeNull(); + + // Act: Change appName to a non-empty string + fixture.componentRef.setInput('appName', 'my-app'); + fixture.detectChanges(); + await fixture.whenStable(); + fixture.detectChanges(); + + // Switch to Eval Tab to instantiate its container + await switchTab(EVAL_TAB_INDEX); + + // Assert: Tab container is now rendered, and Eval tab component is instantiated + expect(fixture.debugElement.query(TABS_CONTAINER_SELECTOR)).toBeTruthy(); + expect(fixture.debugElement.query(EVAL_TAB_SELECTOR)).toBeTruthy(); + }); + }); }); diff --git a/src/app/components/side-panel/side-panel.component.ts b/src/app/components/side-panel/side-panel.component.ts index 3d984070..92145411 100644 --- 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 {AfterViewInit, ChangeDetectionStrategy, Component, computed, effect, EnvironmentInjector, inject, input, OnInit, output, runInInjectionContext, signal, Type, viewChild, ViewContainerRef} from '@angular/core'; +import {AfterViewInit, ChangeDetectionStrategy, Component, ComponentRef, computed, effect, EnvironmentInjector, inject, input, OnInit, output, runInInjectionContext, signal, Type, viewChild, ViewContainerRef} from '@angular/core'; import {toSignal} from '@angular/core/rxjs-interop'; import {MatPaginator, PageEvent} from '@angular/material/paginator'; import {MatProgressSpinner} from '@angular/material/progress-spinner'; @@ -27,7 +27,7 @@ import {first} from 'rxjs/operators'; import {EvalCase} from '../../core/models/Eval'; import {Session, SessionState} from '../../core/models/Session'; -import {SpanNode} from '../../core/models/Trace'; +import {Span} from '../../core/models/Trace'; import {Blob, Event, LlmRequest, LlmResponse} from '../../core/models/types'; import {FEATURE_FLAG_SERVICE} from '../../core/services/interfaces/feature-flag'; import {UI_STATE_SERVICE} from '../../core/services/interfaces/ui-state'; @@ -69,7 +69,7 @@ export class SidePanelComponent implements AfterViewInit, OnInit { appName = input(''); userId = input(''); sessionId = input(''); - traceData = input([]); + traceData = input([]); eventData = input(new Map()); currentSessionState = input(); artifacts = input([]); @@ -133,6 +133,7 @@ export class SidePanelComponent implements AfterViewInit, OnInit { selectedIndex = 0; private pendingEvalCaseSelection = signal<{ evalSetId: string, evalCase: EvalCase } | undefined>(undefined); private pendingEvalResultSelection = signal<{ evalSetId: string, timestamp: string, evalCase?: EvalCase } | undefined>(undefined); + protected readonly evalTabRef = signal | null>(null); constructor() { effect(() => { @@ -143,29 +144,67 @@ export class SidePanelComponent implements AfterViewInit, OnInit { // Event tab is index 0. Re-activate it if we select an event and another tab is active. if (tabGroup.selectedIndex !== 0) { this.selectedIndex = 0; - window.localStorage.setItem('adk-side-panel-selected-tab', '0'); } } }); - } - ngOnInit() { - const savedTab = window.localStorage.getItem('adk-side-panel-selected-tab'); - if (savedTab !== null) { - this.selectedIndex = parseInt(savedTab, 10); - } + effect(() => { + const container = this.evalTabContainer(); + if (container) { + this.initEvalTab(); + } else { + this.evalTabRef.set(null); + } + }); + + effect(() => { + const ref = this.evalTabRef(); + if (ref) { + ref.setInput('appName', this.appName()); + ref.setInput('userId', this.userId()); + ref.setInput('sessionId', this.sessionId()); + } + }); + + effect(() => { + const ref = this.evalTabRef(); + const pending = this.pendingEvalCaseSelection(); + if (ref && pending) { + ref.instance.selectEvalSet(pending.evalSetId); + ref.instance.selectedEvalTab.set('cases'); + ref.instance.selectedEvalCase.set(pending.evalCase); + this.pendingEvalCaseSelection.set(undefined); + } + }); + + effect(() => { + const ref = this.evalTabRef(); + const pending = this.pendingEvalResultSelection(); + if (ref && pending) { + ref.instance.selectEvalSet(pending.evalSetId); + ref.instance.selectedHistoryRun.set(pending.timestamp); + if (pending.evalCase) { + ref.instance.selectedEvalTab.set('cases'); + ref.instance.selectedEvalCase.set(pending.evalCase); + } else { + ref.instance.selectedEvalTab.set('history'); + } + this.pendingEvalResultSelection.set(undefined); + } + }); } + ngOnInit() {} + onTabChange(event: MatTabChangeEvent) { this.tabChange.emit(event); this.selectedIndex = event.index; - window.localStorage.setItem('adk-side-panel-selected-tab', event.index.toString()); } switchToEvalTab() { this.isEvalEnabledObs.pipe(first()).subscribe((isEvalEnabled) => { if (!isEvalEnabled) return; - + forkJoin([ this.isArtifactsTabEnabledObs.pipe(first()), this.isTestsEnabledObs.pipe(first()), @@ -174,7 +213,6 @@ export class SidePanelComponent implements AfterViewInit, OnInit { if (artifactsEnabled) index++; if (testsEnabled) index++; this.selectedIndex = index; - window.localStorage.setItem('adk-side-panel-selected-tab', index.toString()); }); }); } @@ -192,20 +230,16 @@ export class SidePanelComponent implements AfterViewInit, OnInit { selectEvalResult(evalSetId: string, timestamp: string, evalCase?: EvalCase) { const tab = this.evalTabComponent(); - console.log('selectEvalResult tab available:', !!tab, 'evalCase:', evalCase); if (tab) { tab.selectEvalSet(evalSetId); tab.selectedHistoryRun.set(timestamp); if (evalCase) { - console.log('selectEvalResult setting cases tab and case'); tab.selectedEvalTab.set('cases'); tab.selectedEvalCase.set(evalCase); } else { - console.log('selectEvalResult setting history tab and run'); tab.selectedEvalTab.set('history'); } } else { - console.log('selectEvalResult deferred to pending'); this.pendingEvalResultSelection.set({ evalSetId, timestamp, evalCase }); } } @@ -231,12 +265,7 @@ export class SidePanelComponent implements AfterViewInit, OnInit { return this.selectedEvent() as Event | undefined; }); - ngAfterViewInit() { - // Wait one tick until the eval tab container is ready. - setTimeout(() => { - this.initEvalTab(); - }, 500); - } + ngAfterViewInit() {} /** * Dynamically create the eval tab. We must do this programmatically until @@ -246,49 +275,16 @@ export class SidePanelComponent implements AfterViewInit, OnInit { private initEvalTab() { this.isEvalEnabledObs.pipe(first()).subscribe((isEvalEnabled) => { if (isEvalEnabled) { - const evalTabComponent = this.evalTabContainer()?.createComponent( + const container = this.evalTabContainer(); + if (!container) return; + container.clear(); + + const evalTabComponent = container.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()); - }); - - effect(() => { - const pending = this.pendingEvalCaseSelection(); - if (pending) { - console.log('initEvalTab applying pendingEvalCaseSelection:', pending); - evalTabComponent.instance.selectEvalSet(pending.evalSetId); - evalTabComponent.instance.selectedEvalTab.set('cases'); - evalTabComponent.instance.selectedEvalCase.set(pending.evalCase); - this.pendingEvalCaseSelection.set(undefined); - } - }); - - effect(() => { - const pending = this.pendingEvalResultSelection(); - if (pending) { - console.log('initEvalTab applying pendingEvalResultSelection:', pending); - evalTabComponent.instance.selectEvalSet(pending.evalSetId); - evalTabComponent.instance.selectedHistoryRun.set(pending.timestamp); - if (pending.evalCase) { - console.log('initEvalTab setting cases tab and case'); - evalTabComponent.instance.selectedEvalTab.set('cases'); - evalTabComponent.instance.selectedEvalCase.set(pending.evalCase); - } else { - console.log('initEvalTab setting history tab and run'); - evalTabComponent.instance.selectedEvalTab.set('history'); - } - this.pendingEvalResultSelection.set(undefined); - } - }); - }); evalTabComponent.instance.sessionSelected.subscribe( (session: Session) => { this.sessionSelected.emit(session); @@ -314,7 +310,7 @@ export class SidePanelComponent implements AfterViewInit, OnInit { this.evalNotInstalled.emit(message); }); - // Pending selections are now handled by effects reactively. + this.evalTabRef.set(evalTabComponent); } }); } diff --git a/src/app/components/state-tab/state-tab.component.html b/src/app/components/state-tab/state-tab.component.html index 90ea1d05..b168262e 100644 --- a/src/app/components/state-tab/state-tab.component.html +++ b/src/app/components/state-tab/state-tab.component.html @@ -19,7 +19,7 @@
{{ i18n.stateIsEmpty }}
} @else {
- +
}
diff --git a/src/app/components/state-tab/state-tab.component.spec.ts b/src/app/components/state-tab/state-tab.component.spec.ts index c5b0862d..215917a4 100644 --- a/src/app/components/state-tab/state-tab.component.spec.ts +++ b/src/app/components/state-tab/state-tab.component.spec.ts @@ -66,7 +66,8 @@ describe('StateTabComponent', () => { 'sessionState', {foo: 'bar'} as unknown as SessionState); fixture.detectChanges(); - const jsonViewer = fixture.debugElement.query(By.css('ngx-json-viewer')); + const jsonViewer = + fixture.debugElement.query(By.css('app-custom-json-viewer')); expect(jsonViewer).toBeTruthy(); const emptyState = fixture.debugElement.query(By.css('.empty-state')); diff --git a/src/app/components/state-tab/state-tab.component.ts b/src/app/components/state-tab/state-tab.component.ts index 44415d45..4534201a 100644 --- a/src/app/components/state-tab/state-tab.component.ts +++ b/src/app/components/state-tab/state-tab.component.ts @@ -16,7 +16,7 @@ */ import {ChangeDetectionStrategy, Component, inject, Input} from '@angular/core'; -import {NgxJsonViewerModule} from 'ngx-json-viewer'; +import {CustomJsonViewerComponent} from '../custom-json-viewer/custom-json-viewer.component'; import type {SessionState} from '../../core/models/Session'; @@ -28,7 +28,7 @@ import {StateTabMessagesInjectionToken} from './state-tab.component.i18n'; selector: 'app-state-tab', templateUrl: './state-tab.component.html', styleUrl: './state-tab.component.scss', - imports: [NgxJsonViewerModule], + imports: [CustomJsonViewerComponent], standalone: true, }) export class StateTabComponent { diff --git a/src/app/components/trace-tab/trace-event/trace-event.component.html b/src/app/components/trace-tab/trace-event/trace-event.component.html index 55f382a5..c682b34e 100644 --- a/src/app/components/trace-tab/trace-event/trace-event.component.html +++ b/src/app/components/trace-tab/trace-event/trace-event.component.html @@ -17,7 +17,7 @@
- +
@@ -27,7 +27,7 @@
Request is not available.
} @else {
- +
} @@ -38,7 +38,7 @@
Response is not available.
} @else {
- +
} diff --git a/src/app/components/trace-tab/trace-event/trace-event.component.spec.ts b/src/app/components/trace-tab/trace-event/trace-event.component.spec.ts index 409cff11..7957fab9 100644 --- a/src/app/components/trace-tab/trace-event/trace-event.component.spec.ts +++ b/src/app/components/trace-tab/trace-event/trace-event.component.spec.ts @@ -22,7 +22,7 @@ import {NoopAnimationsModule} from '@angular/platform-browser/animations'; import {of} from 'rxjs'; // 1p-ONLY-IMPORTS: import {beforeEach, describe, expect, it} -import {Span} from '../../../core/models/Trace'; +import {Span, SpanValidator} from '../../../core/models/Trace'; import {EVENT_SERVICE, EventService} from '../../../core/services/interfaces/event'; import {FEATURE_FLAG_SERVICE} from '../../../core/services/interfaces/feature-flag'; import {GRAPH_SERVICE, GraphService} from '../../../core/services/interfaces/graph'; @@ -61,16 +61,28 @@ describe('TraceEventComponent', () => { let featureFlagService: MockFeatureFlagService; let uiStateService: MockUiStateService; - const span: Span = { - name: 'test-span', - trace_id: 'trace-id', - span_id: 'span-id', - start_time: 1, - end_time: 2, - attributes: { - 'gcp.vertex.agent.event_id': EVENT_ID, - }, - }; + /** + * Builds a `Span` by routing the raw object through `SpanValidator` so + * promoted attribute fields (e.g. `attrEventId`) are populated. + */ + function makeSpan(attrs: Record): Span { + const result = SpanValidator.safeParse({ + name: 'test-span', + trace_id: 'trace-id', + span_id: 'span-id', + start_time: 1, + end_time: 2, + attributes: attrs, + }); + if (!result.success) { + throw new Error(`Failed to build test span: ${result.error.message}`); + } + return result.data; + } + + const span: Span = makeSpan({ + 'gcp.vertex.agent.event_id': EVENT_ID, + }); beforeEach(async () => { traceService = new MockTraceService(); @@ -98,9 +110,8 @@ describe('TraceEventComponent', () => { await TestBed .configureTestingModule({ - imports: [MatDialogModule, TraceEventComponent, NoopAnimationsModule], + imports: [TraceEventComponent, NoopAnimationsModule], providers: [ - {provide: MatDialog, useValue: matDialog}, {provide: TRACE_SERVICE, useValue: traceService}, {provide: EVENT_SERVICE, useValue: eventService}, {provide: GRAPH_SERVICE, useValue: graphService}, @@ -112,6 +123,13 @@ describe('TraceEventComponent', () => { }, ], }) + .overrideComponent(TraceEventComponent, { + set: { + providers: [ + {provide: MatDialog, useValue: matDialog}, + ], + }, + }) .compileComponents(); domSanitizer.bypassSecurityTrustHtml.and.returnValue(SANITIZED_SVG); @@ -149,24 +167,18 @@ describe('TraceEventComponent', () => { }); it('should parse LLM request from the selected span attributes', () => { - traceService.selectedTraceRow$.next({ - ...span, - attributes: { - 'gcp.vertex.agent.event_id': EVENT_ID, - 'gcp.vertex.agent.llm_request': JSON.stringify({data: 'request'}), - } - }); + traceService.selectedTraceRow$.next(makeSpan({ + 'gcp.vertex.agent.event_id': EVENT_ID, + 'gcp.vertex.agent.llm_request': JSON.stringify({data: 'request'}), + })); expect(component.llmRequest).toEqual({data: 'request'}); }); it('should parse LLM response from the selected span attributes', () => { - traceService.selectedTraceRow$.next({ - ...span, - attributes: { - 'gcp.vertex.agent.event_id': EVENT_ID, - 'gcp.vertex.agent.llm_response': JSON.stringify({data: 'response'}), - } - }); + traceService.selectedTraceRow$.next(makeSpan({ + 'gcp.vertex.agent.event_id': EVENT_ID, + 'gcp.vertex.agent.llm_response': JSON.stringify({data: 'response'}), + })); expect(component.llmResponse).toEqual({data: 'response'}); }); }); @@ -183,14 +195,7 @@ describe('TraceEventComponent', () => { it('should return undefined if the selected row lacks the event_id attribute', () => { - component.selectedRow = { - name: 'test-span', - trace_id: 'trace-id', - span_id: 'span-id', - start_time: 1, - end_time: 2, - attributes: {'another_attribute': 'value'}, - }; + component.selectedRow = makeSpan({'another_attribute': 'value'}); expect(component.getEventIdFromSpan()).toBeUndefined(); }); }); 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 index f36fd7de..b2ad8104 100644 --- a/src/app/components/trace-tab/trace-event/trace-event.component.ts +++ b/src/app/components/trace-tab/trace-event/trace-event.component.ts @@ -23,10 +23,10 @@ import {MatIcon} from '@angular/material/icon'; import {MatProgressSpinner} from '@angular/material/progress-spinner'; import {MatTab, MatTabGroup} from '@angular/material/tabs'; import {SafeHtml} from '@angular/platform-browser'; -import {NgxJsonViewerModule} from 'ngx-json-viewer'; +import {CustomJsonViewerComponent} from '../../custom-json-viewer/custom-json-viewer.component'; import {tap} from 'rxjs/operators'; -import {Span} from '../../../core/models/Trace'; +import {OPERATION_GENERATE_CONTENT, Span} from '../../../core/models/Trace'; import {EVENT_SERVICE} from '../../../core/services/interfaces/event'; import {FEATURE_FLAG_SERVICE} from '../../../core/services/interfaces/feature-flag'; import {GRAPH_SERVICE} from '../../../core/services/interfaces/graph'; @@ -41,7 +41,7 @@ import {ViewImageDialogComponent} from '../../view-image-dialog/view-image-dialo templateUrl: './trace-event.component.html', styleUrl: './trace-event.component.scss', imports: [ - MatTabGroup, MatTab, NgxJsonViewerModule, MatIconButton, MatIcon, + MatTabGroup, MatTab, CustomJsonViewerComponent, MatIconButton, MatIcon, MatProgressSpinner, AsyncPipe ] }) @@ -58,8 +58,6 @@ export class TraceEventComponent implements OnInit { llmRequest: any = undefined; llmResponse: any = undefined; - llmRequestKey = 'gcp.vertex.agent.llm_request'; - llmResponseKey = 'gcp.vertex.agent.llm_response'; private readonly dialog = inject(MatDialog); private readonly traceService = inject(TRACE_SERVICE); @@ -80,27 +78,9 @@ export class TraceEventComponent implements OnInit { this.selectedRow = span; const eventId = this.getEventIdFromSpan(); if (eventId) { - this.llmRequest = undefined; - this.llmResponse = undefined; - - const requestStr = this.selectedRow?.attributes?.[this.llmRequestKey]; - const responseStr = this.selectedRow?.attributes?.[this.llmResponseKey]; - - if (requestStr) { - try { - this.llmRequest = typeof requestStr === 'string' ? JSON.parse(requestStr) : requestStr; - } catch (e) { - console.warn('Failed to parse LLM request', e); - } - } - - if (responseStr) { - try { - this.llmResponse = typeof responseStr === 'string' ? JSON.parse(responseStr) : responseStr; - } catch (e) { - console.warn('Failed to parse LLM response', e); - } - } + const io = this.selectedRow?.io; + this.llmRequest = io?.inputs; + this.llmResponse = io?.outputs; this.getEventGraph(eventId); } }); @@ -119,17 +99,15 @@ export class TraceEventComponent implements OnInit { getEventDetails() { if (this.eventData && this.selectedRow) { - return this.eventData.get(this.getEventIdFromSpan()); + const eventId = this.getEventIdFromSpan(); + return eventId ? this.eventData.get(eventId) : undefined; } else { return undefined; } } getEventIdFromSpan() { - if (!this.selectedRow) { - return undefined; - } - return this.selectedRow.attributes['gcp.vertex.agent.event_id']; + return this.selectedRow?.attrEventId; } getEventGraph(eventId: string) { diff --git a/src/app/components/trace-tab/trace-tab.component.html b/src/app/components/trace-tab/trace-tab.component.html index b5441ae9..d9757609 100644 --- a/src/app/components/trace-tab/trace-tab.component.html +++ b/src/app/components/trace-tab/trace-tab.component.html @@ -78,11 +78,12 @@ } - @if (selectedSpan()?.attributes && selectedSpan()!.attributes['gcp.vertex.agent.event_id']) { + @let eventId = getSelectedSpanEventId(); + @if (eventId) { - +
Event ID{{ selectedSpan()!.attributes['gcp.vertex.agent.event_id'] }}{{ eventId }}
} @@ -91,10 +92,11 @@ } @if (selectedDetailTab() === 'attributes') {
- @if (selectedSpan()?.attributes && Object.keys(selectedSpan()!.attributes).length > 0) { + @let attrs = getSelectedSpanAttributesView(); + @if (attrs && Object.keys(attrs).length > 0) { - @for (key of Object.keys(selectedSpan()!.attributes); track key) { - + @for (key of Object.keys(attrs); track key) { + }
{{ key }}{{ selectedSpan()!.attributes[key] }}
{{ key }}{{ attrs[key] }}
} @else { @@ -103,9 +105,10 @@
} @if (selectedDetailTab() === 'raw') { + @let rawSpan = getSelectedSpanRawView();
- -
diff --git a/src/app/components/trace-tab/trace-tab.component.spec.ts b/src/app/components/trace-tab/trace-tab.component.spec.ts index cc08b5b7..77f094ef 100644 --- a/src/app/components/trace-tab/trace-tab.component.spec.ts +++ b/src/app/components/trace-tab/trace-tab.component.spec.ts @@ -20,14 +20,27 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {MatExpansionPanelHarness} from '@angular/material/expansion/testing'; import {NoopAnimationsModule} from '@angular/platform-browser/animations'; -import {Span} from '../../core/models/Trace'; +import {Span, SpanValidator} from '../../core/models/Trace'; import {TRACE_SERVICE} from '../../core/services/interfaces/trace'; import {MockTraceService} from './../../core/services/testing/mock-trace.service'; import {TraceTabComponent} from './trace-tab.component'; +/** + * Helper that builds a `Span` by routing a raw OTel-shaped object through + * `SpanValidator`. Required because the validator strips the raw + * `attributes` bag in favor of typed `attr*` promoted fields. + */ +function makeSpan(raw: unknown): Span { + const result = SpanValidator.safeParse(raw); + if (!result.success) { + throw new Error(`Failed to build test span: ${result.error.message}`); + } + return result.data; +} + const MOCK_TRACE_DATA: Span[] = [ - { + makeSpan({ name: 'agent.act', start_time: 1733084700000000000, end_time: 1733084760000000000, @@ -39,8 +52,8 @@ const MOCK_TRACE_DATA: Span[] = [ 'gcp.vertex.agent.llm_request': '{"contents":[{"role":"user","parts":[{"text":"Hello"}]},{"role":"agent","parts":[{"text":"Hi. What can I help you with?"}]},{"role":"user","parts":[{"text":"I need help with my project."}]}]}', }, - }, - { + }), + makeSpan({ name: 'tool.invoke', start_time: 1733084705000000000, end_time: 1733084755000000000, @@ -50,7 +63,7 @@ const MOCK_TRACE_DATA: Span[] = [ attributes: { 'tool_name': 'project_helper', }, - }, + }), ]; describe('TraceTabComponent', () => { @@ -89,7 +102,7 @@ describe('TraceTabComponent', () => { xdescribe('with trace data', () => { const MOCK_TRACE_DATA_WITH_MULTIPLE_TRACES: Span[] = [ ...MOCK_TRACE_DATA, - { + makeSpan({ name: 'agent.act-2', start_time: 1733084700000000000, end_time: 1733084760000000000, @@ -101,7 +114,7 @@ describe('TraceTabComponent', () => { 'gcp.vertex.agent.llm_request': '{"contents":[{"role":"user","parts":[{"text":"Another user message"}]}]}', }, - }, + }), ]; beforeEach(async () => { diff --git a/src/app/components/trace-tab/trace-tab.component.ts b/src/app/components/trace-tab/trace-tab.component.ts index 3ef9087d..c800f958 100644 --- a/src/app/components/trace-tab/trace-tab.component.ts +++ b/src/app/components/trace-tab/trace-tab.component.ts @@ -20,10 +20,11 @@ import {MatButtonModule} from '@angular/material/button'; import {MatIconModule} from '@angular/material/icon'; import {MatPaginator, MatPaginatorIntl, PageEvent} from '@angular/material/paginator'; import {MatTooltipModule} from '@angular/material/tooltip'; -import {NgxJsonViewerModule} from 'ngx-json-viewer'; +import {CustomJsonViewerComponent} from '../custom-json-viewer/custom-json-viewer.component'; import {InfoTable} from '../info-table/info-table'; import {TRACE_SERVICE} from '../../core/services/interfaces/trace'; +import {Span} from '../../core/models/Trace'; @Injectable() export class SpanPaginatorIntl extends MatPaginatorIntl { @@ -49,35 +50,35 @@ export class SpanPaginatorIntl extends MatPaginatorIntl { styleUrl: './trace-tab.component.scss', standalone: true, imports: [ - MatButtonModule, MatIconModule, MatTooltipModule, NgxJsonViewerModule, MatPaginator, InfoTable + MatButtonModule, MatIconModule, MatTooltipModule, CustomJsonViewerComponent, MatPaginator, InfoTable ], providers: [ { provide: MatPaginatorIntl, useClass: SpanPaginatorIntl } ] }) export class TraceTabComponent { - _traceData: any[] = []; - orderedTraceData: any[] = []; + _traceData: Span[] = []; + orderedTraceData: Span[] = []; // Input kept so we don't break side-panel binding, though not used here anymore - @Input() set traceData(val: any[]) { + @Input() set traceData(val: Span[]) { this._traceData = val || []; this.orderedTraceData = this.computeOrdered(this._traceData); } - get traceData(): any[] { + get traceData(): Span[] { return this._traceData; } - computeOrdered(spans: any[]): any[] { + computeOrdered(spans: Span[]): Span[] { const spanClones = spans.map(span => ({...span})); - const spanMap = new Map(); - const roots: any[] = []; + const spanMap = new Map(); + const roots: Span[] = []; - spanClones.forEach(span => spanMap.set(span.span_id, span)); + spanClones.forEach(span => spanMap.set(String(span.span_id), span)); spanClones.forEach(span => { - if (span.parent_span_id && spanMap.has(span.parent_span_id)) { - const parent = spanMap.get(span.parent_span_id)!; + if (span.parent_span_id && spanMap.has(String(span.parent_span_id))) { + const parent = spanMap.get(String(span.parent_span_id))!; parent.children = parent.children || []; parent.children.push(span); } else { @@ -85,7 +86,7 @@ export class TraceTabComponent { } }); - const flatten = (spansArray: any[]): any[] => { + const flatten = (spansArray: Span[]): Span[] => { return spansArray.flatMap(span => [ span, ...(span.children ? flatten(span.children) : []) @@ -94,10 +95,10 @@ export class TraceTabComponent { return flatten(roots); } - + protected readonly traceService = inject(TRACE_SERVICE); selectedSpan = toSignal(this.traceService.selectedTraceRow$); - + private static getValidTraceTab(tab: string | null): 'info' | 'attributes' | 'raw' { if (tab === 'info' || tab === 'attributes' || tab === 'raw') { return tab; @@ -108,7 +109,7 @@ export class TraceTabComponent { selectedDetailTab = signal<'info' | 'attributes' | 'raw'>( TraceTabComponent.getValidTraceTab(window.localStorage.getItem('adk-trace-tab-selected-tab')) ); - + switchToEvent = output(); constructor() { @@ -122,14 +123,14 @@ export class TraceTabComponent { return new Date(nanos / 1_000_000).toLocaleString(); } - get selectedSpanChildren() { + get selectedSpanChildren(): Span[] { const span = this.selectedSpan(); if (!span) return []; if (span.children && span.children.length > 0) return span.children; - return this.traceData.filter(s => s.parent_span_id === span.span_id); + return this.traceData.filter(s => s.parent_span_id && String(s.parent_span_id) === String(span.span_id)); } - selectSpanById(id: string | undefined): void { + selectSpanById(id: string | number | null | undefined): void { if (!id) return; const span = this.traceData.find(s => String(s.span_id) === String(id)); if (span) { @@ -174,19 +175,34 @@ export class TraceTabComponent { this.traceService.selectedRow(this.orderedTraceData[newIndex]); } - + readonly Object = Object; copiedId: string | null = null; - copyToClipboard(value: string | undefined | null, key?: string) { - if (!value) return; - navigator.clipboard.writeText(value).then(() => { - this.copiedId = key || value; + copyToClipboard(value: string | number | undefined | null, key?: string) { + if (value === undefined || value === null || value === '') return; + const strValue = String(value); + navigator.clipboard.writeText(strValue).then(() => { + this.copiedId = key || strValue; setTimeout(() => this.copiedId = null, 2000); }); } + getSelectedSpanEventId(): string | undefined { + return this.selectedSpan()?.attrEventId; + } + + getSelectedSpanAttributesView(): Record { + const span = this.selectedSpan(); + return span?.rawAttributesUseThisFieldOnlyForDisplay ?? {}; + } + + getSelectedSpanRawView(): unknown { + const span = this.selectedSpan(); + return span?.rawSpanUseThisFieldOnlyForDisplay; + } + copyJsonToClipboard(json: any, key: string) { if (!json) return; const value = JSON.stringify(json, null, 2); 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 index f7eae55a..02d03d59 100644 --- a/src/app/components/trace-tab/trace-tree/trace-tree.component.ts +++ b/src/app/components/trace-tab/trace-tree/trace-tree.component.ts @@ -25,6 +25,11 @@ import {UiEvent} from '../../../core/models/UiEvent'; import {HtmlTooltipDirective} from '../../../directives/html-tooltip.directive'; import {EventContentComponent} from '../../event-content/event-content.component'; +export interface FlatTreeNode { + span: Span; + level: number; +} + @Component({ changeDetection: ChangeDetectionStrategy.Default, selector: 'app-trace-tree', @@ -33,7 +38,7 @@ import {EventContentComponent} from '../../event-content/event-content.component imports: [MatButtonModule, MatIconModule, MatTooltipModule, HtmlTooltipDirective, EventContentComponent] }) export class TraceTreeComponent implements OnInit, OnChanges { - @Input() spans: any[] = []; + @Input() spans: Span[] = []; @Input() invocationId: string = ''; @Input() uiEvents: UiEvent[] = []; @Input() shouldShowEvent?: (uiEvent: UiEvent) => boolean; @@ -42,9 +47,9 @@ export class TraceTreeComponent implements OnInit, OnChanges { baseStartTimeMs = 0; totalDurationMs = 1; rootLatencyNanos = 0; - flatTree: {span: Span; level: number}[] = []; + flatTree: FlatTreeNode[] = []; - shouldShowNode(node: any): boolean { + shouldShowNode(node: FlatTreeNode): boolean { const uiEvent = this.getUiEvent(node); if (!uiEvent) { return true; @@ -121,11 +126,11 @@ export class TraceTreeComponent implements OnInit, OnChanges { this.flatTree.push(...this.flattenTree(root.children, 0)); } }); - + const times = this.getGlobalTimes(this.spans); this.baseStartTimeMs = times.start; this.totalDurationMs = times.duration; - + if (this.tree && this.tree.length > 0) { this.rootLatencyNanos = this.tree[0].end_time - this.tree[0].start_time; } else { @@ -139,10 +144,10 @@ export class TraceTreeComponent implements OnInit, OnChanges { const spanMap = new Map(); const roots: Span[] = []; - spanClones.forEach(span => spanMap.set(span.span_id, span)); + spanClones.forEach(span => spanMap.set(String(span.span_id), span)); spanClones.forEach(span => { - if (span.parent_span_id && spanMap.has(span.parent_span_id)) { - const parent = spanMap.get(span.parent_span_id)!; + if (span.parent_span_id && spanMap.has(String(span.parent_span_id))) { + const parent = spanMap.get(String(span.parent_span_id))!; parent.children = parent.children || []; parent.children.push(span); } else { @@ -169,7 +174,7 @@ export class TraceTreeComponent implements OnInit, OnChanges { if (nanos < 1_000_000) return `${(nanos / 1000).toFixed(2)}us`; if (nanos < 1_000_000_000) return `${(nanos / 1_000_000).toFixed(2)}ms`; if (nanos < 60_000_000_000) return `${(nanos / 1_000_000_000).toFixed(2)}s`; - + const minutes = Math.floor(nanos / 60_000_000_000); const seconds = ((nanos % 60_000_000_000) / 1_000_000_000).toFixed(2); return `${minutes}m ${seconds}s`; @@ -187,7 +192,7 @@ export class TraceTreeComponent implements OnInit, OnChanges { 100; } - flattenTree(spans: Span[], level: number = 0): any[] { + flattenTree(spans: Span[], level: number = 0): FlatTreeNode[] { const tree = spans.flatMap( span => [{span, level}, @@ -222,34 +227,31 @@ export class TraceTreeComponent implements OnInit, OnChanges { return Array.from({length: n}); } - selectRow(node: any) { + selectRow(node: FlatTreeNode) { if (this.selectedRow && this.selectedRow.span_id == node.span.span_id) { return; } this.traceService.selectedRow(node.span); } - rowSelected(node: any) { + rowSelected(node: FlatTreeNode) { if (!this.selectedRow || !node?.span) return false; return String(this.selectedRow.span_id) === String(node.span.span_id); } - isEventRow(node: any) { - if (!node.span.attributes) { - return false; - } - const eventId = node?.span.attributes['gcp.vertex.agent.event_id']; + isEventRow(node: FlatTreeNode) { + const eventId = this.getEventId(node); if (eventId && this.uiEvents && this.uiEvents.length > 0) { return this.uiEvents.some(e => e.event?.id === eventId); } return false; } - getEventId(node: any): string { - return node?.span?.attributes?.['gcp.vertex.agent.event_id'] ?? ''; + getEventId(node: FlatTreeNode): string { + return node?.span?.attrEventId ?? ''; } - getUiEvent(node: any): UiEvent | null { + getUiEvent(node: FlatTreeNode): UiEvent | null { const eventId = this.getEventId(node); if (eventId && this.uiEvents && this.uiEvents.length > 0) { return this.uiEvents.find(e => e.event?.id === eventId) || null; diff --git a/src/app/components/view-image-dialog/view-image-dialog.component.scss b/src/app/components/view-image-dialog/view-image-dialog.component.scss index 57a67436..0fdc1521 100644 --- a/src/app/components/view-image-dialog/view-image-dialog.component.scss +++ b/src/app/components/view-image-dialog/view-image-dialog.component.scss @@ -5,12 +5,8 @@ height: 100vh; padding: 0; overflow: hidden; - background-color: rgba( - 0, - 0, - 0, - 0.6 - ); /* Semi-transparent backdrop for lightbox effect */ + background-color: rgba(0, 0, 0, 0.6); + /* Semi-transparent backdrop for lightbox effect */ } .close-button { @@ -37,24 +33,29 @@ svg { width: 24px; height: 24px; - fill: currentColor; /* Use current color for SVG fill */ + fill: currentColor; + /* Use current color for SVG fill */ } } .image-wrapper { - flex-grow: 1; /* Allow image wrapper to take available space */ + flex-grow: 1; + /* Allow image wrapper to take available space */ display: flex; justify-content: center; align-items: center; - overflow: hidden; /* Hide scrollbars, use pan to move image */ + overflow: hidden; + /* Hide scrollbars, use pan to move image */ } .image-wrapper img, .image-wrapper .svg-container { max-width: 100%; max-height: 100%; - object-fit: contain; /* Ensure image fits within bounds without cropping */ - border-radius: 0; /* Remove rounded corners for full screen view */ + object-fit: contain; + /* Ensure image fits within bounds without cropping */ + border-radius: 0; + /* Remove rounded corners for full screen view */ } .no-image-placeholder { @@ -174,4 +175,4 @@ transform: translate(-50%, -50%); pointer-events: none; z-index: 5; -} +} \ No newline at end of file diff --git a/src/app/core/models/Trace.ts b/src/app/core/models/Trace.ts index 44bc357d..939da50e 100644 --- a/src/app/core/models/Trace.ts +++ b/src/app/core/models/Trace.ts @@ -1,6 +1,6 @@ /** * @license - * Copyright 2025 Google LLC + * Copyright 2026 Google LLC * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -15,50 +15,527 @@ * limitations under the License. */ -// Non-exhaustive union for better autocomplete. -export declare type LogName = 'gen_ai.user.message' | 'gen_ai.choice' | 'gen_ai.system.message' | (string & {}); +/** + * Public facade for trace / span validation. + * + * Validation is performed in three stages: + * + * Stage 1 (`RawSpanValidator`) — validates the OpenTelemetry envelope + * (`name`, `start_time`, …, plus a lenient internal `attributes` bag + * used only as the source for promotion). + * + * Stage 2 (`SpanValidator`) — promotes well-known attributes from the + * bag into typed top-level fields prefixed with `attr`. All + * non-display logic should read attribute values through the typed + * `attr*` promoted fields. + * + * All known attributes are surfaced as **optional** on every span. On + * top of that, two operation-specific branches tighten certain + * attributes to **required**: + * + * - `gen_ai.operation.name == "invoke_agent"` → + * `attrConversationId` becomes required. + * - `gen_ai.operation.name == "generate_content"` → + * `attrEventId` and `attrInvocationId` become required. + * + * `attrOperationName` is the discriminator. On the *fallback* branch + * (operation name missing or unrecognized) `attrOperationName` is the + * literal `undefined`, so a check like + * + * if (span.attrOperationName === 'generate_content') { … } + * + * narrows the union to `GenerateContentSpan` purely via TypeScript's + * discriminated-union machinery — no extra runtime helper needed. + * + * Stage 3 (input/output coercion) — see {@link coerceSpanIo}. Projects + * the span's inputs/outputs into a unified discriminated `SpanIo` + * shape so that consumers can render LLM IO uniformly regardless of + * which semantic convention produced the underlying data: + * + * - experimental: payload from the + * `gen_ai.client.inference.operation.details` log's attributes; + * - stable: payload from `gen_ai.system.message`, + * `gen_ai.user.message`, and `gen_ai.choice` child logs; + * - legacy: payload from the `gcp.vertex.agent.llm_{request,response}` + * JSON-string attributes. + * + * The result is exposed as the optional `io` field on + * `GenerateContentSpan` and `FallbackSpan` (the only branches that + * can carry LLM IO). Note: child log records are validated at Stage 1 + * (so malformed shapes are still rejected) but are dropped from the + * validated output — the only meaningful reason to read them was to + * derive the LLM IO, which is now centralized in Stage 3. + */ + +import { z } from 'zod'; + +import { + CompletionDetailsLog, + CompletionDetailsLogValidator, + GEN_AI_COMPLETION_DETAILS_EVENT, + GEN_AI_RESPONSE_FINISH_REASONS, + GEN_AI_USAGE_INPUT_TOKENS, + GEN_AI_USAGE_OUTPUT_TOKENS, + ResponseFinishReasonsAttrValidator, + UsageTokensAttrValidator, +} from './trace/ExperimentalSemconv'; +import { oTelAnyValueSchema } from './trace/Shared'; +import { coerceSpanIo, SpanIo } from './trace/SpanIo'; +import { + LogValidator as StableLogValidator, + ValidatedLog as StableValidatedLog, +} from './trace/StableSemconv'; + +// --------------------------------------------------------------------------- +// Unified log validator — accepts both stable-semconv log events +// (`gen_ai.system.message`, `gen_ai.user.message`, `gen_ai.choice`) and the +// experimental-semconv completion-details event +// (`gen_ai.client.inference.operation.details`). +// +// Spans validated under either semantic convention may carry a mix of these +// log records (e.g. a `generate_content` span emits stable system/user/choice +// logs when stable semconv is in effect, OR a single completion-details log +// when the experimental opt-in is enabled). Validating both shapes here lets +// `RawSpanValidator.logs` accept either flavor without per-branch logic. +// --------------------------------------------------------------------------- + +const LogValidator = z.union([ + StableLogValidator, + CompletionDetailsLogValidator, +]); + +export { + GEN_AI_CHOICE_EVENT, + GEN_AI_SYSTEM_MESSAGE_EVENT, + GEN_AI_USER_MESSAGE_EVENT, + isChoiceLog, + isSystemMessageLog, + isUserMessageLog, +} from './trace/StableSemconv'; +export type { + GenAIContent, + PromptResponseLog, + SystemMessageLog, +} from './trace/StableSemconv'; + +export type ValidatedLog = StableValidatedLog | CompletionDetailsLog; + +export { + FUNCTION_TOOL_DEFINITION_TYPE, + GEN_AI_COMPLETION_DETAILS_EVENT, + GEN_AI_INPUT_MESSAGES, + GEN_AI_OUTPUT_MESSAGES, + GEN_AI_RESPONSE_FINISH_REASONS, + GEN_AI_SYSTEM_INSTRUCTIONS, + GEN_AI_TOOL_DEFINITIONS, + GEN_AI_USAGE_INPUT_TOKENS, + GEN_AI_USAGE_OUTPUT_TOKENS, +} from './trace/ExperimentalSemconv'; +export type { + CompletionDetailsLog, + FunctionToolDefinition, + GenericToolDefinition, + InputMessage, + OutputMessage, + Part, + ToolDefinition, +} from './trace/ExperimentalSemconv'; + +export { coerceSpanIo } from './trace/SpanIo'; +export type { + ExperimentalSpanIo, + LegacySpanIo, + SpanIo, + StableSpanIo, +} from './trace/SpanIo'; -export declare interface Log { - body: {[key: string]: any} | string; - event_name: LogName; - trace_id: string; - span_id: string; +/** Type guard for the experimental completion-details log event. */ +export function isCompletionDetailsLog( + log: ValidatedLog, +): log is CompletionDetailsLog { + return log.event_name === GEN_AI_COMPLETION_DETAILS_EVENT; } -export declare interface Span { +// --------------------------------------------------------------------------- +// Operation-name and ADK-specific attribute key constants. +// --------------------------------------------------------------------------- + +export const GEN_AI_OPERATION_NAME = 'gen_ai.operation.name'; +export const GEN_AI_CONVERSATION_ID = 'gen_ai.conversation.id'; +export const GEN_AI_AGENT_NAME = 'gen_ai.agent.name'; +export const GEN_AI_AGENT_DESCRIPTION = 'gen_ai.agent.description'; + +export const GCP_VERTEX_AGENT_INVOCATION_ID = + 'gcp.vertex.agent.invocation_id'; +export const GCP_VERTEX_AGENT_ASSOCIATED_EVENT_IDS = + 'gcp.vertex.agent.associated_event_ids'; +export const GCP_VERTEX_AGENT_EVENT_ID = 'gcp.vertex.agent.event_id'; +export const GCP_VERTEX_AGENT_LLM_REQUEST = 'gcp.vertex.agent.llm_request'; +export const GCP_VERTEX_AGENT_LLM_RESPONSE = 'gcp.vertex.agent.llm_response'; + +export const OPERATION_INVOKE_AGENT = 'invoke_agent'; +export const OPERATION_GENERATE_CONTENT = 'generate_content'; + +// --------------------------------------------------------------------------- +// Stage 1: Raw span envelope. +// --------------------------------------------------------------------------- + +const RawSpanValidator = z.object({ + name: z.string(), + start_time: z.number(), + end_time: z.number(), + trace_id: z.union([z.string(), z.number()]), + span_id: z.union([z.string(), z.number()]), + parent_span_id: z.union([z.string(), z.number()]).nullable().optional(), + attributes: z.record(z.string(), oTelAnyValueSchema).optional(), + logs: z.array(LogValidator).optional(), +}); + +type RawSpan = z.infer; + +// --------------------------------------------------------------------------- +// Promoted-attribute mixin. +// +// Every known attribute is validated as *optional* here. Per-operation +// schemas below tighten the relevant ones to required. +// +// Each entry validates the wire form of the attribute (e.g. arrays of +// experimental Part shapes, or JSON-string-encoded equivalents). Validation +// errors propagate as Zod issues regardless of which operation_name branch +// the span landed in. +// --------------------------------------------------------------------------- + +const PromotedAttrsMixin = z.object({ + attrConversationId: z.string().optional(), + attrInvocationId: z.string().optional(), + attrAssociatedEventIds: z.array(z.string()).optional(), + attrAgentName: z.string().optional(), + attrAgentDescription: z.string().optional(), + attrEventId: z.string().optional(), + attrResponseFinishReasons: ResponseFinishReasonsAttrValidator.optional(), + attrUsageInputTokens: UsageTokensAttrValidator.optional(), + attrUsageOutputTokens: UsageTokensAttrValidator.optional(), +}); + +/** + * The list of (wire-key, promoted-field) pairs we promote out of a raw + * span's `attributes` bag. Used by {@link buildPromotedAttrsCandidate} + */ +const PROMOTED_ATTRIBUTE_KEYS = [ + [GEN_AI_CONVERSATION_ID, 'attrConversationId'], + [GCP_VERTEX_AGENT_INVOCATION_ID, 'attrInvocationId'], + [GCP_VERTEX_AGENT_ASSOCIATED_EVENT_IDS, 'attrAssociatedEventIds'], + [GEN_AI_AGENT_NAME, 'attrAgentName'], + [GEN_AI_AGENT_DESCRIPTION, 'attrAgentDescription'], + [GCP_VERTEX_AGENT_EVENT_ID, 'attrEventId'], + [GEN_AI_RESPONSE_FINISH_REASONS, 'attrResponseFinishReasons'], + [GEN_AI_USAGE_INPUT_TOKENS, 'attrUsageInputTokens'], + [GEN_AI_USAGE_OUTPUT_TOKENS, 'attrUsageOutputTokens'], +] as const; + +/** + * Builds the promoted-attribute candidate object from a raw span's + * attributes bag. Keys not listed in {@link PROMOTED_ATTRIBUTE_KEYS} are + * dropped from the *promoted* fields. + */ +function buildPromotedAttrsCandidate(raw: RawSpan): Record { + const a = raw.attributes ?? {}; + const candidate: Record = { + attrConversationId: a[GEN_AI_CONVERSATION_ID], + attrInvocationId: a[GCP_VERTEX_AGENT_INVOCATION_ID], + attrAssociatedEventIds: a[GCP_VERTEX_AGENT_ASSOCIATED_EVENT_IDS], + attrAgentName: a[GEN_AI_AGENT_NAME], + attrAgentDescription: a[GEN_AI_AGENT_DESCRIPTION], + attrEventId: a[GCP_VERTEX_AGENT_EVENT_ID], + attrResponseFinishReasons: a[GEN_AI_RESPONSE_FINISH_REASONS], + attrUsageInputTokens: a[GEN_AI_USAGE_INPUT_TOKENS], + attrUsageOutputTokens: a[GEN_AI_USAGE_OUTPUT_TOKENS], + }; + // Drop undefined entries so that `.optional()` cleanly absent fields + // don't show up as `attr*: undefined` literal keys on the parsed object. + for (const k of Object.keys(candidate)) { + if (candidate[k] === undefined) delete candidate[k]; + } + return candidate; +} + +// --------------------------------------------------------------------------- +// Per-operation tightenings (override specific PromotedAttrsMixin fields). +// --------------------------------------------------------------------------- + +const InvokeAgentTightening = z.object({ + attrConversationId: z.string({ + error: `'${GEN_AI_CONVERSATION_ID}' is required on '${ + OPERATION_INVOKE_AGENT}' spans`, + }), +}); + +const GenerateContentTightening = z.object({ + attrEventId: z.string({ + error: `'${GCP_VERTEX_AGENT_EVENT_ID}' is required on '${ + OPERATION_GENERATE_CONTENT}' spans`, + }), + attrInvocationId: z.string({ + error: `'${GCP_VERTEX_AGENT_INVOCATION_ID}' is required on '${ + OPERATION_GENERATE_CONTENT}' spans`, + }), +}); + +// --------------------------------------------------------------------------- +// Inferred types — promoted attributes union and per-branch span types. +// --------------------------------------------------------------------------- + +type PromotedAttrs = z.infer; + +/** + * Fields originating from the OpenTelemetry span envelope itself. + * + * Note on attribute access: + * - For all non-display logic (filtering, branching, computing derived + * state, etc.), every attribute should be read through a typed `attr*` + * promoted field. This guarantees a single, well-typed access path. + * - The unmodified raw attributes are preserved on + * `rawAttributesUseThisFieldOnlyForDisplay` for display only. + * - The unmodified raw span (exactly as it came over the wire) is + * preserved on `rawSpanUseThisFieldOnlyForDisplay` for display only. + */ +interface SpanEnvelope { name: string; start_time: number; end_time: number; - span_id: string; - parent_span_id?: string; - trace_id: string; - attributes?: any; - children?: Span[]; - invoc_id?: string; - // For backward compatibility. - 'gcp.vertex.agent.llm_request'?: string; - 'gcp.vertex.agent.llm_response'?: string; - - // Logs recorded inside this Span. - logs?: Log[]; + trace_id: string | number; + span_id: string | number; + parent_span_id?: string | number | null; + /** + * Unmodified copy of the raw OpenTelemetry attributes. + * + * **DISPLAY ONLY.** Do not branch or compute on this field — use the + * typed `attr*` promoted fields instead. + */ + rawAttributesUseThisFieldOnlyForDisplay: + Record; + /** + * Unmodified copy of the entire raw OpenTelemetry span as it came over + * the wire (including `attributes`, `logs`, and any other fields). + * + * **DISPLAY ONLY.** Do not branch or compute on this field — use the + * typed envelope fields, `attr*` promoted fields, or `io` instead. + * Surfaced so the "Raw JSON" view can show the unmodified payload + * familiar to anyone reading the upstream OTel export, without leaking + * the post-validation duplicated/typed projection back into the UI. + */ + rawSpanUseThisFieldOnlyForDisplay: unknown; } -export declare interface EventTelemetry { - 'gcp.vertex.agent.llm_request'?: string; - 'gcp.vertex.agent.llm_response'?: string; +/** + * Span emitted with `gen_ai.operation.name == "invoke_agent"`. + * + * `attrConversationId` is guaranteed to be present (string, not optional). + * + * `io` is declared as the literal `undefined` here — `invoke_agent` spans + * never carry LLM IO directly. Declaring it (as undefined) on this branch + * keeps `span.io` accessible across the union without per-branch + * narrowing. + */ +export type InvokeAgentSpan = + SpanEnvelope & PromotedAttrs & { + attrOperationName: typeof OPERATION_INVOKE_AGENT; + attrConversationId: string; + io?: undefined; + }; - // Logs captured in a `generate_content` or `execute_tool` span with `gcp.vertex.agent.event_id` attribute equal to this event. - logs?: Log[]; -} +/** + * Span emitted with `gen_ai.operation.name == "generate_content"`. + * + * `attrEventId` and `attrInvocationId` are guaranteed to be present. + * + * `io` is the Stage-3 coerced input/output projection — populated when + * any of the three IO sources (experimental log attrs, stable child + * logs, or legacy llm_request/llm_response strings) carry data. Child + * log records are NOT exposed on the validated span; their only + * meaningful payload (the LLM IO) is surfaced through `io`. + */ +export type GenerateContentSpan = + SpanEnvelope & PromotedAttrs & { + attrOperationName: typeof OPERATION_GENERATE_CONTENT; + attrEventId: string; + attrInvocationId: string; + io?: SpanIo; + }; + +/** + * Fallback span shape used when `gen_ai.operation.name` is missing or holds + * an unrecognized value (e.g. legacy `call_llm`, `execute_tool`, + * `compact_events`, `invoke_workflow`, `invoke_node`). + * + * `attrOperationName` is the literal `undefined` so that `if + * (span.attrOperationName === 'generate_content')` reliably narrows the + * union to {@link GenerateContentSpan}. Promoted attributes are still + * surfaced (all optional). + * + * `io` is the Stage-3 coerced input/output projection — populated for + * legacy `call_llm` spans that carry `gcp.vertex.agent.llm_*` strings, + * and for any other fallback span that nonetheless emitted GenAI logs. + * Child log records are NOT exposed on the validated span. + */ +export type FallbackSpan = + SpanEnvelope & PromotedAttrs & { + attrOperationName?: undefined; + io?: SpanIo; + }; + +export type ValidatedSpan = + | InvokeAgentSpan + | GenerateContentSpan + | FallbackSpan; + +// --------------------------------------------------------------------------- +// Stage 2: composed SpanValidator. +// --------------------------------------------------------------------------- -export declare interface SpanNode extends Span { - children: SpanNode[]; - depth: number; - duration: number; - id: string; // Using span_id as string ID +/** + * Forwards Zod issues from a Stage-2 sub-parse onto the parent context. + * The Zod v4 `addIssue` API is typed against the raw (input) issue shape + * rather than the parsed one, so we cast through `any`. + */ +function forwardIssues( + ctx: { addIssue(arg: any): void }, + issues: readonly z.core.$ZodIssue[], +): void { + for (const issue of issues) { + ctx.addIssue(issue as any); + } } -export declare interface TimeTick { - position: number; - label: string; +/** + * Applies `PromotedAttrsMixin` (mandatory) plus an optional per-operation + * tightening schema to a raw span's attributes bag, returning the parsed + * promoted fields or `null` if validation failed (issues are forwarded onto + * `ctx`). + */ +function parsePromotedAttrs>( + raw: RawSpan, + tightening: T | null, + ctx: { addIssue(arg: any): void }, +): (PromotedAttrs & z.infer) | null { + const candidate = buildPromotedAttrsCandidate(raw); + + // Run the mixin first to validate the shape of any present attribute. + const mixinResult = PromotedAttrsMixin.safeParse(candidate); + if (!mixinResult.success) { + forwardIssues(ctx, mixinResult.error.issues); + return null; + } + + if (tightening === null) { + return mixinResult.data as PromotedAttrs & z.infer; + } + + // Tightening uses the *original* candidate so that "missing required" + // errors still surface (the mixin made everything optional). + const tighteningResult = tightening.safeParse(candidate); + if (!tighteningResult.success) { + forwardIssues(ctx, tighteningResult.error.issues); + return null; + } + + return { + ...mixinResult.data, + ...tighteningResult.data, + } as PromotedAttrs & z.infer; } + +/** + * Public span validator. Returns a discriminated union narrowable on the + * literal value of `attrOperationName`. + * + * The unmodified input is captured up-front and re-attached on the + * validated result as `rawSpanUseThisFieldOnlyForDisplay` so that + * "Raw JSON" UI views can render the unmodified over-the-wire OTel + * payload (rather than the post-validation typed projection, which + * duplicates information and is unfamiliar to anyone outside ADK Web). + */ +export const SpanValidator: z.ZodType = + z.unknown().transform((rawInput, ctx): ValidatedSpan => { + const parseResult = RawSpanValidator.safeParse(rawInput); + if (!parseResult.success) { + forwardIssues(ctx, parseResult.error.issues); + return z.NEVER as never; + } + const raw = parseResult.data; + const opName = raw.attributes?.[GEN_AI_OPERATION_NAME]; + + // Strip Stage-1's `logs` and `attributes` from the envelope so we + // control which branches surface them. The raw `attributes` bag is + // re-attached under `rawAttributesUseThisFieldOnlyForDisplay` + // below. + const { logs, attributes: rawAttrs, ...envelope } = raw; + + const displayOnlyRawAttrs: + Pick = + rawAttrs !== undefined + ? { rawAttributesUseThisFieldOnlyForDisplay: rawAttrs } + : { rawAttributesUseThisFieldOnlyForDisplay: {} }; + + // Snapshot the unmodified input so the "Raw JSON" view can display + // the over-the-wire payload exactly as it arrived. + const displayOnlyRawSpan: + Pick = { + rawSpanUseThisFieldOnlyForDisplay: rawInput, + }; + + if (opName === OPERATION_INVOKE_AGENT) { + const promoted = parsePromotedAttrs(raw, InvokeAgentTightening, ctx); + if (promoted === null) return z.NEVER as never; + // Logs intentionally dropped — invoke_agent spans don't carry them. + const result: InvokeAgentSpan = { + ...envelope, + ...displayOnlyRawAttrs, + ...displayOnlyRawSpan, + ...promoted, + attrOperationName: OPERATION_INVOKE_AGENT, + }; + return result; + } + + if (opName === OPERATION_GENERATE_CONTENT) { + const promoted = + parsePromotedAttrs(raw, GenerateContentTightening, ctx); + if (promoted === null) return z.NEVER as never; + const io = coerceSpanIo({ attributes: raw.attributes, logs }); + const result: GenerateContentSpan = { + ...envelope, + ...displayOnlyRawAttrs, + ...displayOnlyRawSpan, + ...promoted, + attrOperationName: OPERATION_GENERATE_CONTENT, + ...(io !== undefined ? { io } : {}), + }; + return result; + } + + // Fallback branch — operation name missing or unrecognized. We do + // *not* promote `attrOperationName` here so that the discriminator + // value remains exactly `undefined`, enabling literal narrowing on + // the other branches. + const promoted = parsePromotedAttrs(raw, null, ctx); + if (promoted === null) return z.NEVER as never; + const io = coerceSpanIo({ attributes: raw.attributes, logs }); + const result: FallbackSpan = { + ...envelope, + ...displayOnlyRawAttrs, + ...displayOnlyRawSpan, + ...promoted, + ...(io !== undefined ? { io } : {}), + }; + return result; + }) as z.ZodType; + +// --------------------------------------------------------------------------- +// UI-facing Span type — adds a `children` tree-structure helper on top of +// the validated discriminated union. +// --------------------------------------------------------------------------- + +export type Span = ValidatedSpan & { + children?: Span[]; +}; diff --git a/src/app/core/models/trace.spec.ts b/src/app/core/models/trace.spec.ts new file mode 100644 index 00000000..8f98e45c --- /dev/null +++ b/src/app/core/models/trace.spec.ts @@ -0,0 +1,608 @@ +/** + * @license + * Copyright 2026 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 { + FallbackSpan, + GenerateContentSpan, + InvokeAgentSpan, + OPERATION_GENERATE_CONTENT, + OPERATION_INVOKE_AGENT, + SpanValidator, + ValidatedSpan, +} from './Trace'; + +// --------------------------------------------------------------------------- +// Compile-time regression checks. +// +// These never run, but if `SpanValidator.safeParse(...).data` ever stops +// inferring as a 3-branch union, `tsc` (and therefore `npm run build`) will +// fail at the assignments below. +// --------------------------------------------------------------------------- + +type IsExactly = [A] extends [B] ? ([B] extends [A] ? true : false) : false; +type Assert = T; + +// Narrow the SpanValidator output type — what callers actually see. +type InferredSpan = Extract< + ReturnType, + { success: true } +>['data']; + +// 1) The inferred type must be exactly the 3-branch ValidatedSpan union. +type _SpanInferenceCheck = Assert>; + +// 2) Each branch must independently survive — i.e. be assignable from a +// distinct member of the union (not merged into a supertype). +const _invokeAgentBranch: InvokeAgentSpan = {} as Extract< + InferredSpan, + { attrOperationName: typeof OPERATION_INVOKE_AGENT } +>; +const _generateContentBranch: GenerateContentSpan = {} as Extract< + InferredSpan, + { attrOperationName: typeof OPERATION_GENERATE_CONTENT } +>; +const _fallbackBranch: FallbackSpan = {} as Extract< + InferredSpan, + { attrOperationName?: undefined } +>; + +// 3) After narrowing, the per-branch tightenings must be required (not +// optional). If we ever regress to optional we'd be able to assign +// `string | undefined` to these variables. +function _narrowingChecks(span: ValidatedSpan): void { + if (span.attrOperationName === OPERATION_INVOKE_AGENT) { + const _conv: string = span.attrConversationId; // required + // `logs` is dropped from every branch — Stage 2 validates them then + // discards them; the only meaningful payload (LLM IO) is surfaced + // through `io` on the IO-bearing branches. + // @ts-expect-error logs are not exposed on validated spans. + const _logs = span.logs; + // `io` is declared as the literal `undefined` on the InvokeAgent + // branch. Reading it is fine; assigning anything else would fail. + const _ioMustBeUndefined: undefined = span.io; + } else if (span.attrOperationName === OPERATION_GENERATE_CONTENT) { + const _eid: string = span.attrEventId; // required + const _inv: string = span.attrInvocationId; // required + // @ts-expect-error logs are not exposed on validated spans. + const _logs = span.logs; + // `io` is the unified Stage-3 LLM IO projection (optional). + const _io: typeof span.io = span.io; + } else { + // Fallback branch — discriminator is the literal `undefined`. + const _op: undefined = span.attrOperationName; + // Promoted attributes are still surfaced (all optional). + const _eid: string | undefined = span.attrEventId; + const _conv: string | undefined = span.attrConversationId; + // @ts-expect-error logs are not exposed on validated spans. + const _logs = span.logs; + const _io: typeof span.io = span.io; + } +} +void _narrowingChecks; + +// --------------------------------------------------------------------------- +// Runtime tests. +// --------------------------------------------------------------------------- + +describe('Trace Validation', () => { + function validate(json: any): string | undefined { + const result = SpanValidator.safeParse(json); + if (!result.success) { + return result.error.issues + .map(e => `${e.path.join('.')}: ${e.message}`) + .join(', '); + } + return undefined; + } + + function parse(json: any) { + const result = SpanValidator.safeParse(json); + if (!result.success) { + throw new Error( + result.error.issues + .map(e => `${e.path.join('.')}: ${e.message}`) + .join(', ')); + } + return result.data; + } + + function createBaseSpan(extras: any = {}) { + return { + name: 'test-span', + start_time: 1000, + end_time: 2000, + trace_id: 'trace-1', + span_id: 'span-1', + ...extras, + }; + } + + describe('Stage 1: envelope shape', () => { + it('accepts a minimal envelope (no operation_name)', () => { + expect(validate(createBaseSpan())).toBeUndefined(); + }); + + it('rejects when start_time is missing', () => { + const span = createBaseSpan(); + delete span.start_time; + expect(validate(span)).toBeDefined(); + }); + + it('rejects when span_id is missing', () => { + const span = createBaseSpan(); + delete span.span_id; + expect(validate(span)).toBeDefined(); + }); + }); + + describe('Fallback branch (no/unknown operation_name)', () => { + it('accepts a span with no operation_name', () => { + const parsed = parse(createBaseSpan({ + attributes: { 'gcp.vertex.agent.event_id': 'evt-1' }, + })); + // Discriminator must be exactly `undefined`, not the unknown name. + expect(parsed.attrOperationName).toBeUndefined(); + // Promoted attribute is surfaced (optional on the union). + expect(parsed.attrEventId).toBe('evt-1'); + // The raw `attributes` bag is intentionally dropped after Stage 2. + expect((parsed as any).attributes).toBeUndefined(); + }); + + it('does NOT promote unknown operation names into attrOperationName', + () => { + // Per the design, fallback spans must keep `attrOperationName` + // undefined so that literal narrowing on the other branches works. + const parsed = parse(createBaseSpan({ + attributes: { 'gen_ai.operation.name': 'execute_tool' }, + })); + expect(parsed.attrOperationName).toBeUndefined(); + // The original value is no longer reachable — there is no + // `attributes` escape hatch on the validated span. + expect((parsed as any).attributes).toBeUndefined(); + }); + + it('legacy `call_llm` span (no operation_name) flows through fallback', + () => { + const parsed = parse(createBaseSpan({ + name: 'call_llm', + attributes: { + 'gcp.vertex.agent.event_id': 'evt-1', + 'gcp.vertex.agent.llm_request': '{"req": 1}', + 'gcp.vertex.agent.llm_response': '{"res": 1}', + }, + })); + expect(parsed.attrOperationName).toBeUndefined(); + // Non-IO promoted fields are still available — no need for raw + // `attributes` lookups in callers. + expect(parsed.attrEventId).toBe('evt-1'); + // The legacy llm_{request,response} strings are surfaced via + // the unified Stage-3 `io` projection (kind: 'legacy'), with + // the JSON strings parsed into structured payloads. + expect(parsed.io?.kind).toBe('legacy'); + expect(parsed.io?.inputs).toEqual({ req: 1 }); + expect(parsed.io?.outputs).toEqual({ res: 1 }); + }); + + it('still validates the shape of attributes when present', () => { + // `gen_ai.usage.input_tokens` must be a number even on a fallback + // span, because the promotion mixin runs unconditionally. + const span = createBaseSpan({ + attributes: { 'gen_ai.usage.input_tokens': 'not-a-number' }, + }); + expect(validate(span)).toBeDefined(); + }); + }); + + describe('invoke_agent branch', () => { + function invokeAgentSpan(extras: any = {}) { + return createBaseSpan({ + name: 'invoke_agent root_agent', + attributes: { + 'gen_ai.operation.name': OPERATION_INVOKE_AGENT, + 'gen_ai.conversation.id': 'session-1', + ...(extras.attributes ?? {}), + }, + ...Object.fromEntries( + Object.entries(extras).filter(([k]) => k !== 'attributes')), + }); + } + + it('promotes required attrs into typed fields', () => { + const parsed = parse(invokeAgentSpan({ + attributes: { + 'gcp.vertex.agent.associated_event_ids': ['evt-1', 'evt-2'], + 'gen_ai.agent.name': 'root_agent', + 'gen_ai.agent.description': 'The root agent', + }, + })); + expect(parsed.attrOperationName).toBe(OPERATION_INVOKE_AGENT); + if (parsed.attrOperationName === OPERATION_INVOKE_AGENT) { + expect(parsed.attrConversationId).toBe('session-1'); + expect(parsed.attrAssociatedEventIds).toEqual(['evt-1', 'evt-2']); + expect(parsed.attrAgentName).toBe('root_agent'); + expect(parsed.attrAgentDescription).toBe('The root agent'); + } + }); + + it('rejects when conversation.id is missing', () => { + const span = invokeAgentSpan(); + delete (span.attributes as any)['gen_ai.conversation.id']; + expect(validate(span)).toBeDefined(); + }); + + it('does not require invocation_id on this branch', () => { + // invocation_id is required on `generate_content` spans, not on + // `invoke_agent` spans. + const span = invokeAgentSpan(); + expect(validate(span)).toBeUndefined(); + }); + + it('drops logs from the parsed output (typed away)', () => { + const span = invokeAgentSpan({ + logs: [{ + event_name: 'gen_ai.system.message', + body: { content: 'sys' }, + }], + }); + const parsed = parse(span); + expect((parsed as any).logs).toBeUndefined(); + }); + + it('is lenient about extra unknown attribute keys (they are dropped)', + () => { + // Unknown attributes neither cause validation errors nor leak + // into the parsed output — promoted attrs are the single access + // path. + const span = invokeAgentSpan({ + attributes: { 'some.unknown.key': 'value' }, + }); + const parsed = parse(span); + expect((parsed as any).attributes).toBeUndefined(); + expect((parsed as any)['some.unknown.key']).toBeUndefined(); + }); + }); + + describe('generate_content branch', () => { + function generateContentSpan(extras: any = {}) { + return createBaseSpan({ + name: 'generate_content gemini-2.0', + attributes: { + 'gen_ai.operation.name': OPERATION_GENERATE_CONTENT, + 'gcp.vertex.agent.event_id': 'evt-default', + 'gcp.vertex.agent.invocation_id': 'inv-default', + ...(extras.attributes ?? {}), + }, + ...Object.fromEntries( + Object.entries(extras).filter(([k]) => k !== 'attributes')), + }); + } + + it('rejects when event_id is missing (now required on this branch)', + () => { + const span = generateContentSpan(); + delete (span.attributes as any)['gcp.vertex.agent.event_id']; + expect(validate(span)).toBeDefined(); + }); + + it('rejects when invocation_id is missing (required on this branch)', + () => { + const span = generateContentSpan(); + delete (span.attributes as any)['gcp.vertex.agent.invocation_id']; + expect(validate(span)).toBeDefined(); + }); + + it('accepts a minimal generate_content span (only required attrs)', + () => { + const parsed = parse(generateContentSpan()); + expect(parsed.attrOperationName).toBe(OPERATION_GENERATE_CONTENT); + if (parsed.attrOperationName === OPERATION_GENERATE_CONTENT) { + expect(parsed.attrEventId).toBe('evt-default'); + expect(parsed.attrInvocationId).toBe('inv-default'); + // No IO sources present → no `io` projection. + expect(parsed.io).toBeUndefined(); + } + }); + + it('surfaces legacy llm_request/response via Stage-3 `io`', () => { + const parsed = parse(generateContentSpan({ + attributes: { + 'gcp.vertex.agent.llm_request': '{"req": true}', + 'gcp.vertex.agent.llm_response': '{"res": true}', + }, + })); + if (parsed.attrOperationName === OPERATION_GENERATE_CONTENT) { + expect(parsed.io?.kind).toBe('legacy'); + expect(parsed.io?.inputs).toEqual({ req: true }); + expect(parsed.io?.outputs).toEqual({ res: true }); + } + }); + + it('still validates the shape of experimental attrs even though they ' + + 'are not promoted (Stage-1 LogValidator rejects malformed bodies)', + () => { + // Experimental input/output/system/tool attributes are no longer + // promoted to top-level fields, but they remain validated when + // they appear inside the Stage-1 completion-details log + // attributes — see the next two tests. + const parsed = parse(generateContentSpan({ + attributes: { + 'gen_ai.response.finish_reasons': ['stop'], + 'gen_ai.usage.input_tokens': 10, + 'gen_ai.usage.output_tokens': 20, + }, + })); + if (parsed.attrOperationName === OPERATION_GENERATE_CONTENT) { + expect(parsed.attrResponseFinishReasons).toEqual(['stop']); + expect(parsed.attrUsageInputTokens).toBe(10); + expect(parsed.attrUsageOutputTokens).toBe(20); + } + }); + + it('rejects malformed gen_ai.input.messages part shape on the ' + + 'completion-details log', + () => { + // Even though `gen_ai.input.messages` is no longer promoted as a + // top-level attr, Stage 1's CompletionDetailsLogValidator still + // validates its shape when it appears as a log attribute. + const span = generateContentSpan({ + logs: [ + { + event_name: 'gen_ai.client.inference.operation.details', + attributes: { + 'gen_ai.input.messages': [ + { + role: 'user', + parts: [{ type: 'text' /* missing content */ }], + }, + ], + }, + }, + ], + }); + expect(validate(span)).toBeDefined(); + }); + + it('rejects unknown part type discriminator on the completion-details ' + + 'log', + () => { + const span = generateContentSpan({ + logs: [ + { + event_name: 'gen_ai.client.inference.operation.details', + attributes: { + 'gen_ai.input.messages': [ + { + role: 'user', + parts: [{ type: 'mystery', content: 'x' }], + }, + ], + }, + }, + ], + }); + expect(validate(span)).toBeDefined(); + }); + + it('drops logs from the parsed output (validated then dropped)', () => { + // Logs are validated at Stage 1 (so malformed shapes are still + // rejected) but dropped from the validated output — their only + // meaningful payload (the LLM IO) is surfaced via `io`. + const parsed = parse(generateContentSpan({ + logs: [ + { + event_name: 'gen_ai.system.message', + body: { content: 'sys' }, + }, + ], + })); + expect((parsed as any).logs).toBeUndefined(); + }); + + it('coerces stable child logs into Stage-3 `io` (kind: stable)', () => { + const parsed = parse(generateContentSpan({ + logs: [ + { + event_name: 'gen_ai.system.message', + body: { content: 'sys' }, + }, + { + event_name: 'gen_ai.user.message', + body: { role: 'user', content: { parts: [{ text: 'hi' }] } }, + }, + { + event_name: 'gen_ai.user.message', + body: { role: 'user', content: { parts: [{ text: 'again' }] } }, + }, + { + event_name: 'gen_ai.choice', + body: { content: { role: 'model', parts: [{ text: 'ok' }] } }, + }, + ], + })); + if (parsed.attrOperationName === OPERATION_GENERATE_CONTENT) { + expect(parsed.io?.kind).toBe('stable'); + if (parsed.io?.kind === 'stable') { + expect(parsed.io.inputs.system_instruction).toEqual({ + content: 'sys', + }); + expect(parsed.io.inputs.user_messages.length).toBe(2); + expect(parsed.io.outputs).toEqual({ + content: { role: 'model', parts: [{ text: 'ok' }] }, + }); + } + } + }); + + it('coerces the experimental completion-details log into Stage-3 ' + + '`io` (kind: experimental)', + () => { + const parsed = parse(generateContentSpan({ + logs: [ + { + event_name: 'gen_ai.client.inference.operation.details', + attributes: { + 'gen_ai.input.messages': [ + { + role: 'user', + parts: [{ type: 'text', content: 'hi' }], + }, + ], + 'gen_ai.output.messages': [ + { + role: 'assistant', + parts: [{ type: 'text', content: 'reply' }], + finish_reason: 'stop', + }, + ], + 'gen_ai.system_instructions': [ + { type: 'text', content: 'you are a helper' }, + ], + 'gen_ai.tool.definitions': [ + { type: 'function', name: 'fn' }, + ], + 'gen_ai.usage.input_tokens': 7, + 'gen_ai.usage.output_tokens': 11, + }, + }, + ], + })); + if (parsed.attrOperationName === OPERATION_GENERATE_CONTENT) { + expect(parsed.io?.kind).toBe('experimental'); + if (parsed.io?.kind === 'experimental') { + expect((parsed.io.inputs.user_messages as any)?.length).toBe(1); + expect((parsed.io.inputs.tool_definitions as any)?.length) + .toBe(1); + expect((parsed.io.outputs as any)?.length).toBe(1); + } + } + }); + + it('is lenient about extra unknown attribute keys (they are dropped)', + () => { + // Unknown attributes neither cause validation errors nor leak + // into the parsed output. + const parsed = parse(generateContentSpan({ + attributes: { 'some.unknown.key': 'value' }, + })); + expect((parsed as any).attributes).toBeUndefined(); + expect((parsed as any)['some.unknown.key']).toBeUndefined(); + }); + }); + + describe('legacy log-validation tests (preserved from prior version)', () => { + function genCSpanWithLogs(logs: any[]) { + return createBaseSpan({ + name: 'generate_content x', + attributes: { + 'gen_ai.operation.name': OPERATION_GENERATE_CONTENT, + 'gcp.vertex.agent.event_id': 'evt-1', + 'gcp.vertex.agent.invocation_id': 'inv-1', + }, + logs, + }); + } + + it('valid system message log', () => { + expect(validate(genCSpanWithLogs([ + { event_name: 'gen_ai.system.message', body: { content: 'sys' } }, + ]))).toBeUndefined(); + }); + + it('valid user message log with text', () => { + expect(validate(genCSpanWithLogs([{ + event_name: 'gen_ai.user.message', + body: { role: 'user', content: { parts: [{ text: 'hi' }] } }, + }]))).toBeUndefined(); + }); + + it('valid choice with function_call', () => { + expect(validate(genCSpanWithLogs([{ + event_name: 'gen_ai.choice', + body: { + content: { + role: 'model', + parts: [{ + function_call: { + name: 'get_weather', + args: { location: 'London' }, + }, + }], + }, + }, + }]))).toBeUndefined(); + }); + + it('user message with function_response', () => { + expect(validate(genCSpanWithLogs([{ + event_name: 'gen_ai.user.message', + body: { + role: 'user', + content: { + parts: [{ + function_response: { + name: 'get_weather', + response: { weather: 'sunny' }, + }, + }], + }, + }, + }]))).toBeUndefined(); + }); + + it('user message body as a JSON string', () => { + expect(validate(genCSpanWithLogs([{ + event_name: 'gen_ai.user.message', + body: JSON.stringify({ + role: 'user', + content: { parts: [{ text: 'Hello from JSON string' }] }, + }), + }]))).toBeUndefined(); + }); + + it('rejects system message missing content', () => { + expect(validate(genCSpanWithLogs([ + { event_name: 'gen_ai.system.message', body: {} }, + ]))).toBeDefined(); + }); + + it('rejects function_call missing name', () => { + expect(validate(genCSpanWithLogs([{ + event_name: 'gen_ai.user.message', + body: { + role: 'user', + content: { + parts: [{ function_call: { args: { location: 'London' } } }], + }, + }, + }]))).toBeDefined(); + }); + + it('rejects choice with no role', () => { + expect(validate(genCSpanWithLogs([{ + event_name: 'gen_ai.choice', + body: { content: { parts: [{ text: 'no role' }] } }, + }]))).toBeDefined(); + }); + + it('rejects invalid JSON-string body', () => { + expect(validate(genCSpanWithLogs([{ + event_name: 'gen_ai.user.message', + body: '{ invalid json }', + }]))).toBeDefined(); + }); + }); +}); diff --git a/src/app/core/models/trace/ExperimentalSemconv.spec.ts b/src/app/core/models/trace/ExperimentalSemconv.spec.ts new file mode 100644 index 00000000..8aa40e1f --- /dev/null +++ b/src/app/core/models/trace/ExperimentalSemconv.spec.ts @@ -0,0 +1,331 @@ +/** + * @license + * Copyright 2026 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 { + CompletionDetailsLogValidator, + GEN_AI_COMPLETION_DETAILS_EVENT, + InputMessageValidator, + InputMessagesAttrValidator, + OutputMessageValidator, + OutputMessagesAttrValidator, + PartValidator, + SystemInstructionsAttrValidator, + ToolDefinitionValidator, + ToolDefinitionsAttrValidator, +} from './ExperimentalSemconv'; + +describe('ExperimentalSemconv', () => { + describe('PartValidator (discriminated on `type`)', () => { + it('accepts a text part', () => { + const result = PartValidator.safeParse({ + type: 'text', + content: 'hello', + }); + expect(result.success).toBeTrue(); + }); + + it('accepts a blob part with arbitrary `data`', () => { + const result = PartValidator.safeParse({ + type: 'blob', + mime_type: 'image/png', + data: 'base64stuff', + }); + expect(result.success).toBeTrue(); + }); + + it('accepts a file_data part', () => { + const result = PartValidator.safeParse({ + type: 'file_data', + mime_type: 'application/pdf', + uri: 'gs://bucket/file.pdf', + }); + expect(result.success).toBeTrue(); + }); + + it('accepts a tool_call part with arguments', () => { + const result = PartValidator.safeParse({ + type: 'tool_call', + id: 'call_123', + name: 'get_weather', + arguments: { location: 'London' }, + }); + expect(result.success).toBeTrue(); + }); + + it('accepts a tool_call part with null id and arguments', () => { + const result = PartValidator.safeParse({ + type: 'tool_call', + id: null, + name: 'get_weather', + arguments: null, + }); + expect(result.success).toBeTrue(); + }); + + it('accepts a tool_call_response part', () => { + const result = PartValidator.safeParse({ + type: 'tool_call_response', + id: 'call_123', + response: { weather: 'sunny' }, + }); + expect(result.success).toBeTrue(); + }); + + it('rejects a part with an unknown discriminator value', () => { + const result = PartValidator.safeParse({ + type: 'something_else', + content: 'hi', + }); + expect(result.success).toBeFalse(); + }); + + it('rejects a text part missing content', () => { + const result = PartValidator.safeParse({ type: 'text' }); + expect(result.success).toBeFalse(); + }); + + it('rejects a tool_call missing name', () => { + const result = PartValidator.safeParse({ + type: 'tool_call', + id: 'x', + arguments: {}, + }); + expect(result.success).toBeFalse(); + }); + + it('is lenient about extra unknown keys', () => { + const result = PartValidator.safeParse({ + type: 'text', + content: 'hi', + unknownExtraField: 42, + }); + expect(result.success).toBeTrue(); + }); + }); + + describe('InputMessageValidator', () => { + it('accepts a message with mixed parts', () => { + const result = InputMessageValidator.safeParse({ + role: 'user', + parts: [ + { type: 'text', content: 'hi' }, + { + type: 'tool_call', + id: 'call_1', + name: 'fn', + arguments: { a: 1 }, + }, + ], + }); + expect(result.success).toBeTrue(); + }); + + it('rejects a message missing role', () => { + const result = InputMessageValidator.safeParse({ + parts: [{ type: 'text', content: 'hi' }], + }); + expect(result.success).toBeFalse(); + }); + + it('rejects a message with an invalid part shape', () => { + const result = InputMessageValidator.safeParse({ + role: 'user', + parts: [{ type: 'text' /* missing content */ }], + }); + expect(result.success).toBeFalse(); + }); + }); + + describe('OutputMessageValidator', () => { + it('accepts a message with finish_reason', () => { + const result = OutputMessageValidator.safeParse({ + role: 'assistant', + parts: [{ type: 'text', content: 'done' }], + finish_reason: 'stop', + }); + expect(result.success).toBeTrue(); + }); + + it('rejects a message missing finish_reason', () => { + const result = OutputMessageValidator.safeParse({ + role: 'assistant', + parts: [{ type: 'text', content: 'done' }], + }); + expect(result.success).toBeFalse(); + }); + }); + + describe('ToolDefinitionValidator', () => { + it('accepts a function tool definition', () => { + const result = ToolDefinitionValidator.safeParse({ + type: 'function', + name: 'get_weather', + description: 'Returns the weather', + parameters: { type: 'object', properties: {} }, + }); + expect(result.success).toBeTrue(); + }); + + it('accepts a function tool definition with null description/parameters', + () => { + const result = ToolDefinitionValidator.safeParse({ + type: 'function', + name: 'fn', + description: null, + parameters: null, + }); + expect(result.success).toBeTrue(); + }); + + it('accepts a generic tool definition', () => { + const result = ToolDefinitionValidator.safeParse({ + name: 'google_search', + type: 'google_search', + }); + expect(result.success).toBeTrue(); + }); + + it('rejects a definition missing name', () => { + const result = ToolDefinitionValidator.safeParse({ type: 'function' }); + expect(result.success).toBeFalse(); + }); + }); + + describe('attribute-level validators (accept JSON string or array)', () => { + const inputs = [{ role: 'user', parts: [{ type: 'text', content: 'hi' }] }]; + + it('InputMessagesAttrValidator accepts the parsed array form', () => { + const result = InputMessagesAttrValidator.safeParse(inputs); + expect(result.success).toBeTrue(); + }); + + it('InputMessagesAttrValidator accepts the JSON-string form', () => { + const result = + InputMessagesAttrValidator.safeParse(JSON.stringify(inputs)); + expect(result.success).toBeTrue(); + }); + + it('InputMessagesAttrValidator rejects malformed JSON-string', () => { + const result = InputMessagesAttrValidator.safeParse('{ broken'); + expect(result.success).toBeFalse(); + }); + + it('OutputMessagesAttrValidator accepts a valid array', () => { + const result = OutputMessagesAttrValidator.safeParse([ + { + role: 'assistant', + parts: [{ type: 'text', content: 'ok' }], + finish_reason: 'stop', + }, + ]); + expect(result.success).toBeTrue(); + }); + + it('SystemInstructionsAttrValidator accepts a valid Part array', () => { + const result = SystemInstructionsAttrValidator.safeParse([ + { type: 'text', content: 'You are helpful.' }, + ]); + expect(result.success).toBeTrue(); + }); + + it('ToolDefinitionsAttrValidator accepts mixed function/generic tools', + () => { + const result = ToolDefinitionsAttrValidator.safeParse([ + { + type: 'function', + name: 'fn', + description: 'd', + parameters: { type: 'object' }, + }, + { name: 'google_search', type: 'google_search' }, + ]); + expect(result.success).toBeTrue(); + }); + }); + + describe('CompletionDetailsLogValidator', () => { + it('accepts the completion-details event with full payload attributes', + () => { + const result = CompletionDetailsLogValidator.safeParse({ + event_name: GEN_AI_COMPLETION_DETAILS_EVENT, + attributes: { + 'gen_ai.input.messages': [ + { role: 'user', parts: [{ type: 'text', content: 'hi' }] }, + ], + 'gen_ai.output.messages': [ + { + role: 'assistant', + parts: [{ type: 'text', content: 'reply' }], + finish_reason: 'stop', + }, + ], + 'gen_ai.system_instructions': [ + { type: 'text', content: 'sys' }, + ], + 'gen_ai.tool.definitions': [], + 'gen_ai.response.finish_reasons': ['stop'], + 'gen_ai.usage.input_tokens': 7, + 'gen_ai.usage.output_tokens': 11, + }, + }); + expect(result.success).toBeTrue(); + }); + + it('accepts attributes encoded as JSON strings', () => { + // Mirrors the wire format produced when the experimental exporter + // serializes via `_safe_json_serialize_no_whitespaces` (see + // ``_experimental_semconv.py``). + const result = CompletionDetailsLogValidator.safeParse({ + event_name: GEN_AI_COMPLETION_DETAILS_EVENT, + attributes: { + 'gen_ai.input.messages': + '[{"role":"user","parts":[{"type":"text","content":"hi"}]}]', + }, + }); + expect(result.success).toBeTrue(); + }); + + it('passes through unknown common attributes (e.g. event_id)', () => { + const result = CompletionDetailsLogValidator.safeParse({ + event_name: GEN_AI_COMPLETION_DETAILS_EVENT, + attributes: { + 'gen_ai.agent.name': 'root_agent', + 'gen_ai.conversation.id': 'sess-1', + 'gcp.vertex.agent.event_id': 'evt-1', + 'gcp.vertex.agent.invocation_id': 'inv-1', + 'user.id': 'someone', + }, + }); + expect(result.success).toBeTrue(); + }); + + it('accepts a record with no attributes (initial export, response not set yet)', + () => { + const result = CompletionDetailsLogValidator.safeParse({ + event_name: GEN_AI_COMPLETION_DETAILS_EVENT, + }); + expect(result.success).toBeTrue(); + }); + + it('rejects a record with an unrelated event_name', () => { + const result = CompletionDetailsLogValidator.safeParse({ + event_name: 'some.other.event', + }); + expect(result.success).toBeFalse(); + }); + }); +}); diff --git a/src/app/core/models/trace/ExperimentalSemconv.ts b/src/app/core/models/trace/ExperimentalSemconv.ts new file mode 100644 index 00000000..8507f660 --- /dev/null +++ b/src/app/core/models/trace/ExperimentalSemconv.ts @@ -0,0 +1,217 @@ +/** + * @license + * Copyright 2026 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. + */ + +/** + * Validators and types for the *experimental* OpenTelemetry GenAI semantic + * conventions — i.e. the structured span attributes emitted by the Python ADK + * from `google.adk.telemetry._experimental_semconv` (`gen_ai.input.messages`, + * `gen_ai.output.messages`, `gen_ai.system_instructions`, + * `gen_ai.tool.definitions`, etc.). + * + * This module is private to `src/app/core/models/trace/`. Public symbols are + * re-exported from `Trace.ts`. + */ + +import { z } from 'zod'; + +import { jsonStringOr } from './Shared'; + +// --------------------------------------------------------------------------- +// Attribute name constants — mirror the OTel incubating GenAI attributes used +// by google.adk.telemetry._experimental_semconv. +// --------------------------------------------------------------------------- + +export const GEN_AI_INPUT_MESSAGES = 'gen_ai.input.messages'; +export const GEN_AI_OUTPUT_MESSAGES = 'gen_ai.output.messages'; +export const GEN_AI_SYSTEM_INSTRUCTIONS = 'gen_ai.system_instructions'; +export const GEN_AI_TOOL_DEFINITIONS = 'gen_ai.tool.definitions'; +export const GEN_AI_RESPONSE_FINISH_REASONS = + 'gen_ai.response.finish_reasons'; +export const GEN_AI_USAGE_INPUT_TOKENS = 'gen_ai.usage.input_tokens'; +export const GEN_AI_USAGE_OUTPUT_TOKENS = 'gen_ai.usage.output_tokens'; + +export const FUNCTION_TOOL_DEFINITION_TYPE = 'function'; + +// --------------------------------------------------------------------------- +// Log event names — mirror constants in +// google.adk.telemetry._experimental_semconv. +// --------------------------------------------------------------------------- + +export const GEN_AI_COMPLETION_DETAILS_EVENT = + 'gen_ai.client.inference.operation.details'; + +// --------------------------------------------------------------------------- +// Part validators (mirror Section A TypedDicts in +// google.adk.telemetry._experimental_semconv). +// --------------------------------------------------------------------------- + +const TextPartValidator = z.object({ + type: z.literal('text'), + content: z.string(), +}); + +const BlobPartValidator = z.object({ + type: z.literal('blob'), + mime_type: z.string(), + // Python types this as `bytes`. After JSON serialization it could be a + // base64 string, an array of integers, or null. Stay lenient. + data: z.any(), +}); + +const FileDataPartValidator = z.object({ + type: z.literal('file_data'), + mime_type: z.string(), + uri: z.string(), +}); + +const ToolCallPartValidator = z.object({ + type: z.literal('tool_call'), + id: z.string().nullable().optional(), + name: z.string(), + arguments: z.record(z.string(), z.any()).nullable().optional(), +}); + +const ToolCallResponsePartValidator = z.object({ + type: z.literal('tool_call_response'), + id: z.string().nullable().optional(), + response: z.record(z.string(), z.any()).nullable().optional(), +}); + +/** + * Discriminated union of the experimental Part shapes. Validation routes on + * the `type` literal. + */ +export const PartValidator = z.discriminatedUnion('type', [ + TextPartValidator, + BlobPartValidator, + FileDataPartValidator, + ToolCallPartValidator, + ToolCallResponsePartValidator, +]); + +// --------------------------------------------------------------------------- +// Message validators +// --------------------------------------------------------------------------- + +export const InputMessageValidator = z.object({ + role: z.string(), + parts: z.array(PartValidator), +}); + +export const OutputMessageValidator = z.object({ + role: z.string(), + parts: z.array(PartValidator), + finish_reason: z.string(), +}); + +// --------------------------------------------------------------------------- +// Tool definition validators +// --------------------------------------------------------------------------- + +const FunctionToolDefinitionValidator = z.object({ + type: z.literal(FUNCTION_TOOL_DEFINITION_TYPE), + name: z.string(), + description: z.string().nullable().optional(), + parameters: z.record(z.string(), z.any()).nullable().optional(), +}); + +const GenericToolDefinitionValidator = z.object({ + name: z.string(), + type: z.string(), +}); + +/** + * Tool definition: either a `FunctionToolDefinition` (when `type === 'function'`) + * or a generic shape. Zod tries variants in order, so the function shape is + * preferred when applicable. + */ +export const ToolDefinitionValidator = z.union([ + FunctionToolDefinitionValidator, + GenericToolDefinitionValidator, +]); + +// --------------------------------------------------------------------------- +// Span-attribute validators (used by Trace.ts to validate the values found +// in `span.attributes`). Each entry accepts either the parsed array form OR a +// JSON string, because Python ADK serializes these via +// `_safe_json_serialize_no_whitespaces` (see +// `_experimental_semconv.py:_build_completion_span_attributes`). +// --------------------------------------------------------------------------- + +export const InputMessagesAttrValidator = + jsonStringOr(z.array(InputMessageValidator)); + +export const OutputMessagesAttrValidator = + jsonStringOr(z.array(OutputMessageValidator)); + +export const SystemInstructionsAttrValidator = + jsonStringOr(z.array(PartValidator)); + +export const ToolDefinitionsAttrValidator = + jsonStringOr(z.array(ToolDefinitionValidator)); + +export const ResponseFinishReasonsAttrValidator = z.array(z.string()); + +export const UsageTokensAttrValidator = z.number(); + +// --------------------------------------------------------------------------- +// Completion-details log event (experimental semconv). +// +// Unlike the *stable* GenAI log events (system/user/choice), the experimental +// completion-details event carries its payload on the log record's +// `attributes` rather than its `body`. Each attribute mirrors the +// corresponding span attribute and is validated using the same per-attribute +// validators above. +// +// All payload attributes are optional — the Python ADK omits attributes +// whose source data wasn't available (e.g. `gen_ai.tool.definitions` is +// absent when the request had no tools). +// --------------------------------------------------------------------------- + +export const CompletionDetailsLogAttributesValidator = z.object({ + [GEN_AI_INPUT_MESSAGES]: InputMessagesAttrValidator.optional(), + [GEN_AI_OUTPUT_MESSAGES]: OutputMessagesAttrValidator.optional(), + [GEN_AI_SYSTEM_INSTRUCTIONS]: SystemInstructionsAttrValidator.optional(), + [GEN_AI_TOOL_DEFINITIONS]: ToolDefinitionsAttrValidator.optional(), + [GEN_AI_RESPONSE_FINISH_REASONS]: + ResponseFinishReasonsAttrValidator.optional(), + [GEN_AI_USAGE_INPUT_TOKENS]: UsageTokensAttrValidator.optional(), + [GEN_AI_USAGE_OUTPUT_TOKENS]: UsageTokensAttrValidator.optional(), +}).loose(); // Unknown common attributes (e.g. `gen_ai.agent.name`, + // `gcp.vertex.agent.event_id`) are allowed through unchanged. + +export const CompletionDetailsLogValidator = z.object({ + event_name: z.literal(GEN_AI_COMPLETION_DETAILS_EVENT), + // Python emits this log with no body — only attributes. + body: z.unknown().optional(), + attributes: CompletionDetailsLogAttributesValidator.optional(), +}); + +// --------------------------------------------------------------------------- +// Inferred types +// --------------------------------------------------------------------------- + +export type Part = z.infer; +export type InputMessage = z.infer; +export type OutputMessage = z.infer; +export type FunctionToolDefinition = + z.infer; +export type GenericToolDefinition = + z.infer; +export type ToolDefinition = z.infer; +export type CompletionDetailsLog = + z.infer; diff --git a/src/app/core/models/trace/Shared.ts b/src/app/core/models/trace/Shared.ts new file mode 100644 index 00000000..65034d56 --- /dev/null +++ b/src/app/core/models/trace/Shared.ts @@ -0,0 +1,85 @@ +/** + * @license + * Copyright 2026 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. + */ + +/** + * Shared low-level Zod primitives used by the trace validators. + * + * This module is private to `src/app/core/models/trace/`. Public symbols are + * re-exported from `Trace.ts`. + */ + +import { z } from 'zod'; + +// Define the recursive type for OTelAnyValue +const literalSchema = z.union([z.string(), z.number(), z.boolean()]); + +/** + * Recursive schema matching OpenTelemetry `AnyValue` — strings, numbers, + * booleans, arrays of those, and string-keyed maps of those. + */ +export const oTelAnyValueSchema: z.ZodType = z.lazy(() => + z.union([ + literalSchema, + z.array(oTelAnyValueSchema), + z.record(z.string(), oTelAnyValueSchema), + ]), +); + +/** + * Strips entries whose value is `null` from a parsed object. + * + * Used because Python ADK serializes optional fields as `null`, but ADK Web + * prefers the JS-idiomatic "field absent" representation. + */ +export function withStrippedNulls(schema: T) { + return schema.transform((data) => { + if (!data || typeof data !== 'object') { + return data; + } + const cleanData: Record = {}; + for (const [key, value] of Object.entries(data)) { + if (value !== null) { + cleanData[key] = value; + } + } + return cleanData; + }); +} + +/** + * Parses a JSON string and surfaces parse errors as Zod issues. + */ +export const jsonStringSchema = z.string().transform((str, ctx) => { + try { + return JSON.parse(str); + } catch (e) { + ctx.addIssue({ code: 'custom', message: 'Invalid JSON string' }); + return z.NEVER; + } +}); + +/** + * Helper that accepts either an already-parsed value or a JSON string that + * parses to a value matching the given schema. + * + * Python ADK serializes some span attributes via + * `_safe_json_serialize_no_whitespaces(...)` (see + * `_experimental_semconv.py:_build_completion_span_attributes`), so on the + * wire we may see either form. + */ +export const jsonStringOr = (schema: T) => + z.union([schema, jsonStringSchema.pipe(schema)]); diff --git a/src/app/core/models/trace/SpanIo.ts b/src/app/core/models/trace/SpanIo.ts new file mode 100644 index 00000000..f95f1194 --- /dev/null +++ b/src/app/core/models/trace/SpanIo.ts @@ -0,0 +1,293 @@ +/** + * @license + * Copyright 2026 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. + */ + +/** + * Stage-3 input/output coercion. + * + * Stage 1 validates the OTel envelope; Stage 2 promotes well-known + * attributes into typed `attr*` fields. Stage 3 reads those promoted + * fields (and, for experimental semconv, the completion-details log + * attributes) and projects them into a single discriminated `SpanIo` + * shape that consumers can render uniformly regardless of which semantic + * convention produced the underlying span. + * + * Three sources are recognised, attempted in this order on each span: + * + * 1. **Experimental** (`kind: 'experimental'`) — payload lives on the + * `gen_ai.client.inference.operation.details` log's `attributes` + * (`gen_ai.input.messages`, `gen_ai.system_instructions`, + * `gen_ai.tool.definitions`, `gen_ai.output.messages`). + * + * 2. **Stable** (`kind: 'stable'`) — payload lives on the span's child + * log records: `gen_ai.system.message` (single body), one or more + * `gen_ai.user.message` (bodies), and `gen_ai.choice` (body) for the + * output. + * + * 3. **Legacy** (`kind: 'legacy'`) — payload lives in the + * `gcp.vertex.agent.llm_{request,response}` JSON-string attributes. + * The strings are parsed; if either fails to parse it is left as a + * raw string so the caller can still surface something useful. + * + * If none of the three sources have any data, the result is `undefined`. + * + * The shapes here are intentionally **opaque** (mostly `unknown`) — these + * are passed through to the UI for structural display, so we do not need + * to re-validate the inner content beyond what Stage 2 has already done. + * + * This module is private to `src/app/core/models/trace/`. Public symbols + * are re-exported from `Trace.ts`. + */ + +import { + GEN_AI_COMPLETION_DETAILS_EVENT, + GEN_AI_INPUT_MESSAGES, + GEN_AI_OUTPUT_MESSAGES, + GEN_AI_SYSTEM_INSTRUCTIONS, + GEN_AI_TOOL_DEFINITIONS, +} from './ExperimentalSemconv'; +import { + GEN_AI_CHOICE_EVENT, + GEN_AI_SYSTEM_MESSAGE_EVENT, + GEN_AI_USER_MESSAGE_EVENT, +} from './StableSemconv'; + +// Wire keys for the legacy `call_llm` attributes. Defined locally here +// (rather than imported from `Trace.ts`) to avoid a circular import. +const GCP_VERTEX_AGENT_LLM_REQUEST = 'gcp.vertex.agent.llm_request'; +const GCP_VERTEX_AGENT_LLM_RESPONSE = 'gcp.vertex.agent.llm_response'; + +// --------------------------------------------------------------------------- +// IO variant types. +// +// Each variant carries a `kind` discriminator. Field shapes are deliberately +// opaque (`unknown`) because consumers only render them as structured trees; +// validation already happened in Stage 2. +// --------------------------------------------------------------------------- + +/** + * Inputs/outputs derived from the legacy `gcp.vertex.agent.llm_*` string + * attributes. The strings are JSON-parsed when possible; on parse failure + * the raw string is preserved verbatim so the UI can still display + * *something*. + */ +export interface LegacySpanIo { + kind: 'legacy'; + inputs: unknown; + outputs: unknown; +} + +/** + * Inputs/outputs derived from stable-semconv child logs. + * + * - `system_instruction`: the body of the (single) `gen_ai.system.message` + * log, or `undefined` if no system message was emitted. + * - `user_messages`: bodies of all `gen_ai.user.message` logs, in + * emission order. Empty array if none were emitted. + * - `output`: the body of the (single) `gen_ai.choice` log, or + * `undefined` if no choice was emitted yet. + */ +export interface StableSpanIo { + kind: 'stable'; + inputs: { + system_instruction: unknown; + user_messages: unknown[]; + }; + outputs: unknown; +} + +/** + * Inputs/outputs derived from an experimental-semconv + * `gen_ai.client.inference.operation.details` log's attributes. + * + * - `system_instruction`: value of `gen_ai.system_instructions`. + * - `user_messages`: value of `gen_ai.input.messages`. + * - `tool_definitions`: value of `gen_ai.tool.definitions`. + * - `output`: value of `gen_ai.output.messages`. + * + * Any attribute not present on the log is `undefined`. + */ +export interface ExperimentalSpanIo { + kind: 'experimental'; + inputs: { + system_instruction: unknown; + user_messages: unknown; + tool_definitions: unknown; + }; + outputs: unknown; +} + +/** + * Discriminated union of the IO shapes a span may project into. Use the + * `kind` field to discriminate. + */ +export type SpanIo = LegacySpanIo | StableSpanIo | ExperimentalSpanIo; + +// --------------------------------------------------------------------------- +// Coercion entry point. +// --------------------------------------------------------------------------- + +/** + * Inputs to {@link coerceSpanIo}. This is intentionally a structural type + * rather than a reference to `ValidatedSpan` so that this module can stay + * independent of `Trace.ts`'s broader span union (and so it can be unit- + * tested with minimal fixtures). + * + * - `attributes`: the raw OTel attribute bag, wire-keyed. Read for the + * legacy `gcp.vertex.agent.llm_{request,response}` JSON-string + * attributes. + * - `logs`: the span's child log records. Read for stable-semconv + * system/user/choice bodies and for the experimental + * `gen_ai.client.inference.operation.details` log attributes. + */ +export interface CoerceSpanIoInput { + attributes?: Record; + logs?: ReadonlyArray<{ + event_name: string; + body?: unknown; + attributes?: Record; + }>; +} + +/** + * Projects a span's inputs/outputs into the unified {@link SpanIo} shape. + * + * Sources are tried in this order, first match wins: + * 1. Experimental (`gen_ai.client.inference.operation.details` log + * attributes). + * 2. Stable (`gen_ai.system.message` / `gen_ai.user.message` / + * `gen_ai.choice` child logs). + * 3. Legacy (`gcp.vertex.agent.llm_{request,response}` string attrs). + * + * Returns `undefined` if no source produced any data. + */ +export function coerceSpanIo(span: CoerceSpanIoInput): SpanIo | undefined { + const experimental = tryExperimental(span); + if (experimental !== undefined) return experimental; + + const stable = tryStable(span); + if (stable !== undefined) return stable; + + const legacy = tryLegacy(span); + if (legacy !== undefined) return legacy; + + return undefined; +} + +// --------------------------------------------------------------------------- +// Per-source extractors. +// --------------------------------------------------------------------------- + +function tryExperimental( + span: CoerceSpanIoInput, + ): ExperimentalSpanIo | undefined { + const log = (span.logs ?? []).find( + (l) => l.event_name === GEN_AI_COMPLETION_DETAILS_EVENT, + ); + if (log === undefined) return undefined; + + const attrs = log.attributes ?? {}; + const systemInstruction = attrs[GEN_AI_SYSTEM_INSTRUCTIONS]; + const userMessages = attrs[GEN_AI_INPUT_MESSAGES]; + const toolDefinitions = attrs[GEN_AI_TOOL_DEFINITIONS]; + const output = attrs[GEN_AI_OUTPUT_MESSAGES]; + + // If the completion-details log is present but carries none of the + // payload attributes, fall through to other sources rather than emit + // an empty experimental IO. + if (systemInstruction === undefined && userMessages === undefined && + toolDefinitions === undefined && output === undefined) { + return undefined; + } + + return { + kind: 'experimental', + inputs: { + system_instruction: systemInstruction, + user_messages: userMessages, + tool_definitions: toolDefinitions, + }, + outputs: output, + }; +} + +function tryStable(span: CoerceSpanIoInput): StableSpanIo | undefined { + const logs = span.logs ?? []; + + let systemInstruction: unknown = undefined; + const userMessages: unknown[] = []; + let output: unknown = undefined; + + for (const log of logs) { + switch (log.event_name) { + case GEN_AI_SYSTEM_MESSAGE_EVENT: + // If multiple system messages were emitted (not expected, but + // possible), the last one wins — matches "single system + // instruction" semantics. + systemInstruction = log.body; + break; + case GEN_AI_USER_MESSAGE_EVENT: + userMessages.push(log.body); + break; + case GEN_AI_CHOICE_EVENT: + output = log.body; + break; + default: + break; + } + } + + if (systemInstruction === undefined && userMessages.length === 0 && + output === undefined) { + return undefined; + } + + return { + kind: 'stable', + inputs: { + system_instruction: systemInstruction, + user_messages: userMessages, + }, + outputs: output, + }; +} + +function tryLegacy(span: CoerceSpanIoInput): LegacySpanIo | undefined { + const attrs = span.attributes ?? {}; + const req = attrs[GCP_VERTEX_AGENT_LLM_REQUEST]; + const res = attrs[GCP_VERTEX_AGENT_LLM_RESPONSE]; + if (req === undefined && res === undefined) return undefined; + + return { + kind: 'legacy', + inputs: parseJsonOrPassThrough(req), + outputs: parseJsonOrPassThrough(res), + }; +} + +/** + * If the input is a string, attempts to JSON-parse it (returning the raw + * string on parse failure so the UI can still surface its contents). For + * any non-string input, returns the value unchanged. + */ +function parseJsonOrPassThrough(value: unknown): unknown { + if (typeof value !== 'string') return value; + try { + return JSON.parse(value); + } catch { + return value; + } +} diff --git a/src/app/core/models/trace/StableSemconv.spec.ts b/src/app/core/models/trace/StableSemconv.spec.ts new file mode 100644 index 00000000..e82278c8 --- /dev/null +++ b/src/app/core/models/trace/StableSemconv.spec.ts @@ -0,0 +1,210 @@ +/** + * @license + * Copyright 2026 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 { + GEN_AI_CHOICE_EVENT, + GEN_AI_SYSTEM_MESSAGE_EVENT, + GEN_AI_USER_MESSAGE_EVENT, + isChoiceLog, + isSystemMessageLog, + isUserMessageLog, + LogValidator, + PromptResponseLogValidator, + SystemMessageLogValidator, +} from './StableSemconv'; + +describe('StableSemconv', () => { + describe('SystemMessageLogValidator', () => { + it('accepts a valid system message body', () => { + const result = SystemMessageLogValidator.safeParse({ + event_name: GEN_AI_SYSTEM_MESSAGE_EVENT, + body: { content: 'You are a helpful assistant.' }, + }); + expect(result.success).toBeTrue(); + }); + + it('rejects when body.content is missing', () => { + const result = SystemMessageLogValidator.safeParse({ + event_name: GEN_AI_SYSTEM_MESSAGE_EVENT, + body: {}, + }); + expect(result.success).toBeFalse(); + }); + + it('rejects when event_name is wrong', () => { + const result = SystemMessageLogValidator.safeParse({ + event_name: GEN_AI_USER_MESSAGE_EVENT, + body: { content: 'hi' }, + }); + expect(result.success).toBeFalse(); + }); + }); + + describe('PromptResponseLogValidator', () => { + it('accepts a user message with text part', () => { + const result = PromptResponseLogValidator.safeParse({ + event_name: GEN_AI_USER_MESSAGE_EVENT, + body: { + role: 'user', + content: { parts: [{ text: 'Hello' }] }, + }, + }); + expect(result.success).toBeTrue(); + }); + + it('accepts a choice with function_call part', () => { + const result = PromptResponseLogValidator.safeParse({ + event_name: GEN_AI_CHOICE_EVENT, + body: { + content: { + role: 'model', + parts: [{ + function_call: { + name: 'get_weather', + args: { location: 'London' }, + }, + }], + }, + }, + }); + expect(result.success).toBeTrue(); + }); + + it('accepts a function_response part', () => { + const result = PromptResponseLogValidator.safeParse({ + event_name: GEN_AI_USER_MESSAGE_EVENT, + body: { + role: 'user', + content: { + parts: [{ + function_response: { + name: 'get_weather', + response: { weather: 'sunny' }, + }, + }], + }, + }, + }); + expect(result.success).toBeTrue(); + }); + + it('accepts a JSON-string body', () => { + const result = PromptResponseLogValidator.safeParse({ + event_name: GEN_AI_USER_MESSAGE_EVENT, + body: JSON.stringify({ + role: 'user', + content: { parts: [{ text: 'Hello from JSON' }] }, + }), + }); + expect(result.success).toBeTrue(); + }); + + it('rejects an invalid JSON-string body', () => { + const result = PromptResponseLogValidator.safeParse({ + event_name: GEN_AI_USER_MESSAGE_EVENT, + body: '{ this is not valid json }', + }); + expect(result.success).toBeFalse(); + }); + + it('rejects a function_call missing the name field', () => { + const result = PromptResponseLogValidator.safeParse({ + event_name: GEN_AI_USER_MESSAGE_EVENT, + body: { + role: 'user', + content: { + parts: [{ + function_call: { args: { location: 'London' } }, + }], + }, + }, + }); + expect(result.success).toBeFalse(); + }); + + it('rejects when content has no role at all', () => { + const result = PromptResponseLogValidator.safeParse({ + event_name: GEN_AI_CHOICE_EVENT, + body: { + content: { parts: [{ text: 'I have no role' }] }, + }, + }); + expect(result.success).toBeFalse(); + }); + + it('lifts top-level role onto content.role', () => { + const result = PromptResponseLogValidator.safeParse({ + event_name: GEN_AI_USER_MESSAGE_EVENT, + body: { + role: 'user', + content: { parts: [{ text: 'Hi' }] }, + }, + }); + expect(result.success).toBeTrue(); + if (result.success) { + expect(result.data.body.content.role).toBe('user'); + } + }); + }); + + describe('LogValidator union', () => { + it('accepts both system and prompt/response shapes', () => { + const sys = LogValidator.safeParse({ + event_name: GEN_AI_SYSTEM_MESSAGE_EVENT, + body: { content: 'sys' }, + }); + const user = LogValidator.safeParse({ + event_name: GEN_AI_USER_MESSAGE_EVENT, + body: { role: 'user', content: { parts: [{ text: 'hi' }] } }, + }); + expect(sys.success).toBeTrue(); + expect(user.success).toBeTrue(); + }); + }); + + describe('type guards', () => { + it('isUserMessageLog narrows on event_name', () => { + const log = { + event_name: GEN_AI_USER_MESSAGE_EVENT, + body: { content: { parts: [], role: 'user' } }, + } as const; + expect(isUserMessageLog(log as any)).toBeTrue(); + expect(isSystemMessageLog(log as any)).toBeFalse(); + expect(isChoiceLog(log as any)).toBeFalse(); + }); + + it('isSystemMessageLog narrows on event_name', () => { + const log = { + event_name: GEN_AI_SYSTEM_MESSAGE_EVENT, + body: { content: 'sys' }, + } as const; + expect(isSystemMessageLog(log as any)).toBeTrue(); + expect(isUserMessageLog(log as any)).toBeFalse(); + expect(isChoiceLog(log as any)).toBeFalse(); + }); + + it('isChoiceLog narrows on event_name', () => { + const log = { + event_name: GEN_AI_CHOICE_EVENT, + body: { content: { parts: [], role: 'model' } }, + } as const; + expect(isChoiceLog(log as any)).toBeTrue(); + expect(isUserMessageLog(log as any)).toBeFalse(); + expect(isSystemMessageLog(log as any)).toBeFalse(); + }); + }); +}); diff --git a/src/app/core/models/trace/StableSemconv.ts b/src/app/core/models/trace/StableSemconv.ts new file mode 100644 index 00000000..a3e849dd --- /dev/null +++ b/src/app/core/models/trace/StableSemconv.ts @@ -0,0 +1,138 @@ +/** + * @license + * Copyright 2026 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. + */ + +/** + * Validators and types for the *stable* OpenTelemetry GenAI semantic + * conventions — i.e. the `gen_ai.system.message`, `gen_ai.user.message`, and + * `gen_ai.choice` log events emitted by the Python ADK from + * `google.adk.telemetry._stable_semconv`. + * + * This module is private to `src/app/core/models/trace/`. Public symbols are + * re-exported from `Trace.ts`. + */ + +import { z } from 'zod'; + +import { jsonStringSchema, withStrippedNulls } from './Shared'; + +// --------------------------------------------------------------------------- +// Event names — mirror constants in +// google.adk.telemetry._stable_semconv. +// --------------------------------------------------------------------------- + +export const GEN_AI_SYSTEM_MESSAGE_EVENT = 'gen_ai.system.message'; +export const GEN_AI_USER_MESSAGE_EVENT = 'gen_ai.user.message'; +export const GEN_AI_CHOICE_EVENT = 'gen_ai.choice'; + +// --------------------------------------------------------------------------- +// Body validators +// --------------------------------------------------------------------------- + +const FunctionCallValidator = withStrippedNulls(z.object({ + id: z.string().nullable().optional(), + name: z.string(), + args: z.record(z.string(), z.any()), + needsResponse: z.boolean().nullable().optional(), +})); + +const FunctionResponseValidator = withStrippedNulls(z.object({ + id: z.string().nullable().optional(), + name: z.string(), + response: z.record(z.string(), z.any()), +})); + +// This includes only the most common GenAI parts. +// Extra GenAI parts emitted, will not issue an error. +// If ADK Web needs to have type-safe access any of these, extend it. +const GenAIPartValidator = withStrippedNulls(z.object({ + text: z.string().nullable().optional(), + function_call: FunctionCallValidator.nullable().optional(), + function_response: FunctionResponseValidator.nullable().optional(), +})); + +const GenAIContentValidator = z.object({ + parts: z.array(GenAIPartValidator), + role: z.string(), +}); + +const GenAILogBodyValidator = z.object({ + content: z.object({ + parts: z.array(GenAIPartValidator), + role: z.string().optional(), + }), + role: z.string().optional(), +}).transform((logBody) => { + // Coherce role to be present on the content + const content = { ...logBody.content }; + if (logBody.role !== undefined) { + content.role = logBody.role; + } + return { + content: content, + }; +}).pipe(z.object({ + content: GenAIContentValidator, +})); + +const GenAISystemMessageBodyValidator = z.object({ + content: z.string(), +}); + +export const PromptResponseLogValidator = z.object({ + event_name: z.enum([GEN_AI_USER_MESSAGE_EVENT, GEN_AI_CHOICE_EVENT]), + body: z.union([ + GenAILogBodyValidator, + jsonStringSchema.pipe(GenAILogBodyValidator), + ]), +}); + +export const SystemMessageLogValidator = z.object({ + event_name: z.literal(GEN_AI_SYSTEM_MESSAGE_EVENT), + body: GenAISystemMessageBodyValidator, +}); + +export const LogValidator = z.union([ + SystemMessageLogValidator, + PromptResponseLogValidator, +]); + +// --------------------------------------------------------------------------- +// Inferred types & type guards +// --------------------------------------------------------------------------- + +export type ValidatedLog = z.infer; +export type PromptResponseLog = z.infer; +export type SystemMessageLog = z.infer; +export type GenAIContent = z.infer; + +export const isUserMessageLog = ( + log: ValidatedLog, +): log is PromptResponseLog => { + return log.event_name === GEN_AI_USER_MESSAGE_EVENT; +}; + +export const isSystemMessageLog = ( + log: ValidatedLog, +): log is SystemMessageLog => { + return log.event_name === GEN_AI_SYSTEM_MESSAGE_EVENT; +}; + +export const isChoiceLog = ( + log: ValidatedLog, +): log is PromptResponseLog => { + return log.event_name === GEN_AI_CHOICE_EVENT; +}; diff --git a/src/app/core/models/types.ts b/src/app/core/models/types.ts index fd4f538e..506ce305 100644 --- a/src/app/core/models/types.ts +++ b/src/app/core/models/types.ts @@ -138,4 +138,4 @@ export declare interface Event extends LlmResponse { export interface ComputerUsePayload { image?: {data: string; mimetype?: string;}; url?: string; -} \ No newline at end of file +} diff --git a/src/app/core/services/agent.service.spec.ts b/src/app/core/services/agent.service.spec.ts index 417e99c5..f3cd73b1 100644 --- a/src/app/core/services/agent.service.spec.ts +++ b/src/app/core/services/agent.service.spec.ts @@ -223,4 +223,45 @@ describe('AgentService', () => { expect(results).toEqual([fakeResponse]); }); }); + + describe('Agent Builder Endpoints', () => { + it('should call getAgentBuilder with correct URL structure', () => { + service.getAgentBuilder(TEST_APP_NAME).subscribe(); + const req = httpTestingController.expectOne(req => + req.url.startsWith(`${API_SERVER_BASE_URL}/dev/apps/${TEST_APP_NAME}/builder`) && !req.url.includes('tmp=true') + ); + expect(req.request.method).toEqual('GET'); + req.flush('builder-data'); + }); + + it('should call getAgentBuilderTmp with correct URL structure and tmp flag', () => { + service.getAgentBuilderTmp(TEST_APP_NAME).subscribe(); + const req = httpTestingController.expectOne(req => + req.url.startsWith(`${API_SERVER_BASE_URL}/dev/apps/${TEST_APP_NAME}/builder`) && req.url.includes('tmp=true') + ); + expect(req.request.method).toEqual('GET'); + req.flush('builder-data-tmp'); + }); + + it('should call getSubAgentBuilder with correct URL structure, tmp, and file_path parameters', () => { + const relativePath = 'subagents/my-subagent.py'; + service.getSubAgentBuilder(TEST_APP_NAME, relativePath).subscribe(); + const req = httpTestingController.expectOne(req => + req.url.startsWith(`${API_SERVER_BASE_URL}/dev/apps/${TEST_APP_NAME}/builder`) && + req.url.includes('tmp=true') && + req.url.includes(`file_path=${relativePath}`) + ); + expect(req.request.method).toEqual('GET'); + req.flush('subagent-builder-data'); + }); + + it('should call agentChangeCancel with correct URL structure and POST method', () => { + service.agentChangeCancel(TEST_APP_NAME).subscribe(); + const req = httpTestingController.expectOne( + `${API_SERVER_BASE_URL}/dev/apps/${TEST_APP_NAME}/builder/cancel` + ); + expect(req.request.method).toEqual('POST'); + req.flush(true); + }); + }); }); diff --git a/src/app/core/services/agent.service.ts b/src/app/core/services/agent.service.ts index 77633e74..7d10e09d 100644 --- a/src/app/core/services/agent.service.ts +++ b/src/app/core/services/agent.service.ts @@ -141,19 +141,19 @@ export class AgentService implements AgentServiceInterface { return new Observable(); } - agentBuild(req: any): Observable { + agentBuild(appName: string, req: any): Observable { if (this.apiServerDomain != undefined) { const url = - this.apiServerDomain + `/builder/save`; + this.apiServerDomain + `/dev/apps/${appName}/builder/save`; return this.http.post(url, req); } return new Observable(); } - agentBuildTmp(req: any): Observable { + agentBuildTmp(appName: string, req: any): Observable { if (this.apiServerDomain != undefined) { const url = - this.apiServerDomain + `/builder/save?tmp=true`; + this.apiServerDomain + `/dev/apps/${appName}/builder/save?tmp=true`; return this.http.post(url, req); } return new Observable(); @@ -162,7 +162,7 @@ export class AgentService implements AgentServiceInterface { getAgentBuilder(agentName: string) { if (this.apiServerDomain != undefined) { const url = - this.apiServerDomain + `/builder/app/${agentName}?ts=${Date.now()}` + this.apiServerDomain + `/dev/apps/${agentName}/builder?ts=${Date.now()}` return this.http.get(url, { responseType: 'text' }); @@ -173,7 +173,7 @@ export class AgentService implements AgentServiceInterface { getAgentBuilderTmp(agentName: string) { if (this.apiServerDomain != undefined) { const url = - this.apiServerDomain + `/builder/app/${agentName}?ts=${Date.now()}&tmp=true` + this.apiServerDomain + `/dev/apps/${agentName}/builder?ts=${Date.now()}&tmp=true` return this.http.get(url, { responseType: 'text' }); @@ -184,7 +184,7 @@ export class AgentService implements AgentServiceInterface { getSubAgentBuilder(appName: string, relativePath: string) { if (this.apiServerDomain != undefined) { let url = - this.apiServerDomain + `/builder/app/${appName}?ts=${Date.now()}&file_path=${relativePath}&tmp=true` + this.apiServerDomain + `/dev/apps/${appName}/builder?ts=${Date.now()}&file_path=${relativePath}&tmp=true` return this.http.get(url, { responseType: 'text' }); @@ -195,7 +195,7 @@ export class AgentService implements AgentServiceInterface { agentChangeCancel(appName: string) { if (this.apiServerDomain != undefined) { let url = - this.apiServerDomain + `/builder/app/${appName}/cancel` + this.apiServerDomain + `/dev/apps/${appName}/builder/cancel` return this.http.post(url, {}); } return new Observable(); @@ -203,7 +203,7 @@ export class AgentService implements AgentServiceInterface { getAppInfo(appName: string) { if (this.apiServerDomain != undefined) { - let url = this.apiServerDomain + `/dev/build_graph/${appName}` + let url = this.apiServerDomain + `/dev/apps/${appName}/build_graph` return this.http.get(url); } return new Observable<''>(); @@ -211,7 +211,7 @@ export class AgentService implements AgentServiceInterface { getAppGraphImage(appName: string, darkMode: boolean, node?: string): Observable { if (this.apiServerDomain != undefined) { - const url = this.apiServerDomain + `/dev/build_graph_image/${appName}`; + const url = this.apiServerDomain + `/dev/apps/${appName}/build_graph_image`; const params: any = { dark_mode: darkMode }; if (node) { params.node = node; diff --git a/src/app/core/services/eval.service.ts b/src/app/core/services/eval.service.ts index fef5ba99..e84670ba 100644 --- a/src/app/core/services/eval.service.ts +++ b/src/app/core/services/eval.service.ts @@ -37,7 +37,7 @@ export class EvalService implements EvalServiceInterface { getEvalSets(appName: string) { if (this.apiServerDomain != undefined) { - const url = this.apiServerDomain + `/apps/${appName}/eval_sets`; + const url = this.apiServerDomain + `/dev/apps/${appName}/eval_sets`; return this.http.get(url); } return new Observable(); @@ -49,7 +49,7 @@ export class EvalService implements EvalServiceInterface { return of({metricsInfo: this.metricsInfoCache.get(appName)!}); } if (this.apiServerDomain != undefined) { - const url = this.apiServerDomain + `/apps/${appName}/metrics-info`; + const url = this.apiServerDomain + `/dev/apps/${appName}/metrics-info`; return this.http.get(url).pipe( tap(res => { const info = res.metricsInfo || []; @@ -64,7 +64,7 @@ export class EvalService implements EvalServiceInterface { createNewEvalSet(appName: string, evalSetId: string, executionMode: 'live' | 'replay' = 'live') { if (this.apiServerDomain != undefined) { const url = - this.apiServerDomain + `/apps/${appName}/eval-sets`; + this.apiServerDomain + `/dev/apps/${appName}/eval-sets`; return this.http.post(url, { eval_set: { eval_set_id: evalSetId, @@ -80,7 +80,7 @@ export class EvalService implements EvalServiceInterface { getEvalSet(appName: string, evalSetId: string) { if (this.apiServerDomain != undefined) { const url = - this.apiServerDomain + `/apps/${appName}/eval_sets/${evalSetId}`; + this.apiServerDomain + `/dev/apps/${appName}/eval_sets/${evalSetId}`; return this.http.get(url, {}); } return new Observable(); @@ -89,7 +89,7 @@ export class EvalService implements EvalServiceInterface { listEvalCases(appName: string, evalSetId: string) { if (this.apiServerDomain != undefined) { const url = - this.apiServerDomain + `/apps/${appName}/eval_sets/${evalSetId}/evals`; + this.apiServerDomain + `/dev/apps/${appName}/eval_sets/${evalSetId}/evals`; return this.http.get(url, {}); } return new Observable(); @@ -104,7 +104,7 @@ export class EvalService implements EvalServiceInterface { ) { const url = this.apiServerDomain + - `/apps/${appName}/eval_sets/${evalSetId}/add_session`; + `/dev/apps/${appName}/eval_sets/${evalSetId}/add_session`; return this.http.post(url, { evalId: evalId, sessionId: sessionId, @@ -119,7 +119,7 @@ export class EvalService implements EvalServiceInterface { evalMetrics: any[], ) { const url = - this.apiServerDomain + `/apps/${appName}/eval_sets/${evalSetId}/run_eval`; + this.apiServerDomain + `/dev/apps/${appName}/eval_sets/${evalSetId}/run_eval`; return this.http.post(url, { evalIds: evalIds, evalMetrics: evalMetrics, @@ -128,7 +128,7 @@ export class EvalService implements EvalServiceInterface { listEvalResults(appName: string) { if (this.apiServerDomain != undefined) { - const url = this.apiServerDomain + `/apps/${appName}/eval_results`; + const url = this.apiServerDomain + `/dev/apps/${appName}/eval_results`; return this.http.get(url, {}); } @@ -138,7 +138,7 @@ export class EvalService implements EvalServiceInterface { getEvalResult(appName: string, evalResultId: string) { if (this.apiServerDomain != undefined) { const url = - this.apiServerDomain + `/apps/${appName}/eval_results/${encodeURIComponent(evalResultId)}`; + this.apiServerDomain + `/dev/apps/${appName}/eval_results/${encodeURIComponent(evalResultId)}`; return this.http.get(url, {}); } return new Observable(); @@ -148,7 +148,7 @@ export class EvalService implements EvalServiceInterface { if (this.apiServerDomain != undefined) { const url = this.apiServerDomain + - `/apps/${appName}/eval_sets/${evalSetId}/evals/${evalCaseId}`; + `/dev/apps/${appName}/eval_sets/${evalSetId}/evals/${evalCaseId}`; return this.http.get(url, {}); } return new Observable(); @@ -158,7 +158,7 @@ export class EvalService implements EvalServiceInterface { appName: string, evalSetId: string, evalCaseId: string, updatedEvalCase: EvalCase) { const url = this.apiServerDomain + - `/apps/${appName}/eval_sets/${evalSetId}/evals/${evalCaseId}`; + `/dev/apps/${appName}/eval_sets/${evalSetId}/evals/${evalCaseId}`; return this.http.put(url, { evalId: evalCaseId, conversation: updatedEvalCase.conversation, @@ -169,12 +169,12 @@ export class EvalService implements EvalServiceInterface { deleteEvalCase(appName: string, evalSetId: string, evalCaseId: string) { const url = this.apiServerDomain + - `/apps/${appName}/eval_sets/${evalSetId}/evals/${evalCaseId}`; + `/dev/apps/${appName}/eval_sets/${evalSetId}/evals/${evalCaseId}`; return this.http.delete(url, {}); } deleteEvalSet(appName: string, evalSetId: string) { - const url = this.apiServerDomain + `/apps/${appName}/eval_sets/${evalSetId}`; + const url = this.apiServerDomain + `/dev/apps/${appName}/eval_sets/${evalSetId}`; return this.http.delete(url, {}); } } diff --git a/src/app/core/services/event.service.spec.ts b/src/app/core/services/event.service.spec.ts index aaa4a634..a64d8a4c 100644 --- a/src/app/core/services/event.service.spec.ts +++ b/src/app/core/services/event.service.spec.ts @@ -50,10 +50,10 @@ describe('EventService', () => { }); describe('getEventTrace', () => { - it('should call GET /debug/trace/{id}', () => { - service.getEventTrace(EVENT_ID).subscribe(); + it('should call GET /dev/apps/{appName}/debug/trace/{id}', () => { + service.getEventTrace('app1', EVENT_ID).subscribe(); const req = httpTestingController.expectOne( - 'http://test.com/debug/trace/trace1', + 'http://test.com/dev/apps/app1/debug/trace/trace1', ); expect(req.request.method).toEqual('GET'); req.flush({}); @@ -61,22 +61,22 @@ describe('EventService', () => { }); describe('getTrace', () => { - it('should call GET /debug/trace/session/{sessionId}', () => { - service.getTrace('session1').subscribe(); + it('should call GET /dev/apps/{appName}/debug/trace/session/{sessionId}', () => { + service.getTrace('app1', 'session1').subscribe(); const req = httpTestingController.expectOne( - 'http://test.com/debug/trace/session/session1', + 'http://test.com/dev/apps/app1/debug/trace/session/session1', ); expect(req.request.method).toEqual('GET'); - req.flush({}); + req.flush([]); }); }); describe('getEvent', () => { - it('should call GET /apps/{appName}/users/{userId}/sessions/{sessionId}/events/{eventId}/graph', + it('should call GET /dev/apps/{appName}/users/{userId}/sessions/{sessionId}/events/{eventId}/graph', () => { service.getEvent('user1', 'app1', 'session1', 'event1').subscribe(); const req = httpTestingController.expectOne( - 'http://test.com/apps/app1/users/user1/sessions/session1/events/event1/graph', + 'http://test.com/dev/apps/app1/users/user1/sessions/session1/events/event1/graph', ); expect(req.request.method).toEqual('GET'); req.flush({}); diff --git a/src/app/core/services/event.service.ts b/src/app/core/services/event.service.ts index d3f8fd0f..2040cdc6 100644 --- a/src/app/core/services/event.service.ts +++ b/src/app/core/services/event.service.ts @@ -19,9 +19,9 @@ import {HttpClient} from '@angular/common/http'; import {Injectable} from '@angular/core'; import {URLUtil} from '../../../utils/url-util'; import {EventIdentifier, EventService as EventServiceInterface} from './interfaces/event'; -import { EventTelemetry, Span } from '../models/Trace'; +import type { Observable } from 'rxjs'; +import { SpanValidator, Span } from '../models/Trace'; import {map} from 'rxjs/operators'; -import { normalizeEventTelemetry, normalizeSpan } from '../../../utils/trace-utils'; @Injectable({ providedIn: 'root', @@ -33,20 +33,23 @@ export class EventService implements EventServiceInterface { /** * Returns the trace data for a given event id. */ - getEventTrace(event: EventIdentifier) { - const url = this.apiServerDomain + `/debug/trace/${event.id!}`; - const eventTelemetry = this.http.get(url); - return eventTelemetry.pipe( - map(eventTelemetry => normalizeEventTelemetry(eventTelemetry)) - ); + getEventTrace(appName: string, event: EventIdentifier): Observable { + const url = this.apiServerDomain + `/dev/apps/${appName}/debug/trace/${event.id!}`; + return this.http.get(url); } - getTrace(sessionId: string) { - const url = this.apiServerDomain + `/debug/trace/session/${sessionId}`; - const spans = this.http.get(url); + getTrace(appName: string, sessionId: string): Observable { + const url = this.apiServerDomain + `/dev/apps/${appName}/debug/trace/session/${sessionId}`; + const spans = this.http.get(url); return spans.pipe( - map(spans => Array.isArray(spans) ? spans.map(normalizeSpan) : spans) - ); + map(spans => { + const result = SpanValidator.array().safeParse(spans); + if (!result.success) { + throw new Error(result.error.issues.map(e => `${e.path.join('.')}: ${e.message}`).join(', ')); + } else { + return result.data; + } + })); } getEvent( @@ -56,7 +59,7 @@ export class EventService implements EventServiceInterface { eventId: string, ) { const url = this.apiServerDomain + - `/apps/${appName}/users/${userId}/sessions/${sessionId}/events/${ + `/dev/apps/${appName}/users/${userId}/sessions/${sessionId}/events/${ eventId}/graph`; return this.http.get<{dotSrc?: string}>(url); } diff --git a/src/app/core/services/interfaces/agent.ts b/src/app/core/services/interfaces/agent.ts index 424c6024..8555cfe9 100644 --- a/src/app/core/services/interfaces/agent.ts +++ b/src/app/core/services/interfaces/agent.ts @@ -50,11 +50,11 @@ export abstract class AgentService { console.warn('unimplemented'); return undefined; } - agentBuildTmp(req: any): Observable { + agentBuildTmp(appName: string, req: any): Observable { console.warn('unimplemented'); return of(false); } - agentBuild(req: any): Observable { + agentBuild(appName: string, req: any): Observable { console.warn('unimplemented'); return of(false); } diff --git a/src/app/core/services/interfaces/event.ts b/src/app/core/services/interfaces/event.ts index 74a82327..dc3f5a0c 100644 --- a/src/app/core/services/interfaces/event.ts +++ b/src/app/core/services/interfaces/event.ts @@ -18,6 +18,7 @@ import {Event} from '../../models/types'; import {InjectionToken} from '@angular/core'; import {Observable} from 'rxjs'; +import type { Span } from '../../models/Trace'; export const EVENT_SERVICE = new InjectionToken('EventService'); @@ -32,8 +33,8 @@ export type EventIdentifier = Pick; * Service to provide methods to handle events. */ export declare abstract class EventService { - abstract getEventTrace(event: EventIdentifier): Observable; - abstract getTrace(sessionId: string): Observable; + abstract getEventTrace(appName: string, event: EventIdentifier): Observable; + abstract getTrace(appName: string, sessionId: string): Observable; abstract getEvent( userId: string, appName: string, diff --git a/src/app/core/services/tests.service.ts b/src/app/core/services/tests.service.ts index 473e2e6a..7c347951 100644 --- a/src/app/core/services/tests.service.ts +++ b/src/app/core/services/tests.service.ts @@ -30,27 +30,27 @@ export class TestsService { apiServerDomain = URLUtil.getApiServerBaseUrl(); listTests(appName: string): Observable { - const url = `${this.apiServerDomain}/dev/${appName}/tests`; + const url = `${this.apiServerDomain}/dev/apps/${appName}/tests`; return this.http.get(url); } getTest(appName: string, testName: string): Observable { - const url = `${this.apiServerDomain}/dev/${appName}/tests/${testName}`; + const url = `${this.apiServerDomain}/dev/apps/${appName}/tests/${testName}`; return this.http.get(url); } createTest(appName: string, testName: string, sessionData: any): Observable { - const url = `${this.apiServerDomain}/dev/${appName}/tests/${testName}`; + const url = `${this.apiServerDomain}/dev/apps/${appName}/tests/${testName}`; return this.http.put(url, { session_data: sessionData }); } deleteTest(appName: string, testName: string): Observable { - const url = `${this.apiServerDomain}/dev/${appName}/tests/${testName}`; + const url = `${this.apiServerDomain}/dev/apps/${appName}/tests/${testName}`; return this.http.delete(url); } rebuildTests(appName: string, testName?: string): Observable { - let url = `${this.apiServerDomain}/dev/${appName}/tests/rebuild`; + let url = `${this.apiServerDomain}/dev/apps/${appName}/tests/rebuild`; if (testName) { url += `?test_name=${testName}`; } @@ -58,7 +58,7 @@ export class TestsService { } runTests(appName: string, testName?: string): Observable { - let url = `${this.apiServerDomain}/dev/${appName}/tests/run`; + let url = `${this.apiServerDomain}/dev/apps/${appName}/tests/run`; if (testName) { url += `?test_name=${testName}`; } diff --git a/src/app/core/services/trace.service.spec.ts b/src/app/core/services/trace.service.spec.ts index a8e55445..d1f90146 100644 --- a/src/app/core/services/trace.service.spec.ts +++ b/src/app/core/services/trace.service.spec.ts @@ -48,7 +48,8 @@ describe('TraceService', () => { parent_span_id: undefined, start_time: 0, end_time: 0, - attributes: {}, + rawAttributesUseThisFieldOnlyForDisplay: {}, + rawSpanUseThisFieldOnlyForDisplay: {}, }; service.selectedRow(span); const selectedSpan = await firstValueFrom(service.selectedTraceRow$); diff --git a/src/assets/config/runtime-config.json b/src/assets/config/runtime-config.json index c6732406..71ca9149 100644 --- a/src/assets/config/runtime-config.json +++ b/src/assets/config/runtime-config.json @@ -1,3 +1,3 @@ { - "backendUrl": "http://localhost:8000" + "backendUrl": "http://127.0.0.1:8000" } \ No newline at end of file diff --git a/src/styles.scss b/src/styles.scss index b6708641..e06e16b6 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -158,32 +158,6 @@ markdown code { background-color: var(--mat-sys-surface-container-high) !important; } -// ngx-json-viewer custom colors -ngx-json-viewer { - .segment-key { - color: var(--mat-sys-primary) !important; - } - - .segment-value { - color: inherit; - } - - .segment-type-string { - color: var(--mat-sys-tertiary) !important; - } - - .segment-type-number { - color: var(--mat-sys-error) !important; - } - - .segment-type-boolean { - color: var(--mat-sys-secondary) !important; - } - - .segment-type-null { - color: var(--mat-sys-outline) !important; - } -} .user-avatar-menu { .mat-mdc-menu-content { diff --git a/src/utils/trace-utils.spec.ts b/src/utils/trace-utils.spec.ts deleted file mode 100644 index 0bad84f1..00000000 --- a/src/utils/trace-utils.spec.ts +++ /dev/null @@ -1,202 +0,0 @@ -/** - * @license - * Copyright 2026 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. - */ - -// 1p-ONLY-IMPORTS: import {beforeEach, describe, expect, it} -import { normalizeSpan, normalizeEventTelemetry } from './trace-utils'; -import { Span, EventTelemetry, Log } from '../app/core/models/Trace'; - -describe('trace-utils', () => { - describe('normalizeSpan', () => { - it('should keep existing llm_request and llm_response', () => { - const span: Span = { - name: 'test', - start_time: 0, - end_time: 100, - span_id: 's1', - trace_id: 't1', - attributes: { - 'gcp.vertex.agent.llm_request': 'existing request', - 'gcp.vertex.agent.llm_response': 'existing response', - } - }; - const normalized = normalizeSpan(span); - expect(normalized.attributes['gcp.vertex.agent.llm_request']).toBe('existing request'); - expect(normalized.attributes['gcp.vertex.agent.llm_response']).toBe('existing response'); - }); - - it('should extract input and output for execute_tool spans from attributes', () => { - const span: Span = { - name: 'execute_tool_something', - start_time: 0, - end_time: 100, - span_id: 's1', - trace_id: 't1', - attributes: { - 'gcp.vertex.agent.tool_call_args': '{"arg": "val"}', - 'gcp.vertex.agent.tool_response': '{"result": "ok"}' - } - }; - const normalized = normalizeSpan(span); - expect(normalized.attributes['gcp.vertex.agent.llm_request']).toBe('{"arg": "val"}'); - expect(normalized.attributes['gcp.vertex.agent.llm_response']).toBe('{"result": "ok"}'); - }); - - it('should extract input from logs for non-execute_tool spans', () => { - const logs: Log[] = [ - { - event_name: 'gen_ai.system.message', - body: JSON.stringify({ role: 'system', content: 'system instructions' }), - trace_id: 't1', - span_id: 's1' - }, - { - event_name: 'gen_ai.user.message', - body: JSON.stringify({ content: { parts: [{ text: 'hello' }] } }), - trace_id: 't1', - span_id: 's1' - } - ]; - const span: Span = { - name: 'generate_content', - start_time: 0, - end_time: 100, - span_id: 's1', - trace_id: 't1', - logs: logs, - attributes: {} - }; - const normalized = normalizeSpan(span); - const userMessage = JSON.parse(normalized.attributes['gcp.vertex.agent.llm_request']!); - expect(userMessage).toEqual({ contents: [{ role: 'user', parts: [{ text: 'hello' }] }] }); - }); - - it('should ignore user messages with function responses', () => { - const logs: Log[] = [{ - event_name: 'gen_ai.user.message', - body: JSON.stringify({ - content: {parts: [{functionResponse: {name: 'foo', response: {}}}]} - }), - trace_id: 't1', - span_id: 's1' - }]; - const span: Span = { - name: 'generate_content', - start_time: 0, - end_time: 100, - span_id: 's1', - trace_id: 't1', - logs: logs, - attributes: {} - }; - const normalized = normalizeSpan(span); - expect('gcp.vertex.agent.llm_request' in normalized.attributes) - .toBeFalse(); - }); - - it('should extract output from logs for non-execute_tool spans', () => { - const logs: Log[] = [ - { - event_name: 'gen_ai.choice', - body: 'model response', - trace_id: 't1', - span_id: 's1' - } - ]; - const span: Span = { - name: 'generate_content', - start_time: 0, - end_time: 100, - span_id: 's1', - trace_id: 't1', - logs: logs, - attributes: {} - }; - const normalized = normalizeSpan(span); - expect(normalized.attributes['gcp.vertex.agent.llm_response']).toBe('model response'); - }); - - it('should handle missing logs gracefully', () => { - const span: Span = { - name: 'generate_content', - start_time: 0, - end_time: 100, - span_id: 's1', - trace_id: 't1', - attributes: {} - }; - const normalized = normalizeSpan(span); - expect('gcp.vertex.agent.llm_request' in normalized.attributes) - .toBeFalse(); - expect('gcp.vertex.agent.llm_response' in normalized.attributes) - .toBeFalse(); - }); - - it('should handle missing attributes gracefully', () => { - const span: Span = { - name: 'generate_content', - start_time: 0, - end_time: 100, - span_id: 's1', - trace_id: 't1', - logs: [] - }; - const normalized = normalizeSpan(span); - expect('gcp.vertex.agent.llm_request' in normalized.attributes) - .toBeFalse(); - expect('gcp.vertex.agent.llm_response' in normalized.attributes) - .toBeFalse(); - }); - }); - - describe('normalizeEventTelemetry', () => { - it('should keep existing llm_request and llm_response', () => { - const telemetry: EventTelemetry = { - 'gcp.vertex.agent.llm_request': 'existing request', - 'gcp.vertex.agent.llm_response': 'existing response', - }; - const normalized = normalizeEventTelemetry(telemetry); - expect(normalized['gcp.vertex.agent.llm_request']).toBe('existing request'); - expect(normalized['gcp.vertex.agent.llm_response']).toBe('existing response'); - }); - - it('should extract input and output from telemetry properties if present', () => { - const telemetry: any = { - 'gcp.vertex.agent.tool_call_args': '{"arg": "val"}', - 'gcp.vertex.agent.tool_response': '{"result": "ok"}' - }; - const normalized = normalizeEventTelemetry(telemetry); - expect(normalized['gcp.vertex.agent.llm_request']).toBe('{"arg": "val"}'); - expect(normalized['gcp.vertex.agent.llm_response']).toBe('{"result": "ok"}'); - }); - - it('should extract from logs if attributes are missing', () => { - const logs: Log[] = [ - { - event_name: 'gen_ai.choice', - body: 'log response', - trace_id: 't1', - span_id: 's1' - } - ]; - const telemetry: EventTelemetry = { - logs: logs - }; - const normalized = normalizeEventTelemetry(telemetry); - expect(normalized['gcp.vertex.agent.llm_response']).toBe('log response'); - }); - }); -}); diff --git a/src/utils/trace-utils.ts b/src/utils/trace-utils.ts deleted file mode 100644 index c457501a..00000000 --- a/src/utils/trace-utils.ts +++ /dev/null @@ -1,204 +0,0 @@ -/** - * @license - * Copyright 2026 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 { EventTelemetry, Log, Span } from "../app/core/models/Trace"; - -const GCP_VERTEX_AGENT_TOOL_CALL_ARGS = 'gcp.vertex.agent.tool_call_args'; -const GCP_VERTEX_AGENT_TOOL_RESPONSE = 'gcp.vertex.agent.tool_response'; - -const GCP_VERTEX_AGENT_LLM_REQUEST = 'gcp.vertex.agent.llm_request' -const GCP_VERTEX_AGENT_LLM_RESPONSE = 'gcp.vertex.agent.llm_response' - -const EXECUTE_TOOL = 'execute_tool'; -const GENERATE_CONTENT = 'generate_content'; - -const CONTENT = 'content'; -const PARTS = 'parts'; -const FUNCTION_RESPONSE = 'functionResponse'; - -// Normalizes span such that input/output ends up in the same place for: -// - semconv `generate_content` spans -// - semconv `execute_tool` spans -// - legacy `call_llm` spans -export const normalizeSpan = (span: Span): Span => { - const normalized = { - ...span, - attributes: { - ...span.attributes, - } - }; - const request = span?.attributes?.[GCP_VERTEX_AGENT_LLM_REQUEST] ?? - extractInputFromSpan(span) - const response = span?.attributes?.[GCP_VERTEX_AGENT_LLM_RESPONSE] ?? - extractOutputFromSpan(span) - if (request !== undefined) { - normalized.attributes[GCP_VERTEX_AGENT_LLM_REQUEST] = request - } - if (response !== undefined) { - normalized.attributes[GCP_VERTEX_AGENT_LLM_RESPONSE] = response - } - return normalized; -}; - -const extractInputFromSpan = (span: Span): {[key: string]: any} | string | undefined => { - if (span.name.startsWith(EXECUTE_TOOL)) { - return span.attributes?.[GCP_VERTEX_AGENT_TOOL_CALL_ARGS]; - } else if (span.name.startsWith(GENERATE_CONTENT)) { - // Note, here we only extract the user message part of the input. - // This is because later on, UI expects this to be in the google-genai content format. - // Ideally it would be unified between here and extractInputFromLogs. - return extractUserMessageFromSpan(span.logs); - } else { - return undefined; - } -}; - -const extractInputFromLogs = (logs?: Log[]): string => { - const systemMessage = extractSystemMessageFromLogs(logs); - const userMessage = extractUserMessageFromSpan(logs); - return JSON.stringify({ - system_message: systemMessage, - user_message: tryJSONParse(userMessage), - }); -}; - -const extractUserMessageFromSpan = (logs?: Log[]): string | undefined => { - if (!logs) { - return undefined; - } - const userMessageLog = logs.reverse().find(isUserMessageLog); - if (!userMessageLog) { - return undefined; - } - const userMessage = typeof userMessageLog.body === 'string' ? tryJSONParse(userMessageLog.body) : userMessageLog.body - if (typeof userMessage === 'string') { - return userMessage - } - // Modifying the object, to fix processing further down. - // Modifying login in src/app/components/trace-tab/trace-tab.component.ts would be more ideal. - userMessage['content']['role'] = 'user'; - userMessage['contents'] = [userMessage['content']] - delete userMessage['content']; - return JSON.stringify(userMessage); -}; - -const extractSystemMessageFromLogs = (logs?: Log[]): {[key: string]: any} | string | undefined => { - if (!logs) { - return undefined; - } - const systemMessageLog = logs.reverse().find(log => log.event_name === 'gen_ai.system.message') - if (!systemMessageLog) { - return undefined; - } - if (typeof systemMessageLog.body === 'string') { - return tryJSONParse(systemMessageLog.body); - } else { - return systemMessageLog.body; - } -}; - -const isUserMessageLog = (log: Log): boolean => { - if (log.event_name !== 'gen_ai.user.message') { - return false; - } - - try { - const body = typeof log.body === 'string' ? JSON.parse(log.body) : log.body; - const parts = (body as any)[CONTENT]?.[PARTS]; - if (!Array.isArray(parts)) { - return false; - } - return parts.every(part => !part[FUNCTION_RESPONSE]); - } - catch (e) { - return false; - } -}; - -const extractOutputFromSpan = (span: Span): string | undefined => { - if (span.name.startsWith(EXECUTE_TOOL)) { - return span.attributes?.[GCP_VERTEX_AGENT_TOOL_RESPONSE]; - } else if (span.name.startsWith(GENERATE_CONTENT)) { - return extractOutputFromLogs(span.logs); - } else { - return undefined; - } -}; - -const extractOutputFromLogs = (logs?: Log[]): string | undefined => { - if (!logs) { - return undefined; - } - const genaiChoiceLog = logs.reverse().find(log => log.event_name === 'gen_ai.choice'); - if (!genaiChoiceLog) { - return undefined; - } - return stringFromLogBody(genaiChoiceLog); -}; - -const tryJSONParse = (maybeJSON: any): any | string => { - try { - return JSON.parse(maybeJSON); - } catch (e) { - return maybeJSON; - } -}; - -const stringFromLogBody = (log: Log): string => { - return typeof log.body === 'string' ? log.body : JSON.stringify(log.body); -}; - -// Normalizes event telemetry such that event input/output ends up in the same place for: -// - semconv `generate_content` spans -// - semconv `execute_tool` spans -// - legacy `call_llm` spans -export const normalizeEventTelemetry = (telemetry: EventTelemetry) => { - const request = - telemetry[GCP_VERTEX_AGENT_LLM_REQUEST] ?? extractEventInput(telemetry) - const response = - telemetry[GCP_VERTEX_AGENT_LLM_RESPONSE] ?? extractEventOutput(telemetry) - const normalizedEvent = { - ...telemetry, - }; - if (request !== undefined) { - normalizedEvent[GCP_VERTEX_AGENT_LLM_REQUEST] = request; - } - if (response !== undefined) { - normalizedEvent[GCP_VERTEX_AGENT_LLM_RESPONSE] = response; - } - return normalizedEvent; -}; - -const extractEventInput = (telemetry: EventTelemetry): string | undefined => { - if (GCP_VERTEX_AGENT_TOOL_CALL_ARGS in telemetry) { - return `${telemetry[GCP_VERTEX_AGENT_TOOL_CALL_ARGS]}`; - } - if (!telemetry.logs) { - return undefined; - } - return extractInputFromLogs(telemetry.logs); -}; - -const extractEventOutput = (telemetry: EventTelemetry): string | undefined => { - if (GCP_VERTEX_AGENT_TOOL_RESPONSE in telemetry) { - return `${telemetry[GCP_VERTEX_AGENT_TOOL_RESPONSE]}`; - } - if (!telemetry.logs) { - return undefined; - } - return extractOutputFromLogs(telemetry.logs); -}