@memberjunction/ng-ai-test-harness 2.57.0 → 2.59.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/agent-execution-monitor.component.d.ts +18 -4
- package/dist/lib/agent-execution-monitor.component.d.ts.map +1 -1
- package/dist/lib/agent-execution-monitor.component.js +297 -87
- package/dist/lib/agent-execution-monitor.component.js.map +1 -1
- package/dist/lib/agent-execution-node.component.d.ts +5 -2
- package/dist/lib/agent-execution-node.component.d.ts.map +1 -1
- package/dist/lib/agent-execution-node.component.js +175 -110
- package/dist/lib/agent-execution-node.component.js.map +1 -1
- package/dist/lib/ai-test-harness.component.d.ts +8 -0
- package/dist/lib/ai-test-harness.component.d.ts.map +1 -1
- package/dist/lib/ai-test-harness.component.js +140 -24
- package/dist/lib/ai-test-harness.component.js.map +1 -1
- package/package.json +8 -8
|
@@ -4,15 +4,15 @@ import * as i0 from "@angular/core";
|
|
|
4
4
|
const _forTrack0 = ($index, $item) => $item.id;
|
|
5
5
|
function ExecutionNodeComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
|
|
6
6
|
const _r1 = i0.ɵɵgetCurrentView();
|
|
7
|
-
i0.ɵɵelementStart(0, "i",
|
|
8
|
-
i0.ɵɵlistener("click", function ExecutionNodeComponent_Conditional_2_Template_i_click_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.
|
|
7
|
+
i0.ɵɵelementStart(0, "i", 19);
|
|
8
|
+
i0.ɵɵlistener("click", function ExecutionNodeComponent_Conditional_2_Template_i_click_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onToggleChildren($event)); });
|
|
9
9
|
i0.ɵɵelementEnd();
|
|
10
10
|
} if (rf & 2) {
|
|
11
11
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
12
12
|
i0.ɵɵclassProp("fa-chevron-down", ctx_r1.node.expanded)("fa-chevron-right", !ctx_r1.node.expanded);
|
|
13
13
|
} }
|
|
14
|
-
function
|
|
15
|
-
i0.ɵɵelement(0, "
|
|
14
|
+
function ExecutionNodeComponent_Case_4_Template(rf, ctx) { if (rf & 1) {
|
|
15
|
+
i0.ɵɵelement(0, "i", 4);
|
|
16
16
|
} }
|
|
17
17
|
function ExecutionNodeComponent_Case_5_Template(rf, ctx) { if (rf & 1) {
|
|
18
18
|
i0.ɵɵelement(0, "i", 5);
|
|
@@ -23,56 +23,62 @@ function ExecutionNodeComponent_Case_6_Template(rf, ctx) { if (rf & 1) {
|
|
|
23
23
|
function ExecutionNodeComponent_Case_7_Template(rf, ctx) { if (rf & 1) {
|
|
24
24
|
i0.ɵɵelement(0, "i", 7);
|
|
25
25
|
} }
|
|
26
|
-
function
|
|
27
|
-
i0.ɵɵelement(0, "i",
|
|
26
|
+
function ExecutionNodeComponent_Case_9_Template(rf, ctx) { if (rf & 1) {
|
|
27
|
+
i0.ɵɵelement(0, "i", 9);
|
|
28
28
|
} }
|
|
29
29
|
function ExecutionNodeComponent_Case_10_Template(rf, ctx) { if (rf & 1) {
|
|
30
30
|
i0.ɵɵelement(0, "i", 10);
|
|
31
31
|
} }
|
|
32
|
-
function
|
|
33
|
-
i0.ɵɵelement(0, "i", 11);
|
|
34
|
-
} }
|
|
35
|
-
function ExecutionNodeComponent_Case_12_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
32
|
+
function ExecutionNodeComponent_Case_11_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
36
33
|
i0.ɵɵelement(0, "i");
|
|
37
34
|
} if (rf & 2) {
|
|
38
35
|
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
39
36
|
i0.ɵɵclassMap(ctx_r1.node.actionIconClass);
|
|
40
37
|
} }
|
|
41
|
-
function
|
|
42
|
-
i0.ɵɵelement(0, "i",
|
|
38
|
+
function ExecutionNodeComponent_Case_11_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
39
|
+
i0.ɵɵelement(0, "i", 21);
|
|
43
40
|
} }
|
|
44
|
-
function
|
|
45
|
-
i0.ɵɵtemplate(0,
|
|
41
|
+
function ExecutionNodeComponent_Case_11_Template(rf, ctx) { if (rf & 1) {
|
|
42
|
+
i0.ɵɵtemplate(0, ExecutionNodeComponent_Case_11_Conditional_0_Template, 1, 2, "i", 20)(1, ExecutionNodeComponent_Case_11_Conditional_1_Template, 1, 0, "i", 21);
|
|
46
43
|
} if (rf & 2) {
|
|
47
44
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
48
45
|
i0.ɵɵconditional(ctx_r1.node.actionIconClass ? 0 : 1);
|
|
49
46
|
} }
|
|
50
|
-
function
|
|
51
|
-
i0.ɵɵelement(0, "img",
|
|
47
|
+
function ExecutionNodeComponent_Case_12_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
48
|
+
i0.ɵɵelement(0, "img", 22);
|
|
52
49
|
} if (rf & 2) {
|
|
53
50
|
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
54
51
|
i0.ɵɵproperty("src", ctx_r1.node.agentLogoURL, i0.ɵɵsanitizeUrl)("alt", ctx_r1.node.agentName || "Agent");
|
|
55
52
|
} }
|
|
56
|
-
function
|
|
53
|
+
function ExecutionNodeComponent_Case_12_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
57
54
|
i0.ɵɵelement(0, "i");
|
|
58
55
|
} if (rf & 2) {
|
|
59
56
|
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
60
57
|
i0.ɵɵclassMap(ctx_r1.node.agentIconClass);
|
|
61
58
|
} }
|
|
62
|
-
function
|
|
63
|
-
i0.ɵɵelement(0, "i",
|
|
59
|
+
function ExecutionNodeComponent_Case_12_Conditional_2_Template(rf, ctx) { if (rf & 1) {
|
|
60
|
+
i0.ɵɵelement(0, "i", 23);
|
|
64
61
|
} }
|
|
65
|
-
function
|
|
66
|
-
i0.ɵɵtemplate(0,
|
|
62
|
+
function ExecutionNodeComponent_Case_12_Template(rf, ctx) { if (rf & 1) {
|
|
63
|
+
i0.ɵɵtemplate(0, ExecutionNodeComponent_Case_12_Conditional_0_Template, 1, 2, "img", 22)(1, ExecutionNodeComponent_Case_12_Conditional_1_Template, 1, 2, "i", 20)(2, ExecutionNodeComponent_Case_12_Conditional_2_Template, 1, 0, "i", 23);
|
|
67
64
|
} if (rf & 2) {
|
|
68
65
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
69
66
|
i0.ɵɵconditional(ctx_r1.node.agentLogoURL ? 0 : ctx_r1.node.agentIconClass ? 1 : 2);
|
|
70
67
|
} }
|
|
68
|
+
function ExecutionNodeComponent_Case_13_Template(rf, ctx) { if (rf & 1) {
|
|
69
|
+
i0.ɵɵelement(0, "i", 11);
|
|
70
|
+
} }
|
|
71
71
|
function ExecutionNodeComponent_Case_14_Template(rf, ctx) { if (rf & 1) {
|
|
72
72
|
i0.ɵɵelement(0, "i", 12);
|
|
73
73
|
} }
|
|
74
|
-
function
|
|
75
|
-
i0.ɵɵ
|
|
74
|
+
function ExecutionNodeComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
|
|
75
|
+
i0.ɵɵelementStart(0, "small", 14);
|
|
76
|
+
i0.ɵɵtext(1);
|
|
77
|
+
i0.ɵɵelementEnd();
|
|
78
|
+
} if (rf & 2) {
|
|
79
|
+
const ctx_r1 = i0.ɵɵnextContext();
|
|
80
|
+
i0.ɵɵadvance();
|
|
81
|
+
i0.ɵɵtextInterpolate1("[Level ", ctx_r1.node.depth, "]");
|
|
76
82
|
} }
|
|
77
83
|
function ExecutionNodeComponent_Conditional_18_Template(rf, ctx) { if (rf & 1) {
|
|
78
84
|
i0.ɵɵelementStart(0, "span", 15);
|
|
@@ -84,7 +90,7 @@ function ExecutionNodeComponent_Conditional_18_Template(rf, ctx) { if (rf & 1) {
|
|
|
84
90
|
i0.ɵɵtextInterpolate(ctx_r1.formatDuration(ctx_r1.node.duration));
|
|
85
91
|
} }
|
|
86
92
|
function ExecutionNodeComponent_Conditional_19_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
87
|
-
i0.ɵɵelementStart(0, "span",
|
|
93
|
+
i0.ɵɵelementStart(0, "span", 24);
|
|
88
94
|
i0.ɵɵtext(1);
|
|
89
95
|
i0.ɵɵelementEnd();
|
|
90
96
|
} if (rf & 2) {
|
|
@@ -93,7 +99,7 @@ function ExecutionNodeComponent_Conditional_19_Conditional_1_Template(rf, ctx) {
|
|
|
93
99
|
i0.ɵɵtextInterpolate1("", ctx_r1.node.tokensUsed, " tokens");
|
|
94
100
|
} }
|
|
95
101
|
function ExecutionNodeComponent_Conditional_19_Conditional_2_Template(rf, ctx) { if (rf & 1) {
|
|
96
|
-
i0.ɵɵelementStart(0, "span",
|
|
102
|
+
i0.ɵɵelementStart(0, "span", 25);
|
|
97
103
|
i0.ɵɵtext(1);
|
|
98
104
|
i0.ɵɵelementEnd();
|
|
99
105
|
} if (rf & 2) {
|
|
@@ -103,7 +109,7 @@ function ExecutionNodeComponent_Conditional_19_Conditional_2_Template(rf, ctx) {
|
|
|
103
109
|
} }
|
|
104
110
|
function ExecutionNodeComponent_Conditional_19_Template(rf, ctx) { if (rf & 1) {
|
|
105
111
|
i0.ɵɵelementStart(0, "span", 16);
|
|
106
|
-
i0.ɵɵtemplate(1, ExecutionNodeComponent_Conditional_19_Conditional_1_Template, 2, 1, "span",
|
|
112
|
+
i0.ɵɵtemplate(1, ExecutionNodeComponent_Conditional_19_Conditional_1_Template, 2, 1, "span", 24)(2, ExecutionNodeComponent_Conditional_19_Conditional_2_Template, 2, 1, "span", 25);
|
|
107
113
|
i0.ɵɵelementEnd();
|
|
108
114
|
} if (rf & 2) {
|
|
109
115
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
@@ -112,8 +118,20 @@ function ExecutionNodeComponent_Conditional_19_Template(rf, ctx) { if (rf & 1) {
|
|
|
112
118
|
i0.ɵɵadvance();
|
|
113
119
|
i0.ɵɵconditional(ctx_r1.node.cost ? 2 : -1);
|
|
114
120
|
} }
|
|
115
|
-
function
|
|
116
|
-
i0.ɵɵ
|
|
121
|
+
function ExecutionNodeComponent_Conditional_20_Template(rf, ctx) { if (rf & 1) {
|
|
122
|
+
const _r3 = i0.ɵɵgetCurrentView();
|
|
123
|
+
i0.ɵɵelementStart(0, "button", 26);
|
|
124
|
+
i0.ɵɵlistener("click", function ExecutionNodeComponent_Conditional_20_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onToggleDetails($event)); });
|
|
125
|
+
i0.ɵɵelement(1, "i", 27);
|
|
126
|
+
i0.ɵɵelementEnd();
|
|
127
|
+
} if (rf & 2) {
|
|
128
|
+
const ctx_r1 = i0.ɵɵnextContext();
|
|
129
|
+
i0.ɵɵproperty("title", ctx_r1.node.detailsExpanded ? "Hide details" : "Show details");
|
|
130
|
+
i0.ɵɵadvance();
|
|
131
|
+
i0.ɵɵclassProp("fa-info", !ctx_r1.node.detailsExpanded)("fa-times", ctx_r1.node.detailsExpanded);
|
|
132
|
+
} }
|
|
133
|
+
function ExecutionNodeComponent_Conditional_21_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
134
|
+
i0.ɵɵelementStart(0, "div", 31);
|
|
117
135
|
i0.ɵɵtext(1);
|
|
118
136
|
i0.ɵɵelementEnd();
|
|
119
137
|
} if (rf & 2) {
|
|
@@ -121,15 +139,15 @@ function ExecutionNodeComponent_Conditional_20_Conditional_0_Conditional_1_Templ
|
|
|
121
139
|
i0.ɵɵadvance();
|
|
122
140
|
i0.ɵɵtextInterpolate(ctx_r1.node.name);
|
|
123
141
|
} }
|
|
124
|
-
function
|
|
125
|
-
i0.ɵɵelement(0, "div",
|
|
142
|
+
function ExecutionNodeComponent_Conditional_21_Conditional_0_Conditional_2_Template(rf, ctx) { if (rf & 1) {
|
|
143
|
+
i0.ɵɵelement(0, "div", 32);
|
|
126
144
|
} if (rf & 2) {
|
|
127
145
|
const ctx_r1 = i0.ɵɵnextContext(3);
|
|
128
146
|
i0.ɵɵproperty("innerHTML", ctx_r1.formatMarkdown(ctx_r1.node.detailsMarkdown), i0.ɵɵsanitizeHtml);
|
|
129
147
|
} }
|
|
130
|
-
function
|
|
131
|
-
i0.ɵɵelementStart(0, "div",
|
|
132
|
-
i0.ɵɵtemplate(1,
|
|
148
|
+
function ExecutionNodeComponent_Conditional_21_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
149
|
+
i0.ɵɵelementStart(0, "div", 28);
|
|
150
|
+
i0.ɵɵtemplate(1, ExecutionNodeComponent_Conditional_21_Conditional_0_Conditional_1_Template, 2, 1, "div", 31)(2, ExecutionNodeComponent_Conditional_21_Conditional_0_Conditional_2_Template, 1, 1, "div", 32);
|
|
133
151
|
i0.ɵɵelementEnd();
|
|
134
152
|
} if (rf & 2) {
|
|
135
153
|
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
@@ -138,86 +156,90 @@ function ExecutionNodeComponent_Conditional_20_Conditional_0_Template(rf, ctx) {
|
|
|
138
156
|
i0.ɵɵadvance();
|
|
139
157
|
i0.ɵɵconditional(ctx_r1.node.detailsMarkdown ? 2 : -1);
|
|
140
158
|
} }
|
|
141
|
-
function
|
|
142
|
-
i0.ɵɵelementStart(0, "div",
|
|
143
|
-
i0.ɵɵelement(2, "i",
|
|
159
|
+
function ExecutionNodeComponent_Conditional_21_Conditional_2_Template(rf, ctx) { if (rf & 1) {
|
|
160
|
+
i0.ɵɵelementStart(0, "div", 29)(1, "div", 33);
|
|
161
|
+
i0.ɵɵelement(2, "i", 34);
|
|
144
162
|
i0.ɵɵtext(3, " Error ");
|
|
145
163
|
i0.ɵɵelementEnd();
|
|
146
|
-
i0.ɵɵelementStart(4, "div",
|
|
164
|
+
i0.ɵɵelementStart(4, "div", 35);
|
|
147
165
|
i0.ɵɵtext(5);
|
|
148
166
|
i0.ɵɵelementEnd()();
|
|
149
167
|
} if (rf & 2) {
|
|
150
|
-
const ctx_r1 = i0.ɵɵnextContext(
|
|
168
|
+
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
151
169
|
i0.ɵɵadvance(5);
|
|
152
170
|
i0.ɵɵtextInterpolate(ctx_r1.node.error);
|
|
153
171
|
} }
|
|
154
|
-
function
|
|
155
|
-
i0.ɵɵelementStart(0, "div",
|
|
156
|
-
i0.ɵɵelement(2, "i",
|
|
172
|
+
function ExecutionNodeComponent_Conditional_21_Conditional_3_Template(rf, ctx) { if (rf & 1) {
|
|
173
|
+
i0.ɵɵelementStart(0, "div", 30)(1, "div", 33);
|
|
174
|
+
i0.ɵɵelement(2, "i", 36);
|
|
157
175
|
i0.ɵɵtext(3, " Input ");
|
|
158
176
|
i0.ɵɵelementEnd();
|
|
159
|
-
i0.ɵɵelementStart(4, "div",
|
|
177
|
+
i0.ɵɵelementStart(4, "div", 35);
|
|
160
178
|
i0.ɵɵtext(5);
|
|
161
179
|
i0.ɵɵelementEnd()();
|
|
162
180
|
} if (rf & 2) {
|
|
163
|
-
const ctx_r1 = i0.ɵɵnextContext(
|
|
181
|
+
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
164
182
|
i0.ɵɵadvance(5);
|
|
165
183
|
i0.ɵɵtextInterpolate(ctx_r1.node.inputPreview);
|
|
166
184
|
} }
|
|
167
|
-
function
|
|
168
|
-
i0.ɵɵelementStart(0, "div",
|
|
169
|
-
i0.ɵɵelement(2, "i",
|
|
185
|
+
function ExecutionNodeComponent_Conditional_21_Conditional_4_Template(rf, ctx) { if (rf & 1) {
|
|
186
|
+
i0.ɵɵelementStart(0, "div", 30)(1, "div", 33);
|
|
187
|
+
i0.ɵɵelement(2, "i", 37);
|
|
170
188
|
i0.ɵɵtext(3, " Output ");
|
|
171
189
|
i0.ɵɵelementEnd();
|
|
172
|
-
i0.ɵɵelementStart(4, "div",
|
|
190
|
+
i0.ɵɵelementStart(4, "div", 35);
|
|
173
191
|
i0.ɵɵtext(5);
|
|
174
192
|
i0.ɵɵelementEnd()();
|
|
175
193
|
} if (rf & 2) {
|
|
176
|
-
const ctx_r1 = i0.ɵɵnextContext(
|
|
194
|
+
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
177
195
|
i0.ɵɵadvance(5);
|
|
178
196
|
i0.ɵɵtextInterpolate(ctx_r1.node.outputPreview);
|
|
179
197
|
} }
|
|
180
|
-
function
|
|
181
|
-
i0.ɵɵelementStart(0, "div",
|
|
182
|
-
i0.ɵɵ
|
|
183
|
-
i0.ɵɵelementEnd();
|
|
184
|
-
} if (rf & 2) {
|
|
185
|
-
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
186
|
-
i0.ɵɵadvance();
|
|
187
|
-
i0.ɵɵconditional(ctx_r1.node.error ? 1 : -1);
|
|
188
|
-
i0.ɵɵadvance();
|
|
189
|
-
i0.ɵɵconditional(ctx_r1.node.inputPreview ? 2 : -1);
|
|
190
|
-
i0.ɵɵadvance();
|
|
191
|
-
i0.ɵɵconditional(ctx_r1.node.outputPreview ? 3 : -1);
|
|
198
|
+
function ExecutionNodeComponent_Conditional_21_Conditional_5_Template(rf, ctx) { if (rf & 1) {
|
|
199
|
+
i0.ɵɵelementStart(0, "div", 30)(1, "div", 35);
|
|
200
|
+
i0.ɵɵtext(2, "No additional details available for this step.");
|
|
201
|
+
i0.ɵɵelementEnd()();
|
|
192
202
|
} }
|
|
193
|
-
function
|
|
194
|
-
i0.ɵɵtemplate(0,
|
|
203
|
+
function ExecutionNodeComponent_Conditional_21_Template(rf, ctx) { if (rf & 1) {
|
|
204
|
+
i0.ɵɵtemplate(0, ExecutionNodeComponent_Conditional_21_Conditional_0_Template, 3, 2, "div", 28);
|
|
205
|
+
i0.ɵɵelementStart(1, "div", 18);
|
|
206
|
+
i0.ɵɵtemplate(2, ExecutionNodeComponent_Conditional_21_Conditional_2_Template, 6, 1, "div", 29)(3, ExecutionNodeComponent_Conditional_21_Conditional_3_Template, 6, 1, "div", 30)(4, ExecutionNodeComponent_Conditional_21_Conditional_4_Template, 6, 1, "div", 30)(5, ExecutionNodeComponent_Conditional_21_Conditional_5_Template, 3, 0, "div", 30);
|
|
207
|
+
i0.ɵɵelementEnd();
|
|
195
208
|
} if (rf & 2) {
|
|
196
209
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
197
210
|
i0.ɵɵconditional(ctx_r1.node.detailsMarkdown || ctx_r1.isNameTruncated() ? 0 : -1);
|
|
211
|
+
i0.ɵɵadvance(2);
|
|
212
|
+
i0.ɵɵconditional(ctx_r1.node.error ? 2 : -1);
|
|
213
|
+
i0.ɵɵadvance();
|
|
214
|
+
i0.ɵɵconditional(ctx_r1.node.inputPreview ? 3 : -1);
|
|
215
|
+
i0.ɵɵadvance();
|
|
216
|
+
i0.ɵɵconditional(ctx_r1.node.outputPreview ? 4 : -1);
|
|
198
217
|
i0.ɵɵadvance();
|
|
199
|
-
i0.ɵɵconditional(ctx_r1.node.inputPreview
|
|
218
|
+
i0.ɵɵconditional(!ctx_r1.node.error && !ctx_r1.node.inputPreview && !ctx_r1.node.outputPreview && !ctx_r1.node.detailsMarkdown && !ctx_r1.isNameTruncated() ? 5 : -1);
|
|
200
219
|
} }
|
|
201
|
-
function
|
|
202
|
-
const
|
|
203
|
-
i0.ɵɵelementStart(0, "mj-execution-node",
|
|
204
|
-
i0.ɵɵlistener("toggleNode", function
|
|
220
|
+
function ExecutionNodeComponent_Conditional_22_For_1_Template(rf, ctx) { if (rf & 1) {
|
|
221
|
+
const _r4 = i0.ɵɵgetCurrentView();
|
|
222
|
+
i0.ɵɵelementStart(0, "mj-execution-node", 39);
|
|
223
|
+
i0.ɵɵlistener("toggleNode", function ExecutionNodeComponent_Conditional_22_For_1_Template_mj_execution_node_toggleNode_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleNode.emit($event)); })("userInteracted", function ExecutionNodeComponent_Conditional_22_For_1_Template_mj_execution_node_userInteracted_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.userInteracted.emit()); });
|
|
205
224
|
i0.ɵɵelementEnd();
|
|
206
225
|
} if (rf & 2) {
|
|
207
|
-
const
|
|
208
|
-
i0.ɵɵproperty("node",
|
|
226
|
+
const child_r5 = ctx.$implicit;
|
|
227
|
+
i0.ɵɵproperty("node", child_r5)("depth", child_r5.depth);
|
|
209
228
|
} }
|
|
210
|
-
function
|
|
211
|
-
i0.ɵɵrepeaterCreate(0,
|
|
229
|
+
function ExecutionNodeComponent_Conditional_22_Template(rf, ctx) { if (rf & 1) {
|
|
230
|
+
i0.ɵɵrepeaterCreate(0, ExecutionNodeComponent_Conditional_22_For_1_Template, 1, 2, "mj-execution-node", 38, _forTrack0);
|
|
212
231
|
} if (rf & 2) {
|
|
213
232
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
214
233
|
i0.ɵɵrepeater(ctx_r1.node.children);
|
|
215
234
|
} }
|
|
216
235
|
export class ExecutionNodeComponent {
|
|
217
236
|
constructor() {
|
|
237
|
+
this.depth = 0; // Add depth input
|
|
218
238
|
this.toggleNode = new EventEmitter();
|
|
219
239
|
this.userInteracted = new EventEmitter();
|
|
220
240
|
}
|
|
241
|
+
// NEW: Add events for node navigation
|
|
242
|
+
// Note: Removed navigateToStep functionality
|
|
221
243
|
hasExpandableContent() {
|
|
222
244
|
return !!(this.node.children && this.node.children.length > 0) ||
|
|
223
245
|
this.node.type === 'sub-agent' ||
|
|
@@ -230,21 +252,37 @@ export class ExecutionNodeComponent {
|
|
|
230
252
|
hasChildren() {
|
|
231
253
|
return !!(this.node.children && this.node.children.length > 0);
|
|
232
254
|
}
|
|
233
|
-
|
|
255
|
+
onToggleChildren(event) {
|
|
234
256
|
if (event) {
|
|
235
257
|
event.stopPropagation();
|
|
236
258
|
}
|
|
237
|
-
if (this.
|
|
259
|
+
if (this.hasChildren()) {
|
|
238
260
|
this.toggleNode.emit(this.node);
|
|
239
261
|
this.userInteracted.emit();
|
|
240
262
|
}
|
|
241
263
|
}
|
|
264
|
+
onToggleDetails(event) {
|
|
265
|
+
if (event) {
|
|
266
|
+
event.stopPropagation();
|
|
267
|
+
}
|
|
268
|
+
if (this.hasNodeDetails()) {
|
|
269
|
+
this.node.detailsExpanded = !this.node.detailsExpanded;
|
|
270
|
+
this.userInteracted.emit();
|
|
271
|
+
}
|
|
272
|
+
}
|
|
242
273
|
onDoubleClick() {
|
|
243
|
-
if (this.
|
|
274
|
+
if (this.hasChildren()) {
|
|
244
275
|
this.toggleNode.emit(this.node);
|
|
245
276
|
this.userInteracted.emit();
|
|
246
277
|
}
|
|
247
278
|
}
|
|
279
|
+
hasNodeDetails() {
|
|
280
|
+
return !!this.node.inputPreview ||
|
|
281
|
+
!!this.node.outputPreview ||
|
|
282
|
+
!!this.node.error ||
|
|
283
|
+
!!this.node.detailsMarkdown ||
|
|
284
|
+
this.isNameTruncated();
|
|
285
|
+
}
|
|
248
286
|
getTruncatedName() {
|
|
249
287
|
const maxLength = 120;
|
|
250
288
|
if (this.node.name.length <= maxLength) {
|
|
@@ -302,67 +340,73 @@ export class ExecutionNodeComponent {
|
|
|
302
340
|
return html;
|
|
303
341
|
}
|
|
304
342
|
static { this.ɵfac = function ExecutionNodeComponent_Factory(t) { return new (t || ExecutionNodeComponent)(); }; }
|
|
305
|
-
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ExecutionNodeComponent, selectors: [["mj-execution-node"]], inputs: { node: "node" }, outputs: { toggleNode: "toggleNode", userInteracted: "userInteracted" }, standalone: true, features: [i0.ɵɵStandaloneFeature], decls:
|
|
343
|
+
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ExecutionNodeComponent, selectors: [["mj-execution-node"]], inputs: { node: "node", depth: "depth" }, outputs: { toggleNode: "toggleNode", userInteracted: "userInteracted" }, standalone: true, features: [i0.ɵɵStandaloneFeature], decls: 23, vars: 19, consts: [[1, "tree-node"], [1, "node-header", 3, "dblclick"], ["title", "Toggle children", 1, "expand-icon", "fa-solid", 3, "fa-chevron-down", "fa-chevron-right"], [1, "status-icon"], [1, "fa-regular", "fa-circle"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-check-circle"], [1, "fa-solid", "fa-times-circle"], [1, "type-icon", 3, "title"], [1, "fa-solid", "fa-shield-halved"], [1, "fa-solid", "fa-brain"], [1, "fa-solid", "fa-code-branch"], [1, "fa-solid", "fa-comments"], [1, "node-name"], [2, "color", "#666", "margin-right", "8px"], [1, "node-duration"], [1, "node-metrics"], [1, "details-toggle-btn", 3, "title"], [1, "node-details"], ["title", "Toggle children", 1, "expand-icon", "fa-solid", 3, "click"], [3, "class"], [1, "fa-solid", "fa-bolt"], [1, "agent-logo-icon", 3, "src", "alt"], [1, "fa-solid", "fa-sitemap"], [1, "tokens"], [1, "cost"], [1, "details-toggle-btn", 3, "click", "title"], [1, "fa-solid"], [1, "markdown-details"], [1, "detail-section", "error"], [1, "detail-section"], [1, "full-name"], [1, "detail-content", "markdown", 3, "innerHTML"], [1, "detail-label"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "detail-content"], [1, "fa-solid", "fa-sign-in-alt"], [1, "fa-solid", "fa-sign-out-alt"], [3, "node", "depth"], [3, "toggleNode", "userInteracted", "node", "depth"]], template: function ExecutionNodeComponent_Template(rf, ctx) { if (rf & 1) {
|
|
306
344
|
i0.ɵɵelementStart(0, "div", 0)(1, "div", 1);
|
|
307
345
|
i0.ɵɵlistener("dblclick", function ExecutionNodeComponent_Template_div_dblclick_1_listener() { return ctx.onDoubleClick(); });
|
|
308
|
-
i0.ɵɵtemplate(2, ExecutionNodeComponent_Conditional_2_Template, 1, 4, "i", 2)
|
|
309
|
-
i0.ɵɵelementStart(
|
|
310
|
-
i0.ɵɵtemplate(
|
|
346
|
+
i0.ɵɵtemplate(2, ExecutionNodeComponent_Conditional_2_Template, 1, 4, "i", 2);
|
|
347
|
+
i0.ɵɵelementStart(3, "span", 3);
|
|
348
|
+
i0.ɵɵtemplate(4, ExecutionNodeComponent_Case_4_Template, 1, 0, "i", 4)(5, ExecutionNodeComponent_Case_5_Template, 1, 0, "i", 5)(6, ExecutionNodeComponent_Case_6_Template, 1, 0, "i", 6)(7, ExecutionNodeComponent_Case_7_Template, 1, 0, "i", 7);
|
|
311
349
|
i0.ɵɵelementEnd();
|
|
312
|
-
i0.ɵɵelementStart(
|
|
313
|
-
i0.ɵɵtemplate(
|
|
350
|
+
i0.ɵɵelementStart(8, "span", 8);
|
|
351
|
+
i0.ɵɵtemplate(9, ExecutionNodeComponent_Case_9_Template, 1, 0, "i", 9)(10, ExecutionNodeComponent_Case_10_Template, 1, 0, "i", 10)(11, ExecutionNodeComponent_Case_11_Template, 2, 1)(12, ExecutionNodeComponent_Case_12_Template, 3, 1)(13, ExecutionNodeComponent_Case_13_Template, 1, 0, "i", 11)(14, ExecutionNodeComponent_Case_14_Template, 1, 0, "i", 12);
|
|
314
352
|
i0.ɵɵelementEnd();
|
|
315
|
-
i0.ɵɵelementStart(
|
|
353
|
+
i0.ɵɵelementStart(15, "span", 13);
|
|
354
|
+
i0.ɵɵtemplate(16, ExecutionNodeComponent_Conditional_16_Template, 2, 1, "small", 14);
|
|
316
355
|
i0.ɵɵtext(17);
|
|
317
356
|
i0.ɵɵelementEnd();
|
|
318
|
-
i0.ɵɵtemplate(18, ExecutionNodeComponent_Conditional_18_Template, 2, 1, "span", 15)(19, ExecutionNodeComponent_Conditional_19_Template, 3, 2, "span", 16);
|
|
357
|
+
i0.ɵɵtemplate(18, ExecutionNodeComponent_Conditional_18_Template, 2, 1, "span", 15)(19, ExecutionNodeComponent_Conditional_19_Template, 3, 2, "span", 16)(20, ExecutionNodeComponent_Conditional_20_Template, 2, 5, "button", 17);
|
|
319
358
|
i0.ɵɵelementEnd();
|
|
320
|
-
i0.ɵɵtemplate(
|
|
359
|
+
i0.ɵɵtemplate(21, ExecutionNodeComponent_Conditional_21_Template, 6, 5, "div", 18)(22, ExecutionNodeComponent_Conditional_22_Template, 2, 0);
|
|
321
360
|
i0.ɵɵelementEnd();
|
|
322
361
|
} if (rf & 2) {
|
|
323
|
-
let
|
|
324
|
-
let
|
|
325
|
-
i0.ɵɵ
|
|
326
|
-
i0.ɵɵclassProp("expanded", ctx.node.expanded);
|
|
327
|
-
i0.ɵɵadvance(2);
|
|
328
|
-
i0.ɵɵconditional(ctx.hasExpandableContent() ? 2 : 3);
|
|
362
|
+
let tmp_5_0;
|
|
363
|
+
let tmp_7_0;
|
|
364
|
+
i0.ɵɵclassMap("depth-" + ctx.node.depth + " type-" + ctx.node.type);
|
|
365
|
+
i0.ɵɵclassProp("expanded", ctx.node.expanded)("has-children", ctx.hasChildren());
|
|
329
366
|
i0.ɵɵadvance(2);
|
|
367
|
+
i0.ɵɵconditional(ctx.hasChildren() ? 2 : -1);
|
|
368
|
+
i0.ɵɵadvance();
|
|
330
369
|
i0.ɵɵclassMap("status-" + ctx.node.status);
|
|
331
370
|
i0.ɵɵadvance();
|
|
332
|
-
i0.ɵɵconditional((
|
|
371
|
+
i0.ɵɵconditional((tmp_5_0 = ctx.node.status) === "pending" ? 4 : tmp_5_0 === "running" ? 5 : tmp_5_0 === "completed" ? 6 : tmp_5_0 === "failed" ? 7 : -1);
|
|
333
372
|
i0.ɵɵadvance(4);
|
|
334
373
|
i0.ɵɵproperty("title", ctx.getNodeTitle());
|
|
335
374
|
i0.ɵɵadvance();
|
|
336
|
-
i0.ɵɵconditional((
|
|
375
|
+
i0.ɵɵconditional((tmp_7_0 = ctx.node.type) === "validation" ? 9 : tmp_7_0 === "prompt" ? 10 : tmp_7_0 === "action" ? 11 : tmp_7_0 === "sub-agent" ? 12 : tmp_7_0 === "decision" ? 13 : tmp_7_0 === "chat" ? 14 : -1);
|
|
337
376
|
i0.ɵɵadvance(7);
|
|
377
|
+
i0.ɵɵconditional(ctx.node.type === "sub-agent" && ctx.node.depth > 0 ? 16 : -1);
|
|
378
|
+
i0.ɵɵadvance();
|
|
338
379
|
i0.ɵɵtextInterpolate1(" ", ctx.getTruncatedName(), " ");
|
|
339
380
|
i0.ɵɵadvance();
|
|
340
381
|
i0.ɵɵconditional(ctx.node.duration ? 18 : -1);
|
|
341
382
|
i0.ɵɵadvance();
|
|
342
383
|
i0.ɵɵconditional(ctx.node.tokensUsed || ctx.node.cost ? 19 : -1);
|
|
343
384
|
i0.ɵɵadvance();
|
|
344
|
-
i0.ɵɵconditional(ctx.
|
|
385
|
+
i0.ɵɵconditional(ctx.hasNodeDetails() ? 20 : -1);
|
|
386
|
+
i0.ɵɵadvance();
|
|
387
|
+
i0.ɵɵconditional(ctx.node.detailsExpanded ? 21 : -1);
|
|
345
388
|
i0.ɵɵadvance();
|
|
346
|
-
i0.ɵɵconditional(ctx.node.expanded && ctx.node.children ?
|
|
347
|
-
} }, dependencies: [ExecutionNodeComponent, CommonModule], styles: ["[_nghost-%COMP%] {\n display: block;\n width: 100%;\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 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%] {\n width: 20px;\n height: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n color: #666;\n font-size: 10px;\n cursor: pointer;\n border-radius: 3px;\n transition: all 0.2s ease;\n }\n \n .expand-icon[_ngcontent-%COMP%]:hover {\n background: #e0e0e0;\n color: #333;\n }\n \n .expand-spacer[_ngcontent-%COMP%] {\n width: 20px;\n text-align: center;\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 display: flex;\n align-items: center;\n justify-content: center;\n font-size: 14px;\n color: #666;\n }\n \n .agent-logo-icon[_ngcontent-%COMP%] {\n width: 16px;\n height: 16px;\n object-fit: cover;\n border-radius: 3px;\n }\n \n .node-name[_ngcontent-%COMP%] {\n flex: 1;\n font-size: 13px;\n font-weight: 500;\n color: #1a1a1a;\n }\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 .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: #555;\n }\n \n .detail-content[_ngcontent-%COMP%] {\n white-space: pre-wrap;\n word-break: break-word;\n color: #333;\n line-height: 1.4;\n }\n \n .markdown-details[_ngcontent-%COMP%] {\n margin: 8px 0 8px 44px;\n padding: 12px;\n background: #f9f9f9;\n border-left: 3px solid #2196f3;\n border-radius: 0 4px 4px 0;\n font-size: 13px;\n }\n \n .markdown[_ngcontent-%COMP%] h3[_ngcontent-%COMP%], .markdown[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 8px 0 4px 0;\n color: #1a1a1a;\n }\n \n .markdown[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n font-size: 14px;\n }\n \n .markdown[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n font-size: 13px;\n }\n \n .markdown[_ngcontent-%COMP%] ul[_ngcontent-%COMP%] {\n margin: 4px 0;\n padding-left: 20px;\n }\n \n .markdown[_ngcontent-%COMP%] li[_ngcontent-%COMP%] {\n margin: 2px 0;\n }\n \n .markdown[_ngcontent-%COMP%] code[_ngcontent-%COMP%] {\n background: #e8e8e8;\n padding: 1px 4px;\n border-radius: 3px;\n font-size: 12px;\n }\n \n .markdown[_ngcontent-%COMP%] pre[_ngcontent-%COMP%] {\n background: #f5f5f5;\n padding: 8px;\n border-radius: 4px;\n overflow-x: auto;\n margin: 4px 0;\n }\n \n .markdown[_ngcontent-%COMP%] pre[_ngcontent-%COMP%] code[_ngcontent-%COMP%] {\n background: none;\n padding: 0;\n }\n \n .markdown[_ngcontent-%COMP%] strong[_ngcontent-%COMP%] {\n font-weight: 600;\n color: #1a1a1a;\n }\n \n .markdown[_ngcontent-%COMP%] em[_ngcontent-%COMP%] {\n font-style: italic;\n color: #555;\n }\n \n .full-name[_ngcontent-%COMP%] {\n font-weight: 600;\n color: #1a1a1a;\n margin-bottom: 8px;\n padding-bottom: 8px;\n border-bottom: 1px solid #e0e0e0;\n word-wrap: break-word;\n }"] }); }
|
|
389
|
+
i0.ɵɵconditional(ctx.node.expanded && ctx.node.children && ctx.node.children.length > 0 ? 22 : -1);
|
|
390
|
+
} }, dependencies: [ExecutionNodeComponent, CommonModule], styles: ["[_nghost-%COMP%] {\n display: block;\n width: 100%;\n }\n \n \n\n .tree-node[_ngcontent-%COMP%] {\n margin: 4px 0;\n position: relative;\n }\n \n \n\n .depth-0[_ngcontent-%COMP%] { \n margin-left: 0;\n position: relative;\n z-index: 2;\n }\n .depth-0[_ngcontent-%COMP%]::after {\n display: none;\n }\n .depth-0[_ngcontent-%COMP%] .node-header[_ngcontent-%COMP%] { \n background: #f8f9fa;\n border: 2px solid #e0e0e0;\n font-weight: 600;\n position: relative;\n z-index: 10;\n }\n \n \n\n .depth-1[_ngcontent-%COMP%] {\n margin-left: 24px;\n }\n .depth-1[_ngcontent-%COMP%] .node-header[_ngcontent-%COMP%] {\n background: #fafafa;\n border-color: #d0d0d0;\n }\n \n .depth-2[_ngcontent-%COMP%] {\n margin-left: 48px;\n }\n .depth-2[_ngcontent-%COMP%] .node-header[_ngcontent-%COMP%] {\n background: #fcfcfc;\n border-color: #c0c0c0;\n }\n \n .depth-3[_ngcontent-%COMP%] {\n margin-left: 72px;\n }\n .depth-3[_ngcontent-%COMP%] .node-header[_ngcontent-%COMP%] {\n background: #fdfdfd;\n border-color: #b0b0b0;\n }\n \n .depth-4[_ngcontent-%COMP%] {\n margin-left: 96px;\n }\n .depth-4[_ngcontent-%COMP%] .node-header[_ngcontent-%COMP%] {\n background: #fefefe;\n border-color: #a0a0a0;\n }\n \n .depth-5[_ngcontent-%COMP%] {\n margin-left: 120px;\n }\n .depth-5[_ngcontent-%COMP%] .node-header[_ngcontent-%COMP%] {\n background: #fefefe;\n border-color: #a0a0a0;\n }\n \n .depth-6[_ngcontent-%COMP%] {\n margin-left: 144px;\n }\n .depth-6[_ngcontent-%COMP%] .node-header[_ngcontent-%COMP%] {\n background: #fefefe;\n border-color: #a0a0a0;\n }\n\n \n\n .depth-0[_ngcontent-%COMP%] { \n position: relative;\n overflow: hidden;\n z-index: 2;\n }\n .depth-0[_ngcontent-%COMP%] .node-header[_ngcontent-%COMP%] { \n background: #f8f9fa;\n position: relative;\n z-index: 2;\n }\n \n \n\n .depth-0.has-children[_ngcontent-%COMP%]::before {\n content: '';\n position: absolute;\n left: 12px;\n top: 0;\n width: 2px;\n height: 100%;\n border-left: 2px dotted #c0c7d0;\n z-index: 0; \n\n }\n \n \n\n .depth-1[_ngcontent-%COMP%] { \n margin-left: 30px;\n padding-left: 12px;\n position: relative;\n z-index: 1;\n }\n .depth-1[_ngcontent-%COMP%] .node-header[_ngcontent-%COMP%] { \n background: #fafbfc;\n position: relative;\n z-index: 1;\n }\n \n \n\n .depth-1[_ngcontent-%COMP%]::after {\n content: '';\n position: absolute;\n left: -15px;\n top: 12px;\n width: 25px;\n height: 2px;\n border-bottom: 2px dotted #c0c7d0;\n z-index: 1;\n }\n \n \n\n .tree-node.details-expanded[_ngcontent-%COMP%] > .node-header[_ngcontent-%COMP%] {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n border-bottom: 1px solid #2196f3;\n }\n \n .node-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n border: 1px solid #e0e0e0;\n border-radius: 6px;\n transition: all 0.2s ease;\n user-select: none;\n position: relative;\n z-index: 5;\n background: white;\n }\n \n .node-header[_ngcontent-%COMP%]:hover {\n background: var(--gray-700);\n border-color: var(--mj-blue) !important;\n }\n \n \n\n .tree-node.type-sub-agent[_ngcontent-%COMP%] > .node-header[_ngcontent-%COMP%] {\n border-left: 4px solid var(--mj-blue);\n }\n \n \n\n .tree-node.type-action[_ngcontent-%COMP%] > .node-header[_ngcontent-%COMP%] {\n border-left: 4px solid #4caf50;\n }\n \n .expand-icon[_ngcontent-%COMP%] {\n width: 20px;\n height: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n color: #666;\n font-size: 10px;\n cursor: pointer;\n border-radius: 3px;\n transition: all 0.2s ease;\n z-index: 10; \n\n position: relative;\n }\n \n .expand-icon[_ngcontent-%COMP%]:hover {\n background: #e0e0e0;\n color: #333;\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 display: flex;\n align-items: center;\n justify-content: center;\n font-size: 14px;\n color: #666;\n }\n \n .agent-logo-icon[_ngcontent-%COMP%] {\n width: 16px;\n height: 16px;\n object-fit: cover;\n border-radius: 3px;\n }\n \n .node-name[_ngcontent-%COMP%] {\n flex: 1;\n font-size: 13px;\n font-weight: 500;\n color: #1a1a1a;\n }\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 .details-toggle-btn[_ngcontent-%COMP%] {\n width: 28px;\n height: 28px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: transparent;\n border: 1px solid #e0e0e0;\n border-radius: 4px;\n cursor: pointer;\n transition: all 0.2s ease;\n font-size: 12px;\n color: #666;\n margin-left: 4px;\n }\n \n .details-toggle-btn[_ngcontent-%COMP%]:hover {\n background: #f0f0f0;\n border-color: #2196f3;\n color: #2196f3;\n }\n \n .details-toggle-btn[_ngcontent-%COMP%]:active {\n background: #e3f2fd;\n }\n \n \n\n .tree-node.details-expanded[_ngcontent-%COMP%] .details-toggle-btn[_ngcontent-%COMP%] {\n background: #2196f3;\n border-color: #2196f3;\n color: white;\n }\n \n .tree-node.details-expanded[_ngcontent-%COMP%] .details-toggle-btn[_ngcontent-%COMP%]:hover {\n background: #1976d2;\n border-color: #1976d2;\n }\n \n .node-details[_ngcontent-%COMP%] {\n margin: 0 5px;\n padding: 16px;\n background: var(--gray-600);\n border: 1px solid var(--gray-700);\n border-top: none;\n border-radius: 0 0 6px 6px;\n font-size: 12px;\n position: relative;\n z-index: 4;\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: #555;\n }\n \n .detail-content[_ngcontent-%COMP%] {\n white-space: pre-wrap;\n word-break: break-word;\n color: #333;\n line-height: 1.4;\n }\n \n .markdown-details[_ngcontent-%COMP%] {\n margin: 8px 0 8px 44px;\n padding: 12px;\n background: #f9f9f9;\n border-left: 3px solid #2196f3;\n border-radius: 0 4px 4px 0;\n font-size: 13px;\n }\n \n .markdown[_ngcontent-%COMP%] h3[_ngcontent-%COMP%], .markdown[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 8px 0 4px 0;\n color: #1a1a1a;\n }\n \n .markdown[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n font-size: 14px;\n }\n \n .markdown[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n font-size: 13px;\n }\n \n .markdown[_ngcontent-%COMP%] ul[_ngcontent-%COMP%] {\n margin: 4px 0;\n padding-left: 20px;\n }\n \n .markdown[_ngcontent-%COMP%] li[_ngcontent-%COMP%] {\n margin: 2px 0;\n }\n \n .markdown[_ngcontent-%COMP%] code[_ngcontent-%COMP%] {\n background: #e8e8e8;\n padding: 1px 4px;\n border-radius: 3px;\n font-size: 12px;\n }\n \n .markdown[_ngcontent-%COMP%] pre[_ngcontent-%COMP%] {\n background: #f5f5f5;\n padding: 8px;\n border-radius: 4px;\n overflow-x: auto;\n margin: 4px 0;\n }\n \n .markdown[_ngcontent-%COMP%] pre[_ngcontent-%COMP%] code[_ngcontent-%COMP%] {\n background: none;\n padding: 0;\n }\n \n .markdown[_ngcontent-%COMP%] strong[_ngcontent-%COMP%] {\n font-weight: 600;\n color: #1a1a1a;\n }\n \n .markdown[_ngcontent-%COMP%] em[_ngcontent-%COMP%] {\n font-style: italic;\n color: #555;\n }\n \n .full-name[_ngcontent-%COMP%] {\n font-weight: 600;\n color: #1a1a1a;\n margin-bottom: 8px;\n padding-bottom: 8px;\n border-bottom: 1px solid #e0e0e0;\n word-wrap: break-word;\n }"] }); }
|
|
348
391
|
}
|
|
349
392
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ExecutionNodeComponent, [{
|
|
350
393
|
type: Component,
|
|
351
394
|
args: [{ selector: 'mj-execution-node', standalone: true, imports: [CommonModule], template: `
|
|
352
395
|
<div class="tree-node"
|
|
353
396
|
[class.expanded]="node.expanded"
|
|
354
|
-
[
|
|
397
|
+
[class.has-children]="hasChildren()"
|
|
398
|
+
[class]="'depth-' + node.depth + ' type-' + node.type">
|
|
355
399
|
|
|
356
400
|
<!-- Node Header -->
|
|
357
|
-
<div class="node-header"
|
|
358
|
-
|
|
359
|
-
|
|
401
|
+
<div class="node-header"
|
|
402
|
+
(dblclick)="onDoubleClick()">
|
|
403
|
+
<!-- Expand/Collapse Icon - Only show if node has children -->
|
|
404
|
+
@if (hasChildren()) {
|
|
360
405
|
<i class="expand-icon fa-solid"
|
|
361
406
|
[class.fa-chevron-down]="node.expanded"
|
|
362
407
|
[class.fa-chevron-right]="!node.expanded"
|
|
363
|
-
(click)="
|
|
364
|
-
|
|
365
|
-
<span class="expand-spacer"></span>
|
|
408
|
+
(click)="onToggleChildren($event)"
|
|
409
|
+
title="Toggle children"></i>
|
|
366
410
|
}
|
|
367
411
|
|
|
368
412
|
<!-- Status Icon -->
|
|
@@ -417,8 +461,11 @@ export class ExecutionNodeComponent {
|
|
|
417
461
|
}
|
|
418
462
|
</span>
|
|
419
463
|
|
|
420
|
-
<!-- Node Name -->
|
|
464
|
+
<!-- Node Name with depth indicator for sub-agents -->
|
|
421
465
|
<span class="node-name">
|
|
466
|
+
@if (node.type === 'sub-agent' && node.depth > 0) {
|
|
467
|
+
<small style="color: #666; margin-right: 8px;">[Level {{ node.depth }}]</small>
|
|
468
|
+
}
|
|
422
469
|
{{ getTruncatedName() }}
|
|
423
470
|
</span>
|
|
424
471
|
|
|
@@ -438,10 +485,21 @@ export class ExecutionNodeComponent {
|
|
|
438
485
|
}
|
|
439
486
|
</span>
|
|
440
487
|
}
|
|
488
|
+
|
|
489
|
+
<!-- Details Toggle Button - Only show if node has details -->
|
|
490
|
+
@if (hasNodeDetails()) {
|
|
491
|
+
<button class="details-toggle-btn"
|
|
492
|
+
(click)="onToggleDetails($event)"
|
|
493
|
+
[title]="node.detailsExpanded ? 'Hide details' : 'Show details'">
|
|
494
|
+
<i class="fa-solid"
|
|
495
|
+
[class.fa-info]="!node.detailsExpanded"
|
|
496
|
+
[class.fa-times]="node.detailsExpanded"></i>
|
|
497
|
+
</button>
|
|
498
|
+
}
|
|
441
499
|
</div>
|
|
442
500
|
|
|
443
|
-
<!--
|
|
444
|
-
@if (node.
|
|
501
|
+
<!-- Node Details (when details are expanded) -->
|
|
502
|
+
@if (node.detailsExpanded) {
|
|
445
503
|
<!-- Show markdown details first if available -->
|
|
446
504
|
@if (node.detailsMarkdown || isNameTruncated()) {
|
|
447
505
|
<div class="markdown-details">
|
|
@@ -454,7 +512,7 @@ export class ExecutionNodeComponent {
|
|
|
454
512
|
</div>
|
|
455
513
|
}
|
|
456
514
|
|
|
457
|
-
|
|
515
|
+
<!-- Always show details section if node is expanded, even if some content is empty -->
|
|
458
516
|
<div class="node-details">
|
|
459
517
|
@if (node.error) {
|
|
460
518
|
<div class="detail-section error">
|
|
@@ -480,28 +538,35 @@ export class ExecutionNodeComponent {
|
|
|
480
538
|
<div class="detail-content">{{ node.outputPreview }}</div>
|
|
481
539
|
</div>
|
|
482
540
|
}
|
|
541
|
+
@if (!node.error && !node.inputPreview && !node.outputPreview && !node.detailsMarkdown && !isNameTruncated()) {
|
|
542
|
+
<div class="detail-section">
|
|
543
|
+
<div class="detail-content">No additional details available for this step.</div>
|
|
544
|
+
</div>
|
|
545
|
+
}
|
|
483
546
|
</div>
|
|
484
|
-
}
|
|
485
547
|
}
|
|
486
548
|
|
|
487
|
-
<!-- Children (when expanded) -->
|
|
488
|
-
@if (node.expanded && node.children) {
|
|
549
|
+
<!-- Children (when children are expanded) - HIERARCHICAL DISPLAY -->
|
|
550
|
+
@if (node.expanded && node.children && node.children.length > 0) {
|
|
489
551
|
@for (child of node.children; track child.id) {
|
|
490
552
|
<mj-execution-node
|
|
491
553
|
[node]="child"
|
|
554
|
+
[depth]="child.depth"
|
|
492
555
|
(toggleNode)="toggleNode.emit($event)"
|
|
493
556
|
(userInteracted)="userInteracted.emit()">
|
|
494
557
|
</mj-execution-node>
|
|
495
558
|
}
|
|
496
559
|
}
|
|
497
560
|
</div>
|
|
498
|
-
`, styles: ["\n :host {\n display: block;\n width: 100%;\n }\n \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 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 {\n width: 20px;\n height: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n color: #666;\n font-size: 10px;\n cursor: pointer;\n border-radius: 3px;\n transition: all 0.2s ease;\n }\n \n .expand-icon:hover {\n background: #e0e0e0;\n color: #333;\n }\n \n .expand-spacer {\n width: 20px;\n text-align: center;\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 display: flex;\n align-items: center;\n justify-content: center;\n font-size: 14px;\n color: #666;\n }\n \n .agent-logo-icon {\n width: 16px;\n height: 16px;\n object-fit: cover;\n border-radius: 3px;\n }\n \n .node-name {\n flex: 1;\n font-size: 13px;\n font-weight: 500;\n color: #1a1a1a;\n }\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 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: #555;\n }\n \n .detail-content {\n white-space: pre-wrap;\n word-break: break-word;\n color: #333;\n line-height: 1.4;\n }\n \n .markdown-details {\n margin: 8px 0 8px 44px;\n padding: 12px;\n background: #f9f9f9;\n border-left: 3px solid #2196f3;\n border-radius: 0 4px 4px 0;\n font-size: 13px;\n }\n \n .markdown h3, .markdown h4 {\n margin: 8px 0 4px 0;\n color: #1a1a1a;\n }\n \n .markdown h3 {\n font-size: 14px;\n }\n \n .markdown h4 {\n font-size: 13px;\n }\n \n .markdown ul {\n margin: 4px 0;\n padding-left: 20px;\n }\n \n .markdown li {\n margin: 2px 0;\n }\n \n .markdown code {\n background: #e8e8e8;\n padding: 1px 4px;\n border-radius: 3px;\n font-size: 12px;\n }\n \n .markdown pre {\n background: #f5f5f5;\n padding: 8px;\n border-radius: 4px;\n overflow-x: auto;\n margin: 4px 0;\n }\n \n .markdown pre code {\n background: none;\n padding: 0;\n }\n \n .markdown strong {\n font-weight: 600;\n color: #1a1a1a;\n }\n \n .markdown em {\n font-style: italic;\n color: #555;\n }\n \n .full-name {\n font-weight: 600;\n color: #1a1a1a;\n margin-bottom: 8px;\n padding-bottom: 8px;\n border-bottom: 1px solid #e0e0e0;\n word-wrap: break-word;\n }\n "] }]
|
|
561
|
+
`, styles: ["\n :host {\n display: block;\n width: 100%;\n }\n \n /* Depth-based indentation - each level indents by 24px */\n .tree-node {\n margin: 4px 0;\n position: relative;\n }\n \n /* Root level nodes (depth 0) */\n .depth-0 { \n margin-left: 0;\n position: relative;\n z-index: 2;\n }\n .depth-0::after {\n display: none;\n }\n .depth-0 .node-header { \n background: #f8f9fa;\n border: 2px solid #e0e0e0;\n font-weight: 600;\n position: relative;\n z-index: 10;\n }\n \n /* Sub-level nodes with increasing indentation */\n .depth-1 {\n margin-left: 24px;\n }\n .depth-1 .node-header {\n background: #fafafa;\n border-color: #d0d0d0;\n }\n \n .depth-2 {\n margin-left: 48px;\n }\n .depth-2 .node-header {\n background: #fcfcfc;\n border-color: #c0c0c0;\n }\n \n .depth-3 {\n margin-left: 72px;\n }\n .depth-3 .node-header {\n background: #fdfdfd;\n border-color: #b0b0b0;\n }\n \n .depth-4 {\n margin-left: 96px;\n }\n .depth-4 .node-header {\n background: #fefefe;\n border-color: #a0a0a0;\n }\n \n .depth-5 {\n margin-left: 120px;\n }\n .depth-5 .node-header {\n background: #fefefe;\n border-color: #a0a0a0;\n }\n \n .depth-6 {\n margin-left: 144px;\n }\n .depth-6 .node-header {\n background: #fefefe;\n border-color: #a0a0a0;\n }\n\n /* Root level - higher z-index to hide lines behind it */\n .depth-0 { \n position: relative;\n overflow: hidden;\n z-index: 2;\n }\n .depth-0 .node-header { \n background: #f8f9fa;\n position: relative;\n z-index: 2;\n }\n \n /* Only add left padding for nodes with children (that show chevrons) */\n .depth-0.has-children::before {\n content: '';\n position: absolute;\n left: 12px;\n top: 0;\n width: 2px;\n height: 100%;\n border-left: 2px dotted #c0c7d0;\n z-index: 0; /* Behind everything */\n }\n \n /* Child level - only for nodes that actually have parent chevrons */\n .depth-1 { \n margin-left: 30px;\n padding-left: 12px;\n position: relative;\n z-index: 1;\n }\n .depth-1 .node-header { \n background: #fafbfc;\n position: relative;\n z-index: 1;\n }\n \n /* Horizontal line connecting to each child node - only when parent has children */\n .depth-1::after {\n content: '';\n position: absolute;\n left: -15px;\n top: 12px;\n width: 25px;\n height: 2px;\n border-bottom: 2px dotted #c0c7d0;\n z-index: 1;\n }\n \n /* Visual indicator when details are expanded */\n .tree-node.details-expanded > .node-header {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n border-bottom: 1px solid #2196f3;\n }\n \n .node-header {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n border: 1px solid #e0e0e0;\n border-radius: 6px;\n transition: all 0.2s ease;\n user-select: none;\n position: relative;\n z-index: 5;\n background: white;\n }\n \n .node-header:hover {\n background: var(--gray-700);\n border-color: var(--mj-blue) !important;\n }\n \n /* Sub-agent specific styling */\n .tree-node.type-sub-agent > .node-header {\n border-left: 4px solid var(--mj-blue);\n }\n \n /* Action specific styling */\n .tree-node.type-action > .node-header {\n border-left: 4px solid #4caf50;\n }\n \n .expand-icon {\n width: 20px;\n height: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n color: #666;\n font-size: 10px;\n cursor: pointer;\n border-radius: 3px;\n transition: all 0.2s ease;\n z-index: 10; /* Ensure expand icon is clickable */\n position: relative;\n }\n \n .expand-icon:hover {\n background: #e0e0e0;\n color: #333;\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 display: flex;\n align-items: center;\n justify-content: center;\n font-size: 14px;\n color: #666;\n }\n \n .agent-logo-icon {\n width: 16px;\n height: 16px;\n object-fit: cover;\n border-radius: 3px;\n }\n \n .node-name {\n flex: 1;\n font-size: 13px;\n font-weight: 500;\n color: #1a1a1a;\n }\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 /* Details Toggle Button */\n .details-toggle-btn {\n width: 28px;\n height: 28px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: transparent;\n border: 1px solid #e0e0e0;\n border-radius: 4px;\n cursor: pointer;\n transition: all 0.2s ease;\n font-size: 12px;\n color: #666;\n margin-left: 4px;\n }\n \n .details-toggle-btn:hover {\n background: #f0f0f0;\n border-color: #2196f3;\n color: #2196f3;\n }\n \n .details-toggle-btn:active {\n background: #e3f2fd;\n }\n \n /* When details are expanded, style the button differently */\n .tree-node.details-expanded .details-toggle-btn {\n background: #2196f3;\n border-color: #2196f3;\n color: white;\n }\n \n .tree-node.details-expanded .details-toggle-btn:hover {\n background: #1976d2;\n border-color: #1976d2;\n }\n \n .node-details {\n margin: 0 5px;\n padding: 16px;\n background: var(--gray-600);\n border: 1px solid var(--gray-700);\n border-top: none;\n border-radius: 0 0 6px 6px;\n font-size: 12px;\n position: relative;\n z-index: 4;\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: #555;\n }\n \n .detail-content {\n white-space: pre-wrap;\n word-break: break-word;\n color: #333;\n line-height: 1.4;\n }\n \n .markdown-details {\n margin: 8px 0 8px 44px;\n padding: 12px;\n background: #f9f9f9;\n border-left: 3px solid #2196f3;\n border-radius: 0 4px 4px 0;\n font-size: 13px;\n }\n \n .markdown h3, .markdown h4 {\n margin: 8px 0 4px 0;\n color: #1a1a1a;\n }\n \n .markdown h3 {\n font-size: 14px;\n }\n \n .markdown h4 {\n font-size: 13px;\n }\n \n .markdown ul {\n margin: 4px 0;\n padding-left: 20px;\n }\n \n .markdown li {\n margin: 2px 0;\n }\n \n .markdown code {\n background: #e8e8e8;\n padding: 1px 4px;\n border-radius: 3px;\n font-size: 12px;\n }\n \n .markdown pre {\n background: #f5f5f5;\n padding: 8px;\n border-radius: 4px;\n overflow-x: auto;\n margin: 4px 0;\n }\n \n .markdown pre code {\n background: none;\n padding: 0;\n }\n \n .markdown strong {\n font-weight: 600;\n color: #1a1a1a;\n }\n \n .markdown em {\n font-style: italic;\n color: #555;\n }\n \n .full-name {\n font-weight: 600;\n color: #1a1a1a;\n margin-bottom: 8px;\n padding-bottom: 8px;\n border-bottom: 1px solid #e0e0e0;\n word-wrap: break-word;\n }\n "] }]
|
|
499
562
|
}], null, { node: [{
|
|
500
563
|
type: Input
|
|
564
|
+
}], depth: [{
|
|
565
|
+
type: Input
|
|
501
566
|
}], toggleNode: [{
|
|
502
567
|
type: Output
|
|
503
568
|
}], userInteracted: [{
|
|
504
569
|
type: Output
|
|
505
570
|
}] }); })();
|
|
506
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ExecutionNodeComponent, { className: "ExecutionNodeComponent", filePath: "lib/agent-execution-node.component.ts", lineNumber:
|
|
571
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ExecutionNodeComponent, { className: "ExecutionNodeComponent", filePath: "lib/agent-execution-node.component.ts", lineNumber: 568 }); })();
|
|
507
572
|
//# sourceMappingURL=agent-execution-node.component.js.map
|