@memberjunction/ng-core-entity-forms 4.4.0 → 5.1.0

package/dist/lib/custom/AIAgents/ai-agent-form.component.js

@@ -11,7 +11,7 @@ import { BaseFormComponent, BaseFormSectionComponent } from '@memberjunction/ng-
 import { CompositeKey, Metadata, RunView } from '@memberjunction/core';
 import { UserInfoEngine } from '@memberjunction/core-entities';
 import { MJNotificationService } from '@memberjunction/ng-notifications';
-import { AIAgentFormComponent } from '../../generated/Entities/AIAgent/aiagent.form.component';
+import { MJAIAgentFormComponent } from '../../generated/Entities/MJAIAgent/mjaiagent.form.component';
 import { DialogService } from '@progress/kendo-angular-dialog';
 import { SharedService } from '@memberjunction/ng-shared';
 import { AIAgentManagementService } from './ai-agent-management.service';
@@ -757,7 +757,7 @@ function AIAgentFormComponentExtended_Conditional_3_Conditional_9_ng_template_2_
 function AIAgentFormComponentExtended_Conditional_3_Conditional_9_ng_template_2_Conditional_2_Conditional_4_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r15 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 133);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_Conditional_3_Conditional_9_ng_template_2_Conditional_2_Conditional_4_For_2_Template_div_click_0_listener() { const action_r16 = i0.ɵɵrestoreView(_r15).$implicit; const ctx_r2 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r2.navigateToEntity("Actions", action_r16.ID)); });
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_Conditional_3_Conditional_9_ng_template_2_Conditional_2_Conditional_4_For_2_Template_div_click_0_listener() { const action_r16 = i0.ɵɵrestoreView(_r15).$implicit; const ctx_r2 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r2.navigateToEntity("MJ: Actions", action_r16.ID)); });
     i0.ɵɵelementStart(1, "div", 134);
     i0.ɵɵelement(2, "i");
     i0.ɵɵelementEnd();
@@ -798,7 +798,7 @@ function AIAgentFormComponentExtended_Conditional_3_Conditional_9_ng_template_2_
 function AIAgentFormComponentExtended_Conditional_3_Conditional_9_ng_template_2_Conditional_2_Conditional_4_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r18 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 145);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_Conditional_3_Conditional_9_ng_template_2_Conditional_2_Conditional_4_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r18); const ctx_r2 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r2.navigateToEntity("AI Agent Actions", "")); });
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_Conditional_3_Conditional_9_ng_template_2_Conditional_2_Conditional_4_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r18); const ctx_r2 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r2.navigateToEntity("MJ: AI Agent Actions", "")); });
     i0.ɵɵelementStart(1, "span");
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd()();
@@ -994,7 +994,7 @@ function AIAgentFormComponentExtended_Conditional_3_Conditional_10_ng_template_2
 function AIAgentFormComponentExtended_Conditional_3_Conditional_10_ng_template_2_Conditional_16_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r21 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 160);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_Conditional_3_Conditional_10_ng_template_2_Conditional_16_For_2_Template_div_click_0_listener() { const item_r22 = i0.ɵɵrestoreView(_r21).$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.navigateToEntity("AI Agents", item_r22.agent.ID)); });
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_Conditional_3_Conditional_10_ng_template_2_Conditional_16_For_2_Template_div_click_0_listener() { const item_r22 = i0.ɵɵrestoreView(_r21).$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.navigateToEntity("MJ: AI Agents", item_r22.agent.ID)); });
     i0.ɵɵelementStart(1, "div", 161);
     i0.ɵɵelement(2, "i");
     i0.ɵɵtext(3);
@@ -1209,7 +1209,7 @@ function AIAgentFormComponentExtended_Conditional_3_Conditional_11_ng_template_2
 function AIAgentFormComponentExtended_Conditional_3_Conditional_11_ng_template_2_Conditional_12_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r29 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 181);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_Conditional_3_Conditional_11_ng_template_2_Conditional_12_For_2_Template_div_click_0_listener() { const prompt_r30 = i0.ɵɵrestoreView(_r29).$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.navigateToEntity("AI Prompts", prompt_r30.ID)); });
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_Conditional_3_Conditional_11_ng_template_2_Conditional_12_For_2_Template_div_click_0_listener() { const prompt_r30 = i0.ɵɵrestoreView(_r29).$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.navigateToEntity("MJ: AI Prompts", prompt_r30.ID)); });
     i0.ɵɵelementStart(1, "div", 134);
     i0.ɵɵelement(2, "i", 182);
     i0.ɵɵelementEnd();
@@ -1242,7 +1242,7 @@ function AIAgentFormComponentExtended_Conditional_3_Conditional_11_ng_template_2
 function AIAgentFormComponentExtended_Conditional_3_Conditional_11_ng_template_2_Conditional_12_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r33 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 145);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_Conditional_3_Conditional_11_ng_template_2_Conditional_12_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r33); const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.navigateToEntity("AI Prompts", "")); });
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_Conditional_3_Conditional_11_ng_template_2_Conditional_12_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r33); const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.navigateToEntity("MJ: AI Prompts", "")); });
     i0.ɵɵelementStart(1, "span");
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd()();
@@ -1341,7 +1341,7 @@ function AIAgentFormComponentExtended_Conditional_3_Conditional_12_ng_template_2
 function AIAgentFormComponentExtended_Conditional_3_Conditional_12_ng_template_2_Conditional_5_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r34 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 188);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_Conditional_3_Conditional_12_ng_template_2_Conditional_5_For_2_Template_div_click_0_listener() { const cycle_r35 = i0.ɵɵrestoreView(_r34).$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.navigateToEntity("AI Agent Learning Cycles", cycle_r35.ID)); });
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_Conditional_3_Conditional_12_ng_template_2_Conditional_5_For_2_Template_div_click_0_listener() { const cycle_r35 = i0.ɵɵrestoreView(_r34).$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.navigateToEntity("MJ: AI Agent Learning Cycles", cycle_r35.ID)); });
     i0.ɵɵelementStart(1, "div", 134);
     i0.ɵɵelement(2, "i", 185);
     i0.ɵɵelementEnd();
@@ -1367,7 +1367,7 @@ function AIAgentFormComponentExtended_Conditional_3_Conditional_12_ng_template_2
 function AIAgentFormComponentExtended_Conditional_3_Conditional_12_ng_template_2_Conditional_5_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r36 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 145);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_Conditional_3_Conditional_12_ng_template_2_Conditional_5_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r36); const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.navigateToEntity("AI Agent Learning Cycles", "")); });
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_Conditional_3_Conditional_12_ng_template_2_Conditional_5_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r36); const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.navigateToEntity("MJ: AI Agent Learning Cycles", "")); });
     i0.ɵɵelementStart(1, "span");
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd()();
@@ -1478,7 +1478,7 @@ function AIAgentFormComponentExtended_Conditional_3_Conditional_13_ng_template_2
 function AIAgentFormComponentExtended_Conditional_3_Conditional_13_ng_template_2_Conditional_7_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r39 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 192);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_Conditional_3_Conditional_13_ng_template_2_Conditional_7_For_2_Template_div_click_0_listener() { const note_r40 = i0.ɵɵrestoreView(_r39).$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.navigateToEntity("AI Agent Notes", note_r40.ID)); });
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_Conditional_3_Conditional_13_ng_template_2_Conditional_7_For_2_Template_div_click_0_listener() { const note_r40 = i0.ɵɵrestoreView(_r39).$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.navigateToEntity("MJ: AI Agent Notes", note_r40.ID)); });
     i0.ɵɵelementStart(1, "div", 134);
     i0.ɵɵelement(2, "i", 190);
     i0.ɵɵelementEnd();
@@ -1504,7 +1504,7 @@ function AIAgentFormComponentExtended_Conditional_3_Conditional_13_ng_template_2
 function AIAgentFormComponentExtended_Conditional_3_Conditional_13_ng_template_2_Conditional_7_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r41 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 145);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_Conditional_3_Conditional_13_ng_template_2_Conditional_7_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r41); const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.navigateToEntity("AI Agent Notes", "")); });
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_Conditional_3_Conditional_13_ng_template_2_Conditional_7_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r41); const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.navigateToEntity("MJ: AI Agent Notes", "")); });
     i0.ɵɵelementStart(1, "span");
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd()();
@@ -2156,7 +2156,7 @@ function AIAgentFormComponentExtended_Conditional_4_Template(rf, ctx) { if (rf &
  * <mj-ai-agent-form [recordId]="agentId"></mj-ai-agent-form>
  * ```
  */
-let AIAgentFormComponentExtended = class AIAgentFormComponentExtended extends AIAgentFormComponent {
+let AIAgentFormComponentExtended = class AIAgentFormComponentExtended extends MJAIAgentFormComponent {
     constructor() {
         super(...arguments);
         /** Subject for managing component lifecycle and cleaning up subscriptions */
@@ -2430,15 +2430,15 @@ let AIAgentFormComponentExtended = class AIAgentFormComponentExtended extends AI
     // - UserCanDelete (Delete permission)
     /** Check if user can create AI Agent Actions */
     get UserCanCreateActions() {
-        return this.checkEntityPermission('AI Agent Actions', 'Create');
+        return this.checkEntityPermission('MJ: AI Agent Actions', 'Create');
     }
     /** Check if user can update AI Agent Actions */
     get UserCanUpdateActions() {
-        return this.checkEntityPermission('AI Agent Actions', 'Update');
+        return this.checkEntityPermission('MJ: AI Agent Actions', 'Update');
     }
     /** Check if user can delete AI Agent Actions */
     get UserCanDeleteActions() {
-        return this.checkEntityPermission('AI Agent Actions', 'Delete');
+        return this.checkEntityPermission('MJ: AI Agent Actions', 'Delete');
     }
     /** Check if user can create AI Agent Prompts */
     get UserCanCreatePrompts() {
@@ -2454,31 +2454,31 @@ let AIAgentFormComponentExtended = class AIAgentFormComponentExtended extends AI
     }
     /** Check if user can create AI Agents (for sub-agents) */
     get UserCanCreateSubAgents() {
-        return this.checkEntityPermission('AI Agents', 'Create');
+        return this.checkEntityPermission('MJ: AI Agents', 'Create');
     }
     /** Check if user can update AI Agents (for sub-agents) */
     get UserCanUpdateSubAgents() {
-        return this.checkEntityPermission('AI Agents', 'Update');
+        return this.checkEntityPermission('MJ: AI Agents', 'Update');
     }
     /** Check if user can delete AI Agents (for sub-agents) */
     get UserCanDeleteSubAgents() {
-        return this.checkEntityPermission('AI Agents', 'Delete');
+        return this.checkEntityPermission('MJ: AI Agents', 'Delete');
     }
     /** Check if user can create AI Agent Notes */
     get UserCanCreateNotes() {
-        return this.checkEntityPermission('AI Agent Notes', 'Create');
+        return this.checkEntityPermission('MJ: AI Agent Notes', 'Create');
     }
     /** Check if user can update AI Agent Notes */
     get UserCanUpdateNotes() {
-        return this.checkEntityPermission('AI Agent Notes', 'Update');
+        return this.checkEntityPermission('MJ: AI Agent Notes', 'Update');
     }
     /** Check if user can delete AI Agent Notes */
     get UserCanDeleteNotes() {
-        return this.checkEntityPermission('AI Agent Notes', 'Delete');
+        return this.checkEntityPermission('MJ: AI Agent Notes', 'Delete');
     }
     /** Check if user can view AI Agent Learning Cycles */
     get UserCanViewLearningCycles() {
-        return this.checkEntityPermission('AI Agent Learning Cycles', 'Read');
+        return this.checkEntityPermission('MJ: AI Agent Learning Cycles', 'Read');
     }
     /** Check if user can view AI Agent Runs (execution history) */
     get UserCanViewExecutionHistory() {
@@ -2486,7 +2486,7 @@ let AIAgentFormComponentExtended = class AIAgentFormComponentExtended extends AI
     }
     /** Check if user can create AI Prompts (needed for creating new prompts) */
     get UserCanCreateAIPrompts() {
-        return this.checkEntityPermission('AI Prompts', 'Create');
+        return this.checkEntityPermission('MJ: AI Prompts', 'Create');
     }
     /** Check if user can create both AI Prompts and AI Agent Prompts (for createNewPrompt functionality) */
     get UserCanCreateNewPrompts() {
@@ -2653,7 +2653,7 @@ let AIAgentFormComponentExtended = class AIAgentFormComponentExtended extends AI
             const results = await rv.RunViews([
                 // Learning cycles
                 {
-                    EntityName: 'AI Agent Learning Cycles',
+                    EntityName: 'MJ: AI Agent Learning Cycles',
                     // limit fields
                     Fields: ["ID", "Name", "StartedAt", "EndedAt", "Status", "AgentID"],
                     ExtraFilter: `AgentID='${this.record.ID}'`,
@@ -2661,7 +2661,7 @@ let AIAgentFormComponentExtended = class AIAgentFormComponentExtended extends AI
                 },
                 // Notes
                 {
-                    EntityName: 'AI Agent Notes',
+                    EntityName: 'MJ: AI Agent Notes',
                     // limit fields
                     Fields: ["ID", "Name", "AgentID", "AgentNoteType", "AgentNoteTypeID", "UserID"],
                     ExtraFilter: `AgentID='${this.record.ID}'`
@@ -3292,7 +3292,7 @@ let AIAgentFormComponentExtended = class AIAgentFormComponentExtended extends AI
         // Get currently linked and pending action IDs for pre-selection
         const currentActionIds = this.agentActions.map(aa => aa.ID);
         const pendingAddIds = this.PendingRecords
-            .filter(p => p.entityObject.EntityInfo.Name === 'AI Agent Actions' && p.action === 'save')
+            .filter(p => p.entityObject.EntityInfo.Name === 'MJ: AI Agent Actions' && p.action === 'save')
             .map(p => p.entityObject.Get('ActionID'));
         const allLinkedIds = [...currentActionIds, ...pendingAddIds];
         this.agentManagementService.openAddActionDialog({
@@ -3312,7 +3312,7 @@ let AIAgentFormComponentExtended = class AIAgentFormComponentExtended extends AI
                     // Add to pending changes (defer until save)
                     const md = new Metadata();
                     for (const action of newActions) {
-                        const agentAction = await md.GetEntityObject('AI Agent Actions');
+                        const agentAction = await md.GetEntityObject('MJ: AI Agent Actions');
                         agentAction.NewRecord();
                         agentAction.AgentID = this.record.ID;
                         agentAction.ActionID = action.ID;
@@ -3844,7 +3844,7 @@ let AIAgentFormComponentExtended = class AIAgentFormComponentExtended extends AI
         try {
             // Get list of already pending sub-agent IDs to filter duplicates
             const pendingSubAgentIds = this.PendingRecords
-                .filter(p => p.entityObject.EntityInfo.Name === 'AI Agents' &&
+                .filter(p => p.entityObject.EntityInfo.Name === 'MJ: AI Agents' &&
                 p.action === 'save' &&
                 p.entityObject.Get('ParentID') === this.record.ID)
                 .map(p => p.entityObject.Get('ID'));
@@ -3868,7 +3868,7 @@ let AIAgentFormComponentExtended = class AIAgentFormComponentExtended extends AI
                         // Add to pending changes (defer until save)
                         const md = new Metadata();
                         for (const agent of newAgents) {
-                            const subAgentToUpdate = await md.GetEntityObject('AI Agents');
+                            const subAgentToUpdate = await md.GetEntityObject('MJ: AI Agents');
                             await subAgentToUpdate.Load(agent.ID);
                             subAgentToUpdate.ParentID = this.record.ID;
                             // Database constraint requires ExposeAsAction = false for sub-agents
@@ -3922,7 +3922,7 @@ let AIAgentFormComponentExtended = class AIAgentFormComponentExtended extends AI
             if (result && result.text === 'Remove') {
                 try {
                     // Check if this is a pending add (not yet in database)
-                    const pendingAddIndex = this.PendingRecords.findIndex(p => p.entityObject.EntityInfo.Name === 'AI Agents' &&
+                    const pendingAddIndex = this.PendingRecords.findIndex(p => p.entityObject.EntityInfo.Name === 'MJ: AI Agents' &&
                         p.action === 'save' &&
                         p.entityObject.Get('ID') === subAgent.ID &&
                         p.entityObject.Get('ParentID') === this.record.ID);
@@ -3933,7 +3933,7 @@ let AIAgentFormComponentExtended = class AIAgentFormComponentExtended extends AI
                     else {
                         // Add to pending removals (will restore to root agent)
                         const md = new Metadata();
-                        const subAgentToUpdate = await md.GetEntityObject('AI Agents');
+                        const subAgentToUpdate = await md.GetEntityObject('MJ: AI Agents');
                         await subAgentToUpdate.Load(subAgent.ID);
                         subAgentToUpdate.ParentID = null; // Will become a root agent
                         this.PendingRecords.push({
@@ -4102,7 +4102,7 @@ let AIAgentFormComponentExtended = class AIAgentFormComponentExtended extends AI
             if (result && result.text === 'Remove') {
                 try {
                     // Check if this is a pending add (not yet in database)
-                    const pendingAddIndex = this.PendingRecords.findIndex(p => p.entityObject.EntityInfo.Name === 'AI Agent Actions' &&
+                    const pendingAddIndex = this.PendingRecords.findIndex(p => p.entityObject.EntityInfo.Name === 'MJ: AI Agent Actions' &&
                         p.action === 'save' &&
                         p.entityObject.Get('ActionID') === action.ID);
                     if (pendingAddIndex >= 0) {
@@ -4113,7 +4113,7 @@ let AIAgentFormComponentExtended = class AIAgentFormComponentExtended extends AI
                         // Find the existing AI Agent Action link record for deferred deletion
                         const rv = new RunView();
                         const linkResult = await rv.RunView({
-                            EntityName: 'AI Agent Actions',
+                            EntityName: 'MJ: AI Agent Actions',
                             ExtraFilter: `AgentID='${this.record.ID}' AND ActionID='${action.ID}'`,
                             ResultType: 'entity_object'
                         });
@@ -4155,7 +4155,7 @@ let AIAgentFormComponentExtended = class AIAgentFormComponentExtended extends AI
     async openPromptAdvancedSettings(prompt, event) {
         event.stopPropagation(); // Prevent navigation
         try {
-            // Find the corresponding AIAgentPromptEntity for this prompt
+            // Find the corresponding MJAIAgentPromptEntity for this prompt
             // Get all agent prompts for validation
             const allAgentPrompts = AIEngineBase.Instance.AgentPrompts.filter(ap => ap.AgentID === this.record.ID);
             const agentPrompt = allAgentPrompts.find(ap => ap.PromptID === prompt.ID);
@@ -4314,7 +4314,7 @@ let AIAgentFormComponentExtended = class AIAgentFormComponentExtended extends AI
             // We need to save Templates and Template Contents BEFORE the main AI Agent
             // since AI Prompts depend on Templates, and AI Agent Prompts depend on AI Agents
             // 1. First save Templates (they have no dependencies)
-            const templateRecords = this.PendingRecords.filter(p => p.entityObject.EntityInfo.Name === 'Templates');
+            const templateRecords = this.PendingRecords.filter(p => p.entityObject.EntityInfo.Name === 'MJ: Templates');
             for (const templateRecord of templateRecords) {
                 templateRecord.entityObject.TransactionGroup = transactionGroup;
                 if (templateRecord.action === 'save') {
@@ -4329,7 +4329,7 @@ let AIAgentFormComponentExtended = class AIAgentFormComponentExtended extends AI
                 }
             }
             // 2. Save Template Contents (depend on Templates)
-            const templateContentRecords = this.PendingRecords.filter(p => p.entityObject.EntityInfo.Name === 'Template Contents');
+            const templateContentRecords = this.PendingRecords.filter(p => p.entityObject.EntityInfo.Name === 'MJ: Template Contents');
             for (const contentRecord of templateContentRecords) {
                 contentRecord.entityObject.TransactionGroup = transactionGroup;
                 if (contentRecord.action === 'save') {
@@ -4344,7 +4344,7 @@ let AIAgentFormComponentExtended = class AIAgentFormComponentExtended extends AI
                 }
             }
             // 3. Save AI Prompts (depend on Templates)
-            const promptRecords = this.PendingRecords.filter(p => p.entityObject.EntityInfo.Name === 'AI Prompts');
+            const promptRecords = this.PendingRecords.filter(p => p.entityObject.EntityInfo.Name === 'MJ: AI Prompts');
             for (const promptRecord of promptRecords) {
                 promptRecord.entityObject.TransactionGroup = transactionGroup;
                 if (promptRecord.action === 'save') {
@@ -4366,7 +4366,7 @@ let AIAgentFormComponentExtended = class AIAgentFormComponentExtended extends AI
                 return false;
             }
             // 4.1. Handle deferred sub-agent creation - set ParentID on any sub-agents created before parent was saved
-            const subAgentRecords = this.PendingRecords.filter(p => p.entityObject.EntityInfo.Name === 'AI Agents' &&
+            const subAgentRecords = this.PendingRecords.filter(p => p.entityObject.EntityInfo.Name === 'MJ: AI Agents' &&
                 p.action === 'save' &&
                 p.entityObject.Get('_tempParentId') === this.record.ID);
             for (const subAgentRecord of subAgentRecords) {
@@ -4378,9 +4378,9 @@ let AIAgentFormComponentExtended = class AIAgentFormComponentExtended extends AI
                 subAgent.Set('_tempParentId', null);
             }
             // 5. Save all other pending records (AI Agent Actions, AI Agent Prompts, etc.)
-            const otherRecords = this.PendingRecords.filter(p => p.entityObject.EntityInfo.Name !== 'Templates' &&
-                p.entityObject.EntityInfo.Name !== 'Template Contents' &&
-                p.entityObject.EntityInfo.Name !== 'AI Prompts');
+            const otherRecords = this.PendingRecords.filter(p => p.entityObject.EntityInfo.Name !== 'MJ: Templates' &&
+                p.entityObject.EntityInfo.Name !== 'MJ: Template Contents' &&
+                p.entityObject.EntityInfo.Name !== 'MJ: AI Prompts');
             for (const record of otherRecords) {
                 record.entityObject.TransactionGroup = transactionGroup;
                 if (record.action === 'save') {
@@ -4421,7 +4421,7 @@ let AIAgentFormComponentExtended = class AIAgentFormComponentExtended extends AI
      */
     navigateToParentAgent() {
         if (this.record.ParentID) {
-            this.navigateToEntity('AI Agents', this.record.ParentID);
+            this.navigateToEntity('MJ: AI Agents', this.record.ParentID);
         }
     }
     /**
@@ -4486,12 +4486,12 @@ let AIAgentFormComponentExtended = class AIAgentFormComponentExtended extends AI
         } }, dependencies: [i1.ɵNgNoValidate, i1.NgControlStatus, i1.NgControlStatusGroup, i1.NgModel, i1.NgForm, i2.PanelBarComponent, i2.PanelBarItemComponent, i2.PanelBarContentDirective, i2.PanelBarItemTitleDirective, i3.DialogContainerDirective, i3.WindowContainerDirective, i4.TextBoxComponent, i4.TextBoxPrefixTemplateDirective, i5.DropDownListComponent, i6.ButtonComponent, i6.ButtonGroupComponent, i7.MjFormToolbarComponent, i7.MjFormFieldComponent, i8.CodeEditorComponent, i9.LoadingComponent, i10.AgentPermissionsDialogComponent, i11.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: 8px 16px;\n    box-shadow: 0 2px 4px rgba(0,0,0,0.04);\n    transition: padding 0.2s ease;\n}\n\n.agent-header-content[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 12px;\n}\n\n\n\n.agent-header-toggle[_ngcontent-%COMP%] {\n    background: none;\n    border: 1px solid #e0e6ed;\n    border-radius: 6px;\n    width: 24px;\n    height: 24px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    color: #94a3b8;\n    flex-shrink: 0;\n    padding: 0;\n    transition: all 0.15s ease;\n}\n\n.agent-header-toggle[_ngcontent-%COMP%]:hover {\n    background: #f1f5f9;\n    color: #475569;\n    border-color: #cbd5e1;\n}\n\n.agent-header-toggle[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 10px;\n}\n\n.agent-overview[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    flex: 1;\n    min-width: 0;\n}\n\n.agent-icon-wrapper[_ngcontent-%COMP%] {\n    width: 36px;\n    height: 36px;\n    background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);\n    border-radius: 8px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.15);\n    flex-shrink: 0;\n    transition: all 0.2s ease;\n}\n\n.agent-icon-wrapper[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: white;\n    font-size: 18px;\n}\n\n\n\n.agent-header-mini[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 4px 12px;\n    background: #ffffff;\n    border-bottom: 1px solid #e2e8f0;\n    height: 32px;\n}\n\n.agent-header-mini-expand[_ngcontent-%COMP%] {\n    background: none;\n    border: 1px solid #e0e6ed;\n    border-radius: 4px;\n    width: 22px;\n    height: 22px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    color: #94a3b8;\n    padding: 0;\n    flex-shrink: 0;\n    transition: all 0.15s ease;\n}\n\n.agent-header-mini-expand[_ngcontent-%COMP%]:hover {\n    background: #f1f5f9;\n    color: #475569;\n    border-color: #cbd5e1;\n}\n\n.agent-header-mini-expand[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 9px;\n}\n\n.agent-header-mini-name[_ngcontent-%COMP%] {\n    font-size: 13px;\n    font-weight: 600;\n    color: #334155;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    max-width: 300px;\n}\n\n.agent-header-mini-status[_ngcontent-%COMP%] {\n    padding: 1px 7px;\n    border-radius: 10px;\n    font-size: 10px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n    color: white;\n    flex-shrink: 0;\n}\n\n.agent-header-mini-spacer[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.agent-header-mini-btn[_ngcontent-%COMP%] {\n    background: none;\n    border: 1px solid #e2e8f0;\n    border-radius: 4px;\n    width: 24px;\n    height: 24px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    color: #64748b;\n    padding: 0;\n    flex-shrink: 0;\n    transition: all 0.15s ease;\n}\n\n.agent-header-mini-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n    background: #f1f5f9;\n    color: #334155;\n    border-color: #cbd5e1;\n}\n\n.agent-header-mini-btn[_ngcontent-%COMP%]:disabled {\n    opacity: 0.35;\n    cursor: not-allowed;\n}\n\n.agent-header-mini-btn--primary[_ngcontent-%COMP%] {\n    border-color: #93c5fd;\n    color: #2563eb;\n    background: #eff6ff;\n}\n\n.agent-header-mini-btn--primary[_ngcontent-%COMP%]:hover:not(:disabled) {\n    background: #dbeafe;\n    border-color: #60a5fa;\n    color: #1d4ed8;\n}\n\n.agent-header-mini-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 11px;\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: 18px;\n    font-weight: 600;\n    color: #2c3e50;\n    margin: 0 0 4px 0;\n    line-height: 1.2;\n}\n\n.agent-name-input[_ngcontent-%COMP%] {\n    font-size: 16px !important;\n    font-weight: 500 !important;\n    height: 30px !important;\n    width: 100% !important;\n    max-width: 350px !important;\n}\n\n.agent-meta[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    flex-wrap: wrap;\n}\n\n.status-badge[_ngcontent-%COMP%] {\n    padding: 3px 10px;\n    border-radius: 12px;\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\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.parent-agent.clickable[_ngcontent-%COMP%] {\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.parent-agent.clickable[_ngcontent-%COMP%]:hover {\n    background: #e3e7ed;\n    color: #2196f3;\n    transform: translateY(-1px);\n    box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n\n.parent-agent.clickable[_ngcontent-%COMP%]:active {\n    transform: translateY(0);\n    box-shadow: 0 1px 2px rgba(0,0,0,0.1);\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: row;\n    gap: 8px;\n    flex-shrink: 0;\n    align-items: center;\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: 8px 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: 10px;\n    margin-bottom: 8px;\n    box-shadow: 0 1px 4px rgba(0,0,0,0.05);\n    background: white;\n    overflow: hidden;\n}\n\n  .k-panelbar > .k-panelbar-item > .k-header {\n    background: white;\n    border: none;\n    padding: 10px 16px;\n    border-radius: 12px 12px 0 0;\n    color: #2c3e50;\n    font-weight: 600;\n    font-size: 14px;\n    transition: all 0.2s ease;\n    display: flex;\n    align-items: center;\n    gap: 10px;\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.pagination-controls[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 12px;\n    align-items: center;\n    justify-content: center;\n    padding: 16px;\n    margin-top: 12px;\n    background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n    border-radius: 10px;\n    border: 1px solid #dee2e6;\n}\n\n.page-nav-btn[_ngcontent-%COMP%] {\n    min-width: 120px;\n    font-weight: 500;\n}\n\n.page-nav-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 12px;\n}\n\n.page-nav-btn[_ngcontent-%COMP%]:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n}\n\n.page-info[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 4px;\n    padding: 0 16px;\n    font-weight: 500;\n    color: #495057;\n    min-width: 200px;\n    text-align: center;\n}\n\n.page-info[_ngcontent-%COMP%]   .record-count[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: #6c757d;\n    font-weight: normal;\n}\n\n.page-info[_ngcontent-%COMP%]   .fa-spinner[_ngcontent-%COMP%] {\n    margin-right: 8px;\n    color: #2196f3;\n}\n\n.view-all-btn[_ngcontent-%COMP%] {\n    color: #6c757d;\n    white-space: nowrap;\n    margin-left: auto;\n}\n\n.view-all-btn[_ngcontent-%COMP%]:hover {\n    color: #2196f3;\n}\n\n.view-all-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    margin-right: 4px;\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-search-bar[_ngcontent-%COMP%] {\n    margin-bottom: 16px;\n    padding: 0 4px;\n}\n\n.execution-search-bar[_ngcontent-%COMP%]   kendo-textbox[_ngcontent-%COMP%] {\n    width: 100%;\n}\n\n.execution-search-bar[_ngcontent-%COMP%]   .fa-search[_ngcontent-%COMP%] {\n    color: #666;\n    margin-right: 8px;\n    font-size: 14px;\n}\n\n\n\n.execution-history-list[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n    margin-top: 8px;\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}\n\n\n\n\n\n\n\n\n.sub-agent-filter-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 16px;\n    flex-wrap: wrap;\n    gap: 12px;\n}\n\n.filter-controls[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.filter-controls[_ngcontent-%COMP%]   kendo-buttongroup[_ngcontent-%COMP%] {\n    flex: 0 0 auto;\n}\n\n\n\n.sub-agent-type-badge[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 8px;\n    right: 8px;\n    padding: 4px 8px;\n    border-radius: 4px;\n    font-size: 10px;\n    font-weight: 600;\n    color: white;\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    z-index: 1;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n\n\n\n.sub-agent-item[_ngcontent-%COMP%] {\n    position: relative;\n    padding-left: 8px;\n    transition: all 0.2s ease;\n}\n\n.sub-agent-item.child-sub-agent[_ngcontent-%COMP%] {\n    border-left: 4px solid #2196F3;\n}\n\n.sub-agent-item.related-sub-agent[_ngcontent-%COMP%] {\n    border-left: 4px solid #9C27B0;\n}\n\n.sub-agent-item[_ngcontent-%COMP%]:hover {\n    transform: translateX(4px);\n}\n\n\n\n.payload-info[_ngcontent-%COMP%] {\n    background: #f5f5f5;\n    color: #666;\n    font-family: 'Roboto Mono', monospace;\n    font-size: 11px;\n}\n\n\n\n.empty-state-info[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 16px;\n    margin: 24px 0;\n    max-width: 600px;\n    margin-left: auto;\n    margin-right: auto;\n}\n\n.info-card[_ngcontent-%COMP%] {\n    background: #fafafa;\n    border: 1px solid #e0e0e0;\n    border-radius: 8px;\n    padding: 16px;\n    text-align: left;\n}\n\n.info-card[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 24px;\n    margin-bottom: 8px;\n    display: block;\n}\n\n.info-card[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {\n    display: block;\n    margin-bottom: 4px;\n    font-size: 14px;\n}\n\n.info-card[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 12px;\n    color: #666;\n}\n\n.empty-state-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 12px;\n    justify-content: center;\n    margin-top: 16px;\n}\n\n\n\n@media (max-width: 768px) {\n    .sub-agent-filter-header[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: stretch;\n    }\n    \n    .filter-controls[_ngcontent-%COMP%], \n   .header-actions[_ngcontent-%COMP%] {\n        width: 100%;\n        justify-content: center;\n    }\n    \n    .empty-state-info[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n    }\n}"] }); }
 };
 AIAgentFormComponentExtended = AIAgentFormComponentExtended_1 = __decorate([
-    RegisterClass(BaseFormComponent, 'AI Agents')
+    RegisterClass(BaseFormComponent, 'MJ: AI Agents')
 ], AIAgentFormComponentExtended);
 export { AIAgentFormComponentExtended };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AIAgentFormComponentExtended, [{
         type: Component,
-        args: [{ standalone: false, 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  @if (record) {\n    <form class=\"record-form\" #form=\"ngForm\">\n      <mj-form-toolbar [Form]=\"this\"></mj-form-toolbar>\n      <!-- Agent Header \u2014 expanded view -->\n      @if (!HeaderCollapsed) {\n        <div class=\"agent-header\">\n          <div class=\"agent-header-content\">\n            <button class=\"agent-header-toggle\" (click)=\"ToggleHeaderCollapsed()\"\n              title=\"Minimize header\">\n              <i class=\"fa-solid fa-chevron-up\"></i>\n            </button>\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 clickable\"\n                      (click)=\"navigateToParentAgent()\"\n                      title=\"Open parent agent: {{ record.Parent }}\">\n                      <i class=\"fa-solid fa-sitemap\"></i>\n                      Child of {{ record.Parent }}\n                      <i class=\"fa-solid fa-external-link\" style=\"margin-left: 4px; font-size: 10px;\"></i>\n                    </span>\n                  }\n                </div>\n              </div>\n            </div>\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> Run\n                </button>\n                <button kendoButton size=\"large\"\n                  (click)=\"openPermissionsDialog()\"\n                  [title]=\"IsOpenToEveryone ? 'Open to everyone \u2014 click to manage permissions' : 'Restricted \u2014 click to manage permissions'\">\n                  <i class=\"fa-solid\" [class.fa-lock-open]=\"IsOpenToEveryone\" [class.fa-lock]=\"!IsOpenToEveryone\"\n                  [style.color]=\"IsOpenToEveryone ? '#16a34a' : null\"></i>\n                  {{ IsOpenToEveryone ? 'Open' : 'Restricted' }}\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      <!-- Agent Header \u2014 minimized floating bar -->\n      @if (HeaderCollapsed) {\n        <div class=\"agent-header-mini\">\n          <button class=\"agent-header-mini-expand\" (click)=\"ToggleHeaderCollapsed()\"\n            title=\"Expand header\">\n            <i class=\"fa-solid fa-chevron-down\"></i>\n          </button>\n          <span class=\"agent-header-mini-name\">{{ record.Name || 'Untitled AI Agent' }}</span>\n          @if (record.Status) {\n            <span class=\"agent-header-mini-status\" [style.background-color]=\"getStatusBadgeColor()\">\n              {{ record.Status }}\n            </span>\n          }\n          <div class=\"agent-header-mini-spacer\"></div>\n          @if (record.ID) {\n            <button class=\"agent-header-mini-btn agent-header-mini-btn--primary\"\n              (click)=\"openTestHarness()\"\n              [disabled]=\"record.Status !== 'Active'\"\n              title=\"Run agent\">\n              <i class=\"fa-solid fa-play\"></i>\n            </button>\n            <button class=\"agent-header-mini-btn\"\n              (click)=\"openPermissionsDialog()\"\n              [title]=\"IsOpenToEveryone ? 'Open to everyone' : 'Restricted'\">\n              <i class=\"fa-solid\" [class.fa-lock-open]=\"IsOpenToEveryone\" [class.fa-lock]=\"!IsOpenToEveryone\"\n              [style.color]=\"IsOpenToEveryone ? '#16a34a' : null\"></i>\n            </button>\n          }\n          <button class=\"agent-header-mini-btn\"\n            (click)=\"refreshRelatedData()\" title=\"Refresh\">\n            <i class=\"fa-solid fa-refresh\"></i>\n          </button>\n        </div>\n      }\n      <!-- Single Pane Layout with Expander Panels -->\n      <div class=\"form-content\">\n        <kendo-panelbar [keepItemContent]=\"true\" (stateChange)=\"OnPanelBarStateChange($event)\">\n          <!-- Custom Agent Type Section (if defined) -->\n          @if (record.ID && agentType && agentType.UIFormSectionKey) {\n            <kendo-panelbar-item id=\"custom\"\n              [expanded]=\"GetSectionExpanded('custom', agentType.UIFormSectionExpandedByDefault)\">\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                  @if (loadingStates.customSection) {\n                    <mj-loading text=\"Loading {{ agentType.Name }} configuration...\" size=\"medium\"></mj-loading>\n                  }\n                  <ng-container #customSectionContainer></ng-container>\n                </div>\n              </ng-template>\n            </kendo-panelbar-item>\n          }\n          <!-- Requests & History -->\n          @if (record.ID) {\n            <kendo-panelbar-item id=\"history\" [expanded]=\"GetSectionExpanded('history', 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 }})@if(executionHistoryCount < totalExecutionHistoryCount){ of {{ totalExecutionHistoryCount }} }</span>\n                }\n              </ng-template>\n              <ng-template kendoPanelBarContent>\n                <div class=\"panel-content execution-history-panel\">\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                    <!-- Search Bar -->\n                    <div class=\"execution-search-bar\">\n                      <kendo-textbox\n                        [(ngModel)]=\"executionSearchText\"\n                        (ngModelChange)=\"onExecutionSearchChange()\"\n                        [ngModelOptions]=\"{standalone: true}\"\n                        placeholder=\"Search by Run ID...\"\n                        [clearButton]=\"true\">\n                        <ng-template kendoTextBoxPrefixTemplate>\n                          <i class=\"fa-solid fa-search\"></i>\n                        </ng-template>\n                      </kendo-textbox>\n                    </div>\n                    <div class=\"execution-history-list\">\n                      @if (filteredExecutions.length === 0) {\n                        <div class=\"empty-state\">\n                          <i class=\"fa-solid fa-search\"></i>\n                          <h4>No Matching Results</h4>\n                          <p>No execution history found matching \"{{ executionSearchText }}\"</p>\n                        </div>\n                      }\n                      @for (execution of filteredExecutions; 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                              <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                                @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\">{{ execution.StartedAt | runningTime }}</span> -->\n                                  </div>\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                                @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                            <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                                  @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                                  @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                                  @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                                  @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                                  @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                                  @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                              @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                              @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                      <!-- Pagination Controls -->\n                      @if (totalPages > 1) {\n                        <div class=\"pagination-controls\">\n                          <button kendoButton\n                            fillMode=\"outline\"\n                            size=\"medium\"\n                            (click)=\"goToPreviousPage()\"\n                            [disabled]=\"!hasPreviousPage || isLoadingPage\"\n                            class=\"page-nav-btn\">\n                            <i class=\"fa-solid fa-chevron-left\"></i>\n                            Previous\n                          </button>\n                          <div class=\"page-info\">\n                            @if (isLoadingPage) {\n                              <i class=\"fa-solid fa-spinner fa-spin\"></i>\n                              Loading...\n                            } @else {\n                              Page {{ executionHistoryCurrentPage }} of {{ totalPages }}\n                              <span class=\"record-count\">({{ totalExecutionHistoryCount }} total)</span>\n                            }\n                          </div>\n                          <button kendoButton\n                            fillMode=\"outline\"\n                            size=\"medium\"\n                            (click)=\"goToNextPage()\"\n                            [disabled]=\"!hasNextPage || isLoadingPage\"\n                            class=\"page-nav-btn\">\n                            Next\n                            <i class=\"fa-solid fa-chevron-right\"></i>\n                          </button>\n                          <button kendoButton\n                            fillMode=\"flat\"\n                            size=\"small\"\n                            (click)=\"navigateToEntity('MJ: AI Agent Runs', '')\"\n                            class=\"view-all-btn\">\n                            <i class=\"fa-solid fa-external-link\"></i>\n                            View All in Grid\n                          </button>\n                        </div>\n                      }\n                    </div>\n                  }\n                </div>\n              </ng-template>\n            </kendo-panelbar-item>\n          }\n          <!-- Actions -->\n          @if (record.ID) {\n            <kendo-panelbar-item id=\"actions\" [expanded]=\"GetSectionExpanded('actions', 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                    @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          <!-- Sub-Agents (Unified View with Filter) -->\n          @if (record.ID) {\n            <kendo-panelbar-item id=\"subagents\" [expanded]=\"GetSectionExpanded('subagents', 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 (totalSubAgentCount > 0) {\n                  <span> ({{ totalSubAgentCount }})</span>\n                }\n              </ng-template>\n              <ng-template kendoPanelBarContent>\n                <div class=\"panel-content\">\n                  <!-- Filter Controls -->\n                  <div class=\"section-header sub-agent-filter-header\">\n                    <div class=\"filter-controls\">\n                      <kendo-buttongroup selection=\"single\">\n                        <button kendoButton\n                          [toggleable]=\"true\"\n                          [selected]=\"subAgentFilter === 'all'\"\n                          (click)=\"setSubAgentFilter('all')\"\n                          size=\"small\">\n                          <i class=\"fa-solid fa-layer-group\"></i>\n                          All ({{ totalSubAgentCount }})\n                        </button>\n                        <button kendoButton\n                          [toggleable]=\"true\"\n                          [selected]=\"subAgentFilter === 'child'\"\n                          (click)=\"setSubAgentFilter('child')\"\n                          size=\"small\">\n                          <i class=\"fa-solid fa-link\"></i>\n                          Child ({{ childSubAgentCount }})\n                        </button>\n                        <button kendoButton\n                          [toggleable]=\"true\"\n                          [selected]=\"subAgentFilter === 'related'\"\n                          (click)=\"setSubAgentFilter('related')\"\n                          size=\"small\">\n                          <i class=\"fa-solid fa-share-nodes\"></i>\n                          Related ({{ relatedSubAgentCount }})\n                        </button>\n                      </kendo-buttongroup>\n                    </div>\n                    <div class=\"header-actions\">\n                      @if (EditMode && UserCanCreateSubAgents) {\n                        <button kendoButton\n                          themeColor=\"primary\"\n                          size=\"small\"\n                          (click)=\"createChildSubAgent()\"\n                          title=\"Create a new child sub-agent that shares this agent's payload\">\n                          <i class=\"fa-solid fa-link\"></i>\n                          Create Child\n                        </button>\n                        <button kendoButton\n                          themeColor=\"secondary\"\n                          size=\"small\"\n                          (click)=\"linkRelatedSubAgent()\"\n                          title=\"Link an existing agent as a related sub-agent with payload mapping\">\n                          <i class=\"fa-solid fa-share-nodes\"></i>\n                          Link Related\n                        </button>\n                      }\n                    </div>\n                  </div>\n                  <!-- Empty State -->\n                  @if (totalSubAgentCount === 0) {\n                    <div class=\"empty-state\">\n                      <i class=\"fa-solid fa-sitemap\"></i>\n                      <h4>No Sub-Agents</h4>\n                      <p>Sub-agents help build complex workflows through hierarchical orchestration.</p>\n                      <div class=\"empty-state-info\">\n                        <div class=\"info-card\">\n                          <i class=\"fa-solid fa-link\" style=\"color: #2196F3;\"></i>\n                          <strong>Child Sub-Agents</strong>\n                          <p>Share payload structure, dedicated to parent</p>\n                        </div>\n                        <div class=\"info-card\">\n                          <i class=\"fa-solid fa-share-nodes\" style=\"color: #9C27B0;\"></i>\n                          <strong>Related Sub-Agents</strong>\n                          <p>Reusable agents with payload mapping</p>\n                        </div>\n                      </div>\n                    </div>\n                  } @else {\n                    <!-- Unified Sub-Agent List -->\n                    <div class=\"entity-list\">\n                      @for (item of filteredSubAgents; track item.agent.ID) {\n                        <div class=\"entity-item sub-agent-item\"\n                          [class.child-sub-agent]=\"item.type === 'child'\"\n                          [class.related-sub-agent]=\"item.type === 'related'\"\n                          (click)=\"navigateToEntity('AI Agents', item.agent.ID)\">\n                          <!-- Type Badge -->\n                          <div class=\"sub-agent-type-badge\"\n                            [style.background-color]=\"getSubAgentBadgeColor(item)\">\n                            <i [class]=\"getSubAgentBadgeIcon(item)\"></i>\n                            {{ getSubAgentBadgeText(item) }}\n                          </div>\n                          <!-- Agent Icon -->\n                          <div class=\"item-icon\">\n                            @if (hasSubAgentLogoURL(item.agent)) {\n                              <img [src]=\"item.agent.LogoURL\"\n                                [alt]=\"item.agent.Name + ' logo'\"\n                                class=\"sub-agent-logo\">\n                            } @else {\n                              <i [class]=\"getSubAgentIcon(item.agent)\"></i>\n                            }\n                          </div>\n                          <!-- Agent Content -->\n                          <div class=\"item-content\">\n                            <div class=\"item-title\">{{ item.agent.Name || 'Untitled Sub-Agent' }}</div>\n                            @if (item.agent.Description) {\n                              <div class=\"item-preview\">{{ item.agent.Description }}</div>\n                            }\n                            <div class=\"item-meta\">\n                              <!-- Payload Info -->\n                              <span class=\"meta-tag payload-info\">\n                                <i class=\"fa-solid fa-database\"></i>\n                                {{ getSubAgentPayloadInfo(item) }}\n                              </span>\n                              <!-- Status -->\n                              @if (item.agent.Status) {\n                                <span class=\"status-tag\"\n                                  [style.background-color]=\"getStatusBadgeColor()\">\n                                  {{ item.agent.Status }}\n                                </span>\n                              }\n                              <!-- Agent Type -->\n                              @if (item.agent.Type) {\n                                <span class=\"meta-tag\">{{ item.agent.Type }}</span>\n                              }\n                            </div>\n                          </div>\n                          <!-- Actions -->\n                          <div class=\"item-actions\">\n                            @if (EditMode) {\n                              <!-- Output Mapping Config (Related only) -->\n                              @if (item.type === 'related') {\n                                <button kendoButton\n                                  fillMode=\"flat\"\n                                  themeColor=\"primary\"\n                                  size=\"small\"\n                                  (click)=\"configureOutputMapping(item, $event)\"\n                                  title=\"Configure output mapping\">\n                                  <i class=\"fa-solid fa-exchange-alt\"></i>\n                                </button>\n                              }\n                              <!-- Advanced Settings (Child only) -->\n                              @if (item.type === 'child' && UserCanCreateSubAgents) {\n                                <button kendoButton\n                                  fillMode=\"flat\"\n                                  themeColor=\"primary\"\n                                  size=\"small\"\n                                  (click)=\"openSubAgentAdvancedSettings(item.agent, $event)\"\n                                  title=\"Advanced settings\">\n                                  <i class=\"fa-solid fa-cog\"></i>\n                                </button>\n                              }\n                              <!-- Remove/Unlink -->\n                              @if (UserCanDeleteSubAgents) {\n                                <button kendoButton\n                                  fillMode=\"flat\"\n                                  themeColor=\"error\"\n                                  size=\"small\"\n                                  (click)=\"item.type === 'child' ? removeChildSubAgent(item, $event) : unlinkRelatedSubAgent(item, $event)\"\n                                  [title]=\"item.type === 'child' ? 'Delete child sub-agent' : 'Unlink related sub-agent'\">\n                                  <i [class]=\"item.type === 'child' ? 'fa-solid fa-trash' : 'fa-solid fa-unlink'\"></i>\n                                </button>\n                              }\n                            }\n                            <i class=\"fa-solid fa-external-link\"></i>\n                          </div>\n                        </div>\n                      }\n                    </div>\n                  }\n                </div>\n              </ng-template>\n            </kendo-panelbar-item>\n          }\n          <!-- Prompts (With Model Selection) -->\n          @if (record.ID) {\n            <kendo-panelbar-item id=\"prompts\" [expanded]=\"GetSectionExpanded('prompts', 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                  @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          <!-- Learning & Analytics -->\n          @if (record.ID) {\n            <kendo-panelbar-item id=\"learning\" [expanded]=\"GetSectionExpanded('learning', false)\" [disabled]=\"loadingStates.learningCycles\">\n              <ng-template kendoPanelBarItemTitle>\n                <i class=\"fa-solid fa-brain\"></i> Learning Cycles{{ learningCycleCount > 0 ? ' (' + learningCycleCount + ')' : '' }}\n                @if (loadingStates.learningCycles) {\n                  <span style=\"margin-left: 8px;\"><i class=\"fa-solid fa-spinner fa-spin\" style=\"font-size: 12px;\"></i></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                      Monitor and manage learning cycles, training sessions, and performance analytics.\n                    </div>\n                  </div>\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          <!-- Notes & Documentation -->\n          @if (record.ID) {\n            <kendo-panelbar-item id=\"notes\" [expanded]=\"GetSectionExpanded('notes', false)\" [disabled]=\"loadingStates.notes\">\n              <ng-template kendoPanelBarItemTitle>\n                <i class=\"fa-solid fa-sticky-note\"></i> Notes{{ noteCount > 0 ? ' (' + noteCount + ')' : '' }}\n                @if (loadingStates.notes) {\n                  <span style=\"margin-left: 8px;\"><i class=\"fa-solid fa-spinner fa-spin\" style=\"font-size: 12px;\"></i></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 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                  @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          <!-- Payload -->\n          <kendo-panelbar-item id=\"payload\" [expanded]=\"GetSectionExpanded('payload', 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                <!-- 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                  <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                    <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                <!-- 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                  <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                    <!-- 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                    <!-- 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                    <!-- 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                <!-- 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                  <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                      <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                    <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          <!-- Execution Guardrails (New Separate Panel) -->\n          <kendo-panelbar-item id=\"guardrails\" [expanded]=\"GetSectionExpanded('guardrails', 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                <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                  <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                  <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                  <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          <!-- Configuration (Settings Panel) -->\n          <kendo-panelbar-item id=\"config\" [expanded]=\"GetSectionExpanded('config', 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                <!-- 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                  <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                    <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                    <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                    <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                <!-- 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                  <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                    <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                    <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                    <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                <!-- 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                  <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                    <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                <!-- 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                  <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                    @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                      <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                      <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        </kendo-panelbar>\n      </div>\n    </form>\n  }\n\n  <!-- Permissions Dialog (from @memberjunction/ng-agents) -->\n  @if (ShowPermissionsDialog) {\n    <mj-agent-permissions-dialog\n      [Agent]=\"record\"\n      (Closed)=\"onPermissionsDialogClosed()\"\n      (PermissionsChanged)=\"refreshRelatedData()\">\n    </mj-agent-permissions-dialog>\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: 8px 16px;\n    box-shadow: 0 2px 4px rgba(0,0,0,0.04);\n    transition: padding 0.2s ease;\n}\n\n.agent-header-content {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 12px;\n}\n\n/* Header collapse toggle button */\n.agent-header-toggle {\n    background: none;\n    border: 1px solid #e0e6ed;\n    border-radius: 6px;\n    width: 24px;\n    height: 24px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    color: #94a3b8;\n    flex-shrink: 0;\n    padding: 0;\n    transition: all 0.15s ease;\n}\n\n.agent-header-toggle:hover {\n    background: #f1f5f9;\n    color: #475569;\n    border-color: #cbd5e1;\n}\n\n.agent-header-toggle i {\n    font-size: 10px;\n}\n\n.agent-overview {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    flex: 1;\n    min-width: 0;\n}\n\n.agent-icon-wrapper {\n    width: 36px;\n    height: 36px;\n    background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);\n    border-radius: 8px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.15);\n    flex-shrink: 0;\n    transition: all 0.2s ease;\n}\n\n.agent-icon-wrapper i {\n    color: white;\n    font-size: 18px;\n}\n\n/* \u2500\u2500 Minimized Floating Header Bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.agent-header-mini {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 4px 12px;\n    background: #ffffff;\n    border-bottom: 1px solid #e2e8f0;\n    height: 32px;\n}\n\n.agent-header-mini-expand {\n    background: none;\n    border: 1px solid #e0e6ed;\n    border-radius: 4px;\n    width: 22px;\n    height: 22px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    color: #94a3b8;\n    padding: 0;\n    flex-shrink: 0;\n    transition: all 0.15s ease;\n}\n\n.agent-header-mini-expand:hover {\n    background: #f1f5f9;\n    color: #475569;\n    border-color: #cbd5e1;\n}\n\n.agent-header-mini-expand i {\n    font-size: 9px;\n}\n\n.agent-header-mini-name {\n    font-size: 13px;\n    font-weight: 600;\n    color: #334155;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    max-width: 300px;\n}\n\n.agent-header-mini-status {\n    padding: 1px 7px;\n    border-radius: 10px;\n    font-size: 10px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n    color: white;\n    flex-shrink: 0;\n}\n\n.agent-header-mini-spacer {\n    flex: 1;\n}\n\n.agent-header-mini-btn {\n    background: none;\n    border: 1px solid #e2e8f0;\n    border-radius: 4px;\n    width: 24px;\n    height: 24px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    color: #64748b;\n    padding: 0;\n    flex-shrink: 0;\n    transition: all 0.15s ease;\n}\n\n.agent-header-mini-btn:hover:not(:disabled) {\n    background: #f1f5f9;\n    color: #334155;\n    border-color: #cbd5e1;\n}\n\n.agent-header-mini-btn:disabled {\n    opacity: 0.35;\n    cursor: not-allowed;\n}\n\n.agent-header-mini-btn--primary {\n    border-color: #93c5fd;\n    color: #2563eb;\n    background: #eff6ff;\n}\n\n.agent-header-mini-btn--primary:hover:not(:disabled) {\n    background: #dbeafe;\n    border-color: #60a5fa;\n    color: #1d4ed8;\n}\n\n.agent-header-mini-btn i {\n    font-size: 11px;\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: 18px;\n    font-weight: 600;\n    color: #2c3e50;\n    margin: 0 0 4px 0;\n    line-height: 1.2;\n}\n\n.agent-name-input {\n    font-size: 16px !important;\n    font-weight: 500 !important;\n    height: 30px !important;\n    width: 100% !important;\n    max-width: 350px !important;\n}\n\n.agent-meta {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    flex-wrap: wrap;\n}\n\n.status-badge {\n    padding: 3px 10px;\n    border-radius: 12px;\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\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.parent-agent.clickable {\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.parent-agent.clickable:hover {\n    background: #e3e7ed;\n    color: #2196f3;\n    transform: translateY(-1px);\n    box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n\n.parent-agent.clickable:active {\n    transform: translateY(0);\n    box-shadow: 0 1px 2px rgba(0,0,0,0.1);\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: row;\n    gap: 8px;\n    flex-shrink: 0;\n    align-items: center;\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: 8px 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: 10px;\n    margin-bottom: 8px;\n    box-shadow: 0 1px 4px rgba(0,0,0,0.05);\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: 10px 16px;\n    border-radius: 12px 12px 0 0;\n    color: #2c3e50;\n    font-weight: 600;\n    font-size: 14px;\n    transition: all 0.2s ease;\n    display: flex;\n    align-items: center;\n    gap: 10px;\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/* Pagination Controls */\n.pagination-controls {\n    display: flex;\n    gap: 12px;\n    align-items: center;\n    justify-content: center;\n    padding: 16px;\n    margin-top: 12px;\n    background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n    border-radius: 10px;\n    border: 1px solid #dee2e6;\n}\n\n.page-nav-btn {\n    min-width: 120px;\n    font-weight: 500;\n}\n\n.page-nav-btn i {\n    font-size: 12px;\n}\n\n.page-nav-btn:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n}\n\n.page-info {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 4px;\n    padding: 0 16px;\n    font-weight: 500;\n    color: #495057;\n    min-width: 200px;\n    text-align: center;\n}\n\n.page-info .record-count {\n    font-size: 12px;\n    color: #6c757d;\n    font-weight: normal;\n}\n\n.page-info .fa-spinner {\n    margin-right: 8px;\n    color: #2196f3;\n}\n\n.view-all-btn {\n    color: #6c757d;\n    white-space: nowrap;\n    margin-left: auto;\n}\n\n.view-all-btn:hover {\n    color: #2196f3;\n}\n\n.view-all-btn i {\n    margin-right: 4px;\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/* Execution History Search Bar */\n.execution-search-bar {\n    margin-bottom: 16px;\n    padding: 0 4px;\n}\n\n.execution-search-bar kendo-textbox {\n    width: 100%;\n}\n\n.execution-search-bar .fa-search {\n    color: #666;\n    margin-right: 8px;\n    font-size: 14px;\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: 8px;\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/* ===================================\n   Unified Sub-Agents with Filtering\n   =================================== */\n\n/* Filter Controls */\n.sub-agent-filter-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 16px;\n    flex-wrap: wrap;\n    gap: 12px;\n}\n\n.filter-controls {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.filter-controls kendo-buttongroup {\n    flex: 0 0 auto;\n}\n\n/* Sub-Agent Type Badge */\n.sub-agent-type-badge {\n    position: absolute;\n    top: 8px;\n    right: 8px;\n    padding: 4px 8px;\n    border-radius: 4px;\n    font-size: 10px;\n    font-weight: 600;\n    color: white;\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    z-index: 1;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n\n/* Sub-Agent Item Styling */\n.sub-agent-item {\n    position: relative;\n    padding-left: 8px;\n    transition: all 0.2s ease;\n}\n\n.sub-agent-item.child-sub-agent {\n    border-left: 4px solid #2196F3;\n}\n\n.sub-agent-item.related-sub-agent {\n    border-left: 4px solid #9C27B0;\n}\n\n.sub-agent-item:hover {\n    transform: translateX(4px);\n}\n\n/* Payload Info Tag */\n.payload-info {\n    background: #f5f5f5;\n    color: #666;\n    font-family: 'Roboto Mono', monospace;\n    font-size: 11px;\n}\n\n/* Empty State Info Cards */\n.empty-state-info {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 16px;\n    margin: 24px 0;\n    max-width: 600px;\n    margin-left: auto;\n    margin-right: auto;\n}\n\n.info-card {\n    background: #fafafa;\n    border: 1px solid #e0e0e0;\n    border-radius: 8px;\n    padding: 16px;\n    text-align: left;\n}\n\n.info-card i {\n    font-size: 24px;\n    margin-bottom: 8px;\n    display: block;\n}\n\n.info-card strong {\n    display: block;\n    margin-bottom: 4px;\n    font-size: 14px;\n}\n\n.info-card p {\n    margin: 0;\n    font-size: 12px;\n    color: #666;\n}\n\n.empty-state-actions {\n    display: flex;\n    gap: 12px;\n    justify-content: center;\n    margin-top: 16px;\n}\n\n/* Responsive adjustments for sub-agent filters */\n@media (max-width: 768px) {\n    .sub-agent-filter-header {\n        flex-direction: column;\n        align-items: stretch;\n    }\n    \n    .filter-controls,\n    .header-actions {\n        width: 100%;\n        justify-content: center;\n    }\n    \n    .empty-state-info {\n        grid-template-columns: 1fr;\n    }\n}\n"] }]
+        args: [{ standalone: false, 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  @if (record) {\n    <form class=\"record-form\" #form=\"ngForm\">\n      <mj-form-toolbar [Form]=\"this\"></mj-form-toolbar>\n      <!-- Agent Header \u2014 expanded view -->\n      @if (!HeaderCollapsed) {\n        <div class=\"agent-header\">\n          <div class=\"agent-header-content\">\n            <button class=\"agent-header-toggle\" (click)=\"ToggleHeaderCollapsed()\"\n              title=\"Minimize header\">\n              <i class=\"fa-solid fa-chevron-up\"></i>\n            </button>\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 clickable\"\n                      (click)=\"navigateToParentAgent()\"\n                      title=\"Open parent agent: {{ record.Parent }}\">\n                      <i class=\"fa-solid fa-sitemap\"></i>\n                      Child of {{ record.Parent }}\n                      <i class=\"fa-solid fa-external-link\" style=\"margin-left: 4px; font-size: 10px;\"></i>\n                    </span>\n                  }\n                </div>\n              </div>\n            </div>\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> Run\n                </button>\n                <button kendoButton size=\"large\"\n                  (click)=\"openPermissionsDialog()\"\n                  [title]=\"IsOpenToEveryone ? 'Open to everyone \u2014 click to manage permissions' : 'Restricted \u2014 click to manage permissions'\">\n                  <i class=\"fa-solid\" [class.fa-lock-open]=\"IsOpenToEveryone\" [class.fa-lock]=\"!IsOpenToEveryone\"\n                  [style.color]=\"IsOpenToEveryone ? '#16a34a' : null\"></i>\n                  {{ IsOpenToEveryone ? 'Open' : 'Restricted' }}\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      <!-- Agent Header \u2014 minimized floating bar -->\n      @if (HeaderCollapsed) {\n        <div class=\"agent-header-mini\">\n          <button class=\"agent-header-mini-expand\" (click)=\"ToggleHeaderCollapsed()\"\n            title=\"Expand header\">\n            <i class=\"fa-solid fa-chevron-down\"></i>\n          </button>\n          <span class=\"agent-header-mini-name\">{{ record.Name || 'Untitled AI Agent' }}</span>\n          @if (record.Status) {\n            <span class=\"agent-header-mini-status\" [style.background-color]=\"getStatusBadgeColor()\">\n              {{ record.Status }}\n            </span>\n          }\n          <div class=\"agent-header-mini-spacer\"></div>\n          @if (record.ID) {\n            <button class=\"agent-header-mini-btn agent-header-mini-btn--primary\"\n              (click)=\"openTestHarness()\"\n              [disabled]=\"record.Status !== 'Active'\"\n              title=\"Run agent\">\n              <i class=\"fa-solid fa-play\"></i>\n            </button>\n            <button class=\"agent-header-mini-btn\"\n              (click)=\"openPermissionsDialog()\"\n              [title]=\"IsOpenToEveryone ? 'Open to everyone' : 'Restricted'\">\n              <i class=\"fa-solid\" [class.fa-lock-open]=\"IsOpenToEveryone\" [class.fa-lock]=\"!IsOpenToEveryone\"\n              [style.color]=\"IsOpenToEveryone ? '#16a34a' : null\"></i>\n            </button>\n          }\n          <button class=\"agent-header-mini-btn\"\n            (click)=\"refreshRelatedData()\" title=\"Refresh\">\n            <i class=\"fa-solid fa-refresh\"></i>\n          </button>\n        </div>\n      }\n      <!-- Single Pane Layout with Expander Panels -->\n      <div class=\"form-content\">\n        <kendo-panelbar [keepItemContent]=\"true\" (stateChange)=\"OnPanelBarStateChange($event)\">\n          <!-- Custom Agent Type Section (if defined) -->\n          @if (record.ID && agentType && agentType.UIFormSectionKey) {\n            <kendo-panelbar-item id=\"custom\"\n              [expanded]=\"GetSectionExpanded('custom', agentType.UIFormSectionExpandedByDefault)\">\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                  @if (loadingStates.customSection) {\n                    <mj-loading text=\"Loading {{ agentType.Name }} configuration...\" size=\"medium\"></mj-loading>\n                  }\n                  <ng-container #customSectionContainer></ng-container>\n                </div>\n              </ng-template>\n            </kendo-panelbar-item>\n          }\n          <!-- Requests & History -->\n          @if (record.ID) {\n            <kendo-panelbar-item id=\"history\" [expanded]=\"GetSectionExpanded('history', 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 }})@if(executionHistoryCount < totalExecutionHistoryCount){ of {{ totalExecutionHistoryCount }} }</span>\n                }\n              </ng-template>\n              <ng-template kendoPanelBarContent>\n                <div class=\"panel-content execution-history-panel\">\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                    <!-- Search Bar -->\n                    <div class=\"execution-search-bar\">\n                      <kendo-textbox\n                        [(ngModel)]=\"executionSearchText\"\n                        (ngModelChange)=\"onExecutionSearchChange()\"\n                        [ngModelOptions]=\"{standalone: true}\"\n                        placeholder=\"Search by Run ID...\"\n                        [clearButton]=\"true\">\n                        <ng-template kendoTextBoxPrefixTemplate>\n                          <i class=\"fa-solid fa-search\"></i>\n                        </ng-template>\n                      </kendo-textbox>\n                    </div>\n                    <div class=\"execution-history-list\">\n                      @if (filteredExecutions.length === 0) {\n                        <div class=\"empty-state\">\n                          <i class=\"fa-solid fa-search\"></i>\n                          <h4>No Matching Results</h4>\n                          <p>No execution history found matching \"{{ executionSearchText }}\"</p>\n                        </div>\n                      }\n                      @for (execution of filteredExecutions; 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                              <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                                @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\">{{ execution.StartedAt | runningTime }}</span> -->\n                                  </div>\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                                @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                            <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                                  @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                                  @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                                  @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                                  @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                                  @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                                  @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                              @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                              @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                      <!-- Pagination Controls -->\n                      @if (totalPages > 1) {\n                        <div class=\"pagination-controls\">\n                          <button kendoButton\n                            fillMode=\"outline\"\n                            size=\"medium\"\n                            (click)=\"goToPreviousPage()\"\n                            [disabled]=\"!hasPreviousPage || isLoadingPage\"\n                            class=\"page-nav-btn\">\n                            <i class=\"fa-solid fa-chevron-left\"></i>\n                            Previous\n                          </button>\n                          <div class=\"page-info\">\n                            @if (isLoadingPage) {\n                              <i class=\"fa-solid fa-spinner fa-spin\"></i>\n                              Loading...\n                            } @else {\n                              Page {{ executionHistoryCurrentPage }} of {{ totalPages }}\n                              <span class=\"record-count\">({{ totalExecutionHistoryCount }} total)</span>\n                            }\n                          </div>\n                          <button kendoButton\n                            fillMode=\"outline\"\n                            size=\"medium\"\n                            (click)=\"goToNextPage()\"\n                            [disabled]=\"!hasNextPage || isLoadingPage\"\n                            class=\"page-nav-btn\">\n                            Next\n                            <i class=\"fa-solid fa-chevron-right\"></i>\n                          </button>\n                          <button kendoButton\n                            fillMode=\"flat\"\n                            size=\"small\"\n                            (click)=\"navigateToEntity('MJ: AI Agent Runs', '')\"\n                            class=\"view-all-btn\">\n                            <i class=\"fa-solid fa-external-link\"></i>\n                            View All in Grid\n                          </button>\n                        </div>\n                      }\n                    </div>\n                  }\n                </div>\n              </ng-template>\n            </kendo-panelbar-item>\n          }\n          <!-- Actions -->\n          @if (record.ID) {\n            <kendo-panelbar-item id=\"actions\" [expanded]=\"GetSectionExpanded('actions', 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                    @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('MJ: 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('MJ: 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          <!-- Sub-Agents (Unified View with Filter) -->\n          @if (record.ID) {\n            <kendo-panelbar-item id=\"subagents\" [expanded]=\"GetSectionExpanded('subagents', 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 (totalSubAgentCount > 0) {\n                  <span> ({{ totalSubAgentCount }})</span>\n                }\n              </ng-template>\n              <ng-template kendoPanelBarContent>\n                <div class=\"panel-content\">\n                  <!-- Filter Controls -->\n                  <div class=\"section-header sub-agent-filter-header\">\n                    <div class=\"filter-controls\">\n                      <kendo-buttongroup selection=\"single\">\n                        <button kendoButton\n                          [toggleable]=\"true\"\n                          [selected]=\"subAgentFilter === 'all'\"\n                          (click)=\"setSubAgentFilter('all')\"\n                          size=\"small\">\n                          <i class=\"fa-solid fa-layer-group\"></i>\n                          All ({{ totalSubAgentCount }})\n                        </button>\n                        <button kendoButton\n                          [toggleable]=\"true\"\n                          [selected]=\"subAgentFilter === 'child'\"\n                          (click)=\"setSubAgentFilter('child')\"\n                          size=\"small\">\n                          <i class=\"fa-solid fa-link\"></i>\n                          Child ({{ childSubAgentCount }})\n                        </button>\n                        <button kendoButton\n                          [toggleable]=\"true\"\n                          [selected]=\"subAgentFilter === 'related'\"\n                          (click)=\"setSubAgentFilter('related')\"\n                          size=\"small\">\n                          <i class=\"fa-solid fa-share-nodes\"></i>\n                          Related ({{ relatedSubAgentCount }})\n                        </button>\n                      </kendo-buttongroup>\n                    </div>\n                    <div class=\"header-actions\">\n                      @if (EditMode && UserCanCreateSubAgents) {\n                        <button kendoButton\n                          themeColor=\"primary\"\n                          size=\"small\"\n                          (click)=\"createChildSubAgent()\"\n                          title=\"Create a new child sub-agent that shares this agent's payload\">\n                          <i class=\"fa-solid fa-link\"></i>\n                          Create Child\n                        </button>\n                        <button kendoButton\n                          themeColor=\"secondary\"\n                          size=\"small\"\n                          (click)=\"linkRelatedSubAgent()\"\n                          title=\"Link an existing agent as a related sub-agent with payload mapping\">\n                          <i class=\"fa-solid fa-share-nodes\"></i>\n                          Link Related\n                        </button>\n                      }\n                    </div>\n                  </div>\n                  <!-- Empty State -->\n                  @if (totalSubAgentCount === 0) {\n                    <div class=\"empty-state\">\n                      <i class=\"fa-solid fa-sitemap\"></i>\n                      <h4>No Sub-Agents</h4>\n                      <p>Sub-agents help build complex workflows through hierarchical orchestration.</p>\n                      <div class=\"empty-state-info\">\n                        <div class=\"info-card\">\n                          <i class=\"fa-solid fa-link\" style=\"color: #2196F3;\"></i>\n                          <strong>Child Sub-Agents</strong>\n                          <p>Share payload structure, dedicated to parent</p>\n                        </div>\n                        <div class=\"info-card\">\n                          <i class=\"fa-solid fa-share-nodes\" style=\"color: #9C27B0;\"></i>\n                          <strong>Related Sub-Agents</strong>\n                          <p>Reusable agents with payload mapping</p>\n                        </div>\n                      </div>\n                    </div>\n                  } @else {\n                    <!-- Unified Sub-Agent List -->\n                    <div class=\"entity-list\">\n                      @for (item of filteredSubAgents; track item.agent.ID) {\n                        <div class=\"entity-item sub-agent-item\"\n                          [class.child-sub-agent]=\"item.type === 'child'\"\n                          [class.related-sub-agent]=\"item.type === 'related'\"\n                          (click)=\"navigateToEntity('MJ: AI Agents', item.agent.ID)\">\n                          <!-- Type Badge -->\n                          <div class=\"sub-agent-type-badge\"\n                            [style.background-color]=\"getSubAgentBadgeColor(item)\">\n                            <i [class]=\"getSubAgentBadgeIcon(item)\"></i>\n                            {{ getSubAgentBadgeText(item) }}\n                          </div>\n                          <!-- Agent Icon -->\n                          <div class=\"item-icon\">\n                            @if (hasSubAgentLogoURL(item.agent)) {\n                              <img [src]=\"item.agent.LogoURL\"\n                                [alt]=\"item.agent.Name + ' logo'\"\n                                class=\"sub-agent-logo\">\n                            } @else {\n                              <i [class]=\"getSubAgentIcon(item.agent)\"></i>\n                            }\n                          </div>\n                          <!-- Agent Content -->\n                          <div class=\"item-content\">\n                            <div class=\"item-title\">{{ item.agent.Name || 'Untitled Sub-Agent' }}</div>\n                            @if (item.agent.Description) {\n                              <div class=\"item-preview\">{{ item.agent.Description }}</div>\n                            }\n                            <div class=\"item-meta\">\n                              <!-- Payload Info -->\n                              <span class=\"meta-tag payload-info\">\n                                <i class=\"fa-solid fa-database\"></i>\n                                {{ getSubAgentPayloadInfo(item) }}\n                              </span>\n                              <!-- Status -->\n                              @if (item.agent.Status) {\n                                <span class=\"status-tag\"\n                                  [style.background-color]=\"getStatusBadgeColor()\">\n                                  {{ item.agent.Status }}\n                                </span>\n                              }\n                              <!-- Agent Type -->\n                              @if (item.agent.Type) {\n                                <span class=\"meta-tag\">{{ item.agent.Type }}</span>\n                              }\n                            </div>\n                          </div>\n                          <!-- Actions -->\n                          <div class=\"item-actions\">\n                            @if (EditMode) {\n                              <!-- Output Mapping Config (Related only) -->\n                              @if (item.type === 'related') {\n                                <button kendoButton\n                                  fillMode=\"flat\"\n                                  themeColor=\"primary\"\n                                  size=\"small\"\n                                  (click)=\"configureOutputMapping(item, $event)\"\n                                  title=\"Configure output mapping\">\n                                  <i class=\"fa-solid fa-exchange-alt\"></i>\n                                </button>\n                              }\n                              <!-- Advanced Settings (Child only) -->\n                              @if (item.type === 'child' && UserCanCreateSubAgents) {\n                                <button kendoButton\n                                  fillMode=\"flat\"\n                                  themeColor=\"primary\"\n                                  size=\"small\"\n                                  (click)=\"openSubAgentAdvancedSettings(item.agent, $event)\"\n                                  title=\"Advanced settings\">\n                                  <i class=\"fa-solid fa-cog\"></i>\n                                </button>\n                              }\n                              <!-- Remove/Unlink -->\n                              @if (UserCanDeleteSubAgents) {\n                                <button kendoButton\n                                  fillMode=\"flat\"\n                                  themeColor=\"error\"\n                                  size=\"small\"\n                                  (click)=\"item.type === 'child' ? removeChildSubAgent(item, $event) : unlinkRelatedSubAgent(item, $event)\"\n                                  [title]=\"item.type === 'child' ? 'Delete child sub-agent' : 'Unlink related sub-agent'\">\n                                  <i [class]=\"item.type === 'child' ? 'fa-solid fa-trash' : 'fa-solid fa-unlink'\"></i>\n                                </button>\n                              }\n                            }\n                            <i class=\"fa-solid fa-external-link\"></i>\n                          </div>\n                        </div>\n                      }\n                    </div>\n                  }\n                </div>\n              </ng-template>\n            </kendo-panelbar-item>\n          }\n          <!-- Prompts (With Model Selection) -->\n          @if (record.ID) {\n            <kendo-panelbar-item id=\"prompts\" [expanded]=\"GetSectionExpanded('prompts', 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                  @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('MJ: 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('MJ: 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          <!-- Learning & Analytics -->\n          @if (record.ID) {\n            <kendo-panelbar-item id=\"learning\" [expanded]=\"GetSectionExpanded('learning', false)\" [disabled]=\"loadingStates.learningCycles\">\n              <ng-template kendoPanelBarItemTitle>\n                <i class=\"fa-solid fa-brain\"></i> Learning Cycles{{ learningCycleCount > 0 ? ' (' + learningCycleCount + ')' : '' }}\n                @if (loadingStates.learningCycles) {\n                  <span style=\"margin-left: 8px;\"><i class=\"fa-solid fa-spinner fa-spin\" style=\"font-size: 12px;\"></i></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                      Monitor and manage learning cycles, training sessions, and performance analytics.\n                    </div>\n                  </div>\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('MJ: 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('MJ: 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          <!-- Notes & Documentation -->\n          @if (record.ID) {\n            <kendo-panelbar-item id=\"notes\" [expanded]=\"GetSectionExpanded('notes', false)\" [disabled]=\"loadingStates.notes\">\n              <ng-template kendoPanelBarItemTitle>\n                <i class=\"fa-solid fa-sticky-note\"></i> Notes{{ noteCount > 0 ? ' (' + noteCount + ')' : '' }}\n                @if (loadingStates.notes) {\n                  <span style=\"margin-left: 8px;\"><i class=\"fa-solid fa-spinner fa-spin\" style=\"font-size: 12px;\"></i></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 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                  @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('MJ: 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('MJ: 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          <!-- Payload -->\n          <kendo-panelbar-item id=\"payload\" [expanded]=\"GetSectionExpanded('payload', 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                <!-- 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                  <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                    <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                <!-- 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                  <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                    <!-- 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                    <!-- 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                    <!-- 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                <!-- 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                  <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                      <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                    <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          <!-- Execution Guardrails (New Separate Panel) -->\n          <kendo-panelbar-item id=\"guardrails\" [expanded]=\"GetSectionExpanded('guardrails', 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                <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                  <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                  <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                  <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          <!-- Configuration (Settings Panel) -->\n          <kendo-panelbar-item id=\"config\" [expanded]=\"GetSectionExpanded('config', 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                <!-- 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                  <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                    <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                    <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                    <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                <!-- 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                  <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                    <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                    <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                    <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                <!-- 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                  <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                    <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                <!-- 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                  <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                    @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                      <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                      <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        </kendo-panelbar>\n      </div>\n    </form>\n  }\n\n  <!-- Permissions Dialog (from @memberjunction/ng-agents) -->\n  @if (ShowPermissionsDialog) {\n    <mj-agent-permissions-dialog\n      [Agent]=\"record\"\n      (Closed)=\"onPermissionsDialogClosed()\"\n      (PermissionsChanged)=\"refreshRelatedData()\">\n    </mj-agent-permissions-dialog>\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: 8px 16px;\n    box-shadow: 0 2px 4px rgba(0,0,0,0.04);\n    transition: padding 0.2s ease;\n}\n\n.agent-header-content {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 12px;\n}\n\n/* Header collapse toggle button */\n.agent-header-toggle {\n    background: none;\n    border: 1px solid #e0e6ed;\n    border-radius: 6px;\n    width: 24px;\n    height: 24px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    color: #94a3b8;\n    flex-shrink: 0;\n    padding: 0;\n    transition: all 0.15s ease;\n}\n\n.agent-header-toggle:hover {\n    background: #f1f5f9;\n    color: #475569;\n    border-color: #cbd5e1;\n}\n\n.agent-header-toggle i {\n    font-size: 10px;\n}\n\n.agent-overview {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    flex: 1;\n    min-width: 0;\n}\n\n.agent-icon-wrapper {\n    width: 36px;\n    height: 36px;\n    background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);\n    border-radius: 8px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.15);\n    flex-shrink: 0;\n    transition: all 0.2s ease;\n}\n\n.agent-icon-wrapper i {\n    color: white;\n    font-size: 18px;\n}\n\n/* \u2500\u2500 Minimized Floating Header Bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.agent-header-mini {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 4px 12px;\n    background: #ffffff;\n    border-bottom: 1px solid #e2e8f0;\n    height: 32px;\n}\n\n.agent-header-mini-expand {\n    background: none;\n    border: 1px solid #e0e6ed;\n    border-radius: 4px;\n    width: 22px;\n    height: 22px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    color: #94a3b8;\n    padding: 0;\n    flex-shrink: 0;\n    transition: all 0.15s ease;\n}\n\n.agent-header-mini-expand:hover {\n    background: #f1f5f9;\n    color: #475569;\n    border-color: #cbd5e1;\n}\n\n.agent-header-mini-expand i {\n    font-size: 9px;\n}\n\n.agent-header-mini-name {\n    font-size: 13px;\n    font-weight: 600;\n    color: #334155;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    max-width: 300px;\n}\n\n.agent-header-mini-status {\n    padding: 1px 7px;\n    border-radius: 10px;\n    font-size: 10px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n    color: white;\n    flex-shrink: 0;\n}\n\n.agent-header-mini-spacer {\n    flex: 1;\n}\n\n.agent-header-mini-btn {\n    background: none;\n    border: 1px solid #e2e8f0;\n    border-radius: 4px;\n    width: 24px;\n    height: 24px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    color: #64748b;\n    padding: 0;\n    flex-shrink: 0;\n    transition: all 0.15s ease;\n}\n\n.agent-header-mini-btn:hover:not(:disabled) {\n    background: #f1f5f9;\n    color: #334155;\n    border-color: #cbd5e1;\n}\n\n.agent-header-mini-btn:disabled {\n    opacity: 0.35;\n    cursor: not-allowed;\n}\n\n.agent-header-mini-btn--primary {\n    border-color: #93c5fd;\n    color: #2563eb;\n    background: #eff6ff;\n}\n\n.agent-header-mini-btn--primary:hover:not(:disabled) {\n    background: #dbeafe;\n    border-color: #60a5fa;\n    color: #1d4ed8;\n}\n\n.agent-header-mini-btn i {\n    font-size: 11px;\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: 18px;\n    font-weight: 600;\n    color: #2c3e50;\n    margin: 0 0 4px 0;\n    line-height: 1.2;\n}\n\n.agent-name-input {\n    font-size: 16px !important;\n    font-weight: 500 !important;\n    height: 30px !important;\n    width: 100% !important;\n    max-width: 350px !important;\n}\n\n.agent-meta {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    flex-wrap: wrap;\n}\n\n.status-badge {\n    padding: 3px 10px;\n    border-radius: 12px;\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\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.parent-agent.clickable {\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.parent-agent.clickable:hover {\n    background: #e3e7ed;\n    color: #2196f3;\n    transform: translateY(-1px);\n    box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n\n.parent-agent.clickable:active {\n    transform: translateY(0);\n    box-shadow: 0 1px 2px rgba(0,0,0,0.1);\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: row;\n    gap: 8px;\n    flex-shrink: 0;\n    align-items: center;\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: 8px 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: 10px;\n    margin-bottom: 8px;\n    box-shadow: 0 1px 4px rgba(0,0,0,0.05);\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: 10px 16px;\n    border-radius: 12px 12px 0 0;\n    color: #2c3e50;\n    font-weight: 600;\n    font-size: 14px;\n    transition: all 0.2s ease;\n    display: flex;\n    align-items: center;\n    gap: 10px;\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/* Pagination Controls */\n.pagination-controls {\n    display: flex;\n    gap: 12px;\n    align-items: center;\n    justify-content: center;\n    padding: 16px;\n    margin-top: 12px;\n    background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n    border-radius: 10px;\n    border: 1px solid #dee2e6;\n}\n\n.page-nav-btn {\n    min-width: 120px;\n    font-weight: 500;\n}\n\n.page-nav-btn i {\n    font-size: 12px;\n}\n\n.page-nav-btn:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n}\n\n.page-info {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 4px;\n    padding: 0 16px;\n    font-weight: 500;\n    color: #495057;\n    min-width: 200px;\n    text-align: center;\n}\n\n.page-info .record-count {\n    font-size: 12px;\n    color: #6c757d;\n    font-weight: normal;\n}\n\n.page-info .fa-spinner {\n    margin-right: 8px;\n    color: #2196f3;\n}\n\n.view-all-btn {\n    color: #6c757d;\n    white-space: nowrap;\n    margin-left: auto;\n}\n\n.view-all-btn:hover {\n    color: #2196f3;\n}\n\n.view-all-btn i {\n    margin-right: 4px;\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/* Execution History Search Bar */\n.execution-search-bar {\n    margin-bottom: 16px;\n    padding: 0 4px;\n}\n\n.execution-search-bar kendo-textbox {\n    width: 100%;\n}\n\n.execution-search-bar .fa-search {\n    color: #666;\n    margin-right: 8px;\n    font-size: 14px;\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: 8px;\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/* ===================================\n   Unified Sub-Agents with Filtering\n   =================================== */\n\n/* Filter Controls */\n.sub-agent-filter-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 16px;\n    flex-wrap: wrap;\n    gap: 12px;\n}\n\n.filter-controls {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.filter-controls kendo-buttongroup {\n    flex: 0 0 auto;\n}\n\n/* Sub-Agent Type Badge */\n.sub-agent-type-badge {\n    position: absolute;\n    top: 8px;\n    right: 8px;\n    padding: 4px 8px;\n    border-radius: 4px;\n    font-size: 10px;\n    font-weight: 600;\n    color: white;\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    z-index: 1;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n\n/* Sub-Agent Item Styling */\n.sub-agent-item {\n    position: relative;\n    padding-left: 8px;\n    transition: all 0.2s ease;\n}\n\n.sub-agent-item.child-sub-agent {\n    border-left: 4px solid #2196F3;\n}\n\n.sub-agent-item.related-sub-agent {\n    border-left: 4px solid #9C27B0;\n}\n\n.sub-agent-item:hover {\n    transform: translateX(4px);\n}\n\n/* Payload Info Tag */\n.payload-info {\n    background: #f5f5f5;\n    color: #666;\n    font-family: 'Roboto Mono', monospace;\n    font-size: 11px;\n}\n\n/* Empty State Info Cards */\n.empty-state-info {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 16px;\n    margin: 24px 0;\n    max-width: 600px;\n    margin-left: auto;\n    margin-right: auto;\n}\n\n.info-card {\n    background: #fafafa;\n    border: 1px solid #e0e0e0;\n    border-radius: 8px;\n    padding: 16px;\n    text-align: left;\n}\n\n.info-card i {\n    font-size: 24px;\n    margin-bottom: 8px;\n    display: block;\n}\n\n.info-card strong {\n    display: block;\n    margin-bottom: 4px;\n    font-size: 14px;\n}\n\n.info-card p {\n    margin: 0;\n    font-size: 12px;\n    color: #666;\n}\n\n.empty-state-actions {\n    display: flex;\n    gap: 12px;\n    justify-content: center;\n    margin-top: 16px;\n}\n\n/* Responsive adjustments for sub-agent filters */\n@media (max-width: 768px) {\n    .sub-agent-filter-header {\n        flex-direction: column;\n        align-items: stretch;\n    }\n    \n    .filter-controls,\n    .header-actions {\n        width: 100%;\n        justify-content: center;\n    }\n    \n    .empty-state-info {\n        grid-template-columns: 1fr;\n    }\n}\n"] }]
     }], null, { customSectionContainer: [{
             type: ViewChild,
             args: ['customSectionContainer', { read: ViewContainerRef }]