@memberjunction/ng-core-entity-forms 6.2.0-edge.0 → 6.2.0-edge.1

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

@@ -2483,13 +2483,13 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
     constructor() {
         super(...arguments);
         /** Toolbar config — hide right-hand section controls since this form has a custom layout */
-        this.toolbarConfig = CUSTOM_LAYOUT_TOOLBAR_CONFIG;
+        this.ToolbarConfig = CUSTOM_LAYOUT_TOOLBAR_CONFIG;
         /** Subject for managing component lifecycle and cleaning up subscriptions */
         this.destroy$ = new Subject();
         /** Track active timeouts for cleanup */
         this.activeTimeouts = [];
         /** The agent type entity for this agent */
-        this.agentType = null;
+        this.AgentType = null;
         /** Reference to the dynamically loaded custom section component */
         this.customSectionComponent = null;
         /** Track if custom section has been loaded to avoid reloading */
@@ -2498,44 +2498,44 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
         this.customSectionComponentRef = null;
         // === Related Entity Data for Display ===
         /** Array of sub-agent entities for card display (DEPRECATED - use allSubAgents) */
-        this.subAgents = [];
+        this.SubAgents = [];
         /** Unified sub-agent data (both child and related) */
         this.allSubAgents = [];
         /** Current filter for sub-agents display */
-        this.subAgentFilter = 'all';
+        this.SubAgentFilter = 'all';
         /** Array of agent prompt entities for card display */
-        this.agentPrompts = [];
+        this.AgentPrompts = [];
         /** Array of agent action entities for card display */
-        this.agentActions = [];
+        this.AgentActions = [];
         /** Array of learning cycle entities for display */
-        this.learningCycles = [];
+        this.LearningCycles = [];
         /** Array of agent note entities for display */
-        this.agentNotes = [];
+        this.AgentNotes = [];
         /** Array of recent execution records for history display */
-        this.recentExecutions = [];
-        this.totalExecutionHistoryCount = 0;
+        this.RecentExecutions = [];
+        this.TotalExecutionHistoryCount = 0;
         /** Track which execution cards are expanded */
-        this.expandedExecutions = {};
+        this.ExpandedExecutions = {};
         /** Search functionality for execution history */
-        this.executionSearchText = '';
-        this.filteredExecutions = [];
+        this.ExecutionSearchText = '';
+        this.FilteredExecutions = [];
         /** Which record type the Execution History section shows: agent runs (default) or realtime voice sessions */
-        this.executionHistoryView = 'runs';
+        this.ExecutionHistoryView = 'runs';
         /** Voice/realtime sessions where this agent is the co-agent or the delegation target */
-        this.agentSessions = [];
-        this.totalSessionCount = 0;
-        this.loadingSessions = false;
+        this.AgentSessions = [];
+        this.TotalSessionCount = 0;
+        this.LoadingSessions = false;
         /** Pagination state for execution history */
-        this.executionHistoryPageSize = 20;
-        this.executionHistoryCurrentPage = 1;
-        this.isLoadingPage = false;
+        this.ExecutionHistoryPageSize = 20;
+        this.ExecutionHistoryCurrentPage = 1;
+        this.IsLoadingPage = false;
         /** Cache all loaded execution records for pagination */
         this.allLoadedExecutions = [];
         // === Loading States ===
         /** Main loading state for initial data load */
-        this.isLoadingData = true;
+        this.IsLoadingData = true;
         /** Individual loading states for each section, start off true until loading complete */
-        this.loadingStates = {
+        this.LoadingStates = {
             executionHistory: true,
             subAgents: true,
             prompts: true,
@@ -2599,18 +2599,18 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
         this.FormTabs = [];
         // === Dropdown Data ===
         /** Model selection mode options for the dropdown */
-        this.modelSelectionModes = [
+        this.ModelSelectionModes = [
             { text: 'Agent Type', value: 'Agent Type' },
             { text: 'Agent', value: 'Agent' }
         ];
         /** Agent status options for the dropdown */
-        this.statusOptions = [
+        this.StatusOptions = [
             { text: 'Active', value: 'Active' },
             { text: 'Pending', value: 'Pending' },
             { text: 'Disabled', value: 'Disabled' }
         ];
         /** Agent types loaded from the database */
-        this.agentTypes = [];
+        this.AgentTypes = [];
         /** TreeDropdown configuration for the agent category field */
         this.CategoryBranchConfig = {
             EntityName: 'MJ: AI Agent Categories',
@@ -2623,7 +2623,7 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
         /** Current category selection for the TreeDropdown */
         this.SelectedCategoryKey = null;
         /** Currently selected context compression prompt */
-        this.selectedContextCompressionPrompt = null;
+        this.SelectedContextCompressionPrompt = null;
         // === Permission Checks for Related Entities ===
         /** Cache for permission checks to avoid repeated calculations */
         this._permissionCache = new Map();
@@ -2639,7 +2639,7 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
          */
         this.IsFormInitializing = true;
         /** Flag to indicate if there are unsaved changes */
-        this.hasUnsavedChanges = false;
+        this.HasUnsavedChanges = false;
         // Emergency circuit breaker to prevent infinite loops
         this._changeDetectionCount = 0;
         // === Original State for Cancel/Revert ===
@@ -2671,6 +2671,10 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
         this.isPerformingCancel = false;
     }
     static { MJAIAgentFormComponentExtended_1 = this; }
+    /** @deprecated Use {@link ToolbarConfig}. */
+    get toolbarConfig() {
+        return this.ToolbarConfig;
+    }
     /** Custom-layout AI Agent form looks best full-width on first open. */
     getDefaultFormWidthMode() { return 'full-width'; }
     /** Helper method to create tracked setTimeout calls */
@@ -2690,16 +2694,32 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
             this.activeTimeouts.splice(index, 1);
         }
     }
-    set customSectionContainer(container) {
+    set CustomSectionContainer(container) {
         this._customSectionContainer = container;
         // When the container becomes available, load the custom section if needed
-        if (container && this.agentType?.UIFormSectionKey && !this.customSectionLoaded) {
+        if (container && this.AgentType?.UIFormSectionKey && !this.customSectionLoaded) {
             this.setTrackedTimeout(() => this.loadCustomFormSection(), 0);
         }
     }
-    get customSectionContainer() {
+    get CustomSectionContainer() {
         return this._customSectionContainer;
     }
+    /** @deprecated Use {@link CustomSectionContainer} instead. */
+    set customSectionContainer(container) {
+        this.CustomSectionContainer = container;
+    }
+    /** @deprecated Use {@link CustomSectionContainer} instead. */
+    get customSectionContainer() {
+        return this.CustomSectionContainer;
+    }
+    /** @deprecated Use {@link AgentType}. */
+    get agentType() {
+        return this.AgentType;
+    }
+    /** @deprecated Use {@link AgentType}. */
+    set agentType(value) {
+        this.AgentType = value;
+    }
     /** Update custom section when EditMode changes */
     ngDoCheck() {
         if (this.customSectionComponent && this.customSectionComponent.EditMode !== this.EditMode) {
@@ -2708,44 +2728,96 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
     }
     // === Related Entity Counts ===
     /** Number of sub-agents under this agent (for backward compatibility) */
-    get subAgentCount() {
+    get SubAgentCount() {
         return this.allSubAgents.length;
     }
+    /** @deprecated Use {@link SubAgentCount}. */
+    get subAgentCount() {
+        return this.SubAgentCount;
+    }
     /** Number of child sub-agents (ParentID-based) */
-    get childSubAgentCount() {
+    get ChildSubAgentCount() {
         return this.allSubAgents.filter(s => s.type === 'child').length;
     }
+    /** @deprecated Use {@link ChildSubAgentCount}. */
+    get childSubAgentCount() {
+        return this.ChildSubAgentCount;
+    }
     /** Number of related sub-agents (Relationship-based) */
-    get relatedSubAgentCount() {
+    get RelatedSubAgentCount() {
         return this.allSubAgents.filter(s => s.type === 'related').length;
     }
+    /** @deprecated Use {@link RelatedSubAgentCount}. */
+    get relatedSubAgentCount() {
+        return this.RelatedSubAgentCount;
+    }
     /** Total number of sub-agents across both types */
-    get totalSubAgentCount() {
+    get TotalSubAgentCount() {
         return this.allSubAgents.length;
     }
+    /** @deprecated Use {@link TotalSubAgentCount}. */
+    get totalSubAgentCount() {
+        return this.TotalSubAgentCount;
+    }
     /** Number of prompts associated with this agent */
+    get PromptCount() {
+        return this.AgentPrompts.length;
+    }
+    /** @deprecated Use {@link PromptCount}. */
     get promptCount() {
-        return this.agentPrompts.length;
+        return this.PromptCount;
     }
     /** Number of actions configured for this agent */
+    get ActionCount() {
+        return this.AgentActions.length;
+    }
+    /** @deprecated Use {@link ActionCount}. */
     get actionCount() {
-        return this.agentActions.length;
+        return this.ActionCount;
     }
     /** Number of learning cycles for this agent */
+    get LearningCycleCount() {
+        return this.LearningCycles.length;
+    }
+    /** @deprecated Use {@link LearningCycleCount}. */
     get learningCycleCount() {
-        return this.learningCycles.length;
+        return this.LearningCycleCount;
     }
     /** Number of notes associated with this agent */
+    get NoteCount() {
+        return this.AgentNotes.length;
+    }
+    /** @deprecated Use {@link NoteCount}. */
     get noteCount() {
-        return this.agentNotes.length;
+        return this.NoteCount;
     }
     /** Number of execution history records */
+    get ExecutionHistoryCount() {
+        return this.RecentExecutions.length;
+    }
+    /** @deprecated Use {@link ExecutionHistoryCount}. */
     get executionHistoryCount() {
-        return this.recentExecutions.length;
+        return this.ExecutionHistoryCount;
+    }
+    /** @deprecated Use {@link SubAgents}. */
+    get subAgents() {
+        return this.SubAgents;
+    }
+    /** @deprecated Use {@link SubAgents}. */
+    set subAgents(value) {
+        this.SubAgents = value;
+    }
+    /** @deprecated Use {@link SubAgentFilter}. */
+    get subAgentFilter() {
+        return this.SubAgentFilter;
+    }
+    /** @deprecated Use {@link SubAgentFilter}. */
+    set subAgentFilter(value) {
+        this.SubAgentFilter = value;
     }
     /** Filtered sub-agents based on current filter */
-    get filteredSubAgents() {
-        switch (this.subAgentFilter) {
+    get FilteredSubAgents() {
+        switch (this.SubAgentFilter) {
             case 'child':
                 return this.allSubAgents.filter(s => s.type === 'child');
             case 'related':
@@ -2754,9 +2826,157 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
                 return this.allSubAgents;
         }
     }
+    /** @deprecated Use {@link FilteredSubAgents}. */
+    get filteredSubAgents() {
+        return this.FilteredSubAgents;
+    }
+    /** @deprecated Use {@link AgentPrompts}. */
+    get agentPrompts() {
+        return this.AgentPrompts;
+    }
+    /** @deprecated Use {@link AgentPrompts}. */
+    set agentPrompts(value) {
+        this.AgentPrompts = value;
+    }
+    /** @deprecated Use {@link AgentActions}. */
+    get agentActions() {
+        return this.AgentActions;
+    }
+    /** @deprecated Use {@link AgentActions}. */
+    set agentActions(value) {
+        this.AgentActions = value;
+    }
+    /** @deprecated Use {@link LearningCycles}. */
+    get learningCycles() {
+        return this.LearningCycles;
+    }
+    /** @deprecated Use {@link LearningCycles}. */
+    set learningCycles(value) {
+        this.LearningCycles = value;
+    }
+    /** @deprecated Use {@link AgentNotes}. */
+    get agentNotes() {
+        return this.AgentNotes;
+    }
+    /** @deprecated Use {@link AgentNotes}. */
+    set agentNotes(value) {
+        this.AgentNotes = value;
+    }
+    /** @deprecated Use {@link RecentExecutions}. */
+    get recentExecutions() {
+        return this.RecentExecutions;
+    }
+    /** @deprecated Use {@link RecentExecutions}. */
+    set recentExecutions(value) {
+        this.RecentExecutions = value;
+    }
+    /** @deprecated Use {@link TotalExecutionHistoryCount}. */
+    get totalExecutionHistoryCount() {
+        return this.TotalExecutionHistoryCount;
+    }
+    /** @deprecated Use {@link TotalExecutionHistoryCount}. */
+    set totalExecutionHistoryCount(value) {
+        this.TotalExecutionHistoryCount = value;
+    }
+    /** @deprecated Use {@link ExpandedExecutions}. */
+    get expandedExecutions() {
+        return this.ExpandedExecutions;
+    }
+    /** @deprecated Use {@link ExpandedExecutions}. */
+    set expandedExecutions(value) {
+        this.ExpandedExecutions = value;
+    }
+    /** @deprecated Use {@link ExecutionSearchText}. */
+    get executionSearchText() {
+        return this.ExecutionSearchText;
+    }
+    /** @deprecated Use {@link ExecutionSearchText}. */
+    set executionSearchText(value) {
+        this.ExecutionSearchText = value;
+    }
+    /** @deprecated Use {@link FilteredExecutions}. */
+    get filteredExecutions() {
+        return this.FilteredExecutions;
+    }
+    /** @deprecated Use {@link FilteredExecutions}. */
+    set filteredExecutions(value) {
+        this.FilteredExecutions = value;
+    }
     /** Message shown when the execution-history search matches nothing. */
     get ExecutionSearchEmptyMessage() {
-        return `No execution history found matching "${this.executionSearchText}"`;
+        return `No execution history found matching "${this.ExecutionSearchText}"`;
+    }
+    /** @deprecated Use {@link ExecutionHistoryView}. */
+    get executionHistoryView() {
+        return this.ExecutionHistoryView;
+    }
+    /** @deprecated Use {@link ExecutionHistoryView}. */
+    set executionHistoryView(value) {
+        this.ExecutionHistoryView = value;
+    }
+    /** @deprecated Use {@link AgentSessions}. */
+    get agentSessions() {
+        return this.AgentSessions;
+    }
+    /** @deprecated Use {@link AgentSessions}. */
+    set agentSessions(value) {
+        this.AgentSessions = value;
+    }
+    /** @deprecated Use {@link TotalSessionCount}. */
+    get totalSessionCount() {
+        return this.TotalSessionCount;
+    }
+    /** @deprecated Use {@link TotalSessionCount}. */
+    set totalSessionCount(value) {
+        this.TotalSessionCount = value;
+    }
+    /** @deprecated Use {@link LoadingSessions}. */
+    get loadingSessions() {
+        return this.LoadingSessions;
+    }
+    /** @deprecated Use {@link LoadingSessions}. */
+    set loadingSessions(value) {
+        this.LoadingSessions = value;
+    }
+    /** @deprecated Use {@link ExecutionHistoryPageSize}. */
+    get executionHistoryPageSize() {
+        return this.ExecutionHistoryPageSize;
+    }
+    /** @deprecated Use {@link ExecutionHistoryPageSize}. */
+    set executionHistoryPageSize(value) {
+        this.ExecutionHistoryPageSize = value;
+    }
+    /** @deprecated Use {@link ExecutionHistoryCurrentPage}. */
+    get executionHistoryCurrentPage() {
+        return this.ExecutionHistoryCurrentPage;
+    }
+    /** @deprecated Use {@link ExecutionHistoryCurrentPage}. */
+    set executionHistoryCurrentPage(value) {
+        this.ExecutionHistoryCurrentPage = value;
+    }
+    /** @deprecated Use {@link IsLoadingPage}. */
+    get isLoadingPage() {
+        return this.IsLoadingPage;
+    }
+    /** @deprecated Use {@link IsLoadingPage}. */
+    set isLoadingPage(value) {
+        this.IsLoadingPage = value;
+    }
+    /** @deprecated Use {@link IsLoadingData}. */
+    get isLoadingData() {
+        return this.IsLoadingData;
+    }
+    /** @deprecated Use {@link IsLoadingData}. */
+    set isLoadingData(value) {
+        this.IsLoadingData = value;
+    }
+    /** @deprecated Use {@link LoadingStates}. */
+    get loadingStates() {
+        return this.LoadingStates;
+    }
+    /** @deprecated Use {@link LoadingStates}. */
+    set loadingStates(value) {
+        this.LoadingStates = value;
     }
     /**
      * Loads the permission summary for the scopes currently assigned to
@@ -2818,8 +3038,8 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
     /** The slice of state the tab rules read — kept small so the rules stay unit-testable. */
     get formTabContext() {
         return {
-            AgentTypeName: this.agentType?.Name ?? null,
-            UIFormSectionKey: this.agentType?.UIFormSectionKey ?? null,
+            AgentTypeName: this.AgentType?.Name ?? null,
+            UIFormSectionKey: this.AgentType?.UIFormSectionKey ?? null,
             HasRecordID: !!this.record?.ID,
         };
     }
@@ -2851,6 +3071,30 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
     get customSectionLoadedForTab() {
         return this.customSectionLoaded;
     }
+    /** @deprecated Use {@link ModelSelectionModes}. */
+    get modelSelectionModes() {
+        return this.ModelSelectionModes;
+    }
+    /** @deprecated Use {@link ModelSelectionModes}. */
+    set modelSelectionModes(value) {
+        this.ModelSelectionModes = value;
+    }
+    /** @deprecated Use {@link StatusOptions}. */
+    get statusOptions() {
+        return this.StatusOptions;
+    }
+    /** @deprecated Use {@link StatusOptions}. */
+    set statusOptions(value) {
+        this.StatusOptions = value;
+    }
+    /** @deprecated Use {@link AgentTypes}. */
+    get agentTypes() {
+        return this.AgentTypes;
+    }
+    /** @deprecated Use {@link AgentTypes}. */
+    set agentTypes(value) {
+        this.AgentTypes = value;
+    }
     /** Handle category selection change from the TreeDropdown */
     OnCategoryChange(value) {
         if (value && !Array.isArray(value)) {
@@ -2862,12 +3106,20 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
         }
         this.SelectedCategoryKey = Array.isArray(value) ? null : value;
     }
+    /** @deprecated Use {@link SelectedContextCompressionPrompt}. */
+    get selectedContextCompressionPrompt() {
+        return this.SelectedContextCompressionPrompt;
+    }
+    /** @deprecated Use {@link SelectedContextCompressionPrompt}. */
+    set selectedContextCompressionPrompt(value) {
+        this.SelectedContextCompressionPrompt = value;
+    }
     /**
      * Loads agent types from the database for the dropdown
      * @private
      */
     async loadAgentTypes() {
-        this.agentTypes = AIEngineBase.Instance.AgentTypes;
+        this.AgentTypes = AIEngineBase.Instance.AgentTypes;
     }
     /**
      * Loads the context compression prompt details for display
@@ -2875,18 +3127,18 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
      */
     async loadContextCompressionPrompt() {
         if (!this.record?.ContextCompressionPromptID) {
-            this.selectedContextCompressionPrompt = null;
+            this.SelectedContextCompressionPrompt = null;
             return;
         }
-        this.selectedContextCompressionPrompt = AIEngineBase.Instance.Prompts.find(p => UUIDsEqual(p.ID, this.record.ContextCompressionPromptID));
-        if (!this.selectedContextCompressionPrompt) {
+        this.SelectedContextCompressionPrompt = AIEngineBase.Instance.Prompts.find(p => UUIDsEqual(p.ID, this.record.ContextCompressionPromptID));
+        if (!this.SelectedContextCompressionPrompt) {
             console.warn('Context compression prompt not found:', this.record.ContextCompressionPromptID);
         }
     }
     /**
      * Opens the prompt selector dialog for context compression prompt
      */
-    async openContextCompressionPromptSelector() {
+    async OpenContextCompressionPromptSelector() {
         try {
             const dialogRef = this.dialogService.open({
                 title: 'Select Context Compression Prompt',
@@ -2897,18 +3149,18 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
             const promptSelector = dialogRef.Content.instance;
             // Configure the prompt selector for single selection
             promptSelector.config = {
-                title: 'Select Context Compression Prompt',
-                multiSelect: false,
-                selectedPromptIds: this.record.ContextCompressionPromptID ? [this.record.ContextCompressionPromptID] : [],
-                showCreateNew: false
+                Title: 'Select Context Compression Prompt',
+                MultiSelect: false,
+                SelectedPromptIds: this.record.ContextCompressionPromptID ? [this.record.ContextCompressionPromptID] : [],
+                ShowCreateNew: false
             };
             // Subscribe to the result
             promptSelector.result.subscribe({
                 next: (result) => {
-                    if (result && result.selectedPrompts.length > 0) {
-                        const selectedPrompt = result.selectedPrompts[0];
+                    if (result && result.SelectedPrompts.length > 0) {
+                        const selectedPrompt = result.SelectedPrompts[0];
                         this.record.ContextCompressionPromptID = selectedPrompt.ID;
-                        this.selectedContextCompressionPrompt = selectedPrompt;
+                        this.SelectedContextCompressionPrompt = selectedPrompt;
                         this.cdr.detectChanges();
                     }
                 },
@@ -2922,14 +3174,22 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
             MJNotificationService.Instance.CreateSimpleNotification('Error opening prompt selector. Please try again.', 'error', 3000);
         }
     }
+    /** @deprecated Use {@link OpenContextCompressionPromptSelector}. */
+    async openContextCompressionPromptSelector() {
+        return this.OpenContextCompressionPromptSelector();
+    }
     /**
      * Clears the selected context compression prompt
      */
-    clearContextCompressionPrompt() {
+    ClearContextCompressionPrompt() {
         this.record.ContextCompressionPromptID = null;
-        this.selectedContextCompressionPrompt = null;
+        this.SelectedContextCompressionPrompt = null;
         this.cdr.detectChanges();
     }
+    /** @deprecated Use {@link ClearContextCompressionPrompt}. */
+    clearContextCompressionPrompt() {
+        return this.ClearContextCompressionPrompt();
+    }
     // Main AI Agent permissions inherited from BaseFormComponent:
     // - UserCanEdit (Update permission)
     // - UserCanRead (Read permission) 
@@ -3050,9 +3310,21 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
     /**
      * Clears the permission cache. Call this when user context changes or permissions are updated.
      */
-    clearPermissionCache() {
+    ClearPermissionCache() {
         this._permissionCache.clear();
     }
+    /** @deprecated Use {@link ClearPermissionCache}. */
+    clearPermissionCache() {
+        return this.ClearPermissionCache();
+    }
+    /** @deprecated Use {@link HasUnsavedChanges}. */
+    get hasUnsavedChanges() {
+        return this.HasUnsavedChanges;
+    }
+    /** @deprecated Use {@link HasUnsavedChanges}. */
+    set hasUnsavedChanges(value) {
+        this.HasUnsavedChanges = value;
+    }
     /**
      * Surfaces the type section's own edits to the toolbar and the navigate-away guard.
      *
@@ -3129,14 +3401,14 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
             return;
         // Reset pagination state on refresh
         if (forceRefresh) {
-            this.executionHistoryCurrentPage = 1;
-            this.isLoadingPage = false;
+            this.ExecutionHistoryCurrentPage = 1;
+            this.IsLoadingPage = false;
             this.allLoadedExecutions = [];
             // Don't clear recentExecutions - keep existing data visible while loading
         }
         // Set loading state
-        this.isLoadingData = true;
-        this.loadingStates = {
+        this.IsLoadingData = true;
+        this.LoadingStates = {
             executionHistory: true,
             subAgents: true,
             prompts: true,
@@ -3185,7 +3457,7 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
                 });
             }
             // Also populate the deprecated subAgents array for backward compatibility
-            this.subAgents = [...childAgents];
+            this.SubAgents = [...childAgents];
             // Load related sub-agents (Relationship-based)
             const rv = RunView.FromMetadataProvider(this.ProviderToUse);
             const relationshipsResult = await rv.RunView({
@@ -3221,11 +3493,11 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
             // Single assignment — happens AFTER the awaits above, i.e. outside the host's CD pass, so
             // totalSubAgentCount changes exactly once against settled state (no NG0100).
             this.allSubAgents = newSubAgents;
-            this.agentPrompts = AIEngineBase.Instance.Prompts.filter(p => {
+            this.AgentPrompts = AIEngineBase.Instance.Prompts.filter(p => {
                 const filteredAgentPrompts = AIEngineBase.Instance.AgentPrompts.filter(ap => UUIDsEqual(ap.AgentID, this.record.ID));
                 return filteredAgentPrompts.some(ap => UUIDsEqual(ap.PromptID, p.ID));
             });
-            this.agentActions = ActionEngineBase.Instance.Actions.filter(a => {
+            this.AgentActions = ActionEngineBase.Instance.Actions.filter(a => {
                 const filteredAgentActions = AIEngineBase.Instance.AgentActions.filter(aa => UUIDsEqual(aa.AgentID, this.record.ID));
                 return filteredAgentActions.some(aa => UUIDsEqual(aa.ActionID, a.ID));
             });
@@ -3256,7 +3528,7 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
                     ],
                     ExtraFilter: `AgentID='${this.record.ID}'`,
                     OrderBy: '__mj_CreatedAt DESC',
-                    MaxRows: this.executionHistoryPageSize
+                    MaxRows: this.ExecutionHistoryPageSize
                 },
                 // Agent permissions (to determine open-to-everyone state)
                 {
@@ -3268,14 +3540,14 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
             ]);
             // Process results in the same order as queries
             if (results && results.length > 0) {
-                this.learningCycles = results[0].Results || [];
-                this.agentNotes = results[1].Results || [];
-                this.recentExecutions = results[2].Results || [];
-                this.totalExecutionHistoryCount = results[2].TotalRowCount;
+                this.LearningCycles = results[0].Results || [];
+                this.AgentNotes = results[1].Results || [];
+                this.RecentExecutions = results[2].Results || [];
+                this.TotalExecutionHistoryCount = results[2].TotalRowCount;
                 // Initialize cache with first page of results
-                this.allLoadedExecutions = [...this.recentExecutions];
+                this.allLoadedExecutions = [...this.RecentExecutions];
                 // Initialize filtered executions
-                this.filteredExecutions = [...this.recentExecutions];
+                this.FilteredExecutions = [...this.RecentExecutions];
                 // Determine open-to-everyone state from permissions query
                 const permissionRows = results[3]?.Results || [];
                 this.IsOpenToEveryone = permissionRows.length === 0;
@@ -3293,8 +3565,8 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
         }
         finally {
             // Clear loading states
-            this.isLoadingData = false;
-            this.loadingStates = {
+            this.IsLoadingData = false;
+            this.LoadingStates = {
                 executionHistory: false,
                 subAgents: false,
                 prompts: false,
@@ -3316,37 +3588,45 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
      */
     createOriginalSnapshot() {
         this.originalSnapshots = {
-            agentPrompts: [...this.agentPrompts], // Deep copy of arrays
-            agentActions: [...this.agentActions],
-            subAgents: [...this.subAgents],
-            promptCount: this.promptCount,
-            actionCount: this.actionCount,
-            subAgentCount: this.subAgentCount,
-            learningCycleCount: this.learningCycleCount,
-            noteCount: this.noteCount,
-            executionHistoryCount: this.executionHistoryCount
+            agentPrompts: [...this.AgentPrompts], // Deep copy of arrays
+            agentActions: [...this.AgentActions],
+            subAgents: [...this.SubAgents],
+            promptCount: this.PromptCount,
+            actionCount: this.ActionCount,
+            subAgentCount: this.SubAgentCount,
+            learningCycleCount: this.LearningCycleCount,
+            noteCount: this.NoteCount,
+            executionHistoryCount: this.ExecutionHistoryCount
         };
     }
     /**
      * Navigates to the next page of execution history
      */
-    async goToNextPage() {
-        if (!this.hasNextPage || this.isLoadingPage || !this.record?.ID) {
+    async GoToNextPage() {
+        if (!this.HasNextPage || this.IsLoadingPage || !this.record?.ID) {
             return;
         }
-        const nextPage = this.executionHistoryCurrentPage + 1;
+        const nextPage = this.ExecutionHistoryCurrentPage + 1;
         await this.loadPage(nextPage);
     }
+    /** @deprecated Use {@link GoToNextPage}. */
+    async goToNextPage() {
+        return this.GoToNextPage();
+    }
     /**
      * Navigates to the previous page of execution history
      */
-    async goToPreviousPage() {
-        if (!this.hasPreviousPage || this.isLoadingPage) {
+    async GoToPreviousPage() {
+        if (!this.HasPreviousPage || this.IsLoadingPage) {
             return;
         }
-        const previousPage = this.executionHistoryCurrentPage - 1;
+        const previousPage = this.ExecutionHistoryCurrentPage - 1;
         await this.loadPage(previousPage);
     }
+    /** @deprecated Use {@link GoToPreviousPage}. */
+    async goToPreviousPage() {
+        return this.GoToPreviousPage();
+    }
     /**
      * Loads a specific page of execution history, using cache when available
      */
@@ -3354,21 +3634,21 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
         if (!this.record?.ID) {
             return;
         }
-        this.isLoadingPage = true;
+        this.IsLoadingPage = true;
         this.cdr.detectChanges();
         try {
-            const startIndex = (pageNumber - 1) * this.executionHistoryPageSize;
-            const endIndex = startIndex + this.executionHistoryPageSize;
+            const startIndex = (pageNumber - 1) * this.ExecutionHistoryPageSize;
+            const endIndex = startIndex + this.ExecutionHistoryPageSize;
             // Check if we have this page in cache
             const cachedPageData = this.allLoadedExecutions.slice(startIndex, endIndex);
-            const hasFullPageInCache = cachedPageData.length === this.executionHistoryPageSize;
-            const isLastPage = endIndex >= this.totalExecutionHistoryCount;
+            const hasFullPageInCache = cachedPageData.length === this.ExecutionHistoryPageSize;
+            const isLastPage = endIndex >= this.TotalExecutionHistoryCount;
             const hasPartialPageInCache = isLastPage && cachedPageData.length > 0 &&
-                cachedPageData.length === (this.totalExecutionHistoryCount - startIndex);
+                cachedPageData.length === (this.TotalExecutionHistoryCount - startIndex);
             if (hasFullPageInCache || hasPartialPageInCache) {
                 // We have the page in cache (either full page or complete last page)
-                this.executionHistoryCurrentPage = pageNumber;
-                this.recentExecutions = cachedPageData;
+                this.ExecutionHistoryCurrentPage = pageNumber;
+                this.RecentExecutions = cachedPageData;
                 await this.applySearchFilter();
             }
             else {
@@ -3383,7 +3663,7 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
                     ],
                     ExtraFilter: `AgentID='${this.record.ID}'`,
                     OrderBy: '__mj_CreatedAt DESC',
-                    MaxRows: this.executionHistoryPageSize,
+                    MaxRows: this.ExecutionHistoryPageSize,
                     StartRow: startIndex > 0 ? startIndex : undefined,
                     ResultType: 'entity_object'
                 });
@@ -3394,8 +3674,8 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
                     }
                     // Insert the new results into cache
                     this.allLoadedExecutions.splice(startIndex, result.Results.length, ...result.Results);
-                    this.executionHistoryCurrentPage = pageNumber;
-                    this.recentExecutions = result.Results;
+                    this.ExecutionHistoryCurrentPage = pageNumber;
+                    this.RecentExecutions = result.Results;
                     await this.applySearchFilter();
                 }
             }
@@ -3404,28 +3684,40 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
             console.error('Error loading page:', error);
         }
         finally {
-            this.isLoadingPage = false;
+            this.IsLoadingPage = false;
             this.cdr.detectChanges();
         }
     }
     /**
      * Checks if there is a next page available
      */
+    get HasNextPage() {
+        const maxPage = Math.ceil(this.TotalExecutionHistoryCount / this.ExecutionHistoryPageSize);
+        return this.ExecutionHistoryCurrentPage < maxPage;
+    }
+    /** @deprecated Use {@link HasNextPage}. */
     get hasNextPage() {
-        const maxPage = Math.ceil(this.totalExecutionHistoryCount / this.executionHistoryPageSize);
-        return this.executionHistoryCurrentPage < maxPage;
+        return this.HasNextPage;
     }
     /**
      * Checks if there is a previous page available
      */
+    get HasPreviousPage() {
+        return this.ExecutionHistoryCurrentPage > 1;
+    }
+    /** @deprecated Use {@link HasPreviousPage}. */
     get hasPreviousPage() {
-        return this.executionHistoryCurrentPage > 1;
+        return this.HasPreviousPage;
     }
     /**
      * Gets the total number of pages
      */
+    get TotalPages() {
+        return Math.ceil(this.TotalExecutionHistoryCount / this.ExecutionHistoryPageSize);
+    }
+    /** @deprecated Use {@link TotalPages}. */
     get totalPages() {
-        return Math.ceil(this.totalExecutionHistoryCount / this.executionHistoryPageSize);
+        return this.TotalPages;
     }
     /**
      * Loads the agent type entity for this agent
@@ -3437,14 +3729,14 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
         }
         try {
             const md = this.ProviderToUse;
-            this.agentType = await md.GetEntityObject('MJ: AI Agent Types');
-            if (this.agentType) {
-                await this.agentType.Load(this.record.TypeID);
+            this.AgentType = await md.GetEntityObject('MJ: AI Agent Types');
+            if (this.AgentType) {
+                await this.AgentType.Load(this.record.TypeID);
             }
         }
         catch (error) {
             console.error('Error loading agent type:', error);
-            this.agentType = null;
+            this.AgentType = null;
         }
         // The tab strip depends on the type (only some types ship a designer), so it cannot be built
         // until the type is known.
@@ -3455,18 +3747,18 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
      * @private
      */
     loadCustomFormSection() {
-        if (!this.agentType?.UIFormSectionKey || !this.customSectionContainer) {
+        if (!this.AgentType?.UIFormSectionKey || !this.customSectionContainer) {
             return;
         }
         // Check if component still exists in container
         if (this.customSectionLoaded && this.customSectionContainer.length > 0) {
             return;
         }
-        this.loadingStates.customSection = true;
+        this.LoadingStates.customSection = true;
         this.cdr.markForCheck();
         try {
             // Build the full registration key (Entity.Section pattern)
-            const sectionKey = `AI Agents.${this.agentType.UIFormSectionKey}`;
+            const sectionKey = `AI Agents.${this.AgentType.UIFormSectionKey}`;
             // Get the component registration from the class factory
             const registration = MJGlobal.Instance.ClassFactory.GetRegistration(BaseFormSectionComponent, sectionKey);
             if (registration && registration.SubClass) {
@@ -3487,7 +3779,7 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
             console.error('Error loading custom form section:', error);
         }
         finally {
-            this.loadingStates.customSection = false;
+            this.LoadingStates.customSection = false;
             this.cdr.markForCheck();
         }
     }
@@ -3495,15 +3787,19 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
      * Handles state change events for the custom section panel
      * @param event The panel bar state change event
      */
-    onCustomSectionStateChange(event) {
+    OnCustomSectionStateChange(event) {
         // When panel is expanded, check if we need to load or reload the custom section
-        if (event.expanded && this.agentType?.UIFormSectionKey) {
+        if (event.expanded && this.AgentType?.UIFormSectionKey) {
             // Always try to load on expand to handle cases where container might have been recreated
             this.setTrackedTimeout(() => {
                 this.loadCustomFormSection();
             }, 0);
         }
     }
+    /** @deprecated Use {@link OnCustomSectionStateChange}. */
+    onCustomSectionStateChange(event) {
+        return this.OnCustomSectionStateChange(event);
+    }
     // === User Preferences (Header & Section State) ===
     /** Load saved preferences for header state and section expand/collapse */
     loadUserPreferences() {
@@ -3556,7 +3852,7 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
                 this.SectionStates[item.id] = item.expanded;
                 // Keep existing custom section load logic
                 if (item.id === 'custom' && item.expanded) {
-                    this.onCustomSectionStateChange({ expanded: true });
+                    this.OnCustomSectionStateChange({ expanded: true });
                 }
             }
         }
@@ -3569,11 +3865,11 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
     restoreFromSnapshots() {
         if (this.originalSnapshots) {
             // Restore arrays (create new copies to ensure reactivity)
-            this.agentPrompts = [...this.originalSnapshots.agentPrompts];
-            this.agentActions = [...this.originalSnapshots.agentActions];
-            this.subAgents = [...this.originalSnapshots.subAgents];
+            this.AgentPrompts = [...this.originalSnapshots.agentPrompts];
+            this.AgentActions = [...this.originalSnapshots.agentActions];
+            this.SubAgents = [...this.originalSnapshots.subAgents];
             // Reset other UI state
-            this.hasUnsavedChanges = false;
+            this.HasUnsavedChanges = false;
             // Mark for check instead of forcing immediate detection
             this.cdr.markForCheck();
         }
@@ -3593,7 +3889,7 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
             // Restore our UI state after parent cancel
             this.restoreFromSnapshots();
             // Reset the unsaved changes flag
-            this.hasUnsavedChanges = false;
+            this.HasUnsavedChanges = false;
         }
         finally {
             // Always reset the flag
@@ -3605,7 +3901,7 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
      * Validates that the agent has been saved before allowing testing.
      * Shows a notification if the agent needs to be saved first.
      */
-    openTestHarness() {
+    OpenTestHarness() {
         if (!this.record?.ID) {
             MJNotificationService.Instance.CreateSimpleNotification('Please save the AI agent before testing', 'warning', 4000);
             return;
@@ -3614,18 +3910,30 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
         // Don't pass viewContainerRef so window is top-level
         this.testHarnessService.openForAgent(this.record.ID);
     }
-    openPermissionsDialog() {
+    /** @deprecated Use {@link OpenTestHarness}. */
+    openTestHarness() {
+        return this.OpenTestHarness();
+    }
+    OpenPermissionsDialog() {
         if (!this.record?.ID) {
             MJNotificationService.Instance.CreateSimpleNotification('Please save the AI agent before managing permissions', 'warning', 4000);
             return;
         }
         this.ShowPermissionsDialog = true;
     }
-    async onPermissionsDialogClosed() {
+    /** @deprecated Use {@link OpenPermissionsDialog}. */
+    openPermissionsDialog() {
+        return this.OpenPermissionsDialog();
+    }
+    async OnPermissionsDialogClosed() {
         this.ShowPermissionsDialog = false;
         // Refresh open-to-everyone state in case permissions were added/removed
         await this.refreshPermissionState();
     }
+    /** @deprecated Use {@link OnPermissionsDialogClosed}. */
+    async onPermissionsDialogClosed() {
+        return this.OnPermissionsDialogClosed();
+    }
     async refreshPermissionState() {
         if (!this.record?.ID)
             return;
@@ -3646,7 +3954,7 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
      * Uses standard color coding: green for active, yellow for pending, gray for disabled.
      * @returns CSS color value for the status badge
      */
-    getStatusBadgeColor() {
+    GetStatusBadgeColor() {
         switch (this.record?.Status) {
             case 'Active': return 'var(--mj-status-success)';
             case 'Pending': return 'var(--mj-status-warning)';
@@ -3654,6 +3962,10 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
             default: return 'var(--mj-text-muted)';
         }
     }
+    /** @deprecated Use {@link GetStatusBadgeColor}. */
+    getStatusBadgeColor() {
+        return this.GetStatusBadgeColor();
+    }
     /**
      * Event handler for test harness visibility changes.
      * Updates the component state when the test harness is opened or closed.
@@ -3662,25 +3974,37 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
     /**
      * Gets the count of sub-agents
      */
+    GetSubAgentCount() {
+        return this.SubAgentCount;
+    }
+    /** @deprecated Use {@link GetSubAgentCount}. */
     getSubAgentCount() {
-        return this.subAgentCount;
+        return this.GetSubAgentCount();
     }
     /**
      * Gets the count of prompts
      */
+    GetPromptCount() {
+        return this.PromptCount;
+    }
+    /** @deprecated Use {@link GetPromptCount}. */
     getPromptCount() {
-        return this.promptCount;
+        return this.GetPromptCount();
     }
     /**
      * Gets the count of actions
      */
+    GetActionCount() {
+        return this.ActionCount;
+    }
+    /** @deprecated Use {@link GetActionCount}. */
     getActionCount() {
-        return this.actionCount;
+        return this.GetActionCount();
     }
     /**
      * Gets the icon for the execution mode
      */
-    getExecutionModeIcon(mode) {
+    GetExecutionModeIcon(mode) {
         switch (mode) {
             case 'Sequential':
                 return 'fa-solid fa-list-ol';
@@ -3690,52 +4014,76 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
                 return 'fa-solid fa-robot';
         }
     }
+    /** @deprecated Use {@link GetExecutionModeIcon}. */
+    getExecutionModeIcon(mode) {
+        return this.GetExecutionModeIcon(mode);
+    }
     /**
      * Gets the agent's display icon
      * Prioritizes LogoURL, falls back to IconClass, then default robot icon
      */
-    getAgentIcon() {
+    GetAgentIcon() {
         if (this.record?.LogoURL) {
             // LogoURL is used in img tag, not here
             return '';
         }
         return this.record?.IconClass || 'fa-solid fa-robot';
     }
+    /** @deprecated Use {@link GetAgentIcon}. */
+    getAgentIcon() {
+        return this.GetAgentIcon();
+    }
     /**
      * Checks if the agent has a logo URL (for image display)
      */
-    hasLogoURL() {
+    HasLogoURL() {
         return !!this.record?.LogoURL;
     }
+    /** @deprecated Use {@link HasLogoURL}. */
+    hasLogoURL() {
+        return this.HasLogoURL();
+    }
     /**
      * Gets the icon for a sub-agent
      * Prioritizes LogoURL, falls back to IconClass, then default robot icon
      */
-    getSubAgentIcon(subAgent) {
+    GetSubAgentIcon(subAgent) {
         if (subAgent?.LogoURL) {
             // LogoURL is used in img tag, not here
             return '';
         }
         return subAgent?.IconClass || 'fa-solid fa-robot';
     }
+    /** @deprecated Use {@link GetSubAgentIcon}. */
+    getSubAgentIcon(subAgent) {
+        return this.GetSubAgentIcon(subAgent);
+    }
     /**
      * Gets the icon class for an action
      * Falls back to default bolt icon if no IconClass is set
      */
-    getActionIcon(action) {
+    GetActionIcon(action) {
         return action?.IconClass || 'fa-solid fa-bolt';
     }
+    /** @deprecated Use {@link GetActionIcon}. */
+    getActionIcon(action) {
+        return this.GetActionIcon(action);
+    }
     /**
      * Checks if a sub-agent has a logo URL
      */
-    hasSubAgentLogoURL(subAgent) {
+    HasSubAgentLogoURL(subAgent) {
         return !!subAgent?.LogoURL;
     }
+    /** @deprecated Use {@link HasSubAgentLogoURL}. */
+    hasSubAgentLogoURL(subAgent) {
+        return this.HasSubAgentLogoURL(subAgent);
+    }
     /**
      * Creates a new sub-agent using the CreateAgentService slide-in panel.
      * Uses the new unified agent creation UI from @memberjunction/ng-agents.
      */
-    async createSubAgent() {
+    async CreateSubAgent() {
         try {
             this.createAgentService.OpenSubAgentSlideIn(this.record.ID, this.record.Name || 'Agent').pipe(takeUntil(this.destroy$)).subscribe({
                 next: async (dialogResult) => {
@@ -3754,6 +4102,10 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
             MJNotificationService.Instance.CreateSimpleNotification('Error creating sub-agent. Please try again.', 'error', 3000);
         }
     }
+    /** @deprecated Use {@link CreateSubAgent}. */
+    async createSubAgent() {
+        return this.CreateSubAgent();
+    }
     /**
      * Handles the result from the create sub-agent slide-in.
      * Adds entities to PendingRecords for atomic save with parent.
@@ -3790,8 +4142,8 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
                 }
             }
             // Update UI to show the new sub-agent
-            this.subAgents.push(subAgent);
-            this.hasUnsavedChanges = true;
+            this.SubAgents.push(subAgent);
+            this.HasUnsavedChanges = true;
             // Mark for check instead of forcing immediate detection
             this.cdr.markForCheck();
             MJNotificationService.Instance.CreateSimpleNotification(`Sub-agent "${subAgent.Name}" created and will be saved when you save the parent agent`, 'success', 4000);
@@ -3804,9 +4156,9 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
     /**
      * Adds a new prompt to the agent (deferred until save)
      */
-    async addPrompt() {
+    async AddPrompt() {
         // Get currently linked and pending prompt IDs for pre-selection
-        const currentPromptIds = this.agentPrompts.map(ap => ap.ID);
+        const currentPromptIds = this.AgentPrompts.map(ap => ap.ID);
         const pendingAddIds = this.PendingRecords
             .filter(p => p.entityObject.EntityInfo.Name === 'MJ: AI Agent Prompts' && p.action === 'save')
             .map(p => p.entityObject.Get('PromptID'));
@@ -3821,9 +4173,9 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
                 viewContainerRef: this.viewContainerRef
             }).pipe(takeUntil(this.destroy$)).subscribe({
                 next: async (result) => {
-                    if (result && result.selectedPrompts.length > 0) {
+                    if (result && result.SelectedPrompts.length > 0) {
                         // Filter out already linked or pending prompts
-                        const newPrompts = result.selectedPrompts.filter(prompt => !allLinkedIds.some(id => UUIDsEqual(id, prompt.ID)));
+                        const newPrompts = result.SelectedPrompts.filter(prompt => !allLinkedIds.some(id => UUIDsEqual(id, prompt.ID)));
                         if (newPrompts.length === 0) {
                             MJNotificationService.Instance.CreateSimpleNotification('All selected prompts are already linked to this agent', 'info', 3000);
                             return;
@@ -3842,9 +4194,9 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
                                 action: 'save'
                             });
                         }
-                        this.hasUnsavedChanges = true;
+                        this.HasUnsavedChanges = true;
                         // Update UI to show the new prompts (cast to extended type for display)
-                        this.agentPrompts.push(...newPrompts);
+                        this.AgentPrompts.push(...newPrompts);
                         // Mark for check instead of forcing immediate detection
                         this.cdr.markForCheck();
                         // Show success notification
@@ -3866,10 +4218,14 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
             MJNotificationService.Instance.CreateSimpleNotification('Error adding prompts. Please try again.', 'error', 3000);
         }
     }
+    /** @deprecated Use {@link AddPrompt}. */
+    async addPrompt() {
+        return this.AddPrompt();
+    }
     /**
      * Handle context compression toggle and reset related fields when disabled
      */
-    onContextCompressionToggle(value) {
+    OnContextCompressionToggle(value) {
         const enabled = value === true || value === 'true';
         if (!enabled) {
             // Reset context compression related fields to null when disabled
@@ -3880,12 +4236,16 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
             this.cdr.markForCheck();
         }
     }
+    /** @deprecated Use {@link OnContextCompressionToggle}. */
+    onContextCompressionToggle(value) {
+        return this.OnContextCompressionToggle(value);
+    }
     /**
      * Opens the modern Add Action dialog for selecting actions (deferred until save)
      */
-    async configureActions() {
+    async ConfigureActions() {
         // Get currently linked and pending action IDs for pre-selection
-        const currentActionIds = this.agentActions.map(aa => aa.ID);
+        const currentActionIds = this.AgentActions.map(aa => aa.ID);
         const pendingAddIds = this.PendingRecords
             .filter(p => p.entityObject.EntityInfo.Name === 'MJ: AI Agent Actions' && p.action === 'save')
             .map(p => p.entityObject.Get('ActionID'));
@@ -3917,9 +4277,9 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
                             action: 'save'
                         });
                     }
-                    this.hasUnsavedChanges = true;
+                    this.HasUnsavedChanges = true;
                     // Update UI to show the new actions
-                    this.agentActions.push(...newActions);
+                    this.AgentActions.push(...newActions);
                     // Mark for check instead of forcing immediate detection
                     this.cdr.markForCheck();
                     // Show success notification
@@ -3932,10 +4292,14 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
             }
         });
     }
+    /** @deprecated Use {@link ConfigureActions}. */
+    async configureActions() {
+        return this.ConfigureActions();
+    }
     /**
      * Gets the status icon for execution runs
      */
-    getExecutionStatusIcon(status) {
+    GetExecutionStatusIcon(status) {
         switch (status?.toLowerCase()) {
             case 'completed':
             case 'success':
@@ -3952,10 +4316,14 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
                 return 'fa-solid fa-question-circle';
         }
     }
+    /** @deprecated Use {@link GetExecutionStatusIcon}. */
+    getExecutionStatusIcon(status) {
+        return this.GetExecutionStatusIcon(status);
+    }
     /**
      * Gets the status color for execution runs
      */
-    getExecutionStatusColor(status) {
+    GetExecutionStatusColor(status) {
         switch (status?.toLowerCase()) {
             case 'completed':
             case 'success':
@@ -3972,12 +4340,20 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
                 return 'var(--mj-text-muted)';
         }
     }
+    /** @deprecated Use {@link GetExecutionStatusColor}. */
+    getExecutionStatusColor(status) {
+        return this.GetExecutionStatusColor(status);
+    }
     // ────────────────────────────────────────────────────────────────────
     // Voice/Realtime Sessions (Execution History peer record type)
     // ────────────────────────────────────────────────────────────────────
     /** Switches the Execution History section between agent runs and voice sessions. */
+    SetExecutionHistoryView(view) {
+        this.ExecutionHistoryView = view;
+    }
+    /** @deprecated Use {@link SetExecutionHistoryView}. */
     setExecutionHistoryView(view) {
-        this.executionHistoryView = view;
+        return this.SetExecutionHistoryView(view);
     }
     /**
      * Loads the realtime voice sessions this agent participated in — either as
@@ -3991,7 +4367,7 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
         if (!this.record?.ID || !this.UserCanViewSessions) {
             return;
         }
-        this.loadingSessions = true;
+        this.LoadingSessions = true;
         try {
             const rv = RunView.FromMetadataProvider(this.ProviderToUse);
             const result = await rv.RunView({
@@ -4007,8 +4383,8 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
                 const items = (result.Results ?? [])
                     .map(row => this.buildSessionHistoryItem(row))
                     .filter(item => item.isCoAgent || item.isTarget);
-                this.agentSessions = items;
-                this.totalSessionCount = items.length;
+                this.AgentSessions = items;
+                this.TotalSessionCount = items.length;
                 await this.loadSessionChannelCounts(items);
             }
             else {
@@ -4019,7 +4395,7 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
             console.error('Error loading agent sessions:', error);
         }
         finally {
-            this.loadingSessions = false;
+            this.LoadingSessions = false;
             this.cdr.markForCheck();
         }
     }
@@ -4073,7 +4449,7 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
         }
     }
     /** Status color for a session lifecycle status (Active / Idle / Closed). */
-    getSessionStatusColor(status) {
+    GetSessionStatusColor(status) {
         switch (status) {
             case 'Active':
                 return 'var(--mj-status-success)';
@@ -4085,8 +4461,12 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
                 return 'var(--mj-text-muted)';
         }
     }
+    /** @deprecated Use {@link GetSessionStatusColor}. */
+    getSessionStatusColor(status) {
+        return this.GetSessionStatusColor(status);
+    }
     /** Status icon for a session lifecycle status. */
-    getSessionStatusIcon(status) {
+    GetSessionStatusIcon(status) {
         switch (status) {
             case 'Active':
                 return 'fa-solid fa-tower-broadcast';
@@ -4098,18 +4478,30 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
                 return 'fa-solid fa-question-circle';
         }
     }
+    /** @deprecated Use {@link GetSessionStatusIcon}. */
+    getSessionStatusIcon(status) {
+        return this.GetSessionStatusIcon(status);
+    }
     /** Session duration: created → closed (terminal) or last-active (still open). */
-    formatSessionDuration(item) {
+    FormatSessionDuration(item) {
         const end = item.row.ClosedAt ?? item.row.LastActiveAt;
         if (!end)
             return 'N/A';
-        return this.formatExecutionTimeFromDates(item.row.__mj_CreatedAt, end);
+        return this.FormatExecutionTimeFromDates(item.row.__mj_CreatedAt, end);
+    }
+    /** @deprecated Use {@link FormatSessionDuration}. */
+    formatSessionDuration(item) {
+        return this.FormatSessionDuration(item);
     }
     /** Opens an AI Agent Session record (renders via the custom session form). */
-    openSessionRecord(sessionId) {
+    OpenSessionRecord(sessionId) {
         this.sharedService.OpenEntityRecord('MJ: AI Agent Sessions', CompositeKey.FromID(sessionId));
     }
-    formatExecutionTimeFromDates(startDate, endDate) {
+    /** @deprecated Use {@link OpenSessionRecord}. */
+    openSessionRecord(sessionId) {
+        return this.OpenSessionRecord(sessionId);
+    }
+    FormatExecutionTimeFromDates(startDate, endDate) {
         if (!startDate || !endDate)
             return 'N/A';
         // check to see if we have dates or timestamps
@@ -4136,12 +4528,16 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
         if (isNaN(startTime) || isNaN(endTime))
             return 'N/A';
         const milliseconds = endTime - startTime;
-        return this.formatExecutionTime(milliseconds);
+        return this.FormatExecutionTime(milliseconds);
+    }
+    /** @deprecated Use {@link FormatExecutionTimeFromDates}. */
+    formatExecutionTimeFromDates(startDate, endDate) {
+        return this.FormatExecutionTimeFromDates(startDate, endDate);
     }
     /**
      * Formats execution time
      */
-    formatExecutionTime(milliseconds) {
+    FormatExecutionTime(milliseconds) {
         if (!milliseconds)
             return 'N/A';
         if (milliseconds >= 60000) {
@@ -4156,10 +4552,14 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
             return `${milliseconds}ms`;
         }
     }
+    /** @deprecated Use {@link FormatExecutionTime}. */
+    formatExecutionTime(milliseconds) {
+        return this.FormatExecutionTime(milliseconds);
+    }
     /**
      * Formats token count with appropriate units (K for thousands, M for millions)
      */
-    formatTokenCount(tokens) {
+    FormatTokenCount(tokens) {
         if (tokens == null || tokens === 0)
             return '0';
         if (tokens >= 1000000) {
@@ -4172,10 +4572,14 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
             return tokens.toString();
         }
     }
+    /** @deprecated Use {@link FormatTokenCount}. */
+    formatTokenCount(tokens) {
+        return this.FormatTokenCount(tokens);
+    }
     /**
      * Formats cost with appropriate precision
      */
-    formatCost(cost) {
+    FormatCost(cost) {
         if (cost == null || cost === 0)
             return '0.00';
         if (cost >= 1) {
@@ -4188,7 +4592,11 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
             return cost.toFixed(4);
         }
     }
-    getRunningTime(startDate) {
+    /** @deprecated Use {@link FormatCost}. */
+    formatCost(cost) {
+        return this.FormatCost(cost);
+    }
+    GetRunningTime(startDate) {
         if (!startDate)
             return 'N/A';
         const startTime = new Date(startDate).getTime();
@@ -4200,13 +4608,17 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
         // Update cache every second to avoid constant changes
         if (!cached || now - cached.timestamp > 1000) {
             const milliseconds = now - startTime;
-            const timeString = this.formatExecutionTime(milliseconds);
+            const timeString = this.FormatExecutionTime(milliseconds);
             this._runningTimeCache.set(cacheKey, { time: timeString, timestamp: now });
             // Don't trigger change detection here - let the background timer handle it
             return timeString;
         }
         return cached.time;
     }
+    /** @deprecated Use {@link GetRunningTime}. */
+    getRunningTime(startDate) {
+        return this.GetRunningTime(startDate);
+    }
     /**
      * Starts the background timer for updating running times
      */
@@ -4229,39 +4641,55 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
     /**
      * Gets the priority badge color
      */
-    getPriorityBadgeColor(priority) {
+    GetPriorityBadgeColor(priority) {
         if (priority <= 1)
             return 'var(--mj-status-error)'; // High priority - red
         if (priority <= 5)
             return 'var(--mj-status-warning)'; // Medium priority - yellow
         return 'var(--mj-status-success)'; // Low priority - green
     }
+    /** @deprecated Use {@link GetPriorityBadgeColor}. */
+    getPriorityBadgeColor(priority) {
+        return this.GetPriorityBadgeColor(priority);
+    }
     /**
      * Gets the priority label
      */
-    getPriorityLabel(priority) {
+    GetPriorityLabel(priority) {
         if (priority <= 1)
             return 'High';
         if (priority <= 5)
             return 'Medium';
         return 'Low';
     }
+    /** @deprecated Use {@link GetPriorityLabel}. */
+    getPriorityLabel(priority) {
+        return this.GetPriorityLabel(priority);
+    }
     /**
      * Navigates to a related entity
      */
-    navigateToEntity(entityName, recordId) {
+    NavigateToEntity(entityName, recordId) {
         this.sharedService.OpenEntityRecord(entityName, CompositeKey.FromURLSegment(this.ProviderToUse.EntityByName(entityName), recordId));
     }
+    /** @deprecated Use {@link NavigateToEntity}. */
+    navigateToEntity(entityName, recordId) {
+        return this.NavigateToEntity(entityName, recordId);
+    }
     /**
      * Toggles the expanded state of an execution card
      */
+    ToggleExecutionExpanded(executionId) {
+        this.ExpandedExecutions[executionId] = !this.ExpandedExecutions[executionId];
+    }
+    /** @deprecated Use {@link ToggleExecutionExpanded}. */
     toggleExecutionExpanded(executionId) {
-        this.expandedExecutions[executionId] = !this.expandedExecutions[executionId];
+        return this.ToggleExecutionExpanded(executionId);
     }
     /**
      * Handles search text changes - debounced to avoid excessive processing
      */
-    onExecutionSearchChange() {
+    OnExecutionSearchChange() {
         // Debounce search to avoid excessive processing during typing
         if (this._searchDebounceTimer) {
             clearTimeout(this._searchDebounceTimer);
@@ -4270,21 +4698,25 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
             this.applySearchFilter();
         }, 300);
     }
+    /** @deprecated Use {@link OnExecutionSearchChange}. */
+    onExecutionSearchChange() {
+        return this.OnExecutionSearchChange();
+    }
     /**
      * Applies search filter across all cached records and loads from database if needed
      */
     async applySearchFilter() {
-        if (!this.executionSearchText || this.executionSearchText.trim() === '') {
+        if (!this.ExecutionSearchText || this.ExecutionSearchText.trim() === '') {
             // No search text - show current page's executions
-            this.filteredExecutions = [...this.recentExecutions];
+            this.FilteredExecutions = [...this.RecentExecutions];
             return;
         }
-        const searchLower = this.executionSearchText.toLowerCase().trim();
+        const searchLower = this.ExecutionSearchText.toLowerCase().trim();
         // First, search across all cached records
         const cachedMatches = this.allLoadedExecutions.filter(execution => execution && execution.ID.toLowerCase().includes(searchLower));
         if (cachedMatches.length > 0) {
             // Found matches in cache
-            this.filteredExecutions = cachedMatches;
+            this.FilteredExecutions = cachedMatches;
         }
         else {
             // No matches in cache - search database
@@ -4313,27 +4745,31 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
                 ResultType: 'entity_object'
             });
             if (result.Success && result.Results) {
-                this.filteredExecutions = result.Results;
+                this.FilteredExecutions = result.Results;
             }
             else {
-                this.filteredExecutions = [];
+                this.FilteredExecutions = [];
             }
         }
         catch (error) {
             console.error('Error searching executions:', error);
-            this.filteredExecutions = [];
+            this.FilteredExecutions = [];
         }
     }
     /**
      * Opens the full execution record in a new view
      */
-    openExecutionRecord(executionId) {
+    OpenExecutionRecord(executionId) {
         this.sharedService.OpenEntityRecord('MJ: AI Agent Runs', CompositeKey.FromID(executionId));
     }
+    /** @deprecated Use {@link OpenExecutionRecord}. */
+    openExecutionRecord(executionId) {
+        return this.OpenExecutionRecord(executionId);
+    }
     /**
      * Gets a preview of the execution result for collapsed view
      */
-    getExecutionResultPreview(execution, trimLongMessages) {
+    GetExecutionResultPreview(execution, trimLongMessages) {
         try {
             if (!execution.Result)
                 return 'No result';
@@ -4363,10 +4799,14 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
                 return result;
         }
     }
+    /** @deprecated Use {@link GetExecutionResultPreview}. */
+    getExecutionResultPreview(execution, trimLongMessages) {
+        return this.GetExecutionResultPreview(execution, trimLongMessages);
+    }
     /**
      * Gets the full execution result message for expanded view
      */
-    getExecutionResultMessage(execution) {
+    GetExecutionResultMessage(execution) {
         try {
             if (!execution.Result)
                 return 'No result';
@@ -4384,38 +4824,58 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
             return execution.Result || '';
         }
     }
+    /** @deprecated Use {@link GetExecutionResultMessage}. */
+    getExecutionResultMessage(execution) {
+        return this.GetExecutionResultMessage(execution);
+    }
     /**
      * Refreshes the related data and updates snapshots
      */
-    async refreshRelatedData() {
+    async RefreshRelatedData() {
         if (this.record?.ID) {
             await this.loadRelatedCounts(true); // force refresh
             MJNotificationService.Instance.CreateSimpleNotification('Related data refreshed', 'success', 2000);
         }
     }
+    /** @deprecated Use {@link RefreshRelatedData}. */
+    async refreshRelatedData() {
+        return this.RefreshRelatedData();
+    }
     /**
      * Manually refreshes the snapshot for cancel/revert functionality
      * Useful when you want to reset the "original state" to the current state
      */
-    refreshSnapshot() {
+    RefreshSnapshot() {
         this.createOriginalSnapshot();
         MJNotificationService.Instance.CreateSimpleNotification('Current state saved as new baseline', 'info', 2000);
     }
+    /** @deprecated Use {@link RefreshSnapshot}. */
+    refreshSnapshot() {
+        return this.RefreshSnapshot();
+    }
     /**
      * Debug method to check current pending records state
      * Useful for troubleshooting cancel/revert issues
      */
-    debugPendingRecords() {
+    DebugPendingRecords() {
         // Debug method for troubleshooting - console output removed for production
     }
+    /** @deprecated Use {@link DebugPendingRecords}. */
+    debugPendingRecords() {
+        return this.DebugPendingRecords();
+    }
     /**
      * Adds a new note to the agent
      */
-    addNote() {
+    AddNote() {
         MJNotificationService.Instance.CreateSimpleNotification('Opening new note form...', 'info', 2000);
         // In a full implementation, this would open a new AI Agent Note form
         // with AgentID pre-populated to this.record.ID
     }
+    /** @deprecated Use {@link AddNote}. */
+    addNote() {
+        return this.AddNote();
+    }
     /**
      * Creates a new prompt and links it to the agent
      */
@@ -4438,11 +4898,11 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
                                 action: 'save'
                             });
                             // Add template to PendingRecords if created
-                            if (result.template) {
+                            if (result.Template) {
                                 // Set UserID on template (required field)
-                                result.template.UserID = currentUserId;
+                                result.Template.UserID = currentUserId;
                                 this.PendingRecords.push({
-                                    entityObject: result.template,
+                                    entityObject: result.Template,
                                     action: 'save'
                                 });
                             }
@@ -4468,9 +4928,9 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
                                 entityObject: agentPrompt,
                                 action: 'save'
                             });
-                            this.hasUnsavedChanges = true;
+                            this.HasUnsavedChanges = true;
                             // Update UI to show the new prompt
-                            this.agentPrompts.push(result.prompt);
+                            this.AgentPrompts.push(result.prompt);
                             // Trigger change detection to update UI
                             this.cdr.detectChanges();
                             MJNotificationService.Instance.CreateSimpleNotification(`New prompt "${result.prompt.Name}" will be created and linked when you save the agent`, 'success', 4000);
@@ -4495,7 +4955,7 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
     /**
      * Removes a prompt from the agent (deferred until save)
      */
-    async removePrompt(prompt, event) {
+    async RemovePrompt(prompt, event) {
         event.stopPropagation(); // Prevent navigation
         const confirmDialog = this.dialogService.open({
             title: 'Remove Prompt',
@@ -4540,11 +5000,11 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
                         }
                     }
                     // Remove from UI immediately
-                    const promptIndex = this.agentPrompts.findIndex(p => UUIDsEqual(p.ID, prompt.ID));
+                    const promptIndex = this.AgentPrompts.findIndex(p => UUIDsEqual(p.ID, prompt.ID));
                     if (promptIndex >= 0) {
-                        this.agentPrompts.splice(promptIndex, 1);
+                        this.AgentPrompts.splice(promptIndex, 1);
                     }
-                    this.hasUnsavedChanges = true;
+                    this.HasUnsavedChanges = true;
                     // Mark for check instead of forcing immediate detection
                     this.cdr.markForCheck();
                     MJNotificationService.Instance.CreateSimpleNotification(`Prompt "${prompt.Name}" will be removed when you save the agent`, 'info', 4000);
@@ -4559,20 +5019,28 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
             console.error('Error with dialog:', dialogError);
         }
     }
+    /** @deprecated Use {@link RemovePrompt}. */
+    async removePrompt(prompt, event) {
+        return this.RemovePrompt(prompt, event);
+    }
     /**
      * Updates payload field values from code editor
      */
-    updatePayloadField(fieldName, value) {
+    UpdatePayloadField(fieldName, value) {
         if (this.record) {
             // Handle the value - it might be a string or an event
             const newValue = typeof value === 'string' ? value : value?.target?.value || value;
             this.record[fieldName] = newValue;
         }
     }
+    /** @deprecated Use {@link UpdatePayloadField}. */
+    updatePayloadField(fieldName, value) {
+        return this.UpdatePayloadField(fieldName, value);
+    }
     /**
      * Opens the sub-agent selector dialog for adding sub-agents (deferred until save)
      */
-    async addSubAgents() {
+    async AddSubAgents() {
         try {
             // Get list of already pending sub-agent IDs to filter duplicates
             const pendingSubAgentIds = this.PendingRecords
@@ -4580,7 +5048,7 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
                 p.action === 'save' &&
                 p.entityObject.Get('ParentID') === this.record.ID)
                 .map(p => p.entityObject.Get('ID'));
-            const existingSubAgentIds = this.subAgents.map(agent => agent.ID);
+            const existingSubAgentIds = this.SubAgents.map(agent => agent.ID);
             const allLinkedIds = [...pendingSubAgentIds, ...existingSubAgentIds];
             this.agentManagementService.openSubAgentSelectorDialog({
                 title: 'Add Sub-Agents',
@@ -4590,9 +5058,9 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
                 viewContainerRef: this.viewContainerRef
             }).pipe(takeUntil(this.destroy$)).subscribe({
                 next: async (result) => {
-                    if (result && result.selectedAgents && result.selectedAgents.length > 0) {
+                    if (result && result.SelectedAgents && result.SelectedAgents.length > 0) {
                         // Filter out already linked or pending agents
-                        const newAgents = result.selectedAgents.filter(agent => !allLinkedIds.some(id => UUIDsEqual(id, agent.ID)));
+                        const newAgents = result.SelectedAgents.filter(agent => !allLinkedIds.some(id => UUIDsEqual(id, agent.ID)));
                         if (newAgents.length === 0) {
                             MJNotificationService.Instance.CreateSimpleNotification('All selected agents are already linked to this agent', 'info', 3000);
                             return;
@@ -4610,17 +5078,17 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
                                 action: 'save'
                             });
                         }
-                        this.hasUnsavedChanges = true;
+                        this.HasUnsavedChanges = true;
                         // Update UI to show the new sub-agents
-                        this.subAgents.push(...newAgents);
+                        this.SubAgents.push(...newAgents);
                         // Mark for check instead of forcing immediate detection
                         this.cdr.markForCheck();
                         // Show success notification
                         MJNotificationService.Instance.CreateSimpleNotification(`${newAgents.length} agent${newAgents.length === 1 ? '' : 's'} will be converted to sub-agent${newAgents.length === 1 ? '' : 's'} when you save`, 'info', 4000);
                     }
-                    else if (result && result.createNew) {
+                    else if (result && result.CreateNew) {
                         // User wants to create a new sub-agent
-                        await this.createSubAgent();
+                        await this.CreateSubAgent();
                     }
                 },
                 error: (error) => {
@@ -4634,10 +5102,14 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
             MJNotificationService.Instance.CreateSimpleNotification('Error adding sub-agents. Please try again.', 'error', 3000);
         }
     }
+    /** @deprecated Use {@link AddSubAgents}. */
+    async addSubAgents() {
+        return this.AddSubAgents();
+    }
     /**
      * Removes a sub-agent from this agent (deferred until save)
      */
-    async removeSubAgent(subAgent, event) {
+    async RemoveSubAgent(subAgent, event) {
         event.stopPropagation(); // Prevent navigation
         const confirmDialog = this.dialogService.open({
             title: 'Remove Sub-Agent',
@@ -4674,11 +5146,11 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
                         });
                     }
                     // Remove from UI immediately
-                    const subAgentIndex = this.subAgents.findIndex(sa => UUIDsEqual(sa.ID, subAgent.ID));
+                    const subAgentIndex = this.SubAgents.findIndex(sa => UUIDsEqual(sa.ID, subAgent.ID));
                     if (subAgentIndex >= 0) {
-                        this.subAgents.splice(subAgentIndex, 1);
+                        this.SubAgents.splice(subAgentIndex, 1);
                     }
-                    this.hasUnsavedChanges = true;
+                    this.HasUnsavedChanges = true;
                     // Mark for check instead of forcing immediate detection
                     this.cdr.markForCheck();
                     MJNotificationService.Instance.CreateSimpleNotification(`"${subAgent.Name}" will be removed as a sub-agent when you save`, 'info', 4000);
@@ -4693,34 +5165,54 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
             console.error('Error with dialog:', dialogError);
         }
     }
+    /** @deprecated Use {@link RemoveSubAgent}. */
+    async removeSubAgent(subAgent, event) {
+        return this.RemoveSubAgent(subAgent, event);
+    }
     /**
      * Sets the sub-agent filter to show all, child, or related sub-agents
      */
+    SetSubAgentFilter(filter) {
+        this.SubAgentFilter = filter;
+    }
+    /** @deprecated Use {@link SetSubAgentFilter}. */
     setSubAgentFilter(filter) {
-        this.subAgentFilter = filter;
+        return this.SetSubAgentFilter(filter);
     }
     /**
      * Gets the badge color for a sub-agent based on its type
      */
-    getSubAgentBadgeColor(item) {
+    GetSubAgentBadgeColor(item) {
         return item.type === 'child' ? 'var(--mj-status-info)' : 'var(--mj-brand-primary)';
     }
+    /** @deprecated Use {@link GetSubAgentBadgeColor}. */
+    getSubAgentBadgeColor(item) {
+        return this.GetSubAgentBadgeColor(item);
+    }
     /**
      * Gets the badge icon for a sub-agent based on its type
      */
-    getSubAgentBadgeIcon(item) {
+    GetSubAgentBadgeIcon(item) {
         return item.type === 'child' ? 'fa-solid fa-link' : 'fa-solid fa-share-nodes';
     }
+    /** @deprecated Use {@link GetSubAgentBadgeIcon}. */
+    getSubAgentBadgeIcon(item) {
+        return this.GetSubAgentBadgeIcon(item);
+    }
     /**
      * Gets the badge text for a sub-agent based on its type
      */
-    getSubAgentBadgeText(item) {
+    GetSubAgentBadgeText(item) {
         return item.type === 'child' ? 'CHILD' : 'RELATED';
     }
+    /** @deprecated Use {@link GetSubAgentBadgeText}. */
+    getSubAgentBadgeText(item) {
+        return this.GetSubAgentBadgeText(item);
+    }
     /**
      * Gets the payload information string for display
      */
-    getSubAgentPayloadInfo(item) {
+    GetSubAgentPayloadInfo(item) {
         if (item.type === 'child') {
             return 'Shared Payload';
         }
@@ -4739,20 +5231,28 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
         }
         return 'No Mapping';
     }
+    /** @deprecated Use {@link GetSubAgentPayloadInfo}. */
+    getSubAgentPayloadInfo(item) {
+        return this.GetSubAgentPayloadInfo(item);
+    }
     /**
      * Opens a dialog to configure the output mapping for a related sub-agent
      */
-    async configureOutputMapping(item, event) {
+    async ConfigureOutputMapping(item, event) {
         event.stopPropagation();
         if (item.type !== 'related' || !item.relationship)
             return;
         // TODO: Implement JSON editor dialog for SubAgentOutputMapping
         MJNotificationService.Instance.CreateSimpleNotification('Output mapping configuration coming soon', 'info', 3000);
     }
+    /** @deprecated Use {@link ConfigureOutputMapping}. */
+    async configureOutputMapping(item, event) {
+        return this.ConfigureOutputMapping(item, event);
+    }
     /**
      * Unlinks a related sub-agent (removes the relationship)
      */
-    async unlinkRelatedSubAgent(item, event) {
+    async UnlinkRelatedSubAgent(item, event) {
         event.stopPropagation();
         if (item.type !== 'related' || !item.relationship)
             return;
@@ -4794,30 +5294,46 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
             console.error('Error with dialog:', dialogError);
         }
     }
+    /** @deprecated Use {@link UnlinkRelatedSubAgent}. */
+    async unlinkRelatedSubAgent(item, event) {
+        return this.UnlinkRelatedSubAgent(item, event);
+    }
     /**
      * Removes a child sub-agent (updated to work with UnifiedSubAgent)
      */
-    async removeChildSubAgent(item, event) {
+    async RemoveChildSubAgent(item, event) {
         // Delegate to existing removeSubAgent method
-        await this.removeSubAgent(item.agent, event);
+        await this.RemoveSubAgent(item.agent, event);
+    }
+    /** @deprecated Use {@link RemoveChildSubAgent}. */
+    async removeChildSubAgent(item, event) {
+        return this.RemoveChildSubAgent(item, event);
     }
     /**
      * Creates a new child sub-agent (renamed from createSubAgent for clarity)
      */
+    async CreateChildSubAgent() {
+        await this.CreateSubAgent();
+    }
+    /** @deprecated Use {@link CreateChildSubAgent}. */
     async createChildSubAgent() {
-        await this.createSubAgent();
+        return this.CreateChildSubAgent();
     }
     /**
      * Opens dialog to link an existing agent as a related sub-agent
      */
-    async linkRelatedSubAgent() {
+    async LinkRelatedSubAgent() {
         // TODO: Implement dialog to select existing agents and create relationship
         MJNotificationService.Instance.CreateSimpleNotification('Link related sub-agent dialog coming soon', 'info', 3000);
     }
+    /** @deprecated Use {@link LinkRelatedSubAgent}. */
+    async linkRelatedSubAgent() {
+        return this.LinkRelatedSubAgent();
+    }
     /**
      * Removes an action from the agent (deferred until save)
      */
-    async removeAction(action, event) {
+    async RemoveAction(action, event) {
         event.stopPropagation(); // Prevent navigation
         const confirmDialog = this.dialogService.open({
             title: 'Remove Action',
@@ -4862,11 +5378,11 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
                         }
                     }
                     // Remove from UI immediately
-                    const actionIndex = this.agentActions.findIndex(a => UUIDsEqual(a.ID, action.ID));
+                    const actionIndex = this.AgentActions.findIndex(a => UUIDsEqual(a.ID, action.ID));
                     if (actionIndex >= 0) {
-                        this.agentActions.splice(actionIndex, 1);
+                        this.AgentActions.splice(actionIndex, 1);
                     }
-                    this.hasUnsavedChanges = true;
+                    this.HasUnsavedChanges = true;
                     // Mark for check instead of forcing immediate detection
                     this.cdr.markForCheck();
                     MJNotificationService.Instance.CreateSimpleNotification(`Action "${action.Name}" will be removed when you save the agent`, 'info', 4000);
@@ -4881,10 +5397,14 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
             console.error('Error with action dialog:', dialogError);
         }
     }
+    /** @deprecated Use {@link RemoveAction}. */
+    async removeAction(action, event) {
+        return this.RemoveAction(action, event);
+    }
     /**
      * Opens the advanced settings dialog for a prompt
      */
-    async openPromptAdvancedSettings(prompt, event) {
+    async OpenPromptAdvancedSettings(prompt, event) {
         event.stopPropagation(); // Prevent navigation
         try {
             // Find the corresponding MJAIAgentPromptEntity for this prompt
@@ -4904,12 +5424,12 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
                     if (formData) {
                         try {
                             // Update the agent prompt entity with new values
-                            agentPrompt.ExecutionOrder = formData.executionOrder;
-                            agentPrompt.Purpose = formData.purpose;
-                            agentPrompt.ConfigurationID = formData.configurationID;
-                            agentPrompt.ContextBehavior = formData.contextBehavior;
-                            agentPrompt.ContextMessageCount = formData.contextMessageCount;
-                            agentPrompt.Status = formData.status;
+                            agentPrompt.ExecutionOrder = formData.ExecutionOrder;
+                            agentPrompt.Purpose = formData.Purpose;
+                            agentPrompt.ConfigurationID = formData.ConfigurationID;
+                            agentPrompt.ContextBehavior = formData.ContextBehavior;
+                            agentPrompt.ContextMessageCount = formData.ContextMessageCount;
+                            agentPrompt.Status = formData.Status;
                             // Save immediately to database
                             const saveResult = await agentPrompt.Save();
                             if (saveResult) {
@@ -4938,10 +5458,14 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
             MJNotificationService.Instance.CreateSimpleNotification('Error opening prompt advanced settings. Please try again.', 'error', 3000);
         }
     }
+    /** @deprecated Use {@link OpenPromptAdvancedSettings}. */
+    async openPromptAdvancedSettings(prompt, event) {
+        return this.OpenPromptAdvancedSettings(prompt, event);
+    }
     /**
      * Opens the advanced settings dialog for a sub-agent
      */
-    async openSubAgentAdvancedSettings(subAgentEntity, event) {
+    async OpenSubAgentAdvancedSettings(subAgentEntity, event) {
         event.stopPropagation(); // Prevent navigation
         try {
             // Get all sub-agents under the same parent for validation
@@ -4955,23 +5479,23 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
                     if (formData) {
                         try {
                             // Update the sub-agent entity with new values
-                            subAgentEntity.ExecutionOrder = formData.executionOrder;
-                            subAgentEntity.ExecutionMode = formData.executionMode;
-                            subAgentEntity.Status = formData.status;
-                            subAgentEntity.TypeID = formData.typeID;
-                            subAgentEntity.ExposeAsAction = formData.exposeAsAction;
+                            subAgentEntity.ExecutionOrder = formData.ExecutionOrder;
+                            subAgentEntity.ExecutionMode = formData.ExecutionMode;
+                            subAgentEntity.Status = formData.Status;
+                            subAgentEntity.TypeID = formData.TypeID;
+                            subAgentEntity.ExposeAsAction = formData.ExposeAsAction;
                             // Save immediately to database
                             const saveResult = await subAgentEntity.Save();
                             if (saveResult) {
                                 MJNotificationService.Instance.CreateSimpleNotification('Sub-agent settings updated successfully', 'success', 3000);
                                 // Update the local sub-agent data to reflect changes
-                                const localSubAgent = this.subAgents.find(sa => UUIDsEqual(sa.ID, subAgentEntity.ID));
+                                const localSubAgent = this.SubAgents.find(sa => UUIDsEqual(sa.ID, subAgentEntity.ID));
                                 if (localSubAgent) {
-                                    localSubAgent.ExecutionOrder = formData.executionOrder;
-                                    localSubAgent.ExecutionMode = formData.executionMode;
-                                    localSubAgent.Status = formData.status;
-                                    localSubAgent.TypeID = formData.typeID;
-                                    localSubAgent.ExposeAsAction = formData.exposeAsAction;
+                                    localSubAgent.ExecutionOrder = formData.ExecutionOrder;
+                                    localSubAgent.ExecutionMode = formData.ExecutionMode;
+                                    localSubAgent.Status = formData.Status;
+                                    localSubAgent.TypeID = formData.TypeID;
+                                    localSubAgent.ExposeAsAction = formData.ExposeAsAction;
                                 }
                                 // Mark for check instead of forcing immediate detection
                                 this.cdr.markForCheck();
@@ -4997,6 +5521,10 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
             MJNotificationService.Instance.CreateSimpleNotification('Error opening sub-agent advanced settings. Please try again.', 'error', 3000);
         }
     }
+    /** @deprecated Use {@link OpenSubAgentAdvancedSettings}. */
+    async openSubAgentAdvancedSettings(subAgentEntity, event) {
+        return this.OpenSubAgentAdvancedSettings(subAgentEntity, event);
+    }
     /**
      * Override PopulatePendingRecords to preserve our pending records before parent clears them
      * However, during cancel operations, we want to clear all pending records completely
@@ -5036,7 +5564,7 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
                 this.record.ContextCompressionMessageThreshold = null;
                 this.record.ContextCompressionPromptID = null;
                 this.record.ContextCompressionMessageRetentionCount = null;
-                this.selectedContextCompressionPrompt = null;
+                this.SelectedContextCompressionPrompt = null;
             }
             const md = this.ProviderToUse;
             const transactionGroup = await md.CreateTransactionGroup();
@@ -5133,7 +5661,7 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
             if (this.customSectionComponent) {
                 const contributed = await this.customSectionComponent.ContributeToSave(transactionGroup);
                 if (!contributed) {
-                    MJNotificationService.Instance.CreateSimpleNotification(`The ${this.agentType?.Name ?? 'type'} configuration could not be prepared for saving. Nothing was saved.`, 'error', 4000);
+                    MJNotificationService.Instance.CreateSimpleNotification(`The ${this.AgentType?.Name ?? 'type'} configuration could not be prepared for saving. Nothing was saved.`, 'error', 4000);
                     return false;
                 }
             }
@@ -5144,7 +5672,7 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
                 // edits saved that a failed submit had discarded.
                 this.customSectionComponent?.OnHostSaveCompleted();
                 // Clear our local state since save was successful
-                this.hasUnsavedChanges = false;
+                this.HasUnsavedChanges = false;
                 // Clear pending records since they've been saved
                 this.PendingRecords.length = 0;
                 // Reload related data to reflect database state
@@ -5165,11 +5693,15 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
     /**
      * Navigates to the parent agent when the "Child of..." badge is clicked
      */
-    navigateToParentAgent() {
+    NavigateToParentAgent() {
         if (this.record.ParentID) {
-            this.navigateToEntity('MJ: AI Agents', this.record.ParentID);
+            this.NavigateToEntity('MJ: AI Agents', this.record.ParentID);
         }
     }
+    /** @deprecated Use {@link NavigateToParentAgent}. */
+    navigateToParentAgent() {
+        return this.NavigateToParentAgent();
+    }
     /**
      * Opens the substrate behind an invocation pathway.
      *
@@ -5178,7 +5710,7 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
      * the job of this layer.
      */
     OnInvocationOpenRequested(event) {
-        this.navigateToEntity(event.EntityName, event.RecordID);
+        this.NavigateToEntity(event.EntityName, event.RecordID);
     }
     /**
      * Component cleanup - critical for preventing memory leaks
@@ -5198,21 +5730,21 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
             this._runningTimeUpdater = null;
         }
         // Clear all data arrays to release memory
-        this.subAgents.length = 0;
-        this.agentPrompts.length = 0;
-        this.agentActions.length = 0;
-        this.recentExecutions.length = 0;
-        this.learningCycles.length = 0;
-        this.agentNotes.length = 0;
+        this.SubAgents.length = 0;
+        this.AgentPrompts.length = 0;
+        this.AgentActions.length = 0;
+        this.RecentExecutions.length = 0;
+        this.LearningCycles.length = 0;
+        this.AgentNotes.length = 0;
         // Reset pagination state
-        this.executionHistoryCurrentPage = 1;
-        this.totalExecutionHistoryCount = 0;
-        this.isLoadingPage = false;
+        this.ExecutionHistoryCurrentPage = 1;
+        this.TotalExecutionHistoryCount = 0;
+        this.IsLoadingPage = false;
         this.allLoadedExecutions = [];
         // Clear maps and objects
         this._permissionCache.clear();
         this._runningTimeCache.clear();
-        this.expandedExecutions = {};
+        this.ExpandedExecutions = {};
         this.originalSnapshots = null;
         // Clean up component references
         if (this.customSectionComponentRef) {
@@ -5220,14 +5752,14 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
             this.customSectionComponentRef = null;
         }
         this.customSectionComponent = null;
-        this.agentType = null;
+        this.AgentType = null;
     }
     static { this.ɵfac = /*@__PURE__*/ (() => { let ɵMJAIAgentFormComponentExtended_BaseFactory; return function MJAIAgentFormComponentExtended_Factory(__ngFactoryType__) { return (ɵMJAIAgentFormComponentExtended_BaseFactory || (ɵMJAIAgentFormComponentExtended_BaseFactory = i0.ɵɵgetInheritedFactory(MJAIAgentFormComponentExtended)))(__ngFactoryType__ || MJAIAgentFormComponentExtended); }; })(); }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJAIAgentFormComponentExtended, selectors: [["mj-ai-agent-form"]], viewQuery: function MJAIAgentFormComponentExtended_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c0, 5, ViewContainerRef);
         } if (rf & 2) {
             let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.customSectionContainer = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.CustomSectionContainer = _t.first);
         } }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 2, vars: 2, consts: [["form", "ngForm"], ["customSectionContainer", ""], [3, "Record", "FormComponent", "ToolbarConfig", "WidthMode"], [3, "Agent"], [3, "Navigate", "DeleteRequested", "FavoriteToggled", "HistoryRequested", "ListManagementRequested", "Record", "FormComponent", "ToolbarConfig", "WidthMode"], [1, "record-form"], [1, "agent-header"], [1, "agent-header-mini"], [1, "agent-form-loading"], [1, "agent-header-content"], ["title", "Minimize header", 1, "agent-header-toggle", 3, "click"], [1, "fa-solid", "fa-chevron-up"], [1, "agent-overview"], [1, "agent-icon-wrapper"], [1, "agent-logo", 3, "src", "alt"], [3, "class"], [1, "agent-info"], ["type", "text", "name", "agentName", "placeholder", "Enter agent name...", 1, "mj-input", "agent-name-input", 3, "ngModel"], [1, "agent-name"], [1, "agent-meta"], [1, "status-badge", 3, "background-color"], [1, "execution-mode"], [1, "parent-agent", "clickable", 3, "title"], [1, "agent-actions"], ["mjButton", "", "variant", "outline", "size", "sm", "title", "Refresh all data", 3, "click"], [1, "fa-solid", "fa-refresh"], ["type", "text", "name", "agentName", "placeholder", "Enter agent name...", 1, "mj-input", "agent-name-input", 3, "ngModelChange", "ngModel"], [1, "status-badge"], [1, "fa-solid", "fa-circle"], [1, "parent-agent", "clickable", 3, "click", "title"], [1, "fa-solid", "fa-sitemap"], [1, "fa-solid", "fa-external-link", 2, "margin-left", "4px", "font-size", "10px"], ["mjButton", "", "variant", "primary", "size", "lg", "title", "Run this AI agent", 3, "click", "disabled"], [1, "fa-solid", "fa-play"], ["mjButton", "", "size", "lg", 3, "click", "title"], [1, "fa-solid"], ["title", "Expand header", 1, "agent-header-mini-expand", 3, "click"], [1, "fa-solid", "fa-chevron-down"], [1, "agent-header-mini-name"], [1, "agent-header-mini-status", 3, "background-color"], [1, "agent-header-mini-spacer"], ["title", "Refresh", 1, "agent-header-mini-btn", 3, "click"], [1, "agent-header-mini-status"], ["title", "Run agent", 1, "agent-header-mini-btn", "agent-header-mini-btn--primary", 3, "click", "disabled"], [1, "agent-header-mini-btn", 3, "click", "title"], ["text", "Loading agent...", "size", "medium"], [1, "agent-tabbar"], [1, "agent-pane", "agent-pane--designer", 3, "agent-pane--hidden"], [1, "agent-pane", "agent-pane--invocations", 3, "agent-pane--hidden"], [1, "form-content", "agent-pane"], ["id", "history", 3, "Expanded", "Disabled"], ["id", "actions", 3, "Expanded", "Disabled"], ["id", "subagents", 3, "Expanded", "Disabled"], ["id", "prompts", 3, "Expanded", "Disabled"], ["id", "learning", 3, "Expanded", "Disabled"], ["id", "notes", 3, "Expanded", "Disabled"], ["id", "search", 3, "Expanded"], ["id", "payload", 3, "Expanded"], ["mjAccordionTitle", ""], [1, "panel-content"], [1, "section-header"], [1, "section-description"], [1, "payload-section"], [1, "payload-section-title"], [1, "fa-solid", "fa-target"], [1, "payload-field-container"], [1, "payload-field-info"], [1, "payload-field-label"], [1, "payload-field-description"], [1, "payload-field-input"], ["FieldName", "PayloadScope", "Type", "textbox", "Caption", "", 2, "width", "100%", 3, "EditMode", "Record"], [1, "payload-field-example"], [1, "fa-solid", "fa-lightbulb"], [1, "fa-solid", "fa-route"], [1, "payload-paths-grid"], [1, "payload-path-card"], [1, "payload-path-header"], [1, "payload-path-icon", "downstream"], [1, "fa-solid", "fa-arrow-down"], [1, "payload-path-info"], [1, "payload-path-content"], [1, "json-editor-container"], ["language", "json", 2, "height", "100px", "width", "100%", 3, "valueChange", "value", "readonly", "lineWrapping"], [1, "payload-path-hint"], [1, "fa-solid", "fa-info-circle"], [1, "payload-path-icon", "upstream"], [1, "fa-solid", "fa-arrow-up"], [1, "payload-path-icon", "self-read"], [1, "fa-solid", "fa-eye"], [1, "payload-path-icon", "self-write"], [1, "fa-solid", "fa-pen"], [1, "fa-solid", "fa-shield-check"], [1, "payload-validation-container"], [1, "payload-validation-settings"], [1, "validation-field-group"], [1, "validation-field-label"], [1, "validation-field-description"], ["FieldName", "FinalPayloadValidationMode", "Type", "dropdownlist", "Caption", "", 2, "width", "100%", 3, "EditMode", "Record"], ["FieldName", "FinalPayloadValidationMaxRetries", "Type", "numerictextbox", "Caption", "", 2, "width", "100%", 3, "EditMode", "Record"], [1, "payload-validation-schema"], [1, "validation-schema-label"], [1, "fa-solid", "fa-code"], [1, "validation-schema-description"], [1, "validation-schema-editor"], ["language", "json", 2, "height", "200px", "width", "100%", 3, "valueChange", "value", "readonly", "lineWrapping"], ["id", "guardrails", 3, "Expanded"], [1, "form-fields-grid"], ["FieldName", "MaxCostPerRun", "Type", "numerictextbox", "Caption", "Max Cost ($)", "Description", "Maximum cost per run", 3, "EditMode", "Record"], ["FieldName", "MaxTokensPerRun", "Type", "numerictextbox", "Caption", "Max Tokens", "Description", "Maximum tokens per run", 3, "EditMode", "Record"], ["FieldName", "MaxIterationsPerRun", "Type", "numerictextbox", "Caption", "Max Iterations", "Description", "Maximum prompt iterations", 3, "EditMode", "Record"], ["FieldName", "MaxTimePerRun", "Type", "numerictextbox", "Caption", "Max Time (seconds)", "Description", "Maximum execution time", 3, "EditMode", "Record"], ["id", "config", 3, "Expanded"], [1, "config-section"], [1, "config-section-title"], [1, "fa-solid", "fa-id-card"], [1, "config-grid"], [1, "config-card"], [1, "config-card-header"], [1, "config-card-icon"], [1, "fa-solid", "fa-toggle-on"], [1, "config-card-info"], [1, "config-card-content"], ["TextField", "text", "ValueField", "value", "name", "agentStatus", 1, "config-field-input", 3, "ngModel", "Data", "ValuePrimitive"], [1, "config-field-display"], ["TextField", "Name", "ValueField", "ID", "name", "agentTypeID", 1, "config-field-input", 3, "ngModel", "Data", "ValuePrimitive"], [1, "fa-solid", "fa-folder-tree"], ["SelectionMode", "single", "SelectableTypes", "branch", "Placeholder", "Select a category...", 3, "BranchConfig", "Value", "Clearable", "EnableSearch"], [1, "fa-solid", "fa-bolt"], ["FieldName", "ExposeAsAction", "Type", "checkbox", "Caption", "", 3, "EditMode", "Record"], [1, "config-card", "full-width"], [1, "fa-solid", "fa-align-left"], ["FieldName", "Description", "Type", "textarea", "Caption", "", 2, "width", "100%", 3, "EditMode", "Record"], [1, "fa-solid", "fa-layer-group"], ["FieldName", "ExecutionMode", "Type", "dropdownlist", "Caption", "", 3, "EditMode", "Record"], [1, "fa-solid", "fa-sort-numeric-down"], ["FieldName", "ExecutionOrder", "Type", "numerictextbox", "Caption", "", 3, "EditMode", "Record"], [1, "fa-solid", "fa-tachometer-alt"], ["FieldName", "DefaultPromptEffortLevel", "Type", "numerictextbox", "Caption", "", 3, "EditMode", "Record"], [1, "config-card-hint"], ["FieldName", "DriverClass", "Type", "textbox", "Caption", "", 3, "EditMode", "Record"], [1, "fa-solid", "fa-palette"], [1, "fa-solid", "fa-icons"], ["FieldName", "IconClass", "Type", "textbox", "Caption", "", 3, "EditMode", "Record"], [1, "fa-solid", "fa-image"], ["FieldName", "LogoURL", "Type", "textbox", "Caption", "", 3, "EditMode", "Record"], [1, "fa-solid", "fa-compress"], ["FieldName", "EnableContextCompression", "Type", "checkbox", "Caption", "", 3, "valueChange", "EditMode", "Record"], [3, "TabChange", "Tabs", "ActiveKey"], [1, "agent-pane", "agent-pane--designer"], ["size", "medium", 3, "text"], [1, "agent-pane", "agent-pane--invocations"], [3, "RecordOpenRequested", "Provider", "AgentID", "Active", "ExposeAsAction", "ParentAgentName", "ParentAgentID"], [1, "panel-content", "execution-history-panel"], ["role", "tablist", 1, "history-view-toggle"], [1, "fa-solid", "fa-history"], [1, "fa-solid", "fa-spinner", "fa-spin"], ["type", "button", 1, "history-toggle-option", 3, "click"], [1, "fa-solid", "fa-person-running"], [1, "history-toggle-count"], [1, "fa-solid", "fa-tower-broadcast"], ["text", "Loading sessions...", "size", "medium"], ["Icon", "fa-solid fa-tower-broadcast", "Title", "No Voice Sessions", "Message", "This agent hasn't participated in any realtime voice sessions yet \u2014 neither as the co-agent nor as a delegation target.", "Size", "compact"], [1, "execution-history-list"], ["title", "Open session", 1, "execution-card", "session-card"], ["title", "Open session", 1, "execution-card", "session-card", 3, "click"], [1, "execution-header"], [1, "execution-left-section"], [1, "execution-status"], [1, "status-indicator"], [1, "execution-info"], [1, "execution-title"], [1, "session-role-chip"], [1, "session-role-chip", "session-role-chip--target"], [1, "execution-date"], [1, "execution-metrics"], [1, "metric-item"], [1, "session-status-pill"], [1, "fa-solid", "fa-stopwatch"], [1, "metric-label"], [1, "metric-value"], [1, "fa-solid", "fa-plug"], [1, "fa-solid", "fa-user"], [1, "execution-actions"], ["title", "View session details", 1, "action-btn", 3, "click"], [1, "fa-solid", "fa-external-link-alt"], [1, "fa-solid", "fa-bullseye"], ["text", "Loading execution history...", "size", "medium"], ["Icon", "fa-solid fa-clock-rotate-left", "Title", "No Execution History", "Message", "This agent hasn't been executed yet. Use the Test Agent button to run the agent and see execution history here.", "Size", "compact"], [1, "execution-search-bar"], [1, "search-input-wrapper"], [1, "fa-solid", "fa-search"], ["type", "text", "placeholder", "Search by Run ID...", 1, "mj-input", 3, "ngModelChange", "ngModel", "ngModelOptions"], ["Variant", "no-results", "Title", "No Matching Results", "Size", "compact", 3, "Message"], [1, "execution-card", 3, "expanded"], [1, "pagination-controls"], [1, "execution-card"], [1, "execution-header", 3, "click"], [1, "fa-solid", "fa-chevron-right", "expand-icon"], ["title", "View details", 1, "action-btn", 3, "click"], [1, "execution-expanded-content"], [1, "fa-solid", "fa-cog"], [1, "fa-solid", "fa-clock"], [1, "fa-solid", "fa-microchip"], [1, "fa-solid", "fa-dollar-sign"], [1, "detailed-metrics"], [1, "metrics-grid"], [1, "metric-detail"], [1, "metric-info"], [1, "metric-title"], [1, "metric-data"], [1, "result-section"], [1, "error-section"], [1, "fa-solid", "fa-check-circle"], [1, "fa-solid", "fa-calculator"], [1, "fa-solid", "fa-comments"], [1, "fa-solid", "fa-file-text"], ["language", "json", 2, "max-height", "200px", "width", "100%", 3, "value", "readonly", "lineWrapping"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "error-content"], ["mjButton", "", "variant", "outline", 1, "page-nav-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-chevron-left"], [1, "page-info"], [1, "fa-solid", "fa-chevron-right"], ["mjButton", "", "variant", "flat", "size", "sm", 1, "view-all-btn", 3, "click"], [1, "fa-solid", "fa-external-link"], [1, "record-count"], [1, "loading-state"], [1, "header-actions"], ["mjButton", "", "variant", "primary", "size", "sm"], ["Icon", "fa-solid fa-bolt", "Title", "No Actions Configured", "Message", "Add actions to enable this agent to perform specific tasks and operations.", "ActionIcon", "fa-solid fa-plus", "Size", "compact", 3, "ActionText"], [1, "entity-list"], ["mjButton", "", "variant", "primary", "size", "sm", 3, "click"], [1, "fa-solid", "fa-plus"], ["Icon", "fa-solid fa-bolt", "Title", "No Actions Configured", "Message", "Add actions to enable this agent to perform specific tasks and operations.", "ActionIcon", "fa-solid fa-plus", "Size", "compact", 3, "Action", "ActionText"], [1, "entity-item", "action-item"], [1, "view-more-item"], [1, "entity-item", "action-item", 3, "click"], [1, "item-icon"], [1, "item-content"], [1, "item-title"], [1, "item-preview"], [1, "item-meta"], [1, "meta-tag"], [1, "status-tag"], [1, "item-actions"], ["mjButton", "", "variant", "flat", "size", "sm", "title", "Remove action", 1, "error-action"], ["mjButton", "", "variant", "flat", "size", "sm", "title", "Remove action", 1, "error-action", 3, "click"], [1, "fa-solid", "fa-trash"], [1, "view-more-item", 3, "click"], [1, "section-header", "sub-agent-filter-header"], [1, "filter-controls"], [1, "mj-button-group"], ["mjButton", "", "size", "sm", 3, "click"], [1, "fa-solid", "fa-link"], [1, "fa-solid", "fa-share-nodes"], ["Icon", "fa-solid fa-sitemap", "Title", "No Sub-Agents", "Message", "Sub-agents help build complex workflows through hierarchical orchestration.", "Size", "compact"], ["mjButton", "", "variant", "primary", "size", "sm", "title", "Create a new child sub-agent that shares this agent's payload", 3, "click"], ["mjButton", "", "size", "sm", "title", "Link an existing agent as a related sub-agent with payload mapping", 3, "click"], [1, "empty-state-info"], [1, "info-card"], [1, "fa-solid", "fa-link", 2, "color", "var(--mj-status-info)"], [1, "fa-solid", "fa-share-nodes", 2, "color", "var(--mj-brand-primary)"], [1, "entity-item", "sub-agent-item", 3, "child-sub-agent", "related-sub-agent"], [1, "entity-item", "sub-agent-item", 3, "click"], [1, "sub-agent-type-badge"], [1, "sub-agent-logo", 3, "src", "alt"], [1, "meta-tag", "payload-info"], [1, "fa-solid", "fa-database"], [1, "status-tag", 3, "background-color"], ["mjButton", "", "variant", "flat", "size", "sm", "title", "Configure output mapping"], ["mjButton", "", "variant", "flat", "size", "sm", "title", "Advanced settings"], ["mjButton", "", "variant", "flat", "size", "sm", 1, "error-action", 3, "title"], ["mjButton", "", "variant", "flat", "size", "sm", "title", "Configure output mapping", 3, "click"], [1, "fa-solid", "fa-exchange-alt"], ["mjButton", "", "variant", "flat", "size", "sm", "title", "Advanced settings", 3, "click"], ["mjButton", "", "variant", "flat", "size", "sm", 1, "error-action", 3, "click", "title"], [1, "prompt-controls"], [1, "model-selection-mode"], [1, "model-selection-label"], [1, "fa-solid", "fa-sliders"], ["name", "modelSelectionMode", "TextField", "text", "ValueField", "value", 1, "model-selection-dropdown", 3, "ngModel", "Data", "ValuePrimitive"], [1, "model-selection-value"], ["Icon", "fa-solid fa-comments", "Title", "No Prompts Configured", "Message", "Add prompts to define how this agent processes requests and generates responses.", "ActionIcon", "fa-solid fa-plus", "Size", "compact", 3, "ActionText"], ["name", "modelSelectionMode", "TextField", "text", "ValueField", "value", 1, "model-selection-dropdown", 3, "ngModelChange", "ngModel", "Data", "ValuePrimitive"], ["Icon", "fa-solid fa-comments", "Title", "No Prompts Configured", "Message", "Add prompts to define how this agent processes requests and generates responses.", "ActionIcon", "fa-solid fa-plus", "Size", "compact", 3, "Action", "ActionText"], [1, "entity-item", "prompt-item"], [1, "entity-item", "prompt-item", 3, "click"], [1, "fa-solid", "fa-comment-dots"], ["mjButton", "", "variant", "flat", "size", "sm", "title", "Remove prompt", 1, "error-action"], ["mjButton", "", "variant", "flat", "size", "sm", "title", "Remove prompt", 1, "error-action", 3, "click"], ["Icon", "fa-solid fa-brain", "Title", "No Learning Cycles", "Message", "Learning cycles will appear here as the agent processes requests and improves over time.", "Size", "compact"], [1, "fa-solid", "fa-brain"], [1, "entity-item", "learning-item"], [1, "entity-item", "learning-item", 3, "click"], [1, "fa-solid", "fa-calendar"], ["Icon", "fa-solid fa-sticky-note", "Title", "No Notes", "Message", "Add notes to document important information, observations, or instructions for this agent.", "ActionIcon", "fa-solid fa-plus", "Size", "compact", 3, "ActionText"], [1, "fa-solid", "fa-sticky-note"], ["Icon", "fa-solid fa-sticky-note", "Title", "No Notes", "Message", "Add notes to document important information, observations, or instructions for this agent.", "ActionIcon", "fa-solid fa-plus", "Size", "compact", 3, "Action", "ActionText"], [1, "entity-item", "note-item"], [1, "entity-item", "note-item", 3, "click"], [1, "agent-search-access"], [1, "agent-search-access-option"], ["type", "radio", "name", "SearchScopeAccess", "value", "All", 3, "change", "checked", "disabled"], [1, "fa-solid", "fa-globe"], [1, "agent-search-access-text"], [1, "agent-search-access-title"], [1, "agent-search-access-desc"], ["type", "radio", "name", "SearchScopeAccess", "value", "Assigned", 3, "change", "checked", "disabled"], [1, "fa-solid", "fa-user-check"], ["type", "radio", "name", "SearchScopeAccess", "value", "None", 3, "change", "checked", "disabled"], [1, "fa-solid", "fa-ban"], [1, "fa-solid", "fa-magnifying-glass"], [1, "agent-search-grid-header"], ["ChildEntityName", "MJ: AI Agent Search Scopes", "ParentFieldName", "AgentID", "AddButtonLabel", "+ Assign another scope", "EmptyMessage", "No scopes assigned yet. Assign at least one if this agent will use Scoped Search.", 3, "RowsChanged", "ParentID", "Columns", "Disabled"], [1, "agent-search-section", 2, "margin-top", "16px"], [2, "margin", "0 0 8px 0"], [1, "fa-solid", "fa-shield-halved"], [1, "section-description", 2, "margin-bottom", "8px"], [2, "color", "var(--mj-text-muted)"], [2, "color", "var(--mj-text-muted)", "font-style", "italic"], [2, "margin-bottom", "12px", "padding", "8px 12px", "background", "var(--mj-bg-surface-card)", "border", "1px solid var(--mj-border-subtle)", "border-radius", "4px"], [2, "font-weight", "600", "margin-bottom", "4px"], [2, "color", "var(--mj-text-muted)", "font-size", "0.9em"], [2, "margin", "4px 0 0 16px", "padding", "0"], [2, "font-size", "0.9em", "padding", "2px 0"], [1, "fa-solid", "fa-cogs"], ["TextField", "text", "ValueField", "value", "name", "agentStatus", 1, "config-field-input", 3, "ngModelChange", "ngModel", "Data", "ValuePrimitive"], ["TextField", "Name", "ValueField", "ID", "name", "agentTypeID", 1, "config-field-input", 3, "ngModelChange", "ngModel", "Data", "ValuePrimitive"], ["SelectionMode", "single", "SelectableTypes", "branch", "Placeholder", "Select a category...", 3, "ValueChange", "BranchConfig", "Value", "Clearable", "EnableSearch"], [1, "fa-solid", "fa-hashtag"], ["FieldName", "ContextCompressionMessageThreshold", "Type", "numerictextbox", "Caption", "", 3, "EditMode", "Record"], [1, "fa-solid", "fa-save"], ["FieldName", "ContextCompressionMessageRetentionCount", "Type", "numerictextbox", "Caption", "", 3, "EditMode", "Record"], [1, "prompt-selector-container"], [1, "prompt-display"], [1, "prompt-name"], [1, "no-prompt"], [1, "prompt-actions"], ["type", "button", "mjButton", "", "variant", "outline", "size", "sm", 1, "prompt-select-btn", 3, "click"], ["type", "button", "mjButton", "", "variant", "flat", "size", "sm", "title", "Clear selection", 1, "prompt-clear-btn"], ["type", "button", "mjButton", "", "variant", "flat", "size", "sm", "title", "Clear selection", 1, "prompt-clear-btn", 3, "click"], [1, "fa-solid", "fa-times"], [3, "Closed", "PermissionsChanged", "Agent"]], template: function MJAIAgentFormComponentExtended_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵconditionalCreate(0, MJAIAgentFormComponentExtended_Conditional_0_Template, 7, 7, "mj-record-form-container", 2);
             i0.ɵɵconditionalCreate(1, MJAIAgentFormComponentExtended_Conditional_1_Template, 1, 1, "mj-agent-permissions-dialog", 3);
@@ -5244,7 +5776,7 @@ export { MJAIAgentFormComponentExtended };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJAIAgentFormComponentExtended, [{
         type: Component,
         args: [{ standalone: false, selector: 'mj-ai-agent-form', template: "@if (record) {\n<mj-record-form-container [Record]=\"record\" [FormComponent]=\"this\"\n    [ToolbarConfig]=\"toolbarConfig\"\n    [WidthMode]=\"'full-width'\"\n    (Navigate)=\"OnFormNavigate($event)\"\n    (DeleteRequested)=\"OnDeleteRequested()\"\n    (FavoriteToggled)=\"OnFavoriteToggled()\"\n    (HistoryRequested)=\"OnHistoryRequested()\"\n    (ListManagementRequested)=\"OnListManagementRequested()\">\n    <form class=\"record-form\" #form=\"ngForm\">\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                  <input type=\"text\" class=\"mj-input agent-name-input\"\n                    [(ngModel)]=\"record.Name\"\n                    name=\"agentName\"\n                    placeholder=\"Enter agent name...\">\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 mjButton variant=\"primary\" size=\"lg\"\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 mjButton size=\"lg\"\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 ? 'var(--mj-status-success)' : null\"></i>\n                  {{ IsOpenToEveryone ? 'Open' : 'Restricted' }}\n                </button>\n              }\n              <button mjButton variant=\"outline\" size=\"sm\" (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 ? 'var(--mj-status-success)' : 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      <!-- The tab strip and every pane depend on the agent's TYPE, which loads asynchronously.\n           Without this the form rendered its header over an empty area for the whole load \u2014\n           no tabs, no designer, and the details pane hidden because no tab was active yet. -->\n      @if (IsFormInitializing) {\n        <div class=\"agent-form-loading\">\n          <mj-loading text=\"Loading agent...\" size=\"medium\"></mj-loading>\n        </div>\n      } @else {\n        <!-- Tabs, not accordions. For an agent type that ships a designer, the diagram IS the agent;\n             leaving it as one collapsed panel among eleven made the record's most important view its\n             least reachable one. Invocations is offered for every agent, because \"what runs this when\n             I'm not looking?\" is a question you can ask of any of them. -->\n        @if (FormTabs.length > 1) {\n          <div class=\"agent-tabbar\">\n            <mj-tab-nav [Tabs]=\"FormTabs\" [ActiveKey]=\"ActiveFormTab || ''\" (TabChange)=\"OnFormTabChange($event)\"></mj-tab-nav>\n          </div>\n        }\n\n        @if (HasDesignerTab) {\n          <!-- Hidden with CSS rather than removed with @if: the designer holds UNSAVED edits, and\n               destroying it on a tab switch would discard them without a word. Keeping it mounted also\n               means the canvas keeps its zoom and node positions across trips to Details. -->\n          <div class=\"agent-pane agent-pane--designer\" [class.agent-pane--hidden]=\"ActiveFormTab !== 'designer'\">\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        }\n\n        @if (record.ID) {\n          <div class=\"agent-pane agent-pane--invocations\" [class.agent-pane--hidden]=\"ActiveFormTab !== 'invocations'\">\n            <mj-agent-invocations\n              [Provider]=\"Provider\"\n              [AgentID]=\"record.ID\"\n              [Active]=\"ActiveFormTab === 'invocations'\"\n              [ExposeAsAction]=\"record.ExposeAsAction\"\n              [ParentAgentName]=\"record.Parent\"\n              [ParentAgentID]=\"record.ParentID\"\n              (RecordOpenRequested)=\"OnInvocationOpenRequested($event)\">\n            </mj-agent-invocations>\n          </div>\n        }\n\n        <!-- Single Pane Layout with Expander Panels -->\n        <div class=\"form-content agent-pane\" [class.agent-pane--hidden]=\"ActiveFormTab !== 'details'\">\n            <!-- Requests & History -->\n            @if (record.ID) {\n              <mj-accordion-panel id=\"history\"\n                [Expanded]=\"GetSectionExpanded('history', false)\"\n                [Disabled]=\"loadingStates.executionHistory\">\n                  <ng-template mjAccordionTitle>\n                      <i class=\"fa-solid fa-history\"></i> Execution History\n                      @if (loadingStates.executionHistory) {\n                          <span><i class=\"fa-solid fa-spinner fa-spin\"></i></span>\n                      } @else if (executionHistoryCount > 0) {\n                          <span> ({{ executionHistoryCount }}@if (executionHistoryCount < totalExecutionHistoryCount) { of {{ totalExecutionHistoryCount }}})</span>\n                      }\n                  </ng-template>\n                  <div class=\"panel-content execution-history-panel\">\n                    <!-- Segmented toggle: agent runs vs. realtime voice sessions -->\n                    @if (UserCanViewSessions) {\n                      <div class=\"history-view-toggle\" role=\"tablist\">\n                        <button type=\"button\" class=\"history-toggle-option\"\n                          [class.active]=\"executionHistoryView === 'runs'\"\n                          (click)=\"setExecutionHistoryView('runs')\">\n                          <i class=\"fa-solid fa-person-running\"></i> Runs\n                          @if (totalExecutionHistoryCount > 0) {\n                            <span class=\"history-toggle-count\">{{ totalExecutionHistoryCount }}</span>\n                          }\n                        </button>\n                        <button type=\"button\" class=\"history-toggle-option\"\n                          [class.active]=\"executionHistoryView === 'sessions'\"\n                          (click)=\"setExecutionHistoryView('sessions')\">\n                          <i class=\"fa-solid fa-tower-broadcast\"></i> Sessions\n                          @if (totalSessionCount > 0) {\n                            <span class=\"history-toggle-count\">{{ totalSessionCount }}</span>\n                          }\n                        </button>\n                      </div>\n                    }\n                    @if (executionHistoryView === 'sessions') {\n                      <!-- Voice/realtime sessions list -->\n                      @if (loadingSessions) {\n                        <mj-loading text=\"Loading sessions...\" size=\"medium\"></mj-loading>\n                      } @else if (agentSessions.length === 0) {\n                        <mj-empty-state\n                          Icon=\"fa-solid fa-tower-broadcast\"\n                          Title=\"No Voice Sessions\"\n                          Message=\"This agent hasn't participated in any realtime voice sessions yet \u2014 neither as the co-agent nor as a delegation target.\"\n                          Size=\"compact\" />\n                      } @else {\n                        <div class=\"execution-history-list\">\n                          @for (item of agentSessions; track item.row.ID) {\n                            <div class=\"execution-card session-card\" (click)=\"openSessionRecord(item.row.ID)\" title=\"Open session\">\n                              <div class=\"execution-header\">\n                                <div class=\"execution-left-section\">\n                                  <div class=\"execution-status\">\n                                    <div class=\"status-indicator\" [style.background-color]=\"getSessionStatusColor(item.row.Status)\">\n                                      <i [class]=\"getSessionStatusIcon(item.row.Status)\"></i>\n                                    </div>\n                                    <div class=\"execution-info\">\n                                      <div class=\"execution-title\">\n                                        Session #{{ item.row.ID.substring(0, 8) }}\n                                        @if (item.isCoAgent) {\n                                          <span class=\"session-role-chip\">as co-agent</span>\n                                        }\n                                        @if (item.isTarget) {\n                                          <span class=\"session-role-chip session-role-chip--target\">as target</span>\n                                        }\n                                      </div>\n                                      <div class=\"execution-date\">{{ item.row.__mj_CreatedAt | date:'MMM d, h:mm a' }}</div>\n                                    </div>\n                                  </div>\n                                  <div class=\"execution-metrics\">\n                                    <div class=\"metric-item\">\n                                      <span class=\"session-status-pill\" [attr.data-status]=\"item.row.Status\">{{ item.row.Status }}</span>\n                                    </div>\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\">{{ formatSessionDuration(item) }}</span>\n                                    </div>\n                                    <div class=\"metric-item\">\n                                      <i class=\"fa-solid fa-plug\"></i>\n                                      <span class=\"metric-label\">Channels:</span>\n                                      <span class=\"metric-value\">{{ item.channelCount }}</span>\n                                    </div>\n                                    @if (item.isCoAgent && item.targetAgentName) {\n                                      <div class=\"metric-item\">\n                                        <i class=\"fa-solid fa-bullseye\"></i>\n                                        <span class=\"metric-label\">Target:</span>\n                                        <span class=\"metric-value\">{{ item.targetAgentName }}</span>\n                                      </div>\n                                    }\n                                    @if (item.isTarget && !item.isCoAgent && item.row.Agent) {\n                                      <div class=\"metric-item\">\n                                        <i class=\"fa-solid fa-tower-broadcast\"></i>\n                                        <span class=\"metric-label\">Co-agent:</span>\n                                        <span class=\"metric-value\">{{ item.row.Agent }}</span>\n                                      </div>\n                                    }\n                                    <div class=\"metric-item\">\n                                      <i class=\"fa-solid fa-user\"></i>\n                                      <span class=\"metric-label\">User:</span>\n                                      <span class=\"metric-value\">{{ item.row.User }}</span>\n                                    </div>\n                                  </div>\n                                </div>\n                                <div class=\"execution-actions\">\n                                  <button class=\"action-btn\" (click)=\"openSessionRecord(item.row.ID); $event.stopPropagation()\" title=\"View session details\">\n                                    <i class=\"fa-solid fa-external-link-alt\"></i>\n                                  </button>\n                                </div>\n                              </div>\n                            </div>\n                          }\n                        </div>\n                      }\n                    } @else {\n                    @if (loadingStates.executionHistory) {\n                      <mj-loading text=\"Loading execution history...\" size=\"medium\"></mj-loading>\n                    } @else if (executionHistoryCount === 0) {\n                      <mj-empty-state\n                        Icon=\"fa-solid fa-clock-rotate-left\"\n                        Title=\"No Execution History\"\n                        Message=\"This agent hasn't been executed yet. Use the Test Agent button to run the agent and see execution history here.\"\n                        Size=\"compact\" />\n                    } @else {\n                      <!-- Search Bar -->\n                      <div class=\"execution-search-bar\">\n                        <div class=\"search-input-wrapper\">\n                          <i class=\"fa-solid fa-search\"></i>\n                          <input type=\"text\" class=\"mj-input\"\n                            [(ngModel)]=\"executionSearchText\"\n                            (ngModelChange)=\"onExecutionSearchChange()\"\n                            [ngModelOptions]=\"{standalone: true}\"\n                            placeholder=\"Search by Run ID...\">\n                        </div>\n                      </div>\n                      <div class=\"execution-history-list\">\n                        @if (filteredExecutions.length === 0) {\n                          <mj-empty-state\n                            Variant=\"no-results\"\n                            Title=\"No Matching Results\"\n                            [Message]=\"ExecutionSearchEmptyMessage\"\n                            Size=\"compact\" />\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 mjButton\n                              variant=\"outline\"\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 mjButton\n                              variant=\"outline\"\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 mjButton\n                              variant=\"flat\"\n                              size=\"sm\"\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                    }\n                  </div>\n              </mj-accordion-panel>\n            }\n            <!-- Actions -->\n            @if (record.ID) {\n              <mj-accordion-panel id=\"actions\"\n                [Expanded]=\"GetSectionExpanded('actions', false)\"\n                [Disabled]=\"loadingStates.actions\">\n                  <ng-template mjAccordionTitle>\n                      <i class=\"fa-solid fa-bolt\"></i> Actions\n                      @if (loadingStates.actions) {\n                          <span><i class=\"fa-solid fa-spinner fa-spin\"></i></span>\n                      } @else if (actionCount > 0) {\n                          <span> ({{ actionCount }})</span>\n                      }\n                  </ng-template>\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 mjButton variant=\"primary\" size=\"sm\" (click)=\"configureActions()\">\n                              <i class=\"fa-solid fa-plus\"></i> Add Action\n                            </button>\n                          }\n                        </div>\n                      </div>\n                      @if (actionCount === 0) {\n                        <mj-empty-state\n                          Icon=\"fa-solid fa-bolt\"\n                          Title=\"No Actions Configured\"\n                          Message=\"Add actions to enable this agent to perform specific tasks and operations.\"\n                          [ActionText]=\"(EditMode && UserCanCreateActions) ? 'Configure First Action' : ''\"\n                          ActionIcon=\"fa-solid fa-plus\"\n                          (Action)=\"configureActions()\"\n                          Size=\"compact\" />\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 mjButton\n                                    variant=\"flat\"\n                                    size=\"sm\"\n                                    (click)=\"removeAction(action, $event)\"\n                                    title=\"Remove action\"\n                                    class=\"error-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              </mj-accordion-panel>\n            }\n            <!-- Sub-Agents (Unified View with Filter) -->\n            @if (record.ID) {\n              <mj-accordion-panel id=\"subagents\"\n                [Expanded]=\"GetSectionExpanded('subagents', false)\"\n                [Disabled]=\"loadingStates.subAgents\">\n                  <ng-template mjAccordionTitle>\n                      <i class=\"fa-solid fa-sitemap\"></i> Sub-Agents\n                      @if (loadingStates.subAgents) {\n                          <span><i class=\"fa-solid fa-spinner fa-spin\"></i></span>\n                      } @else if (totalSubAgentCount > 0) {\n                          <span> ({{ totalSubAgentCount }})</span>\n                      }\n                  </ng-template>\n                  <div class=\"panel-content\">\n                    <!-- Filter Controls -->\n                    <div class=\"section-header sub-agent-filter-header\">\n                      <div class=\"filter-controls\">\n                        <div class=\"mj-button-group\">\n                          <button mjButton\n                            size=\"sm\"\n                            [class.active]=\"subAgentFilter === 'all'\"\n                            (click)=\"setSubAgentFilter('all')\">\n                            <i class=\"fa-solid fa-layer-group\"></i>\n                            All ({{ totalSubAgentCount }})\n                          </button>\n                          <button mjButton\n                            size=\"sm\"\n                            [class.active]=\"subAgentFilter === 'child'\"\n                            (click)=\"setSubAgentFilter('child')\">\n                            <i class=\"fa-solid fa-link\"></i>\n                            Child ({{ childSubAgentCount }})\n                          </button>\n                          <button mjButton\n                            size=\"sm\"\n                            [class.active]=\"subAgentFilter === 'related'\"\n                            (click)=\"setSubAgentFilter('related')\">\n                            <i class=\"fa-solid fa-share-nodes\"></i>\n                            Related ({{ relatedSubAgentCount }})\n                          </button>\n                        </div>\n                      </div>\n                      <div class=\"header-actions\">\n                        @if (EditMode && UserCanCreateSubAgents) {\n                          <button mjButton\n                            variant=\"primary\"\n                            size=\"sm\"\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 mjButton\n                            size=\"sm\"\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                      <mj-empty-state\n                        Icon=\"fa-solid fa-sitemap\"\n                        Title=\"No Sub-Agents\"\n                        Message=\"Sub-agents help build complex workflows through hierarchical orchestration.\"\n                        Size=\"compact\">\n                        <div class=\"empty-state-info\">\n                          <div class=\"info-card\">\n                            <i class=\"fa-solid fa-link\" style=\"color: var(--mj-status-info);\"></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: var(--mj-brand-primary);\"></i>\n                            <strong>Related Sub-Agents</strong>\n                            <p>Reusable agents with payload mapping</p>\n                          </div>\n                        </div>\n                      </mj-empty-state>\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 mjButton\n                                    variant=\"flat\"\n                                    size=\"sm\"\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 mjButton\n                                    variant=\"flat\"\n                                    size=\"sm\"\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 mjButton\n                                    variant=\"flat\"\n                                    size=\"sm\"\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                                    class=\"error-action\">\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              </mj-accordion-panel>\n            }\n            <!-- Prompts (With Model Selection) -->\n            @if (record.ID) {\n              <mj-accordion-panel id=\"prompts\"\n                [Expanded]=\"GetSectionExpanded('prompts', false)\"\n                [Disabled]=\"loadingStates.prompts\">\n                  <ng-template mjAccordionTitle>\n                      <i class=\"fa-solid fa-comments\"></i> Prompts\n                      @if (loadingStates.prompts) {\n                          <span><i class=\"fa-solid fa-spinner fa-spin\"></i></span>\n                      } @else if (promptCount > 0) {\n                          <span> ({{ promptCount }})</span>\n                      }\n                  </ng-template>\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                            <mj-dropdown\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                            </mj-dropdown>\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 mjButton variant=\"primary\" size=\"sm\" (click)=\"addPrompt()\">\n                            <i class=\"fa-solid fa-plus\"></i> Add Prompt\n                          </button>\n                        }\n                      </div>\n                    </div>\n                    @if (promptCount === 0) {\n                      <mj-empty-state\n                        Icon=\"fa-solid fa-comments\"\n                        Title=\"No Prompts Configured\"\n                        Message=\"Add prompts to define how this agent processes requests and generates responses.\"\n                        [ActionText]=\"(EditMode && UserCanCreateNewPrompts) ? 'Create First Prompt' : ''\"\n                        ActionIcon=\"fa-solid fa-plus\"\n                        (Action)=\"addPrompt()\"\n                        Size=\"compact\" />\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 mjButton\n                                  variant=\"flat\"\n                                  size=\"sm\"\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 mjButton\n                                  variant=\"flat\"\n                                  size=\"sm\"\n                                  (click)=\"removePrompt(prompt, $event)\"\n                                  title=\"Remove prompt\"\n                                  class=\"error-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 (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              </mj-accordion-panel>\n            }\n            <!-- Learning & Analytics -->\n            @if (record.ID) {\n              <mj-accordion-panel id=\"learning\"\n                [Expanded]=\"GetSectionExpanded('learning', false)\"\n                [Disabled]=\"loadingStates.learningCycles\">\n                  <ng-template mjAccordionTitle>\n                      <i class=\"fa-solid fa-brain\"></i> Learning Cycles\n                      @if (loadingStates.learningCycles) {\n                          <span><i class=\"fa-solid fa-spinner fa-spin\"></i></span>\n                      } @else if (learningCycleCount > 0) {\n                          <span> ({{ learningCycleCount }})</span>\n                      }\n                  </ng-template>\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                      <mj-empty-state\n                        Icon=\"fa-solid fa-brain\"\n                        Title=\"No Learning Cycles\"\n                        Message=\"Learning cycles will appear here as the agent processes requests and improves over time.\"\n                        Size=\"compact\" />\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              </mj-accordion-panel>\n            }\n            <!-- Notes & Documentation -->\n            @if (record.ID) {\n              <mj-accordion-panel id=\"notes\"\n                [Expanded]=\"GetSectionExpanded('notes', false)\"\n                [Disabled]=\"loadingStates.notes\">\n                  <ng-template mjAccordionTitle>\n                      <i class=\"fa-solid fa-sticky-note\"></i> Notes\n                      @if (loadingStates.notes) {\n                          <span><i class=\"fa-solid fa-spinner fa-spin\"></i></span>\n                      } @else if (noteCount > 0) {\n                          <span> ({{ noteCount }})</span>\n                      }\n                  </ng-template>\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 mjButton variant=\"primary\" size=\"sm\" (click)=\"addNote()\">\n                            <i class=\"fa-solid fa-plus\"></i> Add Note\n                          </button>\n                        }\n                      </div>\n                    </div>\n                    @if (noteCount === 0) {\n                      <mj-empty-state\n                        Icon=\"fa-solid fa-sticky-note\"\n                        Title=\"No Notes\"\n                        Message=\"Add notes to document important information, observations, or instructions for this agent.\"\n                        [ActionText]=\"(EditMode && UserCanCreateNotes) ? 'Create First Note' : ''\"\n                        ActionIcon=\"fa-solid fa-plus\"\n                        (Action)=\"addNote()\"\n                        Size=\"compact\" />\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              </mj-accordion-panel>\n            }\n            <!-- Search -->\n            @if (record.ID) {\n              <mj-accordion-panel id=\"search\"\n                [Expanded]=\"GetSectionExpanded('search', false)\">\n                  <ng-template mjAccordionTitle>\n                      <i class=\"fa-solid fa-magnifying-glass\"></i> Search\n                  </ng-template>\n                  <div class=\"panel-content\">\n                    <div class=\"section-header\">\n                      <div class=\"section-description\">\n                        Control this agent's access to <strong>Scoped Search</strong> and assign the scopes it can use for pre-execution RAG or agent-invoked search.\n                      </div>\n                    </div>\n\n                    <!-- Scope Access mode -->\n                    <div class=\"agent-search-access\">\n                      <label class=\"agent-search-access-option\" [class.active]=\"record.SearchScopeAccess === 'All'\">\n                        <input type=\"radio\" name=\"SearchScopeAccess\" value=\"All\" [checked]=\"record.SearchScopeAccess === 'All'\" [disabled]=\"!EditMode\" (change)=\"record.SearchScopeAccess = 'All'\">\n                        <i class=\"fa-solid fa-globe\"></i>\n                        <div class=\"agent-search-access-text\">\n                          <div class=\"agent-search-access-title\">All</div>\n                          <div class=\"agent-search-access-desc\">Can use any scope including Global. No scope restriction.</div>\n                        </div>\n                      </label>\n                      <label class=\"agent-search-access-option\" [class.active]=\"record.SearchScopeAccess === 'Assigned'\">\n                        <input type=\"radio\" name=\"SearchScopeAccess\" value=\"Assigned\" [checked]=\"record.SearchScopeAccess === 'Assigned'\" [disabled]=\"!EditMode\" (change)=\"record.SearchScopeAccess = 'Assigned'\">\n                        <i class=\"fa-solid fa-user-check\"></i>\n                        <div class=\"agent-search-access-text\">\n                          <div class=\"agent-search-access-title\">Assigned</div>\n                          <div class=\"agent-search-access-desc\">Can use ONLY scopes listed below. Other scopes are rejected with ACCESS_DENIED.</div>\n                        </div>\n                      </label>\n                      <label class=\"agent-search-access-option\" [class.active]=\"record.SearchScopeAccess === 'None'\">\n                        <input type=\"radio\" name=\"SearchScopeAccess\" value=\"None\" [checked]=\"record.SearchScopeAccess === 'None'\" [disabled]=\"!EditMode\" (change)=\"record.SearchScopeAccess = 'None'\">\n                        <i class=\"fa-solid fa-ban\"></i>\n                        <div class=\"agent-search-access-text\">\n                          <div class=\"agent-search-access-title\">None</div>\n                          <div class=\"agent-search-access-desc\">No search capability. The Scoped Search action is disabled for this agent.</div>\n                        </div>\n                      </label>\n                    </div>\n\n                    <!-- Assigned scopes grid -->\n                    @if (record.SearchScopeAccess !== 'None') {\n                      <div class=\"agent-search-grid-header\">\n                        <h4>Assigned Scopes</h4>\n                        <p class=\"section-description\">\n                          <strong>Pre-Execution</strong> scopes are injected automatically before the first LLM call.\n                          <strong>Agent-Invoked</strong> scopes are callable via the Scoped Search tool during execution.\n                          <strong>Both</strong> covers both paths.\n                        </p>\n                      </div>\n                      <mj-search-scope-child-grid\n                        [ParentID]=\"record.ID\"\n                        ChildEntityName=\"MJ: AI Agent Search Scopes\"\n                        ParentFieldName=\"AgentID\"\n                        [Columns]=\"AgentSearchScopeColumns\"\n                        [Disabled]=\"!EditMode\"\n                        AddButtonLabel=\"+ Assign another scope\"\n                        EmptyMessage=\"No scopes assigned yet. Assign at least one if this agent will use Scoped Search.\"\n                        (RowsChanged)=\"LoadPermissionSummary()\">\n                      </mj-search-scope-child-grid>\n\n                      <!-- Phase 2A: read-only audit summary of who has\n                           permission on each of this agent's assigned scopes.\n                           Editing happens in the Knowledge Hub Config dashboard\n                           (see \"Permissions\" subtab under Search Scopes). -->\n                      <div class=\"agent-search-section\" style=\"margin-top: 16px;\">\n                        <h4 style=\"margin: 0 0 8px 0;\">\n                          <i class=\"fa-solid fa-shield-halved\"></i> Effective scope permissions\n                        </h4>\n                        <p class=\"section-description\" style=\"margin-bottom: 8px;\">\n                          Per-user / per-role grants on the scopes assigned above. Edit grants in\n                          <strong>Knowledge Hub Config &rarr; Search Scopes &rarr; Permissions</strong>.\n                        </p>\n                        @if (IsLoadingPermissions) {\n                          <div style=\"color: var(--mj-text-muted);\">Loading permissions&hellip;</div>\n                        } @else if (PermissionSummary.length === 0) {\n                          <div style=\"color: var(--mj-text-muted); font-style: italic;\">\n                            No scopes assigned yet \u2014 permissions will appear here once you add scopes above.\n                          </div>\n                        } @else {\n                          @for (s of PermissionSummary; track s.ScopeID) {\n                            <div style=\"margin-bottom: 12px; padding: 8px 12px; background: var(--mj-bg-surface-card); border: 1px solid var(--mj-border-subtle); border-radius: 4px;\">\n                              <div style=\"font-weight: 600; margin-bottom: 4px;\">{{ s.ScopeName }}</div>\n                              @if (s.Permissions.length === 0) {\n                                <div style=\"color: var(--mj-text-muted); font-size: 0.9em;\">\n                                  No explicit permissions. Access falls back to this agent's <code>SearchScopeAccess</code> setting.\n                                </div>\n                              } @else {\n                                <ul style=\"margin: 4px 0 0 16px; padding: 0;\">\n                                  @for (p of s.Permissions; track p.Principal + p.Level) {\n                                    <li style=\"font-size: 0.9em; padding: 2px 0;\">\n                                      <i class=\"fa-solid\" [class.fa-user]=\"p.PrincipalType === 'User'\" [class.fa-users]=\"p.PrincipalType === 'Role'\"></i>\n                                      <strong>{{ p.Principal }}</strong>\n                                      <span style=\"color: var(--mj-text-muted);\">({{ p.PrincipalType }})</span>\n                                      &mdash; <span [style.color]=\"p.Level === 'None' ? 'var(--mj-status-error-text)' : 'var(--mj-text-primary)'\">{{ p.Level }}</span>\n                                    </li>\n                                  }\n                                </ul>\n                              }\n                            </div>\n                          }\n                        }\n                      </div>\n                    }\n                  </div>\n              </mj-accordion-panel>\n            }\n            <!-- Payload -->\n            <mj-accordion-panel id=\"payload\"\n              [Expanded]=\"GetSectionExpanded('payload', false)\">\n                <ng-template mjAccordionTitle>\n                    <i class=\"fa-solid fa-exchange-alt\"></i> Payload Management\n                </ng-template>\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            </mj-accordion-panel>\n            <!-- Execution Guardrails (New Separate Panel) -->\n            <mj-accordion-panel id=\"guardrails\"\n              [Expanded]=\"GetSectionExpanded('guardrails', false)\">\n                <ng-template mjAccordionTitle>\n                    <i class=\"fa-solid fa-shield-halved\"></i> Execution Guardrails\n                </ng-template>\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            </mj-accordion-panel>\n            <!-- Configuration (Settings Panel) -->\n            <mj-accordion-panel id=\"config\"\n              [Expanded]=\"GetSectionExpanded('config', false)\">\n                <ng-template mjAccordionTitle>\n                    <i class=\"fa-solid fa-cogs\"></i> Configuration\n                </ng-template>\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                            <mj-dropdown\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                            </mj-dropdown>\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                            <mj-dropdown\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                            </mj-dropdown>\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-folder-tree\"></i>\n                          </div>\n                          <div class=\"config-card-info\">\n                            <h4>Category</h4>\n                            <p>Organizational category for this agent</p>\n                          </div>\n                        </div>\n                        <div class=\"config-card-content\">\n                          @if (EditMode) {\n                            <mj-tree-dropdown\n                              [BranchConfig]=\"CategoryBranchConfig\"\n                              [Value]=\"SelectedCategoryKey\"\n                              SelectionMode=\"single\"\n                              SelectableTypes=\"branch\"\n                              Placeholder=\"Select a category...\"\n                              [Clearable]=\"true\"\n                              [EnableSearch]=\"true\"\n                              (ValueChange)=\"OnCategoryChange($event)\">\n                            </mj-tree-dropdown>\n                          } @else {\n                            <span class=\"config-field-display\">{{ record.Category || '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                                    mjButton\n                                    variant=\"outline\"\n                                    size=\"sm\"\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                                      mjButton\n                                      variant=\"flat\"\n                                      size=\"sm\"\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            </mj-accordion-panel>\n        </div>\n      }\n    </form>\n</mj-record-form-container>\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}", styles: ["/* AI Agent Form - Modern Redesign */\n.record-form-container {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    background: var(--mj-bg-page);\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: var(--mj-bg-surface);\n    border-bottom: 1px solid var(--mj-border-default);\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 var(--mj-border-default);\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: var(--mj-text-disabled);\n    flex-shrink: 0;\n    padding: 0;\n    transition: all 0.15s ease;\n}\n\n.agent-header-toggle:hover {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n    border-color: var(--mj-border-strong);\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: var(--mj-brand-primary);\n    border-radius: 8px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n    flex-shrink: 0;\n    transition: all 0.2s ease;\n}\n\n.agent-icon-wrapper i {\n    color: var(--mj-text-inverse);\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: var(--mj-bg-surface);\n    border-bottom: 1px solid var(--mj-border-default);\n    height: 32px;\n}\n\n.agent-header-mini-expand {\n    background: none;\n    border: 1px solid var(--mj-border-default);\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: var(--mj-text-disabled);\n    padding: 0;\n    flex-shrink: 0;\n    transition: all 0.15s ease;\n}\n\n.agent-header-mini-expand:hover {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n    border-color: var(--mj-border-strong);\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: var(--mj-text-secondary);\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: var(--mj-text-inverse);\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 var(--mj-border-default);\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: var(--mj-text-muted);\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: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n    border-color: var(--mj-border-strong);\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: color-mix(in srgb, var(--mj-brand-primary) 40%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n.agent-header-mini-btn--primary:hover:not(:disabled) {\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    border-color: color-mix(in srgb, var(--mj-brand-primary) 50%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\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: var(--mj-text-primary);\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: var(--mj-status-success);\n    color: var(--mj-text-inverse);\n}\n\n.status-badge.pending {\n    background: var(--mj-status-warning);\n    color: var(--mj-text-primary);\n}\n\n.status-badge.disabled {\n    background: var(--mj-text-muted);\n    color: var(--mj-text-inverse);\n}\n\n.execution-mode,\n.parent-agent {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 13px;\n    color: var(--mj-text-muted);\n    background: var(--mj-bg-surface-card);\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: var(--mj-border-default);\n    color: var(--mj-brand-primary);\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: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.meta-value {\n    font-size: 14px;\n    color: var(--mj-text-secondary);\n    font-weight: 500;\n}\n\n.agent-description {\n    margin-top: 16px;\n    color: var(--mj-text-muted);\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: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n}\n\n.action-button.primary:hover {\n    background: var(--mj-brand-primary-hover);\n}\n\n.action-button.secondary {\n    background: var(--mj-text-muted);\n    color: var(--mj-text-inverse);\n}\n\n.action-button.secondary:hover {\n    background: var(--mj-text-secondary);\n}\n\n.action-warnings {\n    margin-top: 8px;\n    font-size: 13px;\n    color: var(--mj-status-error);\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: var(--mj-bg-page);\n    padding: 8px 12px;\n}\n\n/* Panel Content */\n.panel-content {\n    padding: 16px;\n    background: var(--mj-bg-surface);\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: var(--mj-text-muted);\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: var(--mj-bg-surface);\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 var(--mj-border-default);\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 var(--mj-bg-surface-sunken);\n}\n\n.section-title {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin: 0;\n    color: var(--mj-text-primary);\n    font-size: 18px;\n    font-weight: 600;\n}\n\n.section-title i {\n    color: var(--mj-brand-primary);\n    font-size: 20px;\n}\n\n.section-description {\n    color: var(--mj-text-muted);\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: var(--mj-text-secondary);\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 var(--mj-border-default);\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: var(--mj-text-muted);\n}\n\n.loading-state i {\n    font-size: 36px;\n    color: var(--mj-brand-primary);\n    margin-bottom: 16px;\n    display: block;\n}\n\n.loading-state p {\n    margin: 0;\n    font-size: 14px;\n    color: var(--mj-text-disabled);\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: color-mix(in srgb, var(--mj-bg-surface) 90%, transparent);\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 var(--mj-bg-surface-sunken);\n    border-top: 4px solid var(--mj-brand-primary);\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 var(--mj-border-default);\n}\n\n.quick-action-card {\n    flex: 1;\n    padding: 16px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 8px;\n    border: 1px solid var(--mj-border-default);\n    cursor: pointer;\n    transition: all 0.2s ease;\n    text-align: center;\n}\n\n.quick-action-card:hover {\n    background: var(--mj-bg-surface);\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: var(--mj-brand-primary);\n    margin-bottom: 8px;\n}\n\n.quick-action-title {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    margin-bottom: 4px;\n}\n\n.quick-action-description {\n    font-size: 12px;\n    color: var(--mj-text-muted);\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: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 10px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.entity-item:hover {\n    background: var(--mj-bg-surface);\n    border-color: var(--mj-brand-primary);\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: var(--mj-bg-surface-sunken);\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: var(--mj-status-success);\n}\n\n.action-item .item-icon {\n    background: var(--mj-status-warning);\n}\n\n.sub-agent-item .item-icon {\n    background: var(--mj-brand-primary);\n}\n\n.model-item .item-icon {\n    background: var(--mj-brand-primary);\n}\n\n.learning-item .item-icon {\n    background: var(--mj-status-error);\n}\n\n.note-item .item-icon {\n    background: var(--mj-status-warning);\n}\n\n.item-icon i {\n    color: var(--mj-text-muted);\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: var(--mj-text-inverse);\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: var(--mj-text-primary);\n    margin: 0 0 4px 0;\n    line-height: 1.3;\n}\n\n.item-preview {\n    color: var(--mj-text-muted);\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: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n}\n\n.priority-tag {\n    color: var(--mj-text-inverse);\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n}\n\n.status-tag {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n}\n\n.status-tag.active {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.status-tag.inactive {\n    background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n    color: var(--mj-status-error);\n}\n\n.item-actions {\n    opacity: 0;\n    transition: opacity 0.2s ease;\n    color: var(--mj-text-muted);\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: var(--mj-brand-primary);\n}\n\n.view-more-item {\n    padding: 16px;\n    background: var(--mj-bg-surface-card);\n    border: 2px dashed var(--mj-border-default);\n    border-radius: 10px;\n    text-align: center;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    color: var(--mj-text-muted);\n    font-weight: 500;\n}\n\n.view-more-item:hover {\n    background: var(--mj-bg-surface-sunken);\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-primary);\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: var(--mj-bg-surface-card);\n    border-radius: 10px;\n    border: 1px solid var(--mj-border-default);\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: var(--mj-text-secondary);\n    min-width: 200px;\n    text-align: center;\n}\n\n.page-info .record-count {\n    font-size: 12px;\n    color: var(--mj-text-muted);\n    font-weight: normal;\n}\n\n.page-info .fa-spinner {\n    margin-right: 8px;\n    color: var(--mj-brand-primary);\n}\n\n.view-all-btn {\n    color: var(--mj-text-muted);\n    white-space: nowrap;\n    margin-left: auto;\n}\n\n.view-all-btn:hover {\n    color: var(--mj-brand-primary);\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: var(--mj-text-primary);\n    margin: 0 0 16px 0;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.subsection-title i {\n    color: var(--mj-brand-primary);\n}\n\n.subsection-divider {\n    margin-top: 32px;\n    margin-bottom: 16px;\n    padding-top: 24px;\n    border-top: 1px solid var(--mj-border-default);\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: var(--mj-text-secondary);\n    margin-bottom: 8px;\n}\n\n.payload-field-label i {\n    color: var(--mj-text-muted);\n    font-size: 16px;\n}\n\n.field-description {\n    font-size: 12px;\n    font-weight: normal;\n    color: var(--mj-text-muted);\n    margin-left: auto;\n}\n\n/* Code editor styling */\n.payload-field-group mj-code-editor {\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    overflow: hidden;\n}\n\n.payload-field-group mj-code-editor:hover {\n    border-color: var(--mj-brand-primary);\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: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 10px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.timeline-item:hover {\n    background: var(--mj-bg-surface);\n    border-color: var(--mj-brand-primary);\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: var(--mj-text-inverse);\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: var(--mj-text-primary);\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: var(--mj-text-muted);\n    background: var(--mj-bg-surface-sunken);\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: var(--mj-text-muted);\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: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\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: var(--mj-brand-primary);\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: var(--mj-brand-primary);\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: var(--mj-bg-surface-sunken);\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: var(--mj-brand-primary);\n}\n\n.prompt-card .card-icon {\n    background: var(--mj-status-success);\n}\n\n.action-card .card-icon {\n    background: var(--mj-status-warning);\n}\n\n.card-icon i {\n    font-size: 18px;\n    color: var(--mj-text-muted);\n}\n\n.sub-agent-card .card-icon i,\n.prompt-card .card-icon i,\n.action-card .card-icon i {\n    color: var(--mj-text-inverse);\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: var(--mj-text-primary);\n    margin: 0 0 4px 0;\n    line-height: 1.3;\n    word-wrap: break-word;\n}\n\n.card-description {\n    color: var(--mj-text-muted);\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: var(--mj-text-muted);\n    padding: 4px 8px;\n    background: var(--mj-bg-surface-card);\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: var(--mj-status-success);\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n}\n\n.meta-item.inactive {\n    color: var(--mj-status-error);\n    background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n}\n\n.card-actions {\n    opacity: 0;\n    transition: opacity 0.3s ease;\n    color: var(--mj-text-muted);\n}\n\n.entity-card:hover .card-actions {\n    opacity: 1;\n    color: var(--mj-brand-primary);\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: var(--mj-text-inverse);\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: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n}\n\n/* View All Card */\n.view-all-card {\n    background: var(--mj-bg-surface-card);\n    border: 2px dashed var(--mj-border-default);\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: var(--mj-bg-surface-sunken);\n    border-color: var(--mj-brand-primary);\n    transform: translateY(-2px);\n}\n\n.view-all-content {\n    text-align: center;\n    color: var(--mj-text-muted);\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: var(--mj-bg-surface-card);\n    border-color: var(--mj-border-default);\n}\n\n.timeline-item.expanded {\n    background: var(--mj-bg-surface-card);\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.timeline-item.view-all {\n    cursor: pointer;\n    background: var(--mj-bg-surface-card);\n    border: 2px dashed var(--mj-border-default);\n}\n\n.timeline-item.view-all:hover {\n    background: var(--mj-bg-surface-sunken);\n    border-color: var(--mj-brand-primary);\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: var(--mj-border-default);\n}\n\n.timeline-item:last-child .timeline-marker::after {\n    display: none;\n}\n\n.timeline-marker i {\n    color: var(--mj-text-inverse);\n    font-size: 16px;\n}\n\n.timeline-marker.view-all-marker {\n    background: var(--mj-text-muted);\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: var(--mj-text-muted);\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: var(--mj-text-primary);\n    margin: 0;\n    line-height: 1.3;\n}\n\n.timeline-date {\n    font-size: 12px;\n    color: var(--mj-text-muted);\n    white-space: nowrap;\n    background: var(--mj-bg-surface-card);\n    padding: 4px 8px;\n    border-radius: 6px;\n    margin-left: auto;\n}\n\n.timeline-preview {\n    font-size: 13px;\n    color: var(--mj-text-muted);\n    line-height: 1.5;\n    margin-top: 8px;\n    padding: 8px 12px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 6px;\n    border: 1px solid var(--mj-border-default);\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: var(--mj-text-muted);\n    background: var(--mj-bg-surface-card);\n    padding: 4px 8px;\n    border-radius: 6px;\n}\n\n.timeline-description {\n    color: var(--mj-text-muted);\n    font-size: 14px;\n    line-height: 1.5;\n    margin: 8px 0;\n}\n\n.timeline-error {\n    color: var(--mj-status-error);\n    font-size: 13px;\n    background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\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 var(--mj-border-default);\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: var(--mj-text-secondary);\n    margin-bottom: 8px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.error-section h5 {\n    color: var(--mj-status-error);\n}\n\n.result-content,\n.error-content {\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    padding: 12px 16px;\n    font-size: 14px;\n    line-height: 1.6;\n    color: var(--mj-text-secondary);\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 var(--mj-border-default);\n    border-radius: 8px;\n    overflow: hidden;\n}\n\n.error-content {\n    background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n    border-color: color-mix(in srgb, var(--mj-status-error) 20%, var(--mj-bg-surface));\n    color: var(--mj-status-error);\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: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    min-width: 80px;\n}\n\n.detail-value {\n    font-size: 14px;\n    color: var(--mj-text-secondary);\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: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\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: var(--mj-brand-primary-hover);\n    transform: translateY(-1px);\n    box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.btn-primary i {\n    font-size: 12px;\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: var(--mj-bg-surface-sunken);\n    border-radius: 4px;\n}\n\n.execution-history-panel::-webkit-scrollbar-thumb {\n    background: var(--mj-border-strong);\n    border-radius: 4px;\n}\n\n.execution-history-panel::-webkit-scrollbar-thumb:hover {\n    background: var(--mj-text-disabled);\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 .fa-search {\n    color: var(--mj-text-secondary);\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: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\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: var(--mj-brand-primary);\n    box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    transform: translateY(-1px);\n}\n\n.execution-card.expanded {\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 6px 20px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\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: var(--mj-text-inverse);\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: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.execution-date {\n    font-size: 12px;\n    color: var(--mj-text-muted);\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: var(--mj-bg-surface-card);\n    padding: 6px 10px;\n    border-radius: 6px;\n    color: var(--mj-text-secondary);\n    white-space: nowrap;\n}\n\n.metric-item i {\n    color: var(--mj-text-muted);\n    font-size: 12px;\n}\n\n.metric-label {\n    font-weight: 500;\n}\n\n.metric-value {\n    font-weight: 600;\n    color: var(--mj-text-primary);\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: var(--mj-bg-surface-card);\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: var(--mj-text-muted);\n}\n\n.action-btn:hover {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\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: var(--mj-text-muted);\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 var(--mj-bg-surface-sunken);\n    background: var(--mj-bg-surface-card);\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: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n}\n\n.metric-detail i {\n    color: var(--mj-brand-primary);\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: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.metric-data {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\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: var(--mj-text-secondary);\n    margin-bottom: 8px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.error-section h5 {\n    color: var(--mj-status-error);\n}\n\n.error-content {\n    background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n    border: 1px solid color-mix(in srgb, var(--mj-status-error) 20%, var(--mj-bg-surface));\n    border-radius: 8px;\n    padding: 12px 16px;\n    font-size: 14px;\n    line-height: 1.6;\n    color: var(--mj-status-error);\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: var(--mj-bg-surface);\n    border-radius: 12px;\n    border: 1px solid var(--mj-border-default);\n    overflow: hidden;\n}\n\n.payload-section-title {\n    margin: 0;\n    padding: 1rem 1.5rem;\n    background: var(--mj-bg-surface-card);\n    border-bottom: 1px solid var(--mj-border-default);\n    color: var(--mj-text-secondary);\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: var(--mj-brand-primary);\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: var(--mj-text-secondary);\n    font-size: 0.95rem;\n}\n\n.payload-field-description {\n    color: var(--mj-text-muted);\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: var(--mj-text-muted);\n    background: var(--mj-bg-surface-card);\n    padding: 0.5rem 0.75rem;\n    border-radius: 6px;\n    border: 1px solid var(--mj-bg-surface-sunken);\n}\n\n.payload-field-example i {\n    color: var(--mj-status-warning);\n    font-size: 0.9rem;\n}\n\n.payload-field-example code {\n    background: var(--mj-bg-surface-sunken);\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: var(--mj-text-secondary);\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: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    overflow: hidden;\n    transition: all 0.2s ease;\n}\n\n.payload-path-card:hover {\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.payload-path-header {\n    display: flex;\n    align-items: center;\n    gap: 1rem;\n    padding: 1rem;\n    background: var(--mj-bg-surface-card);\n    border-bottom: 1px solid var(--mj-border-default);\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: var(--mj-status-success);\n}\n\n.payload-path-icon.upstream {\n    background: var(--mj-brand-primary);\n}\n\n.payload-path-icon.self-read {\n    background: var(--mj-brand-primary);\n}\n\n.payload-path-icon.self-write {\n    background: var(--mj-status-warning);\n}\n\n.payload-path-icon i {\n    color: var(--mj-text-inverse);\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: var(--mj-text-secondary);\n}\n\n.payload-path-info p {\n    margin: 0;\n    font-size: 0.85rem;\n    color: var(--mj-text-muted);\n    line-height: 1.4;\n}\n\n.payload-path-content {\n    padding: 1rem;\n}\n\n.json-editor-container {\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    overflow: hidden;\n    margin-bottom: 0.75rem;\n}\n\n.json-editor-container:hover {\n    border-color: var(--mj-brand-primary);\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: var(--mj-text-muted);\n    line-height: 1.4;\n}\n\n.payload-path-hint i {\n    color: var(--mj-brand-primary);\n    margin-top: 0.1rem;\n    flex-shrink: 0;\n}\n\n.payload-path-hint code {\n    background: var(--mj-bg-surface-sunken);\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: var(--mj-text-secondary);\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: var(--mj-text-secondary);\n    font-size: 0.95rem;\n}\n\n.validation-field-description {\n    color: var(--mj-text-muted);\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: var(--mj-text-secondary);\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: var(--mj-brand-primary);\n}\n\n.validation-schema-description {\n    color: var(--mj-text-muted);\n    font-size: 0.9rem;\n    line-height: 1.4;\n    margin: 0;\n}\n\n.validation-schema-editor {\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    overflow: hidden;\n}\n\n.validation-schema-editor:hover {\n    border-color: var(--mj-brand-primary);\n}\n\n/* === CONFIGURATION SECTION === */\n.config-section {\n    margin-bottom: 2rem;\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    border: 1px solid var(--mj-border-default);\n    overflow: hidden;\n}\n\n.config-section-title {\n    margin: 0;\n    padding: 1rem 1.5rem;\n    background: var(--mj-bg-surface-card);\n    border-bottom: 1px solid var(--mj-border-default);\n    color: var(--mj-text-secondary);\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: var(--mj-brand-primary);\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: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    overflow: hidden;\n    transition: all 0.2s ease;\n}\n\n.config-card:hover {\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\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: var(--mj-bg-surface-card);\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.config-card-icon {\n    width: 40px;\n    height: 40px;\n    border-radius: 8px;\n    background: var(--mj-brand-primary);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n}\n\n.config-card-icon i {\n    color: var(--mj-text-inverse);\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: var(--mj-text-secondary);\n}\n\n.config-card-info p {\n    margin: 0;\n    font-size: 0.85rem;\n    color: var(--mj-text-muted);\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.config-card-content ::ng-deep mj-form-field {\n    width: 100% !important;\n}\n\n.config-field-display {\n    color: var(--mj-text-secondary);\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: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n}\n\n.prompt-name {\n    color: var(--mj-text-secondary);\n    font-weight: 500;\n    font-size: 14px;\n}\n\n.no-prompt {\n    color: var(--mj-text-muted);\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: var(--mj-text-muted);\n    line-height: 1.4;\n    margin-top: 0.5rem;\n}\n\n.config-card-hint i {\n    color: var(--mj-brand-primary);\n    margin-top: 0.1rem;\n    flex-shrink: 0;\n}\n\n.config-card-hint code {\n    background: var(--mj-bg-surface-sunken);\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: var(--mj-text-secondary);\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/* 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: var(--mj-text-inverse);\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 var(--mj-brand-primary);\n}\n\n.sub-agent-item.related-sub-agent {\n    border-left: 4px solid var(--mj-brand-primary);\n}\n\n.sub-agent-item:hover {\n    transform: translateX(4px);\n}\n\n/* Payload Info Tag */\n.payload-info {\n    background: var(--mj-bg-surface-card);\n    color: var(--mj-text-secondary);\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: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\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: var(--mj-text-secondary);\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\n/* ===== Search Scope Access (mockup #5) ===== */\n.agent-search-access {\n    display: grid;\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n    gap: 12px;\n    margin: 8px 0 20px;\n}\n\n.agent-search-access-option {\n    display: grid;\n    grid-template-columns: 24px 28px 1fr;\n    align-items: start;\n    gap: 10px;\n    padding: 14px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    background: var(--mj-bg-surface);\n    cursor: pointer;\n    transition: background 120ms ease, border-color 120ms ease;\n}\n\n.agent-search-access-option:hover {\n    background: var(--mj-bg-surface-hover);\n    border-color: var(--mj-border-strong);\n}\n\n.agent-search-access-option.active {\n    border-color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n.agent-search-access-option input[type=\"radio\"] {\n    accent-color: var(--mj-brand-primary);\n    margin-top: 2px;\n}\n\n.agent-search-access-option > i {\n    font-size: 20px;\n    color: var(--mj-brand-primary);\n    text-align: center;\n    margin-top: 2px;\n}\n\n.agent-search-access-text {\n    min-width: 0;\n}\n\n.agent-search-access-title {\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    font-size: 0.9rem;\n}\n\n.agent-search-access-desc {\n    font-size: 0.8rem;\n    color: var(--mj-text-secondary);\n    margin-top: 2px;\n    line-height: 1.3;\n}\n\n.agent-search-grid-header {\n    margin: 8px 0 12px;\n}\n\n.agent-search-grid-header h4 {\n    margin: 0 0 4px;\n    color: var(--mj-text-primary);\n    font-size: 1rem;\n    font-weight: 600;\n}\n\n@media (max-width: 768px) {\n    .agent-search-access {\n        grid-template-columns: 1fr;\n    }\n}\n\n/* \u2500\u2500 Execution History: Runs | Sessions segmented toggle \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.history-view-toggle {\n    display: inline-flex;\n    gap: 2px;\n    background: var(--mj-bg-surface-sunken);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 10px;\n    padding: 3px;\n    margin-bottom: 14px;\n}\n\n.history-toggle-option {\n    display: inline-flex;\n    align-items: center;\n    gap: 7px;\n    padding: 6px 16px;\n    border: none;\n    border-radius: 8px;\n    background: transparent;\n    color: var(--mj-text-muted);\n    font-size: 13px;\n    font-weight: 600;\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.history-toggle-option:hover {\n    color: var(--mj-text-secondary);\n}\n\n.history-toggle-option.active {\n    background: var(--mj-bg-surface);\n    color: var(--mj-brand-primary);\n    box-shadow: var(--mj-shadow-sm);\n}\n\n.history-toggle-count {\n    font-size: 11px;\n    font-weight: 600;\n    padding: 1px 7px;\n    border-radius: 10px;\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-subtle);\n    color: var(--mj-text-secondary);\n}\n\n.history-toggle-option.active .history-toggle-count {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border-color: color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n    color: var(--mj-brand-primary);\n}\n\n/* \u2500\u2500 Voice session rows in Execution History \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.session-card {\n    cursor: pointer;\n}\n\n.session-role-chip {\n    display: inline-flex;\n    align-items: center;\n    margin-left: 8px;\n    padding: 1px 8px;\n    border-radius: 10px;\n    font-size: 10.5px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.4px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 22%, transparent);\n    color: var(--mj-brand-primary);\n}\n\n.session-role-chip--target {\n    background: color-mix(in srgb, var(--mj-status-info) 10%, var(--mj-bg-surface));\n    border-color: color-mix(in srgb, var(--mj-status-info) 22%, transparent);\n    color: var(--mj-status-info);\n}\n\n.session-status-pill {\n    display: inline-flex;\n    align-items: center;\n    padding: 2px 10px;\n    border-radius: 12px;\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n    border: 1px solid var(--mj-border-default);\n}\n\n.session-status-pill[data-status=\"Active\"] {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n    border-color: color-mix(in srgb, var(--mj-status-success) 25%, transparent);\n}\n\n.session-status-pill[data-status=\"Idle\"] {\n    background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-warning);\n    border-color: color-mix(in srgb, var(--mj-status-warning) 25%, transparent);\n}\n\n/* \u2500\u2500 Form tabs \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   Panes are hidden with `display: none`, never removed from the DOM. The\n   designer pane holds UNSAVED canvas edits; @if-ing it away on a tab switch\n   would discard them silently, and would also throw away the canvas's zoom and\n   node positions on every trip to Details. */\n\n.agent-tabbar {\n    flex: 0 0 auto;\n    padding: 8px 12px 0;\n    background: var(--mj-bg-page);\n}\n\n.agent-pane {\n    flex: 1;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n}\n\n.agent-pane--hidden {\n    display: none;\n}\n\n.agent-pane--designer {\n    overflow: hidden;\n    padding: 8px 12px 12px;\n    background: var(--mj-bg-page);\n}\n\n/* The designer's dynamically-created section has no height of its own, so without\n   this the flow canvas collapses to zero and renders as an empty strip. */\n.agent-pane--designer > ng-component,\n.agent-pane--designer > * {\n    flex: 1;\n    min-height: 0;\n}\n\n.agent-pane--invocations {\n    overflow-y: auto;\n    overflow-x: hidden;\n    background: var(--mj-bg-page);\n}\n\n/* Initial load: the form's header renders as soon as the record arrives, but the tab strip and\n   every pane wait on the agent TYPE. This fills that window so the page reads as loading rather\n   than as broken. */\n.agent-form-loading {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: 240px;\n    padding: 32px;\n    background: var(--mj-bg-page);\n}\n"] }]
-    }], null, { customSectionContainer: [{
+    }], null, { CustomSectionContainer: [{
             type: ViewChild,
             args: ['customSectionContainer', { read: ViewContainerRef }]
         }] }); })();