@memberjunction/ng-ai-test-harness 2.58.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.
@@ -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", 17);
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.onToggleNode($event)); });
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 ExecutionNodeComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
15
- i0.ɵɵelement(0, "span", 3);
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 ExecutionNodeComponent_Case_8_Template(rf, ctx) { if (rf & 1) {
27
- i0.ɵɵelement(0, "i", 8);
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 ExecutionNodeComponent_Case_11_Template(rf, ctx) { if (rf & 1) {
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 ExecutionNodeComponent_Case_12_Conditional_1_Template(rf, ctx) { if (rf & 1) {
42
- i0.ɵɵelement(0, "i", 19);
38
+ function ExecutionNodeComponent_Case_11_Conditional_1_Template(rf, ctx) { if (rf & 1) {
39
+ i0.ɵɵelement(0, "i", 21);
43
40
  } }
44
- function ExecutionNodeComponent_Case_12_Template(rf, ctx) { if (rf & 1) {
45
- i0.ɵɵtemplate(0, ExecutionNodeComponent_Case_12_Conditional_0_Template, 1, 2, "i", 18)(1, ExecutionNodeComponent_Case_12_Conditional_1_Template, 1, 0, "i", 19);
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 ExecutionNodeComponent_Case_13_Conditional_0_Template(rf, ctx) { if (rf & 1) {
51
- i0.ɵɵelement(0, "img", 20);
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 ExecutionNodeComponent_Case_13_Conditional_1_Template(rf, ctx) { if (rf & 1) {
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 ExecutionNodeComponent_Case_13_Conditional_2_Template(rf, ctx) { if (rf & 1) {
63
- i0.ɵɵelement(0, "i", 21);
59
+ function ExecutionNodeComponent_Case_12_Conditional_2_Template(rf, ctx) { if (rf & 1) {
60
+ i0.ɵɵelement(0, "i", 23);
64
61
  } }
65
- function ExecutionNodeComponent_Case_13_Template(rf, ctx) { if (rf & 1) {
66
- i0.ɵɵtemplate(0, ExecutionNodeComponent_Case_13_Conditional_0_Template, 1, 2, "img", 20)(1, ExecutionNodeComponent_Case_13_Conditional_1_Template, 1, 2, "i", 18)(2, ExecutionNodeComponent_Case_13_Conditional_2_Template, 1, 0, "i", 21);
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 ExecutionNodeComponent_Case_15_Template(rf, ctx) { if (rf & 1) {
75
- i0.ɵɵelement(0, "i", 13);
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", 22);
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", 23);
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", 22)(2, ExecutionNodeComponent_Conditional_19_Conditional_2_Template, 2, 1, "span", 23);
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 ExecutionNodeComponent_Conditional_20_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
116
- i0.ɵɵelementStart(0, "div", 26);
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 ExecutionNodeComponent_Conditional_20_Conditional_0_Conditional_2_Template(rf, ctx) { if (rf & 1) {
125
- i0.ɵɵelement(0, "div", 27);
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 ExecutionNodeComponent_Conditional_20_Conditional_0_Template(rf, ctx) { if (rf & 1) {
131
- i0.ɵɵelementStart(0, "div", 24);
132
- i0.ɵɵtemplate(1, ExecutionNodeComponent_Conditional_20_Conditional_0_Conditional_1_Template, 2, 1, "div", 26)(2, ExecutionNodeComponent_Conditional_20_Conditional_0_Conditional_2_Template, 1, 1, "div", 27);
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 ExecutionNodeComponent_Conditional_20_Conditional_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
142
- i0.ɵɵelementStart(0, "div", 28)(1, "div", 30);
143
- i0.ɵɵelement(2, "i", 31);
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", 32);
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(3);
168
+ const ctx_r1 = i0.ɵɵnextContext(2);
151
169
  i0.ɵɵadvance(5);
152
170
  i0.ɵɵtextInterpolate(ctx_r1.node.error);
153
171
  } }
154
- function ExecutionNodeComponent_Conditional_20_Conditional_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
155
- i0.ɵɵelementStart(0, "div", 29)(1, "div", 30);
156
- i0.ɵɵelement(2, "i", 33);
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", 32);
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(3);
181
+ const ctx_r1 = i0.ɵɵnextContext(2);
164
182
  i0.ɵɵadvance(5);
165
183
  i0.ɵɵtextInterpolate(ctx_r1.node.inputPreview);
166
184
  } }
167
- function ExecutionNodeComponent_Conditional_20_Conditional_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
168
- i0.ɵɵelementStart(0, "div", 29)(1, "div", 30);
169
- i0.ɵɵelement(2, "i", 34);
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", 32);
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(3);
194
+ const ctx_r1 = i0.ɵɵnextContext(2);
177
195
  i0.ɵɵadvance(5);
178
196
  i0.ɵɵtextInterpolate(ctx_r1.node.outputPreview);
179
197
  } }
180
- function ExecutionNodeComponent_Conditional_20_Conditional_1_Template(rf, ctx) { if (rf & 1) {
181
- i0.ɵɵelementStart(0, "div", 25);
182
- i0.ɵɵtemplate(1, ExecutionNodeComponent_Conditional_20_Conditional_1_Conditional_1_Template, 6, 1, "div", 28)(2, ExecutionNodeComponent_Conditional_20_Conditional_1_Conditional_2_Template, 6, 1, "div", 29)(3, ExecutionNodeComponent_Conditional_20_Conditional_1_Conditional_3_Template, 6, 1, "div", 29);
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 ExecutionNodeComponent_Conditional_20_Template(rf, ctx) { if (rf & 1) {
194
- i0.ɵɵtemplate(0, ExecutionNodeComponent_Conditional_20_Conditional_0_Template, 3, 2, "div", 24)(1, ExecutionNodeComponent_Conditional_20_Conditional_1_Template, 4, 3, "div", 25);
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 || ctx_r1.node.outputPreview || ctx_r1.node.error ? 1 : -1);
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 ExecutionNodeComponent_Conditional_21_For_1_Template(rf, ctx) { if (rf & 1) {
202
- const _r3 = i0.ɵɵgetCurrentView();
203
- i0.ɵɵelementStart(0, "mj-execution-node", 36);
204
- i0.ɵɵlistener("toggleNode", function ExecutionNodeComponent_Conditional_21_For_1_Template_mj_execution_node_toggleNode_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleNode.emit($event)); })("userInteracted", function ExecutionNodeComponent_Conditional_21_For_1_Template_mj_execution_node_userInteracted_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.userInteracted.emit()); });
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 child_r4 = ctx.$implicit;
208
- i0.ɵɵproperty("node", child_r4);
226
+ const child_r5 = ctx.$implicit;
227
+ i0.ɵɵproperty("node", child_r5)("depth", child_r5.depth);
209
228
  } }
210
- function ExecutionNodeComponent_Conditional_21_Template(rf, ctx) { if (rf & 1) {
211
- i0.ɵɵrepeaterCreate(0, ExecutionNodeComponent_Conditional_21_For_1_Template, 1, 1, "mj-execution-node", 35, _forTrack0);
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
- onToggleNode(event) {
255
+ onToggleChildren(event) {
234
256
  if (event) {
235
257
  event.stopPropagation();
236
258
  }
237
- if (this.hasExpandableContent()) {
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.hasExpandableContent()) {
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: 22, vars: 15, consts: [[1, "tree-node"], [1, "node-header", 3, "dblclick"], [1, "expand-icon", "fa-solid", 3, "fa-chevron-down", "fa-chevron-right"], [1, "expand-spacer"], [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"], [1, "node-duration"], [1, "node-metrics"], [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, "markdown-details"], [1, "node-details"], [1, "full-name"], [1, "detail-content", "markdown", 3, "innerHTML"], [1, "detail-section", "error"], [1, "detail-section"], [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"], [3, "toggleNode", "userInteracted", "node"]], template: function ExecutionNodeComponent_Template(rf, ctx) { if (rf & 1) {
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)(3, ExecutionNodeComponent_Conditional_3_Template, 1, 0, "span", 3);
309
- i0.ɵɵelementStart(4, "span", 4);
310
- i0.ɵɵtemplate(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)(8, ExecutionNodeComponent_Case_8_Template, 1, 0, "i", 8);
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(9, "span", 9);
313
- i0.ɵɵtemplate(10, ExecutionNodeComponent_Case_10_Template, 1, 0, "i", 10)(11, ExecutionNodeComponent_Case_11_Template, 1, 0, "i", 11)(12, ExecutionNodeComponent_Case_12_Template, 2, 1)(13, ExecutionNodeComponent_Case_13_Template, 3, 1)(14, ExecutionNodeComponent_Case_14_Template, 1, 0, "i", 12)(15, ExecutionNodeComponent_Case_15_Template, 1, 0, "i", 13);
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(16, "span", 14);
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(20, ExecutionNodeComponent_Conditional_20_Template, 2, 2)(21, ExecutionNodeComponent_Conditional_21_Template, 2, 0);
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 tmp_4_0;
324
- let tmp_6_0;
325
- i0.ɵɵstyleProp("margin-left", ctx.node.depth > 0 ? ctx.node.depth * 20 : 0, "px");
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((tmp_4_0 = ctx.node.status) === "pending" ? 5 : tmp_4_0 === "running" ? 6 : tmp_4_0 === "completed" ? 7 : tmp_4_0 === "failed" ? 8 : -1);
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((tmp_6_0 = ctx.node.type) === "validation" ? 10 : tmp_6_0 === "prompt" ? 11 : tmp_6_0 === "action" ? 12 : tmp_6_0 === "sub-agent" ? 13 : tmp_6_0 === "decision" ? 14 : tmp_6_0 === "chat" ? 15 : -1);
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.node.expanded ? 20 : -1);
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 ? 21 : -1);
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
- [style.margin-left.px]="node.depth > 0 ? node.depth * 20 : 0">
397
+ [class.has-children]="hasChildren()"
398
+ [class]="'depth-' + node.depth + ' type-' + node.type">
355
399
 
356
400
  <!-- Node Header -->
357
- <div class="node-header" (dblclick)="onDoubleClick()">
358
- <!-- Expand/Collapse Icon -->
359
- @if (hasExpandableContent()) {
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)="onToggleNode($event)"></i>
364
- } @else {
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
- <!-- All Details (when expanded) -->
444
- @if (node.expanded) {
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
- @if (node.inputPreview || node.outputPreview || node.error) {
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: 372 }); })();
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