@memberjunction/ng-core-entity-forms 2.53.0 → 2.54.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/lib/custom/AIAgents/ai-agent-form.component.d.ts +20 -0
- package/dist/lib/custom/AIAgents/ai-agent-form.component.d.ts.map +1 -1
- package/dist/lib/custom/AIAgents/ai-agent-form.component.js +188 -40
- package/dist/lib/custom/AIAgents/ai-agent-form.component.js.map +1 -1
- package/dist/lib/custom/AIPromptRuns/ai-prompt-run-form.component.js +5 -7
- package/dist/lib/custom/AIPromptRuns/ai-prompt-run-form.component.js.map +1 -1
- package/dist/lib/custom/Actions/action-execution-log-form.component.d.ts +1 -0
- package/dist/lib/custom/Actions/action-execution-log-form.component.d.ts.map +1 -1
- package/dist/lib/custom/Actions/action-execution-log-form.component.js +212 -293
- package/dist/lib/custom/Actions/action-execution-log-form.component.js.map +1 -1
- package/dist/lib/custom/Actions/action-form.component.js +6 -8
- package/dist/lib/custom/Actions/action-form.component.js.map +1 -1
- package/dist/lib/custom/ai-agent-run/ai-agent-run-step-node.component.d.ts +25 -0
- package/dist/lib/custom/ai-agent-run/ai-agent-run-step-node.component.d.ts.map +1 -0
- package/dist/lib/custom/ai-agent-run/ai-agent-run-step-node.component.js +261 -0
- package/dist/lib/custom/ai-agent-run/ai-agent-run-step-node.component.js.map +1 -0
- package/dist/lib/custom/ai-agent-run/ai-agent-run-timeline.component.d.ts +73 -0
- package/dist/lib/custom/ai-agent-run/ai-agent-run-timeline.component.d.ts.map +1 -0
- package/dist/lib/custom/ai-agent-run/ai-agent-run-timeline.component.js +510 -0
- package/dist/lib/custom/ai-agent-run/ai-agent-run-timeline.component.js.map +1 -0
- package/dist/lib/custom/ai-agent-run/ai-agent-run.component.d.ts +40 -0
- package/dist/lib/custom/ai-agent-run/ai-agent-run.component.d.ts.map +1 -0
- package/dist/lib/custom/ai-agent-run/ai-agent-run.component.js +490 -0
- package/dist/lib/custom/ai-agent-run/ai-agent-run.component.js.map +1 -0
- package/dist/lib/custom/ai-test-harness/agent-execution-monitor.component.d.ts +31 -2
- package/dist/lib/custom/ai-test-harness/agent-execution-monitor.component.d.ts.map +1 -1
- package/dist/lib/custom/ai-test-harness/agent-execution-monitor.component.js +167 -65
- package/dist/lib/custom/ai-test-harness/agent-execution-monitor.component.js.map +1 -1
- package/dist/lib/custom/ai-test-harness/ai-test-harness.component.d.ts +35 -2
- package/dist/lib/custom/ai-test-harness/ai-test-harness.component.d.ts.map +1 -1
- package/dist/lib/custom/ai-test-harness/ai-test-harness.component.js +423 -247
- package/dist/lib/custom/ai-test-harness/ai-test-harness.component.js.map +1 -1
- package/dist/lib/custom/custom-forms.module.d.ts +25 -21
- package/dist/lib/custom/custom-forms.module.d.ts.map +1 -1
- package/dist/lib/custom/custom-forms.module.js +25 -2
- package/dist/lib/custom/custom-forms.module.js.map +1 -1
- package/dist/lib/generated/Entities/AIAgent/aiagent.form.component.js +10 -10
- package/dist/lib/generated/Entities/AIAgent/aiagent.form.component.js.map +1 -1
- package/dist/lib/generated/Entities/AIAgentRun/aiagentrun.form.component.js +7 -9
- package/dist/lib/generated/Entities/AIAgentRun/aiagentrun.form.component.js.map +1 -1
- package/dist/lib/generated/Entities/AIAgentRunStep/aiagentrunstep.form.component.js +3 -5
- package/dist/lib/generated/Entities/AIAgentRunStep/aiagentrunstep.form.component.js.map +1 -1
- package/dist/lib/generated/Entities/AIAgentRunStep/sections/details.component.d.ts.map +1 -1
- package/dist/lib/generated/Entities/AIAgentRunStep/sections/details.component.js +13 -4
- package/dist/lib/generated/Entities/AIAgentRunStep/sections/details.component.js.map +1 -1
- package/dist/lib/generated/Entities/AIAgentType/aiagenttype.form.component.js +5 -7
- package/dist/lib/generated/Entities/AIAgentType/aiagenttype.form.component.js.map +1 -1
- package/dist/lib/generated/Entities/AIModel/aimodel.form.component.js +9 -9
- package/dist/lib/generated/Entities/AIModel/aimodel.form.component.js.map +1 -1
- package/dist/lib/generated/Entities/AIModelCost/aimodelcost.form.component.js +3 -5
- package/dist/lib/generated/Entities/AIModelCost/aimodelcost.form.component.js.map +1 -1
- package/dist/lib/generated/Entities/AIModelPriceType/aimodelpricetype.form.component.js +5 -7
- package/dist/lib/generated/Entities/AIModelPriceType/aimodelpricetype.form.component.js.map +1 -1
- package/dist/lib/generated/Entities/AIModelPriceUnitType/aimodelpriceunittype.form.component.js +5 -7
- package/dist/lib/generated/Entities/AIModelPriceUnitType/aimodelpriceunittype.form.component.js.map +1 -1
- package/dist/lib/generated/Entities/AIPrompt/aiprompt.form.component.js +13 -13
- package/dist/lib/generated/Entities/AIPrompt/aiprompt.form.component.js.map +1 -1
- package/dist/lib/generated/Entities/AIVendor/aivendor.form.component.js +9 -9
- package/dist/lib/generated/Entities/AIVendor/aivendor.form.component.js.map +1 -1
- package/dist/lib/generated/Entities/Action/action.form.component.js +5 -5
- package/dist/lib/generated/Entities/Action/action.form.component.js.map +1 -1
- package/dist/lib/generated/Entities/ActionAuthorization/actionauthorization.form.component.js +1 -1
- package/dist/lib/generated/Entities/ActionAuthorization/actionauthorization.form.component.js.map +1 -1
- package/dist/lib/generated/Entities/ActionContext/actioncontext.form.component.js +1 -1
- package/dist/lib/generated/Entities/ActionContext/actioncontext.form.component.js.map +1 -1
- package/dist/lib/generated/Entities/Conversation/conversation.form.component.js +5 -5
- package/dist/lib/generated/Entities/Conversation/conversation.form.component.js.map +1 -1
- package/dist/lib/generated/Entities/TemplateContent/templatecontent.form.component.js +4 -4
- package/dist/lib/generated/Entities/TemplateContent/templatecontent.form.component.js.map +1 -1
- package/dist/lib/generated/Entities/User/user.form.component.js +5 -5
- package/dist/lib/generated/Entities/User/user.form.component.js.map +1 -1
- package/package.json +12 -12
|
@@ -1,5 +1,15 @@
|
|
|
1
|
-
import { OnChanges, SimpleChanges, OnDestroy, ElementRef, AfterViewInit, ChangeDetectorRef, ViewContainerRef } from '@angular/core';
|
|
1
|
+
import { OnChanges, SimpleChanges, OnDestroy, ElementRef, AfterViewInit, ChangeDetectorRef, ViewContainerRef, EventEmitter } from '@angular/core';
|
|
2
2
|
import * as i0 from "@angular/core";
|
|
3
|
+
/**
|
|
4
|
+
* Progress message with display mode
|
|
5
|
+
*/
|
|
6
|
+
export interface ProgressMessage {
|
|
7
|
+
id: string;
|
|
8
|
+
message: string;
|
|
9
|
+
timestamp: Date;
|
|
10
|
+
displayMode: 'live' | 'historical' | 'both';
|
|
11
|
+
metadata?: Record<string, unknown>;
|
|
12
|
+
}
|
|
3
13
|
/**
|
|
4
14
|
* Represents a node in the execution tree with all necessary display information
|
|
5
15
|
*/
|
|
@@ -23,6 +33,7 @@ export interface ExecutionTreeNode {
|
|
|
23
33
|
detailsMarkdown?: string;
|
|
24
34
|
detailsExpanded?: boolean;
|
|
25
35
|
promptCount?: number;
|
|
36
|
+
displayMode?: 'live' | 'historical' | 'both';
|
|
26
37
|
}
|
|
27
38
|
/**
|
|
28
39
|
* Mode for the execution monitor component
|
|
@@ -62,6 +73,12 @@ export declare class AgentExecutionMonitorComponent implements OnChanges, OnDest
|
|
|
62
73
|
mode: ExecutionMonitorMode;
|
|
63
74
|
executionData: any;
|
|
64
75
|
autoExpand: boolean;
|
|
76
|
+
runId: string | null;
|
|
77
|
+
runType: 'agent' | 'prompt';
|
|
78
|
+
viewRunClick: EventEmitter<{
|
|
79
|
+
runId: string;
|
|
80
|
+
runType: 'agent' | 'prompt';
|
|
81
|
+
}>;
|
|
65
82
|
executionTreeContainer: ElementRef<HTMLDivElement>;
|
|
66
83
|
executionNodesContainer: ViewContainerRef;
|
|
67
84
|
executionTree: ExecutionTreeNode[];
|
|
@@ -214,6 +231,10 @@ export declare class AgentExecutionMonitorComponent implements OnChanges, OnDest
|
|
|
214
231
|
* Find parent node based on depth
|
|
215
232
|
*/
|
|
216
233
|
private findParentNode;
|
|
234
|
+
/**
|
|
235
|
+
* Filter nodes based on display mode
|
|
236
|
+
*/
|
|
237
|
+
private filterNodesForMode;
|
|
217
238
|
/**
|
|
218
239
|
* Build a map of nodes by ID for quick lookup
|
|
219
240
|
*/
|
|
@@ -234,11 +255,19 @@ export declare class AgentExecutionMonitorComponent implements OnChanges, OnDest
|
|
|
234
255
|
* Restore expanded state of all nodes
|
|
235
256
|
*/
|
|
236
257
|
private restoreExpandedState;
|
|
258
|
+
/**
|
|
259
|
+
* Check if execution is complete
|
|
260
|
+
*/
|
|
261
|
+
isExecutionComplete(): boolean;
|
|
262
|
+
/**
|
|
263
|
+
* Handle view run button click
|
|
264
|
+
*/
|
|
265
|
+
onViewRunClick(): void;
|
|
237
266
|
/**
|
|
238
267
|
* Append a node to its parent based on depth
|
|
239
268
|
*/
|
|
240
269
|
private appendToParent;
|
|
241
270
|
static ɵfac: i0.ɵɵFactoryDeclaration<AgentExecutionMonitorComponent, never>;
|
|
242
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<AgentExecutionMonitorComponent, "mj-agent-execution-monitor", never, { "mode": { "alias": "mode"; "required": false; }; "executionData": { "alias": "executionData"; "required": false; }; "autoExpand": { "alias": "autoExpand"; "required": false; }; }, {}, never, never, true, never>;
|
|
271
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<AgentExecutionMonitorComponent, "mj-agent-execution-monitor", never, { "mode": { "alias": "mode"; "required": false; }; "executionData": { "alias": "executionData"; "required": false; }; "autoExpand": { "alias": "autoExpand"; "required": false; }; "runId": { "alias": "runId"; "required": false; }; "runType": { "alias": "runType"; "required": false; }; }, { "viewRunClick": "viewRunClick"; }, never, never, true, never>;
|
|
243
272
|
}
|
|
244
273
|
//# sourceMappingURL=agent-execution-monitor.component.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"agent-execution-monitor.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/custom/ai-test-harness/agent-execution-monitor.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,SAAS,EAAE,aAAa,EAAE,SAAS,EAAa,UAAU,EAAE,aAAa,EAAE,iBAAiB,EAA2B,gBAAgB,
|
|
1
|
+
{"version":3,"file":"agent-execution-monitor.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/custom/ai-test-harness/agent-execution-monitor.component.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Component, Input, ViewChild, ChangeDetectionStrategy, ViewContainerRef } from '@angular/core';
|
|
1
|
+
import { Component, Input, ViewChild, ChangeDetectionStrategy, ViewContainerRef, Output, EventEmitter } from '@angular/core';
|
|
2
2
|
import { CommonModule } from '@angular/common';
|
|
3
3
|
import { Subject, interval } from 'rxjs';
|
|
4
4
|
import { takeUntil } from 'rxjs/operators';
|
|
@@ -8,18 +8,18 @@ const _c0 = ["executionTreeContainer"];
|
|
|
8
8
|
const _c1 = ["executionNodesContainer"];
|
|
9
9
|
function AgentExecutionMonitorComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
|
|
10
10
|
i0.ɵɵelementStart(0, "span", 6);
|
|
11
|
-
i0.ɵɵelement(1, "span",
|
|
11
|
+
i0.ɵɵelement(1, "span", 19);
|
|
12
12
|
i0.ɵɵtext(2, " LIVE ");
|
|
13
13
|
i0.ɵɵelementEnd();
|
|
14
14
|
} }
|
|
15
15
|
function AgentExecutionMonitorComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
|
|
16
|
-
i0.ɵɵelementStart(0, "div", 7)(1, "span",
|
|
16
|
+
i0.ɵɵelementStart(0, "div", 7)(1, "span", 20);
|
|
17
17
|
i0.ɵɵtext(2, "Current:");
|
|
18
18
|
i0.ɵɵelementEnd();
|
|
19
|
-
i0.ɵɵelementStart(3, "span",
|
|
19
|
+
i0.ɵɵelementStart(3, "span", 21);
|
|
20
20
|
i0.ɵɵtext(4);
|
|
21
21
|
i0.ɵɵelementEnd();
|
|
22
|
-
i0.ɵɵelementStart(5, "span",
|
|
22
|
+
i0.ɵɵelementStart(5, "span", 22);
|
|
23
23
|
i0.ɵɵtext(6);
|
|
24
24
|
i0.ɵɵelementEnd()();
|
|
25
25
|
} if (rf & 2) {
|
|
@@ -29,15 +29,27 @@ function AgentExecutionMonitorComponent_Conditional_7_Template(rf, ctx) { if (rf
|
|
|
29
29
|
i0.ɵɵadvance(2);
|
|
30
30
|
i0.ɵɵtextInterpolate(ctx_r1.currentStep.name);
|
|
31
31
|
} }
|
|
32
|
-
function
|
|
33
|
-
i0.ɵɵ
|
|
34
|
-
i0.ɵɵ
|
|
32
|
+
function AgentExecutionMonitorComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
|
|
33
|
+
const _r3 = i0.ɵɵgetCurrentView();
|
|
34
|
+
i0.ɵɵelementStart(0, "button", 23);
|
|
35
|
+
i0.ɵɵlistener("click", function AgentExecutionMonitorComponent_Conditional_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onViewRunClick()); });
|
|
36
|
+
i0.ɵɵelement(1, "i", 24);
|
|
37
|
+
i0.ɵɵtext(2);
|
|
38
|
+
i0.ɵɵelementEnd();
|
|
39
|
+
} if (rf & 2) {
|
|
40
|
+
const ctx_r1 = i0.ɵɵnextContext();
|
|
41
|
+
i0.ɵɵadvance(2);
|
|
42
|
+
i0.ɵɵtextInterpolate1(" View ", ctx_r1.runType === "agent" ? "Agent" : "Prompt", " Run ");
|
|
43
|
+
} }
|
|
44
|
+
function AgentExecutionMonitorComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
|
|
45
|
+
i0.ɵɵelementStart(0, "div", 11);
|
|
46
|
+
i0.ɵɵelement(1, "i", 25);
|
|
35
47
|
i0.ɵɵelementStart(2, "p");
|
|
36
48
|
i0.ɵɵtext(3, "Waiting for execution to begin...");
|
|
37
49
|
i0.ɵɵelementEnd()();
|
|
38
50
|
} }
|
|
39
|
-
function
|
|
40
|
-
i0.ɵɵelementStart(0, "span",
|
|
51
|
+
function AgentExecutionMonitorComponent_Conditional_21_Template(rf, ctx) { if (rf & 1) {
|
|
52
|
+
i0.ɵɵelementStart(0, "span", 17);
|
|
41
53
|
i0.ɵɵtext(1);
|
|
42
54
|
i0.ɵɵelementEnd();
|
|
43
55
|
} if (rf & 2) {
|
|
@@ -45,11 +57,11 @@ function AgentExecutionMonitorComponent_Conditional_20_Template(rf, ctx) { if (r
|
|
|
45
57
|
i0.ɵɵadvance();
|
|
46
58
|
i0.ɵɵtextInterpolate1("(", ctx_r1.stats.failedSteps, " failed)");
|
|
47
59
|
} }
|
|
48
|
-
function
|
|
49
|
-
i0.ɵɵelementStart(0, "div",
|
|
60
|
+
function AgentExecutionMonitorComponent_Conditional_37_Template(rf, ctx) { if (rf & 1) {
|
|
61
|
+
i0.ɵɵelementStart(0, "div", 14)(1, "span", 15);
|
|
50
62
|
i0.ɵɵtext(2, "Duration");
|
|
51
63
|
i0.ɵɵelementEnd();
|
|
52
|
-
i0.ɵɵelementStart(3, "span",
|
|
64
|
+
i0.ɵɵelementStart(3, "span", 16);
|
|
53
65
|
i0.ɵɵtext(4);
|
|
54
66
|
i0.ɵɵelementEnd()();
|
|
55
67
|
} if (rf & 2) {
|
|
@@ -57,19 +69,19 @@ function AgentExecutionMonitorComponent_Conditional_36_Template(rf, ctx) { if (r
|
|
|
57
69
|
i0.ɵɵadvance(4);
|
|
58
70
|
i0.ɵɵtextInterpolate(ctx_r1.formatDuration(ctx_r1.stats.totalDuration));
|
|
59
71
|
} }
|
|
60
|
-
function
|
|
61
|
-
i0.ɵɵelementStart(0, "span",
|
|
72
|
+
function AgentExecutionMonitorComponent_Conditional_38_For_2_Template(rf, ctx) { if (rf & 1) {
|
|
73
|
+
i0.ɵɵelementStart(0, "span", 26);
|
|
62
74
|
i0.ɵɵtext(1);
|
|
63
75
|
i0.ɵɵelementEnd();
|
|
64
76
|
} if (rf & 2) {
|
|
65
|
-
const
|
|
77
|
+
const type_r4 = ctx.$implicit;
|
|
66
78
|
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
67
79
|
i0.ɵɵadvance();
|
|
68
|
-
i0.ɵɵtextInterpolate2(" ", ctx_r1.stats.stepsByType[
|
|
80
|
+
i0.ɵɵtextInterpolate2(" ", ctx_r1.stats.stepsByType[type_r4], " ", type_r4, " ");
|
|
69
81
|
} }
|
|
70
|
-
function
|
|
71
|
-
i0.ɵɵelementStart(0, "div",
|
|
72
|
-
i0.ɵɵrepeaterCreate(1,
|
|
82
|
+
function AgentExecutionMonitorComponent_Conditional_38_Template(rf, ctx) { if (rf & 1) {
|
|
83
|
+
i0.ɵɵelementStart(0, "div", 18);
|
|
84
|
+
i0.ɵɵrepeaterCreate(1, AgentExecutionMonitorComponent_Conditional_38_For_2_Template, 2, 2, "span", 26, i0.ɵɵrepeaterTrackByIdentity);
|
|
73
85
|
i0.ɵɵelementEnd();
|
|
74
86
|
} if (rf & 2) {
|
|
75
87
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
@@ -98,6 +110,9 @@ export class AgentExecutionMonitorComponent {
|
|
|
98
110
|
this.mode = 'historical';
|
|
99
111
|
this.executionData = null; // Can be live updates or historical data
|
|
100
112
|
this.autoExpand = true; // Auto-expand nodes in live mode
|
|
113
|
+
this.runId = null; // ID of the run (agent or prompt)
|
|
114
|
+
this.runType = 'agent'; // Type of run
|
|
115
|
+
this.viewRunClick = new EventEmitter();
|
|
101
116
|
this.executionTree = [];
|
|
102
117
|
this.currentStep = null;
|
|
103
118
|
// Track component references for dynamic components
|
|
@@ -228,17 +243,16 @@ export class AgentExecutionMonitorComponent {
|
|
|
228
243
|
}
|
|
229
244
|
// Clear existing components for full rebuild
|
|
230
245
|
this.clearNodeComponents();
|
|
231
|
-
// Handle executionTree format
|
|
246
|
+
// Handle executionTree format - historical mode should only use saved database data
|
|
232
247
|
if (this.executionData.executionTree) {
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
// Handle live steps that have been converted to historical
|
|
237
|
-
this.executionTree = this.convertLiveStepsToTree(this.executionData.liveSteps);
|
|
248
|
+
const allNodes = this.convertExecutionTree(this.executionData.executionTree);
|
|
249
|
+
// Filter out live-only nodes in historical mode
|
|
250
|
+
this.executionTree = this.filterNodesForMode(allNodes, 'historical');
|
|
238
251
|
}
|
|
239
252
|
else if (this.executionData.steps) {
|
|
240
253
|
// Handle legacy steps format
|
|
241
|
-
|
|
254
|
+
const allNodes = this.convertLegacySteps(this.executionData.steps);
|
|
255
|
+
this.executionTree = this.filterNodesForMode(allNodes, 'historical');
|
|
242
256
|
}
|
|
243
257
|
else {
|
|
244
258
|
this.executionTree = [];
|
|
@@ -307,6 +321,18 @@ export class AgentExecutionMonitorComponent {
|
|
|
307
321
|
detailsMarkdown = lines.slice(1).join('\n').trim();
|
|
308
322
|
}
|
|
309
323
|
}
|
|
324
|
+
// Determine display mode based on the step content
|
|
325
|
+
let displayMode = 'both';
|
|
326
|
+
// Progress messages that should only show in live mode
|
|
327
|
+
if (name.includes('Executing') && name.includes('action') && !name.startsWith('Execute Action:')) {
|
|
328
|
+
displayMode = 'live';
|
|
329
|
+
}
|
|
330
|
+
else if (name.includes("Executing agent's initial prompt")) {
|
|
331
|
+
displayMode = 'live';
|
|
332
|
+
}
|
|
333
|
+
else if (name.includes('Re-executing agent prompt with additional context')) {
|
|
334
|
+
displayMode = 'live';
|
|
335
|
+
}
|
|
310
336
|
const treeNode = {
|
|
311
337
|
id: node.step?.ID || `node-${Date.now()}-${index}`,
|
|
312
338
|
name: name,
|
|
@@ -325,7 +351,8 @@ export class AgentExecutionMonitorComponent {
|
|
|
325
351
|
cost: this.extractCost(node.outputData),
|
|
326
352
|
detailsMarkdown: detailsMarkdown,
|
|
327
353
|
detailsExpanded: false,
|
|
328
|
-
children: node.children ? this.convertExecutionTree(node.children, node.depth !== undefined ? node.depth + 1 : depth + 1) : undefined
|
|
354
|
+
children: node.children ? this.convertExecutionTree(node.children, node.depth !== undefined ? node.depth + 1 : depth + 1) : undefined,
|
|
355
|
+
displayMode: displayMode
|
|
329
356
|
};
|
|
330
357
|
return treeNode;
|
|
331
358
|
});
|
|
@@ -662,16 +689,25 @@ export class AgentExecutionMonitorComponent {
|
|
|
662
689
|
totalDuration: 0,
|
|
663
690
|
totalPrompts: 0
|
|
664
691
|
};
|
|
692
|
+
// Check if we have agent run data with token information
|
|
693
|
+
if (this.executionData?.agentRun) {
|
|
694
|
+
// Use token data from agent run if available
|
|
695
|
+
this.stats.totalTokens = this.executionData.agentRun.TotalTokensUsed || 0;
|
|
696
|
+
this.stats.totalCost = this.executionData.agentRun.TotalCost || 0;
|
|
697
|
+
}
|
|
665
698
|
const processNode = (node) => {
|
|
666
699
|
this.stats.totalSteps++;
|
|
667
700
|
if (node.status === 'completed')
|
|
668
701
|
this.stats.completedSteps++;
|
|
669
702
|
if (node.status === 'failed')
|
|
670
703
|
this.stats.failedSteps++;
|
|
671
|
-
if
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
704
|
+
// Only accumulate tokens if we don't have agent run data
|
|
705
|
+
if (!this.executionData?.agentRun) {
|
|
706
|
+
if (node.tokensUsed)
|
|
707
|
+
this.stats.totalTokens += node.tokensUsed;
|
|
708
|
+
if (node.cost)
|
|
709
|
+
this.stats.totalCost += node.cost;
|
|
710
|
+
}
|
|
675
711
|
if (node.duration)
|
|
676
712
|
this.stats.totalDuration += node.duration;
|
|
677
713
|
this.stats.stepsByType[node.type] = (this.stats.stepsByType[node.type] || 0) + 1;
|
|
@@ -1028,6 +1064,26 @@ export class AgentExecutionMonitorComponent {
|
|
|
1028
1064
|
const found = findParentRecursive(nodes);
|
|
1029
1065
|
return found || potentialParent;
|
|
1030
1066
|
}
|
|
1067
|
+
/**
|
|
1068
|
+
* Filter nodes based on display mode
|
|
1069
|
+
*/
|
|
1070
|
+
filterNodesForMode(nodes, mode) {
|
|
1071
|
+
return nodes.filter(node => {
|
|
1072
|
+
// If no displayMode is set, default to showing in both modes
|
|
1073
|
+
if (!node.displayMode) {
|
|
1074
|
+
return true;
|
|
1075
|
+
}
|
|
1076
|
+
// Show if displayMode is 'both' or matches current mode
|
|
1077
|
+
if (node.displayMode === 'both' || node.displayMode === mode) {
|
|
1078
|
+
// Filter children recursively
|
|
1079
|
+
if (node.children) {
|
|
1080
|
+
node.children = this.filterNodesForMode(node.children, mode);
|
|
1081
|
+
}
|
|
1082
|
+
return true;
|
|
1083
|
+
}
|
|
1084
|
+
return false;
|
|
1085
|
+
});
|
|
1086
|
+
}
|
|
1031
1087
|
/**
|
|
1032
1088
|
* Build a map of nodes by ID for quick lookup
|
|
1033
1089
|
*/
|
|
@@ -1064,6 +1120,22 @@ export class AgentExecutionMonitorComponent {
|
|
|
1064
1120
|
status = 'failed';
|
|
1065
1121
|
}
|
|
1066
1122
|
}
|
|
1123
|
+
// Determine display mode based on the step content
|
|
1124
|
+
let displayMode = 'both';
|
|
1125
|
+
// Progress messages that should only show in live mode
|
|
1126
|
+
if (name.includes('Executing') && name.includes('action') && !name.startsWith('Execute Action:')) {
|
|
1127
|
+
displayMode = 'live';
|
|
1128
|
+
}
|
|
1129
|
+
else if (name.includes("Executing agent's initial prompt")) {
|
|
1130
|
+
displayMode = 'live';
|
|
1131
|
+
}
|
|
1132
|
+
else if (name.includes('Re-executing agent prompt with additional context')) {
|
|
1133
|
+
displayMode = 'live';
|
|
1134
|
+
}
|
|
1135
|
+
// Check displayMode from metadata if available
|
|
1136
|
+
if (step.metadata?.displayMode) {
|
|
1137
|
+
displayMode = step.metadata.displayMode;
|
|
1138
|
+
}
|
|
1067
1139
|
return {
|
|
1068
1140
|
id: step.step?.ID || this.generateStepId(step),
|
|
1069
1141
|
name: name,
|
|
@@ -1080,7 +1152,8 @@ export class AgentExecutionMonitorComponent {
|
|
|
1080
1152
|
inputPreview: this.createPreview(step.inputData),
|
|
1081
1153
|
outputPreview: this.createPreview(step.outputData),
|
|
1082
1154
|
tokensUsed: this.extractTokens(step.outputData),
|
|
1083
|
-
cost: this.extractCost(step.outputData)
|
|
1155
|
+
cost: this.extractCost(step.outputData),
|
|
1156
|
+
displayMode: displayMode
|
|
1084
1157
|
};
|
|
1085
1158
|
}
|
|
1086
1159
|
/**
|
|
@@ -1128,6 +1201,21 @@ export class AgentExecutionMonitorComponent {
|
|
|
1128
1201
|
}
|
|
1129
1202
|
}
|
|
1130
1203
|
}
|
|
1204
|
+
/**
|
|
1205
|
+
* Check if execution is complete
|
|
1206
|
+
*/
|
|
1207
|
+
isExecutionComplete() {
|
|
1208
|
+
return this.stats.completedSteps > 0 &&
|
|
1209
|
+
this.stats.completedSteps === this.stats.totalSteps - this.stats.failedSteps;
|
|
1210
|
+
}
|
|
1211
|
+
/**
|
|
1212
|
+
* Handle view run button click
|
|
1213
|
+
*/
|
|
1214
|
+
onViewRunClick() {
|
|
1215
|
+
if (this.runId) {
|
|
1216
|
+
this.viewRunClick.emit({ runId: this.runId, runType: this.runType });
|
|
1217
|
+
}
|
|
1218
|
+
}
|
|
1131
1219
|
/**
|
|
1132
1220
|
* Append a node to its parent based on depth
|
|
1133
1221
|
*/
|
|
@@ -1154,7 +1242,7 @@ export class AgentExecutionMonitorComponent {
|
|
|
1154
1242
|
let _t;
|
|
1155
1243
|
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.executionTreeContainer = _t.first);
|
|
1156
1244
|
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.executionNodesContainer = _t.first);
|
|
1157
|
-
} }, inputs: { mode: "mode", executionData: "executionData", autoExpand: "autoExpand" }, standalone: true, features: [i0.ɵɵNgOnChangesFeature, i0.ɵɵStandaloneFeature], decls:
|
|
1245
|
+
} }, inputs: { mode: "mode", executionData: "executionData", autoExpand: "autoExpand", runId: "runId", runType: "runType" }, outputs: { viewRunClick: "viewRunClick" }, standalone: true, features: [i0.ɵɵNgOnChangesFeature, i0.ɵɵStandaloneFeature], decls: 39, vars: 16, consts: [["executionTreeContainer", ""], ["executionNodesContainer", ""], [1, "execution-monitor"], [1, "monitor-header"], [1, "header-title"], [1, "fa-solid", "fa-diagram-project"], [1, "live-indicator"], [1, "current-status"], [1, "view-run-btn"], [1, "execution-tree", 3, "scroll", "click"], [1, "nodes-container"], [1, "empty-state"], [1, "monitor-footer"], [1, "stats-grid"], [1, "stat-item"], [1, "stat-label"], [1, "stat-value"], [1, "failed-count"], [1, "step-types"], [1, "pulse"], [1, "status-label"], [1, "agent-path"], [1, "step-name"], [1, "view-run-btn", 3, "click"], [1, "fa-solid", "fa-external-link-alt"], [1, "fa-solid", "fa-hourglass-start"], [1, "type-badge"]], template: function AgentExecutionMonitorComponent_Template(rf, ctx) { if (rf & 1) {
|
|
1158
1246
|
const _r1 = i0.ɵɵgetCurrentView();
|
|
1159
1247
|
i0.ɵɵelementStart(0, "div", 2)(1, "div", 3)(2, "div", 4);
|
|
1160
1248
|
i0.ɵɵelement(3, "i", 5);
|
|
@@ -1163,41 +1251,41 @@ export class AgentExecutionMonitorComponent {
|
|
|
1163
1251
|
i0.ɵɵelementEnd();
|
|
1164
1252
|
i0.ɵɵtemplate(6, AgentExecutionMonitorComponent_Conditional_6_Template, 3, 0, "span", 6);
|
|
1165
1253
|
i0.ɵɵelementEnd();
|
|
1166
|
-
i0.ɵɵtemplate(7, AgentExecutionMonitorComponent_Conditional_7_Template, 7, 2, "div", 7);
|
|
1254
|
+
i0.ɵɵtemplate(7, AgentExecutionMonitorComponent_Conditional_7_Template, 7, 2, "div", 7)(8, AgentExecutionMonitorComponent_Conditional_8_Template, 3, 1, "button", 8);
|
|
1167
1255
|
i0.ɵɵelementEnd();
|
|
1168
|
-
i0.ɵɵelementStart(
|
|
1169
|
-
i0.ɵɵlistener("scroll", function
|
|
1170
|
-
i0.ɵɵelementStart(
|
|
1171
|
-
i0.ɵɵtemplate(
|
|
1256
|
+
i0.ɵɵelementStart(9, "div", 9, 0);
|
|
1257
|
+
i0.ɵɵlistener("scroll", function AgentExecutionMonitorComponent_Template_div_scroll_9_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onScroll($event)); })("click", function AgentExecutionMonitorComponent_Template_div_click_9_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onUserInteraction()); });
|
|
1258
|
+
i0.ɵɵelementStart(11, "div", 10, 1);
|
|
1259
|
+
i0.ɵɵtemplate(13, AgentExecutionMonitorComponent_Conditional_13_Template, 4, 0, "div", 11);
|
|
1172
1260
|
i0.ɵɵelementEnd()();
|
|
1173
|
-
i0.ɵɵelementStart(
|
|
1174
|
-
i0.ɵɵtext(
|
|
1261
|
+
i0.ɵɵelementStart(14, "div", 12)(15, "div", 13)(16, "div", 14)(17, "span", 15);
|
|
1262
|
+
i0.ɵɵtext(18, "Steps");
|
|
1175
1263
|
i0.ɵɵelementEnd();
|
|
1176
|
-
i0.ɵɵelementStart(
|
|
1177
|
-
i0.ɵɵtext(
|
|
1178
|
-
i0.ɵɵtemplate(
|
|
1264
|
+
i0.ɵɵelementStart(19, "span", 16);
|
|
1265
|
+
i0.ɵɵtext(20);
|
|
1266
|
+
i0.ɵɵtemplate(21, AgentExecutionMonitorComponent_Conditional_21_Template, 2, 1, "span", 17);
|
|
1179
1267
|
i0.ɵɵelementEnd()();
|
|
1180
|
-
i0.ɵɵelementStart(
|
|
1181
|
-
i0.ɵɵtext(
|
|
1268
|
+
i0.ɵɵelementStart(22, "div", 14)(23, "span", 15);
|
|
1269
|
+
i0.ɵɵtext(24, "Prompts");
|
|
1182
1270
|
i0.ɵɵelementEnd();
|
|
1183
|
-
i0.ɵɵelementStart(
|
|
1184
|
-
i0.ɵɵtext(
|
|
1271
|
+
i0.ɵɵelementStart(25, "span", 16);
|
|
1272
|
+
i0.ɵɵtext(26);
|
|
1185
1273
|
i0.ɵɵelementEnd()();
|
|
1186
|
-
i0.ɵɵelementStart(
|
|
1187
|
-
i0.ɵɵtext(
|
|
1274
|
+
i0.ɵɵelementStart(27, "div", 14)(28, "span", 15);
|
|
1275
|
+
i0.ɵɵtext(29, "Tokens");
|
|
1188
1276
|
i0.ɵɵelementEnd();
|
|
1189
|
-
i0.ɵɵelementStart(
|
|
1190
|
-
i0.ɵɵtext(
|
|
1277
|
+
i0.ɵɵelementStart(30, "span", 16);
|
|
1278
|
+
i0.ɵɵtext(31);
|
|
1191
1279
|
i0.ɵɵelementEnd()();
|
|
1192
|
-
i0.ɵɵelementStart(
|
|
1193
|
-
i0.ɵɵtext(
|
|
1280
|
+
i0.ɵɵelementStart(32, "div", 14)(33, "span", 15);
|
|
1281
|
+
i0.ɵɵtext(34, "Cost");
|
|
1194
1282
|
i0.ɵɵelementEnd();
|
|
1195
|
-
i0.ɵɵelementStart(
|
|
1196
|
-
i0.ɵɵtext(
|
|
1283
|
+
i0.ɵɵelementStart(35, "span", 16);
|
|
1284
|
+
i0.ɵɵtext(36);
|
|
1197
1285
|
i0.ɵɵelementEnd()();
|
|
1198
|
-
i0.ɵɵtemplate(
|
|
1286
|
+
i0.ɵɵtemplate(37, AgentExecutionMonitorComponent_Conditional_37_Template, 5, 1, "div", 14);
|
|
1199
1287
|
i0.ɵɵelementEnd();
|
|
1200
|
-
i0.ɵɵtemplate(
|
|
1288
|
+
i0.ɵɵtemplate(38, AgentExecutionMonitorComponent_Conditional_38_Template, 3, 0, "div", 18);
|
|
1201
1289
|
i0.ɵɵelementEnd()();
|
|
1202
1290
|
} if (rf & 2) {
|
|
1203
1291
|
i0.ɵɵclassProp("live-mode", ctx.mode === "live");
|
|
@@ -1206,13 +1294,15 @@ export class AgentExecutionMonitorComponent {
|
|
|
1206
1294
|
i0.ɵɵadvance();
|
|
1207
1295
|
i0.ɵɵconditional(ctx.currentStep && ctx.mode === "live" ? 7 : -1);
|
|
1208
1296
|
i0.ɵɵadvance();
|
|
1297
|
+
i0.ɵɵconditional(ctx.mode === "historical" && ctx.runId && ctx.isExecutionComplete() ? 8 : -1);
|
|
1298
|
+
i0.ɵɵadvance();
|
|
1209
1299
|
i0.ɵɵclassProp("has-content", ctx.executionTree.length > 0);
|
|
1210
1300
|
i0.ɵɵadvance(4);
|
|
1211
|
-
i0.ɵɵconditional(ctx.executionTree.length === 0 ?
|
|
1301
|
+
i0.ɵɵconditional(ctx.executionTree.length === 0 ? 13 : -1);
|
|
1212
1302
|
i0.ɵɵadvance(7);
|
|
1213
1303
|
i0.ɵɵtextInterpolate2(" ", ctx.stats.completedSteps, "/", ctx.stats.totalSteps, " ");
|
|
1214
1304
|
i0.ɵɵadvance();
|
|
1215
|
-
i0.ɵɵconditional(ctx.stats.failedSteps > 0 ?
|
|
1305
|
+
i0.ɵɵconditional(ctx.stats.failedSteps > 0 ? 21 : -1);
|
|
1216
1306
|
i0.ɵɵadvance(5);
|
|
1217
1307
|
i0.ɵɵtextInterpolate(ctx.stats.totalPrompts);
|
|
1218
1308
|
i0.ɵɵadvance(5);
|
|
@@ -1220,10 +1310,10 @@ export class AgentExecutionMonitorComponent {
|
|
|
1220
1310
|
i0.ɵɵadvance(5);
|
|
1221
1311
|
i0.ɵɵtextInterpolate1("$", ctx.stats.totalCost.toFixed(4), "");
|
|
1222
1312
|
i0.ɵɵadvance();
|
|
1223
|
-
i0.ɵɵconditional(ctx.stats.totalDuration ?
|
|
1313
|
+
i0.ɵɵconditional(ctx.stats.totalDuration ? 37 : -1);
|
|
1224
1314
|
i0.ɵɵadvance();
|
|
1225
|
-
i0.ɵɵconditional(ctx.getStepTypes().length > 0 ?
|
|
1226
|
-
} }, dependencies: [CommonModule], styles: ["[_nghost-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n overflow: hidden;\n }\n \n .execution-monitor[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n flex: 1;\n background: #fff;\n border: 1px solid #e0e0e0;\n border-radius: 8px;\n overflow: hidden;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n }\n\n \n\n .monitor-header[_ngcontent-%COMP%] {\n padding: 16px;\n background: #f8f9fa;\n border-bottom: 1px solid #e0e0e0;\n }\n\n .header-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 16px;\n font-weight: 600;\n color: #1a1a1a;\n margin-bottom: 8px;\n }\n\n .header-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #2196f3;\n }\n\n .live-indicator[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 4px 8px;\n background: #ff4444;\n color: white;\n border-radius: 4px;\n font-size: 11px;\n font-weight: 600;\n letter-spacing: 0.5px;\n }\n\n .pulse[_ngcontent-%COMP%] {\n display: inline-block;\n width: 8px;\n height: 8px;\n background: white;\n border-radius: 50%;\n animation: _ngcontent-%COMP%_pulse 2s infinite;\n }\n\n @keyframes _ngcontent-%COMP%_pulse {\n 0% { opacity: 1; transform: scale(1); }\n 50% { opacity: 0.5; transform: scale(0.8); }\n 100% { opacity: 1; transform: scale(1); }\n }\n\n .current-status[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 13px;\n color: #666;\n }\n\n .status-label[_ngcontent-%COMP%] {\n font-weight: 500;\n }\n\n .agent-path[_ngcontent-%COMP%] {\n color: #999;\n }\n\n .step-name[_ngcontent-%COMP%] {\n color: #1a1a1a;\n font-weight: 500;\n }\n\n \n\n .execution-tree[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n overflow-x: auto;\n padding: 16px;\n min-height: 0;\n }\n \n .nodes-container[_ngcontent-%COMP%] {\n \n\n }\n\n .empty-state[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100%;\n color: #999;\n text-align: center;\n }\n\n .empty-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 48px;\n margin-bottom: 16px;\n opacity: 0.5;\n }\n\n .empty-state[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 14px;\n }\n\n \n\n .tree-node[_ngcontent-%COMP%] {\n margin-bottom: 4px;\n }\n\n .node-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n background: #f8f9fa;\n border: 1px solid #e0e0e0;\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.2s ease;\n user-select: none;\n }\n\n .node-header[_ngcontent-%COMP%]:hover {\n background: #e8f0fe;\n border-color: #2196f3;\n }\n\n .expand-icon[_ngcontent-%COMP%], .expand-spacer[_ngcontent-%COMP%] {\n width: 16px;\n text-align: center;\n color: #666;\n font-size: 10px;\n }\n\n .status-icon[_ngcontent-%COMP%] {\n width: 20px;\n text-align: center;\n font-size: 14px;\n }\n\n .status-pending[_ngcontent-%COMP%] { color: #999; }\n .status-running[_ngcontent-%COMP%] { color: #2196f3; }\n .status-completed[_ngcontent-%COMP%] { color: #4caf50; }\n .status-failed[_ngcontent-%COMP%] { color: #f44336; }\n\n .type-icon[_ngcontent-%COMP%] {\n width: 20px;\n text-align: center;\n font-size: 14px;\n color: #666;\n }\n\n .node-name[_ngcontent-%COMP%] {\n flex: 1;\n font-size: 13px;\n font-weight: 500;\n color: #1a1a1a;\n }\n\n .node-duration[_ngcontent-%COMP%] {\n font-size: 12px;\n color: #666;\n font-weight: 500;\n }\n\n .node-metrics[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n font-size: 12px;\n }\n\n .tokens[_ngcontent-%COMP%] {\n color: #666;\n }\n\n .cost[_ngcontent-%COMP%] {\n color: #2196f3;\n font-weight: 500;\n }\n\n \n\n .node-details[_ngcontent-%COMP%] {\n margin: 8px 0 8px 44px;\n padding: 12px;\n background: #f5f5f5;\n border-radius: 4px;\n font-size: 12px;\n }\n\n .detail-section[_ngcontent-%COMP%] {\n margin-bottom: 8px;\n }\n\n .detail-section[_ngcontent-%COMP%]:last-child {\n margin-bottom: 0;\n }\n\n .detail-section.error[_ngcontent-%COMP%] {\n color: #d32f2f;\n }\n\n .detail-label[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n font-weight: 600;\n margin-bottom: 4px;\n color: #666;\n }\n\n .detail-section.error[_ngcontent-%COMP%] .detail-label[_ngcontent-%COMP%] {\n color: #d32f2f;\n }\n\n .detail-label[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 12px;\n }\n\n .detail-content[_ngcontent-%COMP%] {\n padding-left: 18px;\n color: #333;\n line-height: 1.4;\n white-space: pre-wrap;\n word-break: break-word;\n }\n\n \n\n .monitor-footer[_ngcontent-%COMP%] {\n padding: 16px;\n background: #f8f9fa;\n border-top: 1px solid #e0e0e0;\n }\n\n .stats-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));\n gap: 16px;\n margin-bottom: 12px;\n }\n\n .stat-item[_ngcontent-%COMP%] {\n text-align: center;\n }\n\n .stat-label[_ngcontent-%COMP%] {\n display: block;\n font-size: 11px;\n color: #666;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n margin-bottom: 4px;\n }\n\n .stat-value[_ngcontent-%COMP%] {\n display: block;\n font-size: 16px;\n font-weight: 600;\n color: #1a1a1a;\n }\n\n .failed-count[_ngcontent-%COMP%] {\n color: #f44336;\n font-size: 12px;\n font-weight: normal;\n }\n\n .step-types[_ngcontent-%COMP%] {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n justify-content: center;\n }\n\n .type-badge[_ngcontent-%COMP%] {\n display: inline-block;\n padding: 4px 8px;\n background: #e3f2fd;\n color: #1976d2;\n border-radius: 4px;\n font-size: 12px;\n font-weight: 500;\n }\n\n \n\n .details-toggle[_ngcontent-%COMP%] {\n margin-left: 8px;\n padding: 2px 6px;\n background: transparent;\n border: 1px solid #ddd;\n border-radius: 3px;\n cursor: pointer;\n font-size: 10px;\n color: #666;\n transition: all 0.2s ease;\n }\n \n .details-toggle[_ngcontent-%COMP%]:hover {\n background: #f0f0f0;\n border-color: #2196f3;\n color: #2196f3;\n }\n \n \n\n .markdown-details[_ngcontent-%COMP%] {\n margin: 8px 0 8px 44px;\n padding: 12px;\n background: #f9fafb;\n border-left: 3px solid #2196f3;\n border-radius: 0 4px 4px 0;\n font-size: 13px;\n line-height: 1.6;\n }\n \n .markdown-details[_ngcontent-%COMP%] h2[_ngcontent-%COMP%] {\n font-size: 16px;\n margin: 0 0 8px 0;\n color: #1a1a1a;\n }\n \n .markdown-details[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n font-size: 14px;\n margin: 8px 0 6px 0;\n color: #333;\n }\n \n .markdown-details[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n font-size: 13px;\n margin: 6px 0 4px 0;\n color: #555;\n }\n \n .markdown-details[_ngcontent-%COMP%] ul[_ngcontent-%COMP%] {\n margin: 4px 0;\n padding-left: 20px;\n }\n \n .markdown-details[_ngcontent-%COMP%] li[_ngcontent-%COMP%] {\n margin: 2px 0;\n }\n \n .markdown-details[_ngcontent-%COMP%] code[_ngcontent-%COMP%] {\n background: #e8f0fe;\n padding: 1px 4px;\n border-radius: 3px;\n font-family: 'Consolas', 'Monaco', monospace;\n font-size: 12px;\n }\n \n .markdown-details[_ngcontent-%COMP%] pre[_ngcontent-%COMP%] {\n background: #f5f5f5;\n padding: 8px;\n border-radius: 4px;\n overflow-x: auto;\n margin: 8px 0;\n }\n \n .markdown-details[_ngcontent-%COMP%] pre[_ngcontent-%COMP%] code[_ngcontent-%COMP%] {\n background: none;\n padding: 0;\n }\n \n .markdown-details[_ngcontent-%COMP%] strong[_ngcontent-%COMP%] {\n font-weight: 600;\n color: #1a1a1a;\n }\n \n .markdown-details[_ngcontent-%COMP%] em[_ngcontent-%COMP%] {\n font-style: italic;\n color: #555;\n }\n\n \n\n .execution-history-toggle[_ngcontent-%COMP%] {\n background: transparent;\n border: none;\n padding: 4px 8px;\n margin-left: 4px;\n cursor: pointer;\n color: #666;\n font-size: 12px;\n border-radius: 3px;\n transition: all 0.2s ease;\n }\n \n .execution-history-toggle[_ngcontent-%COMP%]:hover {\n background: #e3f2fd;\n color: #2196f3;\n }\n\n \n\n @media (max-width: 768px) {\n .monitor-header[_ngcontent-%COMP%] {\n padding: 12px;\n }\n\n .execution-tree[_ngcontent-%COMP%] {\n padding: 12px;\n }\n\n .node-header[_ngcontent-%COMP%] {\n padding: 6px 8px;\n gap: 6px;\n }\n\n .node-metrics[_ngcontent-%COMP%] {\n display: none;\n }\n \n .markdown-details[_ngcontent-%COMP%] {\n margin-left: 20px;\n font-size: 12px;\n }\n }"], changeDetection: 0 }); }
|
|
1315
|
+
i0.ɵɵconditional(ctx.getStepTypes().length > 0 ? 38 : -1);
|
|
1316
|
+
} }, dependencies: [CommonModule], styles: ["[_nghost-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n overflow: hidden;\n }\n \n .execution-monitor[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n flex: 1;\n background: #fff;\n border: 1px solid #e0e0e0;\n border-radius: 8px;\n overflow: hidden;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n }\n\n \n\n .monitor-header[_ngcontent-%COMP%] {\n padding: 16px;\n background: #f8f9fa;\n border-bottom: 1px solid #e0e0e0;\n }\n\n .header-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 16px;\n font-weight: 600;\n color: #1a1a1a;\n margin-bottom: 8px;\n }\n\n .header-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #2196f3;\n }\n\n .live-indicator[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 4px 8px;\n background: #ff4444;\n color: white;\n border-radius: 4px;\n font-size: 11px;\n font-weight: 600;\n letter-spacing: 0.5px;\n }\n\n .pulse[_ngcontent-%COMP%] {\n display: inline-block;\n width: 8px;\n height: 8px;\n background: white;\n border-radius: 50%;\n animation: _ngcontent-%COMP%_pulse 2s infinite;\n }\n\n @keyframes _ngcontent-%COMP%_pulse {\n 0% { opacity: 1; transform: scale(1); }\n 50% { opacity: 0.5; transform: scale(0.8); }\n 100% { opacity: 1; transform: scale(1); }\n }\n\n .current-status[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 13px;\n color: #666;\n }\n\n .status-label[_ngcontent-%COMP%] {\n font-weight: 500;\n }\n\n .agent-path[_ngcontent-%COMP%] {\n color: #999;\n }\n\n .step-name[_ngcontent-%COMP%] {\n color: #1a1a1a;\n font-weight: 500;\n }\n\n \n\n .execution-tree[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n overflow-x: auto;\n padding: 16px;\n min-height: 0;\n }\n \n .nodes-container[_ngcontent-%COMP%] {\n \n\n }\n\n .empty-state[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100%;\n color: #999;\n text-align: center;\n }\n\n .empty-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 48px;\n margin-bottom: 16px;\n opacity: 0.5;\n }\n\n .empty-state[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 14px;\n }\n\n \n\n .tree-node[_ngcontent-%COMP%] {\n margin-bottom: 4px;\n }\n\n .node-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n background: #f8f9fa;\n border: 1px solid #e0e0e0;\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.2s ease;\n user-select: none;\n }\n\n .node-header[_ngcontent-%COMP%]:hover {\n background: #e8f0fe;\n border-color: #2196f3;\n }\n\n .expand-icon[_ngcontent-%COMP%], .expand-spacer[_ngcontent-%COMP%] {\n width: 16px;\n text-align: center;\n color: #666;\n font-size: 10px;\n }\n\n .status-icon[_ngcontent-%COMP%] {\n width: 20px;\n text-align: center;\n font-size: 14px;\n }\n\n .status-pending[_ngcontent-%COMP%] { color: #999; }\n .status-running[_ngcontent-%COMP%] { color: #2196f3; }\n .status-completed[_ngcontent-%COMP%] { color: #4caf50; }\n .status-failed[_ngcontent-%COMP%] { color: #f44336; }\n\n .type-icon[_ngcontent-%COMP%] {\n width: 20px;\n text-align: center;\n font-size: 14px;\n color: #666;\n }\n\n .node-name[_ngcontent-%COMP%] {\n flex: 1;\n font-size: 13px;\n font-weight: 500;\n color: #1a1a1a;\n }\n\n .node-duration[_ngcontent-%COMP%] {\n font-size: 12px;\n color: #666;\n font-weight: 500;\n }\n\n .node-metrics[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n font-size: 12px;\n }\n\n .tokens[_ngcontent-%COMP%] {\n color: #666;\n }\n\n .cost[_ngcontent-%COMP%] {\n color: #2196f3;\n font-weight: 500;\n }\n\n \n\n .node-details[_ngcontent-%COMP%] {\n margin: 8px 0 8px 44px;\n padding: 12px;\n background: #f5f5f5;\n border-radius: 4px;\n font-size: 12px;\n }\n\n .detail-section[_ngcontent-%COMP%] {\n margin-bottom: 8px;\n }\n\n .detail-section[_ngcontent-%COMP%]:last-child {\n margin-bottom: 0;\n }\n\n .detail-section.error[_ngcontent-%COMP%] {\n color: #d32f2f;\n }\n\n .detail-label[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n font-weight: 600;\n margin-bottom: 4px;\n color: #666;\n }\n\n .detail-section.error[_ngcontent-%COMP%] .detail-label[_ngcontent-%COMP%] {\n color: #d32f2f;\n }\n\n .detail-label[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 12px;\n }\n\n .detail-content[_ngcontent-%COMP%] {\n padding-left: 18px;\n color: #333;\n line-height: 1.4;\n white-space: pre-wrap;\n word-break: break-word;\n }\n\n \n\n .monitor-footer[_ngcontent-%COMP%] {\n padding: 16px;\n background: #f8f9fa;\n border-top: 1px solid #e0e0e0;\n }\n\n .stats-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));\n gap: 16px;\n margin-bottom: 12px;\n }\n\n .stat-item[_ngcontent-%COMP%] {\n text-align: center;\n }\n\n .stat-label[_ngcontent-%COMP%] {\n display: block;\n font-size: 11px;\n color: #666;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n margin-bottom: 4px;\n }\n\n .stat-value[_ngcontent-%COMP%] {\n display: block;\n font-size: 16px;\n font-weight: 600;\n color: #1a1a1a;\n }\n\n .failed-count[_ngcontent-%COMP%] {\n color: #f44336;\n font-size: 12px;\n font-weight: normal;\n }\n\n .step-types[_ngcontent-%COMP%] {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n justify-content: center;\n }\n\n .type-badge[_ngcontent-%COMP%] {\n display: inline-block;\n padding: 4px 8px;\n background: #e3f2fd;\n color: #1976d2;\n border-radius: 4px;\n font-size: 12px;\n font-weight: 500;\n }\n\n \n\n .details-toggle[_ngcontent-%COMP%] {\n margin-left: 8px;\n padding: 2px 6px;\n background: transparent;\n border: 1px solid #ddd;\n border-radius: 3px;\n cursor: pointer;\n font-size: 10px;\n color: #666;\n transition: all 0.2s ease;\n }\n \n .details-toggle[_ngcontent-%COMP%]:hover {\n background: #f0f0f0;\n border-color: #2196f3;\n color: #2196f3;\n }\n \n \n\n .markdown-details[_ngcontent-%COMP%] {\n margin: 8px 0 8px 44px;\n padding: 12px;\n background: #f9fafb;\n border-left: 3px solid #2196f3;\n border-radius: 0 4px 4px 0;\n font-size: 13px;\n line-height: 1.6;\n }\n \n .markdown-details[_ngcontent-%COMP%] h2[_ngcontent-%COMP%] {\n font-size: 16px;\n margin: 0 0 8px 0;\n color: #1a1a1a;\n }\n \n .markdown-details[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n font-size: 14px;\n margin: 8px 0 6px 0;\n color: #333;\n }\n \n .markdown-details[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n font-size: 13px;\n margin: 6px 0 4px 0;\n color: #555;\n }\n \n .markdown-details[_ngcontent-%COMP%] ul[_ngcontent-%COMP%] {\n margin: 4px 0;\n padding-left: 20px;\n }\n \n .markdown-details[_ngcontent-%COMP%] li[_ngcontent-%COMP%] {\n margin: 2px 0;\n }\n \n .markdown-details[_ngcontent-%COMP%] code[_ngcontent-%COMP%] {\n background: #e8f0fe;\n padding: 1px 4px;\n border-radius: 3px;\n font-family: 'Consolas', 'Monaco', monospace;\n font-size: 12px;\n }\n \n .markdown-details[_ngcontent-%COMP%] pre[_ngcontent-%COMP%] {\n background: #f5f5f5;\n padding: 8px;\n border-radius: 4px;\n overflow-x: auto;\n margin: 8px 0;\n }\n \n .markdown-details[_ngcontent-%COMP%] pre[_ngcontent-%COMP%] code[_ngcontent-%COMP%] {\n background: none;\n padding: 0;\n }\n \n .markdown-details[_ngcontent-%COMP%] strong[_ngcontent-%COMP%] {\n font-weight: 600;\n color: #1a1a1a;\n }\n \n .markdown-details[_ngcontent-%COMP%] em[_ngcontent-%COMP%] {\n font-style: italic;\n color: #555;\n }\n\n \n\n .execution-history-toggle[_ngcontent-%COMP%] {\n background: transparent;\n border: none;\n padding: 4px 8px;\n margin-left: 4px;\n cursor: pointer;\n color: #666;\n font-size: 12px;\n border-radius: 3px;\n transition: all 0.2s ease;\n }\n \n .execution-history-toggle[_ngcontent-%COMP%]:hover {\n background: #e3f2fd;\n color: #2196f3;\n }\n \n \n\n .view-run-btn[_ngcontent-%COMP%] {\n background: #2196f3;\n color: white;\n border: none;\n padding: 6px 12px;\n border-radius: 4px;\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n gap: 6px;\n transition: all 0.2s ease;\n margin-left: auto;\n }\n \n .view-run-btn[_ngcontent-%COMP%]:hover {\n background: #1976d2;\n transform: translateY(-1px);\n box-shadow: 0 2px 4px rgba(0,0,0,0.2);\n }\n \n .view-run-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 12px;\n }\n\n \n\n @media (max-width: 768px) {\n .monitor-header[_ngcontent-%COMP%] {\n padding: 12px;\n }\n\n .execution-tree[_ngcontent-%COMP%] {\n padding: 12px;\n }\n\n .node-header[_ngcontent-%COMP%] {\n padding: 6px 8px;\n gap: 6px;\n }\n\n .node-metrics[_ngcontent-%COMP%] {\n display: none;\n }\n \n .markdown-details[_ngcontent-%COMP%] {\n margin-left: 20px;\n font-size: 12px;\n }\n }"], changeDetection: 0 }); }
|
|
1227
1317
|
}
|
|
1228
1318
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AgentExecutionMonitorComponent, [{
|
|
1229
1319
|
type: Component,
|
|
@@ -1248,6 +1338,12 @@ export class AgentExecutionMonitorComponent {
|
|
|
1248
1338
|
<span class="step-name">{{ currentStep.name }}</span>
|
|
1249
1339
|
</div>
|
|
1250
1340
|
}
|
|
1341
|
+
@if (mode === 'historical' && runId && isExecutionComplete()) {
|
|
1342
|
+
<button class="view-run-btn" (click)="onViewRunClick()">
|
|
1343
|
+
<i class="fa-solid fa-external-link-alt"></i>
|
|
1344
|
+
View {{ runType === 'agent' ? 'Agent' : 'Prompt' }} Run
|
|
1345
|
+
</button>
|
|
1346
|
+
}
|
|
1251
1347
|
</div>
|
|
1252
1348
|
|
|
1253
1349
|
<!-- Execution Tree -->
|
|
@@ -1309,13 +1405,19 @@ export class AgentExecutionMonitorComponent {
|
|
|
1309
1405
|
}
|
|
1310
1406
|
</div>
|
|
1311
1407
|
</div>
|
|
1312
|
-
`, styles: ["\n :host {\n display: flex;\n flex-direction: column;\n height: 100%;\n overflow: hidden;\n }\n \n .execution-monitor {\n display: flex;\n flex-direction: column;\n flex: 1;\n background: #fff;\n border: 1px solid #e0e0e0;\n border-radius: 8px;\n overflow: hidden;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n }\n\n /* Header */\n .monitor-header {\n padding: 16px;\n background: #f8f9fa;\n border-bottom: 1px solid #e0e0e0;\n }\n\n .header-title {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 16px;\n font-weight: 600;\n color: #1a1a1a;\n margin-bottom: 8px;\n }\n\n .header-title i {\n color: #2196f3;\n }\n\n .live-indicator {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 4px 8px;\n background: #ff4444;\n color: white;\n border-radius: 4px;\n font-size: 11px;\n font-weight: 600;\n letter-spacing: 0.5px;\n }\n\n .pulse {\n display: inline-block;\n width: 8px;\n height: 8px;\n background: white;\n border-radius: 50%;\n animation: pulse 2s infinite;\n }\n\n @keyframes pulse {\n 0% { opacity: 1; transform: scale(1); }\n 50% { opacity: 0.5; transform: scale(0.8); }\n 100% { opacity: 1; transform: scale(1); }\n }\n\n .current-status {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 13px;\n color: #666;\n }\n\n .status-label {\n font-weight: 500;\n }\n\n .agent-path {\n color: #999;\n }\n\n .step-name {\n color: #1a1a1a;\n font-weight: 500;\n }\n\n /* Execution Tree */\n .execution-tree {\n flex: 1;\n overflow-y: auto;\n overflow-x: auto;\n padding: 16px;\n min-height: 0;\n }\n \n .nodes-container {\n /* No extra padding needed, indentation handled by node margins */\n }\n\n .empty-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100%;\n color: #999;\n text-align: center;\n }\n\n .empty-state i {\n font-size: 48px;\n margin-bottom: 16px;\n opacity: 0.5;\n }\n\n .empty-state p {\n margin: 0;\n font-size: 14px;\n }\n\n /* Tree Nodes */\n .tree-node {\n margin-bottom: 4px;\n }\n\n .node-header {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n background: #f8f9fa;\n border: 1px solid #e0e0e0;\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.2s ease;\n user-select: none;\n }\n\n .node-header:hover {\n background: #e8f0fe;\n border-color: #2196f3;\n }\n\n .expand-icon, .expand-spacer {\n width: 16px;\n text-align: center;\n color: #666;\n font-size: 10px;\n }\n\n .status-icon {\n width: 20px;\n text-align: center;\n font-size: 14px;\n }\n\n .status-pending { color: #999; }\n .status-running { color: #2196f3; }\n .status-completed { color: #4caf50; }\n .status-failed { color: #f44336; }\n\n .type-icon {\n width: 20px;\n text-align: center;\n font-size: 14px;\n color: #666;\n }\n\n .node-name {\n flex: 1;\n font-size: 13px;\n font-weight: 500;\n color: #1a1a1a;\n }\n\n .node-duration {\n font-size: 12px;\n color: #666;\n font-weight: 500;\n }\n\n .node-metrics {\n display: flex;\n gap: 12px;\n font-size: 12px;\n }\n\n .tokens {\n color: #666;\n }\n\n .cost {\n color: #2196f3;\n font-weight: 500;\n }\n\n /* Node Details */\n .node-details {\n margin: 8px 0 8px 44px;\n padding: 12px;\n background: #f5f5f5;\n border-radius: 4px;\n font-size: 12px;\n }\n\n .detail-section {\n margin-bottom: 8px;\n }\n\n .detail-section:last-child {\n margin-bottom: 0;\n }\n\n .detail-section.error {\n color: #d32f2f;\n }\n\n .detail-label {\n display: flex;\n align-items: center;\n gap: 6px;\n font-weight: 600;\n margin-bottom: 4px;\n color: #666;\n }\n\n .detail-section.error .detail-label {\n color: #d32f2f;\n }\n\n .detail-label i {\n font-size: 12px;\n }\n\n .detail-content {\n padding-left: 18px;\n color: #333;\n line-height: 1.4;\n white-space: pre-wrap;\n word-break: break-word;\n }\n\n /* Footer */\n .monitor-footer {\n padding: 16px;\n background: #f8f9fa;\n border-top: 1px solid #e0e0e0;\n }\n\n .stats-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));\n gap: 16px;\n margin-bottom: 12px;\n }\n\n .stat-item {\n text-align: center;\n }\n\n .stat-label {\n display: block;\n font-size: 11px;\n color: #666;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n margin-bottom: 4px;\n }\n\n .stat-value {\n display: block;\n font-size: 16px;\n font-weight: 600;\n color: #1a1a1a;\n }\n\n .failed-count {\n color: #f44336;\n font-size: 12px;\n font-weight: normal;\n }\n\n .step-types {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n justify-content: center;\n }\n\n .type-badge {\n display: inline-block;\n padding: 4px 8px;\n background: #e3f2fd;\n color: #1976d2;\n border-radius: 4px;\n font-size: 12px;\n font-weight: 500;\n }\n\n /* Details Toggle Button */\n .details-toggle {\n margin-left: 8px;\n padding: 2px 6px;\n background: transparent;\n border: 1px solid #ddd;\n border-radius: 3px;\n cursor: pointer;\n font-size: 10px;\n color: #666;\n transition: all 0.2s ease;\n }\n \n .details-toggle:hover {\n background: #f0f0f0;\n border-color: #2196f3;\n color: #2196f3;\n }\n \n /* Markdown Details Section */\n .markdown-details {\n margin: 8px 0 8px 44px;\n padding: 12px;\n background: #f9fafb;\n border-left: 3px solid #2196f3;\n border-radius: 0 4px 4px 0;\n font-size: 13px;\n line-height: 1.6;\n }\n \n .markdown-details h2 {\n font-size: 16px;\n margin: 0 0 8px 0;\n color: #1a1a1a;\n }\n \n .markdown-details h3 {\n font-size: 14px;\n margin: 8px 0 6px 0;\n color: #333;\n }\n \n .markdown-details h4 {\n font-size: 13px;\n margin: 6px 0 4px 0;\n color: #555;\n }\n \n .markdown-details ul {\n margin: 4px 0;\n padding-left: 20px;\n }\n \n .markdown-details li {\n margin: 2px 0;\n }\n \n .markdown-details code {\n background: #e8f0fe;\n padding: 1px 4px;\n border-radius: 3px;\n font-family: 'Consolas', 'Monaco', monospace;\n font-size: 12px;\n }\n \n .markdown-details pre {\n background: #f5f5f5;\n padding: 8px;\n border-radius: 4px;\n overflow-x: auto;\n margin: 8px 0;\n }\n \n .markdown-details pre code {\n background: none;\n padding: 0;\n }\n \n .markdown-details strong {\n font-weight: 600;\n color: #1a1a1a;\n }\n \n .markdown-details em {\n font-style: italic;\n color: #555;\n }\n\n /* Button styling for execution history toggle */\n .execution-history-toggle {\n background: transparent;\n border: none;\n padding: 4px 8px;\n margin-left: 4px;\n cursor: pointer;\n color: #666;\n font-size: 12px;\n border-radius: 3px;\n transition: all 0.2s ease;\n }\n \n .execution-history-toggle:hover {\n background: #e3f2fd;\n color: #2196f3;\n }\n\n /* Responsive */\n @media (max-width: 768px) {\n .monitor-header {\n padding: 12px;\n }\n\n .execution-tree {\n padding: 12px;\n }\n\n .node-header {\n padding: 6px 8px;\n gap: 6px;\n }\n\n .node-metrics {\n display: none;\n }\n \n .markdown-details {\n margin-left: 20px;\n font-size: 12px;\n }\n }\n "] }]
|
|
1408
|
+
`, styles: ["\n :host {\n display: flex;\n flex-direction: column;\n height: 100%;\n overflow: hidden;\n }\n \n .execution-monitor {\n display: flex;\n flex-direction: column;\n flex: 1;\n background: #fff;\n border: 1px solid #e0e0e0;\n border-radius: 8px;\n overflow: hidden;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n }\n\n /* Header */\n .monitor-header {\n padding: 16px;\n background: #f8f9fa;\n border-bottom: 1px solid #e0e0e0;\n }\n\n .header-title {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 16px;\n font-weight: 600;\n color: #1a1a1a;\n margin-bottom: 8px;\n }\n\n .header-title i {\n color: #2196f3;\n }\n\n .live-indicator {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 4px 8px;\n background: #ff4444;\n color: white;\n border-radius: 4px;\n font-size: 11px;\n font-weight: 600;\n letter-spacing: 0.5px;\n }\n\n .pulse {\n display: inline-block;\n width: 8px;\n height: 8px;\n background: white;\n border-radius: 50%;\n animation: pulse 2s infinite;\n }\n\n @keyframes pulse {\n 0% { opacity: 1; transform: scale(1); }\n 50% { opacity: 0.5; transform: scale(0.8); }\n 100% { opacity: 1; transform: scale(1); }\n }\n\n .current-status {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 13px;\n color: #666;\n }\n\n .status-label {\n font-weight: 500;\n }\n\n .agent-path {\n color: #999;\n }\n\n .step-name {\n color: #1a1a1a;\n font-weight: 500;\n }\n\n /* Execution Tree */\n .execution-tree {\n flex: 1;\n overflow-y: auto;\n overflow-x: auto;\n padding: 16px;\n min-height: 0;\n }\n \n .nodes-container {\n /* No extra padding needed, indentation handled by node margins */\n }\n\n .empty-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100%;\n color: #999;\n text-align: center;\n }\n\n .empty-state i {\n font-size: 48px;\n margin-bottom: 16px;\n opacity: 0.5;\n }\n\n .empty-state p {\n margin: 0;\n font-size: 14px;\n }\n\n /* Tree Nodes */\n .tree-node {\n margin-bottom: 4px;\n }\n\n .node-header {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n background: #f8f9fa;\n border: 1px solid #e0e0e0;\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.2s ease;\n user-select: none;\n }\n\n .node-header:hover {\n background: #e8f0fe;\n border-color: #2196f3;\n }\n\n .expand-icon, .expand-spacer {\n width: 16px;\n text-align: center;\n color: #666;\n font-size: 10px;\n }\n\n .status-icon {\n width: 20px;\n text-align: center;\n font-size: 14px;\n }\n\n .status-pending { color: #999; }\n .status-running { color: #2196f3; }\n .status-completed { color: #4caf50; }\n .status-failed { color: #f44336; }\n\n .type-icon {\n width: 20px;\n text-align: center;\n font-size: 14px;\n color: #666;\n }\n\n .node-name {\n flex: 1;\n font-size: 13px;\n font-weight: 500;\n color: #1a1a1a;\n }\n\n .node-duration {\n font-size: 12px;\n color: #666;\n font-weight: 500;\n }\n\n .node-metrics {\n display: flex;\n gap: 12px;\n font-size: 12px;\n }\n\n .tokens {\n color: #666;\n }\n\n .cost {\n color: #2196f3;\n font-weight: 500;\n }\n\n /* Node Details */\n .node-details {\n margin: 8px 0 8px 44px;\n padding: 12px;\n background: #f5f5f5;\n border-radius: 4px;\n font-size: 12px;\n }\n\n .detail-section {\n margin-bottom: 8px;\n }\n\n .detail-section:last-child {\n margin-bottom: 0;\n }\n\n .detail-section.error {\n color: #d32f2f;\n }\n\n .detail-label {\n display: flex;\n align-items: center;\n gap: 6px;\n font-weight: 600;\n margin-bottom: 4px;\n color: #666;\n }\n\n .detail-section.error .detail-label {\n color: #d32f2f;\n }\n\n .detail-label i {\n font-size: 12px;\n }\n\n .detail-content {\n padding-left: 18px;\n color: #333;\n line-height: 1.4;\n white-space: pre-wrap;\n word-break: break-word;\n }\n\n /* Footer */\n .monitor-footer {\n padding: 16px;\n background: #f8f9fa;\n border-top: 1px solid #e0e0e0;\n }\n\n .stats-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));\n gap: 16px;\n margin-bottom: 12px;\n }\n\n .stat-item {\n text-align: center;\n }\n\n .stat-label {\n display: block;\n font-size: 11px;\n color: #666;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n margin-bottom: 4px;\n }\n\n .stat-value {\n display: block;\n font-size: 16px;\n font-weight: 600;\n color: #1a1a1a;\n }\n\n .failed-count {\n color: #f44336;\n font-size: 12px;\n font-weight: normal;\n }\n\n .step-types {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n justify-content: center;\n }\n\n .type-badge {\n display: inline-block;\n padding: 4px 8px;\n background: #e3f2fd;\n color: #1976d2;\n border-radius: 4px;\n font-size: 12px;\n font-weight: 500;\n }\n\n /* Details Toggle Button */\n .details-toggle {\n margin-left: 8px;\n padding: 2px 6px;\n background: transparent;\n border: 1px solid #ddd;\n border-radius: 3px;\n cursor: pointer;\n font-size: 10px;\n color: #666;\n transition: all 0.2s ease;\n }\n \n .details-toggle:hover {\n background: #f0f0f0;\n border-color: #2196f3;\n color: #2196f3;\n }\n \n /* Markdown Details Section */\n .markdown-details {\n margin: 8px 0 8px 44px;\n padding: 12px;\n background: #f9fafb;\n border-left: 3px solid #2196f3;\n border-radius: 0 4px 4px 0;\n font-size: 13px;\n line-height: 1.6;\n }\n \n .markdown-details h2 {\n font-size: 16px;\n margin: 0 0 8px 0;\n color: #1a1a1a;\n }\n \n .markdown-details h3 {\n font-size: 14px;\n margin: 8px 0 6px 0;\n color: #333;\n }\n \n .markdown-details h4 {\n font-size: 13px;\n margin: 6px 0 4px 0;\n color: #555;\n }\n \n .markdown-details ul {\n margin: 4px 0;\n padding-left: 20px;\n }\n \n .markdown-details li {\n margin: 2px 0;\n }\n \n .markdown-details code {\n background: #e8f0fe;\n padding: 1px 4px;\n border-radius: 3px;\n font-family: 'Consolas', 'Monaco', monospace;\n font-size: 12px;\n }\n \n .markdown-details pre {\n background: #f5f5f5;\n padding: 8px;\n border-radius: 4px;\n overflow-x: auto;\n margin: 8px 0;\n }\n \n .markdown-details pre code {\n background: none;\n padding: 0;\n }\n \n .markdown-details strong {\n font-weight: 600;\n color: #1a1a1a;\n }\n \n .markdown-details em {\n font-style: italic;\n color: #555;\n }\n\n /* Button styling for execution history toggle */\n .execution-history-toggle {\n background: transparent;\n border: none;\n padding: 4px 8px;\n margin-left: 4px;\n cursor: pointer;\n color: #666;\n font-size: 12px;\n border-radius: 3px;\n transition: all 0.2s ease;\n }\n \n .execution-history-toggle:hover {\n background: #e3f2fd;\n color: #2196f3;\n }\n \n /* View Run Button */\n .view-run-btn {\n background: #2196f3;\n color: white;\n border: none;\n padding: 6px 12px;\n border-radius: 4px;\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n gap: 6px;\n transition: all 0.2s ease;\n margin-left: auto;\n }\n \n .view-run-btn:hover {\n background: #1976d2;\n transform: translateY(-1px);\n box-shadow: 0 2px 4px rgba(0,0,0,0.2);\n }\n \n .view-run-btn i {\n font-size: 12px;\n }\n\n /* Responsive */\n @media (max-width: 768px) {\n .monitor-header {\n padding: 12px;\n }\n\n .execution-tree {\n padding: 12px;\n }\n\n .node-header {\n padding: 6px 8px;\n gap: 6px;\n }\n\n .node-metrics {\n display: none;\n }\n \n .markdown-details {\n margin-left: 20px;\n font-size: 12px;\n }\n }\n "] }]
|
|
1313
1409
|
}], () => [{ type: i0.ChangeDetectorRef }], { mode: [{
|
|
1314
1410
|
type: Input
|
|
1315
1411
|
}], executionData: [{
|
|
1316
1412
|
type: Input
|
|
1317
1413
|
}], autoExpand: [{
|
|
1318
1414
|
type: Input
|
|
1415
|
+
}], runId: [{
|
|
1416
|
+
type: Input
|
|
1417
|
+
}], runType: [{
|
|
1418
|
+
type: Input
|
|
1419
|
+
}], viewRunClick: [{
|
|
1420
|
+
type: Output
|
|
1319
1421
|
}], executionTreeContainer: [{
|
|
1320
1422
|
type: ViewChild,
|
|
1321
1423
|
args: ['executionTreeContainer']
|
|
@@ -1323,5 +1425,5 @@ export class AgentExecutionMonitorComponent {
|
|
|
1323
1425
|
type: ViewChild,
|
|
1324
1426
|
args: ['executionNodesContainer', { read: ViewContainerRef }]
|
|
1325
1427
|
}] }); })();
|
|
1326
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AgentExecutionMonitorComponent, { className: "AgentExecutionMonitorComponent", filePath: "src/lib/custom/ai-test-harness/agent-execution-monitor.component.ts", lineNumber:
|
|
1428
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AgentExecutionMonitorComponent, { className: "AgentExecutionMonitorComponent", filePath: "src/lib/custom/ai-test-harness/agent-execution-monitor.component.ts", lineNumber: 634 }); })();
|
|
1327
1429
|
//# sourceMappingURL=agent-execution-monitor.component.js.map
|