@memberjunction/ng-core-entity-forms 2.88.0 → 2.90.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.
Files changed (48) hide show
  1. package/dist/lib/custom/AIAgents/FlowAgentType/flow-agent-form-section.component.d.ts.map +1 -1
  2. package/dist/lib/custom/AIAgents/FlowAgentType/flow-agent-form-section.component.js.map +1 -1
  3. package/dist/lib/custom/AIAgents/agent-advanced-settings-dialog.component.js +4 -4
  4. package/dist/lib/custom/AIAgents/agent-advanced-settings-dialog.component.js.map +1 -1
  5. package/dist/lib/custom/AIAgents/ai-agent-form.component.d.ts +21 -10
  6. package/dist/lib/custom/AIAgents/ai-agent-form.component.d.ts.map +1 -1
  7. package/dist/lib/custom/AIAgents/ai-agent-form.component.js +563 -446
  8. package/dist/lib/custom/AIAgents/ai-agent-form.component.js.map +1 -1
  9. package/dist/lib/custom/AIAgents/ai-agent-management.service.d.ts +9 -9
  10. package/dist/lib/custom/AIAgents/ai-agent-management.service.d.ts.map +1 -1
  11. package/dist/lib/custom/AIAgents/ai-agent-management.service.js.map +1 -1
  12. package/dist/lib/custom/AIAgents/create-prompt-dialog.component.d.ts +3 -3
  13. package/dist/lib/custom/AIAgents/create-prompt-dialog.component.d.ts.map +1 -1
  14. package/dist/lib/custom/AIAgents/create-prompt-dialog.component.js.map +1 -1
  15. package/dist/lib/custom/AIAgents/create-sub-agent-dialog.component.d.ts +8 -8
  16. package/dist/lib/custom/AIAgents/create-sub-agent-dialog.component.d.ts.map +1 -1
  17. package/dist/lib/custom/AIAgents/create-sub-agent-dialog.component.js +1 -1
  18. package/dist/lib/custom/AIAgents/create-sub-agent-dialog.component.js.map +1 -1
  19. package/dist/lib/custom/AIAgents/new-agent-dialog.component.d.ts +2 -2
  20. package/dist/lib/custom/AIAgents/new-agent-dialog.component.d.ts.map +1 -1
  21. package/dist/lib/custom/AIAgents/new-agent-dialog.component.js.map +1 -1
  22. package/dist/lib/custom/AIAgents/new-agent-dialog.service.d.ts +2 -2
  23. package/dist/lib/custom/AIAgents/new-agent-dialog.service.d.ts.map +1 -1
  24. package/dist/lib/custom/AIAgents/prompt-selector-dialog.component.d.ts +10 -10
  25. package/dist/lib/custom/AIAgents/prompt-selector-dialog.component.d.ts.map +1 -1
  26. package/dist/lib/custom/AIAgents/prompt-selector-dialog.component.js.map +1 -1
  27. package/dist/lib/custom/AIAgents/sub-agent-advanced-settings-dialog.component.d.ts +3 -3
  28. package/dist/lib/custom/AIAgents/sub-agent-advanced-settings-dialog.component.d.ts.map +1 -1
  29. package/dist/lib/custom/AIAgents/sub-agent-advanced-settings-dialog.component.js.map +1 -1
  30. package/dist/lib/custom/AIAgents/sub-agent-selector-dialog.component.d.ts +3 -3
  31. package/dist/lib/custom/AIAgents/sub-agent-selector-dialog.component.d.ts.map +1 -1
  32. package/dist/lib/custom/AIAgents/sub-agent-selector-dialog.component.js +1 -1
  33. package/dist/lib/custom/AIAgents/sub-agent-selector-dialog.component.js.map +1 -1
  34. package/dist/lib/custom/AIPromptRuns/ai-prompt-run-form.component.d.ts +2 -2
  35. package/dist/lib/custom/AIPromptRuns/ai-prompt-run-form.component.d.ts.map +1 -1
  36. package/dist/lib/custom/AIPromptRuns/ai-prompt-run-form.component.js.map +1 -1
  37. package/dist/lib/custom/AIPrompts/ai-prompt-form.component.d.ts +4 -4
  38. package/dist/lib/custom/AIPrompts/ai-prompt-form.component.d.ts.map +1 -1
  39. package/dist/lib/custom/AIPrompts/ai-prompt-form.component.js.map +1 -1
  40. package/dist/lib/custom/ai-agent-run/ai-agent-run.component.d.ts +3 -3
  41. package/dist/lib/custom/ai-agent-run/ai-agent-run.component.d.ts.map +1 -1
  42. package/dist/lib/custom/ai-agent-run/ai-agent-run.component.js.map +1 -1
  43. package/dist/lib/generated/Entities/AIPrompt/sections/details.component.d.ts +2 -2
  44. package/dist/lib/generated/Entities/AIPrompt/sections/details.component.d.ts.map +1 -1
  45. package/dist/lib/generated/Entities/Component/sections/details.component.d.ts.map +1 -1
  46. package/dist/lib/generated/Entities/Component/sections/details.component.js +31 -4
  47. package/dist/lib/generated/Entities/Component/sections/details.component.js.map +1 -1
  48. package/package.json +16 -16
package/dist/lib/custom/AIAgents/ai-agent-form.component.js CHANGED
@@ -43,7 +43,7 @@ function AIAgentFormComponentExtended_form_3_Conditional_8_Template(rf, ctx) { i
43
43
  } }
44
44
  function AIAgentFormComponentExtended_form_3_Conditional_10_Template(rf, ctx) { if (rf & 1) {
45
45
  const _r3 = i0.ɵɵgetCurrentView();
46
- i0.ɵɵelementStart(0, "kendo-textbox", 30);
46
+ i0.ɵɵelementStart(0, "kendo-textbox", 31);
47
47
  i0.ɵɵtwoWayListener("ngModelChange", function AIAgentFormComponentExtended_form_3_Conditional_10_Template_kendo_textbox_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.record.Name, $event) || (ctx_r1.record.Name = $event); return i0.ɵɵresetView($event); });
48
48
  i0.ɵɵelementEnd();
49
49
  } if (rf & 2) {
@@ -60,8 +60,8 @@ function AIAgentFormComponentExtended_form_3_Conditional_11_Template(rf, ctx) {
60
60
  i0.ɵɵtextInterpolate(ctx_r1.record.Name || "Untitled AI Agent");
61
61
  } }
62
62
  function AIAgentFormComponentExtended_form_3_Conditional_13_Template(rf, ctx) { if (rf & 1) {
63
- i0.ɵɵelementStart(0, "span", 31);
64
- i0.ɵɵelement(1, "i", 32);
63
+ i0.ɵɵelementStart(0, "span", 32);
64
+ i0.ɵɵelement(1, "i", 33);
65
65
  i0.ɵɵtext(2);
66
66
  i0.ɵɵelementEnd();
67
67
  } if (rf & 2) {
@@ -81,7 +81,7 @@ function AIAgentFormComponentExtended_form_3_Conditional_14_Template(rf, ctx) {
81
81
  } }
82
82
  function AIAgentFormComponentExtended_form_3_Conditional_15_Template(rf, ctx) { if (rf & 1) {
83
83
  i0.ɵɵelementStart(0, "span", 20);
84
- i0.ɵɵelement(1, "i", 33);
84
+ i0.ɵɵelement(1, "i", 34);
85
85
  i0.ɵɵtext(2);
86
86
  i0.ɵɵelementEnd();
87
87
  } if (rf & 2) {
@@ -91,9 +91,9 @@ function AIAgentFormComponentExtended_form_3_Conditional_15_Template(rf, ctx) {
91
91
  } }
92
92
  function AIAgentFormComponentExtended_form_3_Conditional_17_Template(rf, ctx) { if (rf & 1) {
93
93
  const _r4 = i0.ɵɵgetCurrentView();
94
- i0.ɵɵelementStart(0, "button", 34);
94
+ i0.ɵɵelementStart(0, "button", 35);
95
95
  i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_17_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.openTestHarness()); });
96
- i0.ɵɵelement(1, "i", 35);
96
+ i0.ɵɵelement(1, "i", 36);
97
97
  i0.ɵɵtext(2, " Run ");
98
98
  i0.ɵɵelementEnd();
99
99
  } if (rf & 2) {
@@ -101,7 +101,7 @@ function AIAgentFormComponentExtended_form_3_Conditional_17_Template(rf, ctx) {
101
101
  i0.ɵɵproperty("disabled", ctx_r1.record.Status !== "Active");
102
102
  } }
103
103
  function AIAgentFormComponentExtended_form_3_Conditional_22_ng_template_1_Template(rf, ctx) { if (rf & 1) {
104
- i0.ɵɵelement(0, "i", 37);
104
+ i0.ɵɵelement(0, "i", 38);
105
105
  i0.ɵɵtext(1);
106
106
  } if (rf & 2) {
107
107
  const ctx_r1 = i0.ɵɵnextContext(3);
@@ -109,7 +109,7 @@ function AIAgentFormComponentExtended_form_3_Conditional_22_ng_template_1_Templa
109
109
  i0.ɵɵtextInterpolate1(" ", ctx_r1.agentType.Name, " Configuration ");
110
110
  } }
111
111
  function AIAgentFormComponentExtended_form_3_Conditional_22_ng_template_2_Template(rf, ctx) { if (rf & 1) {
112
- i0.ɵɵelementStart(0, "div", 38);
112
+ i0.ɵɵelementStart(0, "div", 39);
113
113
  i0.ɵɵelementContainer(1, null, 1);
114
114
  i0.ɵɵelementEnd();
115
115
  } if (rf & 2) {
@@ -117,25 +117,40 @@ function AIAgentFormComponentExtended_form_3_Conditional_22_ng_template_2_Templa
117
117
  } }
118
118
  function AIAgentFormComponentExtended_form_3_Conditional_22_Template(rf, ctx) { if (rf & 1) {
119
119
  const _r5 = i0.ɵɵgetCurrentView();
120
- i0.ɵɵelementStart(0, "kendo-panelbar-item", 36);
120
+ i0.ɵɵelementStart(0, "kendo-panelbar-item", 37);
121
121
  i0.ɵɵlistener("stateChange", function AIAgentFormComponentExtended_form_3_Conditional_22_Template_kendo_panelbar_item_stateChange_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onCustomSectionStateChange($event)); });
122
- i0.ɵɵtemplate(1, AIAgentFormComponentExtended_form_3_Conditional_22_ng_template_1_Template, 2, 1, "ng-template", 28)(2, AIAgentFormComponentExtended_form_3_Conditional_22_ng_template_2_Template, 3, 2, "ng-template", 29);
122
+ i0.ɵɵtemplate(1, AIAgentFormComponentExtended_form_3_Conditional_22_ng_template_1_Template, 2, 1, "ng-template", 29)(2, AIAgentFormComponentExtended_form_3_Conditional_22_ng_template_2_Template, 3, 2, "ng-template", 30);
123
123
  i0.ɵɵelementEnd();
124
124
  } if (rf & 2) {
125
125
  const ctx_r1 = i0.ɵɵnextContext(2);
126
126
  i0.ɵɵproperty("expanded", ctx_r1.agentType.UIFormSectionExpandedByDefault);
127
127
  } }
128
- function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_1_Template(rf, ctx) { if (rf & 1) {
129
- i0.ɵɵelement(0, "i", 39);
128
+ function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
129
+ i0.ɵɵelementStart(0, "span", 41);
130
+ i0.ɵɵelement(1, "i", 42);
131
+ i0.ɵɵelementEnd();
132
+ } }
133
+ function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
134
+ i0.ɵɵelementStart(0, "span");
130
135
  i0.ɵɵtext(1);
136
+ i0.ɵɵelementEnd();
131
137
  } if (rf & 2) {
132
- const ctx_r1 = i0.ɵɵnextContext(3);
138
+ const ctx_r1 = i0.ɵɵnextContext(4);
133
139
  i0.ɵɵadvance();
134
- i0.ɵɵtextInterpolate1(" Execution History", ctx_r1.executionHistoryCount > 0 ? " (" + ctx_r1.executionHistoryCount + ")" : "", " ");
140
+ i0.ɵɵtextInterpolate1(" (", ctx_r1.executionHistoryCount, ")");
141
+ } }
142
+ function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_1_Template(rf, ctx) { if (rf & 1) {
143
+ i0.ɵɵelement(0, "i", 40);
144
+ i0.ɵɵtext(1, " Execution History ");
145
+ i0.ɵɵtemplate(2, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_1_Conditional_2_Template, 2, 0, "span", 41)(3, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_1_Conditional_3_Template, 2, 1, "span");
146
+ } if (rf & 2) {
147
+ const ctx_r1 = i0.ɵɵnextContext(3);
148
+ i0.ɵɵadvance(2);
149
+ i0.ɵɵconditional(ctx_r1.loadingStates.executionHistory ? 2 : ctx_r1.executionHistoryCount > 0 ? 3 : -1);
135
150
  } }
136
151
  function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
137
- i0.ɵɵelementStart(0, "div", 41);
138
- i0.ɵɵelement(1, "i", 39);
152
+ i0.ɵɵelementStart(0, "div", 44);
153
+ i0.ɵɵelement(1, "i", 40);
139
154
  i0.ɵɵelementStart(2, "h4");
140
155
  i0.ɵɵtext(3, "No Execution History");
141
156
  i0.ɵɵelementEnd();
@@ -144,12 +159,12 @@ function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Condit
144
159
  i0.ɵɵelementEnd()();
145
160
  } }
146
161
  function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_14_Template(rf, ctx) { if (rf & 1) {
147
- i0.ɵɵelementStart(0, "div", 55);
148
- i0.ɵɵelement(1, "i", 60);
149
- i0.ɵɵelementStart(2, "span", 61);
162
+ i0.ɵɵelementStart(0, "div", 58);
163
+ i0.ɵɵelement(1, "i", 63);
164
+ i0.ɵɵelementStart(2, "span", 64);
150
165
  i0.ɵɵtext(3, "Config:");
151
166
  i0.ɵɵelementEnd();
152
- i0.ɵɵelementStart(4, "span", 62);
167
+ i0.ɵɵelementStart(4, "span", 65);
153
168
  i0.ɵɵtext(5);
154
169
  i0.ɵɵelementEnd()();
155
170
  } if (rf & 2) {
@@ -158,12 +173,12 @@ function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Condit
158
173
  i0.ɵɵtextInterpolate(execution_r7.Configuration);
159
174
  } }
160
175
  function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_15_Template(rf, ctx) { if (rf & 1) {
161
- i0.ɵɵelementStart(0, "div", 55);
162
- i0.ɵɵelement(1, "i", 63);
163
- i0.ɵɵelementStart(2, "span", 61);
176
+ i0.ɵɵelementStart(0, "div", 58);
177
+ i0.ɵɵelement(1, "i", 66);
178
+ i0.ɵɵelementStart(2, "span", 64);
164
179
  i0.ɵɵtext(3, "Duration:");
165
180
  i0.ɵɵelementEnd();
166
- i0.ɵɵelementStart(4, "span", 62);
181
+ i0.ɵɵelementStart(4, "span", 65);
167
182
  i0.ɵɵtext(5);
168
183
  i0.ɵɵelementEnd()();
169
184
  } if (rf & 2) {
@@ -173,12 +188,12 @@ function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Condit
173
188
  i0.ɵɵtextInterpolate(ctx_r1.formatExecutionTimeFromDates(execution_r7.StartedAt, execution_r7.CompletedAt));
174
189
  } }
175
190
  function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_16_Template(rf, ctx) { if (rf & 1) {
176
- i0.ɵɵelementStart(0, "div", 55);
177
- i0.ɵɵelement(1, "i", 64);
178
- i0.ɵɵelementStart(2, "span", 61);
191
+ i0.ɵɵelementStart(0, "div", 58);
192
+ i0.ɵɵelement(1, "i", 67);
193
+ i0.ɵɵelementStart(2, "span", 64);
179
194
  i0.ɵɵtext(3, "Running:");
180
195
  i0.ɵɵelementEnd();
181
- i0.ɵɵelementStart(4, "span", 62);
196
+ i0.ɵɵelementStart(4, "span", 65);
182
197
  i0.ɵɵtext(5);
183
198
  i0.ɵɵelementEnd()();
184
199
  } if (rf & 2) {
@@ -188,12 +203,12 @@ function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Condit
188
203
  i0.ɵɵtextInterpolate(ctx_r1.getRunningTime(execution_r7.StartedAt));
189
204
  } }
190
205
  function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_17_Template(rf, ctx) { if (rf & 1) {
191
- i0.ɵɵelementStart(0, "div", 55);
192
- i0.ɵɵelement(1, "i", 65);
193
- i0.ɵɵelementStart(2, "span", 61);
206
+ i0.ɵɵelementStart(0, "div", 58);
207
+ i0.ɵɵelement(1, "i", 68);
208
+ i0.ɵɵelementStart(2, "span", 64);
194
209
  i0.ɵɵtext(3, "Tokens:");
195
210
  i0.ɵɵelementEnd();
196
- i0.ɵɵelementStart(4, "span", 62);
211
+ i0.ɵɵelementStart(4, "span", 65);
197
212
  i0.ɵɵtext(5);
198
213
  i0.ɵɵelementEnd()();
199
214
  } if (rf & 2) {
@@ -203,12 +218,12 @@ function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Condit
203
218
  i0.ɵɵtextInterpolate(ctx_r1.formatTokenCount(execution_r7.TotalTokensUsedRollup || execution_r7.TotalTokensUsed));
204
219
  } }
205
220
  function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_18_Template(rf, ctx) { if (rf & 1) {
206
- i0.ɵɵelementStart(0, "div", 55);
207
- i0.ɵɵelement(1, "i", 66);
208
- i0.ɵɵelementStart(2, "span", 61);
221
+ i0.ɵɵelementStart(0, "div", 58);
222
+ i0.ɵɵelement(1, "i", 69);
223
+ i0.ɵɵelementStart(2, "span", 64);
209
224
  i0.ɵɵtext(3, "Cost:");
210
225
  i0.ɵɵelementEnd();
211
- i0.ɵɵelementStart(4, "span", 62);
226
+ i0.ɵɵelementStart(4, "span", 65);
212
227
  i0.ɵɵtext(5);
213
228
  i0.ɵɵelementEnd()();
214
229
  } if (rf & 2) {
@@ -218,12 +233,12 @@ function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Condit
218
233
  i0.ɵɵtextInterpolate1("$", ctx_r1.formatCost(execution_r7.TotalCostRollup || execution_r7.TotalCost), "");
219
234
  } }
220
235
  function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Conditional_11_Template(rf, ctx) { if (rf & 1) {
221
- i0.ɵɵelementStart(0, "div", 69);
222
- i0.ɵɵelement(1, "i", 75);
223
- i0.ɵɵelementStart(2, "div", 70)(3, "span", 71);
236
+ i0.ɵɵelementStart(0, "div", 72);
237
+ i0.ɵɵelement(1, "i", 78);
238
+ i0.ɵɵelementStart(2, "div", 73)(3, "span", 74);
224
239
  i0.ɵɵtext(4, "Completed");
225
240
  i0.ɵɵelementEnd();
226
- i0.ɵɵelementStart(5, "span", 72);
241
+ i0.ɵɵelementStart(5, "span", 75);
227
242
  i0.ɵɵtext(6);
228
243
  i0.ɵɵpipe(7, "date");
229
244
  i0.ɵɵelementEnd()()();
@@ -233,12 +248,12 @@ function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Condit
233
248
  i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(7, 1, execution_r7.CompletedAt, "medium"));
234
249
  } }
235
250
  function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Conditional_12_Template(rf, ctx) { if (rf & 1) {
236
- i0.ɵɵelementStart(0, "div", 69);
237
- i0.ɵɵelement(1, "i", 65);
238
- i0.ɵɵelementStart(2, "div", 70)(3, "span", 71);
251
+ i0.ɵɵelementStart(0, "div", 72);
252
+ i0.ɵɵelement(1, "i", 68);
253
+ i0.ɵɵelementStart(2, "div", 73)(3, "span", 74);
239
254
  i0.ɵɵtext(4, "Direct Tokens");
240
255
  i0.ɵɵelementEnd();
241
- i0.ɵɵelementStart(5, "span", 72);
256
+ i0.ɵɵelementStart(5, "span", 75);
242
257
  i0.ɵɵtext(6);
243
258
  i0.ɵɵelementEnd()()();
244
259
  } if (rf & 2) {
@@ -248,12 +263,12 @@ function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Condit
248
263
  i0.ɵɵtextInterpolate(ctx_r1.formatTokenCount(execution_r7.TotalTokensUsed));
249
264
  } }
250
265
  function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Conditional_13_Template(rf, ctx) { if (rf & 1) {
251
- i0.ɵɵelementStart(0, "div", 69);
252
- i0.ɵɵelement(1, "i", 33);
253
- i0.ɵɵelementStart(2, "div", 70)(3, "span", 71);
266
+ i0.ɵɵelementStart(0, "div", 72);
267
+ i0.ɵɵelement(1, "i", 34);
268
+ i0.ɵɵelementStart(2, "div", 73)(3, "span", 74);
254
269
  i0.ɵɵtext(4, "Total + Sub-agents");
255
270
  i0.ɵɵelementEnd();
256
- i0.ɵɵelementStart(5, "span", 72);
271
+ i0.ɵɵelementStart(5, "span", 75);
257
272
  i0.ɵɵtext(6);
258
273
  i0.ɵɵelementEnd()()();
259
274
  } if (rf & 2) {
@@ -263,12 +278,12 @@ function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Condit
263
278
  i0.ɵɵtextInterpolate(ctx_r1.formatTokenCount(execution_r7.TotalTokensUsedRollup));
264
279
  } }
265
280
  function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Conditional_14_Template(rf, ctx) { if (rf & 1) {
266
- i0.ɵɵelementStart(0, "div", 69);
267
- i0.ɵɵelement(1, "i", 66);
268
- i0.ɵɵelementStart(2, "div", 70)(3, "span", 71);
281
+ i0.ɵɵelementStart(0, "div", 72);
282
+ i0.ɵɵelement(1, "i", 69);
283
+ i0.ɵɵelementStart(2, "div", 73)(3, "span", 74);
269
284
  i0.ɵɵtext(4, "Direct Cost");
270
285
  i0.ɵɵelementEnd();
271
- i0.ɵɵelementStart(5, "span", 72);
286
+ i0.ɵɵelementStart(5, "span", 75);
272
287
  i0.ɵɵtext(6);
273
288
  i0.ɵɵelementEnd()()();
274
289
  } if (rf & 2) {
@@ -278,12 +293,12 @@ function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Condit
278
293
  i0.ɵɵtextInterpolate1("$", ctx_r1.formatCost(execution_r7.TotalCost), "");
279
294
  } }
280
295
  function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Conditional_15_Template(rf, ctx) { if (rf & 1) {
281
- i0.ɵɵelementStart(0, "div", 69);
282
- i0.ɵɵelement(1, "i", 76);
283
- i0.ɵɵelementStart(2, "div", 70)(3, "span", 71);
296
+ i0.ɵɵelementStart(0, "div", 72);
297
+ i0.ɵɵelement(1, "i", 79);
298
+ i0.ɵɵelementStart(2, "div", 73)(3, "span", 74);
284
299
  i0.ɵɵtext(4, "Total + Sub-agents");
285
300
  i0.ɵɵelementEnd();
286
- i0.ɵɵelementStart(5, "span", 72);
301
+ i0.ɵɵelementStart(5, "span", 75);
287
302
  i0.ɵɵtext(6);
288
303
  i0.ɵɵelementEnd()()();
289
304
  } if (rf & 2) {
@@ -293,12 +308,12 @@ function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Condit
293
308
  i0.ɵɵtextInterpolate1("$", ctx_r1.formatCost(execution_r7.TotalCostRollup), "");
294
309
  } }
295
310
  function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Conditional_16_Template(rf, ctx) { if (rf & 1) {
296
- i0.ɵɵelementStart(0, "div", 69);
297
- i0.ɵɵelement(1, "i", 77);
298
- i0.ɵɵelementStart(2, "div", 70)(3, "span", 71);
311
+ i0.ɵɵelementStart(0, "div", 72);
312
+ i0.ɵɵelement(1, "i", 80);
313
+ i0.ɵɵelementStart(2, "div", 73)(3, "span", 74);
299
314
  i0.ɵɵtext(4, "Conversation");
300
315
  i0.ɵɵelementEnd();
301
- i0.ɵɵelementStart(5, "span", 72);
316
+ i0.ɵɵelementStart(5, "span", 75);
302
317
  i0.ɵɵtext(6);
303
318
  i0.ɵɵelementEnd()()();
304
319
  } if (rf & 2) {
@@ -307,11 +322,11 @@ function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Condit
307
322
  i0.ɵɵtextInterpolate1("", execution_r7.ConversationID.substring(0, 8), "...");
308
323
  } }
309
324
  function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Conditional_17_Template(rf, ctx) { if (rf & 1) {
310
- i0.ɵɵelementStart(0, "div", 73)(1, "h5");
311
- i0.ɵɵelement(2, "i", 78);
325
+ i0.ɵɵelementStart(0, "div", 76)(1, "h5");
326
+ i0.ɵɵelement(2, "i", 81);
312
327
  i0.ɵɵtext(3, " Result");
313
328
  i0.ɵɵelementEnd();
314
- i0.ɵɵelement(4, "mj-code-editor", 79);
329
+ i0.ɵɵelement(4, "mj-code-editor", 82);
315
330
  i0.ɵɵelementEnd();
316
331
  } if (rf & 2) {
317
332
  const execution_r7 = i0.ɵɵnextContext(2).$implicit;
@@ -320,11 +335,11 @@ function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Condit
320
335
  i0.ɵɵproperty("value", ctx_r1.getExecutionResultPreview(execution_r7, false))("readonly", true)("lineWrapping", true);
321
336
  } }
322
337
  function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Conditional_18_Template(rf, ctx) { if (rf & 1) {
323
- i0.ɵɵelementStart(0, "div", 74)(1, "h5");
324
- i0.ɵɵelement(2, "i", 80);
338
+ i0.ɵɵelementStart(0, "div", 77)(1, "h5");
339
+ i0.ɵɵelement(2, "i", 83);
325
340
  i0.ɵɵtext(3, " Error");
326
341
  i0.ɵɵelementEnd();
327
- i0.ɵɵelementStart(4, "div", 81);
342
+ i0.ɵɵelementStart(4, "div", 84);
328
343
  i0.ɵɵtext(5);
329
344
  i0.ɵɵelementEnd()();
330
345
  } if (rf & 2) {
@@ -333,18 +348,18 @@ function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Condit
333
348
  i0.ɵɵtextInterpolate(execution_r7.ErrorMessage);
334
349
  } }
335
350
  function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Template(rf, ctx) { if (rf & 1) {
336
- i0.ɵɵelementStart(0, "div", 59)(1, "div", 67)(2, "div", 68)(3, "div", 69);
337
- i0.ɵɵelement(4, "i", 64);
338
- i0.ɵɵelementStart(5, "div", 70)(6, "span", 71);
351
+ i0.ɵɵelementStart(0, "div", 62)(1, "div", 70)(2, "div", 71)(3, "div", 72);
352
+ i0.ɵɵelement(4, "i", 67);
353
+ i0.ɵɵelementStart(5, "div", 73)(6, "span", 74);
339
354
  i0.ɵɵtext(7, "Started");
340
355
  i0.ɵɵelementEnd();
341
- i0.ɵɵelementStart(8, "span", 72);
356
+ i0.ɵɵelementStart(8, "span", 75);
342
357
  i0.ɵɵtext(9);
343
358
  i0.ɵɵpipe(10, "date");
344
359
  i0.ɵɵelementEnd()()();
345
- i0.ɵɵtemplate(11, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Conditional_11_Template, 8, 4, "div", 69)(12, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Conditional_12_Template, 7, 1, "div", 69)(13, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Conditional_13_Template, 7, 1, "div", 69)(14, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Conditional_14_Template, 7, 1, "div", 69)(15, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Conditional_15_Template, 7, 1, "div", 69)(16, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Conditional_16_Template, 7, 1, "div", 69);
360
+ i0.ɵɵtemplate(11, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Conditional_11_Template, 8, 4, "div", 72)(12, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Conditional_12_Template, 7, 1, "div", 72)(13, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Conditional_13_Template, 7, 1, "div", 72)(14, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Conditional_14_Template, 7, 1, "div", 72)(15, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Conditional_15_Template, 7, 1, "div", 72)(16, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Conditional_16_Template, 7, 1, "div", 72);
346
361
  i0.ɵɵelementEnd()();
347
- i0.ɵɵtemplate(17, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Conditional_17_Template, 5, 3, "div", 73)(18, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Conditional_18_Template, 6, 1, "div", 74);
362
+ i0.ɵɵtemplate(17, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Conditional_17_Template, 5, 3, "div", 76)(18, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Conditional_18_Template, 6, 1, "div", 77);
348
363
  i0.ɵɵelementEnd();
349
364
  } if (rf & 2) {
350
365
  const execution_r7 = i0.ɵɵnextContext().$implicit;
@@ -369,27 +384,27 @@ function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Condit
369
384
  } }
370
385
  function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Template(rf, ctx) { if (rf & 1) {
371
386
  const _r6 = i0.ɵɵgetCurrentView();
372
- i0.ɵɵelementStart(0, "div", 45)(1, "div", 46);
387
+ i0.ɵɵelementStart(0, "div", 48)(1, "div", 49);
373
388
  i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Template_div_click_1_listener() { const execution_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.toggleExecutionExpanded(execution_r7.ID)); });
374
- i0.ɵɵelementStart(2, "div", 47)(3, "div", 48)(4, "div", 49);
389
+ i0.ɵɵelementStart(2, "div", 50)(3, "div", 51)(4, "div", 52);
375
390
  i0.ɵɵelement(5, "i");
376
391
  i0.ɵɵelementEnd();
377
- i0.ɵɵelementStart(6, "div", 50)(7, "div", 51);
378
- i0.ɵɵelement(8, "i", 52);
392
+ i0.ɵɵelementStart(6, "div", 53)(7, "div", 54);
393
+ i0.ɵɵelement(8, "i", 55);
379
394
  i0.ɵɵtext(9);
380
395
  i0.ɵɵelementEnd();
381
- i0.ɵɵelementStart(10, "div", 53);
396
+ i0.ɵɵelementStart(10, "div", 56);
382
397
  i0.ɵɵtext(11);
383
398
  i0.ɵɵpipe(12, "date");
384
399
  i0.ɵɵelementEnd()()();
385
- i0.ɵɵelementStart(13, "div", 54);
386
- i0.ɵɵtemplate(14, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_14_Template, 6, 1, "div", 55)(15, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_15_Template, 6, 1, "div", 55)(16, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_16_Template, 6, 1, "div", 55)(17, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_17_Template, 6, 1, "div", 55)(18, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_18_Template, 6, 1, "div", 55);
400
+ i0.ɵɵelementStart(13, "div", 57);
401
+ i0.ɵɵtemplate(14, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_14_Template, 6, 1, "div", 58)(15, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_15_Template, 6, 1, "div", 58)(16, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_16_Template, 6, 1, "div", 58)(17, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_17_Template, 6, 1, "div", 58)(18, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_18_Template, 6, 1, "div", 58);
387
402
  i0.ɵɵelementEnd()();
388
- i0.ɵɵelementStart(19, "div", 56)(20, "button", 57);
403
+ i0.ɵɵelementStart(19, "div", 59)(20, "button", 60);
389
404
  i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Template_button_click_20_listener($event) { const execution_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); ctx_r1.openExecutionRecord(execution_r7.ID); return i0.ɵɵresetView($event.stopPropagation()); });
390
- i0.ɵɵelement(21, "i", 58);
405
+ i0.ɵɵelement(21, "i", 61);
391
406
  i0.ɵɵelementEnd()()();
392
- i0.ɵɵtemplate(22, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Template, 19, 12, "div", 59);
407
+ i0.ɵɵtemplate(22, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Template, 19, 12, "div", 62);
393
408
  i0.ɵɵelementEnd();
394
409
  } if (rf & 2) {
395
410
  const execution_r7 = ctx.$implicit;
@@ -418,7 +433,7 @@ function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Condit
418
433
  } }
419
434
  function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
420
435
  const _r8 = i0.ɵɵgetCurrentView();
421
- i0.ɵɵelementStart(0, "div", 82);
436
+ i0.ɵɵelementStart(0, "div", 85);
422
437
  i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("MJ: AI Agent Runs", "")); });
423
438
  i0.ɵɵelementStart(1, "span");
424
439
  i0.ɵɵtext(2);
@@ -429,9 +444,9 @@ function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Condit
429
444
  i0.ɵɵtextInterpolate1("View all ", ctx_r1.executionHistoryCount, " executions...");
430
445
  } }
431
446
  function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
432
- i0.ɵɵelementStart(0, "div", 42);
433
- i0.ɵɵrepeaterCreate(1, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Template, 23, 18, "div", 43, _forTrack0);
434
- i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_Conditional_3_Template, 3, 1, "div", 44);
447
+ i0.ɵɵelementStart(0, "div", 45);
448
+ i0.ɵɵrepeaterCreate(1, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Template, 23, 18, "div", 46, _forTrack0);
449
+ i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_Conditional_3_Template, 3, 1, "div", 47);
435
450
  i0.ɵɵelementEnd();
436
451
  } if (rf & 2) {
437
452
  const ctx_r1 = i0.ɵɵnextContext(4);
@@ -441,8 +456,8 @@ function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Condit
441
456
  i0.ɵɵconditional(ctx_r1.executionHistoryCount > ctx_r1.recentExecutions.length ? 3 : -1);
442
457
  } }
443
458
  function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Template(rf, ctx) { if (rf & 1) {
444
- i0.ɵɵelementStart(0, "div", 40);
445
- i0.ɵɵtemplate(1, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_1_Template, 6, 0, "div", 41)(2, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_Template, 4, 1, "div", 42);
459
+ i0.ɵɵelementStart(0, "div", 43);
460
+ i0.ɵɵtemplate(1, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_1_Template, 6, 0, "div", 44)(2, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_Template, 4, 1, "div", 45);
446
461
  i0.ɵɵelementEnd();
447
462
  } if (rf & 2) {
448
463
  const ctx_r1 = i0.ɵɵnextContext(3);
@@ -450,54 +465,77 @@ function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Templa
450
465
  i0.ɵɵconditional(ctx_r1.executionHistoryCount === 0 ? 1 : 2);
451
466
  } }
452
467
  function AIAgentFormComponentExtended_form_3_Conditional_23_Template(rf, ctx) { if (rf & 1) {
453
- i0.ɵɵelementStart(0, "kendo-panelbar-item", 27);
454
- i0.ɵɵtemplate(1, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_1_Template, 2, 1, "ng-template", 28)(2, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Template, 3, 1, "ng-template", 29);
468
+ i0.ɵɵelementStart(0, "kendo-panelbar-item", 28);
469
+ i0.ɵɵtemplate(1, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_1_Template, 4, 1, "ng-template", 29)(2, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Template, 3, 1, "ng-template", 30);
455
470
  i0.ɵɵelementEnd();
456
471
  } if (rf & 2) {
457
- i0.ɵɵproperty("expanded", false);
472
+ const ctx_r1 = i0.ɵɵnextContext(2);
473
+ i0.ɵɵproperty("expanded", false)("disabled", ctx_r1.loadingStates.executionHistory);
458
474
  } }
459
- function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_1_Template(rf, ctx) { if (rf & 1) {
460
- i0.ɵɵelement(0, "i", 83);
475
+ function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
476
+ i0.ɵɵelementStart(0, "span", 41);
477
+ i0.ɵɵelement(1, "i", 42);
478
+ i0.ɵɵelementEnd();
479
+ } }
480
+ function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
481
+ i0.ɵɵelementStart(0, "span");
461
482
  i0.ɵɵtext(1);
483
+ i0.ɵɵelementEnd();
462
484
  } if (rf & 2) {
463
- const ctx_r1 = i0.ɵɵnextContext(3);
485
+ const ctx_r1 = i0.ɵɵnextContext(4);
464
486
  i0.ɵɵadvance();
465
- i0.ɵɵtextInterpolate1(" Actions", ctx_r1.actionCount > 0 ? " (" + ctx_r1.actionCount + ")" : "", " ");
487
+ i0.ɵɵtextInterpolate1(" (", ctx_r1.actionCount, ")");
488
+ } }
489
+ function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_1_Template(rf, ctx) { if (rf & 1) {
490
+ i0.ɵɵelement(0, "i", 86);
491
+ i0.ɵɵtext(1, " Actions ");
492
+ i0.ɵɵtemplate(2, AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_1_Conditional_2_Template, 2, 0, "span", 41)(3, AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_1_Conditional_3_Template, 2, 1, "span");
493
+ } if (rf & 2) {
494
+ const ctx_r1 = i0.ɵɵnextContext(3);
495
+ i0.ɵɵadvance(2);
496
+ i0.ɵɵconditional(ctx_r1.loadingStates.actions ? 2 : ctx_r1.actionCount > 0 ? 3 : -1);
497
+ } }
498
+ function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
499
+ i0.ɵɵelementStart(0, "div", 88);
500
+ i0.ɵɵelement(1, "i", 89);
501
+ i0.ɵɵelementStart(2, "p");
502
+ i0.ɵɵtext(3, "Loading actions...");
503
+ i0.ɵɵelementEnd()();
466
504
  } }
467
- function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
505
+ function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
468
506
  const _r9 = i0.ɵɵgetCurrentView();
469
- i0.ɵɵelementStart(0, "button", 89);
470
- i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.configureActions()); });
471
- i0.ɵɵelement(1, "i", 90);
507
+ i0.ɵɵelementStart(0, "button", 94);
508
+ i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_2_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.configureActions()); });
509
+ i0.ɵɵelement(1, "i", 95);
472
510
  i0.ɵɵtext(2, " Add Action ");
473
511
  i0.ɵɵelementEnd();
474
512
  } }
475
- function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_4_Conditional_6_Template(rf, ctx) { if (rf & 1) {
513
+ function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_2_Conditional_3_Conditional_6_Template(rf, ctx) { if (rf & 1) {
476
514
  const _r10 = i0.ɵɵgetCurrentView();
477
- i0.ɵɵelementStart(0, "button", 92);
478
- i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_4_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.configureActions()); });
479
- i0.ɵɵelement(1, "i", 90);
515
+ i0.ɵɵelementStart(0, "button", 97);
516
+ i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_2_Conditional_3_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r1.configureActions()); });
517
+ i0.ɵɵelement(1, "i", 95);
480
518
  i0.ɵɵtext(2, " Configure First Action ");
481
519
  i0.ɵɵelementEnd();
482
520
  } }
483
- function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
484
- i0.ɵɵelementStart(0, "div", 41);
485
- i0.ɵɵelement(1, "i", 83);
521
+ function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
522
+ i0.ɵɵelementStart(0, "div", 44);
523
+ i0.ɵɵelement(1, "i", 86);
486
524
  i0.ɵɵelementStart(2, "h4");
487
525
  i0.ɵɵtext(3, "No Actions Configured");
488
526
  i0.ɵɵelementEnd();
489
527
  i0.ɵɵelementStart(4, "p");
490
528
  i0.ɵɵtext(5, "Add actions to enable this agent to perform specific tasks and operations.");
491
529
  i0.ɵɵelementEnd();
492
- i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_4_Conditional_6_Template, 3, 0, "button", 91);
530
+ i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_2_Conditional_3_Conditional_6_Template, 3, 0, "button", 96);
493
531
  i0.ɵɵelementEnd();
494
532
  } if (rf & 2) {
495
- const ctx_r1 = i0.ɵɵnextContext(4);
533
+ const ctx_r1 = i0.ɵɵnextContext(5);
496
534
  i0.ɵɵadvance(6);
497
535
  i0.ɵɵconditional(ctx_r1.EditMode && ctx_r1.UserCanCreateActions ? 6 : -1);
498
536
  } }
499
- function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_5_For_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
500
- i0.ɵɵelementStart(0, "div", 98);
537
+ function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_2_Conditional_4_For_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
538
+ i0.ɵɵelementStart(0, "div", 103);
501
539
  i0.ɵɵtext(1);
502
540
  i0.ɵɵelementEnd();
503
541
  } if (rf & 2) {
@@ -505,8 +543,8 @@ function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Condit
505
543
  i0.ɵɵadvance();
506
544
  i0.ɵɵtextInterpolate(action_r12.Description);
507
545
  } }
508
- function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_5_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
509
- i0.ɵɵelementStart(0, "span", 100);
546
+ function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_2_Conditional_4_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
547
+ i0.ɵɵelementStart(0, "span", 105);
510
548
  i0.ɵɵtext(1);
511
549
  i0.ɵɵelementEnd();
512
550
  } if (rf & 2) {
@@ -514,37 +552,37 @@ function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Condit
514
552
  i0.ɵɵadvance();
515
553
  i0.ɵɵtextInterpolate(action_r12.Type);
516
554
  } }
517
- function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_5_For_2_Conditional_13_Template(rf, ctx) { if (rf & 1) {
555
+ function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_2_Conditional_4_For_2_Conditional_13_Template(rf, ctx) { if (rf & 1) {
518
556
  const _r13 = i0.ɵɵgetCurrentView();
519
- i0.ɵɵelementStart(0, "button", 106);
520
- i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_5_For_2_Conditional_13_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r13); const action_r12 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.removeAction(action_r12, $event)); });
521
- i0.ɵɵelement(1, "i", 107);
557
+ i0.ɵɵelementStart(0, "button", 111);
558
+ i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_2_Conditional_4_For_2_Conditional_13_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r13); const action_r12 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r1.removeAction(action_r12, $event)); });
559
+ i0.ɵɵelement(1, "i", 112);
522
560
  i0.ɵɵelementEnd();
523
561
  } }
524
- function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_5_For_2_Template(rf, ctx) { if (rf & 1) {
562
+ function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_2_Conditional_4_For_2_Template(rf, ctx) { if (rf & 1) {
525
563
  const _r11 = i0.ɵɵgetCurrentView();
526
- i0.ɵɵelementStart(0, "div", 94);
527
- i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_5_For_2_Template_div_click_0_listener() { const action_r12 = i0.ɵɵrestoreView(_r11).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("Actions", action_r12.ID)); });
528
- i0.ɵɵelementStart(1, "div", 95);
564
+ i0.ɵɵelementStart(0, "div", 99);
565
+ i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_2_Conditional_4_For_2_Template_div_click_0_listener() { const action_r12 = i0.ɵɵrestoreView(_r11).$implicit; const ctx_r1 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r1.navigateToEntity("Actions", action_r12.ID)); });
566
+ i0.ɵɵelementStart(1, "div", 100);
529
567
  i0.ɵɵelement(2, "i");
530
568
  i0.ɵɵelementEnd();
531
- i0.ɵɵelementStart(3, "div", 96)(4, "div", 97);
569
+ i0.ɵɵelementStart(3, "div", 101)(4, "div", 102);
532
570
  i0.ɵɵtext(5);
533
571
  i0.ɵɵelementEnd();
534
- i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_5_For_2_Conditional_6_Template, 2, 1, "div", 98);
535
- i0.ɵɵelementStart(7, "div", 99);
536
- i0.ɵɵtemplate(8, AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_5_For_2_Conditional_8_Template, 2, 1, "span", 100);
537
- i0.ɵɵelementStart(9, "span", 101);
538
- i0.ɵɵelement(10, "i", 102);
572
+ i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_2_Conditional_4_For_2_Conditional_6_Template, 2, 1, "div", 103);
573
+ i0.ɵɵelementStart(7, "div", 104);
574
+ i0.ɵɵtemplate(8, AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_2_Conditional_4_For_2_Conditional_8_Template, 2, 1, "span", 105);
575
+ i0.ɵɵelementStart(9, "span", 106);
576
+ i0.ɵɵelement(10, "i", 107);
539
577
  i0.ɵɵtext(11);
540
578
  i0.ɵɵelementEnd()()();
541
- i0.ɵɵelementStart(12, "div", 103);
542
- i0.ɵɵtemplate(13, AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_5_For_2_Conditional_13_Template, 2, 0, "button", 104);
543
- i0.ɵɵelement(14, "i", 105);
579
+ i0.ɵɵelementStart(12, "div", 108);
580
+ i0.ɵɵtemplate(13, AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_2_Conditional_4_For_2_Conditional_13_Template, 2, 0, "button", 109);
581
+ i0.ɵɵelement(14, "i", 110);
544
582
  i0.ɵɵelementEnd()();
545
583
  } if (rf & 2) {
546
584
  const action_r12 = ctx.$implicit;
547
- const ctx_r1 = i0.ɵɵnextContext(5);
585
+ const ctx_r1 = i0.ɵɵnextContext(6);
548
586
  i0.ɵɵadvance(2);
549
587
  i0.ɵɵclassMap(ctx_r1.getActionIcon(action_r12));
550
588
  i0.ɵɵadvance(3);
@@ -562,87 +600,111 @@ function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Condit
562
600
  i0.ɵɵadvance(2);
563
601
  i0.ɵɵconditional(ctx_r1.EditMode && ctx_r1.UserCanDeleteActions ? 13 : -1);
564
602
  } }
565
- function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_5_Conditional_3_Template(rf, ctx) { if (rf & 1) {
603
+ function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_2_Conditional_4_Conditional_3_Template(rf, ctx) { if (rf & 1) {
566
604
  const _r14 = i0.ɵɵgetCurrentView();
567
- i0.ɵɵelementStart(0, "div", 82);
568
- i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_5_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("AI Agent Actions", "")); });
605
+ i0.ɵɵelementStart(0, "div", 85);
606
+ i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_2_Conditional_4_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r1.navigateToEntity("AI Agent Actions", "")); });
569
607
  i0.ɵɵelementStart(1, "span");
570
608
  i0.ɵɵtext(2);
571
609
  i0.ɵɵelementEnd()();
572
610
  } if (rf & 2) {
573
- const ctx_r1 = i0.ɵɵnextContext(5);
611
+ const ctx_r1 = i0.ɵɵnextContext(6);
574
612
  i0.ɵɵadvance(2);
575
613
  i0.ɵɵtextInterpolate1("View all ", ctx_r1.actionCount, " actions...");
576
614
  } }
577
- function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
578
- i0.ɵɵelementStart(0, "div", 88);
579
- i0.ɵɵrepeaterCreate(1, AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_5_For_2_Template, 15, 15, "div", 93, _forTrack0);
580
- i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_5_Conditional_3_Template, 3, 1, "div", 44);
615
+ function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
616
+ i0.ɵɵelementStart(0, "div", 93);
617
+ i0.ɵɵrepeaterCreate(1, AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_2_Conditional_4_For_2_Template, 15, 15, "div", 98, _forTrack0);
618
+ i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_2_Conditional_4_Conditional_3_Template, 3, 1, "div", 47);
581
619
  i0.ɵɵelementEnd();
582
620
  } if (rf & 2) {
583
- const ctx_r1 = i0.ɵɵnextContext(4);
621
+ const ctx_r1 = i0.ɵɵnextContext(5);
584
622
  i0.ɵɵadvance();
585
623
  i0.ɵɵrepeater(ctx_r1.agentActions);
586
624
  i0.ɵɵadvance(2);
587
625
  i0.ɵɵconditional(ctx_r1.actionCount > ctx_r1.agentActions.length ? 3 : -1);
588
626
  } }
589
- function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Template(rf, ctx) { if (rf & 1) {
590
- i0.ɵɵelementStart(0, "div", 84)(1, "div", 85)(2, "div", 86);
591
- i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_3_Template, 3, 0, "button", 87);
627
+ function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
628
+ i0.ɵɵelementStart(0, "div", 90)(1, "div", 91);
629
+ i0.ɵɵtemplate(2, AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_2_Conditional_2_Template, 3, 0, "button", 92);
592
630
  i0.ɵɵelementEnd()();
593
- i0.ɵɵtemplate(4, AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_4_Template, 7, 1, "div", 41)(5, AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_5_Template, 4, 1, "div", 88);
631
+ i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_2_Conditional_3_Template, 7, 1, "div", 44)(4, AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_2_Conditional_4_Template, 4, 1, "div", 93);
632
+ } if (rf & 2) {
633
+ const ctx_r1 = i0.ɵɵnextContext(4);
634
+ i0.ɵɵadvance(2);
635
+ i0.ɵɵconditional(ctx_r1.EditMode && ctx_r1.UserCanCreateActions ? 2 : -1);
636
+ i0.ɵɵadvance();
637
+ i0.ɵɵconditional(ctx_r1.actionCount === 0 ? 3 : 4);
638
+ } }
639
+ function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Template(rf, ctx) { if (rf & 1) {
640
+ i0.ɵɵelementStart(0, "div", 87);
641
+ i0.ɵɵtemplate(1, AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_1_Template, 4, 0, "div", 88)(2, AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_2_Template, 5, 2);
594
642
  i0.ɵɵelementEnd();
595
643
  } if (rf & 2) {
596
644
  const ctx_r1 = i0.ɵɵnextContext(3);
597
- i0.ɵɵadvance(3);
598
- i0.ɵɵconditional(ctx_r1.EditMode && ctx_r1.UserCanCreateActions ? 3 : -1);
599
645
  i0.ɵɵadvance();
600
- i0.ɵɵconditional(ctx_r1.actionCount === 0 ? 4 : 5);
646
+ i0.ɵɵconditional(ctx_r1.loadingStates.actions ? 1 : 2);
601
647
  } }
602
648
  function AIAgentFormComponentExtended_form_3_Conditional_24_Template(rf, ctx) { if (rf & 1) {
603
- i0.ɵɵelementStart(0, "kendo-panelbar-item", 27);
604
- i0.ɵɵtemplate(1, AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_1_Template, 2, 1, "ng-template", 28)(2, AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Template, 6, 2, "ng-template", 29);
649
+ i0.ɵɵelementStart(0, "kendo-panelbar-item", 28);
650
+ i0.ɵɵtemplate(1, AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_1_Template, 4, 1, "ng-template", 29)(2, AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Template, 3, 1, "ng-template", 30);
605
651
  i0.ɵɵelementEnd();
606
652
  } if (rf & 2) {
607
- i0.ɵɵproperty("expanded", false);
653
+ const ctx_r1 = i0.ɵɵnextContext(2);
654
+ i0.ɵɵproperty("expanded", false)("disabled", ctx_r1.loadingStates.actions);
608
655
  } }
609
- function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_1_Template(rf, ctx) { if (rf & 1) {
610
- i0.ɵɵelement(0, "i", 33);
656
+ function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
657
+ i0.ɵɵelementStart(0, "span", 41);
658
+ i0.ɵɵelement(1, "i", 42);
659
+ i0.ɵɵelementEnd();
660
+ } }
661
+ function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
662
+ i0.ɵɵelementStart(0, "span");
611
663
  i0.ɵɵtext(1);
664
+ i0.ɵɵelementEnd();
612
665
  } if (rf & 2) {
613
- const ctx_r1 = i0.ɵɵnextContext(3);
666
+ const ctx_r1 = i0.ɵɵnextContext(4);
614
667
  i0.ɵɵadvance();
615
- i0.ɵɵtextInterpolate1(" Sub-Agents", ctx_r1.subAgentCount > 0 ? " (" + ctx_r1.subAgentCount + ")" : "", " ");
668
+ i0.ɵɵtextInterpolate1(" (", ctx_r1.subAgentCount, ")");
669
+ } }
670
+ function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_1_Template(rf, ctx) { if (rf & 1) {
671
+ i0.ɵɵelement(0, "i", 34);
672
+ i0.ɵɵtext(1, " Sub-Agents ");
673
+ i0.ɵɵtemplate(2, AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_1_Conditional_2_Template, 2, 0, "span", 41)(3, AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_1_Conditional_3_Template, 2, 1, "span");
674
+ } if (rf & 2) {
675
+ const ctx_r1 = i0.ɵɵnextContext(3);
676
+ i0.ɵɵadvance(2);
677
+ i0.ɵɵconditional(ctx_r1.loadingStates.subAgents ? 2 : ctx_r1.subAgentCount > 0 ? 3 : -1);
616
678
  } }
617
679
  function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
618
680
  const _r15 = i0.ɵɵgetCurrentView();
619
- i0.ɵɵelementStart(0, "button", 89);
681
+ i0.ɵɵelementStart(0, "button", 94);
620
682
  i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.addSubAgents()); });
621
- i0.ɵɵelement(1, "i", 90);
683
+ i0.ɵɵelement(1, "i", 95);
622
684
  i0.ɵɵtext(2, " Add Subagent ");
623
685
  i0.ɵɵelementEnd();
624
- i0.ɵɵelementStart(3, "button", 109);
686
+ i0.ɵɵelementStart(3, "button", 114);
625
687
  i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_5_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.createSubAgent()); });
626
- i0.ɵɵelement(4, "i", 90);
688
+ i0.ɵɵelement(4, "i", 95);
627
689
  i0.ɵɵtext(5, " Create Sub-Agent ");
628
690
  i0.ɵɵelementEnd();
629
691
  } }
630
692
  function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_6_Conditional_6_Template(rf, ctx) { if (rf & 1) {
631
693
  const _r16 = i0.ɵɵgetCurrentView();
632
- i0.ɵɵelementStart(0, "button", 92);
694
+ i0.ɵɵelementStart(0, "button", 97);
633
695
  i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_6_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.addSubAgents()); });
634
- i0.ɵɵelement(1, "i", 90);
696
+ i0.ɵɵelement(1, "i", 95);
635
697
  i0.ɵɵtext(2, " Add Subagent ");
636
698
  i0.ɵɵelementEnd();
637
- i0.ɵɵelementStart(3, "button", 110);
699
+ i0.ɵɵelementStart(3, "button", 115);
638
700
  i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_6_Conditional_6_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.createSubAgent()); });
639
- i0.ɵɵelement(4, "i", 90);
701
+ i0.ɵɵelement(4, "i", 95);
640
702
  i0.ɵɵtext(5, " Create First Sub-Agent ");
641
703
  i0.ɵɵelementEnd();
642
704
  } }
643
705
  function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
644
- i0.ɵɵelementStart(0, "div", 41);
645
- i0.ɵɵelement(1, "i", 33);
706
+ i0.ɵɵelementStart(0, "div", 44);
707
+ i0.ɵɵelement(1, "i", 34);
646
708
  i0.ɵɵelementStart(2, "h4");
647
709
  i0.ɵɵtext(3, "No Sub-Agents");
648
710
  i0.ɵɵelementEnd();
@@ -657,7 +719,7 @@ function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Condit
657
719
  i0.ɵɵconditional(ctx_r1.EditMode && ctx_r1.UserCanCreateSubAgents ? 6 : -1);
658
720
  } }
659
721
  function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_7_For_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
660
- i0.ɵɵelement(0, "img", 113);
722
+ i0.ɵɵelement(0, "img", 118);
661
723
  } if (rf & 2) {
662
724
  const subAgent_r18 = i0.ɵɵnextContext().$implicit;
663
725
  i0.ɵɵproperty("src", subAgent_r18.LogoURL, i0.ɵɵsanitizeUrl)("alt", subAgent_r18.Name + " logo");
@@ -670,7 +732,7 @@ function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Condit
670
732
  i0.ɵɵclassMap(ctx_r1.getSubAgentIcon(subAgent_r18));
671
733
  } }
672
734
  function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_7_For_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
673
- i0.ɵɵelementStart(0, "div", 98);
735
+ i0.ɵɵelementStart(0, "div", 103);
674
736
  i0.ɵɵtext(1);
675
737
  i0.ɵɵelementEnd();
676
738
  } if (rf & 2) {
@@ -679,7 +741,7 @@ function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Condit
679
741
  i0.ɵɵtextInterpolate(subAgent_r18.Description);
680
742
  } }
681
743
  function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_7_For_2_Conditional_9_Template(rf, ctx) { if (rf & 1) {
682
- i0.ɵɵelementStart(0, "span", 101);
744
+ i0.ɵɵelementStart(0, "span", 106);
683
745
  i0.ɵɵtext(1);
684
746
  i0.ɵɵelementEnd();
685
747
  } if (rf & 2) {
@@ -690,7 +752,7 @@ function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Condit
690
752
  i0.ɵɵtextInterpolate1(" ", subAgent_r18.Status, " ");
691
753
  } }
692
754
  function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_7_For_2_Conditional_10_Template(rf, ctx) { if (rf & 1) {
693
- i0.ɵɵelementStart(0, "span", 100);
755
+ i0.ɵɵelementStart(0, "span", 105);
694
756
  i0.ɵɵtext(1);
695
757
  i0.ɵɵelementEnd();
696
758
  } if (rf & 2) {
@@ -700,35 +762,35 @@ function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Condit
700
762
  } }
701
763
  function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_7_For_2_Conditional_12_Template(rf, ctx) { if (rf & 1) {
702
764
  const _r19 = i0.ɵɵgetCurrentView();
703
- i0.ɵɵelementStart(0, "button", 117);
765
+ i0.ɵɵelementStart(0, "button", 122);
704
766
  i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_7_For_2_Conditional_12_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r19); const subAgent_r18 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.openSubAgentAdvancedSettings(subAgent_r18, $event)); });
705
- i0.ɵɵelement(1, "i", 60);
767
+ i0.ɵɵelement(1, "i", 63);
706
768
  i0.ɵɵelementEnd();
707
769
  } }
708
770
  function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_7_For_2_Conditional_13_Template(rf, ctx) { if (rf & 1) {
709
771
  const _r20 = i0.ɵɵgetCurrentView();
710
- i0.ɵɵelementStart(0, "button", 118);
772
+ i0.ɵɵelementStart(0, "button", 123);
711
773
  i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_7_For_2_Conditional_13_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r20); const subAgent_r18 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.removeSubAgent(subAgent_r18, $event)); });
712
- i0.ɵɵelement(1, "i", 107);
774
+ i0.ɵɵelement(1, "i", 112);
713
775
  i0.ɵɵelementEnd();
714
776
  } }
715
777
  function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_7_For_2_Template(rf, ctx) { if (rf & 1) {
716
778
  const _r17 = i0.ɵɵgetCurrentView();
717
- i0.ɵɵelementStart(0, "div", 112);
779
+ i0.ɵɵelementStart(0, "div", 117);
718
780
  i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_7_For_2_Template_div_click_0_listener() { const subAgent_r18 = i0.ɵɵrestoreView(_r17).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("AI Agents", subAgent_r18.ID)); });
719
- i0.ɵɵelementStart(1, "div", 95);
720
- i0.ɵɵtemplate(2, AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_7_For_2_Conditional_2_Template, 1, 2, "img", 113)(3, AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_7_For_2_Conditional_3_Template, 1, 2, "i", 13);
781
+ i0.ɵɵelementStart(1, "div", 100);
782
+ i0.ɵɵtemplate(2, AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_7_For_2_Conditional_2_Template, 1, 2, "img", 118)(3, AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_7_For_2_Conditional_3_Template, 1, 2, "i", 13);
721
783
  i0.ɵɵelementEnd();
722
- i0.ɵɵelementStart(4, "div", 96)(5, "div", 97);
784
+ i0.ɵɵelementStart(4, "div", 101)(5, "div", 102);
723
785
  i0.ɵɵtext(6);
724
786
  i0.ɵɵelementEnd();
725
- i0.ɵɵtemplate(7, AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_7_For_2_Conditional_7_Template, 2, 1, "div", 98);
726
- i0.ɵɵelementStart(8, "div", 99);
727
- i0.ɵɵtemplate(9, AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_7_For_2_Conditional_9_Template, 2, 3, "span", 114)(10, AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_7_For_2_Conditional_10_Template, 2, 1, "span", 100);
787
+ i0.ɵɵtemplate(7, AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_7_For_2_Conditional_7_Template, 2, 1, "div", 103);
788
+ i0.ɵɵelementStart(8, "div", 104);
789
+ i0.ɵɵtemplate(9, AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_7_For_2_Conditional_9_Template, 2, 3, "span", 119)(10, AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_7_For_2_Conditional_10_Template, 2, 1, "span", 105);
728
790
  i0.ɵɵelementEnd()();
729
- i0.ɵɵelementStart(11, "div", 103);
730
- i0.ɵɵtemplate(12, AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_7_For_2_Conditional_12_Template, 2, 0, "button", 115)(13, AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_7_For_2_Conditional_13_Template, 2, 0, "button", 116);
731
- i0.ɵɵelement(14, "i", 105);
791
+ i0.ɵɵelementStart(11, "div", 108);
792
+ i0.ɵɵtemplate(12, AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_7_For_2_Conditional_12_Template, 2, 0, "button", 120)(13, AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_7_For_2_Conditional_13_Template, 2, 0, "button", 121);
793
+ i0.ɵɵelement(14, "i", 110);
732
794
  i0.ɵɵelementEnd()();
733
795
  } if (rf & 2) {
734
796
  const subAgent_r18 = ctx.$implicit;
@@ -750,7 +812,7 @@ function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Condit
750
812
  } }
751
813
  function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_7_Conditional_3_Template(rf, ctx) { if (rf & 1) {
752
814
  const _r21 = i0.ɵɵgetCurrentView();
753
- i0.ɵɵelementStart(0, "div", 82);
815
+ i0.ɵɵelementStart(0, "div", 85);
754
816
  i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_7_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("AI Agents", "")); });
755
817
  i0.ɵɵelementStart(1, "span");
756
818
  i0.ɵɵtext(2);
@@ -761,9 +823,9 @@ function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Condit
761
823
  i0.ɵɵtextInterpolate1("View all ", ctx_r1.subAgentCount, " sub-agents...");
762
824
  } }
763
825
  function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
764
- i0.ɵɵelementStart(0, "div", 88);
765
- i0.ɵɵrepeaterCreate(1, AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_7_For_2_Template, 15, 7, "div", 111, _forTrack0);
766
- i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_7_Conditional_3_Template, 3, 1, "div", 44);
826
+ i0.ɵɵelementStart(0, "div", 93);
827
+ i0.ɵɵrepeaterCreate(1, AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_7_For_2_Template, 15, 7, "div", 116, _forTrack0);
828
+ i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_7_Conditional_3_Template, 3, 1, "div", 47);
767
829
  i0.ɵɵelementEnd();
768
830
  } if (rf & 2) {
769
831
  const ctx_r1 = i0.ɵɵnextContext(4);
@@ -773,13 +835,13 @@ function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Condit
773
835
  i0.ɵɵconditional(ctx_r1.subAgentCount > ctx_r1.subAgents.length ? 3 : -1);
774
836
  } }
775
837
  function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Template(rf, ctx) { if (rf & 1) {
776
- i0.ɵɵelementStart(0, "div", 84)(1, "div", 85)(2, "div", 108);
838
+ i0.ɵɵelementStart(0, "div", 87)(1, "div", 90)(2, "div", 113);
777
839
  i0.ɵɵtext(3, " Manage hierarchical relationships with child agents that work under this agent. ");
778
840
  i0.ɵɵelementEnd();
779
- i0.ɵɵelementStart(4, "div", 86);
841
+ i0.ɵɵelementStart(4, "div", 91);
780
842
  i0.ɵɵtemplate(5, AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_5_Template, 6, 0);
781
843
  i0.ɵɵelementEnd()();
782
- i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_6_Template, 7, 1, "div", 41)(7, AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_7_Template, 4, 1, "div", 88);
844
+ i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_6_Template, 7, 1, "div", 44)(7, AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_7_Template, 4, 1, "div", 93);
783
845
  i0.ɵɵelementEnd();
784
846
  } if (rf & 2) {
785
847
  const ctx_r1 = i0.ɵɵnextContext(3);
@@ -789,23 +851,39 @@ function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Templa
789
851
  i0.ɵɵconditional(ctx_r1.subAgentCount === 0 ? 6 : 7);
790
852
  } }
791
853
  function AIAgentFormComponentExtended_form_3_Conditional_25_Template(rf, ctx) { if (rf & 1) {
792
- i0.ɵɵelementStart(0, "kendo-panelbar-item", 27);
793
- i0.ɵɵtemplate(1, AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_1_Template, 2, 1, "ng-template", 28)(2, AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Template, 8, 2, "ng-template", 29);
854
+ i0.ɵɵelementStart(0, "kendo-panelbar-item", 28);
855
+ i0.ɵɵtemplate(1, AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_1_Template, 4, 1, "ng-template", 29)(2, AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Template, 8, 2, "ng-template", 30);
794
856
  i0.ɵɵelementEnd();
795
857
  } if (rf & 2) {
796
- i0.ɵɵproperty("expanded", false);
858
+ const ctx_r1 = i0.ɵɵnextContext(2);
859
+ i0.ɵɵproperty("expanded", false)("disabled", ctx_r1.loadingStates.subAgents);
797
860
  } }
798
- function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_1_Template(rf, ctx) { if (rf & 1) {
799
- i0.ɵɵelement(0, "i", 77);
861
+ function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
862
+ i0.ɵɵelementStart(0, "span", 41);
863
+ i0.ɵɵelement(1, "i", 42);
864
+ i0.ɵɵelementEnd();
865
+ } }
866
+ function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
867
+ i0.ɵɵelementStart(0, "span");
800
868
  i0.ɵɵtext(1);
869
+ i0.ɵɵelementEnd();
801
870
  } if (rf & 2) {
802
- const ctx_r1 = i0.ɵɵnextContext(3);
871
+ const ctx_r1 = i0.ɵɵnextContext(4);
803
872
  i0.ɵɵadvance();
804
- i0.ɵɵtextInterpolate1(" Prompts", ctx_r1.promptCount > 0 ? " (" + ctx_r1.promptCount + ")" : "", " ");
873
+ i0.ɵɵtextInterpolate1(" (", ctx_r1.promptCount, ")");
874
+ } }
875
+ function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_1_Template(rf, ctx) { if (rf & 1) {
876
+ i0.ɵɵelement(0, "i", 80);
877
+ i0.ɵɵtext(1, " Prompts ");
878
+ i0.ɵɵtemplate(2, AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_1_Conditional_2_Template, 2, 0, "span", 41)(3, AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_1_Conditional_3_Template, 2, 1, "span");
879
+ } if (rf & 2) {
880
+ const ctx_r1 = i0.ɵɵnextContext(3);
881
+ i0.ɵɵadvance(2);
882
+ i0.ɵɵconditional(ctx_r1.loadingStates.prompts ? 2 : ctx_r1.promptCount > 0 ? 3 : -1);
805
883
  } }
806
884
  function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
807
885
  const _r22 = i0.ɵɵgetCurrentView();
808
- i0.ɵɵelementStart(0, "kendo-dropdownlist", 125);
886
+ i0.ɵɵelementStart(0, "kendo-dropdownlist", 130);
809
887
  i0.ɵɵtwoWayListener("ngModelChange", function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_7_Template_kendo_dropdownlist_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(4); i0.ɵɵtwoWayBindingSet(ctx_r1.record.ModelSelectionMode, $event) || (ctx_r1.record.ModelSelectionMode = $event); return i0.ɵɵresetView($event); });
810
888
  i0.ɵɵelementEnd();
811
889
  } if (rf & 2) {
@@ -814,7 +892,7 @@ function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Condit
814
892
  i0.ɵɵproperty("data", ctx_r1.modelSelectionModes)("valuePrimitive", true);
815
893
  } }
816
894
  function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
817
- i0.ɵɵelementStart(0, "span", 124);
895
+ i0.ɵɵelementStart(0, "span", 129);
818
896
  i0.ɵɵtext(1);
819
897
  i0.ɵɵelementEnd();
820
898
  } if (rf & 2) {
@@ -824,30 +902,30 @@ function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Condit
824
902
  } }
825
903
  function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_10_Template(rf, ctx) { if (rf & 1) {
826
904
  const _r23 = i0.ɵɵgetCurrentView();
827
- i0.ɵɵelementStart(0, "button", 89);
905
+ i0.ɵɵelementStart(0, "button", 94);
828
906
  i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_10_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r23); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.addPrompt()); });
829
- i0.ɵɵelement(1, "i", 90);
907
+ i0.ɵɵelement(1, "i", 95);
830
908
  i0.ɵɵtext(2, " Add Prompt ");
831
909
  i0.ɵɵelementEnd();
832
910
  } }
833
911
  function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_11_Conditional_6_Template(rf, ctx) { if (rf & 1) {
834
912
  const _r24 = i0.ɵɵgetCurrentView();
835
- i0.ɵɵelementStart(0, "button", 92);
913
+ i0.ɵɵelementStart(0, "button", 97);
836
914
  i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_11_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r24); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.addPrompt()); });
837
- i0.ɵɵelement(1, "i", 90);
915
+ i0.ɵɵelement(1, "i", 95);
838
916
  i0.ɵɵtext(2, " Create First Prompt ");
839
917
  i0.ɵɵelementEnd();
840
918
  } }
841
919
  function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_11_Template(rf, ctx) { if (rf & 1) {
842
- i0.ɵɵelementStart(0, "div", 41);
843
- i0.ɵɵelement(1, "i", 77);
920
+ i0.ɵɵelementStart(0, "div", 44);
921
+ i0.ɵɵelement(1, "i", 80);
844
922
  i0.ɵɵelementStart(2, "h4");
845
923
  i0.ɵɵtext(3, "No Prompts Configured");
846
924
  i0.ɵɵelementEnd();
847
925
  i0.ɵɵelementStart(4, "p");
848
926
  i0.ɵɵtext(5, "Add prompts to define how this agent processes requests and generates responses.");
849
927
  i0.ɵɵelementEnd();
850
- i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_11_Conditional_6_Template, 3, 0, "button", 91);
928
+ i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_11_Conditional_6_Template, 3, 0, "button", 96);
851
929
  i0.ɵɵelementEnd();
852
930
  } if (rf & 2) {
853
931
  const ctx_r1 = i0.ɵɵnextContext(4);
@@ -855,7 +933,7 @@ function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Condit
855
933
  i0.ɵɵconditional(ctx_r1.EditMode && ctx_r1.UserCanCreateNewPrompts ? 6 : -1);
856
934
  } }
857
935
  function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_12_For_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
858
- i0.ɵɵelementStart(0, "div", 98);
936
+ i0.ɵɵelementStart(0, "div", 103);
859
937
  i0.ɵɵtext(1);
860
938
  i0.ɵɵelementEnd();
861
939
  } if (rf & 2) {
@@ -864,7 +942,7 @@ function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Condit
864
942
  i0.ɵɵtextInterpolate2("", prompt_r26.TemplateText.substring(0, 120), "", prompt_r26.TemplateText.length > 120 ? "..." : "", "");
865
943
  } }
866
944
  function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_12_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
867
- i0.ɵɵelementStart(0, "span", 100);
945
+ i0.ɵɵelementStart(0, "span", 105);
868
946
  i0.ɵɵtext(1);
869
947
  i0.ɵɵelementEnd();
870
948
  } if (rf & 2) {
@@ -874,35 +952,35 @@ function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Condit
874
952
  } }
875
953
  function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_12_For_2_Conditional_10_Template(rf, ctx) { if (rf & 1) {
876
954
  const _r27 = i0.ɵɵgetCurrentView();
877
- i0.ɵɵelementStart(0, "button", 117);
955
+ i0.ɵɵelementStart(0, "button", 122);
878
956
  i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_12_For_2_Conditional_10_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r27); const prompt_r26 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.openPromptAdvancedSettings(prompt_r26, $event)); });
879
- i0.ɵɵelement(1, "i", 60);
957
+ i0.ɵɵelement(1, "i", 63);
880
958
  i0.ɵɵelementEnd();
881
959
  } }
882
960
  function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_12_For_2_Conditional_11_Template(rf, ctx) { if (rf & 1) {
883
961
  const _r28 = i0.ɵɵgetCurrentView();
884
- i0.ɵɵelementStart(0, "button", 130);
962
+ i0.ɵɵelementStart(0, "button", 135);
885
963
  i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_12_For_2_Conditional_11_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r28); const prompt_r26 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.removePrompt(prompt_r26, $event)); });
886
- i0.ɵɵelement(1, "i", 107);
964
+ i0.ɵɵelement(1, "i", 112);
887
965
  i0.ɵɵelementEnd();
888
966
  } }
889
967
  function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_12_For_2_Template(rf, ctx) { if (rf & 1) {
890
968
  const _r25 = i0.ɵɵgetCurrentView();
891
- i0.ɵɵelementStart(0, "div", 127);
969
+ i0.ɵɵelementStart(0, "div", 132);
892
970
  i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_12_For_2_Template_div_click_0_listener() { const prompt_r26 = i0.ɵɵrestoreView(_r25).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("AI Prompts", prompt_r26.ID)); });
893
- i0.ɵɵelementStart(1, "div", 95);
894
- i0.ɵɵelement(2, "i", 128);
971
+ i0.ɵɵelementStart(1, "div", 100);
972
+ i0.ɵɵelement(2, "i", 133);
895
973
  i0.ɵɵelementEnd();
896
- i0.ɵɵelementStart(3, "div", 96)(4, "div", 97);
974
+ i0.ɵɵelementStart(3, "div", 101)(4, "div", 102);
897
975
  i0.ɵɵtext(5);
898
976
  i0.ɵɵelementEnd();
899
- i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_12_For_2_Conditional_6_Template, 2, 2, "div", 98);
900
- i0.ɵɵelementStart(7, "div", 99);
901
- i0.ɵɵtemplate(8, AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_12_For_2_Conditional_8_Template, 2, 1, "span", 100);
977
+ i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_12_For_2_Conditional_6_Template, 2, 2, "div", 103);
978
+ i0.ɵɵelementStart(7, "div", 104);
979
+ i0.ɵɵtemplate(8, AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_12_For_2_Conditional_8_Template, 2, 1, "span", 105);
902
980
  i0.ɵɵelementEnd()();
903
- i0.ɵɵelementStart(9, "div", 103);
904
- i0.ɵɵtemplate(10, AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_12_For_2_Conditional_10_Template, 2, 0, "button", 115)(11, AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_12_For_2_Conditional_11_Template, 2, 0, "button", 129);
905
- i0.ɵɵelement(12, "i", 105);
981
+ i0.ɵɵelementStart(9, "div", 108);
982
+ i0.ɵɵtemplate(10, AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_12_For_2_Conditional_10_Template, 2, 0, "button", 120)(11, AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_12_For_2_Conditional_11_Template, 2, 0, "button", 134);
983
+ i0.ɵɵelement(12, "i", 110);
906
984
  i0.ɵɵelementEnd()();
907
985
  } if (rf & 2) {
908
986
  const prompt_r26 = ctx.$implicit;
@@ -920,7 +998,7 @@ function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Condit
920
998
  } }
921
999
  function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_12_Conditional_3_Template(rf, ctx) { if (rf & 1) {
922
1000
  const _r29 = i0.ɵɵgetCurrentView();
923
- i0.ɵɵelementStart(0, "div", 82);
1001
+ i0.ɵɵelementStart(0, "div", 85);
924
1002
  i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_12_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r29); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("AI Prompts", "")); });
925
1003
  i0.ɵɵelementStart(1, "span");
926
1004
  i0.ɵɵtext(2);
@@ -931,9 +1009,9 @@ function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Condit
931
1009
  i0.ɵɵtextInterpolate1("View all ", ctx_r1.promptCount, " prompts...");
932
1010
  } }
933
1011
  function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_12_Template(rf, ctx) { if (rf & 1) {
934
- i0.ɵɵelementStart(0, "div", 88);
935
- i0.ɵɵrepeaterCreate(1, AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_12_For_2_Template, 13, 5, "div", 126, _forTrack0);
936
- i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_12_Conditional_3_Template, 3, 1, "div", 44);
1012
+ i0.ɵɵelementStart(0, "div", 93);
1013
+ i0.ɵɵrepeaterCreate(1, AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_12_For_2_Template, 13, 5, "div", 131, _forTrack0);
1014
+ i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_12_Conditional_3_Template, 3, 1, "div", 47);
937
1015
  i0.ɵɵelementEnd();
938
1016
  } if (rf & 2) {
939
1017
  const ctx_r1 = i0.ɵɵnextContext(4);
@@ -943,16 +1021,16 @@ function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Condit
943
1021
  i0.ɵɵconditional(ctx_r1.promptCount > ctx_r1.agentPrompts.length ? 3 : -1);
944
1022
  } }
945
1023
  function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Template(rf, ctx) { if (rf & 1) {
946
- i0.ɵɵelementStart(0, "div", 84)(1, "div", 85)(2, "div", 119)(3, "div", 120)(4, "label", 121);
947
- i0.ɵɵelement(5, "i", 122);
1024
+ i0.ɵɵelementStart(0, "div", 87)(1, "div", 90)(2, "div", 124)(3, "div", 125)(4, "label", 126);
1025
+ i0.ɵɵelement(5, "i", 127);
948
1026
  i0.ɵɵtext(6, " Model Selection: ");
949
1027
  i0.ɵɵelementEnd();
950
- i0.ɵɵtemplate(7, AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_7_Template, 1, 3, "kendo-dropdownlist", 123)(8, AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_8_Template, 2, 1, "span", 124);
1028
+ i0.ɵɵtemplate(7, AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_7_Template, 1, 3, "kendo-dropdownlist", 128)(8, AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_8_Template, 2, 1, "span", 129);
951
1029
  i0.ɵɵelementEnd()();
952
- i0.ɵɵelementStart(9, "div", 86);
953
- i0.ɵɵtemplate(10, AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_10_Template, 3, 0, "button", 87);
1030
+ i0.ɵɵelementStart(9, "div", 91);
1031
+ i0.ɵɵtemplate(10, AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_10_Template, 3, 0, "button", 92);
954
1032
  i0.ɵɵelementEnd()();
955
- i0.ɵɵtemplate(11, AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_11_Template, 7, 1, "div", 41)(12, AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_12_Template, 4, 1, "div", 88);
1033
+ i0.ɵɵtemplate(11, AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_11_Template, 7, 1, "div", 44)(12, AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_12_Template, 4, 1, "div", 93);
956
1034
  i0.ɵɵelementEnd();
957
1035
  } if (rf & 2) {
958
1036
  const ctx_r1 = i0.ɵɵnextContext(3);
@@ -964,14 +1042,15 @@ function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Templa
964
1042
  i0.ɵɵconditional(ctx_r1.promptCount === 0 ? 11 : 12);
965
1043
  } }
966
1044
  function AIAgentFormComponentExtended_form_3_Conditional_26_Template(rf, ctx) { if (rf & 1) {
967
- i0.ɵɵelementStart(0, "kendo-panelbar-item", 27);
968
- i0.ɵɵtemplate(1, AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_1_Template, 2, 1, "ng-template", 28)(2, AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Template, 13, 3, "ng-template", 29);
1045
+ i0.ɵɵelementStart(0, "kendo-panelbar-item", 28);
1046
+ i0.ɵɵtemplate(1, AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_1_Template, 4, 1, "ng-template", 29)(2, AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Template, 13, 3, "ng-template", 30);
969
1047
  i0.ɵɵelementEnd();
970
1048
  } if (rf & 2) {
971
- i0.ɵɵproperty("expanded", false);
1049
+ const ctx_r1 = i0.ɵɵnextContext(2);
1050
+ i0.ɵɵproperty("expanded", false)("disabled", ctx_r1.loadingStates.prompts);
972
1051
  } }
973
1052
  function AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_1_Template(rf, ctx) { if (rf & 1) {
974
- i0.ɵɵelement(0, "i", 131);
1053
+ i0.ɵɵelement(0, "i", 136);
975
1054
  i0.ɵɵtext(1);
976
1055
  } if (rf & 2) {
977
1056
  const ctx_r1 = i0.ɵɵnextContext(3);
@@ -979,8 +1058,8 @@ function AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_1_Templa
979
1058
  i0.ɵɵtextInterpolate1(" Learning Cycles", ctx_r1.learningCycleCount > 0 ? " (" + ctx_r1.learningCycleCount + ")" : "", " ");
980
1059
  } }
981
1060
  function AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
982
- i0.ɵɵelementStart(0, "div", 41);
983
- i0.ɵɵelement(1, "i", 131);
1061
+ i0.ɵɵelementStart(0, "div", 44);
1062
+ i0.ɵɵelement(1, "i", 136);
984
1063
  i0.ɵɵelementStart(2, "h4");
985
1064
  i0.ɵɵtext(3, "No Learning Cycles");
986
1065
  i0.ɵɵelementEnd();
@@ -989,8 +1068,8 @@ function AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_2_Condit
989
1068
  i0.ɵɵelementEnd()();
990
1069
  } }
991
1070
  function AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_2_Conditional_5_For_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
992
- i0.ɵɵelementStart(0, "span", 100);
993
- i0.ɵɵelement(1, "i", 134);
1071
+ i0.ɵɵelementStart(0, "span", 105);
1072
+ i0.ɵɵelement(1, "i", 139);
994
1073
  i0.ɵɵtext(2);
995
1074
  i0.ɵɵpipe(3, "date");
996
1075
  i0.ɵɵelementEnd();
@@ -1000,7 +1079,7 @@ function AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_2_Condit
1000
1079
  i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(3, 1, cycle_r31.StartedAt, "short"), " ");
1001
1080
  } }
1002
1081
  function AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_2_Conditional_5_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
1003
- i0.ɵɵelementStart(0, "span", 101);
1082
+ i0.ɵɵelementStart(0, "span", 106);
1004
1083
  i0.ɵɵtext(1);
1005
1084
  i0.ɵɵelementEnd();
1006
1085
  } if (rf & 2) {
@@ -1010,19 +1089,19 @@ function AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_2_Condit
1010
1089
  } }
1011
1090
  function AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_2_Conditional_5_For_2_Template(rf, ctx) { if (rf & 1) {
1012
1091
  const _r30 = i0.ɵɵgetCurrentView();
1013
- i0.ɵɵelementStart(0, "div", 133);
1092
+ i0.ɵɵelementStart(0, "div", 138);
1014
1093
  i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_2_Conditional_5_For_2_Template_div_click_0_listener() { const cycle_r31 = i0.ɵɵrestoreView(_r30).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("AI Agent Learning Cycles", cycle_r31.ID)); });
1015
- i0.ɵɵelementStart(1, "div", 95);
1016
- i0.ɵɵelement(2, "i", 131);
1094
+ i0.ɵɵelementStart(1, "div", 100);
1095
+ i0.ɵɵelement(2, "i", 136);
1017
1096
  i0.ɵɵelementEnd();
1018
- i0.ɵɵelementStart(3, "div", 96)(4, "div", 97);
1097
+ i0.ɵɵelementStart(3, "div", 101)(4, "div", 102);
1019
1098
  i0.ɵɵtext(5);
1020
1099
  i0.ɵɵelementEnd();
1021
- i0.ɵɵelementStart(6, "div", 99);
1022
- i0.ɵɵtemplate(7, AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_2_Conditional_5_For_2_Conditional_7_Template, 4, 4, "span", 100)(8, AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_2_Conditional_5_For_2_Conditional_8_Template, 2, 1, "span", 101);
1100
+ i0.ɵɵelementStart(6, "div", 104);
1101
+ i0.ɵɵtemplate(7, AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_2_Conditional_5_For_2_Conditional_7_Template, 4, 4, "span", 105)(8, AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_2_Conditional_5_For_2_Conditional_8_Template, 2, 1, "span", 106);
1023
1102
  i0.ɵɵelementEnd()();
1024
- i0.ɵɵelementStart(9, "div", 103);
1025
- i0.ɵɵelement(10, "i", 105);
1103
+ i0.ɵɵelementStart(9, "div", 108);
1104
+ i0.ɵɵelement(10, "i", 110);
1026
1105
  i0.ɵɵelementEnd()();
1027
1106
  } if (rf & 2) {
1028
1107
  const cycle_r31 = ctx.$implicit;
@@ -1035,7 +1114,7 @@ function AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_2_Condit
1035
1114
  } }
1036
1115
  function AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_2_Conditional_5_Conditional_3_Template(rf, ctx) { if (rf & 1) {
1037
1116
  const _r32 = i0.ɵɵgetCurrentView();
1038
- i0.ɵɵelementStart(0, "div", 82);
1117
+ i0.ɵɵelementStart(0, "div", 85);
1039
1118
  i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_2_Conditional_5_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r32); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("AI Agent Learning Cycles", "")); });
1040
1119
  i0.ɵɵelementStart(1, "span");
1041
1120
  i0.ɵɵtext(2);
@@ -1046,9 +1125,9 @@ function AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_2_Condit
1046
1125
  i0.ɵɵtextInterpolate1("View all ", ctx_r1.learningCycleCount, " cycles...");
1047
1126
  } }
1048
1127
  function AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
1049
- i0.ɵɵelementStart(0, "div", 88);
1050
- i0.ɵɵrepeaterCreate(1, AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_2_Conditional_5_For_2_Template, 11, 3, "div", 132, _forTrack0);
1051
- i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_2_Conditional_5_Conditional_3_Template, 3, 1, "div", 44);
1128
+ i0.ɵɵelementStart(0, "div", 93);
1129
+ i0.ɵɵrepeaterCreate(1, AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_2_Conditional_5_For_2_Template, 11, 3, "div", 137, _forTrack0);
1130
+ i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_2_Conditional_5_Conditional_3_Template, 3, 1, "div", 47);
1052
1131
  i0.ɵɵelementEnd();
1053
1132
  } if (rf & 2) {
1054
1133
  const ctx_r1 = i0.ɵɵnextContext(4);
@@ -1058,10 +1137,10 @@ function AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_2_Condit
1058
1137
  i0.ɵɵconditional(ctx_r1.learningCycleCount > ctx_r1.learningCycles.length ? 3 : -1);
1059
1138
  } }
1060
1139
  function AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_2_Template(rf, ctx) { if (rf & 1) {
1061
- i0.ɵɵelementStart(0, "div", 84)(1, "div", 85)(2, "div", 108);
1140
+ i0.ɵɵelementStart(0, "div", 87)(1, "div", 90)(2, "div", 113);
1062
1141
  i0.ɵɵtext(3, " Monitor and manage learning cycles, training sessions, and performance analytics. ");
1063
1142
  i0.ɵɵelementEnd()();
1064
- i0.ɵɵtemplate(4, AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_2_Conditional_4_Template, 6, 0, "div", 41)(5, AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_2_Conditional_5_Template, 4, 1, "div", 88);
1143
+ i0.ɵɵtemplate(4, AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_2_Conditional_4_Template, 6, 0, "div", 44)(5, AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_2_Conditional_5_Template, 4, 1, "div", 93);
1065
1144
  i0.ɵɵelementEnd();
1066
1145
  } if (rf & 2) {
1067
1146
  const ctx_r1 = i0.ɵɵnextContext(3);
@@ -1069,14 +1148,15 @@ function AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_2_Templa
1069
1148
  i0.ɵɵconditional(ctx_r1.learningCycleCount === 0 ? 4 : 5);
1070
1149
  } }
1071
1150
  function AIAgentFormComponentExtended_form_3_Conditional_27_Template(rf, ctx) { if (rf & 1) {
1072
- i0.ɵɵelementStart(0, "kendo-panelbar-item", 27);
1073
- i0.ɵɵtemplate(1, AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_1_Template, 2, 1, "ng-template", 28)(2, AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_2_Template, 6, 1, "ng-template", 29);
1151
+ i0.ɵɵelementStart(0, "kendo-panelbar-item", 28);
1152
+ i0.ɵɵtemplate(1, AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_1_Template, 2, 1, "ng-template", 29)(2, AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_2_Template, 6, 1, "ng-template", 30);
1074
1153
  i0.ɵɵelementEnd();
1075
1154
  } if (rf & 2) {
1076
- i0.ɵɵproperty("expanded", false);
1155
+ const ctx_r1 = i0.ɵɵnextContext(2);
1156
+ i0.ɵɵproperty("expanded", false)("disabled", ctx_r1.loadingStates.learningCycles);
1077
1157
  } }
1078
1158
  function AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_1_Template(rf, ctx) { if (rf & 1) {
1079
- i0.ɵɵelement(0, "i", 135);
1159
+ i0.ɵɵelement(0, "i", 140);
1080
1160
  i0.ɵɵtext(1);
1081
1161
  } if (rf & 2) {
1082
1162
  const ctx_r1 = i0.ɵɵnextContext(3);
@@ -1085,30 +1165,30 @@ function AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_1_Templa
1085
1165
  } }
1086
1166
  function AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
1087
1167
  const _r33 = i0.ɵɵgetCurrentView();
1088
- i0.ɵɵelementStart(0, "button", 89);
1168
+ i0.ɵɵelementStart(0, "button", 94);
1089
1169
  i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r33); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.addNote()); });
1090
- i0.ɵɵelement(1, "i", 90);
1170
+ i0.ɵɵelement(1, "i", 95);
1091
1171
  i0.ɵɵtext(2, " Add Note ");
1092
1172
  i0.ɵɵelementEnd();
1093
1173
  } }
1094
1174
  function AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_6_Conditional_6_Template(rf, ctx) { if (rf & 1) {
1095
1175
  const _r34 = i0.ɵɵgetCurrentView();
1096
- i0.ɵɵelementStart(0, "button", 92);
1176
+ i0.ɵɵelementStart(0, "button", 97);
1097
1177
  i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_6_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r34); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.addNote()); });
1098
- i0.ɵɵelement(1, "i", 90);
1178
+ i0.ɵɵelement(1, "i", 95);
1099
1179
  i0.ɵɵtext(2, " Create First Note ");
1100
1180
  i0.ɵɵelementEnd();
1101
1181
  } }
1102
1182
  function AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
1103
- i0.ɵɵelementStart(0, "div", 41);
1104
- i0.ɵɵelement(1, "i", 135);
1183
+ i0.ɵɵelementStart(0, "div", 44);
1184
+ i0.ɵɵelement(1, "i", 140);
1105
1185
  i0.ɵɵelementStart(2, "h4");
1106
1186
  i0.ɵɵtext(3, "No Notes");
1107
1187
  i0.ɵɵelementEnd();
1108
1188
  i0.ɵɵelementStart(4, "p");
1109
1189
  i0.ɵɵtext(5, "Add notes to document important information, observations, or instructions for this agent.");
1110
1190
  i0.ɵɵelementEnd();
1111
- i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_6_Conditional_6_Template, 3, 0, "button", 91);
1191
+ i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_6_Conditional_6_Template, 3, 0, "button", 96);
1112
1192
  i0.ɵɵelementEnd();
1113
1193
  } if (rf & 2) {
1114
1194
  const ctx_r1 = i0.ɵɵnextContext(4);
@@ -1116,7 +1196,7 @@ function AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Condit
1116
1196
  i0.ɵɵconditional(ctx_r1.EditMode && ctx_r1.UserCanCreateNotes ? 6 : -1);
1117
1197
  } }
1118
1198
  function AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_7_For_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
1119
- i0.ɵɵelementStart(0, "div", 98);
1199
+ i0.ɵɵelementStart(0, "div", 103);
1120
1200
  i0.ɵɵtext(1);
1121
1201
  i0.ɵɵelementEnd();
1122
1202
  } if (rf & 2) {
@@ -1125,8 +1205,8 @@ function AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Condit
1125
1205
  i0.ɵɵtextInterpolate2("", note_r36.Note.substring(0, 100), "", note_r36.Note.length > 100 ? "..." : "", "");
1126
1206
  } }
1127
1207
  function AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_7_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
1128
- i0.ɵɵelementStart(0, "span", 100);
1129
- i0.ɵɵelement(1, "i", 134);
1208
+ i0.ɵɵelementStart(0, "span", 105);
1209
+ i0.ɵɵelement(1, "i", 139);
1130
1210
  i0.ɵɵtext(2);
1131
1211
  i0.ɵɵpipe(3, "date");
1132
1212
  i0.ɵɵelementEnd();
@@ -1137,20 +1217,20 @@ function AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Condit
1137
1217
  } }
1138
1218
  function AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_7_For_2_Template(rf, ctx) { if (rf & 1) {
1139
1219
  const _r35 = i0.ɵɵgetCurrentView();
1140
- i0.ɵɵelementStart(0, "div", 137);
1220
+ i0.ɵɵelementStart(0, "div", 142);
1141
1221
  i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_7_For_2_Template_div_click_0_listener() { const note_r36 = i0.ɵɵrestoreView(_r35).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("AI Agent Notes", note_r36.ID)); });
1142
- i0.ɵɵelementStart(1, "div", 95);
1143
- i0.ɵɵelement(2, "i", 135);
1222
+ i0.ɵɵelementStart(1, "div", 100);
1223
+ i0.ɵɵelement(2, "i", 140);
1144
1224
  i0.ɵɵelementEnd();
1145
- i0.ɵɵelementStart(3, "div", 96)(4, "div", 97);
1225
+ i0.ɵɵelementStart(3, "div", 101)(4, "div", 102);
1146
1226
  i0.ɵɵtext(5);
1147
1227
  i0.ɵɵelementEnd();
1148
- i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_7_For_2_Conditional_6_Template, 2, 2, "div", 98);
1149
- i0.ɵɵelementStart(7, "div", 99);
1150
- i0.ɵɵtemplate(8, AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_7_For_2_Conditional_8_Template, 4, 4, "span", 100);
1228
+ i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_7_For_2_Conditional_6_Template, 2, 2, "div", 103);
1229
+ i0.ɵɵelementStart(7, "div", 104);
1230
+ i0.ɵɵtemplate(8, AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_7_For_2_Conditional_8_Template, 4, 4, "span", 105);
1151
1231
  i0.ɵɵelementEnd()();
1152
- i0.ɵɵelementStart(9, "div", 103);
1153
- i0.ɵɵelement(10, "i", 105);
1232
+ i0.ɵɵelementStart(9, "div", 108);
1233
+ i0.ɵɵelement(10, "i", 110);
1154
1234
  i0.ɵɵelementEnd()();
1155
1235
  } if (rf & 2) {
1156
1236
  const note_r36 = ctx.$implicit;
@@ -1163,7 +1243,7 @@ function AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Condit
1163
1243
  } }
1164
1244
  function AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_7_Conditional_3_Template(rf, ctx) { if (rf & 1) {
1165
1245
  const _r37 = i0.ɵɵgetCurrentView();
1166
- i0.ɵɵelementStart(0, "div", 82);
1246
+ i0.ɵɵelementStart(0, "div", 85);
1167
1247
  i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_7_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r37); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("AI Agent Notes", "")); });
1168
1248
  i0.ɵɵelementStart(1, "span");
1169
1249
  i0.ɵɵtext(2);
@@ -1174,9 +1254,9 @@ function AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Condit
1174
1254
  i0.ɵɵtextInterpolate1("View all ", ctx_r1.noteCount, " notes...");
1175
1255
  } }
1176
1256
  function AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
1177
- i0.ɵɵelementStart(0, "div", 88);
1178
- i0.ɵɵrepeaterCreate(1, AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_7_For_2_Template, 11, 3, "div", 136, _forTrack0);
1179
- i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_7_Conditional_3_Template, 3, 1, "div", 44);
1257
+ i0.ɵɵelementStart(0, "div", 93);
1258
+ i0.ɵɵrepeaterCreate(1, AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_7_For_2_Template, 11, 3, "div", 141, _forTrack0);
1259
+ i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_7_Conditional_3_Template, 3, 1, "div", 47);
1180
1260
  i0.ɵɵelementEnd();
1181
1261
  } if (rf & 2) {
1182
1262
  const ctx_r1 = i0.ɵɵnextContext(4);
@@ -1186,13 +1266,13 @@ function AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Condit
1186
1266
  i0.ɵɵconditional(ctx_r1.noteCount > ctx_r1.agentNotes.length ? 3 : -1);
1187
1267
  } }
1188
1268
  function AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Template(rf, ctx) { if (rf & 1) {
1189
- i0.ɵɵelementStart(0, "div", 84)(1, "div", 85)(2, "div", 108);
1269
+ i0.ɵɵelementStart(0, "div", 87)(1, "div", 90)(2, "div", 113);
1190
1270
  i0.ɵɵtext(3, " Manage notes, documentation, and annotations for this agent. ");
1191
1271
  i0.ɵɵelementEnd();
1192
- i0.ɵɵelementStart(4, "div", 86);
1193
- i0.ɵɵtemplate(5, AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_5_Template, 3, 0, "button", 87);
1272
+ i0.ɵɵelementStart(4, "div", 91);
1273
+ i0.ɵɵtemplate(5, AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_5_Template, 3, 0, "button", 92);
1194
1274
  i0.ɵɵelementEnd()();
1195
- i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_6_Template, 7, 1, "div", 41)(7, AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_7_Template, 4, 1, "div", 88);
1275
+ i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_6_Template, 7, 1, "div", 44)(7, AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_7_Template, 4, 1, "div", 93);
1196
1276
  i0.ɵɵelementEnd();
1197
1277
  } if (rf & 2) {
1198
1278
  const ctx_r1 = i0.ɵɵnextContext(3);
@@ -1202,35 +1282,36 @@ function AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Templa
1202
1282
  i0.ɵɵconditional(ctx_r1.noteCount === 0 ? 6 : 7);
1203
1283
  } }
1204
1284
  function AIAgentFormComponentExtended_form_3_Conditional_28_Template(rf, ctx) { if (rf & 1) {
1205
- i0.ɵɵelementStart(0, "kendo-panelbar-item", 27);
1206
- i0.ɵɵtemplate(1, AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_1_Template, 2, 1, "ng-template", 28)(2, AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Template, 8, 2, "ng-template", 29);
1285
+ i0.ɵɵelementStart(0, "kendo-panelbar-item", 28);
1286
+ i0.ɵɵtemplate(1, AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_1_Template, 2, 1, "ng-template", 29)(2, AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Template, 8, 2, "ng-template", 30);
1207
1287
  i0.ɵɵelementEnd();
1208
1288
  } if (rf & 2) {
1209
- i0.ɵɵproperty("expanded", false);
1289
+ const ctx_r1 = i0.ɵɵnextContext(2);
1290
+ i0.ɵɵproperty("expanded", false)("disabled", ctx_r1.loadingStates.notes);
1210
1291
  } }
1211
1292
  function AIAgentFormComponentExtended_form_3_ng_template_30_Template(rf, ctx) { if (rf & 1) {
1212
- i0.ɵɵelement(0, "i", 138);
1293
+ i0.ɵɵelement(0, "i", 143);
1213
1294
  i0.ɵɵtext(1, " Payload Management ");
1214
1295
  } }
1215
1296
  function AIAgentFormComponentExtended_form_3_ng_template_31_Template(rf, ctx) { if (rf & 1) {
1216
1297
  const _r38 = i0.ɵɵgetCurrentView();
1217
- i0.ɵɵelementStart(0, "div", 84)(1, "div", 85)(2, "div", 108);
1298
+ i0.ɵɵelementStart(0, "div", 87)(1, "div", 90)(2, "div", 113);
1218
1299
  i0.ɵɵtext(3, " Configure how this agent handles data payloads, path routing, and validation between parent and child agents. ");
1219
1300
  i0.ɵɵelementEnd()();
1220
- i0.ɵɵelementStart(4, "div", 139)(5, "h3", 140);
1221
- i0.ɵɵelement(6, "i", 141);
1301
+ i0.ɵɵelementStart(4, "div", 144)(5, "h3", 145);
1302
+ i0.ɵɵelement(6, "i", 146);
1222
1303
  i0.ɵɵtext(7, " Payload Scope ");
1223
1304
  i0.ɵɵelementEnd();
1224
- i0.ɵɵelementStart(8, "div", 142)(9, "div", 143)(10, "label", 144);
1305
+ i0.ɵɵelementStart(8, "div", 147)(9, "div", 148)(10, "label", 149);
1225
1306
  i0.ɵɵtext(11, "Payload Scope Path");
1226
1307
  i0.ɵɵelementEnd();
1227
- i0.ɵɵelementStart(12, "p", 145);
1308
+ i0.ɵɵelementStart(12, "p", 150);
1228
1309
  i0.ɵɵtext(13, " Specify a path within the parent payload that this sub-agent should operate on. Leave empty to receive the entire payload. ");
1229
1310
  i0.ɵɵelementEnd()();
1230
- i0.ɵɵelementStart(14, "div", 146);
1231
- i0.ɵɵelement(15, "mj-form-field", 147);
1232
- i0.ɵɵelementStart(16, "div", 148);
1233
- i0.ɵɵelement(17, "i", 149);
1311
+ i0.ɵɵelementStart(14, "div", 151);
1312
+ i0.ɵɵelement(15, "mj-form-field", 152);
1313
+ i0.ɵɵelementStart(16, "div", 153);
1314
+ i0.ɵɵelement(17, "i", 154);
1234
1315
  i0.ɵɵelementStart(18, "span");
1235
1316
  i0.ɵɵtext(19, "Example: ");
1236
1317
  i0.ɵɵelementStart(20, "code");
@@ -1240,24 +1321,24 @@ function AIAgentFormComponentExtended_form_3_ng_template_31_Template(rf, ctx) {
1240
1321
  i0.ɵɵelementStart(23, "code");
1241
1322
  i0.ɵɵtext(24, "/analysis/results");
1242
1323
  i0.ɵɵelementEnd()()()()()();
1243
- i0.ɵɵelementStart(25, "div", 139)(26, "h3", 140);
1244
- i0.ɵɵelement(27, "i", 150);
1324
+ i0.ɵɵelementStart(25, "div", 144)(26, "h3", 145);
1325
+ i0.ɵɵelement(27, "i", 155);
1245
1326
  i0.ɵɵtext(28, " Path Configuration ");
1246
1327
  i0.ɵɵelementEnd();
1247
- i0.ɵɵelementStart(29, "div", 151)(30, "div", 152)(31, "div", 153)(32, "div", 154);
1248
- i0.ɵɵelement(33, "i", 155);
1328
+ i0.ɵɵelementStart(29, "div", 156)(30, "div", 157)(31, "div", 158)(32, "div", 159);
1329
+ i0.ɵɵelement(33, "i", 160);
1249
1330
  i0.ɵɵelementEnd();
1250
- i0.ɵɵelementStart(34, "div", 156)(35, "h4");
1331
+ i0.ɵɵelementStart(34, "div", 161)(35, "h4");
1251
1332
  i0.ɵɵtext(36, "Downstream Paths");
1252
1333
  i0.ɵɵelementEnd();
1253
1334
  i0.ɵɵelementStart(37, "p");
1254
1335
  i0.ɵɵtext(38, "JSON array of paths to pass to sub-agents");
1255
1336
  i0.ɵɵelementEnd()()();
1256
- i0.ɵɵelementStart(39, "div", 157)(40, "div", 158)(41, "mj-code-editor", 159);
1337
+ i0.ɵɵelementStart(39, "div", 162)(40, "div", 163)(41, "mj-code-editor", 164);
1257
1338
  i0.ɵɵlistener("valueChange", function AIAgentFormComponentExtended_form_3_ng_template_31_Template_mj_code_editor_valueChange_41_listener($event) { i0.ɵɵrestoreView(_r38); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.updatePayloadField("PayloadDownstreamPaths", $event)); });
1258
1339
  i0.ɵɵelementEnd()();
1259
- i0.ɵɵelementStart(42, "div", 160);
1260
- i0.ɵɵelement(43, "i", 161);
1340
+ i0.ɵɵelementStart(42, "div", 165);
1341
+ i0.ɵɵelement(43, "i", 166);
1261
1342
  i0.ɵɵtext(44, " Use ");
1262
1343
  i0.ɵɵelementStart(45, "code");
1263
1344
  i0.ɵɵtext(46, "[\"*\"]");
@@ -1266,86 +1347,86 @@ function AIAgentFormComponentExtended_form_3_ng_template_31_Template(rf, ctx) {
1266
1347
  i0.ɵɵelementStart(48, "code");
1267
1348
  i0.ɵɵtext(49, "[\"user.id\", \"order.*\"]");
1268
1349
  i0.ɵɵelementEnd()()()();
1269
- i0.ɵɵelementStart(50, "div", 152)(51, "div", 153)(52, "div", 162);
1270
- i0.ɵɵelement(53, "i", 163);
1350
+ i0.ɵɵelementStart(50, "div", 157)(51, "div", 158)(52, "div", 167);
1351
+ i0.ɵɵelement(53, "i", 168);
1271
1352
  i0.ɵɵelementEnd();
1272
- i0.ɵɵelementStart(54, "div", 156)(55, "h4");
1353
+ i0.ɵɵelementStart(54, "div", 161)(55, "h4");
1273
1354
  i0.ɵɵtext(56, "Upstream Paths");
1274
1355
  i0.ɵɵelementEnd();
1275
1356
  i0.ɵɵelementStart(57, "p");
1276
1357
  i0.ɵɵtext(58, "JSON array of paths sub-agents can write back");
1277
1358
  i0.ɵɵelementEnd()()();
1278
- i0.ɵɵelementStart(59, "div", 157)(60, "div", 158)(61, "mj-code-editor", 159);
1359
+ i0.ɵɵelementStart(59, "div", 162)(60, "div", 163)(61, "mj-code-editor", 164);
1279
1360
  i0.ɵɵlistener("valueChange", function AIAgentFormComponentExtended_form_3_ng_template_31_Template_mj_code_editor_valueChange_61_listener($event) { i0.ɵɵrestoreView(_r38); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.updatePayloadField("PayloadUpstreamPaths", $event)); });
1280
1361
  i0.ɵɵelementEnd()();
1281
- i0.ɵɵelementStart(62, "div", 160);
1282
- i0.ɵɵelement(63, "i", 161);
1362
+ i0.ɵɵelementStart(62, "div", 165);
1363
+ i0.ɵɵelement(63, "i", 166);
1283
1364
  i0.ɵɵtext(64, " Use ");
1284
1365
  i0.ɵɵelementStart(65, "code");
1285
1366
  i0.ɵɵtext(66, "[\"*\"]");
1286
1367
  i0.ɵɵelementEnd();
1287
1368
  i0.ɵɵtext(67, " to allow all writes or limit to specific paths ");
1288
1369
  i0.ɵɵelementEnd()()();
1289
- i0.ɵɵelementStart(68, "div", 152)(69, "div", 153)(70, "div", 164);
1290
- i0.ɵɵelement(71, "i", 165);
1370
+ i0.ɵɵelementStart(68, "div", 157)(69, "div", 158)(70, "div", 169);
1371
+ i0.ɵɵelement(71, "i", 170);
1291
1372
  i0.ɵɵelementEnd();
1292
- i0.ɵɵelementStart(72, "div", 156)(73, "h4");
1373
+ i0.ɵɵelementStart(72, "div", 161)(73, "h4");
1293
1374
  i0.ɵɵtext(74, "Self Read Paths");
1294
1375
  i0.ɵɵelementEnd();
1295
1376
  i0.ɵɵelementStart(75, "p");
1296
1377
  i0.ɵɵtext(76, "JSON array of paths this agent can read");
1297
1378
  i0.ɵɵelementEnd()()();
1298
- i0.ɵɵelementStart(77, "div", 157)(78, "div", 158)(79, "mj-code-editor", 159);
1379
+ i0.ɵɵelementStart(77, "div", 162)(78, "div", 163)(79, "mj-code-editor", 164);
1299
1380
  i0.ɵɵlistener("valueChange", function AIAgentFormComponentExtended_form_3_ng_template_31_Template_mj_code_editor_valueChange_79_listener($event) { i0.ɵɵrestoreView(_r38); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.updatePayloadField("PayloadSelfReadPaths", $event)); });
1300
1381
  i0.ɵɵelementEnd()();
1301
- i0.ɵɵelementStart(80, "div", 160);
1302
- i0.ɵɵelement(81, "i", 161);
1382
+ i0.ɵɵelementStart(80, "div", 165);
1383
+ i0.ɵɵelement(81, "i", 166);
1303
1384
  i0.ɵɵtext(82, " Paths this agent's prompts can read from the payload ");
1304
1385
  i0.ɵɵelementEnd()()();
1305
- i0.ɵɵelementStart(83, "div", 152)(84, "div", 153)(85, "div", 166);
1306
- i0.ɵɵelement(86, "i", 167);
1386
+ i0.ɵɵelementStart(83, "div", 157)(84, "div", 158)(85, "div", 171);
1387
+ i0.ɵɵelement(86, "i", 172);
1307
1388
  i0.ɵɵelementEnd();
1308
- i0.ɵɵelementStart(87, "div", 156)(88, "h4");
1389
+ i0.ɵɵelementStart(87, "div", 161)(88, "h4");
1309
1390
  i0.ɵɵtext(89, "Self Write Paths");
1310
1391
  i0.ɵɵelementEnd();
1311
1392
  i0.ɵɵelementStart(90, "p");
1312
1393
  i0.ɵɵtext(91, "JSON array of paths this agent can write to");
1313
1394
  i0.ɵɵelementEnd()()();
1314
- i0.ɵɵelementStart(92, "div", 157)(93, "div", 158)(94, "mj-code-editor", 159);
1395
+ i0.ɵɵelementStart(92, "div", 162)(93, "div", 163)(94, "mj-code-editor", 164);
1315
1396
  i0.ɵɵlistener("valueChange", function AIAgentFormComponentExtended_form_3_ng_template_31_Template_mj_code_editor_valueChange_94_listener($event) { i0.ɵɵrestoreView(_r38); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.updatePayloadField("PayloadSelfWritePaths", $event)); });
1316
1397
  i0.ɵɵelementEnd()();
1317
- i0.ɵɵelementStart(95, "div", 160);
1318
- i0.ɵɵelement(96, "i", 161);
1398
+ i0.ɵɵelementStart(95, "div", 165);
1399
+ i0.ɵɵelement(96, "i", 166);
1319
1400
  i0.ɵɵtext(97, " Paths this agent's prompts can write back to the payload ");
1320
1401
  i0.ɵɵelementEnd()()()()();
1321
- i0.ɵɵelementStart(98, "div", 139)(99, "h3", 140);
1322
- i0.ɵɵelement(100, "i", 168);
1402
+ i0.ɵɵelementStart(98, "div", 144)(99, "h3", 145);
1403
+ i0.ɵɵelement(100, "i", 173);
1323
1404
  i0.ɵɵtext(101, " Final Payload Validation ");
1324
1405
  i0.ɵɵelementEnd();
1325
- i0.ɵɵelementStart(102, "div", 169)(103, "div", 170)(104, "div", 171)(105, "label", 172);
1406
+ i0.ɵɵelementStart(102, "div", 174)(103, "div", 175)(104, "div", 176)(105, "label", 177);
1326
1407
  i0.ɵɵtext(106, "Validation Mode");
1327
1408
  i0.ɵɵelementEnd();
1328
- i0.ɵɵelementStart(107, "p", 173);
1409
+ i0.ɵɵelementStart(107, "p", 178);
1329
1410
  i0.ɵɵtext(108, "How to handle validation failures");
1330
1411
  i0.ɵɵelementEnd();
1331
- i0.ɵɵelement(109, "mj-form-field", 174);
1412
+ i0.ɵɵelement(109, "mj-form-field", 179);
1332
1413
  i0.ɵɵelementEnd();
1333
- i0.ɵɵelementStart(110, "div", 171)(111, "label", 172);
1414
+ i0.ɵɵelementStart(110, "div", 176)(111, "label", 177);
1334
1415
  i0.ɵɵtext(112, "Max Retries");
1335
1416
  i0.ɵɵelementEnd();
1336
- i0.ɵɵelementStart(113, "p", 173);
1417
+ i0.ɵɵelementStart(113, "p", 178);
1337
1418
  i0.ɵɵtext(114, "Maximum validation retry attempts");
1338
1419
  i0.ɵɵelementEnd();
1339
- i0.ɵɵelement(115, "mj-form-field", 175);
1420
+ i0.ɵɵelement(115, "mj-form-field", 180);
1340
1421
  i0.ɵɵelementEnd()();
1341
- i0.ɵɵelementStart(116, "div", 176)(117, "label", 177);
1342
- i0.ɵɵelement(118, "i", 178);
1422
+ i0.ɵɵelementStart(116, "div", 181)(117, "label", 182);
1423
+ i0.ɵɵelement(118, "i", 183);
1343
1424
  i0.ɵɵtext(119, " Validation Schema ");
1344
1425
  i0.ɵɵelementEnd();
1345
- i0.ɵɵelementStart(120, "p", 179);
1426
+ i0.ɵɵelementStart(120, "p", 184);
1346
1427
  i0.ɵɵtext(121, " JSON schema or validation rules for the final payload structure ");
1347
1428
  i0.ɵɵelementEnd();
1348
- i0.ɵɵelementStart(122, "div", 180)(123, "mj-code-editor", 181);
1429
+ i0.ɵɵelementStart(122, "div", 185)(123, "mj-code-editor", 186);
1349
1430
  i0.ɵɵlistener("valueChange", function AIAgentFormComponentExtended_form_3_ng_template_31_Template_mj_code_editor_valueChange_123_listener($event) { i0.ɵɵrestoreView(_r38); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.updatePayloadField("FinalPayloadValidation", $event)); });
1350
1431
  i0.ɵɵelementEnd()()()()()();
1351
1432
  } if (rf & 2) {
@@ -1368,15 +1449,15 @@ function AIAgentFormComponentExtended_form_3_ng_template_31_Template(rf, ctx) {
1368
1449
  i0.ɵɵproperty("value", ctx_r1.record.FinalPayloadValidation || "{}")("readonly", !ctx_r1.EditMode)("lineWrapping", true);
1369
1450
  } }
1370
1451
  function AIAgentFormComponentExtended_form_3_ng_template_33_Template(rf, ctx) { if (rf & 1) {
1371
- i0.ɵɵelement(0, "i", 182);
1452
+ i0.ɵɵelement(0, "i", 187);
1372
1453
  i0.ɵɵtext(1, " Execution Guardrails ");
1373
1454
  } }
1374
1455
  function AIAgentFormComponentExtended_form_3_ng_template_34_Template(rf, ctx) { if (rf & 1) {
1375
- i0.ɵɵelementStart(0, "div", 84)(1, "div", 85)(2, "div", 108);
1456
+ i0.ɵɵelementStart(0, "div", 87)(1, "div", 90)(2, "div", 113);
1376
1457
  i0.ɵɵtext(3, " Set limits to prevent runaway agent executions and control resource usage. ");
1377
1458
  i0.ɵɵelementEnd()();
1378
- i0.ɵɵelementStart(4, "div", 183);
1379
- i0.ɵɵelement(5, "mj-form-field", 184)(6, "mj-form-field", 185)(7, "mj-form-field", 186)(8, "mj-form-field", 187);
1459
+ i0.ɵɵelementStart(4, "div", 188);
1460
+ i0.ɵɵelement(5, "mj-form-field", 189)(6, "mj-form-field", 190)(7, "mj-form-field", 191)(8, "mj-form-field", 192);
1380
1461
  i0.ɵɵelementEnd()();
1381
1462
  } if (rf & 2) {
1382
1463
  const ctx_r1 = i0.ɵɵnextContext(2);
@@ -1390,12 +1471,12 @@ function AIAgentFormComponentExtended_form_3_ng_template_34_Template(rf, ctx) {
1390
1471
  i0.ɵɵproperty("EditMode", ctx_r1.EditMode)("record", ctx_r1.record);
1391
1472
  } }
1392
1473
  function AIAgentFormComponentExtended_form_3_ng_template_36_Template(rf, ctx) { if (rf & 1) {
1393
- i0.ɵɵelement(0, "i", 188);
1474
+ i0.ɵɵelement(0, "i", 193);
1394
1475
  i0.ɵɵtext(1, " Configuration ");
1395
1476
  } }
1396
1477
  function AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_19_Template(rf, ctx) { if (rf & 1) {
1397
1478
  const _r40 = i0.ɵɵgetCurrentView();
1398
- i0.ɵɵelementStart(0, "kendo-dropdownlist", 221);
1479
+ i0.ɵɵelementStart(0, "kendo-dropdownlist", 226);
1399
1480
  i0.ɵɵtwoWayListener("ngModelChange", function AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_19_Template_kendo_dropdownlist_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r40); const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r1.record.Status, $event) || (ctx_r1.record.Status = $event); return i0.ɵɵresetView($event); });
1400
1481
  i0.ɵɵelementEnd();
1401
1482
  } if (rf & 2) {
@@ -1404,7 +1485,7 @@ function AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_19_Templ
1404
1485
  i0.ɵɵproperty("data", ctx_r1.statusOptions)("valuePrimitive", true);
1405
1486
  } }
1406
1487
  function AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_20_Template(rf, ctx) { if (rf & 1) {
1407
- i0.ɵɵelementStart(0, "span", 200);
1488
+ i0.ɵɵelementStart(0, "span", 205);
1408
1489
  i0.ɵɵtext(1);
1409
1490
  i0.ɵɵelementEnd();
1410
1491
  } if (rf & 2) {
@@ -1414,7 +1495,7 @@ function AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_20_Templ
1414
1495
  } }
1415
1496
  function AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_31_Template(rf, ctx) { if (rf & 1) {
1416
1497
  const _r41 = i0.ɵɵgetCurrentView();
1417
- i0.ɵɵelementStart(0, "kendo-dropdownlist", 222);
1498
+ i0.ɵɵelementStart(0, "kendo-dropdownlist", 227);
1418
1499
  i0.ɵɵtwoWayListener("ngModelChange", function AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_31_Template_kendo_dropdownlist_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r41); const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r1.record.TypeID, $event) || (ctx_r1.record.TypeID = $event); return i0.ɵɵresetView($event); });
1419
1500
  i0.ɵɵelementEnd();
1420
1501
  } if (rf & 2) {
@@ -1423,7 +1504,7 @@ function AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_31_Templ
1423
1504
  i0.ɵɵproperty("data", ctx_r1.agentTypes)("valuePrimitive", true);
1424
1505
  } }
1425
1506
  function AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_32_Template(rf, ctx) { if (rf & 1) {
1426
- i0.ɵɵelementStart(0, "span", 200);
1507
+ i0.ɵɵelementStart(0, "span", 205);
1427
1508
  i0.ɵɵtext(1);
1428
1509
  i0.ɵɵelementEnd();
1429
1510
  } if (rf & 2) {
@@ -1432,7 +1513,7 @@ function AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_32_Templ
1432
1513
  i0.ɵɵtextInterpolate(ctx_r1.record.Type || "Not Set");
1433
1514
  } }
1434
1515
  function AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_158_Conditional_32_Conditional_2_Template(rf, ctx) { if (rf & 1) {
1435
- i0.ɵɵelementStart(0, "span", 229);
1516
+ i0.ɵɵelementStart(0, "span", 234);
1436
1517
  i0.ɵɵtext(1);
1437
1518
  i0.ɵɵelementEnd();
1438
1519
  } if (rf & 2) {
@@ -1441,28 +1522,28 @@ function AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_158_Cond
1441
1522
  i0.ɵɵtextInterpolate(ctx_r1.selectedContextCompressionPrompt.Name);
1442
1523
  } }
1443
1524
  function AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_158_Conditional_32_Conditional_3_Template(rf, ctx) { if (rf & 1) {
1444
- i0.ɵɵelementStart(0, "span", 230);
1525
+ i0.ɵɵelementStart(0, "span", 235);
1445
1526
  i0.ɵɵtext(1, "No prompt selected");
1446
1527
  i0.ɵɵelementEnd();
1447
1528
  } }
1448
1529
  function AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_158_Conditional_32_Conditional_8_Template(rf, ctx) { if (rf & 1) {
1449
1530
  const _r43 = i0.ɵɵgetCurrentView();
1450
- i0.ɵɵelementStart(0, "button", 235);
1531
+ i0.ɵɵelementStart(0, "button", 240);
1451
1532
  i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_158_Conditional_32_Conditional_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r43); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.clearContextCompressionPrompt()); });
1452
- i0.ɵɵelement(1, "i", 236);
1533
+ i0.ɵɵelement(1, "i", 241);
1453
1534
  i0.ɵɵelementEnd();
1454
1535
  } }
1455
1536
  function AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_158_Conditional_32_Template(rf, ctx) { if (rf & 1) {
1456
1537
  const _r42 = i0.ɵɵgetCurrentView();
1457
- i0.ɵɵelementStart(0, "div", 227)(1, "div", 228);
1458
- i0.ɵɵtemplate(2, AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_158_Conditional_32_Conditional_2_Template, 2, 1, "span", 229)(3, AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_158_Conditional_32_Conditional_3_Template, 2, 0, "span", 230);
1538
+ i0.ɵɵelementStart(0, "div", 232)(1, "div", 233);
1539
+ i0.ɵɵtemplate(2, AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_158_Conditional_32_Conditional_2_Template, 2, 1, "span", 234)(3, AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_158_Conditional_32_Conditional_3_Template, 2, 0, "span", 235);
1459
1540
  i0.ɵɵelementEnd();
1460
- i0.ɵɵelementStart(4, "div", 231)(5, "button", 232);
1541
+ i0.ɵɵelementStart(4, "div", 236)(5, "button", 237);
1461
1542
  i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_158_Conditional_32_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r42); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.openContextCompressionPromptSelector()); });
1462
- i0.ɵɵelement(6, "i", 233);
1543
+ i0.ɵɵelement(6, "i", 238);
1463
1544
  i0.ɵɵtext(7);
1464
1545
  i0.ɵɵelementEnd();
1465
- i0.ɵɵtemplate(8, AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_158_Conditional_32_Conditional_8_Template, 2, 0, "button", 234);
1546
+ i0.ɵɵtemplate(8, AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_158_Conditional_32_Conditional_8_Template, 2, 0, "button", 239);
1466
1547
  i0.ɵɵelementEnd()();
1467
1548
  } if (rf & 2) {
1468
1549
  const ctx_r1 = i0.ɵɵnextContext(4);
@@ -1474,7 +1555,7 @@ function AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_158_Cond
1474
1555
  i0.ɵɵconditional(ctx_r1.selectedContextCompressionPrompt ? 8 : -1);
1475
1556
  } }
1476
1557
  function AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_158_Conditional_33_Template(rf, ctx) { if (rf & 1) {
1477
- i0.ɵɵelementStart(0, "span", 200);
1558
+ i0.ɵɵelementStart(0, "span", 205);
1478
1559
  i0.ɵɵtext(1);
1479
1560
  i0.ɵɵelementEnd();
1480
1561
  } if (rf & 2) {
@@ -1483,41 +1564,41 @@ function AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_158_Cond
1483
1564
  i0.ɵɵtextInterpolate((ctx_r1.selectedContextCompressionPrompt == null ? null : ctx_r1.selectedContextCompressionPrompt.Name) || ctx_r1.record.ContextCompressionPrompt || "Not Set");
1484
1565
  } }
1485
1566
  function AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_158_Template(rf, ctx) { if (rf & 1) {
1486
- i0.ɵɵelementStart(0, "div", 193)(1, "div", 194)(2, "div", 195);
1487
- i0.ɵɵelement(3, "i", 223);
1567
+ i0.ɵɵelementStart(0, "div", 198)(1, "div", 199)(2, "div", 200);
1568
+ i0.ɵɵelement(3, "i", 228);
1488
1569
  i0.ɵɵelementEnd();
1489
- i0.ɵɵelementStart(4, "div", 197)(5, "h4");
1570
+ i0.ɵɵelementStart(4, "div", 202)(5, "h4");
1490
1571
  i0.ɵɵtext(6, "Message Threshold");
1491
1572
  i0.ɵɵelementEnd();
1492
1573
  i0.ɵɵelementStart(7, "p");
1493
1574
  i0.ɵɵtext(8, "Messages before compression triggers");
1494
1575
  i0.ɵɵelementEnd()()();
1495
- i0.ɵɵelementStart(9, "div", 198);
1496
- i0.ɵɵelement(10, "mj-form-field", 224);
1576
+ i0.ɵɵelementStart(9, "div", 203);
1577
+ i0.ɵɵelement(10, "mj-form-field", 229);
1497
1578
  i0.ɵɵelementEnd()();
1498
- i0.ɵɵelementStart(11, "div", 193)(12, "div", 194)(13, "div", 195);
1499
- i0.ɵɵelement(14, "i", 225);
1579
+ i0.ɵɵelementStart(11, "div", 198)(12, "div", 199)(13, "div", 200);
1580
+ i0.ɵɵelement(14, "i", 230);
1500
1581
  i0.ɵɵelementEnd();
1501
- i0.ɵɵelementStart(15, "div", 197)(16, "h4");
1582
+ i0.ɵɵelementStart(15, "div", 202)(16, "h4");
1502
1583
  i0.ɵɵtext(17, "Messages to Keep");
1503
1584
  i0.ɵɵelementEnd();
1504
1585
  i0.ɵɵelementStart(18, "p");
1505
1586
  i0.ɵɵtext(19, "Recent messages to retain uncompressed");
1506
1587
  i0.ɵɵelementEnd()()();
1507
- i0.ɵɵelementStart(20, "div", 198);
1508
- i0.ɵɵelement(21, "mj-form-field", 226);
1588
+ i0.ɵɵelementStart(20, "div", 203);
1589
+ i0.ɵɵelement(21, "mj-form-field", 231);
1509
1590
  i0.ɵɵelementEnd()();
1510
- i0.ɵɵelementStart(22, "div", 193)(23, "div", 194)(24, "div", 195);
1511
- i0.ɵɵelement(25, "i", 128);
1591
+ i0.ɵɵelementStart(22, "div", 198)(23, "div", 199)(24, "div", 200);
1592
+ i0.ɵɵelement(25, "i", 133);
1512
1593
  i0.ɵɵelementEnd();
1513
- i0.ɵɵelementStart(26, "div", 197)(27, "h4");
1594
+ i0.ɵɵelementStart(26, "div", 202)(27, "h4");
1514
1595
  i0.ɵɵtext(28, "Compression Prompt");
1515
1596
  i0.ɵɵelementEnd();
1516
1597
  i0.ɵɵelementStart(29, "p");
1517
1598
  i0.ɵɵtext(30, "Prompt used for summarization");
1518
1599
  i0.ɵɵelementEnd()()();
1519
- i0.ɵɵelementStart(31, "div", 198);
1520
- i0.ɵɵtemplate(32, AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_158_Conditional_32_Template, 9, 3, "div", 227)(33, AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_158_Conditional_33_Template, 2, 1, "span", 200);
1600
+ i0.ɵɵelementStart(31, "div", 203);
1601
+ i0.ɵɵtemplate(32, AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_158_Conditional_32_Template, 9, 3, "div", 232)(33, AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_158_Conditional_33_Template, 2, 1, "span", 205);
1521
1602
  i0.ɵɵelementEnd()();
1522
1603
  } if (rf & 2) {
1523
1604
  const ctx_r1 = i0.ɵɵnextContext(3);
@@ -1530,166 +1611,166 @@ function AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_158_Temp
1530
1611
  } }
1531
1612
  function AIAgentFormComponentExtended_form_3_ng_template_37_Template(rf, ctx) { if (rf & 1) {
1532
1613
  const _r39 = i0.ɵɵgetCurrentView();
1533
- i0.ɵɵelementStart(0, "div", 84)(1, "div", 85)(2, "div", 108);
1614
+ i0.ɵɵelementStart(0, "div", 87)(1, "div", 90)(2, "div", 113);
1534
1615
  i0.ɵɵtext(3, " Configure agent behavior, execution settings, and advanced features. ");
1535
1616
  i0.ɵɵelementEnd()();
1536
- i0.ɵɵelementStart(4, "div", 189)(5, "h3", 190);
1537
- i0.ɵɵelement(6, "i", 191);
1617
+ i0.ɵɵelementStart(4, "div", 194)(5, "h3", 195);
1618
+ i0.ɵɵelement(6, "i", 196);
1538
1619
  i0.ɵɵtext(7, " Identity & Behavior ");
1539
1620
  i0.ɵɵelementEnd();
1540
- i0.ɵɵelementStart(8, "div", 192)(9, "div", 193)(10, "div", 194)(11, "div", 195);
1541
- i0.ɵɵelement(12, "i", 196);
1621
+ i0.ɵɵelementStart(8, "div", 197)(9, "div", 198)(10, "div", 199)(11, "div", 200);
1622
+ i0.ɵɵelement(12, "i", 201);
1542
1623
  i0.ɵɵelementEnd();
1543
- i0.ɵɵelementStart(13, "div", 197)(14, "h4");
1624
+ i0.ɵɵelementStart(13, "div", 202)(14, "h4");
1544
1625
  i0.ɵɵtext(15, "Agent Status");
1545
1626
  i0.ɵɵelementEnd();
1546
1627
  i0.ɵɵelementStart(16, "p");
1547
1628
  i0.ɵɵtext(17, "Current availability and operational status");
1548
1629
  i0.ɵɵelementEnd()()();
1549
- i0.ɵɵelementStart(18, "div", 198);
1550
- i0.ɵɵtemplate(19, AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_19_Template, 1, 3, "kendo-dropdownlist", 199)(20, AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_20_Template, 2, 1, "span", 200);
1630
+ i0.ɵɵelementStart(18, "div", 203);
1631
+ i0.ɵɵtemplate(19, AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_19_Template, 1, 3, "kendo-dropdownlist", 204)(20, AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_20_Template, 2, 1, "span", 205);
1551
1632
  i0.ɵɵelementEnd()();
1552
- i0.ɵɵelementStart(21, "div", 193)(22, "div", 194)(23, "div", 195);
1553
- i0.ɵɵelement(24, "i", 33);
1633
+ i0.ɵɵelementStart(21, "div", 198)(22, "div", 199)(23, "div", 200);
1634
+ i0.ɵɵelement(24, "i", 34);
1554
1635
  i0.ɵɵelementEnd();
1555
- i0.ɵɵelementStart(25, "div", 197)(26, "h4");
1636
+ i0.ɵɵelementStart(25, "div", 202)(26, "h4");
1556
1637
  i0.ɵɵtext(27, "Agent Type");
1557
1638
  i0.ɵɵelementEnd();
1558
1639
  i0.ɵɵelementStart(28, "p");
1559
1640
  i0.ɵɵtext(29, "Category and system-level behavior");
1560
1641
  i0.ɵɵelementEnd()()();
1561
- i0.ɵɵelementStart(30, "div", 198);
1562
- i0.ɵɵtemplate(31, AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_31_Template, 1, 3, "kendo-dropdownlist", 201)(32, AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_32_Template, 2, 1, "span", 200);
1642
+ i0.ɵɵelementStart(30, "div", 203);
1643
+ i0.ɵɵtemplate(31, AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_31_Template, 1, 3, "kendo-dropdownlist", 206)(32, AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_32_Template, 2, 1, "span", 205);
1563
1644
  i0.ɵɵelementEnd()();
1564
- i0.ɵɵelementStart(33, "div", 193)(34, "div", 194)(35, "div", 195);
1565
- i0.ɵɵelement(36, "i", 83);
1645
+ i0.ɵɵelementStart(33, "div", 198)(34, "div", 199)(35, "div", 200);
1646
+ i0.ɵɵelement(36, "i", 86);
1566
1647
  i0.ɵɵelementEnd();
1567
- i0.ɵɵelementStart(37, "div", 197)(38, "h4");
1648
+ i0.ɵɵelementStart(37, "div", 202)(38, "h4");
1568
1649
  i0.ɵɵtext(39, "Expose as Action");
1569
1650
  i0.ɵɵelementEnd();
1570
1651
  i0.ɵɵelementStart(40, "p");
1571
1652
  i0.ɵɵtext(41, "Make available as an action for other agents");
1572
1653
  i0.ɵɵelementEnd()()();
1573
- i0.ɵɵelementStart(42, "div", 198);
1574
- i0.ɵɵelement(43, "mj-form-field", 202);
1654
+ i0.ɵɵelementStart(42, "div", 203);
1655
+ i0.ɵɵelement(43, "mj-form-field", 207);
1575
1656
  i0.ɵɵelementEnd()();
1576
- i0.ɵɵelementStart(44, "div", 203)(45, "div", 194)(46, "div", 195);
1577
- i0.ɵɵelement(47, "i", 204);
1657
+ i0.ɵɵelementStart(44, "div", 208)(45, "div", 199)(46, "div", 200);
1658
+ i0.ɵɵelement(47, "i", 209);
1578
1659
  i0.ɵɵelementEnd();
1579
- i0.ɵɵelementStart(48, "div", 197)(49, "h4");
1660
+ i0.ɵɵelementStart(48, "div", 202)(49, "h4");
1580
1661
  i0.ɵɵtext(50, "Description");
1581
1662
  i0.ɵɵelementEnd();
1582
1663
  i0.ɵɵelementStart(51, "p");
1583
1664
  i0.ɵɵtext(52, "Detailed agent description and purpose");
1584
1665
  i0.ɵɵelementEnd()()();
1585
- i0.ɵɵelementStart(53, "div", 198);
1586
- i0.ɵɵelement(54, "mj-form-field", 205);
1666
+ i0.ɵɵelementStart(53, "div", 203);
1667
+ i0.ɵɵelement(54, "mj-form-field", 210);
1587
1668
  i0.ɵɵelementEnd()()()();
1588
- i0.ɵɵelementStart(55, "div", 189)(56, "h3", 190);
1589
- i0.ɵɵelement(57, "i", 35);
1669
+ i0.ɵɵelementStart(55, "div", 194)(56, "h3", 195);
1670
+ i0.ɵɵelement(57, "i", 36);
1590
1671
  i0.ɵɵtext(58, " Execution Settings ");
1591
1672
  i0.ɵɵelementEnd();
1592
- i0.ɵɵelementStart(59, "div", 192)(60, "div", 193)(61, "div", 194)(62, "div", 195);
1593
- i0.ɵɵelement(63, "i", 206);
1673
+ i0.ɵɵelementStart(59, "div", 197)(60, "div", 198)(61, "div", 199)(62, "div", 200);
1674
+ i0.ɵɵelement(63, "i", 211);
1594
1675
  i0.ɵɵelementEnd();
1595
- i0.ɵɵelementStart(64, "div", 197)(65, "h4");
1676
+ i0.ɵɵelementStart(64, "div", 202)(65, "h4");
1596
1677
  i0.ɵɵtext(66, "Execution Mode");
1597
1678
  i0.ɵɵelementEnd();
1598
1679
  i0.ɵɵelementStart(67, "p");
1599
1680
  i0.ɵɵtext(68, "How sub-agents are executed");
1600
1681
  i0.ɵɵelementEnd()()();
1601
- i0.ɵɵelementStart(69, "div", 198);
1602
- i0.ɵɵelement(70, "mj-form-field", 207);
1682
+ i0.ɵɵelementStart(69, "div", 203);
1683
+ i0.ɵɵelement(70, "mj-form-field", 212);
1603
1684
  i0.ɵɵelementEnd()();
1604
- i0.ɵɵelementStart(71, "div", 193)(72, "div", 194)(73, "div", 195);
1605
- i0.ɵɵelement(74, "i", 208);
1685
+ i0.ɵɵelementStart(71, "div", 198)(72, "div", 199)(73, "div", 200);
1686
+ i0.ɵɵelement(74, "i", 213);
1606
1687
  i0.ɵɵelementEnd();
1607
- i0.ɵɵelementStart(75, "div", 197)(76, "h4");
1688
+ i0.ɵɵelementStart(75, "div", 202)(76, "h4");
1608
1689
  i0.ɵɵtext(77, "Execution Order");
1609
1690
  i0.ɵɵelementEnd();
1610
1691
  i0.ɵɵelementStart(78, "p");
1611
1692
  i0.ɵɵtext(79, "Order when run with siblings");
1612
1693
  i0.ɵɵelementEnd()()();
1613
- i0.ɵɵelementStart(80, "div", 198);
1614
- i0.ɵɵelement(81, "mj-form-field", 209);
1694
+ i0.ɵɵelementStart(80, "div", 203);
1695
+ i0.ɵɵelement(81, "mj-form-field", 214);
1615
1696
  i0.ɵɵelementEnd()();
1616
- i0.ɵɵelementStart(82, "div", 193)(83, "div", 194)(84, "div", 195);
1617
- i0.ɵɵelement(85, "i", 210);
1697
+ i0.ɵɵelementStart(82, "div", 198)(83, "div", 199)(84, "div", 200);
1698
+ i0.ɵɵelement(85, "i", 215);
1618
1699
  i0.ɵɵelementEnd();
1619
- i0.ɵɵelementStart(86, "div", 197)(87, "h4");
1700
+ i0.ɵɵelementStart(86, "div", 202)(87, "h4");
1620
1701
  i0.ɵɵtext(88, "Default Effort Level");
1621
1702
  i0.ɵɵelementEnd();
1622
1703
  i0.ɵɵelementStart(89, "p");
1623
1704
  i0.ɵɵtext(90, "Default effort level for all prompts (1-100)");
1624
1705
  i0.ɵɵelementEnd()()();
1625
- i0.ɵɵelementStart(91, "div", 198);
1626
- i0.ɵɵelement(92, "mj-form-field", 211);
1627
- i0.ɵɵelementStart(93, "div", 212);
1628
- i0.ɵɵelement(94, "i", 161);
1706
+ i0.ɵɵelementStart(91, "div", 203);
1707
+ i0.ɵɵelement(92, "mj-form-field", 216);
1708
+ i0.ɵɵelementStart(93, "div", 217);
1709
+ i0.ɵɵelement(94, "i", 166);
1629
1710
  i0.ɵɵtext(95, " Higher values request more thorough reasoning (1=minimal, 100=maximum) ");
1630
1711
  i0.ɵɵelementEnd()()();
1631
- i0.ɵɵelementStart(96, "div", 193)(97, "div", 194)(98, "div", 195);
1632
- i0.ɵɵelement(99, "i", 178);
1712
+ i0.ɵɵelementStart(96, "div", 198)(97, "div", 199)(98, "div", 200);
1713
+ i0.ɵɵelement(99, "i", 183);
1633
1714
  i0.ɵɵelementEnd();
1634
- i0.ɵɵelementStart(100, "div", 197)(101, "h4");
1715
+ i0.ɵɵelementStart(100, "div", 202)(101, "h4");
1635
1716
  i0.ɵɵtext(102, "Driver Class");
1636
1717
  i0.ɵɵelementEnd();
1637
1718
  i0.ɵɵelementStart(103, "p");
1638
1719
  i0.ɵɵtext(104, "Custom implementation class");
1639
1720
  i0.ɵɵelementEnd()()();
1640
- i0.ɵɵelementStart(105, "div", 198);
1641
- i0.ɵɵelement(106, "mj-form-field", 213);
1721
+ i0.ɵɵelementStart(105, "div", 203);
1722
+ i0.ɵɵelement(106, "mj-form-field", 218);
1642
1723
  i0.ɵɵelementEnd()()()();
1643
- i0.ɵɵelementStart(107, "div", 189)(108, "h3", 190);
1644
- i0.ɵɵelement(109, "i", 214);
1724
+ i0.ɵɵelementStart(107, "div", 194)(108, "h3", 195);
1725
+ i0.ɵɵelement(109, "i", 219);
1645
1726
  i0.ɵɵtext(110, " Visual Identity ");
1646
1727
  i0.ɵɵelementEnd();
1647
- i0.ɵɵelementStart(111, "div", 192)(112, "div", 193)(113, "div", 194)(114, "div", 195);
1648
- i0.ɵɵelement(115, "i", 215);
1728
+ i0.ɵɵelementStart(111, "div", 197)(112, "div", 198)(113, "div", 199)(114, "div", 200);
1729
+ i0.ɵɵelement(115, "i", 220);
1649
1730
  i0.ɵɵelementEnd();
1650
- i0.ɵɵelementStart(116, "div", 197)(117, "h4");
1731
+ i0.ɵɵelementStart(116, "div", 202)(117, "h4");
1651
1732
  i0.ɵɵtext(118, "Icon Class");
1652
1733
  i0.ɵɵelementEnd();
1653
1734
  i0.ɵɵelementStart(119, "p");
1654
1735
  i0.ɵɵtext(120, "Font Awesome icon class");
1655
1736
  i0.ɵɵelementEnd()()();
1656
- i0.ɵɵelementStart(121, "div", 198);
1657
- i0.ɵɵelement(122, "mj-form-field", 216);
1658
- i0.ɵɵelementStart(123, "div", 212);
1659
- i0.ɵɵelement(124, "i", 161);
1737
+ i0.ɵɵelementStart(121, "div", 203);
1738
+ i0.ɵɵelement(122, "mj-form-field", 221);
1739
+ i0.ɵɵelementStart(123, "div", 217);
1740
+ i0.ɵɵelement(124, "i", 166);
1660
1741
  i0.ɵɵtext(125, " Example: ");
1661
1742
  i0.ɵɵelementStart(126, "code");
1662
1743
  i0.ɵɵtext(127, "fa-solid fa-robot");
1663
1744
  i0.ɵɵelementEnd()()()();
1664
- i0.ɵɵelementStart(128, "div", 193)(129, "div", 194)(130, "div", 195);
1665
- i0.ɵɵelement(131, "i", 217);
1745
+ i0.ɵɵelementStart(128, "div", 198)(129, "div", 199)(130, "div", 200);
1746
+ i0.ɵɵelement(131, "i", 222);
1666
1747
  i0.ɵɵelementEnd();
1667
- i0.ɵɵelementStart(132, "div", 197)(133, "h4");
1748
+ i0.ɵɵelementStart(132, "div", 202)(133, "h4");
1668
1749
  i0.ɵɵtext(134, "Logo URL");
1669
1750
  i0.ɵɵelementEnd();
1670
1751
  i0.ɵɵelementStart(135, "p");
1671
1752
  i0.ɵɵtext(136, "URL for agent logo image");
1672
1753
  i0.ɵɵelementEnd()()();
1673
- i0.ɵɵelementStart(137, "div", 198);
1674
- i0.ɵɵelement(138, "mj-form-field", 218);
1675
- i0.ɵɵelementStart(139, "div", 212);
1676
- i0.ɵɵelement(140, "i", 161);
1754
+ i0.ɵɵelementStart(137, "div", 203);
1755
+ i0.ɵɵelement(138, "mj-form-field", 223);
1756
+ i0.ɵɵelementStart(139, "div", 217);
1757
+ i0.ɵɵelement(140, "i", 166);
1677
1758
  i0.ɵɵtext(141, " Takes precedence over Icon Class ");
1678
1759
  i0.ɵɵelementEnd()()()()();
1679
- i0.ɵɵelementStart(142, "div", 189)(143, "h3", 190);
1680
- i0.ɵɵelement(144, "i", 219);
1760
+ i0.ɵɵelementStart(142, "div", 194)(143, "h3", 195);
1761
+ i0.ɵɵelement(144, "i", 224);
1681
1762
  i0.ɵɵtext(145, " Context Compression ");
1682
1763
  i0.ɵɵelementEnd();
1683
- i0.ɵɵelementStart(146, "div", 192)(147, "div", 203)(148, "div", 194)(149, "div", 195);
1684
- i0.ɵɵelement(150, "i", 196);
1764
+ i0.ɵɵelementStart(146, "div", 197)(147, "div", 208)(148, "div", 199)(149, "div", 200);
1765
+ i0.ɵɵelement(150, "i", 201);
1685
1766
  i0.ɵɵelementEnd();
1686
- i0.ɵɵelementStart(151, "div", 197)(152, "h4");
1767
+ i0.ɵɵelementStart(151, "div", 202)(152, "h4");
1687
1768
  i0.ɵɵtext(153, "Enable Context Compression");
1688
1769
  i0.ɵɵelementEnd();
1689
1770
  i0.ɵɵelementStart(154, "p");
1690
1771
  i0.ɵɵtext(155, "Automatically compress conversation context when message threshold is reached");
1691
1772
  i0.ɵɵelementEnd()()();
1692
- i0.ɵɵelementStart(156, "div", 198)(157, "mj-form-field", 220);
1773
+ i0.ɵɵelementStart(156, "div", 203)(157, "mj-form-field", 225);
1693
1774
  i0.ɵɵlistener("valueChange", function AIAgentFormComponentExtended_form_3_ng_template_37_Template_mj_form_field_valueChange_157_listener($event) { i0.ɵɵrestoreView(_r39); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onContextCompressionToggle($event)); });
1694
1775
  i0.ɵɵelementEnd()()();
1695
1776
  i0.ɵɵtemplate(158, AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_158_Template, 34, 5);
@@ -1740,15 +1821,15 @@ function AIAgentFormComponentExtended_form_3_Template(rf, ctx) { if (rf & 1) {
1740
1821
  i0.ɵɵelement(19, "i", 24);
1741
1822
  i0.ɵɵelementEnd()()()();
1742
1823
  i0.ɵɵelementStart(20, "div", 25)(21, "kendo-panelbar", 26);
1743
- i0.ɵɵtemplate(22, AIAgentFormComponentExtended_form_3_Conditional_22_Template, 3, 1, "kendo-panelbar-item", 27)(23, AIAgentFormComponentExtended_form_3_Conditional_23_Template, 3, 1, "kendo-panelbar-item", 27)(24, AIAgentFormComponentExtended_form_3_Conditional_24_Template, 3, 1, "kendo-panelbar-item", 27)(25, AIAgentFormComponentExtended_form_3_Conditional_25_Template, 3, 1, "kendo-panelbar-item", 27)(26, AIAgentFormComponentExtended_form_3_Conditional_26_Template, 3, 1, "kendo-panelbar-item", 27)(27, AIAgentFormComponentExtended_form_3_Conditional_27_Template, 3, 1, "kendo-panelbar-item", 27)(28, AIAgentFormComponentExtended_form_3_Conditional_28_Template, 3, 1, "kendo-panelbar-item", 27);
1824
+ i0.ɵɵtemplate(22, AIAgentFormComponentExtended_form_3_Conditional_22_Template, 3, 1, "kendo-panelbar-item", 27)(23, AIAgentFormComponentExtended_form_3_Conditional_23_Template, 3, 2, "kendo-panelbar-item", 28)(24, AIAgentFormComponentExtended_form_3_Conditional_24_Template, 3, 2, "kendo-panelbar-item", 28)(25, AIAgentFormComponentExtended_form_3_Conditional_25_Template, 3, 2, "kendo-panelbar-item", 28)(26, AIAgentFormComponentExtended_form_3_Conditional_26_Template, 3, 2, "kendo-panelbar-item", 28)(27, AIAgentFormComponentExtended_form_3_Conditional_27_Template, 3, 2, "kendo-panelbar-item", 28)(28, AIAgentFormComponentExtended_form_3_Conditional_28_Template, 3, 2, "kendo-panelbar-item", 28);
1744
1825
  i0.ɵɵelementStart(29, "kendo-panelbar-item", 27);
1745
- i0.ɵɵtemplate(30, AIAgentFormComponentExtended_form_3_ng_template_30_Template, 2, 0, "ng-template", 28)(31, AIAgentFormComponentExtended_form_3_ng_template_31_Template, 124, 21, "ng-template", 29);
1826
+ i0.ɵɵtemplate(30, AIAgentFormComponentExtended_form_3_ng_template_30_Template, 2, 0, "ng-template", 29)(31, AIAgentFormComponentExtended_form_3_ng_template_31_Template, 124, 21, "ng-template", 30);
1746
1827
  i0.ɵɵelementEnd();
1747
1828
  i0.ɵɵelementStart(32, "kendo-panelbar-item", 27);
1748
- i0.ɵɵtemplate(33, AIAgentFormComponentExtended_form_3_ng_template_33_Template, 2, 0, "ng-template", 28)(34, AIAgentFormComponentExtended_form_3_ng_template_34_Template, 9, 8, "ng-template", 29);
1829
+ i0.ɵɵtemplate(33, AIAgentFormComponentExtended_form_3_ng_template_33_Template, 2, 0, "ng-template", 29)(34, AIAgentFormComponentExtended_form_3_ng_template_34_Template, 9, 8, "ng-template", 30);
1749
1830
  i0.ɵɵelementEnd();
1750
1831
  i0.ɵɵelementStart(35, "kendo-panelbar-item", 27);
1751
- i0.ɵɵtemplate(36, AIAgentFormComponentExtended_form_3_ng_template_36_Template, 2, 0, "ng-template", 28)(37, AIAgentFormComponentExtended_form_3_ng_template_37_Template, 159, 21, "ng-template", 29);
1832
+ i0.ɵɵtemplate(36, AIAgentFormComponentExtended_form_3_ng_template_36_Template, 2, 0, "ng-template", 29)(37, AIAgentFormComponentExtended_form_3_ng_template_37_Template, 159, 21, "ng-template", 30);
1752
1833
  i0.ɵɵelementEnd()()()();
1753
1834
  } if (rf & 2) {
1754
1835
  const ctx_r1 = i0.ɵɵnextContext();
@@ -2124,6 +2205,18 @@ let AIAgentFormComponentExtended = class AIAgentFormComponentExtended extends AI
2124
2205
  this.recentExecutions = [];
2125
2206
  /** Track which execution cards are expanded */
2126
2207
  this.expandedExecutions = {};
2208
+ // === Loading States ===
2209
+ /** Main loading state for initial data load */
2210
+ this.isLoadingData = false;
2211
+ /** Individual loading states for each section */
2212
+ this.loadingStates = {
2213
+ executionHistory: false,
2214
+ subAgents: false,
2215
+ prompts: false,
2216
+ actions: false,
2217
+ learningCycles: false,
2218
+ notes: false
2219
+ };
2127
2220
  // === Dropdown Data ===
2128
2221
  /** Model selection mode options for the dropdown */
2129
2222
  this.modelSelectionModes = [
@@ -2194,6 +2287,17 @@ let AIAgentFormComponentExtended = class AIAgentFormComponentExtended extends AI
2194
2287
  async loadRelatedCounts() {
2195
2288
  if (!this.record?.ID)
2196
2289
  return;
2290
+ // Set loading state
2291
+ this.isLoadingData = true;
2292
+ this.loadingStates = {
2293
+ executionHistory: true,
2294
+ subAgents: true,
2295
+ prompts: true,
2296
+ actions: true,
2297
+ learningCycles: true,
2298
+ notes: true
2299
+ };
2300
+ this.cdr.detectChanges();
2197
2301
  try {
2198
2302
  const rv = new RunView();
2199
2303
  // Execute all queries in a single batch for better performance
@@ -2269,6 +2373,19 @@ let AIAgentFormComponentExtended = class AIAgentFormComponentExtended extends AI
2269
2373
  this.noteCount = 0;
2270
2374
  this.executionHistoryCount = 0;
2271
2375
  }
2376
+ finally {
2377
+ // Clear loading states
2378
+ this.isLoadingData = false;
2379
+ this.loadingStates = {
2380
+ executionHistory: false,
2381
+ subAgents: false,
2382
+ prompts: false,
2383
+ actions: false,
2384
+ learningCycles: false,
2385
+ notes: false
2386
+ };
2387
+ this.cdr.detectChanges();
2388
+ }
2272
2389
  }
2273
2390
  /**
2274
2391
  * Creates a snapshot of the current UI state for cancel/revert functionality
@@ -3606,7 +3723,7 @@ let AIAgentFormComponentExtended = class AIAgentFormComponentExtended extends AI
3606
3723
  p.action === 'save' &&
3607
3724
  p.entityObject.Get('_tempParentId') === this.record.ID);
3608
3725
  for (const subAgentRecord of subAgentRecords) {
3609
- // Cast to AIAgentEntity to access ParentID property
3726
+ // Cast to AIAgentEntityExtended to access ParentID property
3610
3727
  const subAgent = subAgentRecord.entityObject;
3611
3728
  // Set the proper ParentID now that parent is saved
3612
3729
  subAgent.ParentID = this.record.ID;
@@ -3695,7 +3812,7 @@ let AIAgentFormComponentExtended = class AIAgentFormComponentExtended extends AI
3695
3812
  } if (rf & 2) {
3696
3813
  let _t;
3697
3814
  i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.customSectionContainer = _t.first);
3698
- } }, features: [i0.ɵɵInheritDefinitionFeature], decls: 4, vars: 1, consts: [["form", "ngForm"], ["customSectionContainer", ""], [1, "record-form-container"], ["kendoDialogContainer", ""], ["kendoWindowContainer", ""], ["class", "record-form", 4, "ngIf"], [1, "record-form"], [3, "form"], [1, "agent-header"], [1, "agent-header-content"], [1, "agent-overview"], [1, "agent-icon-wrapper"], [1, "agent-logo", 3, "src", "alt"], [3, "class"], [1, "agent-info"], ["name", "agentName", "placeholder", "Enter agent name...", 1, "agent-name-input", 3, "ngModel"], [1, "agent-name"], [1, "agent-meta"], [1, "status-badge", 3, "background-color"], [1, "execution-mode"], [1, "parent-agent"], [1, "agent-actions"], ["kendoButton", "", "themeColor", "primary", "size", "large", "title", "Run this AI agent", 3, "disabled"], ["kendoButton", "", "fillMode", "outline", "size", "small", "title", "Refresh all data", 3, "click"], [1, "fa-solid", "fa-refresh"], [1, "form-content"], [3, "keepItemContent"], [3, "expanded"], ["kendoPanelBarItemTitle", ""], ["kendoPanelBarContent", ""], ["name", "agentName", "placeholder", "Enter agent name...", 1, "agent-name-input", 3, "ngModelChange", "ngModel"], [1, "status-badge"], [1, "fa-solid", "fa-circle"], [1, "fa-solid", "fa-sitemap"], ["kendoButton", "", "themeColor", "primary", "size", "large", "title", "Run this AI agent", 3, "click", "disabled"], [1, "fa-solid", "fa-play"], [3, "stateChange", "expanded"], [1, "fa-solid", "fa-puzzle-piece"], [1, "panel-content", "custom-agent-type-section"], [1, "fa-solid", "fa-history"], [1, "panel-content", "execution-history-panel"], [1, "empty-state"], [1, "execution-history-list"], [1, "execution-card", 3, "expanded"], [1, "view-more-item"], [1, "execution-card"], [1, "execution-header", 3, "click"], [1, "execution-left-section"], [1, "execution-status"], [1, "status-indicator"], [1, "execution-info"], [1, "execution-title"], [1, "fa-solid", "fa-chevron-right", "expand-icon"], [1, "execution-date"], [1, "execution-metrics"], [1, "metric-item"], [1, "execution-actions"], ["title", "View details", 1, "action-btn", 3, "click"], [1, "fa-solid", "fa-external-link-alt"], [1, "execution-expanded-content"], [1, "fa-solid", "fa-cog"], [1, "metric-label"], [1, "metric-value"], [1, "fa-solid", "fa-stopwatch"], [1, "fa-solid", "fa-clock"], [1, "fa-solid", "fa-microchip"], [1, "fa-solid", "fa-dollar-sign"], [1, "detailed-metrics"], [1, "metrics-grid"], [1, "metric-detail"], [1, "metric-info"], [1, "metric-title"], [1, "metric-data"], [1, "result-section"], [1, "error-section"], [1, "fa-solid", "fa-check-circle"], [1, "fa-solid", "fa-calculator"], [1, "fa-solid", "fa-comments"], [1, "fa-solid", "fa-file-text"], ["language", "json", 2, "max-height", "200px", "width", "100%", 3, "value", "readonly", "lineWrapping"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "error-content"], [1, "view-more-item", 3, "click"], [1, "fa-solid", "fa-bolt"], [1, "panel-content"], [1, "section-header"], [1, "header-actions"], ["kendoButton", "", "themeColor", "primary", "size", "small"], [1, "entity-list"], ["kendoButton", "", "themeColor", "primary", "size", "small", 3, "click"], [1, "fa-solid", "fa-plus"], ["kendoButton", "", "themeColor", "primary"], ["kendoButton", "", "themeColor", "primary", 3, "click"], [1, "entity-item", "action-item"], [1, "entity-item", "action-item", 3, "click"], [1, "item-icon"], [1, "item-content"], [1, "item-title"], [1, "item-preview"], [1, "item-meta"], [1, "meta-tag"], [1, "status-tag"], [1, "fa-solid"], [1, "item-actions"], ["kendoButton", "", "fillMode", "flat", "themeColor", "error", "size", "small", "title", "Remove action"], [1, "fa-solid", "fa-external-link"], ["kendoButton", "", "fillMode", "flat", "themeColor", "error", "size", "small", "title", "Remove action", 3, "click"], [1, "fa-solid", "fa-trash"], [1, "section-description"], ["kendoButton", "", "themeColor", "secondary", "size", "small", 3, "click"], ["kendoButton", "", "themeColor", "secondary", 3, "click"], [1, "entity-item", "sub-agent-item"], [1, "entity-item", "sub-agent-item", 3, "click"], [1, "sub-agent-logo", 3, "src", "alt"], [1, "status-tag", 3, "background-color"], ["kendoButton", "", "fillMode", "flat", "themeColor", "primary", "size", "small", "title", "Advanced settings"], ["kendoButton", "", "fillMode", "flat", "themeColor", "error", "size", "small", "title", "Remove sub-agent"], ["kendoButton", "", "fillMode", "flat", "themeColor", "primary", "size", "small", "title", "Advanced settings", 3, "click"], ["kendoButton", "", "fillMode", "flat", "themeColor", "error", "size", "small", "title", "Remove sub-agent", 3, "click"], [1, "prompt-controls"], [1, "model-selection-mode"], [1, "model-selection-label"], [1, "fa-solid", "fa-sliders"], ["name", "modelSelectionMode", "textField", "text", "valueField", "value", 1, "model-selection-dropdown", 3, "ngModel", "data", "valuePrimitive"], [1, "model-selection-value"], ["name", "modelSelectionMode", "textField", "text", "valueField", "value", 1, "model-selection-dropdown", 3, "ngModelChange", "ngModel", "data", "valuePrimitive"], [1, "entity-item", "prompt-item"], [1, "entity-item", "prompt-item", 3, "click"], [1, "fa-solid", "fa-comment-dots"], ["kendoButton", "", "fillMode", "flat", "themeColor", "error", "size", "small", "title", "Remove prompt"], ["kendoButton", "", "fillMode", "flat", "themeColor", "error", "size", "small", "title", "Remove prompt", 3, "click"], [1, "fa-solid", "fa-brain"], [1, "entity-item", "learning-item"], [1, "entity-item", "learning-item", 3, "click"], [1, "fa-solid", "fa-calendar"], [1, "fa-solid", "fa-sticky-note"], [1, "entity-item", "note-item"], [1, "entity-item", "note-item", 3, "click"], [1, "fa-solid", "fa-exchange-alt"], [1, "payload-section"], [1, "payload-section-title"], [1, "fa-solid", "fa-target"], [1, "payload-field-container"], [1, "payload-field-info"], [1, "payload-field-label"], [1, "payload-field-description"], [1, "payload-field-input"], ["FieldName", "PayloadScope", "Type", "textbox", "Caption", "", 2, "width", "100%", 3, "EditMode", "record"], [1, "payload-field-example"], [1, "fa-solid", "fa-lightbulb"], [1, "fa-solid", "fa-route"], [1, "payload-paths-grid"], [1, "payload-path-card"], [1, "payload-path-header"], [1, "payload-path-icon", "downstream"], [1, "fa-solid", "fa-arrow-down"], [1, "payload-path-info"], [1, "payload-path-content"], [1, "json-editor-container"], ["language", "json", 2, "height", "100px", "width", "100%", 3, "valueChange", "value", "readonly", "lineWrapping"], [1, "payload-path-hint"], [1, "fa-solid", "fa-info-circle"], [1, "payload-path-icon", "upstream"], [1, "fa-solid", "fa-arrow-up"], [1, "payload-path-icon", "self-read"], [1, "fa-solid", "fa-eye"], [1, "payload-path-icon", "self-write"], [1, "fa-solid", "fa-pen"], [1, "fa-solid", "fa-shield-check"], [1, "payload-validation-container"], [1, "payload-validation-settings"], [1, "validation-field-group"], [1, "validation-field-label"], [1, "validation-field-description"], ["FieldName", "FinalPayloadValidationMode", "Type", "dropdownlist", "Caption", "", 2, "width", "100%", 3, "EditMode", "record"], ["FieldName", "FinalPayloadValidationMaxRetries", "Type", "numerictextbox", "Caption", "", 2, "width", "100%", 3, "EditMode", "record"], [1, "payload-validation-schema"], [1, "validation-schema-label"], [1, "fa-solid", "fa-code"], [1, "validation-schema-description"], [1, "validation-schema-editor"], ["language", "json", 2, "height", "200px", "width", "100%", 3, "valueChange", "value", "readonly", "lineWrapping"], [1, "fa-solid", "fa-shield-halved"], [1, "form-fields-grid"], ["FieldName", "MaxCostPerRun", "Type", "numerictextbox", "Caption", "Max Cost ($)", "Description", "Maximum cost per run", 3, "EditMode", "record"], ["FieldName", "MaxTokensPerRun", "Type", "numerictextbox", "Caption", "Max Tokens", "Description", "Maximum tokens per run", 3, "EditMode", "record"], ["FieldName", "MaxIterationsPerRun", "Type", "numerictextbox", "Caption", "Max Iterations", "Description", "Maximum prompt iterations", 3, "EditMode", "record"], ["FieldName", "MaxTimePerRun", "Type", "numerictextbox", "Caption", "Max Time (seconds)", "Description", "Maximum execution time", 3, "EditMode", "record"], [1, "fa-solid", "fa-cogs"], [1, "config-section"], [1, "config-section-title"], [1, "fa-solid", "fa-id-card"], [1, "config-grid"], [1, "config-card"], [1, "config-card-header"], [1, "config-card-icon"], [1, "fa-solid", "fa-toggle-on"], [1, "config-card-info"], [1, "config-card-content"], ["textField", "text", "valueField", "value", "name", "agentStatus", 1, "config-field-input", 3, "ngModel", "data", "valuePrimitive"], [1, "config-field-display"], ["textField", "Name", "valueField", "ID", "name", "agentTypeID", 1, "config-field-input", 3, "ngModel", "data", "valuePrimitive"], ["FieldName", "ExposeAsAction", "Type", "checkbox", "Caption", "", 3, "EditMode", "record"], [1, "config-card", "full-width"], [1, "fa-solid", "fa-align-left"], ["FieldName", "Description", "Type", "textarea", "Caption", "", 2, "width", "100%", 3, "EditMode", "record"], [1, "fa-solid", "fa-layer-group"], ["FieldName", "ExecutionMode", "Type", "dropdownlist", "Caption", "", 3, "EditMode", "record"], [1, "fa-solid", "fa-sort-numeric-down"], ["FieldName", "ExecutionOrder", "Type", "numerictextbox", "Caption", "", 3, "EditMode", "record"], [1, "fa-solid", "fa-tachometer-alt"], ["FieldName", "DefaultPromptEffortLevel", "Type", "numerictextbox", "Caption", "", 3, "EditMode", "record"], [1, "config-card-hint"], ["FieldName", "DriverClass", "Type", "textbox", "Caption", "", 3, "EditMode", "record"], [1, "fa-solid", "fa-palette"], [1, "fa-solid", "fa-icons"], ["FieldName", "IconClass", "Type", "textbox", "Caption", "", 3, "EditMode", "record"], [1, "fa-solid", "fa-image"], ["FieldName", "LogoURL", "Type", "textbox", "Caption", "", 3, "EditMode", "record"], [1, "fa-solid", "fa-compress"], ["FieldName", "EnableContextCompression", "Type", "checkbox", "Caption", "", 3, "valueChange", "EditMode", "record"], ["textField", "text", "valueField", "value", "name", "agentStatus", 1, "config-field-input", 3, "ngModelChange", "ngModel", "data", "valuePrimitive"], ["textField", "Name", "valueField", "ID", "name", "agentTypeID", 1, "config-field-input", 3, "ngModelChange", "ngModel", "data", "valuePrimitive"], [1, "fa-solid", "fa-hashtag"], ["FieldName", "ContextCompressionMessageThreshold", "Type", "numerictextbox", "Caption", "", 3, "EditMode", "record"], [1, "fa-solid", "fa-save"], ["FieldName", "ContextCompressionMessageRetentionCount", "Type", "numerictextbox", "Caption", "", 3, "EditMode", "record"], [1, "prompt-selector-container"], [1, "prompt-display"], [1, "prompt-name"], [1, "no-prompt"], [1, "prompt-actions"], ["type", "button", "kendoButton", "", "fillMode", "outline", "size", "small", 1, "prompt-select-btn", 3, "click"], [1, "fa-solid", "fa-search"], ["type", "button", "kendoButton", "", "fillMode", "flat", "size", "small", "title", "Clear selection", 1, "prompt-clear-btn"], ["type", "button", "kendoButton", "", "fillMode", "flat", "size", "small", "title", "Clear selection", 1, "prompt-clear-btn", 3, "click"], [1, "fa-solid", "fa-times"]], template: function AIAgentFormComponentExtended_Template(rf, ctx) { if (rf & 1) {
3815
+ } }, features: [i0.ɵɵInheritDefinitionFeature], decls: 4, vars: 1, consts: [["form", "ngForm"], ["customSectionContainer", ""], [1, "record-form-container"], ["kendoDialogContainer", ""], ["kendoWindowContainer", ""], ["class", "record-form", 4, "ngIf"], [1, "record-form"], [3, "form"], [1, "agent-header"], [1, "agent-header-content"], [1, "agent-overview"], [1, "agent-icon-wrapper"], [1, "agent-logo", 3, "src", "alt"], [3, "class"], [1, "agent-info"], ["name", "agentName", "placeholder", "Enter agent name...", 1, "agent-name-input", 3, "ngModel"], [1, "agent-name"], [1, "agent-meta"], [1, "status-badge", 3, "background-color"], [1, "execution-mode"], [1, "parent-agent"], [1, "agent-actions"], ["kendoButton", "", "themeColor", "primary", "size", "large", "title", "Run this AI agent", 3, "disabled"], ["kendoButton", "", "fillMode", "outline", "size", "small", "title", "Refresh all data", 3, "click"], [1, "fa-solid", "fa-refresh"], [1, "form-content"], [3, "keepItemContent"], [3, "expanded"], [3, "expanded", "disabled"], ["kendoPanelBarItemTitle", ""], ["kendoPanelBarContent", ""], ["name", "agentName", "placeholder", "Enter agent name...", 1, "agent-name-input", 3, "ngModelChange", "ngModel"], [1, "status-badge"], [1, "fa-solid", "fa-circle"], [1, "fa-solid", "fa-sitemap"], ["kendoButton", "", "themeColor", "primary", "size", "large", "title", "Run this AI agent", 3, "click", "disabled"], [1, "fa-solid", "fa-play"], [3, "stateChange", "expanded"], [1, "fa-solid", "fa-puzzle-piece"], [1, "panel-content", "custom-agent-type-section"], [1, "fa-solid", "fa-history"], [2, "margin-left", "8px"], [1, "fa-solid", "fa-spinner", "fa-spin", 2, "font-size", "12px"], [1, "panel-content", "execution-history-panel"], [1, "empty-state"], [1, "execution-history-list"], [1, "execution-card", 3, "expanded"], [1, "view-more-item"], [1, "execution-card"], [1, "execution-header", 3, "click"], [1, "execution-left-section"], [1, "execution-status"], [1, "status-indicator"], [1, "execution-info"], [1, "execution-title"], [1, "fa-solid", "fa-chevron-right", "expand-icon"], [1, "execution-date"], [1, "execution-metrics"], [1, "metric-item"], [1, "execution-actions"], ["title", "View details", 1, "action-btn", 3, "click"], [1, "fa-solid", "fa-external-link-alt"], [1, "execution-expanded-content"], [1, "fa-solid", "fa-cog"], [1, "metric-label"], [1, "metric-value"], [1, "fa-solid", "fa-stopwatch"], [1, "fa-solid", "fa-clock"], [1, "fa-solid", "fa-microchip"], [1, "fa-solid", "fa-dollar-sign"], [1, "detailed-metrics"], [1, "metrics-grid"], [1, "metric-detail"], [1, "metric-info"], [1, "metric-title"], [1, "metric-data"], [1, "result-section"], [1, "error-section"], [1, "fa-solid", "fa-check-circle"], [1, "fa-solid", "fa-calculator"], [1, "fa-solid", "fa-comments"], [1, "fa-solid", "fa-file-text"], ["language", "json", 2, "max-height", "200px", "width", "100%", 3, "value", "readonly", "lineWrapping"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "error-content"], [1, "view-more-item", 3, "click"], [1, "fa-solid", "fa-bolt"], [1, "panel-content"], [1, "loading-state"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "section-header"], [1, "header-actions"], ["kendoButton", "", "themeColor", "primary", "size", "small"], [1, "entity-list"], ["kendoButton", "", "themeColor", "primary", "size", "small", 3, "click"], [1, "fa-solid", "fa-plus"], ["kendoButton", "", "themeColor", "primary"], ["kendoButton", "", "themeColor", "primary", 3, "click"], [1, "entity-item", "action-item"], [1, "entity-item", "action-item", 3, "click"], [1, "item-icon"], [1, "item-content"], [1, "item-title"], [1, "item-preview"], [1, "item-meta"], [1, "meta-tag"], [1, "status-tag"], [1, "fa-solid"], [1, "item-actions"], ["kendoButton", "", "fillMode", "flat", "themeColor", "error", "size", "small", "title", "Remove action"], [1, "fa-solid", "fa-external-link"], ["kendoButton", "", "fillMode", "flat", "themeColor", "error", "size", "small", "title", "Remove action", 3, "click"], [1, "fa-solid", "fa-trash"], [1, "section-description"], ["kendoButton", "", "themeColor", "secondary", "size", "small", 3, "click"], ["kendoButton", "", "themeColor", "secondary", 3, "click"], [1, "entity-item", "sub-agent-item"], [1, "entity-item", "sub-agent-item", 3, "click"], [1, "sub-agent-logo", 3, "src", "alt"], [1, "status-tag", 3, "background-color"], ["kendoButton", "", "fillMode", "flat", "themeColor", "primary", "size", "small", "title", "Advanced settings"], ["kendoButton", "", "fillMode", "flat", "themeColor", "error", "size", "small", "title", "Remove sub-agent"], ["kendoButton", "", "fillMode", "flat", "themeColor", "primary", "size", "small", "title", "Advanced settings", 3, "click"], ["kendoButton", "", "fillMode", "flat", "themeColor", "error", "size", "small", "title", "Remove sub-agent", 3, "click"], [1, "prompt-controls"], [1, "model-selection-mode"], [1, "model-selection-label"], [1, "fa-solid", "fa-sliders"], ["name", "modelSelectionMode", "textField", "text", "valueField", "value", 1, "model-selection-dropdown", 3, "ngModel", "data", "valuePrimitive"], [1, "model-selection-value"], ["name", "modelSelectionMode", "textField", "text", "valueField", "value", 1, "model-selection-dropdown", 3, "ngModelChange", "ngModel", "data", "valuePrimitive"], [1, "entity-item", "prompt-item"], [1, "entity-item", "prompt-item", 3, "click"], [1, "fa-solid", "fa-comment-dots"], ["kendoButton", "", "fillMode", "flat", "themeColor", "error", "size", "small", "title", "Remove prompt"], ["kendoButton", "", "fillMode", "flat", "themeColor", "error", "size", "small", "title", "Remove prompt", 3, "click"], [1, "fa-solid", "fa-brain"], [1, "entity-item", "learning-item"], [1, "entity-item", "learning-item", 3, "click"], [1, "fa-solid", "fa-calendar"], [1, "fa-solid", "fa-sticky-note"], [1, "entity-item", "note-item"], [1, "entity-item", "note-item", 3, "click"], [1, "fa-solid", "fa-exchange-alt"], [1, "payload-section"], [1, "payload-section-title"], [1, "fa-solid", "fa-target"], [1, "payload-field-container"], [1, "payload-field-info"], [1, "payload-field-label"], [1, "payload-field-description"], [1, "payload-field-input"], ["FieldName", "PayloadScope", "Type", "textbox", "Caption", "", 2, "width", "100%", 3, "EditMode", "record"], [1, "payload-field-example"], [1, "fa-solid", "fa-lightbulb"], [1, "fa-solid", "fa-route"], [1, "payload-paths-grid"], [1, "payload-path-card"], [1, "payload-path-header"], [1, "payload-path-icon", "downstream"], [1, "fa-solid", "fa-arrow-down"], [1, "payload-path-info"], [1, "payload-path-content"], [1, "json-editor-container"], ["language", "json", 2, "height", "100px", "width", "100%", 3, "valueChange", "value", "readonly", "lineWrapping"], [1, "payload-path-hint"], [1, "fa-solid", "fa-info-circle"], [1, "payload-path-icon", "upstream"], [1, "fa-solid", "fa-arrow-up"], [1, "payload-path-icon", "self-read"], [1, "fa-solid", "fa-eye"], [1, "payload-path-icon", "self-write"], [1, "fa-solid", "fa-pen"], [1, "fa-solid", "fa-shield-check"], [1, "payload-validation-container"], [1, "payload-validation-settings"], [1, "validation-field-group"], [1, "validation-field-label"], [1, "validation-field-description"], ["FieldName", "FinalPayloadValidationMode", "Type", "dropdownlist", "Caption", "", 2, "width", "100%", 3, "EditMode", "record"], ["FieldName", "FinalPayloadValidationMaxRetries", "Type", "numerictextbox", "Caption", "", 2, "width", "100%", 3, "EditMode", "record"], [1, "payload-validation-schema"], [1, "validation-schema-label"], [1, "fa-solid", "fa-code"], [1, "validation-schema-description"], [1, "validation-schema-editor"], ["language", "json", 2, "height", "200px", "width", "100%", 3, "valueChange", "value", "readonly", "lineWrapping"], [1, "fa-solid", "fa-shield-halved"], [1, "form-fields-grid"], ["FieldName", "MaxCostPerRun", "Type", "numerictextbox", "Caption", "Max Cost ($)", "Description", "Maximum cost per run", 3, "EditMode", "record"], ["FieldName", "MaxTokensPerRun", "Type", "numerictextbox", "Caption", "Max Tokens", "Description", "Maximum tokens per run", 3, "EditMode", "record"], ["FieldName", "MaxIterationsPerRun", "Type", "numerictextbox", "Caption", "Max Iterations", "Description", "Maximum prompt iterations", 3, "EditMode", "record"], ["FieldName", "MaxTimePerRun", "Type", "numerictextbox", "Caption", "Max Time (seconds)", "Description", "Maximum execution time", 3, "EditMode", "record"], [1, "fa-solid", "fa-cogs"], [1, "config-section"], [1, "config-section-title"], [1, "fa-solid", "fa-id-card"], [1, "config-grid"], [1, "config-card"], [1, "config-card-header"], [1, "config-card-icon"], [1, "fa-solid", "fa-toggle-on"], [1, "config-card-info"], [1, "config-card-content"], ["textField", "text", "valueField", "value", "name", "agentStatus", 1, "config-field-input", 3, "ngModel", "data", "valuePrimitive"], [1, "config-field-display"], ["textField", "Name", "valueField", "ID", "name", "agentTypeID", 1, "config-field-input", 3, "ngModel", "data", "valuePrimitive"], ["FieldName", "ExposeAsAction", "Type", "checkbox", "Caption", "", 3, "EditMode", "record"], [1, "config-card", "full-width"], [1, "fa-solid", "fa-align-left"], ["FieldName", "Description", "Type", "textarea", "Caption", "", 2, "width", "100%", 3, "EditMode", "record"], [1, "fa-solid", "fa-layer-group"], ["FieldName", "ExecutionMode", "Type", "dropdownlist", "Caption", "", 3, "EditMode", "record"], [1, "fa-solid", "fa-sort-numeric-down"], ["FieldName", "ExecutionOrder", "Type", "numerictextbox", "Caption", "", 3, "EditMode", "record"], [1, "fa-solid", "fa-tachometer-alt"], ["FieldName", "DefaultPromptEffortLevel", "Type", "numerictextbox", "Caption", "", 3, "EditMode", "record"], [1, "config-card-hint"], ["FieldName", "DriverClass", "Type", "textbox", "Caption", "", 3, "EditMode", "record"], [1, "fa-solid", "fa-palette"], [1, "fa-solid", "fa-icons"], ["FieldName", "IconClass", "Type", "textbox", "Caption", "", 3, "EditMode", "record"], [1, "fa-solid", "fa-image"], ["FieldName", "LogoURL", "Type", "textbox", "Caption", "", 3, "EditMode", "record"], [1, "fa-solid", "fa-compress"], ["FieldName", "EnableContextCompression", "Type", "checkbox", "Caption", "", 3, "valueChange", "EditMode", "record"], ["textField", "text", "valueField", "value", "name", "agentStatus", 1, "config-field-input", 3, "ngModelChange", "ngModel", "data", "valuePrimitive"], ["textField", "Name", "valueField", "ID", "name", "agentTypeID", 1, "config-field-input", 3, "ngModelChange", "ngModel", "data", "valuePrimitive"], [1, "fa-solid", "fa-hashtag"], ["FieldName", "ContextCompressionMessageThreshold", "Type", "numerictextbox", "Caption", "", 3, "EditMode", "record"], [1, "fa-solid", "fa-save"], ["FieldName", "ContextCompressionMessageRetentionCount", "Type", "numerictextbox", "Caption", "", 3, "EditMode", "record"], [1, "prompt-selector-container"], [1, "prompt-display"], [1, "prompt-name"], [1, "no-prompt"], [1, "prompt-actions"], ["type", "button", "kendoButton", "", "fillMode", "outline", "size", "small", 1, "prompt-select-btn", 3, "click"], [1, "fa-solid", "fa-search"], ["type", "button", "kendoButton", "", "fillMode", "flat", "size", "small", "title", "Clear selection", 1, "prompt-clear-btn"], ["type", "button", "kendoButton", "", "fillMode", "flat", "size", "small", "title", "Clear selection", 1, "prompt-clear-btn", 3, "click"], [1, "fa-solid", "fa-times"]], template: function AIAgentFormComponentExtended_Template(rf, ctx) { if (rf & 1) {
3699
3816
  i0.ɵɵelementStart(0, "div", 2);
3700
3817
  i0.ɵɵelement(1, "div", 3)(2, "div", 4);
3701
3818
  i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_3_Template, 38, 18, "form", 5);
@@ -3703,7 +3820,7 @@ let AIAgentFormComponentExtended = class AIAgentFormComponentExtended extends AI
3703
3820
  } if (rf & 2) {
3704
3821
  i0.ɵɵadvance(3);
3705
3822
  i0.ɵɵproperty("ngIf", ctx.record);
3706
- } }, dependencies: [i6.NgIf, i7.ɵNgNoValidate, i7.NgControlStatus, i7.NgControlStatusGroup, i7.NgModel, i7.NgForm, i8.PanelBarComponent, i8.PanelBarItemComponent, i8.PanelBarContentDirective, i8.PanelBarItemTitleDirective, i3.DialogContainerDirective, i3.WindowContainerDirective, i9.TextBoxComponent, i10.DropDownListComponent, i11.ButtonComponent, i12.MJFormField, i13.FormToolbarComponent, i14.CodeEditorComponent, i6.DatePipe], styles: ["\n\n.record-form-container[_ngcontent-%COMP%] {\n height: 100%;\n display: flex;\n flex-direction: column;\n background: #f5f7fa;\n}\n\n.record-form[_ngcontent-%COMP%] {\n height: 100%;\n display: flex;\n flex-direction: column;\n}\n\n\n\n.agent-header[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);\n border-bottom: 1px solid #e0e6ed;\n padding: 12px 20px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.04);\n}\n\n.agent-header-content[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 20px;\n}\n\n.agent-overview[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 16px;\n flex: 1;\n min-width: 0;\n}\n\n.agent-icon-wrapper[_ngcontent-%COMP%] {\n width: 48px;\n height: 48px;\n background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: 0 4px 12px rgba(33, 150, 243, 0.2);\n flex-shrink: 0;\n}\n\n.agent-icon-wrapper[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: white;\n font-size: 24px;\n}\n\n.agent-icon-wrapper[_ngcontent-%COMP%] img.agent-logo[_ngcontent-%COMP%] {\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: 8px;\n}\n\n.agent-info[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.agent-name[_ngcontent-%COMP%] {\n font-size: 22px;\n font-weight: 600;\n color: #2c3e50;\n margin: 0 0 8px 0;\n line-height: 1.2;\n}\n\n.agent-name-input[_ngcontent-%COMP%] {\n font-size: 18px !important;\n font-weight: 500 !important;\n height: 36px !important;\n width: 100% !important;\n max-width: 400px !important;\n}\n\n.agent-meta[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 16px;\n flex-wrap: wrap;\n}\n\n.status-badge[_ngcontent-%COMP%] {\n padding: 6px 16px;\n border-radius: 20px;\n font-size: 13px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n display: inline-flex;\n align-items: center;\n gap: 6px;\n}\n\n.status-badge.active[_ngcontent-%COMP%] {\n background: #28a745;\n color: white;\n}\n\n.status-badge.pending[_ngcontent-%COMP%] {\n background: #ffc107;\n color: #212529;\n}\n\n.status-badge.disabled[_ngcontent-%COMP%] {\n background: #6c757d;\n color: white;\n}\n\n.execution-mode[_ngcontent-%COMP%], \n.parent-agent[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 13px;\n color: #6c757d;\n background: #f8f9fa;\n padding: 4px 10px;\n border-radius: 12px;\n}\n\n.execution-mode[_ngcontent-%COMP%] i[_ngcontent-%COMP%], \n.parent-agent[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 12px;\n opacity: 0.8;\n}\n\n\n\n.prompt-controls[_ngcontent-%COMP%] {\n flex: 1;\n margin-right: 16px;\n}\n\n.agent-meta-info[_ngcontent-%COMP%] {\n display: flex;\n gap: 24px;\n margin-top: 12px;\n flex-wrap: wrap;\n}\n\n.meta-item[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.meta-label[_ngcontent-%COMP%] {\n font-size: 12px;\n font-weight: 600;\n color: #6c757d;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.meta-value[_ngcontent-%COMP%] {\n font-size: 14px;\n color: #495057;\n font-weight: 500;\n}\n\n.agent-description[_ngcontent-%COMP%] {\n margin-top: 16px;\n color: #6c757d;\n line-height: 1.6;\n font-size: 15px;\n}\n\n.agent-description-input[_ngcontent-%COMP%] {\n width: 100%;\n max-width: 600px;\n min-height: 80px;\n resize: vertical;\n}\n\n\n\n.agent-actions[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n.action-buttons-row[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n flex-wrap: wrap;\n}\n\n.action-button[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 20px;\n border-radius: 8px;\n font-weight: 500;\n font-size: 14px;\n transition: all 0.2s ease;\n box-shadow: 0 2px 4px rgba(0,0,0,0.08);\n}\n\n.action-button[_ngcontent-%COMP%]:hover {\n transform: translateY(-1px);\n box-shadow: 0 4px 8px rgba(0,0,0,0.12);\n}\n\n.action-button.primary[_ngcontent-%COMP%] {\n background: #2196f3;\n color: white;\n}\n\n.action-button.primary[_ngcontent-%COMP%]:hover {\n background: #1976d2;\n}\n\n.action-button.secondary[_ngcontent-%COMP%] {\n background: #6c757d;\n color: white;\n}\n\n.action-button.secondary[_ngcontent-%COMP%]:hover {\n background: #5a6268;\n}\n\n.action-warnings[_ngcontent-%COMP%] {\n margin-top: 8px;\n font-size: 13px;\n color: #dc3545;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n\n\n.form-content[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n overflow-x: hidden;\n background: #f5f7fa;\n padding: 12px;\n}\n\n\n\n .k-panelbar {\n border: none;\n background: transparent;\n}\n\n .k-panelbar > .k-panelbar-item {\n border: none;\n border-radius: 12px;\n margin-bottom: 12px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.06);\n background: white;\n overflow: hidden;\n}\n\n .k-panelbar > .k-panelbar-item > .k-header {\n background: white;\n border: none;\n padding: 16px 20px;\n border-radius: 12px 12px 0 0;\n color: #2c3e50;\n font-weight: 600;\n font-size: 16px;\n transition: all 0.2s ease;\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n .k-panelbar > .k-panelbar-item > .k-header:hover {\n background: #f8f9fa;\n}\n\n .k-panelbar > .k-panelbar-item.k-panelbar-expanded > .k-header {\n background: #2196f3;\n color: white;\n border-radius: 12px 12px 0 0;\n}\n\n .k-panelbar > .k-panelbar-item > .k-header .k-panelbar-toggle {\n position: absolute;\n right: 24px;\n color: inherit;\n font-size: 14px;\n transition: transform 0.2s ease;\n}\n\n .k-panelbar > .k-panelbar-item.k-panelbar-expanded > .k-header .k-panelbar-toggle {\n transform: rotate(180deg);\n}\n\n .k-panelbar > .k-panelbar-item > .k-header .k-panelbar-toggle::before {\n content: '\\f107';\n font-family: 'Font Awesome 6 Free';\n font-weight: 900;\n}\n\n .k-panelbar > .k-panelbar-item > .k-content {\n padding: 0;\n border: none;\n background: white;\n border-radius: 0 0 12px 12px;\n}\n\n .k-panelbar .k-header .k-panelbar-icon {\n font-size: 18px;\n color: #2196f3;\n margin-right: 8px;\n}\n\n .k-panelbar .k-panelbar-expanded .k-header .k-panelbar-icon {\n color: white;\n}\n\n\n\n.panel-content[_ngcontent-%COMP%] {\n padding: 16px;\n background: white;\n}\n\n.section-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 20px;\n gap: 16px;\n flex-wrap: wrap;\n}\n\n.section-description[_ngcontent-%COMP%] {\n color: #6c757d;\n font-size: 14px;\n line-height: 1.6;\n margin-bottom: 16px;\n}\n\n.header-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n align-items: center;\n flex-shrink: 0;\n}\n\n.tab-section[_ngcontent-%COMP%] {\n background: white;\n border-radius: 12px;\n padding: 24px;\n margin-bottom: 24px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.04);\n border: 1px solid #e0e6ed;\n}\n\n.section-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 20px;\n padding-bottom: 16px;\n border-bottom: 2px solid #f0f4f8;\n}\n\n.section-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n margin: 0;\n color: #2c3e50;\n font-size: 18px;\n font-weight: 600;\n}\n\n.section-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #2196f3;\n font-size: 20px;\n}\n\n.section-description[_ngcontent-%COMP%] {\n color: #6c757d;\n font-size: 14px;\n line-height: 1.6;\n margin-top: 8px;\n}\n\n\n\n.form-fields-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 20px;\n margin-top: 20px;\n}\n\n.form-field-group[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.form-field-label[_ngcontent-%COMP%] {\n font-size: 13px;\n font-weight: 600;\n color: #495057;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n\n\n.sub-grid-container[_ngcontent-%COMP%] {\n height: 500px;\n border: 1px solid #e0e6ed;\n border-radius: 8px;\n overflow: hidden;\n display: none; \n\n}\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n text-align: center;\n padding: 60px 20px;\n color: #6c757d;\n}\n\n.empty-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 48px;\n color: #dee2e6;\n margin-bottom: 16px;\n}\n\n.empty-state[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n color: #495057;\n font-weight: 600;\n margin-bottom: 8px;\n}\n\n.empty-state[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n font-size: 15px;\n line-height: 1.6;\n max-width: 400px;\n margin: 0 auto;\n}\n\n\n\n.loading-overlay[_ngcontent-%COMP%] {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(255, 255, 255, 0.9);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n}\n\n.loading-spinner[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 16px;\n}\n\n.spinner-icon[_ngcontent-%COMP%] {\n width: 48px;\n height: 48px;\n border: 4px solid #f3f3f3;\n border-top: 4px solid #2196f3;\n border-radius: 50%;\n animation: _ngcontent-%COMP%_spin 1s linear infinite;\n}\n\n@keyframes _ngcontent-%COMP%_spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}\n\n\n\n.quick-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 16px;\n margin-top: 20px;\n padding-top: 20px;\n border-top: 1px solid #e0e6ed;\n}\n\n.quick-action-card[_ngcontent-%COMP%] {\n flex: 1;\n padding: 16px;\n background: #f8f9fa;\n border-radius: 8px;\n border: 1px solid #e0e6ed;\n cursor: pointer;\n transition: all 0.2s ease;\n text-align: center;\n}\n\n.quick-action-card[_ngcontent-%COMP%]:hover {\n background: white;\n box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n transform: translateY(-2px);\n}\n\n.quick-action-icon[_ngcontent-%COMP%] {\n font-size: 32px;\n color: #2196f3;\n margin-bottom: 8px;\n}\n\n.quick-action-title[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 600;\n color: #495057;\n margin-bottom: 4px;\n}\n\n.quick-action-description[_ngcontent-%COMP%] {\n font-size: 12px;\n color: #6c757d;\n}\n\n\n\n.header-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n align-items: center;\n}\n\n\n\n.entity-list[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 12px;\n margin-top: 16px;\n}\n\n.entity-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 16px;\n padding: 16px;\n background: #f8f9fa;\n border: 1px solid #e0e6ed;\n border-radius: 10px;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.entity-item[_ngcontent-%COMP%]:hover {\n background: white;\n border-color: #2196f3;\n box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n transform: translateY(-1px);\n}\n\n.item-icon[_ngcontent-%COMP%] {\n width: 40px;\n height: 40px;\n background: linear-gradient(135deg, #e9ecef, #dee2e6);\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.prompt-item[_ngcontent-%COMP%] .item-icon[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, #20c997, #17a673);\n}\n\n.action-item[_ngcontent-%COMP%] .item-icon[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, #ffc107, #e0a800);\n}\n\n.sub-agent-item[_ngcontent-%COMP%] .item-icon[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, #2196f3, #1976d2);\n}\n\n.model-item[_ngcontent-%COMP%] .item-icon[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, #6f42c1, #563d7c);\n}\n\n.learning-item[_ngcontent-%COMP%] .item-icon[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, #e83e8c, #dc3545);\n}\n\n.note-item[_ngcontent-%COMP%] .item-icon[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, #fd7e14, #e55a00);\n}\n\n.item-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #6c757d;\n font-size: 18px;\n}\n\n.prompt-item[_ngcontent-%COMP%] .item-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%], \n.action-item[_ngcontent-%COMP%] .item-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%], \n.sub-agent-item[_ngcontent-%COMP%] .item-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%], \n.model-item[_ngcontent-%COMP%] .item-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%], \n.learning-item[_ngcontent-%COMP%] .item-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%], \n.note-item[_ngcontent-%COMP%] .item-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: white;\n}\n\n.item-icon[_ngcontent-%COMP%] img.sub-agent-logo[_ngcontent-%COMP%] {\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: 6px;\n}\n\n.item-content[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.item-title[_ngcontent-%COMP%] {\n font-size: 16px;\n font-weight: 600;\n color: #2c3e50;\n margin: 0 0 4px 0;\n line-height: 1.3;\n}\n\n.item-preview[_ngcontent-%COMP%] {\n color: #6c757d;\n font-size: 14px;\n line-height: 1.4;\n margin: 4px 0 8px 0;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.item-meta[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n align-items: center;\n flex-wrap: wrap;\n}\n\n.meta-tag[_ngcontent-%COMP%], \n.priority-tag[_ngcontent-%COMP%], \n.status-tag[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 4px;\n font-size: 12px;\n padding: 3px 8px;\n border-radius: 6px;\n font-weight: 500;\n}\n\n.meta-tag[_ngcontent-%COMP%] {\n background: #e9ecef;\n color: #495057;\n}\n\n.priority-tag[_ngcontent-%COMP%] {\n color: white;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.3px;\n}\n\n.status-tag[_ngcontent-%COMP%] {\n background: #e9ecef;\n color: #495057;\n}\n\n.status-tag.active[_ngcontent-%COMP%] {\n background: #d4edda;\n color: #28a745;\n}\n\n.status-tag.inactive[_ngcontent-%COMP%] {\n background: #f8d7da;\n color: #dc3545;\n}\n\n.item-actions[_ngcontent-%COMP%] {\n opacity: 0;\n transition: opacity 0.2s ease;\n color: #6c757d;\n font-size: 16px;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.entity-item[_ngcontent-%COMP%]:hover .item-actions[_ngcontent-%COMP%] {\n opacity: 1;\n}\n\n.entity-item[_ngcontent-%COMP%]:hover .item-actions[_ngcontent-%COMP%] > i[_ngcontent-%COMP%] {\n color: #2196f3;\n}\n\n.view-more-item[_ngcontent-%COMP%] {\n padding: 16px;\n background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n border: 2px dashed #dee2e6;\n border-radius: 10px;\n text-align: center;\n cursor: pointer;\n transition: all 0.2s ease;\n color: #6c757d;\n font-weight: 500;\n}\n\n.view-more-item[_ngcontent-%COMP%]:hover {\n background: linear-gradient(135deg, #e9ecef, #dee2e6);\n border-color: #2196f3;\n color: #2196f3;\n}\n\n\n\n.payload-config-section[_ngcontent-%COMP%], \n.payload-paths-section[_ngcontent-%COMP%], \n.payload-validation-section[_ngcontent-%COMP%] {\n margin-bottom: 32px;\n}\n\n.subsection-title[_ngcontent-%COMP%] {\n font-size: 16px;\n font-weight: 600;\n color: #2c3e50;\n margin: 0 0 16px 0;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.subsection-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #2196f3;\n}\n\n.subsection-divider[_ngcontent-%COMP%] {\n margin-top: 32px;\n margin-bottom: 16px;\n padding-top: 24px;\n border-top: 1px solid #e0e6ed;\n}\n\n.payload-config-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: 1fr 1fr 1fr;\n gap: 16px;\n margin-bottom: 24px;\n}\n\n.payload-field-group[_ngcontent-%COMP%] {\n margin-bottom: 20px;\n}\n\n.payload-field-label[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 14px;\n font-weight: 600;\n color: #495057;\n margin-bottom: 8px;\n}\n\n.payload-field-label[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #6c757d;\n font-size: 16px;\n}\n\n.field-description[_ngcontent-%COMP%] {\n font-size: 12px;\n font-weight: normal;\n color: #6c757d;\n margin-left: auto;\n}\n\n\n\n.payload-field-group[_ngcontent-%COMP%] mj-code-editor[_ngcontent-%COMP%] {\n border: 1px solid #dee2e6;\n border-radius: 8px;\n overflow: hidden;\n}\n\n.payload-field-group[_ngcontent-%COMP%] mj-code-editor[_ngcontent-%COMP%]:hover {\n border-color: #2196f3;\n}\n\n\n\n.payload-field-group[_ngcontent-%COMP%] mj-form-field[_ngcontent-%COMP%] textarea {\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 13px;\n line-height: 1.5;\n min-height: 120px;\n resize: vertical;\n}\n\n\n\n.execution-history-panel[_ngcontent-%COMP%] {\n max-height: 500px;\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n\n\n.timeline-list[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 16px;\n margin-top: 16px;\n}\n\n.timeline-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 16px;\n padding: 16px;\n background: #f8f9fa;\n border: 1px solid #e0e6ed;\n border-radius: 10px;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.timeline-item[_ngcontent-%COMP%]:hover {\n background: white;\n border-color: #2196f3;\n box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n}\n\n.timeline-marker[_ngcontent-%COMP%] {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n}\n\n.timeline-marker[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: white;\n font-size: 14px;\n}\n\n.timeline-content[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.timeline-title[_ngcontent-%COMP%] {\n font-size: 16px;\n font-weight: 600;\n color: #2c3e50;\n margin: 0 0 8px 0;\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n gap: 16px;\n}\n\n.timeline-date[_ngcontent-%COMP%] {\n font-size: 12px;\n color: #6c757d;\n background: #e9ecef;\n padding: 2px 8px;\n border-radius: 6px;\n white-space: nowrap;\n flex-shrink: 0;\n}\n\n.timeline-meta[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 8px;\n}\n\n.timeline-preview[_ngcontent-%COMP%] {\n color: #6c757d;\n font-size: 14px;\n line-height: 1.4;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n\n\n.cards-container[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n gap: 20px;\n margin-top: 16px;\n}\n\n.entity-card[_ngcontent-%COMP%] {\n background: white;\n border: 1px solid #e0e6ed;\n border-radius: 12px;\n padding: 20px;\n cursor: pointer;\n transition: all 0.3s ease;\n box-shadow: 0 2px 8px rgba(0,0,0,0.06);\n position: relative;\n overflow: hidden;\n}\n\n.entity-card[_ngcontent-%COMP%]:hover {\n transform: translateY(-4px);\n box-shadow: 0 8px 24px rgba(0,0,0,0.12);\n border-color: #2196f3;\n}\n\n.entity-card[_ngcontent-%COMP%]::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 4px;\n background: linear-gradient(90deg, #2196f3, #42a5f5);\n opacity: 0;\n transition: opacity 0.3s ease;\n}\n\n.entity-card[_ngcontent-%COMP%]:hover::before {\n opacity: 1;\n}\n\n.card-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n margin-bottom: 12px;\n}\n\n.card-icon[_ngcontent-%COMP%] {\n width: 40px;\n height: 40px;\n background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.sub-agent-card[_ngcontent-%COMP%] .card-icon[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, #2196f3, #1976d2);\n}\n\n.prompt-card[_ngcontent-%COMP%] .card-icon[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, #20c997, #17a673);\n}\n\n.action-card[_ngcontent-%COMP%] .card-icon[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, #ffc107, #e0a800);\n}\n\n.card-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 18px;\n color: #6c757d;\n}\n\n.sub-agent-card[_ngcontent-%COMP%] .card-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%], \n.prompt-card[_ngcontent-%COMP%] .card-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%], \n.action-card[_ngcontent-%COMP%] .card-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: white;\n}\n\n.card-title-section[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.card-title[_ngcontent-%COMP%] {\n font-size: 16px;\n font-weight: 600;\n color: #2c3e50;\n margin: 0 0 4px 0;\n line-height: 1.3;\n word-wrap: break-word;\n}\n\n.card-description[_ngcontent-%COMP%] {\n color: #6c757d;\n font-size: 14px;\n line-height: 1.5;\n margin: 8px 0;\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.card-meta[_ngcontent-%COMP%] {\n display: flex;\n gap: 16px;\n margin-top: 12px;\n flex-wrap: wrap;\n}\n\n.meta-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 12px;\n color: #6c757d;\n padding: 4px 8px;\n background: #f8f9fa;\n border-radius: 6px;\n}\n\n.meta-item[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 11px;\n opacity: 0.8;\n}\n\n.meta-item.active[_ngcontent-%COMP%] {\n color: #28a745;\n background: #d4edda;\n}\n\n.meta-item.inactive[_ngcontent-%COMP%] {\n color: #dc3545;\n background: #f8d7da;\n}\n\n.card-actions[_ngcontent-%COMP%] {\n opacity: 0;\n transition: opacity 0.3s ease;\n color: #6c757d;\n}\n\n.entity-card[_ngcontent-%COMP%]:hover .card-actions[_ngcontent-%COMP%] {\n opacity: 1;\n color: #2196f3;\n}\n\n\n\n.priority-badge[_ngcontent-%COMP%] {\n padding: 2px 8px;\n border-radius: 12px;\n font-size: 11px;\n font-weight: 600;\n color: white;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.type-badge[_ngcontent-%COMP%] {\n padding: 2px 8px;\n border-radius: 6px;\n font-size: 11px;\n font-weight: 500;\n background: #e9ecef;\n color: #495057;\n text-transform: uppercase;\n letter-spacing: 0.3px;\n}\n\n\n\n.view-all-card[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n border: 2px dashed #dee2e6;\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 120px;\n cursor: pointer;\n transition: all 0.3s ease;\n}\n\n.view-all-card[_ngcontent-%COMP%]:hover {\n background: linear-gradient(135deg, #e9ecef, #dee2e6);\n border-color: #2196f3;\n transform: translateY(-2px);\n}\n\n.view-all-content[_ngcontent-%COMP%] {\n text-align: center;\n color: #6c757d;\n font-weight: 500;\n}\n\n.view-all-content[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 24px;\n margin-bottom: 8px;\n display: block;\n}\n\n\n\n.timeline-container[_ngcontent-%COMP%] {\n position: relative;\n margin-top: 16px;\n}\n\n.timeline-item[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n margin-bottom: 24px;\n transition: all 0.3s ease;\n border-radius: 12px;\n padding: 16px;\n background: transparent;\n border: 1px solid transparent;\n}\n\n.timeline-item[_ngcontent-%COMP%]:hover {\n background: #f8f9fa;\n border-color: #e0e6ed;\n}\n\n.timeline-item.expanded[_ngcontent-%COMP%] {\n background: #f8f9fa;\n border-color: #2196f3;\n box-shadow: 0 4px 12px rgba(33, 150, 243, 0.1);\n}\n\n.timeline-item.view-all[_ngcontent-%COMP%] {\n cursor: pointer;\n background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n border: 2px dashed #dee2e6;\n}\n\n.timeline-item.view-all[_ngcontent-%COMP%]:hover {\n background: linear-gradient(135deg, #e9ecef, #dee2e6);\n border-color: #2196f3;\n}\n\n.timeline-item[_ngcontent-%COMP%] > div[_ngcontent-%COMP%]:first-child {\n display: flex;\n align-items: flex-start;\n}\n\n.timeline-marker[_ngcontent-%COMP%] {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 16px;\n flex-shrink: 0;\n position: relative;\n box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n}\n\n.timeline-marker[_ngcontent-%COMP%]::after {\n content: '';\n position: absolute;\n top: 50px;\n left: 50%;\n transform: translateX(-50%);\n width: 2px;\n height: 24px;\n background: #e0e6ed;\n}\n\n.timeline-item[_ngcontent-%COMP%]:last-child .timeline-marker[_ngcontent-%COMP%]::after {\n display: none;\n}\n\n.timeline-marker[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: white;\n font-size: 16px;\n}\n\n.timeline-marker.view-all-marker[_ngcontent-%COMP%] {\n background: #6c757d;\n}\n\n.timeline-content[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n display: flex;\n align-items: flex-start;\n}\n\n.timeline-header[_ngcontent-%COMP%] {\n flex: 1;\n cursor: pointer;\n}\n\n.timeline-header[_ngcontent-%COMP%] > div[_ngcontent-%COMP%]:first-child {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n margin-bottom: 8px;\n gap: 16px;\n}\n\n.expand-icon[_ngcontent-%COMP%] {\n transition: transform 0.3s ease;\n margin-right: 8px;\n color: #6c757d;\n}\n\n.expand-icon.expanded[_ngcontent-%COMP%] {\n transform: rotate(90deg);\n}\n\n.timeline-title[_ngcontent-%COMP%] {\n font-size: 16px;\n font-weight: 600;\n color: #2c3e50;\n margin: 0;\n line-height: 1.3;\n}\n\n.timeline-date[_ngcontent-%COMP%] {\n font-size: 12px;\n color: #6c757d;\n white-space: nowrap;\n background: #f8f9fa;\n padding: 4px 8px;\n border-radius: 6px;\n margin-left: auto;\n}\n\n.timeline-preview[_ngcontent-%COMP%] {\n font-size: 13px;\n color: #6c757d;\n line-height: 1.5;\n margin-top: 8px;\n padding: 8px 12px;\n background: #f8f9fa;\n border-radius: 6px;\n border: 1px solid #e0e6ed;\n}\n\n.timeline-status[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 8px;\n}\n\n.execution-time[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 4px;\n font-size: 12px;\n color: #6c757d;\n background: #f8f9fa;\n padding: 4px 8px;\n border-radius: 6px;\n}\n\n.timeline-description[_ngcontent-%COMP%] {\n color: #6c757d;\n font-size: 14px;\n line-height: 1.5;\n margin: 8px 0;\n}\n\n.timeline-error[_ngcontent-%COMP%] {\n color: #dc3545;\n font-size: 13px;\n background: #f8d7da;\n padding: 8px 12px;\n border-radius: 6px;\n margin-top: 8px;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.timeline-error[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n flex-shrink: 0;\n}\n\n\n\n.timeline-expanded-content[_ngcontent-%COMP%] {\n margin-top: 20px;\n padding-top: 20px;\n border-top: 1px solid #e0e6ed;\n animation: _ngcontent-%COMP%_fadeIn 0.3s ease;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n from {\n opacity: 0;\n transform: translateY(-10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.result-section[_ngcontent-%COMP%], \n.error-section[_ngcontent-%COMP%] {\n margin-bottom: 20px;\n}\n\n.result-section[_ngcontent-%COMP%] h5[_ngcontent-%COMP%], \n.error-section[_ngcontent-%COMP%] h5[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 600;\n color: #495057;\n margin-bottom: 8px;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.error-section[_ngcontent-%COMP%] h5[_ngcontent-%COMP%] {\n color: #dc3545;\n}\n\n.result-content[_ngcontent-%COMP%], \n.error-content[_ngcontent-%COMP%] {\n background: white;\n border: 1px solid #e0e6ed;\n border-radius: 8px;\n padding: 12px 16px;\n font-size: 14px;\n line-height: 1.6;\n color: #495057;\n white-space: pre-wrap;\n word-break: break-word;\n max-height: 200px;\n overflow-y: auto;\n}\n\n\n\n.result-section[_ngcontent-%COMP%] mj-code-editor[_ngcontent-%COMP%] {\n border: 1px solid #e0e6ed;\n border-radius: 8px;\n overflow: hidden;\n}\n\n.error-content[_ngcontent-%COMP%] {\n background: #f8d7da;\n border-color: #f5c6cb;\n color: #721c24;\n}\n\n.execution-details[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 16px;\n margin-bottom: 20px;\n}\n\n.detail-row[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n}\n\n.detail-label[_ngcontent-%COMP%] {\n font-size: 12px;\n font-weight: 600;\n color: #6c757d;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n min-width: 80px;\n}\n\n.detail-value[_ngcontent-%COMP%] {\n font-size: 14px;\n color: #495057;\n word-break: break-all;\n}\n\n.timeline-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n justify-content: flex-end;\n}\n\n.btn-primary[_ngcontent-%COMP%] {\n padding: 8px 16px;\n background: #2196f3;\n color: white;\n border: none;\n border-radius: 8px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n transition: all 0.2s ease;\n}\n\n.btn-primary[_ngcontent-%COMP%]:hover {\n background: #1976d2;\n transform: translateY(-1px);\n box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);\n}\n\n.btn-primary[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 12px;\n}\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n text-align: center;\n padding: 60px 20px;\n color: #6c757d;\n background: #f8f9fa;\n border-radius: 12px;\n border: 2px dashed #dee2e6;\n margin-top: 16px;\n}\n\n.empty-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 48px;\n color: #dee2e6;\n margin-bottom: 16px;\n}\n\n.empty-state[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n color: #495057;\n font-weight: 600;\n margin-bottom: 8px;\n font-size: 18px;\n}\n\n.empty-state[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n font-size: 15px;\n line-height: 1.6;\n max-width: 400px;\n margin: 0 auto 20px auto;\n}\n\n\n\n@media (max-width: 768px) {\n \n\n .agent-header[_ngcontent-%COMP%] {\n padding: 16px;\n }\n \n .agent-header-content[_ngcontent-%COMP%] {\n flex-direction: column;\n gap: 16px;\n }\n \n .agent-overview[_ngcontent-%COMP%] {\n flex-direction: column;\n align-items: flex-start;\n gap: 12px;\n }\n \n .agent-meta[_ngcontent-%COMP%] {\n flex-direction: column;\n align-items: flex-start;\n gap: 8px;\n }\n \n .agent-actions[_ngcontent-%COMP%] {\n width: 100%;\n align-self: stretch;\n }\n \n .action-button[_ngcontent-%COMP%] {\n flex: 1;\n justify-content: center;\n }\n \n \n\n .form-content[_ngcontent-%COMP%] {\n padding: 12px;\n }\n \n .k-panelbar > .k-panelbar-item > .k-header {\n padding: 16px 20px;\n font-size: 15px;\n }\n \n .panel-content[_ngcontent-%COMP%] {\n padding: 20px 16px;\n }\n \n .section-header[_ngcontent-%COMP%] {\n flex-direction: column;\n align-items: flex-start;\n gap: 12px;\n }\n \n .header-actions[_ngcontent-%COMP%] {\n flex-wrap: wrap;\n align-self: stretch;\n }\n \n \n\n .entity-item[_ngcontent-%COMP%] {\n padding: 12px;\n gap: 12px;\n }\n \n .item-icon[_ngcontent-%COMP%] {\n width: 36px;\n height: 36px;\n }\n \n .item-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 16px;\n }\n \n .item-title[_ngcontent-%COMP%] {\n font-size: 15px;\n }\n \n .item-preview[_ngcontent-%COMP%] {\n font-size: 13px;\n }\n \n .item-meta[_ngcontent-%COMP%] {\n gap: 8px;\n }\n \n \n\n .timeline-item[_ngcontent-%COMP%] {\n padding: 12px;\n gap: 12px;\n }\n \n .timeline-marker[_ngcontent-%COMP%] {\n width: 28px;\n height: 28px;\n }\n \n .timeline-marker[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 12px;\n }\n \n .timeline-title[_ngcontent-%COMP%] {\n flex-direction: column;\n align-items: flex-start;\n gap: 8px;\n }\n \n .timeline-date[_ngcontent-%COMP%] {\n align-self: flex-start;\n }\n \n \n\n .form-fields-grid[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n gap: 16px;\n }\n \n \n\n .cards-container[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n }\n}\n\n\n\n.execution-history-panel[_ngcontent-%COMP%] {\n max-height: 500px;\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n\n\n.execution-history-panel[_ngcontent-%COMP%]::-webkit-scrollbar {\n width: 8px;\n}\n\n.execution-history-panel[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n background: #f1f1f1;\n border-radius: 4px;\n}\n\n.execution-history-panel[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n background: #c1c1c1;\n border-radius: 4px;\n}\n\n.execution-history-panel[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n background: #a0a0a0;\n}\n\n\n\n.execution-history-list[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 12px;\n margin-top: 16px;\n}\n\n.execution-card[_ngcontent-%COMP%] {\n background: white;\n border: 1px solid #e0e6ed;\n border-radius: 12px;\n overflow: hidden;\n transition: all 0.2s ease;\n cursor: pointer;\n}\n\n.execution-card[_ngcontent-%COMP%]:hover {\n border-color: #2196f3;\n box-shadow: 0 4px 12px rgba(33, 150, 243, 0.1);\n transform: translateY(-1px);\n}\n\n.execution-card.expanded[_ngcontent-%COMP%] {\n border-color: #2196f3;\n box-shadow: 0 6px 20px rgba(33, 150, 243, 0.15);\n}\n\n.execution-header[_ngcontent-%COMP%] {\n padding: 16px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n}\n\n.execution-left-section[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 12px;\n flex: 1;\n min-width: 0;\n}\n\n.execution-status[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n flex-shrink: 0;\n}\n\n.status-indicator[_ngcontent-%COMP%] {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n}\n\n.status-indicator[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: white;\n font-size: 14px;\n}\n\n.execution-info[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.execution-title[_ngcontent-%COMP%] {\n font-size: 16px;\n font-weight: 600;\n color: #2c3e50;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.execution-date[_ngcontent-%COMP%] {\n font-size: 12px;\n color: #6c757d;\n}\n\n.execution-metrics[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 16px;\n flex-wrap: wrap;\n margin-left: 44px; \n\n}\n\n.metric-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 12px;\n background: #f8f9fa;\n padding: 6px 10px;\n border-radius: 6px;\n color: #495057;\n white-space: nowrap;\n}\n\n.metric-item[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #6c757d;\n font-size: 12px;\n}\n\n.metric-label[_ngcontent-%COMP%] {\n font-weight: 500;\n}\n\n.metric-value[_ngcontent-%COMP%] {\n font-weight: 600;\n color: #2c3e50;\n}\n\n.execution-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n flex-shrink: 0;\n}\n\n.action-btn[_ngcontent-%COMP%] {\n width: 32px;\n height: 32px;\n border: none;\n background: #f8f9fa;\n border-radius: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.2s ease;\n color: #6c757d;\n}\n\n.action-btn[_ngcontent-%COMP%]:hover {\n background: #2196f3;\n color: white;\n transform: translateY(-1px);\n}\n\n.action-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 12px;\n}\n\n.expand-icon[_ngcontent-%COMP%] {\n transition: transform 0.2s ease;\n color: #6c757d;\n margin-right: 4px;\n}\n\n.expand-icon.expanded[_ngcontent-%COMP%] {\n transform: rotate(90deg);\n}\n\n\n\n.execution-expanded-content[_ngcontent-%COMP%] {\n padding: 16px;\n border-top: 1px solid #f0f4f8;\n background: #fafbfc;\n animation: _ngcontent-%COMP%_slideDown 0.2s ease;\n}\n\n@keyframes _ngcontent-%COMP%_slideDown {\n from {\n opacity: 0;\n max-height: 0;\n padding-top: 0;\n padding-bottom: 0;\n }\n to {\n opacity: 1;\n max-height: 500px;\n padding-top: 16px;\n padding-bottom: 16px;\n }\n}\n\n.detailed-metrics[_ngcontent-%COMP%] {\n margin-bottom: 20px;\n}\n\n.metrics-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 12px;\n}\n\n.metric-detail[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px;\n background: white;\n border: 1px solid #e0e6ed;\n border-radius: 8px;\n}\n\n.metric-detail[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #2196f3;\n font-size: 16px;\n width: 20px;\n text-align: center;\n}\n\n.metric-info[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 2px;\n flex: 1;\n}\n\n.metric-title[_ngcontent-%COMP%] {\n font-size: 11px;\n font-weight: 600;\n color: #6c757d;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.metric-data[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 600;\n color: #2c3e50;\n}\n\n.result-section[_ngcontent-%COMP%] {\n margin-top: 16px;\n}\n\n.result-section[_ngcontent-%COMP%] h5[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 600;\n color: #495057;\n margin-bottom: 8px;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.error-section[_ngcontent-%COMP%] h5[_ngcontent-%COMP%] {\n color: #dc3545;\n}\n\n.error-content[_ngcontent-%COMP%] {\n background: #f8d7da;\n border: 1px solid #f5c6cb;\n border-radius: 8px;\n padding: 12px 16px;\n font-size: 14px;\n line-height: 1.6;\n color: #721c24;\n white-space: pre-wrap;\n word-break: break-word;\n max-height: 150px;\n overflow-y: auto;\n}\n\n\n\n@media (max-width: 768px) {\n .execution-header[_ngcontent-%COMP%] {\n flex-direction: column;\n align-items: flex-start;\n gap: 12px;\n }\n \n .execution-left-section[_ngcontent-%COMP%] {\n width: 100%;\n }\n \n .execution-metrics[_ngcontent-%COMP%] {\n margin-left: 0; \n\n flex-direction: column;\n align-items: flex-start;\n gap: 8px;\n width: 100%;\n }\n \n .metric-item[_ngcontent-%COMP%] {\n font-size: 11px;\n padding: 4px 8px;\n }\n \n .metrics-grid[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n }\n}\n\n\n\n.payload-section[_ngcontent-%COMP%] {\n margin-bottom: 2rem;\n background: white;\n border-radius: 12px;\n border: 1px solid #e0e0e0;\n overflow: hidden;\n}\n\n.payload-section-title[_ngcontent-%COMP%] {\n margin: 0;\n padding: 1rem 1.5rem;\n background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n border-bottom: 1px solid #e0e0e0;\n color: #495057;\n font-size: 1.1rem;\n font-weight: 600;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n.payload-section-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #2196f3;\n font-size: 1.2rem;\n}\n\n\n\n.payload-field-container[_ngcontent-%COMP%] {\n padding: 1.5rem;\n display: grid;\n grid-template-columns: 1fr 2fr;\n gap: 2rem;\n align-items: start;\n}\n\n.payload-field-info[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.payload-field-label[_ngcontent-%COMP%] {\n font-weight: 600;\n color: #495057;\n font-size: 0.95rem;\n}\n\n.payload-field-description[_ngcontent-%COMP%] {\n color: #6c757d;\n font-size: 0.9rem;\n line-height: 1.5;\n margin: 0;\n}\n\n.payload-field-input[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.payload-field-example[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 0.85rem;\n color: #6c757d;\n background: #f8f9fa;\n padding: 0.5rem 0.75rem;\n border-radius: 6px;\n border: 1px solid #e9ecef;\n}\n\n.payload-field-example[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #ffc107;\n font-size: 0.9rem;\n}\n\n.payload-field-example[_ngcontent-%COMP%] code[_ngcontent-%COMP%] {\n background: #e9ecef;\n padding: 0.2rem 0.4rem;\n border-radius: 4px;\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 0.8rem;\n color: #495057;\n}\n\n\n\n.payload-paths-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n gap: 1.5rem;\n padding: 1.5rem;\n}\n\n.payload-path-card[_ngcontent-%COMP%] {\n background: white;\n border: 1px solid #e0e0e0;\n border-radius: 8px;\n overflow: hidden;\n transition: all 0.2s ease;\n}\n\n.payload-path-card[_ngcontent-%COMP%]:hover {\n border-color: #2196f3;\n box-shadow: 0 4px 12px rgba(33, 150, 243, 0.15);\n}\n\n.payload-path-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 1rem;\n padding: 1rem;\n background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n border-bottom: 1px solid #e0e0e0;\n}\n\n.payload-path-icon[_ngcontent-%COMP%] {\n width: 40px;\n height: 40px;\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.payload-path-icon.downstream[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, #28a745, #20c997);\n}\n\n.payload-path-icon.upstream[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, #007bff, #6610f2);\n}\n\n.payload-path-icon.self-read[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, #17a2b8, #20c997);\n}\n\n.payload-path-icon.self-write[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, #ffc107, #fd7e14);\n}\n\n.payload-path-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: white;\n font-size: 1.2rem;\n}\n\n.payload-path-info[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0 0 0.25rem 0;\n font-size: 1rem;\n font-weight: 600;\n color: #495057;\n}\n\n.payload-path-info[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 0.85rem;\n color: #6c757d;\n line-height: 1.4;\n}\n\n.payload-path-content[_ngcontent-%COMP%] {\n padding: 1rem;\n}\n\n.json-editor-container[_ngcontent-%COMP%] {\n border: 1px solid #dee2e6;\n border-radius: 6px;\n overflow: hidden;\n margin-bottom: 0.75rem;\n}\n\n.json-editor-container[_ngcontent-%COMP%]:hover {\n border-color: #2196f3;\n}\n\n.payload-path-hint[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 0.5rem;\n font-size: 0.8rem;\n color: #6c757d;\n line-height: 1.4;\n}\n\n.payload-path-hint[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #17a2b8;\n margin-top: 0.1rem;\n flex-shrink: 0;\n}\n\n.payload-path-hint[_ngcontent-%COMP%] code[_ngcontent-%COMP%] {\n background: #e9ecef;\n padding: 0.1rem 0.3rem;\n border-radius: 3px;\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 0.75rem;\n color: #495057;\n}\n\n\n\n.payload-validation-container[_ngcontent-%COMP%] {\n padding: 1.5rem;\n display: grid;\n grid-template-columns: 1fr 2fr;\n gap: 2rem;\n align-items: start;\n}\n\n.payload-validation-settings[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n}\n\n.validation-field-group[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.validation-field-label[_ngcontent-%COMP%] {\n font-weight: 600;\n color: #495057;\n font-size: 0.95rem;\n}\n\n.validation-field-description[_ngcontent-%COMP%] {\n color: #6c757d;\n font-size: 0.9rem;\n line-height: 1.4;\n margin: 0 0 0.5rem 0;\n}\n\n.payload-validation-schema[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n}\n\n.validation-schema-label[_ngcontent-%COMP%] {\n font-weight: 600;\n color: #495057;\n font-size: 0.95rem;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n.validation-schema-label[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #2196f3;\n}\n\n.validation-schema-description[_ngcontent-%COMP%] {\n color: #6c757d;\n font-size: 0.9rem;\n line-height: 1.4;\n margin: 0;\n}\n\n.validation-schema-editor[_ngcontent-%COMP%] {\n border: 1px solid #dee2e6;\n border-radius: 6px;\n overflow: hidden;\n}\n\n.validation-schema-editor[_ngcontent-%COMP%]:hover {\n border-color: #2196f3;\n}\n\n\n\n.config-section[_ngcontent-%COMP%] {\n margin-bottom: 2rem;\n background: white;\n border-radius: 12px;\n border: 1px solid #e0e0e0;\n overflow: hidden;\n}\n\n.config-section-title[_ngcontent-%COMP%] {\n margin: 0;\n padding: 1rem 1.5rem;\n background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n border-bottom: 1px solid #e0e0e0;\n color: #495057;\n font-size: 1.1rem;\n font-weight: 600;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n.config-section-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #2196f3;\n font-size: 1.2rem;\n}\n\n.config-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));\n gap: 1.5rem;\n padding: 1.5rem;\n width: 100%;\n}\n\n.config-card[_ngcontent-%COMP%] {\n background: white;\n border: 1px solid #e0e0e0;\n border-radius: 8px;\n overflow: hidden;\n transition: all 0.2s ease;\n}\n\n.config-card[_ngcontent-%COMP%]:hover {\n border-color: #2196f3;\n box-shadow: 0 4px 12px rgba(33, 150, 243, 0.15);\n}\n\n.config-card.full-width[_ngcontent-%COMP%] {\n grid-column: 1 / -1;\n}\n\n.config-card-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 1rem;\n padding: 1rem;\n background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n border-bottom: 1px solid #e0e0e0;\n}\n\n.config-card-icon[_ngcontent-%COMP%] {\n width: 40px;\n height: 40px;\n border-radius: 8px;\n background: linear-gradient(135deg, #2196f3, #1976d2);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.config-card-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: white;\n font-size: 1.2rem;\n}\n\n.config-card-info[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0 0 0.25rem 0;\n font-size: 1rem;\n font-weight: 600;\n color: #495057;\n}\n\n.config-card-info[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 0.85rem;\n color: #6c757d;\n line-height: 1.4;\n}\n\n.config-card-content[_ngcontent-%COMP%] {\n padding: 1rem;\n}\n\n\n\n.config-field-input[_ngcontent-%COMP%] {\n width: 100%;\n min-width: 250px;\n}\n\n\n\n.config-card-content[_ngcontent-%COMP%] kendo-numerictextbox {\n width: 100% !important;\n}\n\n.config-card-content[_ngcontent-%COMP%] kendo-numerictextbox .k-numerictextbox {\n width: 100% !important;\n}\n\n.config-card-content[_ngcontent-%COMP%] kendo-numerictextbox .k-input {\n width: 100% !important;\n min-width: 200px !important;\n}\n\n.config-card-content[_ngcontent-%COMP%] mj-form-field {\n width: 100% !important;\n}\n\n.config-card-content[_ngcontent-%COMP%] mj-form-field kendo-numerictextbox {\n width: 100% !important;\n}\n\n.config-card-content[_ngcontent-%COMP%] mj-form-field kendo-numerictextbox .k-numerictextbox {\n width: 100% !important;\n}\n\n.config-card-content[_ngcontent-%COMP%] mj-form-field kendo-numerictextbox .k-input {\n width: 100% !important;\n min-width: 200px !important;\n}\n\n.config-field-display[_ngcontent-%COMP%] {\n color: #495057;\n font-size: 14px;\n font-weight: 500;\n padding: 8px 0;\n display: block;\n min-height: 20px;\n}\n\n\n\n.prompt-selector-container[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n width: 100%;\n}\n\n.prompt-display[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n padding: 8px 12px;\n background: #f8f9fa;\n border: 1px solid #dee2e6;\n border-radius: 6px;\n}\n\n.prompt-name[_ngcontent-%COMP%] {\n color: #495057;\n font-weight: 500;\n font-size: 14px;\n}\n\n.no-prompt[_ngcontent-%COMP%] {\n color: #6c757d;\n font-style: italic;\n font-size: 14px;\n}\n\n.prompt-actions[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-shrink: 0;\n}\n\n.prompt-select-btn[_ngcontent-%COMP%] {\n white-space: nowrap;\n}\n\n.prompt-clear-btn[_ngcontent-%COMP%] {\n min-width: 32px;\n}\n\n.config-card-hint[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 0.5rem;\n font-size: 0.8rem;\n color: #6c757d;\n line-height: 1.4;\n margin-top: 0.5rem;\n}\n\n.config-card-hint[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #17a2b8;\n margin-top: 0.1rem;\n flex-shrink: 0;\n}\n\n.config-card-hint[_ngcontent-%COMP%] code[_ngcontent-%COMP%] {\n background: #e9ecef;\n padding: 0.1rem 0.3rem;\n border-radius: 3px;\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 0.75rem;\n color: #495057;\n}\n\n\n\n\n@media (max-width: 768px) {\n .payload-field-container[_ngcontent-%COMP%], \n .payload-validation-container[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n gap: 1rem;\n }\n \n .payload-paths-grid[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n gap: 1rem;\n padding: 1rem;\n }\n \n .config-grid[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n gap: 1rem;\n padding: 1rem;\n }\n \n .payload-section-title[_ngcontent-%COMP%], \n .config-section-title[_ngcontent-%COMP%] {\n padding: 0.75rem 1rem;\n font-size: 1rem;\n }\n \n .payload-path-header[_ngcontent-%COMP%], \n .config-card-header[_ngcontent-%COMP%] {\n padding: 0.75rem;\n }\n \n .payload-path-content[_ngcontent-%COMP%], \n .config-card-content[_ngcontent-%COMP%] {\n padding: 0.75rem;\n }\n \n .payload-field-container[_ngcontent-%COMP%], \n .payload-validation-container[_ngcontent-%COMP%] {\n padding: 1rem;\n }\n}"] }); }
3823
+ } }, dependencies: [i6.NgIf, i7.ɵNgNoValidate, i7.NgControlStatus, i7.NgControlStatusGroup, i7.NgModel, i7.NgForm, i8.PanelBarComponent, i8.PanelBarItemComponent, i8.PanelBarContentDirective, i8.PanelBarItemTitleDirective, i3.DialogContainerDirective, i3.WindowContainerDirective, i9.TextBoxComponent, i10.DropDownListComponent, i11.ButtonComponent, i12.MJFormField, i13.FormToolbarComponent, i14.CodeEditorComponent, i6.DatePipe], styles: ["\n\n.record-form-container[_ngcontent-%COMP%] {\n height: 100%;\n display: flex;\n flex-direction: column;\n background: #f5f7fa;\n}\n\n.record-form[_ngcontent-%COMP%] {\n height: 100%;\n display: flex;\n flex-direction: column;\n}\n\n\n\n.agent-header[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);\n border-bottom: 1px solid #e0e6ed;\n padding: 12px 20px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.04);\n}\n\n.agent-header-content[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 20px;\n}\n\n.agent-overview[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 16px;\n flex: 1;\n min-width: 0;\n}\n\n.agent-icon-wrapper[_ngcontent-%COMP%] {\n width: 48px;\n height: 48px;\n background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: 0 4px 12px rgba(33, 150, 243, 0.2);\n flex-shrink: 0;\n}\n\n.agent-icon-wrapper[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: white;\n font-size: 24px;\n}\n\n.agent-icon-wrapper[_ngcontent-%COMP%] img.agent-logo[_ngcontent-%COMP%] {\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: 8px;\n}\n\n.agent-info[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.agent-name[_ngcontent-%COMP%] {\n font-size: 22px;\n font-weight: 600;\n color: #2c3e50;\n margin: 0 0 8px 0;\n line-height: 1.2;\n}\n\n.agent-name-input[_ngcontent-%COMP%] {\n font-size: 18px !important;\n font-weight: 500 !important;\n height: 36px !important;\n width: 100% !important;\n max-width: 400px !important;\n}\n\n.agent-meta[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 16px;\n flex-wrap: wrap;\n}\n\n.status-badge[_ngcontent-%COMP%] {\n padding: 6px 16px;\n border-radius: 20px;\n font-size: 13px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n display: inline-flex;\n align-items: center;\n gap: 6px;\n}\n\n.status-badge.active[_ngcontent-%COMP%] {\n background: #28a745;\n color: white;\n}\n\n.status-badge.pending[_ngcontent-%COMP%] {\n background: #ffc107;\n color: #212529;\n}\n\n.status-badge.disabled[_ngcontent-%COMP%] {\n background: #6c757d;\n color: white;\n}\n\n.execution-mode[_ngcontent-%COMP%], \n.parent-agent[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 13px;\n color: #6c757d;\n background: #f8f9fa;\n padding: 4px 10px;\n border-radius: 12px;\n}\n\n.execution-mode[_ngcontent-%COMP%] i[_ngcontent-%COMP%], \n.parent-agent[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 12px;\n opacity: 0.8;\n}\n\n\n\n.prompt-controls[_ngcontent-%COMP%] {\n flex: 1;\n margin-right: 16px;\n}\n\n.agent-meta-info[_ngcontent-%COMP%] {\n display: flex;\n gap: 24px;\n margin-top: 12px;\n flex-wrap: wrap;\n}\n\n.meta-item[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.meta-label[_ngcontent-%COMP%] {\n font-size: 12px;\n font-weight: 600;\n color: #6c757d;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.meta-value[_ngcontent-%COMP%] {\n font-size: 14px;\n color: #495057;\n font-weight: 500;\n}\n\n.agent-description[_ngcontent-%COMP%] {\n margin-top: 16px;\n color: #6c757d;\n line-height: 1.6;\n font-size: 15px;\n}\n\n.agent-description-input[_ngcontent-%COMP%] {\n width: 100%;\n max-width: 600px;\n min-height: 80px;\n resize: vertical;\n}\n\n\n\n.agent-actions[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n.action-buttons-row[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n flex-wrap: wrap;\n}\n\n.action-button[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 20px;\n border-radius: 8px;\n font-weight: 500;\n font-size: 14px;\n transition: all 0.2s ease;\n box-shadow: 0 2px 4px rgba(0,0,0,0.08);\n}\n\n.action-button[_ngcontent-%COMP%]:hover {\n transform: translateY(-1px);\n box-shadow: 0 4px 8px rgba(0,0,0,0.12);\n}\n\n.action-button.primary[_ngcontent-%COMP%] {\n background: #2196f3;\n color: white;\n}\n\n.action-button.primary[_ngcontent-%COMP%]:hover {\n background: #1976d2;\n}\n\n.action-button.secondary[_ngcontent-%COMP%] {\n background: #6c757d;\n color: white;\n}\n\n.action-button.secondary[_ngcontent-%COMP%]:hover {\n background: #5a6268;\n}\n\n.action-warnings[_ngcontent-%COMP%] {\n margin-top: 8px;\n font-size: 13px;\n color: #dc3545;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n\n\n.form-content[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n overflow-x: hidden;\n background: #f5f7fa;\n padding: 12px;\n}\n\n\n\n .k-panelbar {\n border: none;\n background: transparent;\n}\n\n .k-panelbar > .k-panelbar-item {\n border: none;\n border-radius: 12px;\n margin-bottom: 12px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.06);\n background: white;\n overflow: hidden;\n}\n\n .k-panelbar > .k-panelbar-item > .k-header {\n background: white;\n border: none;\n padding: 16px 20px;\n border-radius: 12px 12px 0 0;\n color: #2c3e50;\n font-weight: 600;\n font-size: 16px;\n transition: all 0.2s ease;\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n .k-panelbar > .k-panelbar-item > .k-header:hover {\n background: #f8f9fa;\n}\n\n .k-panelbar > .k-panelbar-item.k-panelbar-expanded > .k-header {\n background: #2196f3;\n color: white;\n border-radius: 12px 12px 0 0;\n}\n\n .k-panelbar > .k-panelbar-item > .k-header .k-panelbar-toggle {\n position: absolute;\n right: 24px;\n color: inherit;\n font-size: 14px;\n transition: transform 0.2s ease;\n}\n\n .k-panelbar > .k-panelbar-item.k-panelbar-expanded > .k-header .k-panelbar-toggle {\n transform: rotate(180deg);\n}\n\n .k-panelbar > .k-panelbar-item > .k-header .k-panelbar-toggle::before {\n content: '\\f107';\n font-family: 'Font Awesome 6 Free';\n font-weight: 900;\n}\n\n .k-panelbar > .k-panelbar-item > .k-content {\n padding: 0;\n border: none;\n background: white;\n border-radius: 0 0 12px 12px;\n}\n\n .k-panelbar .k-header .k-panelbar-icon {\n font-size: 18px;\n color: #2196f3;\n margin-right: 8px;\n}\n\n .k-panelbar .k-panelbar-expanded .k-header .k-panelbar-icon {\n color: white;\n}\n\n\n\n.panel-content[_ngcontent-%COMP%] {\n padding: 16px;\n background: white;\n}\n\n.section-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 20px;\n gap: 16px;\n flex-wrap: wrap;\n}\n\n.section-description[_ngcontent-%COMP%] {\n color: #6c757d;\n font-size: 14px;\n line-height: 1.6;\n margin-bottom: 16px;\n}\n\n.header-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n align-items: center;\n flex-shrink: 0;\n}\n\n.tab-section[_ngcontent-%COMP%] {\n background: white;\n border-radius: 12px;\n padding: 24px;\n margin-bottom: 24px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.04);\n border: 1px solid #e0e6ed;\n}\n\n.section-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 20px;\n padding-bottom: 16px;\n border-bottom: 2px solid #f0f4f8;\n}\n\n.section-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n margin: 0;\n color: #2c3e50;\n font-size: 18px;\n font-weight: 600;\n}\n\n.section-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #2196f3;\n font-size: 20px;\n}\n\n.section-description[_ngcontent-%COMP%] {\n color: #6c757d;\n font-size: 14px;\n line-height: 1.6;\n margin-top: 8px;\n}\n\n\n\n.form-fields-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 20px;\n margin-top: 20px;\n}\n\n.form-field-group[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.form-field-label[_ngcontent-%COMP%] {\n font-size: 13px;\n font-weight: 600;\n color: #495057;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n\n\n.sub-grid-container[_ngcontent-%COMP%] {\n height: 500px;\n border: 1px solid #e0e6ed;\n border-radius: 8px;\n overflow: hidden;\n display: none; \n\n}\n\n\n\n\n\n.loading-state[_ngcontent-%COMP%] {\n text-align: center;\n padding: 60px 20px;\n color: #64748b;\n}\n\n.loading-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 36px;\n color: #2196f3;\n margin-bottom: 16px;\n display: block;\n}\n\n.loading-state[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 14px;\n color: #94a3b8;\n}\n\n.empty-state[_ngcontent-%COMP%] {\n text-align: center;\n padding: 60px 20px;\n color: #6c757d;\n}\n\n.empty-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 48px;\n color: #dee2e6;\n margin-bottom: 16px;\n}\n\n.empty-state[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n color: #495057;\n font-weight: 600;\n margin-bottom: 8px;\n}\n\n.empty-state[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n font-size: 15px;\n line-height: 1.6;\n max-width: 400px;\n margin: 0 auto;\n}\n\n\n\n.loading-overlay[_ngcontent-%COMP%] {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(255, 255, 255, 0.9);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n}\n\n.loading-spinner[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 16px;\n}\n\n.spinner-icon[_ngcontent-%COMP%] {\n width: 48px;\n height: 48px;\n border: 4px solid #f3f3f3;\n border-top: 4px solid #2196f3;\n border-radius: 50%;\n animation: _ngcontent-%COMP%_spin 1s linear infinite;\n}\n\n@keyframes _ngcontent-%COMP%_spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}\n\n\n\n.quick-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 16px;\n margin-top: 20px;\n padding-top: 20px;\n border-top: 1px solid #e0e6ed;\n}\n\n.quick-action-card[_ngcontent-%COMP%] {\n flex: 1;\n padding: 16px;\n background: #f8f9fa;\n border-radius: 8px;\n border: 1px solid #e0e6ed;\n cursor: pointer;\n transition: all 0.2s ease;\n text-align: center;\n}\n\n.quick-action-card[_ngcontent-%COMP%]:hover {\n background: white;\n box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n transform: translateY(-2px);\n}\n\n.quick-action-icon[_ngcontent-%COMP%] {\n font-size: 32px;\n color: #2196f3;\n margin-bottom: 8px;\n}\n\n.quick-action-title[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 600;\n color: #495057;\n margin-bottom: 4px;\n}\n\n.quick-action-description[_ngcontent-%COMP%] {\n font-size: 12px;\n color: #6c757d;\n}\n\n\n\n.header-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n align-items: center;\n}\n\n\n\n.entity-list[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 12px;\n margin-top: 16px;\n}\n\n.entity-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 16px;\n padding: 16px;\n background: #f8f9fa;\n border: 1px solid #e0e6ed;\n border-radius: 10px;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.entity-item[_ngcontent-%COMP%]:hover {\n background: white;\n border-color: #2196f3;\n box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n transform: translateY(-1px);\n}\n\n.item-icon[_ngcontent-%COMP%] {\n width: 40px;\n height: 40px;\n background: linear-gradient(135deg, #e9ecef, #dee2e6);\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.prompt-item[_ngcontent-%COMP%] .item-icon[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, #20c997, #17a673);\n}\n\n.action-item[_ngcontent-%COMP%] .item-icon[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, #ffc107, #e0a800);\n}\n\n.sub-agent-item[_ngcontent-%COMP%] .item-icon[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, #2196f3, #1976d2);\n}\n\n.model-item[_ngcontent-%COMP%] .item-icon[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, #6f42c1, #563d7c);\n}\n\n.learning-item[_ngcontent-%COMP%] .item-icon[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, #e83e8c, #dc3545);\n}\n\n.note-item[_ngcontent-%COMP%] .item-icon[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, #fd7e14, #e55a00);\n}\n\n.item-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #6c757d;\n font-size: 18px;\n}\n\n.prompt-item[_ngcontent-%COMP%] .item-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%], \n.action-item[_ngcontent-%COMP%] .item-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%], \n.sub-agent-item[_ngcontent-%COMP%] .item-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%], \n.model-item[_ngcontent-%COMP%] .item-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%], \n.learning-item[_ngcontent-%COMP%] .item-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%], \n.note-item[_ngcontent-%COMP%] .item-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: white;\n}\n\n.item-icon[_ngcontent-%COMP%] img.sub-agent-logo[_ngcontent-%COMP%] {\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: 6px;\n}\n\n.item-content[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.item-title[_ngcontent-%COMP%] {\n font-size: 16px;\n font-weight: 600;\n color: #2c3e50;\n margin: 0 0 4px 0;\n line-height: 1.3;\n}\n\n.item-preview[_ngcontent-%COMP%] {\n color: #6c757d;\n font-size: 14px;\n line-height: 1.4;\n margin: 4px 0 8px 0;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.item-meta[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n align-items: center;\n flex-wrap: wrap;\n}\n\n.meta-tag[_ngcontent-%COMP%], \n.priority-tag[_ngcontent-%COMP%], \n.status-tag[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 4px;\n font-size: 12px;\n padding: 3px 8px;\n border-radius: 6px;\n font-weight: 500;\n}\n\n.meta-tag[_ngcontent-%COMP%] {\n background: #e9ecef;\n color: #495057;\n}\n\n.priority-tag[_ngcontent-%COMP%] {\n color: white;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.3px;\n}\n\n.status-tag[_ngcontent-%COMP%] {\n background: #e9ecef;\n color: #495057;\n}\n\n.status-tag.active[_ngcontent-%COMP%] {\n background: #d4edda;\n color: #28a745;\n}\n\n.status-tag.inactive[_ngcontent-%COMP%] {\n background: #f8d7da;\n color: #dc3545;\n}\n\n.item-actions[_ngcontent-%COMP%] {\n opacity: 0;\n transition: opacity 0.2s ease;\n color: #6c757d;\n font-size: 16px;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.entity-item[_ngcontent-%COMP%]:hover .item-actions[_ngcontent-%COMP%] {\n opacity: 1;\n}\n\n.entity-item[_ngcontent-%COMP%]:hover .item-actions[_ngcontent-%COMP%] > i[_ngcontent-%COMP%] {\n color: #2196f3;\n}\n\n.view-more-item[_ngcontent-%COMP%] {\n padding: 16px;\n background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n border: 2px dashed #dee2e6;\n border-radius: 10px;\n text-align: center;\n cursor: pointer;\n transition: all 0.2s ease;\n color: #6c757d;\n font-weight: 500;\n}\n\n.view-more-item[_ngcontent-%COMP%]:hover {\n background: linear-gradient(135deg, #e9ecef, #dee2e6);\n border-color: #2196f3;\n color: #2196f3;\n}\n\n\n\n.payload-config-section[_ngcontent-%COMP%], \n.payload-paths-section[_ngcontent-%COMP%], \n.payload-validation-section[_ngcontent-%COMP%] {\n margin-bottom: 32px;\n}\n\n.subsection-title[_ngcontent-%COMP%] {\n font-size: 16px;\n font-weight: 600;\n color: #2c3e50;\n margin: 0 0 16px 0;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.subsection-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #2196f3;\n}\n\n.subsection-divider[_ngcontent-%COMP%] {\n margin-top: 32px;\n margin-bottom: 16px;\n padding-top: 24px;\n border-top: 1px solid #e0e6ed;\n}\n\n.payload-config-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: 1fr 1fr 1fr;\n gap: 16px;\n margin-bottom: 24px;\n}\n\n.payload-field-group[_ngcontent-%COMP%] {\n margin-bottom: 20px;\n}\n\n.payload-field-label[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 14px;\n font-weight: 600;\n color: #495057;\n margin-bottom: 8px;\n}\n\n.payload-field-label[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #6c757d;\n font-size: 16px;\n}\n\n.field-description[_ngcontent-%COMP%] {\n font-size: 12px;\n font-weight: normal;\n color: #6c757d;\n margin-left: auto;\n}\n\n\n\n.payload-field-group[_ngcontent-%COMP%] mj-code-editor[_ngcontent-%COMP%] {\n border: 1px solid #dee2e6;\n border-radius: 8px;\n overflow: hidden;\n}\n\n.payload-field-group[_ngcontent-%COMP%] mj-code-editor[_ngcontent-%COMP%]:hover {\n border-color: #2196f3;\n}\n\n\n\n.payload-field-group[_ngcontent-%COMP%] mj-form-field[_ngcontent-%COMP%] textarea {\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 13px;\n line-height: 1.5;\n min-height: 120px;\n resize: vertical;\n}\n\n\n\n.execution-history-panel[_ngcontent-%COMP%] {\n max-height: 500px;\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n\n\n.timeline-list[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 16px;\n margin-top: 16px;\n}\n\n.timeline-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 16px;\n padding: 16px;\n background: #f8f9fa;\n border: 1px solid #e0e6ed;\n border-radius: 10px;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.timeline-item[_ngcontent-%COMP%]:hover {\n background: white;\n border-color: #2196f3;\n box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n}\n\n.timeline-marker[_ngcontent-%COMP%] {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n}\n\n.timeline-marker[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: white;\n font-size: 14px;\n}\n\n.timeline-content[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.timeline-title[_ngcontent-%COMP%] {\n font-size: 16px;\n font-weight: 600;\n color: #2c3e50;\n margin: 0 0 8px 0;\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n gap: 16px;\n}\n\n.timeline-date[_ngcontent-%COMP%] {\n font-size: 12px;\n color: #6c757d;\n background: #e9ecef;\n padding: 2px 8px;\n border-radius: 6px;\n white-space: nowrap;\n flex-shrink: 0;\n}\n\n.timeline-meta[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 8px;\n}\n\n.timeline-preview[_ngcontent-%COMP%] {\n color: #6c757d;\n font-size: 14px;\n line-height: 1.4;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n\n\n.cards-container[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n gap: 20px;\n margin-top: 16px;\n}\n\n.entity-card[_ngcontent-%COMP%] {\n background: white;\n border: 1px solid #e0e6ed;\n border-radius: 12px;\n padding: 20px;\n cursor: pointer;\n transition: all 0.3s ease;\n box-shadow: 0 2px 8px rgba(0,0,0,0.06);\n position: relative;\n overflow: hidden;\n}\n\n.entity-card[_ngcontent-%COMP%]:hover {\n transform: translateY(-4px);\n box-shadow: 0 8px 24px rgba(0,0,0,0.12);\n border-color: #2196f3;\n}\n\n.entity-card[_ngcontent-%COMP%]::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 4px;\n background: linear-gradient(90deg, #2196f3, #42a5f5);\n opacity: 0;\n transition: opacity 0.3s ease;\n}\n\n.entity-card[_ngcontent-%COMP%]:hover::before {\n opacity: 1;\n}\n\n.card-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n margin-bottom: 12px;\n}\n\n.card-icon[_ngcontent-%COMP%] {\n width: 40px;\n height: 40px;\n background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.sub-agent-card[_ngcontent-%COMP%] .card-icon[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, #2196f3, #1976d2);\n}\n\n.prompt-card[_ngcontent-%COMP%] .card-icon[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, #20c997, #17a673);\n}\n\n.action-card[_ngcontent-%COMP%] .card-icon[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, #ffc107, #e0a800);\n}\n\n.card-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 18px;\n color: #6c757d;\n}\n\n.sub-agent-card[_ngcontent-%COMP%] .card-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%], \n.prompt-card[_ngcontent-%COMP%] .card-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%], \n.action-card[_ngcontent-%COMP%] .card-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: white;\n}\n\n.card-title-section[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.card-title[_ngcontent-%COMP%] {\n font-size: 16px;\n font-weight: 600;\n color: #2c3e50;\n margin: 0 0 4px 0;\n line-height: 1.3;\n word-wrap: break-word;\n}\n\n.card-description[_ngcontent-%COMP%] {\n color: #6c757d;\n font-size: 14px;\n line-height: 1.5;\n margin: 8px 0;\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.card-meta[_ngcontent-%COMP%] {\n display: flex;\n gap: 16px;\n margin-top: 12px;\n flex-wrap: wrap;\n}\n\n.meta-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 12px;\n color: #6c757d;\n padding: 4px 8px;\n background: #f8f9fa;\n border-radius: 6px;\n}\n\n.meta-item[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 11px;\n opacity: 0.8;\n}\n\n.meta-item.active[_ngcontent-%COMP%] {\n color: #28a745;\n background: #d4edda;\n}\n\n.meta-item.inactive[_ngcontent-%COMP%] {\n color: #dc3545;\n background: #f8d7da;\n}\n\n.card-actions[_ngcontent-%COMP%] {\n opacity: 0;\n transition: opacity 0.3s ease;\n color: #6c757d;\n}\n\n.entity-card[_ngcontent-%COMP%]:hover .card-actions[_ngcontent-%COMP%] {\n opacity: 1;\n color: #2196f3;\n}\n\n\n\n.priority-badge[_ngcontent-%COMP%] {\n padding: 2px 8px;\n border-radius: 12px;\n font-size: 11px;\n font-weight: 600;\n color: white;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.type-badge[_ngcontent-%COMP%] {\n padding: 2px 8px;\n border-radius: 6px;\n font-size: 11px;\n font-weight: 500;\n background: #e9ecef;\n color: #495057;\n text-transform: uppercase;\n letter-spacing: 0.3px;\n}\n\n\n\n.view-all-card[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n border: 2px dashed #dee2e6;\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 120px;\n cursor: pointer;\n transition: all 0.3s ease;\n}\n\n.view-all-card[_ngcontent-%COMP%]:hover {\n background: linear-gradient(135deg, #e9ecef, #dee2e6);\n border-color: #2196f3;\n transform: translateY(-2px);\n}\n\n.view-all-content[_ngcontent-%COMP%] {\n text-align: center;\n color: #6c757d;\n font-weight: 500;\n}\n\n.view-all-content[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 24px;\n margin-bottom: 8px;\n display: block;\n}\n\n\n\n.timeline-container[_ngcontent-%COMP%] {\n position: relative;\n margin-top: 16px;\n}\n\n.timeline-item[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n margin-bottom: 24px;\n transition: all 0.3s ease;\n border-radius: 12px;\n padding: 16px;\n background: transparent;\n border: 1px solid transparent;\n}\n\n.timeline-item[_ngcontent-%COMP%]:hover {\n background: #f8f9fa;\n border-color: #e0e6ed;\n}\n\n.timeline-item.expanded[_ngcontent-%COMP%] {\n background: #f8f9fa;\n border-color: #2196f3;\n box-shadow: 0 4px 12px rgba(33, 150, 243, 0.1);\n}\n\n.timeline-item.view-all[_ngcontent-%COMP%] {\n cursor: pointer;\n background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n border: 2px dashed #dee2e6;\n}\n\n.timeline-item.view-all[_ngcontent-%COMP%]:hover {\n background: linear-gradient(135deg, #e9ecef, #dee2e6);\n border-color: #2196f3;\n}\n\n.timeline-item[_ngcontent-%COMP%] > div[_ngcontent-%COMP%]:first-child {\n display: flex;\n align-items: flex-start;\n}\n\n.timeline-marker[_ngcontent-%COMP%] {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 16px;\n flex-shrink: 0;\n position: relative;\n box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n}\n\n.timeline-marker[_ngcontent-%COMP%]::after {\n content: '';\n position: absolute;\n top: 50px;\n left: 50%;\n transform: translateX(-50%);\n width: 2px;\n height: 24px;\n background: #e0e6ed;\n}\n\n.timeline-item[_ngcontent-%COMP%]:last-child .timeline-marker[_ngcontent-%COMP%]::after {\n display: none;\n}\n\n.timeline-marker[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: white;\n font-size: 16px;\n}\n\n.timeline-marker.view-all-marker[_ngcontent-%COMP%] {\n background: #6c757d;\n}\n\n.timeline-content[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n display: flex;\n align-items: flex-start;\n}\n\n.timeline-header[_ngcontent-%COMP%] {\n flex: 1;\n cursor: pointer;\n}\n\n.timeline-header[_ngcontent-%COMP%] > div[_ngcontent-%COMP%]:first-child {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n margin-bottom: 8px;\n gap: 16px;\n}\n\n.expand-icon[_ngcontent-%COMP%] {\n transition: transform 0.3s ease;\n margin-right: 8px;\n color: #6c757d;\n}\n\n.expand-icon.expanded[_ngcontent-%COMP%] {\n transform: rotate(90deg);\n}\n\n.timeline-title[_ngcontent-%COMP%] {\n font-size: 16px;\n font-weight: 600;\n color: #2c3e50;\n margin: 0;\n line-height: 1.3;\n}\n\n.timeline-date[_ngcontent-%COMP%] {\n font-size: 12px;\n color: #6c757d;\n white-space: nowrap;\n background: #f8f9fa;\n padding: 4px 8px;\n border-radius: 6px;\n margin-left: auto;\n}\n\n.timeline-preview[_ngcontent-%COMP%] {\n font-size: 13px;\n color: #6c757d;\n line-height: 1.5;\n margin-top: 8px;\n padding: 8px 12px;\n background: #f8f9fa;\n border-radius: 6px;\n border: 1px solid #e0e6ed;\n}\n\n.timeline-status[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 8px;\n}\n\n.execution-time[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 4px;\n font-size: 12px;\n color: #6c757d;\n background: #f8f9fa;\n padding: 4px 8px;\n border-radius: 6px;\n}\n\n.timeline-description[_ngcontent-%COMP%] {\n color: #6c757d;\n font-size: 14px;\n line-height: 1.5;\n margin: 8px 0;\n}\n\n.timeline-error[_ngcontent-%COMP%] {\n color: #dc3545;\n font-size: 13px;\n background: #f8d7da;\n padding: 8px 12px;\n border-radius: 6px;\n margin-top: 8px;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.timeline-error[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n flex-shrink: 0;\n}\n\n\n\n.timeline-expanded-content[_ngcontent-%COMP%] {\n margin-top: 20px;\n padding-top: 20px;\n border-top: 1px solid #e0e6ed;\n animation: _ngcontent-%COMP%_fadeIn 0.3s ease;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n from {\n opacity: 0;\n transform: translateY(-10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.result-section[_ngcontent-%COMP%], \n.error-section[_ngcontent-%COMP%] {\n margin-bottom: 20px;\n}\n\n.result-section[_ngcontent-%COMP%] h5[_ngcontent-%COMP%], \n.error-section[_ngcontent-%COMP%] h5[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 600;\n color: #495057;\n margin-bottom: 8px;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.error-section[_ngcontent-%COMP%] h5[_ngcontent-%COMP%] {\n color: #dc3545;\n}\n\n.result-content[_ngcontent-%COMP%], \n.error-content[_ngcontent-%COMP%] {\n background: white;\n border: 1px solid #e0e6ed;\n border-radius: 8px;\n padding: 12px 16px;\n font-size: 14px;\n line-height: 1.6;\n color: #495057;\n white-space: pre-wrap;\n word-break: break-word;\n max-height: 200px;\n overflow-y: auto;\n}\n\n\n\n.result-section[_ngcontent-%COMP%] mj-code-editor[_ngcontent-%COMP%] {\n border: 1px solid #e0e6ed;\n border-radius: 8px;\n overflow: hidden;\n}\n\n.error-content[_ngcontent-%COMP%] {\n background: #f8d7da;\n border-color: #f5c6cb;\n color: #721c24;\n}\n\n.execution-details[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 16px;\n margin-bottom: 20px;\n}\n\n.detail-row[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n}\n\n.detail-label[_ngcontent-%COMP%] {\n font-size: 12px;\n font-weight: 600;\n color: #6c757d;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n min-width: 80px;\n}\n\n.detail-value[_ngcontent-%COMP%] {\n font-size: 14px;\n color: #495057;\n word-break: break-all;\n}\n\n.timeline-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n justify-content: flex-end;\n}\n\n.btn-primary[_ngcontent-%COMP%] {\n padding: 8px 16px;\n background: #2196f3;\n color: white;\n border: none;\n border-radius: 8px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n transition: all 0.2s ease;\n}\n\n.btn-primary[_ngcontent-%COMP%]:hover {\n background: #1976d2;\n transform: translateY(-1px);\n box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);\n}\n\n.btn-primary[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 12px;\n}\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n text-align: center;\n padding: 60px 20px;\n color: #6c757d;\n background: #f8f9fa;\n border-radius: 12px;\n border: 2px dashed #dee2e6;\n margin-top: 16px;\n}\n\n.empty-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 48px;\n color: #dee2e6;\n margin-bottom: 16px;\n}\n\n.empty-state[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n color: #495057;\n font-weight: 600;\n margin-bottom: 8px;\n font-size: 18px;\n}\n\n.empty-state[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n font-size: 15px;\n line-height: 1.6;\n max-width: 400px;\n margin: 0 auto 20px auto;\n}\n\n\n\n@media (max-width: 768px) {\n \n\n .agent-header[_ngcontent-%COMP%] {\n padding: 16px;\n }\n \n .agent-header-content[_ngcontent-%COMP%] {\n flex-direction: column;\n gap: 16px;\n }\n \n .agent-overview[_ngcontent-%COMP%] {\n flex-direction: column;\n align-items: flex-start;\n gap: 12px;\n }\n \n .agent-meta[_ngcontent-%COMP%] {\n flex-direction: column;\n align-items: flex-start;\n gap: 8px;\n }\n \n .agent-actions[_ngcontent-%COMP%] {\n width: 100%;\n align-self: stretch;\n }\n \n .action-button[_ngcontent-%COMP%] {\n flex: 1;\n justify-content: center;\n }\n \n \n\n .form-content[_ngcontent-%COMP%] {\n padding: 12px;\n }\n \n .k-panelbar > .k-panelbar-item > .k-header {\n padding: 16px 20px;\n font-size: 15px;\n }\n \n .panel-content[_ngcontent-%COMP%] {\n padding: 20px 16px;\n }\n \n .section-header[_ngcontent-%COMP%] {\n flex-direction: column;\n align-items: flex-start;\n gap: 12px;\n }\n \n .header-actions[_ngcontent-%COMP%] {\n flex-wrap: wrap;\n align-self: stretch;\n }\n \n \n\n .entity-item[_ngcontent-%COMP%] {\n padding: 12px;\n gap: 12px;\n }\n \n .item-icon[_ngcontent-%COMP%] {\n width: 36px;\n height: 36px;\n }\n \n .item-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 16px;\n }\n \n .item-title[_ngcontent-%COMP%] {\n font-size: 15px;\n }\n \n .item-preview[_ngcontent-%COMP%] {\n font-size: 13px;\n }\n \n .item-meta[_ngcontent-%COMP%] {\n gap: 8px;\n }\n \n \n\n .timeline-item[_ngcontent-%COMP%] {\n padding: 12px;\n gap: 12px;\n }\n \n .timeline-marker[_ngcontent-%COMP%] {\n width: 28px;\n height: 28px;\n }\n \n .timeline-marker[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 12px;\n }\n \n .timeline-title[_ngcontent-%COMP%] {\n flex-direction: column;\n align-items: flex-start;\n gap: 8px;\n }\n \n .timeline-date[_ngcontent-%COMP%] {\n align-self: flex-start;\n }\n \n \n\n .form-fields-grid[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n gap: 16px;\n }\n \n \n\n .cards-container[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n }\n}\n\n\n\n.execution-history-panel[_ngcontent-%COMP%] {\n max-height: 500px;\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n\n\n.execution-history-panel[_ngcontent-%COMP%]::-webkit-scrollbar {\n width: 8px;\n}\n\n.execution-history-panel[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n background: #f1f1f1;\n border-radius: 4px;\n}\n\n.execution-history-panel[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n background: #c1c1c1;\n border-radius: 4px;\n}\n\n.execution-history-panel[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n background: #a0a0a0;\n}\n\n\n\n.execution-history-list[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 12px;\n margin-top: 16px;\n}\n\n.execution-card[_ngcontent-%COMP%] {\n background: white;\n border: 1px solid #e0e6ed;\n border-radius: 12px;\n overflow: hidden;\n transition: all 0.2s ease;\n cursor: pointer;\n}\n\n.execution-card[_ngcontent-%COMP%]:hover {\n border-color: #2196f3;\n box-shadow: 0 4px 12px rgba(33, 150, 243, 0.1);\n transform: translateY(-1px);\n}\n\n.execution-card.expanded[_ngcontent-%COMP%] {\n border-color: #2196f3;\n box-shadow: 0 6px 20px rgba(33, 150, 243, 0.15);\n}\n\n.execution-header[_ngcontent-%COMP%] {\n padding: 16px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n}\n\n.execution-left-section[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 12px;\n flex: 1;\n min-width: 0;\n}\n\n.execution-status[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n flex-shrink: 0;\n}\n\n.status-indicator[_ngcontent-%COMP%] {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n}\n\n.status-indicator[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: white;\n font-size: 14px;\n}\n\n.execution-info[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.execution-title[_ngcontent-%COMP%] {\n font-size: 16px;\n font-weight: 600;\n color: #2c3e50;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.execution-date[_ngcontent-%COMP%] {\n font-size: 12px;\n color: #6c757d;\n}\n\n.execution-metrics[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 16px;\n flex-wrap: wrap;\n margin-left: 44px; \n\n}\n\n.metric-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 12px;\n background: #f8f9fa;\n padding: 6px 10px;\n border-radius: 6px;\n color: #495057;\n white-space: nowrap;\n}\n\n.metric-item[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #6c757d;\n font-size: 12px;\n}\n\n.metric-label[_ngcontent-%COMP%] {\n font-weight: 500;\n}\n\n.metric-value[_ngcontent-%COMP%] {\n font-weight: 600;\n color: #2c3e50;\n}\n\n.execution-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n flex-shrink: 0;\n}\n\n.action-btn[_ngcontent-%COMP%] {\n width: 32px;\n height: 32px;\n border: none;\n background: #f8f9fa;\n border-radius: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.2s ease;\n color: #6c757d;\n}\n\n.action-btn[_ngcontent-%COMP%]:hover {\n background: #2196f3;\n color: white;\n transform: translateY(-1px);\n}\n\n.action-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 12px;\n}\n\n.expand-icon[_ngcontent-%COMP%] {\n transition: transform 0.2s ease;\n color: #6c757d;\n margin-right: 4px;\n}\n\n.expand-icon.expanded[_ngcontent-%COMP%] {\n transform: rotate(90deg);\n}\n\n\n\n.execution-expanded-content[_ngcontent-%COMP%] {\n padding: 16px;\n border-top: 1px solid #f0f4f8;\n background: #fafbfc;\n animation: _ngcontent-%COMP%_slideDown 0.2s ease;\n}\n\n@keyframes _ngcontent-%COMP%_slideDown {\n from {\n opacity: 0;\n max-height: 0;\n padding-top: 0;\n padding-bottom: 0;\n }\n to {\n opacity: 1;\n max-height: 500px;\n padding-top: 16px;\n padding-bottom: 16px;\n }\n}\n\n.detailed-metrics[_ngcontent-%COMP%] {\n margin-bottom: 20px;\n}\n\n.metrics-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 12px;\n}\n\n.metric-detail[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px;\n background: white;\n border: 1px solid #e0e6ed;\n border-radius: 8px;\n}\n\n.metric-detail[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #2196f3;\n font-size: 16px;\n width: 20px;\n text-align: center;\n}\n\n.metric-info[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 2px;\n flex: 1;\n}\n\n.metric-title[_ngcontent-%COMP%] {\n font-size: 11px;\n font-weight: 600;\n color: #6c757d;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.metric-data[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 600;\n color: #2c3e50;\n}\n\n.result-section[_ngcontent-%COMP%] {\n margin-top: 16px;\n}\n\n.result-section[_ngcontent-%COMP%] h5[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 600;\n color: #495057;\n margin-bottom: 8px;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.error-section[_ngcontent-%COMP%] h5[_ngcontent-%COMP%] {\n color: #dc3545;\n}\n\n.error-content[_ngcontent-%COMP%] {\n background: #f8d7da;\n border: 1px solid #f5c6cb;\n border-radius: 8px;\n padding: 12px 16px;\n font-size: 14px;\n line-height: 1.6;\n color: #721c24;\n white-space: pre-wrap;\n word-break: break-word;\n max-height: 150px;\n overflow-y: auto;\n}\n\n\n\n@media (max-width: 768px) {\n .execution-header[_ngcontent-%COMP%] {\n flex-direction: column;\n align-items: flex-start;\n gap: 12px;\n }\n \n .execution-left-section[_ngcontent-%COMP%] {\n width: 100%;\n }\n \n .execution-metrics[_ngcontent-%COMP%] {\n margin-left: 0; \n\n flex-direction: column;\n align-items: flex-start;\n gap: 8px;\n width: 100%;\n }\n \n .metric-item[_ngcontent-%COMP%] {\n font-size: 11px;\n padding: 4px 8px;\n }\n \n .metrics-grid[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n }\n}\n\n\n\n.payload-section[_ngcontent-%COMP%] {\n margin-bottom: 2rem;\n background: white;\n border-radius: 12px;\n border: 1px solid #e0e0e0;\n overflow: hidden;\n}\n\n.payload-section-title[_ngcontent-%COMP%] {\n margin: 0;\n padding: 1rem 1.5rem;\n background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n border-bottom: 1px solid #e0e0e0;\n color: #495057;\n font-size: 1.1rem;\n font-weight: 600;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n.payload-section-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #2196f3;\n font-size: 1.2rem;\n}\n\n\n\n.payload-field-container[_ngcontent-%COMP%] {\n padding: 1.5rem;\n display: grid;\n grid-template-columns: 1fr 2fr;\n gap: 2rem;\n align-items: start;\n}\n\n.payload-field-info[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.payload-field-label[_ngcontent-%COMP%] {\n font-weight: 600;\n color: #495057;\n font-size: 0.95rem;\n}\n\n.payload-field-description[_ngcontent-%COMP%] {\n color: #6c757d;\n font-size: 0.9rem;\n line-height: 1.5;\n margin: 0;\n}\n\n.payload-field-input[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.payload-field-example[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 0.85rem;\n color: #6c757d;\n background: #f8f9fa;\n padding: 0.5rem 0.75rem;\n border-radius: 6px;\n border: 1px solid #e9ecef;\n}\n\n.payload-field-example[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #ffc107;\n font-size: 0.9rem;\n}\n\n.payload-field-example[_ngcontent-%COMP%] code[_ngcontent-%COMP%] {\n background: #e9ecef;\n padding: 0.2rem 0.4rem;\n border-radius: 4px;\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 0.8rem;\n color: #495057;\n}\n\n\n\n.payload-paths-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n gap: 1.5rem;\n padding: 1.5rem;\n}\n\n.payload-path-card[_ngcontent-%COMP%] {\n background: white;\n border: 1px solid #e0e0e0;\n border-radius: 8px;\n overflow: hidden;\n transition: all 0.2s ease;\n}\n\n.payload-path-card[_ngcontent-%COMP%]:hover {\n border-color: #2196f3;\n box-shadow: 0 4px 12px rgba(33, 150, 243, 0.15);\n}\n\n.payload-path-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 1rem;\n padding: 1rem;\n background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n border-bottom: 1px solid #e0e0e0;\n}\n\n.payload-path-icon[_ngcontent-%COMP%] {\n width: 40px;\n height: 40px;\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.payload-path-icon.downstream[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, #28a745, #20c997);\n}\n\n.payload-path-icon.upstream[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, #007bff, #6610f2);\n}\n\n.payload-path-icon.self-read[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, #17a2b8, #20c997);\n}\n\n.payload-path-icon.self-write[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, #ffc107, #fd7e14);\n}\n\n.payload-path-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: white;\n font-size: 1.2rem;\n}\n\n.payload-path-info[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0 0 0.25rem 0;\n font-size: 1rem;\n font-weight: 600;\n color: #495057;\n}\n\n.payload-path-info[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 0.85rem;\n color: #6c757d;\n line-height: 1.4;\n}\n\n.payload-path-content[_ngcontent-%COMP%] {\n padding: 1rem;\n}\n\n.json-editor-container[_ngcontent-%COMP%] {\n border: 1px solid #dee2e6;\n border-radius: 6px;\n overflow: hidden;\n margin-bottom: 0.75rem;\n}\n\n.json-editor-container[_ngcontent-%COMP%]:hover {\n border-color: #2196f3;\n}\n\n.payload-path-hint[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 0.5rem;\n font-size: 0.8rem;\n color: #6c757d;\n line-height: 1.4;\n}\n\n.payload-path-hint[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #17a2b8;\n margin-top: 0.1rem;\n flex-shrink: 0;\n}\n\n.payload-path-hint[_ngcontent-%COMP%] code[_ngcontent-%COMP%] {\n background: #e9ecef;\n padding: 0.1rem 0.3rem;\n border-radius: 3px;\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 0.75rem;\n color: #495057;\n}\n\n\n\n.payload-validation-container[_ngcontent-%COMP%] {\n padding: 1.5rem;\n display: grid;\n grid-template-columns: 1fr 2fr;\n gap: 2rem;\n align-items: start;\n}\n\n.payload-validation-settings[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n}\n\n.validation-field-group[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.validation-field-label[_ngcontent-%COMP%] {\n font-weight: 600;\n color: #495057;\n font-size: 0.95rem;\n}\n\n.validation-field-description[_ngcontent-%COMP%] {\n color: #6c757d;\n font-size: 0.9rem;\n line-height: 1.4;\n margin: 0 0 0.5rem 0;\n}\n\n.payload-validation-schema[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n}\n\n.validation-schema-label[_ngcontent-%COMP%] {\n font-weight: 600;\n color: #495057;\n font-size: 0.95rem;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n.validation-schema-label[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #2196f3;\n}\n\n.validation-schema-description[_ngcontent-%COMP%] {\n color: #6c757d;\n font-size: 0.9rem;\n line-height: 1.4;\n margin: 0;\n}\n\n.validation-schema-editor[_ngcontent-%COMP%] {\n border: 1px solid #dee2e6;\n border-radius: 6px;\n overflow: hidden;\n}\n\n.validation-schema-editor[_ngcontent-%COMP%]:hover {\n border-color: #2196f3;\n}\n\n\n\n.config-section[_ngcontent-%COMP%] {\n margin-bottom: 2rem;\n background: white;\n border-radius: 12px;\n border: 1px solid #e0e0e0;\n overflow: hidden;\n}\n\n.config-section-title[_ngcontent-%COMP%] {\n margin: 0;\n padding: 1rem 1.5rem;\n background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n border-bottom: 1px solid #e0e0e0;\n color: #495057;\n font-size: 1.1rem;\n font-weight: 600;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n.config-section-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #2196f3;\n font-size: 1.2rem;\n}\n\n.config-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));\n gap: 1.5rem;\n padding: 1.5rem;\n width: 100%;\n}\n\n.config-card[_ngcontent-%COMP%] {\n background: white;\n border: 1px solid #e0e0e0;\n border-radius: 8px;\n overflow: hidden;\n transition: all 0.2s ease;\n}\n\n.config-card[_ngcontent-%COMP%]:hover {\n border-color: #2196f3;\n box-shadow: 0 4px 12px rgba(33, 150, 243, 0.15);\n}\n\n.config-card.full-width[_ngcontent-%COMP%] {\n grid-column: 1 / -1;\n}\n\n.config-card-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 1rem;\n padding: 1rem;\n background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n border-bottom: 1px solid #e0e0e0;\n}\n\n.config-card-icon[_ngcontent-%COMP%] {\n width: 40px;\n height: 40px;\n border-radius: 8px;\n background: linear-gradient(135deg, #2196f3, #1976d2);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.config-card-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: white;\n font-size: 1.2rem;\n}\n\n.config-card-info[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0 0 0.25rem 0;\n font-size: 1rem;\n font-weight: 600;\n color: #495057;\n}\n\n.config-card-info[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 0.85rem;\n color: #6c757d;\n line-height: 1.4;\n}\n\n.config-card-content[_ngcontent-%COMP%] {\n padding: 1rem;\n}\n\n\n\n.config-field-input[_ngcontent-%COMP%] {\n width: 100%;\n min-width: 250px;\n}\n\n\n\n.config-card-content[_ngcontent-%COMP%] kendo-numerictextbox {\n width: 100% !important;\n}\n\n.config-card-content[_ngcontent-%COMP%] kendo-numerictextbox .k-numerictextbox {\n width: 100% !important;\n}\n\n.config-card-content[_ngcontent-%COMP%] kendo-numerictextbox .k-input {\n width: 100% !important;\n min-width: 200px !important;\n}\n\n.config-card-content[_ngcontent-%COMP%] mj-form-field {\n width: 100% !important;\n}\n\n.config-card-content[_ngcontent-%COMP%] mj-form-field kendo-numerictextbox {\n width: 100% !important;\n}\n\n.config-card-content[_ngcontent-%COMP%] mj-form-field kendo-numerictextbox .k-numerictextbox {\n width: 100% !important;\n}\n\n.config-card-content[_ngcontent-%COMP%] mj-form-field kendo-numerictextbox .k-input {\n width: 100% !important;\n min-width: 200px !important;\n}\n\n.config-field-display[_ngcontent-%COMP%] {\n color: #495057;\n font-size: 14px;\n font-weight: 500;\n padding: 8px 0;\n display: block;\n min-height: 20px;\n}\n\n\n\n.prompt-selector-container[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n width: 100%;\n}\n\n.prompt-display[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n padding: 8px 12px;\n background: #f8f9fa;\n border: 1px solid #dee2e6;\n border-radius: 6px;\n}\n\n.prompt-name[_ngcontent-%COMP%] {\n color: #495057;\n font-weight: 500;\n font-size: 14px;\n}\n\n.no-prompt[_ngcontent-%COMP%] {\n color: #6c757d;\n font-style: italic;\n font-size: 14px;\n}\n\n.prompt-actions[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-shrink: 0;\n}\n\n.prompt-select-btn[_ngcontent-%COMP%] {\n white-space: nowrap;\n}\n\n.prompt-clear-btn[_ngcontent-%COMP%] {\n min-width: 32px;\n}\n\n.config-card-hint[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 0.5rem;\n font-size: 0.8rem;\n color: #6c757d;\n line-height: 1.4;\n margin-top: 0.5rem;\n}\n\n.config-card-hint[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #17a2b8;\n margin-top: 0.1rem;\n flex-shrink: 0;\n}\n\n.config-card-hint[_ngcontent-%COMP%] code[_ngcontent-%COMP%] {\n background: #e9ecef;\n padding: 0.1rem 0.3rem;\n border-radius: 3px;\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 0.75rem;\n color: #495057;\n}\n\n\n\n\n@media (max-width: 768px) {\n .payload-field-container[_ngcontent-%COMP%], \n .payload-validation-container[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n gap: 1rem;\n }\n \n .payload-paths-grid[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n gap: 1rem;\n padding: 1rem;\n }\n \n .config-grid[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n gap: 1rem;\n padding: 1rem;\n }\n \n .payload-section-title[_ngcontent-%COMP%], \n .config-section-title[_ngcontent-%COMP%] {\n padding: 0.75rem 1rem;\n font-size: 1rem;\n }\n \n .payload-path-header[_ngcontent-%COMP%], \n .config-card-header[_ngcontent-%COMP%] {\n padding: 0.75rem;\n }\n \n .payload-path-content[_ngcontent-%COMP%], \n .config-card-content[_ngcontent-%COMP%] {\n padding: 0.75rem;\n }\n \n .payload-field-container[_ngcontent-%COMP%], \n .payload-validation-container[_ngcontent-%COMP%] {\n padding: 1rem;\n }\n}"] }); }
3707
3824
  };
3708
3825
  AIAgentFormComponentExtended = __decorate([
3709
3826
  RegisterClass(BaseFormComponent, 'AI Agents')
@@ -3711,7 +3828,7 @@ AIAgentFormComponentExtended = __decorate([
3711
3828
  export { AIAgentFormComponentExtended };
3712
3829
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AIAgentFormComponentExtended, [{
3713
3830
  type: Component,
3714
- args: [{ selector: 'mj-ai-agent-form', template: "<div class=\"record-form-container\">\n <!-- Dialog container for Kendo dialogs -->\n <div kendoDialogContainer></div>\n <!-- Window container for Kendo windows -->\n <div kendoWindowContainer></div>\n <form *ngIf=\"record\" class=\"record-form\" #form=\"ngForm\">\n <mj-form-toolbar [form]=\"this\"></mj-form-toolbar>\n\n <!-- Compact Header with Agent Overview -->\n <div class=\"agent-header\">\n <div class=\"agent-header-content\">\n <div class=\"agent-overview\">\n <div class=\"agent-icon-wrapper\">\n @if (hasLogoURL()) {\n <img [src]=\"record.LogoURL\" [alt]=\"record.Name + ' logo'\" class=\"agent-logo\">\n } @else {\n <i [class]=\"getAgentIcon()\"></i>\n }\n </div>\n <div class=\"agent-info\">\n @if (EditMode) {\n <kendo-textbox [(ngModel)]=\"record.Name\" \n name=\"agentName\"\n placeholder=\"Enter agent name...\"\n class=\"agent-name-input\">\n </kendo-textbox>\n } @else {\n <h1 class=\"agent-name\">{{ record.Name || 'Untitled AI Agent' }}</h1>\n }\n <div class=\"agent-meta\">\n @if (record.Status) {\n <span class=\"status-badge\" [style.background-color]=\"getStatusBadgeColor()\">\n <i class=\"fa-solid fa-circle\"></i>\n {{ record.Status }}\n </span>\n }\n @if (record.Type) {\n <span class=\"execution-mode\">\n Agent Type: {{ record.Type }}\n </span>\n }\n @if (record.Parent) {\n <span class=\"parent-agent\">\n <i class=\"fa-solid fa-sitemap\"></i>\n Child of {{ record.Parent }}\n </span>\n }\n </div>\n </div>\n </div>\n \n <!-- Action Buttons -->\n <div class=\"agent-actions\">\n @if (record.ID) {\n <button kendoButton themeColor=\"primary\" size=\"large\"\n (click)=\"openTestHarness()\"\n [disabled]=\"record.Status !== 'Active'\"\n title=\"Run this AI agent\">\n <i class=\"fa-solid fa-play\"></i>\n Run\n </button>\n }\n <button kendoButton fillMode=\"outline\" size=\"small\" (click)=\"refreshRelatedData()\" title=\"Refresh all data\">\n <i class=\"fa-solid fa-refresh\"></i>\n </button>\n </div>\n </div>\n </div>\n\n <!-- Single Pane Layout with Expander Panels -->\n <div class=\"form-content\">\n <kendo-panelbar [keepItemContent]=\"true\">\n <!-- Custom Agent Type Section (if defined) -->\n @if (record.ID && agentType && agentType.UIFormSectionKey) {\n <kendo-panelbar-item \n [expanded]=\"agentType.UIFormSectionExpandedByDefault\" \n (stateChange)=\"onCustomSectionStateChange($event)\">\n <ng-template kendoPanelBarItemTitle>\n <i class=\"fa-solid fa-puzzle-piece\"></i> {{ agentType.Name }} Configuration\n </ng-template>\n <ng-template kendoPanelBarContent>\n <div class=\"panel-content custom-agent-type-section\" [style.display]=\"'block'\">\n <ng-container #customSectionContainer></ng-container>\n </div>\n </ng-template>\n </kendo-panelbar-item>\n }\n\n <!-- Requests & History -->\n @if (record.ID) {\n <kendo-panelbar-item [expanded]=\"false\">\n <ng-template kendoPanelBarItemTitle>\n <i class=\"fa-solid fa-history\"></i> Execution History{{ executionHistoryCount > 0 ? ' (' + executionHistoryCount + ')' : '' }}\n </ng-template>\n <ng-template kendoPanelBarContent>\n <div class=\"panel-content execution-history-panel\">\n \n @if (executionHistoryCount === 0) {\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-history\"></i>\n <h4>No Execution History</h4>\n <p>This agent hasn't been executed yet. Use the Test Agent button to run the agent and see execution history here.</p>\n </div>\n } @else {\n <div class=\"execution-history-list\">\n @for (execution of recentExecutions; track execution.ID) {\n <div class=\"execution-card\" [class.expanded]=\"expandedExecutions[execution.ID]\">\n <div class=\"execution-header\" (click)=\"toggleExecutionExpanded(execution.ID)\">\n <div class=\"execution-left-section\">\n <div class=\"execution-status\">\n <div class=\"status-indicator\" [style.background-color]=\"getExecutionStatusColor(execution.Status)\">\n <i [class]=\"getExecutionStatusIcon(execution.Status)\"></i>\n </div>\n <div class=\"execution-info\">\n <div class=\"execution-title\">\n <i class=\"fa-solid fa-chevron-right expand-icon\" [class.expanded]=\"expandedExecutions[execution.ID]\"></i>\n Execution #{{ execution.ID.substring(0, 8) }}\n </div>\n <div class=\"execution-date\">{{ execution.__mj_CreatedAt | date:'MMM d, h:mm a' }}</div>\n </div>\n </div>\n \n <div class=\"execution-metrics\">\n @if (execution.Configuration) {\n <div class=\"metric-item\">\n <i class=\"fa-solid fa-cog\"></i>\n <span class=\"metric-label\">Config:</span>\n <span class=\"metric-value\">{{ execution.Configuration }}</span>\n </div>\n }\n \n @if (execution.CompletedAt) {\n <div class=\"metric-item\">\n <i class=\"fa-solid fa-stopwatch\"></i>\n <span class=\"metric-label\">Duration:</span>\n <span class=\"metric-value\">{{ formatExecutionTimeFromDates(execution.StartedAt, execution.CompletedAt) }}</span>\n </div>\n } @else if (execution.Status === 'Running') {\n <div class=\"metric-item\">\n <i class=\"fa-solid fa-clock\"></i>\n <span class=\"metric-label\">Running:</span>\n <span class=\"metric-value\">{{ getRunningTime(execution.StartedAt) }}</span>\n </div>\n }\n \n @if (execution.TotalTokensUsedRollup || execution.TotalTokensUsed) {\n <div class=\"metric-item\">\n <i class=\"fa-solid fa-microchip\"></i>\n <span class=\"metric-label\">Tokens:</span>\n <span class=\"metric-value\">{{ formatTokenCount(execution.TotalTokensUsedRollup || execution.TotalTokensUsed) }}</span>\n </div>\n }\n \n @if (execution.TotalCostRollup || execution.TotalCost) {\n <div class=\"metric-item\">\n <i class=\"fa-solid fa-dollar-sign\"></i>\n <span class=\"metric-label\">Cost:</span>\n <span class=\"metric-value\">${{ formatCost(execution.TotalCostRollup || execution.TotalCost) }}</span>\n </div>\n }\n </div>\n </div>\n \n <div class=\"execution-actions\">\n <button class=\"action-btn\" (click)=\"openExecutionRecord(execution.ID); $event.stopPropagation()\" title=\"View details\">\n <i class=\"fa-solid fa-external-link-alt\"></i>\n </button>\n </div>\n </div>\n @if (expandedExecutions[execution.ID]) {\n <div class=\"execution-expanded-content\">\n <!-- Detailed Metrics -->\n <div class=\"detailed-metrics\">\n <div class=\"metrics-grid\">\n <div class=\"metric-detail\">\n <i class=\"fa-solid fa-clock\"></i>\n <div class=\"metric-info\">\n <span class=\"metric-title\">Started</span>\n <span class=\"metric-data\">{{ execution.StartedAt | date:'medium' }}</span>\n </div>\n </div>\n \n @if (execution.CompletedAt) {\n <div class=\"metric-detail\">\n <i class=\"fa-solid fa-check-circle\"></i>\n <div class=\"metric-info\">\n <span class=\"metric-title\">Completed</span>\n <span class=\"metric-data\">{{ execution.CompletedAt | date:'medium' }}</span>\n </div>\n </div>\n }\n \n @if (execution.TotalTokensUsed) {\n <div class=\"metric-detail\">\n <i class=\"fa-solid fa-microchip\"></i>\n <div class=\"metric-info\">\n <span class=\"metric-title\">Direct Tokens</span>\n <span class=\"metric-data\">{{ formatTokenCount(execution.TotalTokensUsed) }}</span>\n </div>\n </div>\n }\n \n @if (execution.TotalTokensUsedRollup && execution.TotalTokensUsedRollup !== execution.TotalTokensUsed) {\n <div class=\"metric-detail\">\n <i class=\"fa-solid fa-sitemap\"></i>\n <div class=\"metric-info\">\n <span class=\"metric-title\">Total + Sub-agents</span>\n <span class=\"metric-data\">{{ formatTokenCount(execution.TotalTokensUsedRollup) }}</span>\n </div>\n </div>\n }\n \n @if (execution.TotalCost) {\n <div class=\"metric-detail\">\n <i class=\"fa-solid fa-dollar-sign\"></i>\n <div class=\"metric-info\">\n <span class=\"metric-title\">Direct Cost</span>\n <span class=\"metric-data\">${{ formatCost(execution.TotalCost) }}</span>\n </div>\n </div>\n }\n \n @if (execution.TotalCostRollup && execution.TotalCostRollup !== execution.TotalCost) {\n <div class=\"metric-detail\">\n <i class=\"fa-solid fa-calculator\"></i>\n <div class=\"metric-info\">\n <span class=\"metric-title\">Total + Sub-agents</span>\n <span class=\"metric-data\">${{ formatCost(execution.TotalCostRollup) }}</span>\n </div>\n </div>\n }\n \n @if (execution.ConversationID) {\n <div class=\"metric-detail\">\n <i class=\"fa-solid fa-comments\"></i>\n <div class=\"metric-info\">\n <span class=\"metric-title\">Conversation</span>\n <span class=\"metric-data\">{{ execution.ConversationID.substring(0, 8) }}...</span>\n </div>\n </div>\n }\n </div>\n </div>\n \n @if (execution.Result) {\n <div class=\"result-section\">\n <h5><i class=\"fa-solid fa-file-text\"></i> Result</h5>\n <mj-code-editor \n [value]=\"getExecutionResultPreview(execution, false)\"\n [readonly]=\"true\"\n language=\"json\"\n [lineWrapping]=\"true\"\n style=\"max-height: 200px; width: 100%;\">\n </mj-code-editor>\n </div>\n }\n \n @if (execution.ErrorMessage) {\n <div class=\"error-section\">\n <h5><i class=\"fa-solid fa-exclamation-triangle\"></i> Error</h5>\n <div class=\"error-content\">{{ execution.ErrorMessage }}</div>\n </div>\n }\n </div>\n }\n </div>\n }\n @if (executionHistoryCount > recentExecutions.length) {\n <div class=\"view-more-item\" (click)=\"navigateToEntity('MJ: AI Agent Runs', '')\">\n <span>View all {{ executionHistoryCount }} executions...</span>\n </div>\n }\n </div>\n }\n </div>\n </ng-template>\n </kendo-panelbar-item>\n }\n\n <!-- Actions -->\n @if (record.ID) {\n <kendo-panelbar-item [expanded]=\"false\">\n <ng-template kendoPanelBarItemTitle>\n <i class=\"fa-solid fa-bolt\"></i> Actions{{ actionCount > 0 ? ' (' + actionCount + ')' : '' }}\n </ng-template>\n <ng-template kendoPanelBarContent>\n <div class=\"panel-content\">\n <div class=\"section-header\">\n <div class=\"header-actions\">\n @if (EditMode && UserCanCreateActions) {\n <button kendoButton themeColor=\"primary\" size=\"small\" (click)=\"configureActions()\">\n <i class=\"fa-solid fa-plus\"></i> Add Action\n </button>\n }\n </div>\n </div>\n \n @if (actionCount === 0) {\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-bolt\"></i>\n <h4>No Actions Configured</h4>\n <p>Add actions to enable this agent to perform specific tasks and operations.</p>\n @if (EditMode && UserCanCreateActions) {\n <button kendoButton themeColor=\"primary\" (click)=\"configureActions()\">\n <i class=\"fa-solid fa-plus\"></i> Configure First Action\n </button>\n }\n </div>\n } @else {\n <div class=\"entity-list\">\n @for (action of agentActions; track action.ID) {\n <div class=\"entity-item action-item\" (click)=\"navigateToEntity('Actions', action.ID)\">\n <div class=\"item-icon\">\n <i [class]=\"getActionIcon(action)\"></i>\n </div>\n <div class=\"item-content\">\n <div class=\"item-title\">{{ action.Name || 'Untitled Action' }}</div>\n @if (action.Description) {\n <div class=\"item-preview\">{{ action.Description }}</div>\n }\n <div class=\"item-meta\">\n @if (action.Type) {\n <span class=\"meta-tag\">{{ action.Type }}</span>\n }\n <span class=\"status-tag\" [class.active]=\"action.Status==='Active'\" [class.inactive]=\"action.Status!=='Active'\">\n <i class=\"fa-solid\" [class.fa-check-circle]=\"action.Status==='Active'\" [class.fa-times-circle]=\"action.Status!=='Active'\"></i>\n {{ action.Status }}\n </span>\n </div>\n </div>\n <div class=\"item-actions\">\n @if (EditMode && UserCanDeleteActions) {\n <button kendoButton\n fillMode=\"flat\" \n themeColor=\"error\" \n size=\"small\"\n (click)=\"removeAction(action, $event)\"\n title=\"Remove action\">\n <i class=\"fa-solid fa-trash\"></i>\n </button>\n }\n <i class=\"fa-solid fa-external-link\"></i>\n </div>\n </div>\n }\n @if (actionCount > agentActions.length) {\n <div class=\"view-more-item\" (click)=\"navigateToEntity('AI Agent Actions', '')\">\n <span>View all {{ actionCount }} actions...</span>\n </div>\n }\n </div>\n }\n </div>\n </ng-template>\n </kendo-panelbar-item>\n }\n\n <!-- Sub-Agents -->\n @if (record.ID) {\n <kendo-panelbar-item [expanded]=\"false\">\n <ng-template kendoPanelBarItemTitle>\n <i class=\"fa-solid fa-sitemap\"></i> Sub-Agents{{ subAgentCount > 0 ? ' (' + subAgentCount + ')' : '' }}\n </ng-template>\n <ng-template kendoPanelBarContent>\n <div class=\"panel-content\">\n <div class=\"section-header\">\n <div class=\"section-description\">\n Manage hierarchical relationships with child agents that work under this agent.\n </div>\n <div class=\"header-actions\">\n @if (EditMode && UserCanCreateSubAgents) {\n <button kendoButton themeColor=\"primary\" size=\"small\" (click)=\"addSubAgents()\">\n <i class=\"fa-solid fa-plus\"></i> Add Subagent\n </button>\n <button kendoButton themeColor=\"secondary\" size=\"small\" (click)=\"createSubAgent()\">\n <i class=\"fa-solid fa-plus\"></i> Create Sub-Agent\n </button>\n }\n </div>\n </div>\n \n @if (subAgentCount === 0) {\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-sitemap\"></i>\n <h4>No Sub-Agents</h4>\n <p>Create sub-agents to build a hierarchical structure for complex workflows.</p>\n @if (EditMode && UserCanCreateSubAgents) {\n <button kendoButton themeColor=\"primary\" (click)=\"addSubAgents()\">\n <i class=\"fa-solid fa-plus\"></i> Add Subagent\n </button>\n <button kendoButton themeColor=\"secondary\" (click)=\"createSubAgent()\">\n <i class=\"fa-solid fa-plus\"></i> Create First Sub-Agent\n </button>\n }\n </div>\n } @else {\n <div class=\"entity-list\">\n @for (subAgent of subAgents; track subAgent.ID) {\n <div class=\"entity-item sub-agent-item\" (click)=\"navigateToEntity('AI Agents', subAgent.ID)\">\n <div class=\"item-icon\">\n @if (hasSubAgentLogoURL(subAgent)) {\n <img [src]=\"subAgent.LogoURL\" [alt]=\"subAgent.Name + ' logo'\" class=\"sub-agent-logo\">\n } @else {\n <i [class]=\"getSubAgentIcon(subAgent)\"></i>\n }\n </div>\n <div class=\"item-content\">\n <div class=\"item-title\">{{ subAgent.Name || 'Untitled Sub-Agent' }}</div>\n @if (subAgent.Description) {\n <div class=\"item-preview\">{{ subAgent.Description }}</div>\n }\n <div class=\"item-meta\">\n @if (subAgent.Status) {\n <span class=\"status-tag\" [style.background-color]=\"getStatusBadgeColor()\">\n {{ subAgent.Status }}\n </span>\n }\n @if (subAgent.ExecutionMode) {\n <span class=\"meta-tag\">{{ subAgent.ExecutionMode }}</span>\n }\n </div>\n </div>\n <div class=\"item-actions\">\n @if (EditMode && UserCanCreateSubAgents) {\n <button kendoButton\n fillMode=\"flat\" \n themeColor=\"primary\" \n size=\"small\"\n (click)=\"openSubAgentAdvancedSettings(subAgent, $event)\"\n title=\"Advanced settings\">\n <i class=\"fa-solid fa-cog\"></i>\n </button>\n }\n @if (EditMode && UserCanDeleteSubAgents) {\n <button kendoButton\n fillMode=\"flat\" \n themeColor=\"error\" \n size=\"small\"\n (click)=\"removeSubAgent(subAgent, $event)\"\n title=\"Remove sub-agent\">\n <i class=\"fa-solid fa-trash\"></i>\n </button>\n }\n <i class=\"fa-solid fa-external-link\"></i>\n </div>\n </div>\n }\n @if (subAgentCount > subAgents.length) {\n <div class=\"view-more-item\" (click)=\"navigateToEntity('AI Agents', '')\">\n <span>View all {{ subAgentCount }} sub-agents...</span>\n </div>\n }\n </div>\n }\n </div>\n </ng-template>\n </kendo-panelbar-item>\n }\n\n <!-- Prompts (With Model Selection) -->\n @if (record.ID) {\n <kendo-panelbar-item [expanded]=\"false\">\n <ng-template kendoPanelBarItemTitle>\n <i class=\"fa-solid fa-comments\"></i> Prompts{{ promptCount > 0 ? ' (' + promptCount + ')' : '' }}\n </ng-template>\n <ng-template kendoPanelBarContent>\n <div class=\"panel-content\">\n <div class=\"section-header\">\n <div class=\"prompt-controls\">\n <!-- Model Selection Mode Control -->\n <div class=\"model-selection-mode\">\n <label class=\"model-selection-label\">\n <i class=\"fa-solid fa-sliders\"></i>\n Model Selection:\n </label>\n @if (EditMode) {\n <kendo-dropdownlist\n [(ngModel)]=\"record.ModelSelectionMode\"\n name=\"modelSelectionMode\"\n [data]=\"modelSelectionModes\"\n textField=\"text\"\n valueField=\"value\"\n [valuePrimitive]=\"true\"\n class=\"model-selection-dropdown\">\n </kendo-dropdownlist>\n } @else {\n <span class=\"model-selection-value\">{{ record.ModelSelectionMode || 'Agent Type' }}</span>\n }\n </div>\n </div>\n <div class=\"header-actions\">\n @if (EditMode && UserCanCreateNewPrompts) {\n <button kendoButton themeColor=\"primary\" size=\"small\" (click)=\"addPrompt()\">\n <i class=\"fa-solid fa-plus\"></i> Add Prompt\n </button>\n }\n </div>\n </div>\n \n @if (promptCount === 0) {\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-comments\"></i>\n <h4>No Prompts Configured</h4>\n <p>Add prompts to define how this agent processes requests and generates responses.</p>\n @if (EditMode && UserCanCreateNewPrompts) {\n <button kendoButton themeColor=\"primary\" (click)=\"addPrompt()\">\n <i class=\"fa-solid fa-plus\"></i> Create First Prompt\n </button>\n }\n </div>\n } @else {\n <div class=\"entity-list\">\n @for (prompt of agentPrompts; track prompt.ID) {\n <div class=\"entity-item prompt-item\" (click)=\"navigateToEntity('AI Prompts', prompt.ID)\">\n <div class=\"item-icon\">\n <i class=\"fa-solid fa-comment-dots\"></i>\n </div>\n <div class=\"item-content\">\n <div class=\"item-title\">{{ prompt.Name }}</div>\n @if (prompt.TemplateText) {\n <div class=\"item-preview\">{{ prompt.TemplateText.substring(0, 120) }}{{ prompt.TemplateText.length > 120 ? '...' : '' }}</div>\n }\n <div class=\"item-meta\">\n @if (prompt.PromptRole) {\n <span class=\"meta-tag\">{{ prompt.PromptRole }}</span>\n }\n </div>\n </div>\n <div class=\"item-actions\">\n @if (EditMode && UserCanCreatePrompts) {\n <button kendoButton\n fillMode=\"flat\" \n themeColor=\"primary\" \n size=\"small\"\n (click)=\"openPromptAdvancedSettings(prompt, $event)\"\n title=\"Advanced settings\">\n <i class=\"fa-solid fa-cog\"></i>\n </button>\n }\n @if (EditMode && UserCanDeletePrompts) {\n <button kendoButton\n fillMode=\"flat\" \n themeColor=\"error\" \n size=\"small\"\n (click)=\"removePrompt(prompt, $event)\"\n title=\"Remove prompt\">\n <i class=\"fa-solid fa-trash\"></i>\n </button>\n }\n <i class=\"fa-solid fa-external-link\"></i>\n </div>\n </div>\n }\n @if (promptCount > agentPrompts.length) {\n <div class=\"view-more-item\" (click)=\"navigateToEntity('AI Prompts', '')\">\n <span>View all {{ promptCount }} prompts...</span>\n </div>\n }\n </div>\n }\n </div>\n </ng-template>\n </kendo-panelbar-item>\n }\n\n\n <!-- Learning & Analytics -->\n @if (record.ID) {\n <kendo-panelbar-item [expanded]=\"false\">\n <ng-template kendoPanelBarItemTitle>\n <i class=\"fa-solid fa-brain\"></i> Learning Cycles{{ learningCycleCount > 0 ? ' (' + learningCycleCount + ')' : '' }}\n </ng-template>\n <ng-template kendoPanelBarContent>\n <div class=\"panel-content\">\n <div class=\"section-header\">\n <div class=\"section-description\">\n Monitor and manage learning cycles, training sessions, and performance analytics.\n </div>\n </div>\n \n @if (learningCycleCount === 0) {\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-brain\"></i>\n <h4>No Learning Cycles</h4>\n <p>Learning cycles will appear here as the agent processes requests and improves over time.</p>\n </div>\n } @else {\n <div class=\"entity-list\">\n @for (cycle of learningCycles; track cycle.ID) {\n <div class=\"entity-item learning-item\" (click)=\"navigateToEntity('AI Agent Learning Cycles', cycle.ID)\">\n <div class=\"item-icon\">\n <i class=\"fa-solid fa-brain\"></i>\n </div>\n <div class=\"item-content\">\n <div class=\"item-title\">Learning Cycle {{ cycle.ID.substring(0, 8) }}</div>\n <div class=\"item-meta\">\n @if (cycle.StartedAt) {\n <span class=\"meta-tag\">\n <i class=\"fa-solid fa-calendar\"></i>\n {{ cycle.StartedAt | date:'short' }}\n </span>\n }\n @if (cycle.Status) {\n <span class=\"status-tag\">{{ cycle.Status }}</span>\n }\n </div>\n </div>\n <div class=\"item-actions\">\n <i class=\"fa-solid fa-external-link\"></i>\n </div>\n </div>\n }\n @if (learningCycleCount > learningCycles.length) {\n <div class=\"view-more-item\" (click)=\"navigateToEntity('AI Agent Learning Cycles', '')\">\n <span>View all {{ learningCycleCount }} cycles...</span>\n </div>\n }\n </div>\n }\n </div>\n </ng-template>\n </kendo-panelbar-item>\n }\n\n <!-- Notes & Documentation -->\n @if (record.ID) {\n <kendo-panelbar-item [expanded]=\"false\">\n <ng-template kendoPanelBarItemTitle>\n <i class=\"fa-solid fa-sticky-note\"></i> Notes{{ noteCount > 0 ? ' (' + noteCount + ')' : '' }}\n </ng-template>\n <ng-template kendoPanelBarContent>\n <div class=\"panel-content\">\n <div class=\"section-header\">\n <div class=\"section-description\">\n Manage notes, documentation, and annotations for this agent.\n </div>\n <div class=\"header-actions\">\n @if (EditMode && UserCanCreateNotes) {\n <button kendoButton themeColor=\"primary\" size=\"small\" (click)=\"addNote()\">\n <i class=\"fa-solid fa-plus\"></i> Add Note\n </button>\n }\n </div>\n </div>\n \n @if (noteCount === 0) {\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-sticky-note\"></i>\n <h4>No Notes</h4>\n <p>Add notes to document important information, observations, or instructions for this agent.</p>\n @if (EditMode && UserCanCreateNotes) {\n <button kendoButton themeColor=\"primary\" (click)=\"addNote()\">\n <i class=\"fa-solid fa-plus\"></i> Create First Note\n </button>\n }\n </div>\n } @else {\n <div class=\"entity-list\">\n @for (note of agentNotes; track note.ID) {\n <div class=\"entity-item note-item\" (click)=\"navigateToEntity('AI Agent Notes', note.ID)\">\n <div class=\"item-icon\">\n <i class=\"fa-solid fa-sticky-note\"></i>\n </div>\n <div class=\"item-content\">\n <div class=\"item-title\">{{ note.Type || 'Note' }}</div>\n @if (note.Note) {\n <div class=\"item-preview\">{{ note.Note.substring(0, 100) }}{{ note.Note.length > 100 ? '...' : '' }}</div>\n }\n <div class=\"item-meta\">\n @if (note.__mj_CreatedAt) {\n <span class=\"meta-tag\">\n <i class=\"fa-solid fa-calendar\"></i>\n {{ note.__mj_CreatedAt | date:'short' }}\n </span>\n }\n </div>\n </div>\n <div class=\"item-actions\">\n <i class=\"fa-solid fa-external-link\"></i>\n </div>\n </div>\n }\n @if (noteCount > agentNotes.length) {\n <div class=\"view-more-item\" (click)=\"navigateToEntity('AI Agent Notes', '')\">\n <span>View all {{ noteCount }} notes...</span>\n </div>\n }\n </div>\n }\n </div>\n </ng-template>\n </kendo-panelbar-item>\n }\n\n\n\n <!-- Payload -->\n <kendo-panelbar-item [expanded]=\"false\">\n <ng-template kendoPanelBarItemTitle>\n <i class=\"fa-solid fa-exchange-alt\"></i> Payload Management\n </ng-template>\n <ng-template kendoPanelBarContent>\n <div class=\"panel-content\">\n <div class=\"section-header\">\n <div class=\"section-description\">\n Configure how this agent handles data payloads, path routing, and validation between parent and child agents.\n </div>\n </div>\n \n <!-- Payload Scope Section -->\n <div class=\"payload-section\">\n <h3 class=\"payload-section-title\">\n <i class=\"fa-solid fa-target\"></i>\n Payload Scope\n </h3>\n \n <div class=\"payload-field-container\">\n <div class=\"payload-field-info\">\n <label class=\"payload-field-label\">Payload Scope Path</label>\n <p class=\"payload-field-description\">\n Specify a path within the parent payload that this sub-agent should operate on. \n Leave empty to receive the entire payload.\n </p>\n </div>\n \n <div class=\"payload-field-input\">\n <mj-form-field \n FieldName=\"PayloadScope\" \n Type=\"textbox\"\n Caption=\"\"\n [EditMode]=\"EditMode\"\n [record]=\"record\"\n style=\"width: 100%;\">\n </mj-form-field>\n <div class=\"payload-field-example\">\n <i class=\"fa-solid fa-lightbulb\"></i>\n <span>Example: <code>/customer/profile</code> or <code>/analysis/results</code></span>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Path Configuration Section -->\n <div class=\"payload-section\">\n <h3 class=\"payload-section-title\">\n <i class=\"fa-solid fa-route\"></i>\n Path Configuration\n </h3>\n \n <div class=\"payload-paths-grid\">\n <!-- Downstream Paths -->\n <div class=\"payload-path-card\">\n <div class=\"payload-path-header\">\n <div class=\"payload-path-icon downstream\">\n <i class=\"fa-solid fa-arrow-down\"></i>\n </div>\n <div class=\"payload-path-info\">\n <h4>Downstream Paths</h4>\n <p>JSON array of paths to pass to sub-agents</p>\n </div>\n </div>\n <div class=\"payload-path-content\">\n <div class=\"json-editor-container\">\n <mj-code-editor \n [value]=\"record.PayloadDownstreamPaths || '[&quot;*&quot;]'\"\n [readonly]=\"!EditMode\"\n language=\"json\"\n [lineWrapping]=\"true\"\n style=\"height: 100px; width: 100%;\"\n (valueChange)=\"updatePayloadField('PayloadDownstreamPaths', $event)\">\n </mj-code-editor>\n </div>\n <div class=\"payload-path-hint\">\n <i class=\"fa-solid fa-info-circle\"></i>\n Use <code>[\"*\"]</code> to pass entire payload or specify paths like <code>[\"user.id\", \"order.*\"]</code>\n </div>\n </div>\n </div>\n\n <!-- Upstream Paths -->\n <div class=\"payload-path-card\">\n <div class=\"payload-path-header\">\n <div class=\"payload-path-icon upstream\">\n <i class=\"fa-solid fa-arrow-up\"></i>\n </div>\n <div class=\"payload-path-info\">\n <h4>Upstream Paths</h4>\n <p>JSON array of paths sub-agents can write back</p>\n </div>\n </div>\n <div class=\"payload-path-content\">\n <div class=\"json-editor-container\">\n <mj-code-editor \n [value]=\"record.PayloadUpstreamPaths || '[&quot;*&quot;]'\"\n [readonly]=\"!EditMode\"\n language=\"json\"\n [lineWrapping]=\"true\"\n style=\"height: 100px; width: 100%;\"\n (valueChange)=\"updatePayloadField('PayloadUpstreamPaths', $event)\">\n </mj-code-editor>\n </div>\n <div class=\"payload-path-hint\">\n <i class=\"fa-solid fa-info-circle\"></i>\n Use <code>[\"*\"]</code> to allow all writes or limit to specific paths\n </div>\n </div>\n </div>\n\n <!-- Self Read Paths -->\n <div class=\"payload-path-card\">\n <div class=\"payload-path-header\">\n <div class=\"payload-path-icon self-read\">\n <i class=\"fa-solid fa-eye\"></i>\n </div>\n <div class=\"payload-path-info\">\n <h4>Self Read Paths</h4>\n <p>JSON array of paths this agent can read</p>\n </div>\n </div>\n <div class=\"payload-path-content\">\n <div class=\"json-editor-container\">\n <mj-code-editor \n [value]=\"record.PayloadSelfReadPaths || '[]'\"\n [readonly]=\"!EditMode\"\n language=\"json\"\n [lineWrapping]=\"true\"\n style=\"height: 100px; width: 100%;\"\n (valueChange)=\"updatePayloadField('PayloadSelfReadPaths', $event)\">\n </mj-code-editor>\n </div>\n <div class=\"payload-path-hint\">\n <i class=\"fa-solid fa-info-circle\"></i>\n Paths this agent's prompts can read from the payload\n </div>\n </div>\n </div>\n\n <!-- Self Write Paths -->\n <div class=\"payload-path-card\">\n <div class=\"payload-path-header\">\n <div class=\"payload-path-icon self-write\">\n <i class=\"fa-solid fa-pen\"></i>\n </div>\n <div class=\"payload-path-info\">\n <h4>Self Write Paths</h4>\n <p>JSON array of paths this agent can write to</p>\n </div>\n </div>\n <div class=\"payload-path-content\">\n <div class=\"json-editor-container\">\n <mj-code-editor \n [value]=\"record.PayloadSelfWritePaths || '[]'\"\n [readonly]=\"!EditMode\"\n language=\"json\"\n [lineWrapping]=\"true\"\n style=\"height: 100px; width: 100%;\"\n (valueChange)=\"updatePayloadField('PayloadSelfWritePaths', $event)\">\n </mj-code-editor>\n </div>\n <div class=\"payload-path-hint\">\n <i class=\"fa-solid fa-info-circle\"></i>\n Paths this agent's prompts can write back to the payload\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Validation Section -->\n <div class=\"payload-section\">\n <h3 class=\"payload-section-title\">\n <i class=\"fa-solid fa-shield-check\"></i>\n Final Payload Validation\n </h3>\n \n <div class=\"payload-validation-container\">\n <div class=\"payload-validation-settings\">\n <div class=\"validation-field-group\">\n <label class=\"validation-field-label\">Validation Mode</label>\n <p class=\"validation-field-description\">How to handle validation failures</p>\n <mj-form-field \n FieldName=\"FinalPayloadValidationMode\" \n Type=\"dropdownlist\"\n Caption=\"\"\n [EditMode]=\"EditMode\"\n [record]=\"record\"\n style=\"width: 100%;\">\n </mj-form-field>\n </div>\n \n <div class=\"validation-field-group\">\n <label class=\"validation-field-label\">Max Retries</label>\n <p class=\"validation-field-description\">Maximum validation retry attempts</p>\n <mj-form-field \n FieldName=\"FinalPayloadValidationMaxRetries\" \n Type=\"numerictextbox\"\n Caption=\"\"\n [EditMode]=\"EditMode\"\n [record]=\"record\"\n style=\"width: 100%;\">\n </mj-form-field>\n </div>\n </div>\n \n <div class=\"payload-validation-schema\">\n <label class=\"validation-schema-label\">\n <i class=\"fa-solid fa-code\"></i>\n Validation Schema\n </label>\n <p class=\"validation-schema-description\">\n JSON schema or validation rules for the final payload structure\n </p>\n <div class=\"validation-schema-editor\">\n <mj-code-editor \n [value]=\"record.FinalPayloadValidation || '{}'\"\n [readonly]=\"!EditMode\"\n language=\"json\"\n [lineWrapping]=\"true\"\n style=\"height: 200px; width: 100%;\"\n (valueChange)=\"updatePayloadField('FinalPayloadValidation', $event)\">\n </mj-code-editor>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-template>\n </kendo-panelbar-item>\n\n\n\n <!-- Execution Guardrails (New Separate Panel) -->\n <kendo-panelbar-item [expanded]=\"false\">\n <ng-template kendoPanelBarItemTitle>\n <i class=\"fa-solid fa-shield-halved\"></i> Execution Guardrails\n </ng-template>\n <ng-template kendoPanelBarContent>\n <div class=\"panel-content\">\n <div class=\"section-header\">\n <div class=\"section-description\">\n Set limits to prevent runaway agent executions and control resource usage.\n </div>\n </div>\n \n <div class=\"form-fields-grid\">\n <mj-form-field \n FieldName=\"MaxCostPerRun\" \n Type=\"numerictextbox\"\n Caption=\"Max Cost ($)\"\n Description=\"Maximum cost per run\"\n [EditMode]=\"EditMode\"\n [record]=\"record\">\n </mj-form-field>\n\n <mj-form-field \n FieldName=\"MaxTokensPerRun\" \n Type=\"numerictextbox\"\n Caption=\"Max Tokens\"\n Description=\"Maximum tokens per run\"\n [EditMode]=\"EditMode\"\n [record]=\"record\">\n </mj-form-field>\n\n <mj-form-field \n FieldName=\"MaxIterationsPerRun\" \n Type=\"numerictextbox\"\n Caption=\"Max Iterations\"\n Description=\"Maximum prompt iterations\"\n [EditMode]=\"EditMode\"\n [record]=\"record\">\n </mj-form-field>\n\n <mj-form-field \n FieldName=\"MaxTimePerRun\" \n Type=\"numerictextbox\"\n Caption=\"Max Time (seconds)\"\n Description=\"Maximum execution time\"\n [EditMode]=\"EditMode\"\n [record]=\"record\">\n </mj-form-field>\n </div>\n </div>\n </ng-template>\n </kendo-panelbar-item>\n\n <!-- Configuration (Settings Panel) -->\n <kendo-panelbar-item [expanded]=\"false\">\n <ng-template kendoPanelBarItemTitle>\n <i class=\"fa-solid fa-cogs\"></i> Configuration\n </ng-template>\n <ng-template kendoPanelBarContent>\n <div class=\"panel-content\">\n <div class=\"section-header\">\n <div class=\"section-description\">\n Configure agent behavior, execution settings, and advanced features.\n </div>\n </div>\n \n <!-- Identity & Behavior Section -->\n <div class=\"config-section\">\n <h3 class=\"config-section-title\">\n <i class=\"fa-solid fa-id-card\"></i>\n Identity & Behavior\n </h3>\n \n <div class=\"config-grid\">\n <div class=\"config-card\">\n <div class=\"config-card-header\">\n <div class=\"config-card-icon\">\n <i class=\"fa-solid fa-toggle-on\"></i>\n </div>\n <div class=\"config-card-info\">\n <h4>Agent Status</h4>\n <p>Current availability and operational status</p>\n </div>\n </div>\n <div class=\"config-card-content\">\n @if (EditMode) {\n <kendo-dropdownlist \n [(ngModel)]=\"record.Status\"\n [data]=\"statusOptions\"\n textField=\"text\"\n valueField=\"value\"\n [valuePrimitive]=\"true\"\n name=\"agentStatus\"\n class=\"config-field-input\">\n </kendo-dropdownlist>\n } @else {\n <span class=\"config-field-display\">{{ record.Status || 'Not Set' }}</span>\n }\n </div>\n </div>\n\n <div class=\"config-card\">\n <div class=\"config-card-header\">\n <div class=\"config-card-icon\">\n <i class=\"fa-solid fa-sitemap\"></i>\n </div>\n <div class=\"config-card-info\">\n <h4>Agent Type</h4>\n <p>Category and system-level behavior</p>\n </div>\n </div>\n <div class=\"config-card-content\">\n @if (EditMode) {\n <kendo-dropdownlist \n [(ngModel)]=\"record.TypeID\"\n [data]=\"agentTypes\"\n textField=\"Name\"\n valueField=\"ID\"\n [valuePrimitive]=\"true\"\n name=\"agentTypeID\"\n class=\"config-field-input\">\n </kendo-dropdownlist>\n } @else {\n <span class=\"config-field-display\">{{ record.Type || 'Not Set' }}</span>\n }\n </div>\n </div>\n\n <div class=\"config-card\">\n <div class=\"config-card-header\">\n <div class=\"config-card-icon\">\n <i class=\"fa-solid fa-bolt\"></i>\n </div>\n <div class=\"config-card-info\">\n <h4>Expose as Action</h4>\n <p>Make available as an action for other agents</p>\n </div>\n </div>\n <div class=\"config-card-content\">\n <mj-form-field \n FieldName=\"ExposeAsAction\" \n Type=\"checkbox\"\n Caption=\"\"\n [EditMode]=\"EditMode\"\n [record]=\"record\">\n </mj-form-field>\n </div>\n </div>\n\n <div class=\"config-card full-width\">\n <div class=\"config-card-header\">\n <div class=\"config-card-icon\">\n <i class=\"fa-solid fa-align-left\"></i>\n </div>\n <div class=\"config-card-info\">\n <h4>Description</h4>\n <p>Detailed agent description and purpose</p>\n </div>\n </div>\n <div class=\"config-card-content\">\n <mj-form-field \n FieldName=\"Description\" \n Type=\"textarea\"\n Caption=\"\"\n [EditMode]=\"EditMode\"\n [record]=\"record\"\n style=\"width: 100%;\">\n </mj-form-field>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Execution Settings Section -->\n <div class=\"config-section\">\n <h3 class=\"config-section-title\">\n <i class=\"fa-solid fa-play\"></i>\n Execution Settings\n </h3>\n \n <div class=\"config-grid\">\n <div class=\"config-card\">\n <div class=\"config-card-header\">\n <div class=\"config-card-icon\">\n <i class=\"fa-solid fa-layer-group\"></i>\n </div>\n <div class=\"config-card-info\">\n <h4>Execution Mode</h4>\n <p>How sub-agents are executed</p>\n </div>\n </div>\n <div class=\"config-card-content\">\n <mj-form-field \n FieldName=\"ExecutionMode\" \n Type=\"dropdownlist\"\n Caption=\"\"\n [EditMode]=\"EditMode\"\n [record]=\"record\">\n </mj-form-field>\n </div>\n </div>\n\n <div class=\"config-card\">\n <div class=\"config-card-header\">\n <div class=\"config-card-icon\">\n <i class=\"fa-solid fa-sort-numeric-down\"></i>\n </div>\n <div class=\"config-card-info\">\n <h4>Execution Order</h4>\n <p>Order when run with siblings</p>\n </div>\n </div>\n <div class=\"config-card-content\">\n <mj-form-field \n FieldName=\"ExecutionOrder\" \n Type=\"numerictextbox\"\n Caption=\"\"\n [EditMode]=\"EditMode\"\n [record]=\"record\">\n </mj-form-field>\n </div>\n </div>\n\n <div class=\"config-card\">\n <div class=\"config-card-header\">\n <div class=\"config-card-icon\">\n <i class=\"fa-solid fa-tachometer-alt\"></i>\n </div>\n <div class=\"config-card-info\">\n <h4>Default Effort Level</h4>\n <p>Default effort level for all prompts (1-100)</p>\n </div>\n </div>\n <div class=\"config-card-content\">\n <mj-form-field \n FieldName=\"DefaultPromptEffortLevel\" \n Type=\"numerictextbox\"\n Caption=\"\"\n [EditMode]=\"EditMode\"\n [record]=\"record\">\n </mj-form-field>\n <div class=\"config-card-hint\">\n <i class=\"fa-solid fa-info-circle\"></i>\n Higher values request more thorough reasoning (1=minimal, 100=maximum)\n </div>\n </div>\n </div>\n\n <div class=\"config-card\">\n <div class=\"config-card-header\">\n <div class=\"config-card-icon\">\n <i class=\"fa-solid fa-code\"></i>\n </div>\n <div class=\"config-card-info\">\n <h4>Driver Class</h4>\n <p>Custom implementation class</p>\n </div>\n </div>\n <div class=\"config-card-content\">\n <mj-form-field \n FieldName=\"DriverClass\" \n Type=\"textbox\"\n Caption=\"\"\n [EditMode]=\"EditMode\"\n [record]=\"record\">\n </mj-form-field>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Visual Identity Section -->\n <div class=\"config-section\">\n <h3 class=\"config-section-title\">\n <i class=\"fa-solid fa-palette\"></i>\n Visual Identity\n </h3>\n \n <div class=\"config-grid\">\n <div class=\"config-card\">\n <div class=\"config-card-header\">\n <div class=\"config-card-icon\">\n <i class=\"fa-solid fa-icons\"></i>\n </div>\n <div class=\"config-card-info\">\n <h4>Icon Class</h4>\n <p>Font Awesome icon class</p>\n </div>\n </div>\n <div class=\"config-card-content\">\n <mj-form-field \n FieldName=\"IconClass\" \n Type=\"textbox\"\n Caption=\"\"\n [EditMode]=\"EditMode\"\n [record]=\"record\">\n </mj-form-field>\n <div class=\"config-card-hint\">\n <i class=\"fa-solid fa-info-circle\"></i>\n Example: <code>fa-solid fa-robot</code>\n </div>\n </div>\n </div>\n\n <div class=\"config-card\">\n <div class=\"config-card-header\">\n <div class=\"config-card-icon\">\n <i class=\"fa-solid fa-image\"></i>\n </div>\n <div class=\"config-card-info\">\n <h4>Logo URL</h4>\n <p>URL for agent logo image</p>\n </div>\n </div>\n <div class=\"config-card-content\">\n <mj-form-field \n FieldName=\"LogoURL\" \n Type=\"textbox\"\n Caption=\"\"\n [EditMode]=\"EditMode\"\n [record]=\"record\">\n </mj-form-field>\n <div class=\"config-card-hint\">\n <i class=\"fa-solid fa-info-circle\"></i>\n Takes precedence over Icon Class\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Context Compression Section -->\n <div class=\"config-section\">\n <h3 class=\"config-section-title\">\n <i class=\"fa-solid fa-compress\"></i>\n Context Compression\n </h3>\n \n <div class=\"config-grid\">\n <div class=\"config-card full-width\">\n <div class=\"config-card-header\">\n <div class=\"config-card-icon\">\n <i class=\"fa-solid fa-toggle-on\"></i>\n </div>\n <div class=\"config-card-info\">\n <h4>Enable Context Compression</h4>\n <p>Automatically compress conversation context when message threshold is reached</p>\n </div>\n </div>\n <div class=\"config-card-content\">\n <mj-form-field \n FieldName=\"EnableContextCompression\" \n Type=\"checkbox\"\n Caption=\"\"\n [EditMode]=\"EditMode\"\n [record]=\"record\"\n (valueChange)=\"onContextCompressionToggle($event)\">\n </mj-form-field>\n </div>\n </div>\n\n @if (record.EnableContextCompression) {\n <div class=\"config-card\">\n <div class=\"config-card-header\">\n <div class=\"config-card-icon\">\n <i class=\"fa-solid fa-hashtag\"></i>\n </div>\n <div class=\"config-card-info\">\n <h4>Message Threshold</h4>\n <p>Messages before compression triggers</p>\n </div>\n </div>\n <div class=\"config-card-content\">\n <mj-form-field \n FieldName=\"ContextCompressionMessageThreshold\" \n Type=\"numerictextbox\"\n Caption=\"\"\n [EditMode]=\"EditMode\"\n [record]=\"record\">\n </mj-form-field>\n </div>\n </div>\n\n <div class=\"config-card\">\n <div class=\"config-card-header\">\n <div class=\"config-card-icon\">\n <i class=\"fa-solid fa-save\"></i>\n </div>\n <div class=\"config-card-info\">\n <h4>Messages to Keep</h4>\n <p>Recent messages to retain uncompressed</p>\n </div>\n </div>\n <div class=\"config-card-content\">\n <mj-form-field \n FieldName=\"ContextCompressionMessageRetentionCount\" \n Type=\"numerictextbox\"\n Caption=\"\"\n [EditMode]=\"EditMode\"\n [record]=\"record\">\n </mj-form-field>\n </div>\n </div>\n\n <div class=\"config-card\">\n <div class=\"config-card-header\">\n <div class=\"config-card-icon\">\n <i class=\"fa-solid fa-comment-dots\"></i>\n </div>\n <div class=\"config-card-info\">\n <h4>Compression Prompt</h4>\n <p>Prompt used for summarization</p>\n </div>\n </div>\n <div class=\"config-card-content\">\n @if (EditMode) {\n <div class=\"prompt-selector-container\">\n <div class=\"prompt-display\">\n @if (selectedContextCompressionPrompt) {\n <span class=\"prompt-name\">{{ selectedContextCompressionPrompt.Name }}</span>\n } @else {\n <span class=\"no-prompt\">No prompt selected</span>\n }\n </div>\n <div class=\"prompt-actions\">\n <button type=\"button\" \n kendoButton \n fillMode=\"outline\" \n size=\"small\"\n (click)=\"openContextCompressionPromptSelector()\"\n class=\"prompt-select-btn\">\n <i class=\"fa-solid fa-search\"></i>\n {{ selectedContextCompressionPrompt ? 'Change' : 'Select' }} Prompt\n </button>\n @if (selectedContextCompressionPrompt) {\n <button type=\"button\" \n kendoButton \n fillMode=\"flat\" \n size=\"small\"\n (click)=\"clearContextCompressionPrompt()\"\n class=\"prompt-clear-btn\"\n title=\"Clear selection\">\n <i class=\"fa-solid fa-times\"></i>\n </button>\n }\n </div>\n </div>\n } @else {\n <span class=\"config-field-display\">{{ selectedContextCompressionPrompt?.Name || record.ContextCompressionPrompt || 'Not Set' }}</span>\n }\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n </ng-template>\n </kendo-panelbar-item>\n\n\n\n\n </kendo-panelbar>\n </div>\n </form>\n\n</div>", styles: ["/* AI Agent Form - Modern Redesign */\n.record-form-container {\n height: 100%;\n display: flex;\n flex-direction: column;\n background: #f5f7fa;\n}\n\n.record-form {\n height: 100%;\n display: flex;\n flex-direction: column;\n}\n\n/* Agent Header Section - Compact Design */\n.agent-header {\n background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);\n border-bottom: 1px solid #e0e6ed;\n padding: 12px 20px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.04);\n}\n\n.agent-header-content {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 20px;\n}\n\n.agent-overview {\n display: flex;\n align-items: center;\n gap: 16px;\n flex: 1;\n min-width: 0;\n}\n\n.agent-icon-wrapper {\n width: 48px;\n height: 48px;\n background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: 0 4px 12px rgba(33, 150, 243, 0.2);\n flex-shrink: 0;\n}\n\n.agent-icon-wrapper i {\n color: white;\n font-size: 24px;\n}\n\n.agent-icon-wrapper img.agent-logo {\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: 8px;\n}\n\n.agent-info {\n flex: 1;\n min-width: 0;\n}\n\n.agent-name {\n font-size: 22px;\n font-weight: 600;\n color: #2c3e50;\n margin: 0 0 8px 0;\n line-height: 1.2;\n}\n\n.agent-name-input {\n font-size: 18px !important;\n font-weight: 500 !important;\n height: 36px !important;\n width: 100% !important;\n max-width: 400px !important;\n}\n\n.agent-meta {\n display: flex;\n align-items: center;\n gap: 16px;\n flex-wrap: wrap;\n}\n\n.status-badge {\n padding: 6px 16px;\n border-radius: 20px;\n font-size: 13px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n display: inline-flex;\n align-items: center;\n gap: 6px;\n}\n\n.status-badge.active {\n background: #28a745;\n color: white;\n}\n\n.status-badge.pending {\n background: #ffc107;\n color: #212529;\n}\n\n.status-badge.disabled {\n background: #6c757d;\n color: white;\n}\n\n.execution-mode,\n.parent-agent {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 13px;\n color: #6c757d;\n background: #f8f9fa;\n padding: 4px 10px;\n border-radius: 12px;\n}\n\n.execution-mode i,\n.parent-agent i {\n font-size: 12px;\n opacity: 0.8;\n}\n\n/* Prompt Controls Section */\n.prompt-controls {\n flex: 1;\n margin-right: 16px;\n}\n\n.agent-meta-info {\n display: flex;\n gap: 24px;\n margin-top: 12px;\n flex-wrap: wrap;\n}\n\n.meta-item {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.meta-label {\n font-size: 12px;\n font-weight: 600;\n color: #6c757d;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.meta-value {\n font-size: 14px;\n color: #495057;\n font-weight: 500;\n}\n\n.agent-description {\n margin-top: 16px;\n color: #6c757d;\n line-height: 1.6;\n font-size: 15px;\n}\n\n.agent-description-input {\n width: 100%;\n max-width: 600px;\n min-height: 80px;\n resize: vertical;\n}\n\n/* Action Buttons Section */\n.agent-actions {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n.action-buttons-row {\n display: flex;\n gap: 12px;\n flex-wrap: wrap;\n}\n\n.action-button {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 20px;\n border-radius: 8px;\n font-weight: 500;\n font-size: 14px;\n transition: all 0.2s ease;\n box-shadow: 0 2px 4px rgba(0,0,0,0.08);\n}\n\n.action-button:hover {\n transform: translateY(-1px);\n box-shadow: 0 4px 8px rgba(0,0,0,0.12);\n}\n\n.action-button.primary {\n background: #2196f3;\n color: white;\n}\n\n.action-button.primary:hover {\n background: #1976d2;\n}\n\n.action-button.secondary {\n background: #6c757d;\n color: white;\n}\n\n.action-button.secondary:hover {\n background: #5a6268;\n}\n\n.action-warnings {\n margin-top: 8px;\n font-size: 13px;\n color: #dc3545;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n/* Panel-Based Form Content */\n.form-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n overflow-x: hidden;\n background: #f5f7fa;\n padding: 12px;\n}\n\n/* Kendo PanelBar Styling */\n::ng-deep .k-panelbar {\n border: none;\n background: transparent;\n}\n\n::ng-deep .k-panelbar > .k-panelbar-item {\n border: none;\n border-radius: 12px;\n margin-bottom: 12px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.06);\n background: white;\n overflow: hidden;\n}\n\n::ng-deep .k-panelbar > .k-panelbar-item > .k-header {\n background: white;\n border: none;\n padding: 16px 20px;\n border-radius: 12px 12px 0 0;\n color: #2c3e50;\n font-weight: 600;\n font-size: 16px;\n transition: all 0.2s ease;\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n::ng-deep .k-panelbar > .k-panelbar-item > .k-header:hover {\n background: #f8f9fa;\n}\n\n::ng-deep .k-panelbar > .k-panelbar-item.k-panelbar-expanded > .k-header {\n background: #2196f3;\n color: white;\n border-radius: 12px 12px 0 0;\n}\n\n::ng-deep .k-panelbar > .k-panelbar-item > .k-header .k-panelbar-toggle {\n position: absolute;\n right: 24px;\n color: inherit;\n font-size: 14px;\n transition: transform 0.2s ease;\n}\n\n::ng-deep .k-panelbar > .k-panelbar-item.k-panelbar-expanded > .k-header .k-panelbar-toggle {\n transform: rotate(180deg);\n}\n\n::ng-deep .k-panelbar > .k-panelbar-item > .k-header .k-panelbar-toggle::before {\n content: '\\f107';\n font-family: 'Font Awesome 6 Free';\n font-weight: 900;\n}\n\n::ng-deep .k-panelbar > .k-panelbar-item > .k-content {\n padding: 0;\n border: none;\n background: white;\n border-radius: 0 0 12px 12px;\n}\n\n::ng-deep .k-panelbar .k-header .k-panelbar-icon {\n font-size: 18px;\n color: #2196f3;\n margin-right: 8px;\n}\n\n::ng-deep .k-panelbar .k-panelbar-expanded .k-header .k-panelbar-icon {\n color: white;\n}\n\n/* Panel Content */\n.panel-content {\n padding: 16px;\n background: white;\n}\n\n.section-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 20px;\n gap: 16px;\n flex-wrap: wrap;\n}\n\n.section-description {\n color: #6c757d;\n font-size: 14px;\n line-height: 1.6;\n margin-bottom: 16px;\n}\n\n.header-actions {\n display: flex;\n gap: 8px;\n align-items: center;\n flex-shrink: 0;\n}\n\n.tab-section {\n background: white;\n border-radius: 12px;\n padding: 24px;\n margin-bottom: 24px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.04);\n border: 1px solid #e0e6ed;\n}\n\n.section-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 20px;\n padding-bottom: 16px;\n border-bottom: 2px solid #f0f4f8;\n}\n\n.section-title {\n display: flex;\n align-items: center;\n gap: 12px;\n margin: 0;\n color: #2c3e50;\n font-size: 18px;\n font-weight: 600;\n}\n\n.section-title i {\n color: #2196f3;\n font-size: 20px;\n}\n\n.section-description {\n color: #6c757d;\n font-size: 14px;\n line-height: 1.6;\n margin-top: 8px;\n}\n\n/* Form Fields Grid */\n.form-fields-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 20px;\n margin-top: 20px;\n}\n\n.form-field-group {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.form-field-label {\n font-size: 13px;\n font-weight: 600;\n color: #495057;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n/* Sub-grids styling (legacy) */\n.sub-grid-container {\n height: 500px;\n border: 1px solid #e0e6ed;\n border-radius: 8px;\n overflow: hidden;\n display: none; /* Hidden as we now use cards */\n}\n\n/* Empty States */\n.empty-state {\n text-align: center;\n padding: 60px 20px;\n color: #6c757d;\n}\n\n.empty-state i {\n font-size: 48px;\n color: #dee2e6;\n margin-bottom: 16px;\n}\n\n.empty-state h4 {\n color: #495057;\n font-weight: 600;\n margin-bottom: 8px;\n}\n\n.empty-state p {\n font-size: 15px;\n line-height: 1.6;\n max-width: 400px;\n margin: 0 auto;\n}\n\n/* Loading State */\n.loading-overlay {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(255, 255, 255, 0.9);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n}\n\n.loading-spinner {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 16px;\n}\n\n.spinner-icon {\n width: 48px;\n height: 48px;\n border: 4px solid #f3f3f3;\n border-top: 4px solid #2196f3;\n border-radius: 50%;\n animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}\n\n/* Quick Actions */\n.quick-actions {\n display: flex;\n gap: 16px;\n margin-top: 20px;\n padding-top: 20px;\n border-top: 1px solid #e0e6ed;\n}\n\n.quick-action-card {\n flex: 1;\n padding: 16px;\n background: #f8f9fa;\n border-radius: 8px;\n border: 1px solid #e0e6ed;\n cursor: pointer;\n transition: all 0.2s ease;\n text-align: center;\n}\n\n.quick-action-card:hover {\n background: white;\n box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n transform: translateY(-2px);\n}\n\n.quick-action-icon {\n font-size: 32px;\n color: #2196f3;\n margin-bottom: 8px;\n}\n\n.quick-action-title {\n font-size: 14px;\n font-weight: 600;\n color: #495057;\n margin-bottom: 4px;\n}\n\n.quick-action-description {\n font-size: 12px;\n color: #6c757d;\n}\n\n/* Header Actions */\n.header-actions {\n display: flex;\n gap: 8px;\n align-items: center;\n}\n\n/* Entity List Interface */\n.entity-list {\n display: flex;\n flex-direction: column;\n gap: 12px;\n margin-top: 16px;\n}\n\n.entity-item {\n display: flex;\n align-items: center;\n gap: 16px;\n padding: 16px;\n background: #f8f9fa;\n border: 1px solid #e0e6ed;\n border-radius: 10px;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.entity-item:hover {\n background: white;\n border-color: #2196f3;\n box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n transform: translateY(-1px);\n}\n\n.item-icon {\n width: 40px;\n height: 40px;\n background: linear-gradient(135deg, #e9ecef, #dee2e6);\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.prompt-item .item-icon {\n background: linear-gradient(135deg, #20c997, #17a673);\n}\n\n.action-item .item-icon {\n background: linear-gradient(135deg, #ffc107, #e0a800);\n}\n\n.sub-agent-item .item-icon {\n background: linear-gradient(135deg, #2196f3, #1976d2);\n}\n\n.model-item .item-icon {\n background: linear-gradient(135deg, #6f42c1, #563d7c);\n}\n\n.learning-item .item-icon {\n background: linear-gradient(135deg, #e83e8c, #dc3545);\n}\n\n.note-item .item-icon {\n background: linear-gradient(135deg, #fd7e14, #e55a00);\n}\n\n.item-icon i {\n color: #6c757d;\n font-size: 18px;\n}\n\n.prompt-item .item-icon i,\n.action-item .item-icon i,\n.sub-agent-item .item-icon i,\n.model-item .item-icon i,\n.learning-item .item-icon i,\n.note-item .item-icon i {\n color: white;\n}\n\n.item-icon img.sub-agent-logo {\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: 6px;\n}\n\n.item-content {\n flex: 1;\n min-width: 0;\n}\n\n.item-title {\n font-size: 16px;\n font-weight: 600;\n color: #2c3e50;\n margin: 0 0 4px 0;\n line-height: 1.3;\n}\n\n.item-preview {\n color: #6c757d;\n font-size: 14px;\n line-height: 1.4;\n margin: 4px 0 8px 0;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.item-meta {\n display: flex;\n gap: 12px;\n align-items: center;\n flex-wrap: wrap;\n}\n\n.meta-tag,\n.priority-tag,\n.status-tag {\n display: flex;\n align-items: center;\n gap: 4px;\n font-size: 12px;\n padding: 3px 8px;\n border-radius: 6px;\n font-weight: 500;\n}\n\n.meta-tag {\n background: #e9ecef;\n color: #495057;\n}\n\n.priority-tag {\n color: white;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.3px;\n}\n\n.status-tag {\n background: #e9ecef;\n color: #495057;\n}\n\n.status-tag.active {\n background: #d4edda;\n color: #28a745;\n}\n\n.status-tag.inactive {\n background: #f8d7da;\n color: #dc3545;\n}\n\n.item-actions {\n opacity: 0;\n transition: opacity 0.2s ease;\n color: #6c757d;\n font-size: 16px;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.entity-item:hover .item-actions {\n opacity: 1;\n}\n\n.entity-item:hover .item-actions > i {\n color: #2196f3;\n}\n\n.view-more-item {\n padding: 16px;\n background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n border: 2px dashed #dee2e6;\n border-radius: 10px;\n text-align: center;\n cursor: pointer;\n transition: all 0.2s ease;\n color: #6c757d;\n font-weight: 500;\n}\n\n.view-more-item:hover {\n background: linear-gradient(135deg, #e9ecef, #dee2e6);\n border-color: #2196f3;\n color: #2196f3;\n}\n\n/* Payload Section Styles */\n.payload-config-section,\n.payload-paths-section,\n.payload-validation-section {\n margin-bottom: 32px;\n}\n\n.subsection-title {\n font-size: 16px;\n font-weight: 600;\n color: #2c3e50;\n margin: 0 0 16px 0;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.subsection-title i {\n color: #2196f3;\n}\n\n.subsection-divider {\n margin-top: 32px;\n margin-bottom: 16px;\n padding-top: 24px;\n border-top: 1px solid #e0e6ed;\n}\n\n.payload-config-grid {\n display: grid;\n grid-template-columns: 1fr 1fr 1fr;\n gap: 16px;\n margin-bottom: 24px;\n}\n\n.payload-field-group {\n margin-bottom: 20px;\n}\n\n.payload-field-label {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 14px;\n font-weight: 600;\n color: #495057;\n margin-bottom: 8px;\n}\n\n.payload-field-label i {\n color: #6c757d;\n font-size: 16px;\n}\n\n.field-description {\n font-size: 12px;\n font-weight: normal;\n color: #6c757d;\n margin-left: auto;\n}\n\n/* Code editor styling */\n.payload-field-group mj-code-editor {\n border: 1px solid #dee2e6;\n border-radius: 8px;\n overflow: hidden;\n}\n\n.payload-field-group mj-code-editor:hover {\n border-color: #2196f3;\n}\n\n/* Payload textarea styling */\n.payload-field-group mj-form-field ::ng-deep textarea {\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 13px;\n line-height: 1.5;\n min-height: 120px;\n resize: vertical;\n}\n\n/* Execution History Panel */\n.execution-history-panel {\n max-height: 500px;\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n/* Timeline List for Execution History */\n.timeline-list {\n display: flex;\n flex-direction: column;\n gap: 16px;\n margin-top: 16px;\n}\n\n.timeline-item {\n display: flex;\n align-items: flex-start;\n gap: 16px;\n padding: 16px;\n background: #f8f9fa;\n border: 1px solid #e0e6ed;\n border-radius: 10px;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.timeline-item:hover {\n background: white;\n border-color: #2196f3;\n box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n}\n\n.timeline-marker {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n}\n\n.timeline-marker i {\n color: white;\n font-size: 14px;\n}\n\n.timeline-content {\n flex: 1;\n min-width: 0;\n}\n\n.timeline-title {\n font-size: 16px;\n font-weight: 600;\n color: #2c3e50;\n margin: 0 0 8px 0;\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n gap: 16px;\n}\n\n.timeline-date {\n font-size: 12px;\n color: #6c757d;\n background: #e9ecef;\n padding: 2px 8px;\n border-radius: 6px;\n white-space: nowrap;\n flex-shrink: 0;\n}\n\n.timeline-meta {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 8px;\n}\n\n.timeline-preview {\n color: #6c757d;\n font-size: 14px;\n line-height: 1.4;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n/* Modern Card-Based Interface (Legacy - Keep for backward compatibility) */\n.cards-container {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n gap: 20px;\n margin-top: 16px;\n}\n\n.entity-card {\n background: white;\n border: 1px solid #e0e6ed;\n border-radius: 12px;\n padding: 20px;\n cursor: pointer;\n transition: all 0.3s ease;\n box-shadow: 0 2px 8px rgba(0,0,0,0.06);\n position: relative;\n overflow: hidden;\n}\n\n.entity-card:hover {\n transform: translateY(-4px);\n box-shadow: 0 8px 24px rgba(0,0,0,0.12);\n border-color: #2196f3;\n}\n\n.entity-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 4px;\n background: linear-gradient(90deg, #2196f3, #42a5f5);\n opacity: 0;\n transition: opacity 0.3s ease;\n}\n\n.entity-card:hover::before {\n opacity: 1;\n}\n\n.card-header {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n margin-bottom: 12px;\n}\n\n.card-icon {\n width: 40px;\n height: 40px;\n background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.sub-agent-card .card-icon {\n background: linear-gradient(135deg, #2196f3, #1976d2);\n}\n\n.prompt-card .card-icon {\n background: linear-gradient(135deg, #20c997, #17a673);\n}\n\n.action-card .card-icon {\n background: linear-gradient(135deg, #ffc107, #e0a800);\n}\n\n.card-icon i {\n font-size: 18px;\n color: #6c757d;\n}\n\n.sub-agent-card .card-icon i,\n.prompt-card .card-icon i,\n.action-card .card-icon i {\n color: white;\n}\n\n.card-title-section {\n flex: 1;\n min-width: 0;\n}\n\n.card-title {\n font-size: 16px;\n font-weight: 600;\n color: #2c3e50;\n margin: 0 0 4px 0;\n line-height: 1.3;\n word-wrap: break-word;\n}\n\n.card-description {\n color: #6c757d;\n font-size: 14px;\n line-height: 1.5;\n margin: 8px 0;\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.card-meta {\n display: flex;\n gap: 16px;\n margin-top: 12px;\n flex-wrap: wrap;\n}\n\n.meta-item {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 12px;\n color: #6c757d;\n padding: 4px 8px;\n background: #f8f9fa;\n border-radius: 6px;\n}\n\n.meta-item i {\n font-size: 11px;\n opacity: 0.8;\n}\n\n.meta-item.active {\n color: #28a745;\n background: #d4edda;\n}\n\n.meta-item.inactive {\n color: #dc3545;\n background: #f8d7da;\n}\n\n.card-actions {\n opacity: 0;\n transition: opacity 0.3s ease;\n color: #6c757d;\n}\n\n.entity-card:hover .card-actions {\n opacity: 1;\n color: #2196f3;\n}\n\n/* Badge Styles */\n.priority-badge {\n padding: 2px 8px;\n border-radius: 12px;\n font-size: 11px;\n font-weight: 600;\n color: white;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.type-badge {\n padding: 2px 8px;\n border-radius: 6px;\n font-size: 11px;\n font-weight: 500;\n background: #e9ecef;\n color: #495057;\n text-transform: uppercase;\n letter-spacing: 0.3px;\n}\n\n/* View All Card */\n.view-all-card {\n background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n border: 2px dashed #dee2e6;\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 120px;\n cursor: pointer;\n transition: all 0.3s ease;\n}\n\n.view-all-card:hover {\n background: linear-gradient(135deg, #e9ecef, #dee2e6);\n border-color: #2196f3;\n transform: translateY(-2px);\n}\n\n.view-all-content {\n text-align: center;\n color: #6c757d;\n font-weight: 500;\n}\n\n.view-all-content i {\n font-size: 24px;\n margin-bottom: 8px;\n display: block;\n}\n\n/* Timeline Interface for History */\n.timeline-container {\n position: relative;\n margin-top: 16px;\n}\n\n.timeline-item {\n display: flex;\n flex-direction: column;\n margin-bottom: 24px;\n transition: all 0.3s ease;\n border-radius: 12px;\n padding: 16px;\n background: transparent;\n border: 1px solid transparent;\n}\n\n.timeline-item:hover {\n background: #f8f9fa;\n border-color: #e0e6ed;\n}\n\n.timeline-item.expanded {\n background: #f8f9fa;\n border-color: #2196f3;\n box-shadow: 0 4px 12px rgba(33, 150, 243, 0.1);\n}\n\n.timeline-item.view-all {\n cursor: pointer;\n background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n border: 2px dashed #dee2e6;\n}\n\n.timeline-item.view-all:hover {\n background: linear-gradient(135deg, #e9ecef, #dee2e6);\n border-color: #2196f3;\n}\n\n.timeline-item > div:first-child {\n display: flex;\n align-items: flex-start;\n}\n\n.timeline-marker {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 16px;\n flex-shrink: 0;\n position: relative;\n box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n}\n\n.timeline-marker::after {\n content: '';\n position: absolute;\n top: 50px;\n left: 50%;\n transform: translateX(-50%);\n width: 2px;\n height: 24px;\n background: #e0e6ed;\n}\n\n.timeline-item:last-child .timeline-marker::after {\n display: none;\n}\n\n.timeline-marker i {\n color: white;\n font-size: 16px;\n}\n\n.timeline-marker.view-all-marker {\n background: #6c757d;\n}\n\n.timeline-content {\n flex: 1;\n min-width: 0;\n display: flex;\n align-items: flex-start;\n}\n\n.timeline-header {\n flex: 1;\n cursor: pointer;\n}\n\n.timeline-header > div:first-child {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n margin-bottom: 8px;\n gap: 16px;\n}\n\n.expand-icon {\n transition: transform 0.3s ease;\n margin-right: 8px;\n color: #6c757d;\n}\n\n.expand-icon.expanded {\n transform: rotate(90deg);\n}\n\n.timeline-title {\n font-size: 16px;\n font-weight: 600;\n color: #2c3e50;\n margin: 0;\n line-height: 1.3;\n}\n\n.timeline-date {\n font-size: 12px;\n color: #6c757d;\n white-space: nowrap;\n background: #f8f9fa;\n padding: 4px 8px;\n border-radius: 6px;\n margin-left: auto;\n}\n\n.timeline-preview {\n font-size: 13px;\n color: #6c757d;\n line-height: 1.5;\n margin-top: 8px;\n padding: 8px 12px;\n background: #f8f9fa;\n border-radius: 6px;\n border: 1px solid #e0e6ed;\n}\n\n.timeline-status {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 8px;\n}\n\n.execution-time {\n display: flex;\n align-items: center;\n gap: 4px;\n font-size: 12px;\n color: #6c757d;\n background: #f8f9fa;\n padding: 4px 8px;\n border-radius: 6px;\n}\n\n.timeline-description {\n color: #6c757d;\n font-size: 14px;\n line-height: 1.5;\n margin: 8px 0;\n}\n\n.timeline-error {\n color: #dc3545;\n font-size: 13px;\n background: #f8d7da;\n padding: 8px 12px;\n border-radius: 6px;\n margin-top: 8px;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.timeline-error i {\n flex-shrink: 0;\n}\n\n/* Expanded Content Styles */\n.timeline-expanded-content {\n margin-top: 20px;\n padding-top: 20px;\n border-top: 1px solid #e0e6ed;\n animation: fadeIn 0.3s ease;\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n transform: translateY(-10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.result-section,\n.error-section {\n margin-bottom: 20px;\n}\n\n.result-section h5,\n.error-section h5 {\n font-size: 14px;\n font-weight: 600;\n color: #495057;\n margin-bottom: 8px;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.error-section h5 {\n color: #dc3545;\n}\n\n.result-content,\n.error-content {\n background: white;\n border: 1px solid #e0e6ed;\n border-radius: 8px;\n padding: 12px 16px;\n font-size: 14px;\n line-height: 1.6;\n color: #495057;\n white-space: pre-wrap;\n word-break: break-word;\n max-height: 200px;\n overflow-y: auto;\n}\n\n/* Code editor styling within result section */\n.result-section mj-code-editor {\n border: 1px solid #e0e6ed;\n border-radius: 8px;\n overflow: hidden;\n}\n\n.error-content {\n background: #f8d7da;\n border-color: #f5c6cb;\n color: #721c24;\n}\n\n.execution-details {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 16px;\n margin-bottom: 20px;\n}\n\n.detail-row {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n}\n\n.detail-label {\n font-size: 12px;\n font-weight: 600;\n color: #6c757d;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n min-width: 80px;\n}\n\n.detail-value {\n font-size: 14px;\n color: #495057;\n word-break: break-all;\n}\n\n.timeline-actions {\n display: flex;\n gap: 12px;\n justify-content: flex-end;\n}\n\n.btn-primary {\n padding: 8px 16px;\n background: #2196f3;\n color: white;\n border: none;\n border-radius: 8px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n transition: all 0.2s ease;\n}\n\n.btn-primary:hover {\n background: #1976d2;\n transform: translateY(-1px);\n box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);\n}\n\n.btn-primary i {\n font-size: 12px;\n}\n\n/* Enhanced Empty States */\n.empty-state {\n text-align: center;\n padding: 60px 20px;\n color: #6c757d;\n background: #f8f9fa;\n border-radius: 12px;\n border: 2px dashed #dee2e6;\n margin-top: 16px;\n}\n\n.empty-state i {\n font-size: 48px;\n color: #dee2e6;\n margin-bottom: 16px;\n}\n\n.empty-state h4 {\n color: #495057;\n font-weight: 600;\n margin-bottom: 8px;\n font-size: 18px;\n}\n\n.empty-state p {\n font-size: 15px;\n line-height: 1.6;\n max-width: 400px;\n margin: 0 auto 20px auto;\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n /* Header Responsiveness */\n .agent-header {\n padding: 16px;\n }\n \n .agent-header-content {\n flex-direction: column;\n gap: 16px;\n }\n \n .agent-overview {\n flex-direction: column;\n align-items: flex-start;\n gap: 12px;\n }\n \n .agent-meta {\n flex-direction: column;\n align-items: flex-start;\n gap: 8px;\n }\n \n .agent-actions {\n width: 100%;\n align-self: stretch;\n }\n \n .action-button {\n flex: 1;\n justify-content: center;\n }\n \n /* Panel Responsiveness */\n .form-content {\n padding: 12px;\n }\n \n ::ng-deep .k-panelbar > .k-panelbar-item > .k-header {\n padding: 16px 20px;\n font-size: 15px;\n }\n \n .panel-content {\n padding: 20px 16px;\n }\n \n .section-header {\n flex-direction: column;\n align-items: flex-start;\n gap: 12px;\n }\n \n .header-actions {\n flex-wrap: wrap;\n align-self: stretch;\n }\n \n /* Entity List Responsiveness */\n .entity-item {\n padding: 12px;\n gap: 12px;\n }\n \n .item-icon {\n width: 36px;\n height: 36px;\n }\n \n .item-icon i {\n font-size: 16px;\n }\n \n .item-title {\n font-size: 15px;\n }\n \n .item-preview {\n font-size: 13px;\n }\n \n .item-meta {\n gap: 8px;\n }\n \n /* Timeline Responsiveness */\n .timeline-item {\n padding: 12px;\n gap: 12px;\n }\n \n .timeline-marker {\n width: 28px;\n height: 28px;\n }\n \n .timeline-marker i {\n font-size: 12px;\n }\n \n .timeline-title {\n flex-direction: column;\n align-items: flex-start;\n gap: 8px;\n }\n \n .timeline-date {\n align-self: flex-start;\n }\n \n /* Form Field Responsiveness */\n .form-fields-grid {\n grid-template-columns: 1fr;\n gap: 16px;\n }\n \n /* Legacy card support */\n .cards-container {\n grid-template-columns: 1fr;\n }\n}\n\n/* Execution History Panel - Max Height and Scroll */\n.execution-history-panel {\n max-height: 500px;\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n/* Custom scrollbar for execution history */\n.execution-history-panel::-webkit-scrollbar {\n width: 8px;\n}\n\n.execution-history-panel::-webkit-scrollbar-track {\n background: #f1f1f1;\n border-radius: 4px;\n}\n\n.execution-history-panel::-webkit-scrollbar-thumb {\n background: #c1c1c1;\n border-radius: 4px;\n}\n\n.execution-history-panel::-webkit-scrollbar-thumb:hover {\n background: #a0a0a0;\n}\n\n/* New Execution History Card Design */\n.execution-history-list {\n display: flex;\n flex-direction: column;\n gap: 12px;\n margin-top: 16px;\n}\n\n.execution-card {\n background: white;\n border: 1px solid #e0e6ed;\n border-radius: 12px;\n overflow: hidden;\n transition: all 0.2s ease;\n cursor: pointer;\n}\n\n.execution-card:hover {\n border-color: #2196f3;\n box-shadow: 0 4px 12px rgba(33, 150, 243, 0.1);\n transform: translateY(-1px);\n}\n\n.execution-card.expanded {\n border-color: #2196f3;\n box-shadow: 0 6px 20px rgba(33, 150, 243, 0.15);\n}\n\n.execution-header {\n padding: 16px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n}\n\n.execution-left-section {\n display: flex;\n flex-direction: column;\n gap: 12px;\n flex: 1;\n min-width: 0;\n}\n\n.execution-status {\n display: flex;\n align-items: center;\n gap: 12px;\n flex-shrink: 0;\n}\n\n.status-indicator {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n}\n\n.status-indicator i {\n color: white;\n font-size: 14px;\n}\n\n.execution-info {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.execution-title {\n font-size: 16px;\n font-weight: 600;\n color: #2c3e50;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.execution-date {\n font-size: 12px;\n color: #6c757d;\n}\n\n.execution-metrics {\n display: flex;\n align-items: flex-start;\n gap: 16px;\n flex-wrap: wrap;\n margin-left: 44px; /* Align with execution title text, accounting for status indicator + gap */\n}\n\n.metric-item {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 12px;\n background: #f8f9fa;\n padding: 6px 10px;\n border-radius: 6px;\n color: #495057;\n white-space: nowrap;\n}\n\n.metric-item i {\n color: #6c757d;\n font-size: 12px;\n}\n\n.metric-label {\n font-weight: 500;\n}\n\n.metric-value {\n font-weight: 600;\n color: #2c3e50;\n}\n\n.execution-actions {\n display: flex;\n gap: 8px;\n flex-shrink: 0;\n}\n\n.action-btn {\n width: 32px;\n height: 32px;\n border: none;\n background: #f8f9fa;\n border-radius: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.2s ease;\n color: #6c757d;\n}\n\n.action-btn:hover {\n background: #2196f3;\n color: white;\n transform: translateY(-1px);\n}\n\n.action-btn i {\n font-size: 12px;\n}\n\n.expand-icon {\n transition: transform 0.2s ease;\n color: #6c757d;\n margin-right: 4px;\n}\n\n.expand-icon.expanded {\n transform: rotate(90deg);\n}\n\n/* Execution Expanded Content */\n.execution-expanded-content {\n padding: 16px;\n border-top: 1px solid #f0f4f8;\n background: #fafbfc;\n animation: slideDown 0.2s ease;\n}\n\n@keyframes slideDown {\n from {\n opacity: 0;\n max-height: 0;\n padding-top: 0;\n padding-bottom: 0;\n }\n to {\n opacity: 1;\n max-height: 500px;\n padding-top: 16px;\n padding-bottom: 16px;\n }\n}\n\n.detailed-metrics {\n margin-bottom: 20px;\n}\n\n.metrics-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 12px;\n}\n\n.metric-detail {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px;\n background: white;\n border: 1px solid #e0e6ed;\n border-radius: 8px;\n}\n\n.metric-detail i {\n color: #2196f3;\n font-size: 16px;\n width: 20px;\n text-align: center;\n}\n\n.metric-info {\n display: flex;\n flex-direction: column;\n gap: 2px;\n flex: 1;\n}\n\n.metric-title {\n font-size: 11px;\n font-weight: 600;\n color: #6c757d;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.metric-data {\n font-size: 14px;\n font-weight: 600;\n color: #2c3e50;\n}\n\n.result-section {\n margin-top: 16px;\n}\n\n.result-section h5 {\n font-size: 14px;\n font-weight: 600;\n color: #495057;\n margin-bottom: 8px;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.error-section h5 {\n color: #dc3545;\n}\n\n.error-content {\n background: #f8d7da;\n border: 1px solid #f5c6cb;\n border-radius: 8px;\n padding: 12px 16px;\n font-size: 14px;\n line-height: 1.6;\n color: #721c24;\n white-space: pre-wrap;\n word-break: break-word;\n max-height: 150px;\n overflow-y: auto;\n}\n\n/* Responsive adjustments for execution history */\n@media (max-width: 768px) {\n .execution-header {\n flex-direction: column;\n align-items: flex-start;\n gap: 12px;\n }\n \n .execution-left-section {\n width: 100%;\n }\n \n .execution-metrics {\n margin-left: 0; /* Remove left margin on mobile */\n flex-direction: column;\n align-items: flex-start;\n gap: 8px;\n width: 100%;\n }\n \n .metric-item {\n font-size: 11px;\n padding: 4px 8px;\n }\n \n .metrics-grid {\n grid-template-columns: 1fr;\n }\n}\n\n/* === PAYLOAD MANAGEMENT SECTION === */\n.payload-section {\n margin-bottom: 2rem;\n background: white;\n border-radius: 12px;\n border: 1px solid #e0e0e0;\n overflow: hidden;\n}\n\n.payload-section-title {\n margin: 0;\n padding: 1rem 1.5rem;\n background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n border-bottom: 1px solid #e0e0e0;\n color: #495057;\n font-size: 1.1rem;\n font-weight: 600;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n.payload-section-title i {\n color: #2196f3;\n font-size: 1.2rem;\n}\n\n/* Payload Scope Styling */\n.payload-field-container {\n padding: 1.5rem;\n display: grid;\n grid-template-columns: 1fr 2fr;\n gap: 2rem;\n align-items: start;\n}\n\n.payload-field-info {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.payload-field-label {\n font-weight: 600;\n color: #495057;\n font-size: 0.95rem;\n}\n\n.payload-field-description {\n color: #6c757d;\n font-size: 0.9rem;\n line-height: 1.5;\n margin: 0;\n}\n\n.payload-field-input {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.payload-field-example {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 0.85rem;\n color: #6c757d;\n background: #f8f9fa;\n padding: 0.5rem 0.75rem;\n border-radius: 6px;\n border: 1px solid #e9ecef;\n}\n\n.payload-field-example i {\n color: #ffc107;\n font-size: 0.9rem;\n}\n\n.payload-field-example code {\n background: #e9ecef;\n padding: 0.2rem 0.4rem;\n border-radius: 4px;\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 0.8rem;\n color: #495057;\n}\n\n/* Path Configuration Grid */\n.payload-paths-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n gap: 1.5rem;\n padding: 1.5rem;\n}\n\n.payload-path-card {\n background: white;\n border: 1px solid #e0e0e0;\n border-radius: 8px;\n overflow: hidden;\n transition: all 0.2s ease;\n}\n\n.payload-path-card:hover {\n border-color: #2196f3;\n box-shadow: 0 4px 12px rgba(33, 150, 243, 0.15);\n}\n\n.payload-path-header {\n display: flex;\n align-items: center;\n gap: 1rem;\n padding: 1rem;\n background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n border-bottom: 1px solid #e0e0e0;\n}\n\n.payload-path-icon {\n width: 40px;\n height: 40px;\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.payload-path-icon.downstream {\n background: linear-gradient(135deg, #28a745, #20c997);\n}\n\n.payload-path-icon.upstream {\n background: linear-gradient(135deg, #007bff, #6610f2);\n}\n\n.payload-path-icon.self-read {\n background: linear-gradient(135deg, #17a2b8, #20c997);\n}\n\n.payload-path-icon.self-write {\n background: linear-gradient(135deg, #ffc107, #fd7e14);\n}\n\n.payload-path-icon i {\n color: white;\n font-size: 1.2rem;\n}\n\n.payload-path-info h4 {\n margin: 0 0 0.25rem 0;\n font-size: 1rem;\n font-weight: 600;\n color: #495057;\n}\n\n.payload-path-info p {\n margin: 0;\n font-size: 0.85rem;\n color: #6c757d;\n line-height: 1.4;\n}\n\n.payload-path-content {\n padding: 1rem;\n}\n\n.json-editor-container {\n border: 1px solid #dee2e6;\n border-radius: 6px;\n overflow: hidden;\n margin-bottom: 0.75rem;\n}\n\n.json-editor-container:hover {\n border-color: #2196f3;\n}\n\n.payload-path-hint {\n display: flex;\n align-items: flex-start;\n gap: 0.5rem;\n font-size: 0.8rem;\n color: #6c757d;\n line-height: 1.4;\n}\n\n.payload-path-hint i {\n color: #17a2b8;\n margin-top: 0.1rem;\n flex-shrink: 0;\n}\n\n.payload-path-hint code {\n background: #e9ecef;\n padding: 0.1rem 0.3rem;\n border-radius: 3px;\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 0.75rem;\n color: #495057;\n}\n\n/* Payload Validation Container */\n.payload-validation-container {\n padding: 1.5rem;\n display: grid;\n grid-template-columns: 1fr 2fr;\n gap: 2rem;\n align-items: start;\n}\n\n.payload-validation-settings {\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n}\n\n.validation-field-group {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.validation-field-label {\n font-weight: 600;\n color: #495057;\n font-size: 0.95rem;\n}\n\n.validation-field-description {\n color: #6c757d;\n font-size: 0.9rem;\n line-height: 1.4;\n margin: 0 0 0.5rem 0;\n}\n\n.payload-validation-schema {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n}\n\n.validation-schema-label {\n font-weight: 600;\n color: #495057;\n font-size: 0.95rem;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n.validation-schema-label i {\n color: #2196f3;\n}\n\n.validation-schema-description {\n color: #6c757d;\n font-size: 0.9rem;\n line-height: 1.4;\n margin: 0;\n}\n\n.validation-schema-editor {\n border: 1px solid #dee2e6;\n border-radius: 6px;\n overflow: hidden;\n}\n\n.validation-schema-editor:hover {\n border-color: #2196f3;\n}\n\n/* === CONFIGURATION SECTION === */\n.config-section {\n margin-bottom: 2rem;\n background: white;\n border-radius: 12px;\n border: 1px solid #e0e0e0;\n overflow: hidden;\n}\n\n.config-section-title {\n margin: 0;\n padding: 1rem 1.5rem;\n background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n border-bottom: 1px solid #e0e0e0;\n color: #495057;\n font-size: 1.1rem;\n font-weight: 600;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n.config-section-title i {\n color: #2196f3;\n font-size: 1.2rem;\n}\n\n.config-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));\n gap: 1.5rem;\n padding: 1.5rem;\n width: 100%;\n}\n\n.config-card {\n background: white;\n border: 1px solid #e0e0e0;\n border-radius: 8px;\n overflow: hidden;\n transition: all 0.2s ease;\n}\n\n.config-card:hover {\n border-color: #2196f3;\n box-shadow: 0 4px 12px rgba(33, 150, 243, 0.15);\n}\n\n.config-card.full-width {\n grid-column: 1 / -1;\n}\n\n.config-card-header {\n display: flex;\n align-items: center;\n gap: 1rem;\n padding: 1rem;\n background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n border-bottom: 1px solid #e0e0e0;\n}\n\n.config-card-icon {\n width: 40px;\n height: 40px;\n border-radius: 8px;\n background: linear-gradient(135deg, #2196f3, #1976d2);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.config-card-icon i {\n color: white;\n font-size: 1.2rem;\n}\n\n.config-card-info h4 {\n margin: 0 0 0.25rem 0;\n font-size: 1rem;\n font-weight: 600;\n color: #495057;\n}\n\n.config-card-info p {\n margin: 0;\n font-size: 0.85rem;\n color: #6c757d;\n line-height: 1.4;\n}\n\n.config-card-content {\n padding: 1rem;\n}\n\n/* Custom field styling for config cards */\n.config-field-input {\n width: 100%;\n min-width: 250px;\n}\n\n/* Fix numeric textbox cutoff issue */\n.config-card-content ::ng-deep kendo-numerictextbox {\n width: 100% !important;\n}\n\n.config-card-content ::ng-deep kendo-numerictextbox .k-numerictextbox {\n width: 100% !important;\n}\n\n.config-card-content ::ng-deep kendo-numerictextbox .k-input {\n width: 100% !important;\n min-width: 200px !important;\n}\n\n.config-card-content ::ng-deep mj-form-field {\n width: 100% !important;\n}\n\n.config-card-content ::ng-deep mj-form-field kendo-numerictextbox {\n width: 100% !important;\n}\n\n.config-card-content ::ng-deep mj-form-field kendo-numerictextbox .k-numerictextbox {\n width: 100% !important;\n}\n\n.config-card-content ::ng-deep mj-form-field kendo-numerictextbox .k-input {\n width: 100% !important;\n min-width: 200px !important;\n}\n\n.config-field-display {\n color: #495057;\n font-size: 14px;\n font-weight: 500;\n padding: 8px 0;\n display: block;\n min-height: 20px;\n}\n\n/* Prompt selector styling */\n.prompt-selector-container {\n display: flex;\n align-items: center;\n gap: 12px;\n width: 100%;\n}\n\n.prompt-display {\n flex: 1;\n min-width: 0;\n padding: 8px 12px;\n background: #f8f9fa;\n border: 1px solid #dee2e6;\n border-radius: 6px;\n}\n\n.prompt-name {\n color: #495057;\n font-weight: 500;\n font-size: 14px;\n}\n\n.no-prompt {\n color: #6c757d;\n font-style: italic;\n font-size: 14px;\n}\n\n.prompt-actions {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-shrink: 0;\n}\n\n.prompt-select-btn {\n white-space: nowrap;\n}\n\n.prompt-clear-btn {\n min-width: 32px;\n}\n\n.config-card-hint {\n display: flex;\n align-items: flex-start;\n gap: 0.5rem;\n font-size: 0.8rem;\n color: #6c757d;\n line-height: 1.4;\n margin-top: 0.5rem;\n}\n\n.config-card-hint i {\n color: #17a2b8;\n margin-top: 0.1rem;\n flex-shrink: 0;\n}\n\n.config-card-hint code {\n background: #e9ecef;\n padding: 0.1rem 0.3rem;\n border-radius: 3px;\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 0.75rem;\n color: #495057;\n}\n\n\n/* === RESPONSIVE DESIGN === */\n@media (max-width: 768px) {\n .payload-field-container,\n .payload-validation-container {\n grid-template-columns: 1fr;\n gap: 1rem;\n }\n \n .payload-paths-grid {\n grid-template-columns: 1fr;\n gap: 1rem;\n padding: 1rem;\n }\n \n .config-grid {\n grid-template-columns: 1fr;\n gap: 1rem;\n padding: 1rem;\n }\n \n .payload-section-title,\n .config-section-title {\n padding: 0.75rem 1rem;\n font-size: 1rem;\n }\n \n .payload-path-header,\n .config-card-header {\n padding: 0.75rem;\n }\n \n .payload-path-content,\n .config-card-content {\n padding: 0.75rem;\n }\n \n .payload-field-container,\n .payload-validation-container {\n padding: 1rem;\n }\n}\n\n"] }]
3831
+ args: [{ selector: 'mj-ai-agent-form', template: "<div class=\"record-form-container\">\n <!-- Dialog container for Kendo dialogs -->\n <div kendoDialogContainer></div>\n <!-- Window container for Kendo windows -->\n <div kendoWindowContainer></div>\n <form *ngIf=\"record\" class=\"record-form\" #form=\"ngForm\">\n <mj-form-toolbar [form]=\"this\"></mj-form-toolbar>\n\n <!-- Compact Header with Agent Overview -->\n <div class=\"agent-header\">\n <div class=\"agent-header-content\">\n <div class=\"agent-overview\">\n <div class=\"agent-icon-wrapper\">\n @if (hasLogoURL()) {\n <img [src]=\"record.LogoURL\" [alt]=\"record.Name + ' logo'\" class=\"agent-logo\">\n } @else {\n <i [class]=\"getAgentIcon()\"></i>\n }\n </div>\n <div class=\"agent-info\">\n @if (EditMode) {\n <kendo-textbox [(ngModel)]=\"record.Name\" \n name=\"agentName\"\n placeholder=\"Enter agent name...\"\n class=\"agent-name-input\">\n </kendo-textbox>\n } @else {\n <h1 class=\"agent-name\">{{ record.Name || 'Untitled AI Agent' }}</h1>\n }\n <div class=\"agent-meta\">\n @if (record.Status) {\n <span class=\"status-badge\" [style.background-color]=\"getStatusBadgeColor()\">\n <i class=\"fa-solid fa-circle\"></i>\n {{ record.Status }}\n </span>\n }\n @if (record.Type) {\n <span class=\"execution-mode\">\n Agent Type: {{ record.Type }}\n </span>\n }\n @if (record.Parent) {\n <span class=\"parent-agent\">\n <i class=\"fa-solid fa-sitemap\"></i>\n Child of {{ record.Parent }}\n </span>\n }\n </div>\n </div>\n </div>\n \n <!-- Action Buttons -->\n <div class=\"agent-actions\">\n @if (record.ID) {\n <button kendoButton themeColor=\"primary\" size=\"large\"\n (click)=\"openTestHarness()\"\n [disabled]=\"record.Status !== 'Active'\"\n title=\"Run this AI agent\">\n <i class=\"fa-solid fa-play\"></i>\n Run\n </button>\n }\n <button kendoButton fillMode=\"outline\" size=\"small\" (click)=\"refreshRelatedData()\" title=\"Refresh all data\">\n <i class=\"fa-solid fa-refresh\"></i>\n </button>\n </div>\n </div>\n </div>\n\n <!-- Single Pane Layout with Expander Panels -->\n <div class=\"form-content\">\n <kendo-panelbar [keepItemContent]=\"true\">\n <!-- Custom Agent Type Section (if defined) -->\n @if (record.ID && agentType && agentType.UIFormSectionKey) {\n <kendo-panelbar-item \n [expanded]=\"agentType.UIFormSectionExpandedByDefault\" \n (stateChange)=\"onCustomSectionStateChange($event)\">\n <ng-template kendoPanelBarItemTitle>\n <i class=\"fa-solid fa-puzzle-piece\"></i> {{ agentType.Name }} Configuration\n </ng-template>\n <ng-template kendoPanelBarContent>\n <div class=\"panel-content custom-agent-type-section\" [style.display]=\"'block'\">\n <ng-container #customSectionContainer></ng-container>\n </div>\n </ng-template>\n </kendo-panelbar-item>\n }\n\n <!-- Requests & History -->\n @if (record.ID) {\n <kendo-panelbar-item [expanded]=\"false\" [disabled]=\"loadingStates.executionHistory\">\n <ng-template kendoPanelBarItemTitle>\n <i class=\"fa-solid fa-history\"></i> Execution History\n @if (loadingStates.executionHistory) {\n <span style=\"margin-left: 8px;\"><i class=\"fa-solid fa-spinner fa-spin\" style=\"font-size: 12px;\"></i></span>\n } @else if (executionHistoryCount > 0) {\n <span> ({{ executionHistoryCount }})</span>\n }\n </ng-template>\n <ng-template kendoPanelBarContent>\n <div class=\"panel-content execution-history-panel\">\n \n @if (executionHistoryCount === 0) {\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-history\"></i>\n <h4>No Execution History</h4>\n <p>This agent hasn't been executed yet. Use the Test Agent button to run the agent and see execution history here.</p>\n </div>\n } @else {\n <div class=\"execution-history-list\">\n @for (execution of recentExecutions; track execution.ID) {\n <div class=\"execution-card\" [class.expanded]=\"expandedExecutions[execution.ID]\">\n <div class=\"execution-header\" (click)=\"toggleExecutionExpanded(execution.ID)\">\n <div class=\"execution-left-section\">\n <div class=\"execution-status\">\n <div class=\"status-indicator\" [style.background-color]=\"getExecutionStatusColor(execution.Status)\">\n <i [class]=\"getExecutionStatusIcon(execution.Status)\"></i>\n </div>\n <div class=\"execution-info\">\n <div class=\"execution-title\">\n <i class=\"fa-solid fa-chevron-right expand-icon\" [class.expanded]=\"expandedExecutions[execution.ID]\"></i>\n Execution #{{ execution.ID.substring(0, 8) }}\n </div>\n <div class=\"execution-date\">{{ execution.__mj_CreatedAt | date:'MMM d, h:mm a' }}</div>\n </div>\n </div>\n \n <div class=\"execution-metrics\">\n @if (execution.Configuration) {\n <div class=\"metric-item\">\n <i class=\"fa-solid fa-cog\"></i>\n <span class=\"metric-label\">Config:</span>\n <span class=\"metric-value\">{{ execution.Configuration }}</span>\n </div>\n }\n \n @if (execution.CompletedAt) {\n <div class=\"metric-item\">\n <i class=\"fa-solid fa-stopwatch\"></i>\n <span class=\"metric-label\">Duration:</span>\n <span class=\"metric-value\">{{ formatExecutionTimeFromDates(execution.StartedAt, execution.CompletedAt) }}</span>\n </div>\n } @else if (execution.Status === 'Running') {\n <div class=\"metric-item\">\n <i class=\"fa-solid fa-clock\"></i>\n <span class=\"metric-label\">Running:</span>\n <span class=\"metric-value\">{{ getRunningTime(execution.StartedAt) }}</span>\n </div>\n }\n \n @if (execution.TotalTokensUsedRollup || execution.TotalTokensUsed) {\n <div class=\"metric-item\">\n <i class=\"fa-solid fa-microchip\"></i>\n <span class=\"metric-label\">Tokens:</span>\n <span class=\"metric-value\">{{ formatTokenCount(execution.TotalTokensUsedRollup || execution.TotalTokensUsed) }}</span>\n </div>\n }\n \n @if (execution.TotalCostRollup || execution.TotalCost) {\n <div class=\"metric-item\">\n <i class=\"fa-solid fa-dollar-sign\"></i>\n <span class=\"metric-label\">Cost:</span>\n <span class=\"metric-value\">${{ formatCost(execution.TotalCostRollup || execution.TotalCost) }}</span>\n </div>\n }\n </div>\n </div>\n \n <div class=\"execution-actions\">\n <button class=\"action-btn\" (click)=\"openExecutionRecord(execution.ID); $event.stopPropagation()\" title=\"View details\">\n <i class=\"fa-solid fa-external-link-alt\"></i>\n </button>\n </div>\n </div>\n @if (expandedExecutions[execution.ID]) {\n <div class=\"execution-expanded-content\">\n <!-- Detailed Metrics -->\n <div class=\"detailed-metrics\">\n <div class=\"metrics-grid\">\n <div class=\"metric-detail\">\n <i class=\"fa-solid fa-clock\"></i>\n <div class=\"metric-info\">\n <span class=\"metric-title\">Started</span>\n <span class=\"metric-data\">{{ execution.StartedAt | date:'medium' }}</span>\n </div>\n </div>\n \n @if (execution.CompletedAt) {\n <div class=\"metric-detail\">\n <i class=\"fa-solid fa-check-circle\"></i>\n <div class=\"metric-info\">\n <span class=\"metric-title\">Completed</span>\n <span class=\"metric-data\">{{ execution.CompletedAt | date:'medium' }}</span>\n </div>\n </div>\n }\n \n @if (execution.TotalTokensUsed) {\n <div class=\"metric-detail\">\n <i class=\"fa-solid fa-microchip\"></i>\n <div class=\"metric-info\">\n <span class=\"metric-title\">Direct Tokens</span>\n <span class=\"metric-data\">{{ formatTokenCount(execution.TotalTokensUsed) }}</span>\n </div>\n </div>\n }\n \n @if (execution.TotalTokensUsedRollup && execution.TotalTokensUsedRollup !== execution.TotalTokensUsed) {\n <div class=\"metric-detail\">\n <i class=\"fa-solid fa-sitemap\"></i>\n <div class=\"metric-info\">\n <span class=\"metric-title\">Total + Sub-agents</span>\n <span class=\"metric-data\">{{ formatTokenCount(execution.TotalTokensUsedRollup) }}</span>\n </div>\n </div>\n }\n \n @if (execution.TotalCost) {\n <div class=\"metric-detail\">\n <i class=\"fa-solid fa-dollar-sign\"></i>\n <div class=\"metric-info\">\n <span class=\"metric-title\">Direct Cost</span>\n <span class=\"metric-data\">${{ formatCost(execution.TotalCost) }}</span>\n </div>\n </div>\n }\n \n @if (execution.TotalCostRollup && execution.TotalCostRollup !== execution.TotalCost) {\n <div class=\"metric-detail\">\n <i class=\"fa-solid fa-calculator\"></i>\n <div class=\"metric-info\">\n <span class=\"metric-title\">Total + Sub-agents</span>\n <span class=\"metric-data\">${{ formatCost(execution.TotalCostRollup) }}</span>\n </div>\n </div>\n }\n \n @if (execution.ConversationID) {\n <div class=\"metric-detail\">\n <i class=\"fa-solid fa-comments\"></i>\n <div class=\"metric-info\">\n <span class=\"metric-title\">Conversation</span>\n <span class=\"metric-data\">{{ execution.ConversationID.substring(0, 8) }}...</span>\n </div>\n </div>\n }\n </div>\n </div>\n \n @if (execution.Result) {\n <div class=\"result-section\">\n <h5><i class=\"fa-solid fa-file-text\"></i> Result</h5>\n <mj-code-editor \n [value]=\"getExecutionResultPreview(execution, false)\"\n [readonly]=\"true\"\n language=\"json\"\n [lineWrapping]=\"true\"\n style=\"max-height: 200px; width: 100%;\">\n </mj-code-editor>\n </div>\n }\n \n @if (execution.ErrorMessage) {\n <div class=\"error-section\">\n <h5><i class=\"fa-solid fa-exclamation-triangle\"></i> Error</h5>\n <div class=\"error-content\">{{ execution.ErrorMessage }}</div>\n </div>\n }\n </div>\n }\n </div>\n }\n @if (executionHistoryCount > recentExecutions.length) {\n <div class=\"view-more-item\" (click)=\"navigateToEntity('MJ: AI Agent Runs', '')\">\n <span>View all {{ executionHistoryCount }} executions...</span>\n </div>\n }\n </div>\n }\n </div>\n </ng-template>\n </kendo-panelbar-item>\n }\n\n <!-- Actions -->\n @if (record.ID) {\n <kendo-panelbar-item [expanded]=\"false\" [disabled]=\"loadingStates.actions\">\n <ng-template kendoPanelBarItemTitle>\n <i class=\"fa-solid fa-bolt\"></i> Actions\n @if (loadingStates.actions) {\n <span style=\"margin-left: 8px;\"><i class=\"fa-solid fa-spinner fa-spin\" style=\"font-size: 12px;\"></i></span>\n } @else if (actionCount > 0) {\n <span> ({{ actionCount }})</span>\n }\n </ng-template>\n <ng-template kendoPanelBarContent>\n <div class=\"panel-content\">\n @if (loadingStates.actions) {\n <div class=\"loading-state\">\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n <p>Loading actions...</p>\n </div>\n } @else {\n <div class=\"section-header\">\n <div class=\"header-actions\">\n @if (EditMode && UserCanCreateActions) {\n <button kendoButton themeColor=\"primary\" size=\"small\" (click)=\"configureActions()\">\n <i class=\"fa-solid fa-plus\"></i> Add Action\n </button>\n }\n </div>\n </div>\n \n @if (actionCount === 0) {\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-bolt\"></i>\n <h4>No Actions Configured</h4>\n <p>Add actions to enable this agent to perform specific tasks and operations.</p>\n @if (EditMode && UserCanCreateActions) {\n <button kendoButton themeColor=\"primary\" (click)=\"configureActions()\">\n <i class=\"fa-solid fa-plus\"></i> Configure First Action\n </button>\n }\n </div>\n } @else {\n <div class=\"entity-list\">\n @for (action of agentActions; track action.ID) {\n <div class=\"entity-item action-item\" (click)=\"navigateToEntity('Actions', action.ID)\">\n <div class=\"item-icon\">\n <i [class]=\"getActionIcon(action)\"></i>\n </div>\n <div class=\"item-content\">\n <div class=\"item-title\">{{ action.Name || 'Untitled Action' }}</div>\n @if (action.Description) {\n <div class=\"item-preview\">{{ action.Description }}</div>\n }\n <div class=\"item-meta\">\n @if (action.Type) {\n <span class=\"meta-tag\">{{ action.Type }}</span>\n }\n <span class=\"status-tag\" [class.active]=\"action.Status==='Active'\" [class.inactive]=\"action.Status!=='Active'\">\n <i class=\"fa-solid\" [class.fa-check-circle]=\"action.Status==='Active'\" [class.fa-times-circle]=\"action.Status!=='Active'\"></i>\n {{ action.Status }}\n </span>\n </div>\n </div>\n <div class=\"item-actions\">\n @if (EditMode && UserCanDeleteActions) {\n <button kendoButton\n fillMode=\"flat\" \n themeColor=\"error\" \n size=\"small\"\n (click)=\"removeAction(action, $event)\"\n title=\"Remove action\">\n <i class=\"fa-solid fa-trash\"></i>\n </button>\n }\n <i class=\"fa-solid fa-external-link\"></i>\n </div>\n </div>\n }\n @if (actionCount > agentActions.length) {\n <div class=\"view-more-item\" (click)=\"navigateToEntity('AI Agent Actions', '')\">\n <span>View all {{ actionCount }} actions...</span>\n </div>\n }\n </div>\n }\n }\n </div>\n </ng-template>\n </kendo-panelbar-item>\n }\n\n <!-- Sub-Agents -->\n @if (record.ID) {\n <kendo-panelbar-item [expanded]=\"false\" [disabled]=\"loadingStates.subAgents\">\n <ng-template kendoPanelBarItemTitle>\n <i class=\"fa-solid fa-sitemap\"></i> Sub-Agents\n @if (loadingStates.subAgents) {\n <span style=\"margin-left: 8px;\"><i class=\"fa-solid fa-spinner fa-spin\" style=\"font-size: 12px;\"></i></span>\n } @else if (subAgentCount > 0) {\n <span> ({{ subAgentCount }})</span>\n }\n </ng-template>\n <ng-template kendoPanelBarContent>\n <div class=\"panel-content\">\n <div class=\"section-header\">\n <div class=\"section-description\">\n Manage hierarchical relationships with child agents that work under this agent.\n </div>\n <div class=\"header-actions\">\n @if (EditMode && UserCanCreateSubAgents) {\n <button kendoButton themeColor=\"primary\" size=\"small\" (click)=\"addSubAgents()\">\n <i class=\"fa-solid fa-plus\"></i> Add Subagent\n </button>\n <button kendoButton themeColor=\"secondary\" size=\"small\" (click)=\"createSubAgent()\">\n <i class=\"fa-solid fa-plus\"></i> Create Sub-Agent\n </button>\n }\n </div>\n </div>\n \n @if (subAgentCount === 0) {\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-sitemap\"></i>\n <h4>No Sub-Agents</h4>\n <p>Create sub-agents to build a hierarchical structure for complex workflows.</p>\n @if (EditMode && UserCanCreateSubAgents) {\n <button kendoButton themeColor=\"primary\" (click)=\"addSubAgents()\">\n <i class=\"fa-solid fa-plus\"></i> Add Subagent\n </button>\n <button kendoButton themeColor=\"secondary\" (click)=\"createSubAgent()\">\n <i class=\"fa-solid fa-plus\"></i> Create First Sub-Agent\n </button>\n }\n </div>\n } @else {\n <div class=\"entity-list\">\n @for (subAgent of subAgents; track subAgent.ID) {\n <div class=\"entity-item sub-agent-item\" (click)=\"navigateToEntity('AI Agents', subAgent.ID)\">\n <div class=\"item-icon\">\n @if (hasSubAgentLogoURL(subAgent)) {\n <img [src]=\"subAgent.LogoURL\" [alt]=\"subAgent.Name + ' logo'\" class=\"sub-agent-logo\">\n } @else {\n <i [class]=\"getSubAgentIcon(subAgent)\"></i>\n }\n </div>\n <div class=\"item-content\">\n <div class=\"item-title\">{{ subAgent.Name || 'Untitled Sub-Agent' }}</div>\n @if (subAgent.Description) {\n <div class=\"item-preview\">{{ subAgent.Description }}</div>\n }\n <div class=\"item-meta\">\n @if (subAgent.Status) {\n <span class=\"status-tag\" [style.background-color]=\"getStatusBadgeColor()\">\n {{ subAgent.Status }}\n </span>\n }\n @if (subAgent.ExecutionMode) {\n <span class=\"meta-tag\">{{ subAgent.ExecutionMode }}</span>\n }\n </div>\n </div>\n <div class=\"item-actions\">\n @if (EditMode && UserCanCreateSubAgents) {\n <button kendoButton\n fillMode=\"flat\" \n themeColor=\"primary\" \n size=\"small\"\n (click)=\"openSubAgentAdvancedSettings(subAgent, $event)\"\n title=\"Advanced settings\">\n <i class=\"fa-solid fa-cog\"></i>\n </button>\n }\n @if (EditMode && UserCanDeleteSubAgents) {\n <button kendoButton\n fillMode=\"flat\" \n themeColor=\"error\" \n size=\"small\"\n (click)=\"removeSubAgent(subAgent, $event)\"\n title=\"Remove sub-agent\">\n <i class=\"fa-solid fa-trash\"></i>\n </button>\n }\n <i class=\"fa-solid fa-external-link\"></i>\n </div>\n </div>\n }\n @if (subAgentCount > subAgents.length) {\n <div class=\"view-more-item\" (click)=\"navigateToEntity('AI Agents', '')\">\n <span>View all {{ subAgentCount }} sub-agents...</span>\n </div>\n }\n </div>\n }\n </div>\n </ng-template>\n </kendo-panelbar-item>\n }\n\n <!-- Prompts (With Model Selection) -->\n @if (record.ID) {\n <kendo-panelbar-item [expanded]=\"false\" [disabled]=\"loadingStates.prompts\">\n <ng-template kendoPanelBarItemTitle>\n <i class=\"fa-solid fa-comments\"></i> Prompts\n @if (loadingStates.prompts) {\n <span style=\"margin-left: 8px;\"><i class=\"fa-solid fa-spinner fa-spin\" style=\"font-size: 12px;\"></i></span>\n } @else if (promptCount > 0) {\n <span> ({{ promptCount }})</span>\n }\n </ng-template>\n <ng-template kendoPanelBarContent>\n <div class=\"panel-content\">\n <div class=\"section-header\">\n <div class=\"prompt-controls\">\n <!-- Model Selection Mode Control -->\n <div class=\"model-selection-mode\">\n <label class=\"model-selection-label\">\n <i class=\"fa-solid fa-sliders\"></i>\n Model Selection:\n </label>\n @if (EditMode) {\n <kendo-dropdownlist\n [(ngModel)]=\"record.ModelSelectionMode\"\n name=\"modelSelectionMode\"\n [data]=\"modelSelectionModes\"\n textField=\"text\"\n valueField=\"value\"\n [valuePrimitive]=\"true\"\n class=\"model-selection-dropdown\">\n </kendo-dropdownlist>\n } @else {\n <span class=\"model-selection-value\">{{ record.ModelSelectionMode || 'Agent Type' }}</span>\n }\n </div>\n </div>\n <div class=\"header-actions\">\n @if (EditMode && UserCanCreateNewPrompts) {\n <button kendoButton themeColor=\"primary\" size=\"small\" (click)=\"addPrompt()\">\n <i class=\"fa-solid fa-plus\"></i> Add Prompt\n </button>\n }\n </div>\n </div>\n \n @if (promptCount === 0) {\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-comments\"></i>\n <h4>No Prompts Configured</h4>\n <p>Add prompts to define how this agent processes requests and generates responses.</p>\n @if (EditMode && UserCanCreateNewPrompts) {\n <button kendoButton themeColor=\"primary\" (click)=\"addPrompt()\">\n <i class=\"fa-solid fa-plus\"></i> Create First Prompt\n </button>\n }\n </div>\n } @else {\n <div class=\"entity-list\">\n @for (prompt of agentPrompts; track prompt.ID) {\n <div class=\"entity-item prompt-item\" (click)=\"navigateToEntity('AI Prompts', prompt.ID)\">\n <div class=\"item-icon\">\n <i class=\"fa-solid fa-comment-dots\"></i>\n </div>\n <div class=\"item-content\">\n <div class=\"item-title\">{{ prompt.Name }}</div>\n @if (prompt.TemplateText) {\n <div class=\"item-preview\">{{ prompt.TemplateText.substring(0, 120) }}{{ prompt.TemplateText.length > 120 ? '...' : '' }}</div>\n }\n <div class=\"item-meta\">\n @if (prompt.PromptRole) {\n <span class=\"meta-tag\">{{ prompt.PromptRole }}</span>\n }\n </div>\n </div>\n <div class=\"item-actions\">\n @if (EditMode && UserCanCreatePrompts) {\n <button kendoButton\n fillMode=\"flat\" \n themeColor=\"primary\" \n size=\"small\"\n (click)=\"openPromptAdvancedSettings(prompt, $event)\"\n title=\"Advanced settings\">\n <i class=\"fa-solid fa-cog\"></i>\n </button>\n }\n @if (EditMode && UserCanDeletePrompts) {\n <button kendoButton\n fillMode=\"flat\" \n themeColor=\"error\" \n size=\"small\"\n (click)=\"removePrompt(prompt, $event)\"\n title=\"Remove prompt\">\n <i class=\"fa-solid fa-trash\"></i>\n </button>\n }\n <i class=\"fa-solid fa-external-link\"></i>\n </div>\n </div>\n }\n @if (promptCount > agentPrompts.length) {\n <div class=\"view-more-item\" (click)=\"navigateToEntity('AI Prompts', '')\">\n <span>View all {{ promptCount }} prompts...</span>\n </div>\n }\n </div>\n }\n </div>\n </ng-template>\n </kendo-panelbar-item>\n }\n\n\n <!-- Learning & Analytics -->\n @if (record.ID) {\n <kendo-panelbar-item [expanded]=\"false\" [disabled]=\"loadingStates.learningCycles\">\n <ng-template kendoPanelBarItemTitle>\n <i class=\"fa-solid fa-brain\"></i> Learning Cycles{{ learningCycleCount > 0 ? ' (' + learningCycleCount + ')' : '' }}\n </ng-template>\n <ng-template kendoPanelBarContent>\n <div class=\"panel-content\">\n <div class=\"section-header\">\n <div class=\"section-description\">\n Monitor and manage learning cycles, training sessions, and performance analytics.\n </div>\n </div>\n \n @if (learningCycleCount === 0) {\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-brain\"></i>\n <h4>No Learning Cycles</h4>\n <p>Learning cycles will appear here as the agent processes requests and improves over time.</p>\n </div>\n } @else {\n <div class=\"entity-list\">\n @for (cycle of learningCycles; track cycle.ID) {\n <div class=\"entity-item learning-item\" (click)=\"navigateToEntity('AI Agent Learning Cycles', cycle.ID)\">\n <div class=\"item-icon\">\n <i class=\"fa-solid fa-brain\"></i>\n </div>\n <div class=\"item-content\">\n <div class=\"item-title\">Learning Cycle {{ cycle.ID.substring(0, 8) }}</div>\n <div class=\"item-meta\">\n @if (cycle.StartedAt) {\n <span class=\"meta-tag\">\n <i class=\"fa-solid fa-calendar\"></i>\n {{ cycle.StartedAt | date:'short' }}\n </span>\n }\n @if (cycle.Status) {\n <span class=\"status-tag\">{{ cycle.Status }}</span>\n }\n </div>\n </div>\n <div class=\"item-actions\">\n <i class=\"fa-solid fa-external-link\"></i>\n </div>\n </div>\n }\n @if (learningCycleCount > learningCycles.length) {\n <div class=\"view-more-item\" (click)=\"navigateToEntity('AI Agent Learning Cycles', '')\">\n <span>View all {{ learningCycleCount }} cycles...</span>\n </div>\n }\n </div>\n }\n </div>\n </ng-template>\n </kendo-panelbar-item>\n }\n\n <!-- Notes & Documentation -->\n @if (record.ID) {\n <kendo-panelbar-item [expanded]=\"false\" [disabled]=\"loadingStates.notes\">\n <ng-template kendoPanelBarItemTitle>\n <i class=\"fa-solid fa-sticky-note\"></i> Notes{{ noteCount > 0 ? ' (' + noteCount + ')' : '' }}\n </ng-template>\n <ng-template kendoPanelBarContent>\n <div class=\"panel-content\">\n <div class=\"section-header\">\n <div class=\"section-description\">\n Manage notes, documentation, and annotations for this agent.\n </div>\n <div class=\"header-actions\">\n @if (EditMode && UserCanCreateNotes) {\n <button kendoButton themeColor=\"primary\" size=\"small\" (click)=\"addNote()\">\n <i class=\"fa-solid fa-plus\"></i> Add Note\n </button>\n }\n </div>\n </div>\n \n @if (noteCount === 0) {\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-sticky-note\"></i>\n <h4>No Notes</h4>\n <p>Add notes to document important information, observations, or instructions for this agent.</p>\n @if (EditMode && UserCanCreateNotes) {\n <button kendoButton themeColor=\"primary\" (click)=\"addNote()\">\n <i class=\"fa-solid fa-plus\"></i> Create First Note\n </button>\n }\n </div>\n } @else {\n <div class=\"entity-list\">\n @for (note of agentNotes; track note.ID) {\n <div class=\"entity-item note-item\" (click)=\"navigateToEntity('AI Agent Notes', note.ID)\">\n <div class=\"item-icon\">\n <i class=\"fa-solid fa-sticky-note\"></i>\n </div>\n <div class=\"item-content\">\n <div class=\"item-title\">{{ note.Type || 'Note' }}</div>\n @if (note.Note) {\n <div class=\"item-preview\">{{ note.Note.substring(0, 100) }}{{ note.Note.length > 100 ? '...' : '' }}</div>\n }\n <div class=\"item-meta\">\n @if (note.__mj_CreatedAt) {\n <span class=\"meta-tag\">\n <i class=\"fa-solid fa-calendar\"></i>\n {{ note.__mj_CreatedAt | date:'short' }}\n </span>\n }\n </div>\n </div>\n <div class=\"item-actions\">\n <i class=\"fa-solid fa-external-link\"></i>\n </div>\n </div>\n }\n @if (noteCount > agentNotes.length) {\n <div class=\"view-more-item\" (click)=\"navigateToEntity('AI Agent Notes', '')\">\n <span>View all {{ noteCount }} notes...</span>\n </div>\n }\n </div>\n }\n </div>\n </ng-template>\n </kendo-panelbar-item>\n }\n\n\n\n <!-- Payload -->\n <kendo-panelbar-item [expanded]=\"false\">\n <ng-template kendoPanelBarItemTitle>\n <i class=\"fa-solid fa-exchange-alt\"></i> Payload Management\n </ng-template>\n <ng-template kendoPanelBarContent>\n <div class=\"panel-content\">\n <div class=\"section-header\">\n <div class=\"section-description\">\n Configure how this agent handles data payloads, path routing, and validation between parent and child agents.\n </div>\n </div>\n \n <!-- Payload Scope Section -->\n <div class=\"payload-section\">\n <h3 class=\"payload-section-title\">\n <i class=\"fa-solid fa-target\"></i>\n Payload Scope\n </h3>\n \n <div class=\"payload-field-container\">\n <div class=\"payload-field-info\">\n <label class=\"payload-field-label\">Payload Scope Path</label>\n <p class=\"payload-field-description\">\n Specify a path within the parent payload that this sub-agent should operate on. \n Leave empty to receive the entire payload.\n </p>\n </div>\n \n <div class=\"payload-field-input\">\n <mj-form-field \n FieldName=\"PayloadScope\" \n Type=\"textbox\"\n Caption=\"\"\n [EditMode]=\"EditMode\"\n [record]=\"record\"\n style=\"width: 100%;\">\n </mj-form-field>\n <div class=\"payload-field-example\">\n <i class=\"fa-solid fa-lightbulb\"></i>\n <span>Example: <code>/customer/profile</code> or <code>/analysis/results</code></span>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Path Configuration Section -->\n <div class=\"payload-section\">\n <h3 class=\"payload-section-title\">\n <i class=\"fa-solid fa-route\"></i>\n Path Configuration\n </h3>\n \n <div class=\"payload-paths-grid\">\n <!-- Downstream Paths -->\n <div class=\"payload-path-card\">\n <div class=\"payload-path-header\">\n <div class=\"payload-path-icon downstream\">\n <i class=\"fa-solid fa-arrow-down\"></i>\n </div>\n <div class=\"payload-path-info\">\n <h4>Downstream Paths</h4>\n <p>JSON array of paths to pass to sub-agents</p>\n </div>\n </div>\n <div class=\"payload-path-content\">\n <div class=\"json-editor-container\">\n <mj-code-editor \n [value]=\"record.PayloadDownstreamPaths || '[&quot;*&quot;]'\"\n [readonly]=\"!EditMode\"\n language=\"json\"\n [lineWrapping]=\"true\"\n style=\"height: 100px; width: 100%;\"\n (valueChange)=\"updatePayloadField('PayloadDownstreamPaths', $event)\">\n </mj-code-editor>\n </div>\n <div class=\"payload-path-hint\">\n <i class=\"fa-solid fa-info-circle\"></i>\n Use <code>[\"*\"]</code> to pass entire payload or specify paths like <code>[\"user.id\", \"order.*\"]</code>\n </div>\n </div>\n </div>\n\n <!-- Upstream Paths -->\n <div class=\"payload-path-card\">\n <div class=\"payload-path-header\">\n <div class=\"payload-path-icon upstream\">\n <i class=\"fa-solid fa-arrow-up\"></i>\n </div>\n <div class=\"payload-path-info\">\n <h4>Upstream Paths</h4>\n <p>JSON array of paths sub-agents can write back</p>\n </div>\n </div>\n <div class=\"payload-path-content\">\n <div class=\"json-editor-container\">\n <mj-code-editor \n [value]=\"record.PayloadUpstreamPaths || '[&quot;*&quot;]'\"\n [readonly]=\"!EditMode\"\n language=\"json\"\n [lineWrapping]=\"true\"\n style=\"height: 100px; width: 100%;\"\n (valueChange)=\"updatePayloadField('PayloadUpstreamPaths', $event)\">\n </mj-code-editor>\n </div>\n <div class=\"payload-path-hint\">\n <i class=\"fa-solid fa-info-circle\"></i>\n Use <code>[\"*\"]</code> to allow all writes or limit to specific paths\n </div>\n </div>\n </div>\n\n <!-- Self Read Paths -->\n <div class=\"payload-path-card\">\n <div class=\"payload-path-header\">\n <div class=\"payload-path-icon self-read\">\n <i class=\"fa-solid fa-eye\"></i>\n </div>\n <div class=\"payload-path-info\">\n <h4>Self Read Paths</h4>\n <p>JSON array of paths this agent can read</p>\n </div>\n </div>\n <div class=\"payload-path-content\">\n <div class=\"json-editor-container\">\n <mj-code-editor \n [value]=\"record.PayloadSelfReadPaths || '[]'\"\n [readonly]=\"!EditMode\"\n language=\"json\"\n [lineWrapping]=\"true\"\n style=\"height: 100px; width: 100%;\"\n (valueChange)=\"updatePayloadField('PayloadSelfReadPaths', $event)\">\n </mj-code-editor>\n </div>\n <div class=\"payload-path-hint\">\n <i class=\"fa-solid fa-info-circle\"></i>\n Paths this agent's prompts can read from the payload\n </div>\n </div>\n </div>\n\n <!-- Self Write Paths -->\n <div class=\"payload-path-card\">\n <div class=\"payload-path-header\">\n <div class=\"payload-path-icon self-write\">\n <i class=\"fa-solid fa-pen\"></i>\n </div>\n <div class=\"payload-path-info\">\n <h4>Self Write Paths</h4>\n <p>JSON array of paths this agent can write to</p>\n </div>\n </div>\n <div class=\"payload-path-content\">\n <div class=\"json-editor-container\">\n <mj-code-editor \n [value]=\"record.PayloadSelfWritePaths || '[]'\"\n [readonly]=\"!EditMode\"\n language=\"json\"\n [lineWrapping]=\"true\"\n style=\"height: 100px; width: 100%;\"\n (valueChange)=\"updatePayloadField('PayloadSelfWritePaths', $event)\">\n </mj-code-editor>\n </div>\n <div class=\"payload-path-hint\">\n <i class=\"fa-solid fa-info-circle\"></i>\n Paths this agent's prompts can write back to the payload\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Validation Section -->\n <div class=\"payload-section\">\n <h3 class=\"payload-section-title\">\n <i class=\"fa-solid fa-shield-check\"></i>\n Final Payload Validation\n </h3>\n \n <div class=\"payload-validation-container\">\n <div class=\"payload-validation-settings\">\n <div class=\"validation-field-group\">\n <label class=\"validation-field-label\">Validation Mode</label>\n <p class=\"validation-field-description\">How to handle validation failures</p>\n <mj-form-field \n FieldName=\"FinalPayloadValidationMode\" \n Type=\"dropdownlist\"\n Caption=\"\"\n [EditMode]=\"EditMode\"\n [record]=\"record\"\n style=\"width: 100%;\">\n </mj-form-field>\n </div>\n \n <div class=\"validation-field-group\">\n <label class=\"validation-field-label\">Max Retries</label>\n <p class=\"validation-field-description\">Maximum validation retry attempts</p>\n <mj-form-field \n FieldName=\"FinalPayloadValidationMaxRetries\" \n Type=\"numerictextbox\"\n Caption=\"\"\n [EditMode]=\"EditMode\"\n [record]=\"record\"\n style=\"width: 100%;\">\n </mj-form-field>\n </div>\n </div>\n \n <div class=\"payload-validation-schema\">\n <label class=\"validation-schema-label\">\n <i class=\"fa-solid fa-code\"></i>\n Validation Schema\n </label>\n <p class=\"validation-schema-description\">\n JSON schema or validation rules for the final payload structure\n </p>\n <div class=\"validation-schema-editor\">\n <mj-code-editor \n [value]=\"record.FinalPayloadValidation || '{}'\"\n [readonly]=\"!EditMode\"\n language=\"json\"\n [lineWrapping]=\"true\"\n style=\"height: 200px; width: 100%;\"\n (valueChange)=\"updatePayloadField('FinalPayloadValidation', $event)\">\n </mj-code-editor>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-template>\n </kendo-panelbar-item>\n\n\n\n <!-- Execution Guardrails (New Separate Panel) -->\n <kendo-panelbar-item [expanded]=\"false\">\n <ng-template kendoPanelBarItemTitle>\n <i class=\"fa-solid fa-shield-halved\"></i> Execution Guardrails\n </ng-template>\n <ng-template kendoPanelBarContent>\n <div class=\"panel-content\">\n <div class=\"section-header\">\n <div class=\"section-description\">\n Set limits to prevent runaway agent executions and control resource usage.\n </div>\n </div>\n \n <div class=\"form-fields-grid\">\n <mj-form-field \n FieldName=\"MaxCostPerRun\" \n Type=\"numerictextbox\"\n Caption=\"Max Cost ($)\"\n Description=\"Maximum cost per run\"\n [EditMode]=\"EditMode\"\n [record]=\"record\">\n </mj-form-field>\n\n <mj-form-field \n FieldName=\"MaxTokensPerRun\" \n Type=\"numerictextbox\"\n Caption=\"Max Tokens\"\n Description=\"Maximum tokens per run\"\n [EditMode]=\"EditMode\"\n [record]=\"record\">\n </mj-form-field>\n\n <mj-form-field \n FieldName=\"MaxIterationsPerRun\" \n Type=\"numerictextbox\"\n Caption=\"Max Iterations\"\n Description=\"Maximum prompt iterations\"\n [EditMode]=\"EditMode\"\n [record]=\"record\">\n </mj-form-field>\n\n <mj-form-field \n FieldName=\"MaxTimePerRun\" \n Type=\"numerictextbox\"\n Caption=\"Max Time (seconds)\"\n Description=\"Maximum execution time\"\n [EditMode]=\"EditMode\"\n [record]=\"record\">\n </mj-form-field>\n </div>\n </div>\n </ng-template>\n </kendo-panelbar-item>\n\n <!-- Configuration (Settings Panel) -->\n <kendo-panelbar-item [expanded]=\"false\">\n <ng-template kendoPanelBarItemTitle>\n <i class=\"fa-solid fa-cogs\"></i> Configuration\n </ng-template>\n <ng-template kendoPanelBarContent>\n <div class=\"panel-content\">\n <div class=\"section-header\">\n <div class=\"section-description\">\n Configure agent behavior, execution settings, and advanced features.\n </div>\n </div>\n \n <!-- Identity & Behavior Section -->\n <div class=\"config-section\">\n <h3 class=\"config-section-title\">\n <i class=\"fa-solid fa-id-card\"></i>\n Identity & Behavior\n </h3>\n \n <div class=\"config-grid\">\n <div class=\"config-card\">\n <div class=\"config-card-header\">\n <div class=\"config-card-icon\">\n <i class=\"fa-solid fa-toggle-on\"></i>\n </div>\n <div class=\"config-card-info\">\n <h4>Agent Status</h4>\n <p>Current availability and operational status</p>\n </div>\n </div>\n <div class=\"config-card-content\">\n @if (EditMode) {\n <kendo-dropdownlist \n [(ngModel)]=\"record.Status\"\n [data]=\"statusOptions\"\n textField=\"text\"\n valueField=\"value\"\n [valuePrimitive]=\"true\"\n name=\"agentStatus\"\n class=\"config-field-input\">\n </kendo-dropdownlist>\n } @else {\n <span class=\"config-field-display\">{{ record.Status || 'Not Set' }}</span>\n }\n </div>\n </div>\n\n <div class=\"config-card\">\n <div class=\"config-card-header\">\n <div class=\"config-card-icon\">\n <i class=\"fa-solid fa-sitemap\"></i>\n </div>\n <div class=\"config-card-info\">\n <h4>Agent Type</h4>\n <p>Category and system-level behavior</p>\n </div>\n </div>\n <div class=\"config-card-content\">\n @if (EditMode) {\n <kendo-dropdownlist \n [(ngModel)]=\"record.TypeID\"\n [data]=\"agentTypes\"\n textField=\"Name\"\n valueField=\"ID\"\n [valuePrimitive]=\"true\"\n name=\"agentTypeID\"\n class=\"config-field-input\">\n </kendo-dropdownlist>\n } @else {\n <span class=\"config-field-display\">{{ record.Type || 'Not Set' }}</span>\n }\n </div>\n </div>\n\n <div class=\"config-card\">\n <div class=\"config-card-header\">\n <div class=\"config-card-icon\">\n <i class=\"fa-solid fa-bolt\"></i>\n </div>\n <div class=\"config-card-info\">\n <h4>Expose as Action</h4>\n <p>Make available as an action for other agents</p>\n </div>\n </div>\n <div class=\"config-card-content\">\n <mj-form-field \n FieldName=\"ExposeAsAction\" \n Type=\"checkbox\"\n Caption=\"\"\n [EditMode]=\"EditMode\"\n [record]=\"record\">\n </mj-form-field>\n </div>\n </div>\n\n <div class=\"config-card full-width\">\n <div class=\"config-card-header\">\n <div class=\"config-card-icon\">\n <i class=\"fa-solid fa-align-left\"></i>\n </div>\n <div class=\"config-card-info\">\n <h4>Description</h4>\n <p>Detailed agent description and purpose</p>\n </div>\n </div>\n <div class=\"config-card-content\">\n <mj-form-field \n FieldName=\"Description\" \n Type=\"textarea\"\n Caption=\"\"\n [EditMode]=\"EditMode\"\n [record]=\"record\"\n style=\"width: 100%;\">\n </mj-form-field>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Execution Settings Section -->\n <div class=\"config-section\">\n <h3 class=\"config-section-title\">\n <i class=\"fa-solid fa-play\"></i>\n Execution Settings\n </h3>\n \n <div class=\"config-grid\">\n <div class=\"config-card\">\n <div class=\"config-card-header\">\n <div class=\"config-card-icon\">\n <i class=\"fa-solid fa-layer-group\"></i>\n </div>\n <div class=\"config-card-info\">\n <h4>Execution Mode</h4>\n <p>How sub-agents are executed</p>\n </div>\n </div>\n <div class=\"config-card-content\">\n <mj-form-field \n FieldName=\"ExecutionMode\" \n Type=\"dropdownlist\"\n Caption=\"\"\n [EditMode]=\"EditMode\"\n [record]=\"record\">\n </mj-form-field>\n </div>\n </div>\n\n <div class=\"config-card\">\n <div class=\"config-card-header\">\n <div class=\"config-card-icon\">\n <i class=\"fa-solid fa-sort-numeric-down\"></i>\n </div>\n <div class=\"config-card-info\">\n <h4>Execution Order</h4>\n <p>Order when run with siblings</p>\n </div>\n </div>\n <div class=\"config-card-content\">\n <mj-form-field \n FieldName=\"ExecutionOrder\" \n Type=\"numerictextbox\"\n Caption=\"\"\n [EditMode]=\"EditMode\"\n [record]=\"record\">\n </mj-form-field>\n </div>\n </div>\n\n <div class=\"config-card\">\n <div class=\"config-card-header\">\n <div class=\"config-card-icon\">\n <i class=\"fa-solid fa-tachometer-alt\"></i>\n </div>\n <div class=\"config-card-info\">\n <h4>Default Effort Level</h4>\n <p>Default effort level for all prompts (1-100)</p>\n </div>\n </div>\n <div class=\"config-card-content\">\n <mj-form-field \n FieldName=\"DefaultPromptEffortLevel\" \n Type=\"numerictextbox\"\n Caption=\"\"\n [EditMode]=\"EditMode\"\n [record]=\"record\">\n </mj-form-field>\n <div class=\"config-card-hint\">\n <i class=\"fa-solid fa-info-circle\"></i>\n Higher values request more thorough reasoning (1=minimal, 100=maximum)\n </div>\n </div>\n </div>\n\n <div class=\"config-card\">\n <div class=\"config-card-header\">\n <div class=\"config-card-icon\">\n <i class=\"fa-solid fa-code\"></i>\n </div>\n <div class=\"config-card-info\">\n <h4>Driver Class</h4>\n <p>Custom implementation class</p>\n </div>\n </div>\n <div class=\"config-card-content\">\n <mj-form-field \n FieldName=\"DriverClass\" \n Type=\"textbox\"\n Caption=\"\"\n [EditMode]=\"EditMode\"\n [record]=\"record\">\n </mj-form-field>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Visual Identity Section -->\n <div class=\"config-section\">\n <h3 class=\"config-section-title\">\n <i class=\"fa-solid fa-palette\"></i>\n Visual Identity\n </h3>\n \n <div class=\"config-grid\">\n <div class=\"config-card\">\n <div class=\"config-card-header\">\n <div class=\"config-card-icon\">\n <i class=\"fa-solid fa-icons\"></i>\n </div>\n <div class=\"config-card-info\">\n <h4>Icon Class</h4>\n <p>Font Awesome icon class</p>\n </div>\n </div>\n <div class=\"config-card-content\">\n <mj-form-field \n FieldName=\"IconClass\" \n Type=\"textbox\"\n Caption=\"\"\n [EditMode]=\"EditMode\"\n [record]=\"record\">\n </mj-form-field>\n <div class=\"config-card-hint\">\n <i class=\"fa-solid fa-info-circle\"></i>\n Example: <code>fa-solid fa-robot</code>\n </div>\n </div>\n </div>\n\n <div class=\"config-card\">\n <div class=\"config-card-header\">\n <div class=\"config-card-icon\">\n <i class=\"fa-solid fa-image\"></i>\n </div>\n <div class=\"config-card-info\">\n <h4>Logo URL</h4>\n <p>URL for agent logo image</p>\n </div>\n </div>\n <div class=\"config-card-content\">\n <mj-form-field \n FieldName=\"LogoURL\" \n Type=\"textbox\"\n Caption=\"\"\n [EditMode]=\"EditMode\"\n [record]=\"record\">\n </mj-form-field>\n <div class=\"config-card-hint\">\n <i class=\"fa-solid fa-info-circle\"></i>\n Takes precedence over Icon Class\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Context Compression Section -->\n <div class=\"config-section\">\n <h3 class=\"config-section-title\">\n <i class=\"fa-solid fa-compress\"></i>\n Context Compression\n </h3>\n \n <div class=\"config-grid\">\n <div class=\"config-card full-width\">\n <div class=\"config-card-header\">\n <div class=\"config-card-icon\">\n <i class=\"fa-solid fa-toggle-on\"></i>\n </div>\n <div class=\"config-card-info\">\n <h4>Enable Context Compression</h4>\n <p>Automatically compress conversation context when message threshold is reached</p>\n </div>\n </div>\n <div class=\"config-card-content\">\n <mj-form-field \n FieldName=\"EnableContextCompression\" \n Type=\"checkbox\"\n Caption=\"\"\n [EditMode]=\"EditMode\"\n [record]=\"record\"\n (valueChange)=\"onContextCompressionToggle($event)\">\n </mj-form-field>\n </div>\n </div>\n\n @if (record.EnableContextCompression) {\n <div class=\"config-card\">\n <div class=\"config-card-header\">\n <div class=\"config-card-icon\">\n <i class=\"fa-solid fa-hashtag\"></i>\n </div>\n <div class=\"config-card-info\">\n <h4>Message Threshold</h4>\n <p>Messages before compression triggers</p>\n </div>\n </div>\n <div class=\"config-card-content\">\n <mj-form-field \n FieldName=\"ContextCompressionMessageThreshold\" \n Type=\"numerictextbox\"\n Caption=\"\"\n [EditMode]=\"EditMode\"\n [record]=\"record\">\n </mj-form-field>\n </div>\n </div>\n\n <div class=\"config-card\">\n <div class=\"config-card-header\">\n <div class=\"config-card-icon\">\n <i class=\"fa-solid fa-save\"></i>\n </div>\n <div class=\"config-card-info\">\n <h4>Messages to Keep</h4>\n <p>Recent messages to retain uncompressed</p>\n </div>\n </div>\n <div class=\"config-card-content\">\n <mj-form-field \n FieldName=\"ContextCompressionMessageRetentionCount\" \n Type=\"numerictextbox\"\n Caption=\"\"\n [EditMode]=\"EditMode\"\n [record]=\"record\">\n </mj-form-field>\n </div>\n </div>\n\n <div class=\"config-card\">\n <div class=\"config-card-header\">\n <div class=\"config-card-icon\">\n <i class=\"fa-solid fa-comment-dots\"></i>\n </div>\n <div class=\"config-card-info\">\n <h4>Compression Prompt</h4>\n <p>Prompt used for summarization</p>\n </div>\n </div>\n <div class=\"config-card-content\">\n @if (EditMode) {\n <div class=\"prompt-selector-container\">\n <div class=\"prompt-display\">\n @if (selectedContextCompressionPrompt) {\n <span class=\"prompt-name\">{{ selectedContextCompressionPrompt.Name }}</span>\n } @else {\n <span class=\"no-prompt\">No prompt selected</span>\n }\n </div>\n <div class=\"prompt-actions\">\n <button type=\"button\" \n kendoButton \n fillMode=\"outline\" \n size=\"small\"\n (click)=\"openContextCompressionPromptSelector()\"\n class=\"prompt-select-btn\">\n <i class=\"fa-solid fa-search\"></i>\n {{ selectedContextCompressionPrompt ? 'Change' : 'Select' }} Prompt\n </button>\n @if (selectedContextCompressionPrompt) {\n <button type=\"button\" \n kendoButton \n fillMode=\"flat\" \n size=\"small\"\n (click)=\"clearContextCompressionPrompt()\"\n class=\"prompt-clear-btn\"\n title=\"Clear selection\">\n <i class=\"fa-solid fa-times\"></i>\n </button>\n }\n </div>\n </div>\n } @else {\n <span class=\"config-field-display\">{{ selectedContextCompressionPrompt?.Name || record.ContextCompressionPrompt || 'Not Set' }}</span>\n }\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n </ng-template>\n </kendo-panelbar-item>\n\n\n\n\n </kendo-panelbar>\n </div>\n </form>\n\n</div>", styles: ["/* AI Agent Form - Modern Redesign */\n.record-form-container {\n height: 100%;\n display: flex;\n flex-direction: column;\n background: #f5f7fa;\n}\n\n.record-form {\n height: 100%;\n display: flex;\n flex-direction: column;\n}\n\n/* Agent Header Section - Compact Design */\n.agent-header {\n background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);\n border-bottom: 1px solid #e0e6ed;\n padding: 12px 20px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.04);\n}\n\n.agent-header-content {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 20px;\n}\n\n.agent-overview {\n display: flex;\n align-items: center;\n gap: 16px;\n flex: 1;\n min-width: 0;\n}\n\n.agent-icon-wrapper {\n width: 48px;\n height: 48px;\n background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: 0 4px 12px rgba(33, 150, 243, 0.2);\n flex-shrink: 0;\n}\n\n.agent-icon-wrapper i {\n color: white;\n font-size: 24px;\n}\n\n.agent-icon-wrapper img.agent-logo {\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: 8px;\n}\n\n.agent-info {\n flex: 1;\n min-width: 0;\n}\n\n.agent-name {\n font-size: 22px;\n font-weight: 600;\n color: #2c3e50;\n margin: 0 0 8px 0;\n line-height: 1.2;\n}\n\n.agent-name-input {\n font-size: 18px !important;\n font-weight: 500 !important;\n height: 36px !important;\n width: 100% !important;\n max-width: 400px !important;\n}\n\n.agent-meta {\n display: flex;\n align-items: center;\n gap: 16px;\n flex-wrap: wrap;\n}\n\n.status-badge {\n padding: 6px 16px;\n border-radius: 20px;\n font-size: 13px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n display: inline-flex;\n align-items: center;\n gap: 6px;\n}\n\n.status-badge.active {\n background: #28a745;\n color: white;\n}\n\n.status-badge.pending {\n background: #ffc107;\n color: #212529;\n}\n\n.status-badge.disabled {\n background: #6c757d;\n color: white;\n}\n\n.execution-mode,\n.parent-agent {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 13px;\n color: #6c757d;\n background: #f8f9fa;\n padding: 4px 10px;\n border-radius: 12px;\n}\n\n.execution-mode i,\n.parent-agent i {\n font-size: 12px;\n opacity: 0.8;\n}\n\n/* Prompt Controls Section */\n.prompt-controls {\n flex: 1;\n margin-right: 16px;\n}\n\n.agent-meta-info {\n display: flex;\n gap: 24px;\n margin-top: 12px;\n flex-wrap: wrap;\n}\n\n.meta-item {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.meta-label {\n font-size: 12px;\n font-weight: 600;\n color: #6c757d;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.meta-value {\n font-size: 14px;\n color: #495057;\n font-weight: 500;\n}\n\n.agent-description {\n margin-top: 16px;\n color: #6c757d;\n line-height: 1.6;\n font-size: 15px;\n}\n\n.agent-description-input {\n width: 100%;\n max-width: 600px;\n min-height: 80px;\n resize: vertical;\n}\n\n/* Action Buttons Section */\n.agent-actions {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n.action-buttons-row {\n display: flex;\n gap: 12px;\n flex-wrap: wrap;\n}\n\n.action-button {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 20px;\n border-radius: 8px;\n font-weight: 500;\n font-size: 14px;\n transition: all 0.2s ease;\n box-shadow: 0 2px 4px rgba(0,0,0,0.08);\n}\n\n.action-button:hover {\n transform: translateY(-1px);\n box-shadow: 0 4px 8px rgba(0,0,0,0.12);\n}\n\n.action-button.primary {\n background: #2196f3;\n color: white;\n}\n\n.action-button.primary:hover {\n background: #1976d2;\n}\n\n.action-button.secondary {\n background: #6c757d;\n color: white;\n}\n\n.action-button.secondary:hover {\n background: #5a6268;\n}\n\n.action-warnings {\n margin-top: 8px;\n font-size: 13px;\n color: #dc3545;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n/* Panel-Based Form Content */\n.form-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n overflow-x: hidden;\n background: #f5f7fa;\n padding: 12px;\n}\n\n/* Kendo PanelBar Styling */\n::ng-deep .k-panelbar {\n border: none;\n background: transparent;\n}\n\n::ng-deep .k-panelbar > .k-panelbar-item {\n border: none;\n border-radius: 12px;\n margin-bottom: 12px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.06);\n background: white;\n overflow: hidden;\n}\n\n::ng-deep .k-panelbar > .k-panelbar-item > .k-header {\n background: white;\n border: none;\n padding: 16px 20px;\n border-radius: 12px 12px 0 0;\n color: #2c3e50;\n font-weight: 600;\n font-size: 16px;\n transition: all 0.2s ease;\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n::ng-deep .k-panelbar > .k-panelbar-item > .k-header:hover {\n background: #f8f9fa;\n}\n\n::ng-deep .k-panelbar > .k-panelbar-item.k-panelbar-expanded > .k-header {\n background: #2196f3;\n color: white;\n border-radius: 12px 12px 0 0;\n}\n\n::ng-deep .k-panelbar > .k-panelbar-item > .k-header .k-panelbar-toggle {\n position: absolute;\n right: 24px;\n color: inherit;\n font-size: 14px;\n transition: transform 0.2s ease;\n}\n\n::ng-deep .k-panelbar > .k-panelbar-item.k-panelbar-expanded > .k-header .k-panelbar-toggle {\n transform: rotate(180deg);\n}\n\n::ng-deep .k-panelbar > .k-panelbar-item > .k-header .k-panelbar-toggle::before {\n content: '\\f107';\n font-family: 'Font Awesome 6 Free';\n font-weight: 900;\n}\n\n::ng-deep .k-panelbar > .k-panelbar-item > .k-content {\n padding: 0;\n border: none;\n background: white;\n border-radius: 0 0 12px 12px;\n}\n\n::ng-deep .k-panelbar .k-header .k-panelbar-icon {\n font-size: 18px;\n color: #2196f3;\n margin-right: 8px;\n}\n\n::ng-deep .k-panelbar .k-panelbar-expanded .k-header .k-panelbar-icon {\n color: white;\n}\n\n/* Panel Content */\n.panel-content {\n padding: 16px;\n background: white;\n}\n\n.section-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 20px;\n gap: 16px;\n flex-wrap: wrap;\n}\n\n.section-description {\n color: #6c757d;\n font-size: 14px;\n line-height: 1.6;\n margin-bottom: 16px;\n}\n\n.header-actions {\n display: flex;\n gap: 8px;\n align-items: center;\n flex-shrink: 0;\n}\n\n.tab-section {\n background: white;\n border-radius: 12px;\n padding: 24px;\n margin-bottom: 24px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.04);\n border: 1px solid #e0e6ed;\n}\n\n.section-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 20px;\n padding-bottom: 16px;\n border-bottom: 2px solid #f0f4f8;\n}\n\n.section-title {\n display: flex;\n align-items: center;\n gap: 12px;\n margin: 0;\n color: #2c3e50;\n font-size: 18px;\n font-weight: 600;\n}\n\n.section-title i {\n color: #2196f3;\n font-size: 20px;\n}\n\n.section-description {\n color: #6c757d;\n font-size: 14px;\n line-height: 1.6;\n margin-top: 8px;\n}\n\n/* Form Fields Grid */\n.form-fields-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 20px;\n margin-top: 20px;\n}\n\n.form-field-group {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.form-field-label {\n font-size: 13px;\n font-weight: 600;\n color: #495057;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n/* Sub-grids styling (legacy) */\n.sub-grid-container {\n height: 500px;\n border: 1px solid #e0e6ed;\n border-radius: 8px;\n overflow: hidden;\n display: none; /* Hidden as we now use cards */\n}\n\n/* Empty States */\n/* Loading State */\n.loading-state {\n text-align: center;\n padding: 60px 20px;\n color: #64748b;\n}\n\n.loading-state i {\n font-size: 36px;\n color: #2196f3;\n margin-bottom: 16px;\n display: block;\n}\n\n.loading-state p {\n margin: 0;\n font-size: 14px;\n color: #94a3b8;\n}\n\n.empty-state {\n text-align: center;\n padding: 60px 20px;\n color: #6c757d;\n}\n\n.empty-state i {\n font-size: 48px;\n color: #dee2e6;\n margin-bottom: 16px;\n}\n\n.empty-state h4 {\n color: #495057;\n font-weight: 600;\n margin-bottom: 8px;\n}\n\n.empty-state p {\n font-size: 15px;\n line-height: 1.6;\n max-width: 400px;\n margin: 0 auto;\n}\n\n/* Loading State */\n.loading-overlay {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(255, 255, 255, 0.9);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n}\n\n.loading-spinner {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 16px;\n}\n\n.spinner-icon {\n width: 48px;\n height: 48px;\n border: 4px solid #f3f3f3;\n border-top: 4px solid #2196f3;\n border-radius: 50%;\n animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}\n\n/* Quick Actions */\n.quick-actions {\n display: flex;\n gap: 16px;\n margin-top: 20px;\n padding-top: 20px;\n border-top: 1px solid #e0e6ed;\n}\n\n.quick-action-card {\n flex: 1;\n padding: 16px;\n background: #f8f9fa;\n border-radius: 8px;\n border: 1px solid #e0e6ed;\n cursor: pointer;\n transition: all 0.2s ease;\n text-align: center;\n}\n\n.quick-action-card:hover {\n background: white;\n box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n transform: translateY(-2px);\n}\n\n.quick-action-icon {\n font-size: 32px;\n color: #2196f3;\n margin-bottom: 8px;\n}\n\n.quick-action-title {\n font-size: 14px;\n font-weight: 600;\n color: #495057;\n margin-bottom: 4px;\n}\n\n.quick-action-description {\n font-size: 12px;\n color: #6c757d;\n}\n\n/* Header Actions */\n.header-actions {\n display: flex;\n gap: 8px;\n align-items: center;\n}\n\n/* Entity List Interface */\n.entity-list {\n display: flex;\n flex-direction: column;\n gap: 12px;\n margin-top: 16px;\n}\n\n.entity-item {\n display: flex;\n align-items: center;\n gap: 16px;\n padding: 16px;\n background: #f8f9fa;\n border: 1px solid #e0e6ed;\n border-radius: 10px;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.entity-item:hover {\n background: white;\n border-color: #2196f3;\n box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n transform: translateY(-1px);\n}\n\n.item-icon {\n width: 40px;\n height: 40px;\n background: linear-gradient(135deg, #e9ecef, #dee2e6);\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.prompt-item .item-icon {\n background: linear-gradient(135deg, #20c997, #17a673);\n}\n\n.action-item .item-icon {\n background: linear-gradient(135deg, #ffc107, #e0a800);\n}\n\n.sub-agent-item .item-icon {\n background: linear-gradient(135deg, #2196f3, #1976d2);\n}\n\n.model-item .item-icon {\n background: linear-gradient(135deg, #6f42c1, #563d7c);\n}\n\n.learning-item .item-icon {\n background: linear-gradient(135deg, #e83e8c, #dc3545);\n}\n\n.note-item .item-icon {\n background: linear-gradient(135deg, #fd7e14, #e55a00);\n}\n\n.item-icon i {\n color: #6c757d;\n font-size: 18px;\n}\n\n.prompt-item .item-icon i,\n.action-item .item-icon i,\n.sub-agent-item .item-icon i,\n.model-item .item-icon i,\n.learning-item .item-icon i,\n.note-item .item-icon i {\n color: white;\n}\n\n.item-icon img.sub-agent-logo {\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: 6px;\n}\n\n.item-content {\n flex: 1;\n min-width: 0;\n}\n\n.item-title {\n font-size: 16px;\n font-weight: 600;\n color: #2c3e50;\n margin: 0 0 4px 0;\n line-height: 1.3;\n}\n\n.item-preview {\n color: #6c757d;\n font-size: 14px;\n line-height: 1.4;\n margin: 4px 0 8px 0;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.item-meta {\n display: flex;\n gap: 12px;\n align-items: center;\n flex-wrap: wrap;\n}\n\n.meta-tag,\n.priority-tag,\n.status-tag {\n display: flex;\n align-items: center;\n gap: 4px;\n font-size: 12px;\n padding: 3px 8px;\n border-radius: 6px;\n font-weight: 500;\n}\n\n.meta-tag {\n background: #e9ecef;\n color: #495057;\n}\n\n.priority-tag {\n color: white;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.3px;\n}\n\n.status-tag {\n background: #e9ecef;\n color: #495057;\n}\n\n.status-tag.active {\n background: #d4edda;\n color: #28a745;\n}\n\n.status-tag.inactive {\n background: #f8d7da;\n color: #dc3545;\n}\n\n.item-actions {\n opacity: 0;\n transition: opacity 0.2s ease;\n color: #6c757d;\n font-size: 16px;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.entity-item:hover .item-actions {\n opacity: 1;\n}\n\n.entity-item:hover .item-actions > i {\n color: #2196f3;\n}\n\n.view-more-item {\n padding: 16px;\n background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n border: 2px dashed #dee2e6;\n border-radius: 10px;\n text-align: center;\n cursor: pointer;\n transition: all 0.2s ease;\n color: #6c757d;\n font-weight: 500;\n}\n\n.view-more-item:hover {\n background: linear-gradient(135deg, #e9ecef, #dee2e6);\n border-color: #2196f3;\n color: #2196f3;\n}\n\n/* Payload Section Styles */\n.payload-config-section,\n.payload-paths-section,\n.payload-validation-section {\n margin-bottom: 32px;\n}\n\n.subsection-title {\n font-size: 16px;\n font-weight: 600;\n color: #2c3e50;\n margin: 0 0 16px 0;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.subsection-title i {\n color: #2196f3;\n}\n\n.subsection-divider {\n margin-top: 32px;\n margin-bottom: 16px;\n padding-top: 24px;\n border-top: 1px solid #e0e6ed;\n}\n\n.payload-config-grid {\n display: grid;\n grid-template-columns: 1fr 1fr 1fr;\n gap: 16px;\n margin-bottom: 24px;\n}\n\n.payload-field-group {\n margin-bottom: 20px;\n}\n\n.payload-field-label {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 14px;\n font-weight: 600;\n color: #495057;\n margin-bottom: 8px;\n}\n\n.payload-field-label i {\n color: #6c757d;\n font-size: 16px;\n}\n\n.field-description {\n font-size: 12px;\n font-weight: normal;\n color: #6c757d;\n margin-left: auto;\n}\n\n/* Code editor styling */\n.payload-field-group mj-code-editor {\n border: 1px solid #dee2e6;\n border-radius: 8px;\n overflow: hidden;\n}\n\n.payload-field-group mj-code-editor:hover {\n border-color: #2196f3;\n}\n\n/* Payload textarea styling */\n.payload-field-group mj-form-field ::ng-deep textarea {\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 13px;\n line-height: 1.5;\n min-height: 120px;\n resize: vertical;\n}\n\n/* Execution History Panel */\n.execution-history-panel {\n max-height: 500px;\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n/* Timeline List for Execution History */\n.timeline-list {\n display: flex;\n flex-direction: column;\n gap: 16px;\n margin-top: 16px;\n}\n\n.timeline-item {\n display: flex;\n align-items: flex-start;\n gap: 16px;\n padding: 16px;\n background: #f8f9fa;\n border: 1px solid #e0e6ed;\n border-radius: 10px;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.timeline-item:hover {\n background: white;\n border-color: #2196f3;\n box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n}\n\n.timeline-marker {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n}\n\n.timeline-marker i {\n color: white;\n font-size: 14px;\n}\n\n.timeline-content {\n flex: 1;\n min-width: 0;\n}\n\n.timeline-title {\n font-size: 16px;\n font-weight: 600;\n color: #2c3e50;\n margin: 0 0 8px 0;\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n gap: 16px;\n}\n\n.timeline-date {\n font-size: 12px;\n color: #6c757d;\n background: #e9ecef;\n padding: 2px 8px;\n border-radius: 6px;\n white-space: nowrap;\n flex-shrink: 0;\n}\n\n.timeline-meta {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 8px;\n}\n\n.timeline-preview {\n color: #6c757d;\n font-size: 14px;\n line-height: 1.4;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n/* Modern Card-Based Interface (Legacy - Keep for backward compatibility) */\n.cards-container {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n gap: 20px;\n margin-top: 16px;\n}\n\n.entity-card {\n background: white;\n border: 1px solid #e0e6ed;\n border-radius: 12px;\n padding: 20px;\n cursor: pointer;\n transition: all 0.3s ease;\n box-shadow: 0 2px 8px rgba(0,0,0,0.06);\n position: relative;\n overflow: hidden;\n}\n\n.entity-card:hover {\n transform: translateY(-4px);\n box-shadow: 0 8px 24px rgba(0,0,0,0.12);\n border-color: #2196f3;\n}\n\n.entity-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 4px;\n background: linear-gradient(90deg, #2196f3, #42a5f5);\n opacity: 0;\n transition: opacity 0.3s ease;\n}\n\n.entity-card:hover::before {\n opacity: 1;\n}\n\n.card-header {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n margin-bottom: 12px;\n}\n\n.card-icon {\n width: 40px;\n height: 40px;\n background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.sub-agent-card .card-icon {\n background: linear-gradient(135deg, #2196f3, #1976d2);\n}\n\n.prompt-card .card-icon {\n background: linear-gradient(135deg, #20c997, #17a673);\n}\n\n.action-card .card-icon {\n background: linear-gradient(135deg, #ffc107, #e0a800);\n}\n\n.card-icon i {\n font-size: 18px;\n color: #6c757d;\n}\n\n.sub-agent-card .card-icon i,\n.prompt-card .card-icon i,\n.action-card .card-icon i {\n color: white;\n}\n\n.card-title-section {\n flex: 1;\n min-width: 0;\n}\n\n.card-title {\n font-size: 16px;\n font-weight: 600;\n color: #2c3e50;\n margin: 0 0 4px 0;\n line-height: 1.3;\n word-wrap: break-word;\n}\n\n.card-description {\n color: #6c757d;\n font-size: 14px;\n line-height: 1.5;\n margin: 8px 0;\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.card-meta {\n display: flex;\n gap: 16px;\n margin-top: 12px;\n flex-wrap: wrap;\n}\n\n.meta-item {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 12px;\n color: #6c757d;\n padding: 4px 8px;\n background: #f8f9fa;\n border-radius: 6px;\n}\n\n.meta-item i {\n font-size: 11px;\n opacity: 0.8;\n}\n\n.meta-item.active {\n color: #28a745;\n background: #d4edda;\n}\n\n.meta-item.inactive {\n color: #dc3545;\n background: #f8d7da;\n}\n\n.card-actions {\n opacity: 0;\n transition: opacity 0.3s ease;\n color: #6c757d;\n}\n\n.entity-card:hover .card-actions {\n opacity: 1;\n color: #2196f3;\n}\n\n/* Badge Styles */\n.priority-badge {\n padding: 2px 8px;\n border-radius: 12px;\n font-size: 11px;\n font-weight: 600;\n color: white;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.type-badge {\n padding: 2px 8px;\n border-radius: 6px;\n font-size: 11px;\n font-weight: 500;\n background: #e9ecef;\n color: #495057;\n text-transform: uppercase;\n letter-spacing: 0.3px;\n}\n\n/* View All Card */\n.view-all-card {\n background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n border: 2px dashed #dee2e6;\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 120px;\n cursor: pointer;\n transition: all 0.3s ease;\n}\n\n.view-all-card:hover {\n background: linear-gradient(135deg, #e9ecef, #dee2e6);\n border-color: #2196f3;\n transform: translateY(-2px);\n}\n\n.view-all-content {\n text-align: center;\n color: #6c757d;\n font-weight: 500;\n}\n\n.view-all-content i {\n font-size: 24px;\n margin-bottom: 8px;\n display: block;\n}\n\n/* Timeline Interface for History */\n.timeline-container {\n position: relative;\n margin-top: 16px;\n}\n\n.timeline-item {\n display: flex;\n flex-direction: column;\n margin-bottom: 24px;\n transition: all 0.3s ease;\n border-radius: 12px;\n padding: 16px;\n background: transparent;\n border: 1px solid transparent;\n}\n\n.timeline-item:hover {\n background: #f8f9fa;\n border-color: #e0e6ed;\n}\n\n.timeline-item.expanded {\n background: #f8f9fa;\n border-color: #2196f3;\n box-shadow: 0 4px 12px rgba(33, 150, 243, 0.1);\n}\n\n.timeline-item.view-all {\n cursor: pointer;\n background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n border: 2px dashed #dee2e6;\n}\n\n.timeline-item.view-all:hover {\n background: linear-gradient(135deg, #e9ecef, #dee2e6);\n border-color: #2196f3;\n}\n\n.timeline-item > div:first-child {\n display: flex;\n align-items: flex-start;\n}\n\n.timeline-marker {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 16px;\n flex-shrink: 0;\n position: relative;\n box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n}\n\n.timeline-marker::after {\n content: '';\n position: absolute;\n top: 50px;\n left: 50%;\n transform: translateX(-50%);\n width: 2px;\n height: 24px;\n background: #e0e6ed;\n}\n\n.timeline-item:last-child .timeline-marker::after {\n display: none;\n}\n\n.timeline-marker i {\n color: white;\n font-size: 16px;\n}\n\n.timeline-marker.view-all-marker {\n background: #6c757d;\n}\n\n.timeline-content {\n flex: 1;\n min-width: 0;\n display: flex;\n align-items: flex-start;\n}\n\n.timeline-header {\n flex: 1;\n cursor: pointer;\n}\n\n.timeline-header > div:first-child {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n margin-bottom: 8px;\n gap: 16px;\n}\n\n.expand-icon {\n transition: transform 0.3s ease;\n margin-right: 8px;\n color: #6c757d;\n}\n\n.expand-icon.expanded {\n transform: rotate(90deg);\n}\n\n.timeline-title {\n font-size: 16px;\n font-weight: 600;\n color: #2c3e50;\n margin: 0;\n line-height: 1.3;\n}\n\n.timeline-date {\n font-size: 12px;\n color: #6c757d;\n white-space: nowrap;\n background: #f8f9fa;\n padding: 4px 8px;\n border-radius: 6px;\n margin-left: auto;\n}\n\n.timeline-preview {\n font-size: 13px;\n color: #6c757d;\n line-height: 1.5;\n margin-top: 8px;\n padding: 8px 12px;\n background: #f8f9fa;\n border-radius: 6px;\n border: 1px solid #e0e6ed;\n}\n\n.timeline-status {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 8px;\n}\n\n.execution-time {\n display: flex;\n align-items: center;\n gap: 4px;\n font-size: 12px;\n color: #6c757d;\n background: #f8f9fa;\n padding: 4px 8px;\n border-radius: 6px;\n}\n\n.timeline-description {\n color: #6c757d;\n font-size: 14px;\n line-height: 1.5;\n margin: 8px 0;\n}\n\n.timeline-error {\n color: #dc3545;\n font-size: 13px;\n background: #f8d7da;\n padding: 8px 12px;\n border-radius: 6px;\n margin-top: 8px;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.timeline-error i {\n flex-shrink: 0;\n}\n\n/* Expanded Content Styles */\n.timeline-expanded-content {\n margin-top: 20px;\n padding-top: 20px;\n border-top: 1px solid #e0e6ed;\n animation: fadeIn 0.3s ease;\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n transform: translateY(-10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.result-section,\n.error-section {\n margin-bottom: 20px;\n}\n\n.result-section h5,\n.error-section h5 {\n font-size: 14px;\n font-weight: 600;\n color: #495057;\n margin-bottom: 8px;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.error-section h5 {\n color: #dc3545;\n}\n\n.result-content,\n.error-content {\n background: white;\n border: 1px solid #e0e6ed;\n border-radius: 8px;\n padding: 12px 16px;\n font-size: 14px;\n line-height: 1.6;\n color: #495057;\n white-space: pre-wrap;\n word-break: break-word;\n max-height: 200px;\n overflow-y: auto;\n}\n\n/* Code editor styling within result section */\n.result-section mj-code-editor {\n border: 1px solid #e0e6ed;\n border-radius: 8px;\n overflow: hidden;\n}\n\n.error-content {\n background: #f8d7da;\n border-color: #f5c6cb;\n color: #721c24;\n}\n\n.execution-details {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 16px;\n margin-bottom: 20px;\n}\n\n.detail-row {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n}\n\n.detail-label {\n font-size: 12px;\n font-weight: 600;\n color: #6c757d;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n min-width: 80px;\n}\n\n.detail-value {\n font-size: 14px;\n color: #495057;\n word-break: break-all;\n}\n\n.timeline-actions {\n display: flex;\n gap: 12px;\n justify-content: flex-end;\n}\n\n.btn-primary {\n padding: 8px 16px;\n background: #2196f3;\n color: white;\n border: none;\n border-radius: 8px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n transition: all 0.2s ease;\n}\n\n.btn-primary:hover {\n background: #1976d2;\n transform: translateY(-1px);\n box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);\n}\n\n.btn-primary i {\n font-size: 12px;\n}\n\n/* Enhanced Empty States */\n.empty-state {\n text-align: center;\n padding: 60px 20px;\n color: #6c757d;\n background: #f8f9fa;\n border-radius: 12px;\n border: 2px dashed #dee2e6;\n margin-top: 16px;\n}\n\n.empty-state i {\n font-size: 48px;\n color: #dee2e6;\n margin-bottom: 16px;\n}\n\n.empty-state h4 {\n color: #495057;\n font-weight: 600;\n margin-bottom: 8px;\n font-size: 18px;\n}\n\n.empty-state p {\n font-size: 15px;\n line-height: 1.6;\n max-width: 400px;\n margin: 0 auto 20px auto;\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n /* Header Responsiveness */\n .agent-header {\n padding: 16px;\n }\n \n .agent-header-content {\n flex-direction: column;\n gap: 16px;\n }\n \n .agent-overview {\n flex-direction: column;\n align-items: flex-start;\n gap: 12px;\n }\n \n .agent-meta {\n flex-direction: column;\n align-items: flex-start;\n gap: 8px;\n }\n \n .agent-actions {\n width: 100%;\n align-self: stretch;\n }\n \n .action-button {\n flex: 1;\n justify-content: center;\n }\n \n /* Panel Responsiveness */\n .form-content {\n padding: 12px;\n }\n \n ::ng-deep .k-panelbar > .k-panelbar-item > .k-header {\n padding: 16px 20px;\n font-size: 15px;\n }\n \n .panel-content {\n padding: 20px 16px;\n }\n \n .section-header {\n flex-direction: column;\n align-items: flex-start;\n gap: 12px;\n }\n \n .header-actions {\n flex-wrap: wrap;\n align-self: stretch;\n }\n \n /* Entity List Responsiveness */\n .entity-item {\n padding: 12px;\n gap: 12px;\n }\n \n .item-icon {\n width: 36px;\n height: 36px;\n }\n \n .item-icon i {\n font-size: 16px;\n }\n \n .item-title {\n font-size: 15px;\n }\n \n .item-preview {\n font-size: 13px;\n }\n \n .item-meta {\n gap: 8px;\n }\n \n /* Timeline Responsiveness */\n .timeline-item {\n padding: 12px;\n gap: 12px;\n }\n \n .timeline-marker {\n width: 28px;\n height: 28px;\n }\n \n .timeline-marker i {\n font-size: 12px;\n }\n \n .timeline-title {\n flex-direction: column;\n align-items: flex-start;\n gap: 8px;\n }\n \n .timeline-date {\n align-self: flex-start;\n }\n \n /* Form Field Responsiveness */\n .form-fields-grid {\n grid-template-columns: 1fr;\n gap: 16px;\n }\n \n /* Legacy card support */\n .cards-container {\n grid-template-columns: 1fr;\n }\n}\n\n/* Execution History Panel - Max Height and Scroll */\n.execution-history-panel {\n max-height: 500px;\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n/* Custom scrollbar for execution history */\n.execution-history-panel::-webkit-scrollbar {\n width: 8px;\n}\n\n.execution-history-panel::-webkit-scrollbar-track {\n background: #f1f1f1;\n border-radius: 4px;\n}\n\n.execution-history-panel::-webkit-scrollbar-thumb {\n background: #c1c1c1;\n border-radius: 4px;\n}\n\n.execution-history-panel::-webkit-scrollbar-thumb:hover {\n background: #a0a0a0;\n}\n\n/* New Execution History Card Design */\n.execution-history-list {\n display: flex;\n flex-direction: column;\n gap: 12px;\n margin-top: 16px;\n}\n\n.execution-card {\n background: white;\n border: 1px solid #e0e6ed;\n border-radius: 12px;\n overflow: hidden;\n transition: all 0.2s ease;\n cursor: pointer;\n}\n\n.execution-card:hover {\n border-color: #2196f3;\n box-shadow: 0 4px 12px rgba(33, 150, 243, 0.1);\n transform: translateY(-1px);\n}\n\n.execution-card.expanded {\n border-color: #2196f3;\n box-shadow: 0 6px 20px rgba(33, 150, 243, 0.15);\n}\n\n.execution-header {\n padding: 16px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n}\n\n.execution-left-section {\n display: flex;\n flex-direction: column;\n gap: 12px;\n flex: 1;\n min-width: 0;\n}\n\n.execution-status {\n display: flex;\n align-items: center;\n gap: 12px;\n flex-shrink: 0;\n}\n\n.status-indicator {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n}\n\n.status-indicator i {\n color: white;\n font-size: 14px;\n}\n\n.execution-info {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.execution-title {\n font-size: 16px;\n font-weight: 600;\n color: #2c3e50;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.execution-date {\n font-size: 12px;\n color: #6c757d;\n}\n\n.execution-metrics {\n display: flex;\n align-items: flex-start;\n gap: 16px;\n flex-wrap: wrap;\n margin-left: 44px; /* Align with execution title text, accounting for status indicator + gap */\n}\n\n.metric-item {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 12px;\n background: #f8f9fa;\n padding: 6px 10px;\n border-radius: 6px;\n color: #495057;\n white-space: nowrap;\n}\n\n.metric-item i {\n color: #6c757d;\n font-size: 12px;\n}\n\n.metric-label {\n font-weight: 500;\n}\n\n.metric-value {\n font-weight: 600;\n color: #2c3e50;\n}\n\n.execution-actions {\n display: flex;\n gap: 8px;\n flex-shrink: 0;\n}\n\n.action-btn {\n width: 32px;\n height: 32px;\n border: none;\n background: #f8f9fa;\n border-radius: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.2s ease;\n color: #6c757d;\n}\n\n.action-btn:hover {\n background: #2196f3;\n color: white;\n transform: translateY(-1px);\n}\n\n.action-btn i {\n font-size: 12px;\n}\n\n.expand-icon {\n transition: transform 0.2s ease;\n color: #6c757d;\n margin-right: 4px;\n}\n\n.expand-icon.expanded {\n transform: rotate(90deg);\n}\n\n/* Execution Expanded Content */\n.execution-expanded-content {\n padding: 16px;\n border-top: 1px solid #f0f4f8;\n background: #fafbfc;\n animation: slideDown 0.2s ease;\n}\n\n@keyframes slideDown {\n from {\n opacity: 0;\n max-height: 0;\n padding-top: 0;\n padding-bottom: 0;\n }\n to {\n opacity: 1;\n max-height: 500px;\n padding-top: 16px;\n padding-bottom: 16px;\n }\n}\n\n.detailed-metrics {\n margin-bottom: 20px;\n}\n\n.metrics-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 12px;\n}\n\n.metric-detail {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px;\n background: white;\n border: 1px solid #e0e6ed;\n border-radius: 8px;\n}\n\n.metric-detail i {\n color: #2196f3;\n font-size: 16px;\n width: 20px;\n text-align: center;\n}\n\n.metric-info {\n display: flex;\n flex-direction: column;\n gap: 2px;\n flex: 1;\n}\n\n.metric-title {\n font-size: 11px;\n font-weight: 600;\n color: #6c757d;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.metric-data {\n font-size: 14px;\n font-weight: 600;\n color: #2c3e50;\n}\n\n.result-section {\n margin-top: 16px;\n}\n\n.result-section h5 {\n font-size: 14px;\n font-weight: 600;\n color: #495057;\n margin-bottom: 8px;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.error-section h5 {\n color: #dc3545;\n}\n\n.error-content {\n background: #f8d7da;\n border: 1px solid #f5c6cb;\n border-radius: 8px;\n padding: 12px 16px;\n font-size: 14px;\n line-height: 1.6;\n color: #721c24;\n white-space: pre-wrap;\n word-break: break-word;\n max-height: 150px;\n overflow-y: auto;\n}\n\n/* Responsive adjustments for execution history */\n@media (max-width: 768px) {\n .execution-header {\n flex-direction: column;\n align-items: flex-start;\n gap: 12px;\n }\n \n .execution-left-section {\n width: 100%;\n }\n \n .execution-metrics {\n margin-left: 0; /* Remove left margin on mobile */\n flex-direction: column;\n align-items: flex-start;\n gap: 8px;\n width: 100%;\n }\n \n .metric-item {\n font-size: 11px;\n padding: 4px 8px;\n }\n \n .metrics-grid {\n grid-template-columns: 1fr;\n }\n}\n\n/* === PAYLOAD MANAGEMENT SECTION === */\n.payload-section {\n margin-bottom: 2rem;\n background: white;\n border-radius: 12px;\n border: 1px solid #e0e0e0;\n overflow: hidden;\n}\n\n.payload-section-title {\n margin: 0;\n padding: 1rem 1.5rem;\n background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n border-bottom: 1px solid #e0e0e0;\n color: #495057;\n font-size: 1.1rem;\n font-weight: 600;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n.payload-section-title i {\n color: #2196f3;\n font-size: 1.2rem;\n}\n\n/* Payload Scope Styling */\n.payload-field-container {\n padding: 1.5rem;\n display: grid;\n grid-template-columns: 1fr 2fr;\n gap: 2rem;\n align-items: start;\n}\n\n.payload-field-info {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.payload-field-label {\n font-weight: 600;\n color: #495057;\n font-size: 0.95rem;\n}\n\n.payload-field-description {\n color: #6c757d;\n font-size: 0.9rem;\n line-height: 1.5;\n margin: 0;\n}\n\n.payload-field-input {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.payload-field-example {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 0.85rem;\n color: #6c757d;\n background: #f8f9fa;\n padding: 0.5rem 0.75rem;\n border-radius: 6px;\n border: 1px solid #e9ecef;\n}\n\n.payload-field-example i {\n color: #ffc107;\n font-size: 0.9rem;\n}\n\n.payload-field-example code {\n background: #e9ecef;\n padding: 0.2rem 0.4rem;\n border-radius: 4px;\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 0.8rem;\n color: #495057;\n}\n\n/* Path Configuration Grid */\n.payload-paths-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n gap: 1.5rem;\n padding: 1.5rem;\n}\n\n.payload-path-card {\n background: white;\n border: 1px solid #e0e0e0;\n border-radius: 8px;\n overflow: hidden;\n transition: all 0.2s ease;\n}\n\n.payload-path-card:hover {\n border-color: #2196f3;\n box-shadow: 0 4px 12px rgba(33, 150, 243, 0.15);\n}\n\n.payload-path-header {\n display: flex;\n align-items: center;\n gap: 1rem;\n padding: 1rem;\n background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n border-bottom: 1px solid #e0e0e0;\n}\n\n.payload-path-icon {\n width: 40px;\n height: 40px;\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.payload-path-icon.downstream {\n background: linear-gradient(135deg, #28a745, #20c997);\n}\n\n.payload-path-icon.upstream {\n background: linear-gradient(135deg, #007bff, #6610f2);\n}\n\n.payload-path-icon.self-read {\n background: linear-gradient(135deg, #17a2b8, #20c997);\n}\n\n.payload-path-icon.self-write {\n background: linear-gradient(135deg, #ffc107, #fd7e14);\n}\n\n.payload-path-icon i {\n color: white;\n font-size: 1.2rem;\n}\n\n.payload-path-info h4 {\n margin: 0 0 0.25rem 0;\n font-size: 1rem;\n font-weight: 600;\n color: #495057;\n}\n\n.payload-path-info p {\n margin: 0;\n font-size: 0.85rem;\n color: #6c757d;\n line-height: 1.4;\n}\n\n.payload-path-content {\n padding: 1rem;\n}\n\n.json-editor-container {\n border: 1px solid #dee2e6;\n border-radius: 6px;\n overflow: hidden;\n margin-bottom: 0.75rem;\n}\n\n.json-editor-container:hover {\n border-color: #2196f3;\n}\n\n.payload-path-hint {\n display: flex;\n align-items: flex-start;\n gap: 0.5rem;\n font-size: 0.8rem;\n color: #6c757d;\n line-height: 1.4;\n}\n\n.payload-path-hint i {\n color: #17a2b8;\n margin-top: 0.1rem;\n flex-shrink: 0;\n}\n\n.payload-path-hint code {\n background: #e9ecef;\n padding: 0.1rem 0.3rem;\n border-radius: 3px;\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 0.75rem;\n color: #495057;\n}\n\n/* Payload Validation Container */\n.payload-validation-container {\n padding: 1.5rem;\n display: grid;\n grid-template-columns: 1fr 2fr;\n gap: 2rem;\n align-items: start;\n}\n\n.payload-validation-settings {\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n}\n\n.validation-field-group {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.validation-field-label {\n font-weight: 600;\n color: #495057;\n font-size: 0.95rem;\n}\n\n.validation-field-description {\n color: #6c757d;\n font-size: 0.9rem;\n line-height: 1.4;\n margin: 0 0 0.5rem 0;\n}\n\n.payload-validation-schema {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n}\n\n.validation-schema-label {\n font-weight: 600;\n color: #495057;\n font-size: 0.95rem;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n.validation-schema-label i {\n color: #2196f3;\n}\n\n.validation-schema-description {\n color: #6c757d;\n font-size: 0.9rem;\n line-height: 1.4;\n margin: 0;\n}\n\n.validation-schema-editor {\n border: 1px solid #dee2e6;\n border-radius: 6px;\n overflow: hidden;\n}\n\n.validation-schema-editor:hover {\n border-color: #2196f3;\n}\n\n/* === CONFIGURATION SECTION === */\n.config-section {\n margin-bottom: 2rem;\n background: white;\n border-radius: 12px;\n border: 1px solid #e0e0e0;\n overflow: hidden;\n}\n\n.config-section-title {\n margin: 0;\n padding: 1rem 1.5rem;\n background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n border-bottom: 1px solid #e0e0e0;\n color: #495057;\n font-size: 1.1rem;\n font-weight: 600;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n.config-section-title i {\n color: #2196f3;\n font-size: 1.2rem;\n}\n\n.config-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));\n gap: 1.5rem;\n padding: 1.5rem;\n width: 100%;\n}\n\n.config-card {\n background: white;\n border: 1px solid #e0e0e0;\n border-radius: 8px;\n overflow: hidden;\n transition: all 0.2s ease;\n}\n\n.config-card:hover {\n border-color: #2196f3;\n box-shadow: 0 4px 12px rgba(33, 150, 243, 0.15);\n}\n\n.config-card.full-width {\n grid-column: 1 / -1;\n}\n\n.config-card-header {\n display: flex;\n align-items: center;\n gap: 1rem;\n padding: 1rem;\n background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n border-bottom: 1px solid #e0e0e0;\n}\n\n.config-card-icon {\n width: 40px;\n height: 40px;\n border-radius: 8px;\n background: linear-gradient(135deg, #2196f3, #1976d2);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.config-card-icon i {\n color: white;\n font-size: 1.2rem;\n}\n\n.config-card-info h4 {\n margin: 0 0 0.25rem 0;\n font-size: 1rem;\n font-weight: 600;\n color: #495057;\n}\n\n.config-card-info p {\n margin: 0;\n font-size: 0.85rem;\n color: #6c757d;\n line-height: 1.4;\n}\n\n.config-card-content {\n padding: 1rem;\n}\n\n/* Custom field styling for config cards */\n.config-field-input {\n width: 100%;\n min-width: 250px;\n}\n\n/* Fix numeric textbox cutoff issue */\n.config-card-content ::ng-deep kendo-numerictextbox {\n width: 100% !important;\n}\n\n.config-card-content ::ng-deep kendo-numerictextbox .k-numerictextbox {\n width: 100% !important;\n}\n\n.config-card-content ::ng-deep kendo-numerictextbox .k-input {\n width: 100% !important;\n min-width: 200px !important;\n}\n\n.config-card-content ::ng-deep mj-form-field {\n width: 100% !important;\n}\n\n.config-card-content ::ng-deep mj-form-field kendo-numerictextbox {\n width: 100% !important;\n}\n\n.config-card-content ::ng-deep mj-form-field kendo-numerictextbox .k-numerictextbox {\n width: 100% !important;\n}\n\n.config-card-content ::ng-deep mj-form-field kendo-numerictextbox .k-input {\n width: 100% !important;\n min-width: 200px !important;\n}\n\n.config-field-display {\n color: #495057;\n font-size: 14px;\n font-weight: 500;\n padding: 8px 0;\n display: block;\n min-height: 20px;\n}\n\n/* Prompt selector styling */\n.prompt-selector-container {\n display: flex;\n align-items: center;\n gap: 12px;\n width: 100%;\n}\n\n.prompt-display {\n flex: 1;\n min-width: 0;\n padding: 8px 12px;\n background: #f8f9fa;\n border: 1px solid #dee2e6;\n border-radius: 6px;\n}\n\n.prompt-name {\n color: #495057;\n font-weight: 500;\n font-size: 14px;\n}\n\n.no-prompt {\n color: #6c757d;\n font-style: italic;\n font-size: 14px;\n}\n\n.prompt-actions {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-shrink: 0;\n}\n\n.prompt-select-btn {\n white-space: nowrap;\n}\n\n.prompt-clear-btn {\n min-width: 32px;\n}\n\n.config-card-hint {\n display: flex;\n align-items: flex-start;\n gap: 0.5rem;\n font-size: 0.8rem;\n color: #6c757d;\n line-height: 1.4;\n margin-top: 0.5rem;\n}\n\n.config-card-hint i {\n color: #17a2b8;\n margin-top: 0.1rem;\n flex-shrink: 0;\n}\n\n.config-card-hint code {\n background: #e9ecef;\n padding: 0.1rem 0.3rem;\n border-radius: 3px;\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 0.75rem;\n color: #495057;\n}\n\n\n/* === RESPONSIVE DESIGN === */\n@media (max-width: 768px) {\n .payload-field-container,\n .payload-validation-container {\n grid-template-columns: 1fr;\n gap: 1rem;\n }\n \n .payload-paths-grid {\n grid-template-columns: 1fr;\n gap: 1rem;\n padding: 1rem;\n }\n \n .config-grid {\n grid-template-columns: 1fr;\n gap: 1rem;\n padding: 1rem;\n }\n \n .payload-section-title,\n .config-section-title {\n padding: 0.75rem 1rem;\n font-size: 1rem;\n }\n \n .payload-path-header,\n .config-card-header {\n padding: 0.75rem;\n }\n \n .payload-path-content,\n .config-card-content {\n padding: 0.75rem;\n }\n \n .payload-field-container,\n .payload-validation-container {\n padding: 1rem;\n }\n}\n\n"] }]
3715
3832
  }], () => [{ type: i0.ElementRef }, { type: i1.SharedService }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: i0.ChangeDetectorRef }, { type: i3.DialogService }, { type: i0.ViewContainerRef }, { type: i4.AIAgentManagementService }, { type: i5.AITestHarnessDialogService }], { customSectionContainer: [{
3716
3833
  type: ViewChild,
3717
3834
  args: ['customSectionContainer', { read: ViewContainerRef }]