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

package/dist/lib/custom/AIPrompts/ai-prompt-form.component.js

@@ -14,6 +14,7 @@ import { MJAIPromptFormComponent } from '../../generated/Entities/MJAIPrompt/mja
 import { AIEngineBase } from '@memberjunction/ai-engine-base';
 import { AITestHarnessDialogService } from '@memberjunction/ng-ai-test-harness';
 import { AIPromptManagementService } from './ai-prompt-management.service';
+import { DedupePendingRecordsByEntity } from './pending-records';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/forms";
 import * as i2 from "@memberjunction/ng-ui-components";
@@ -1540,48 +1541,244 @@ let MJAIPromptFormComponentExtended = class MJAIPromptFormComponentExtended exte
         this.testHarnessService = inject(AITestHarnessDialogService);
         this.viewContainerRef = inject(ViewContainerRef);
         this.promptManagementService = inject(AIPromptManagementService);
-        this.toolbarConfig = CUSTOM_LAYOUT_TOOLBAR_CONFIG;
-        this.template = null;
-        this.templateContent = null;
-        this.templateParams = [];
-        this.isLoadingTemplate = true; // Default to loading state
-        this.isLoadingTemplateParams = false;
-        this.templateNotFoundInDatabase = false;
-        this.showTestHarness = false;
+        this.ToolbarConfig = CUSTOM_LAYOUT_TOOLBAR_CONFIG;
+        this.Template = null;
+        this.TemplateContent = null;
+        this.TemplateParams = [];
+        this.IsLoadingTemplate = true;
+        this.IsLoadingTemplateParams = false;
+        this.TemplateNotFoundInDatabase = false;
+        this.ShowTestHarness = false;
         // Model management
-        this.promptModels = [];
-        this.availableModels = [];
-        this.availableVendors = [];
-        this.isLoadingModels = false;
+        this.PromptModels = [];
+        this.AvailableModels = [];
+        this.AvailableVendors = [];
+        this.IsLoadingModels = false;
         // Vendor management per model
-        this.modelVendorsMap = new Map();
+        this.ModelVendorsMap = new Map();
         // AI Prompt Types
-        this.availablePromptTypes = [];
-        this.isLoadingPromptTypes = false;
+        this.AvailablePromptTypes = [];
+        this.IsLoadingPromptTypes = false;
         // AI Configurations
-        this.availableConfigurations = [];
-        this.isLoadingConfigurations = false;
+        this.AvailableConfigurations = [];
+        this.IsLoadingConfigurations = false;
         // Result Selector Tree Data
-        this.resultSelectorTreeData = [];
-        this.isLoadingResultSelectorData = false;
+        this.ResultSelectorTreeData = [];
+        this.IsLoadingResultSelectorData = false;
         // Drag and drop state
-        this.draggedIndex = -1;
+        this.DraggedIndex = -1;
         // Execution History
-        this.executionHistory = [];
-        this.isLoadingHistory = false;
-        this.historySortField = 'runAt';
-        this.historySortDirection = 'desc';
+        this.ExecutionHistory = [];
+        this.IsLoadingHistory = false;
+        this.HistorySortField = 'runAt';
+        this.HistorySortDirection = 'desc';
         // Removed custom transaction tracking - we'll use base form's _pendingRecords instead
-        this.hasUnsavedChanges = false;
+        this.HasUnsavedChanges = false;
         // Store original state for cancel/revert functionality
         this.originalTemplateID = null;
         // === Permission Checks for Related Entities ===
         /** Cache for permission checks to avoid repeated calculations */
         this._permissionCache = new Map();
-        this.__InferenceProvider_VendorTypeDefinitionID = '';
+        this.__inferenceProvider_VendorTypeDefinitionID = '';
+    }
+    /** @deprecated Use {@link ToolbarConfig}. */
+    get toolbarConfig() {
+        return this.ToolbarConfig;
     }
     /** Custom-layout AI Prompt form looks best full-width on first open. */
     getDefaultFormWidthMode() { return 'full-width'; }
+    /** @deprecated Use {@link Template}. */
+    get template() {
+        return this.Template;
+    }
+    /** @deprecated Use {@link Template}. */
+    set template(value) {
+        this.Template = value;
+    }
+    /** @deprecated Use {@link TemplateContent}. */
+    get templateContent() {
+        return this.TemplateContent;
+    }
+    /** @deprecated Use {@link TemplateContent}. */
+    set templateContent(value) {
+        this.TemplateContent = value;
+    }
+    /** @deprecated Use {@link TemplateParams}. */
+    get templateParams() {
+        return this.TemplateParams;
+    }
+    /** @deprecated Use {@link TemplateParams}. */
+    set templateParams(value) {
+        this.TemplateParams = value;
+    }
+    /** @deprecated Use {@link IsLoadingTemplate}. */
+    get isLoadingTemplate() {
+        return this.IsLoadingTemplate;
+    }
+    /** @deprecated Use {@link IsLoadingTemplate}. */
+    set isLoadingTemplate(value) {
+        this.IsLoadingTemplate = value;
+    } // Default to loading state
+    /** @deprecated Use {@link IsLoadingTemplateParams}. */
+    get isLoadingTemplateParams() {
+        return this.IsLoadingTemplateParams;
+    }
+    /** @deprecated Use {@link IsLoadingTemplateParams}. */
+    set isLoadingTemplateParams(value) {
+        this.IsLoadingTemplateParams = value;
+    }
+    /** @deprecated Use {@link TemplateNotFoundInDatabase}. */
+    get templateNotFoundInDatabase() {
+        return this.TemplateNotFoundInDatabase;
+    }
+    /** @deprecated Use {@link TemplateNotFoundInDatabase}. */
+    set templateNotFoundInDatabase(value) {
+        this.TemplateNotFoundInDatabase = value;
+    }
+    /** @deprecated Use {@link ShowTestHarness}. */
+    get showTestHarness() {
+        return this.ShowTestHarness;
+    }
+    /** @deprecated Use {@link ShowTestHarness}. */
+    set showTestHarness(value) {
+        this.ShowTestHarness = value;
+    }
+    /** @deprecated Use {@link PromptModels}. */
+    get promptModels() {
+        return this.PromptModels;
+    }
+    /** @deprecated Use {@link PromptModels}. */
+    set promptModels(value) {
+        this.PromptModels = value;
+    }
+    /** @deprecated Use {@link AvailableModels}. */
+    get availableModels() {
+        return this.AvailableModels;
+    }
+    /** @deprecated Use {@link AvailableModels}. */
+    set availableModels(value) {
+        this.AvailableModels = value;
+    }
+    /** @deprecated Use {@link AvailableVendors}. */
+    get availableVendors() {
+        return this.AvailableVendors;
+    }
+    /** @deprecated Use {@link AvailableVendors}. */
+    set availableVendors(value) {
+        this.AvailableVendors = value;
+    }
+    /** @deprecated Use {@link IsLoadingModels}. */
+    get isLoadingModels() {
+        return this.IsLoadingModels;
+    }
+    /** @deprecated Use {@link IsLoadingModels}. */
+    set isLoadingModels(value) {
+        this.IsLoadingModels = value;
+    }
+    /** @deprecated Use {@link ModelVendorsMap}. */
+    get modelVendorsMap() {
+        return this.ModelVendorsMap;
+    }
+    /** @deprecated Use {@link ModelVendorsMap}. */
+    set modelVendorsMap(value) {
+        this.ModelVendorsMap = value;
+    }
+    /** @deprecated Use {@link AvailablePromptTypes}. */
+    get availablePromptTypes() {
+        return this.AvailablePromptTypes;
+    }
+    /** @deprecated Use {@link AvailablePromptTypes}. */
+    set availablePromptTypes(value) {
+        this.AvailablePromptTypes = value;
+    }
+    /** @deprecated Use {@link IsLoadingPromptTypes}. */
+    get isLoadingPromptTypes() {
+        return this.IsLoadingPromptTypes;
+    }
+    /** @deprecated Use {@link IsLoadingPromptTypes}. */
+    set isLoadingPromptTypes(value) {
+        this.IsLoadingPromptTypes = value;
+    }
+    /** @deprecated Use {@link AvailableConfigurations}. */
+    get availableConfigurations() {
+        return this.AvailableConfigurations;
+    }
+    /** @deprecated Use {@link AvailableConfigurations}. */
+    set availableConfigurations(value) {
+        this.AvailableConfigurations = value;
+    }
+    /** @deprecated Use {@link IsLoadingConfigurations}. */
+    get isLoadingConfigurations() {
+        return this.IsLoadingConfigurations;
+    }
+    /** @deprecated Use {@link IsLoadingConfigurations}. */
+    set isLoadingConfigurations(value) {
+        this.IsLoadingConfigurations = value;
+    }
+    /** @deprecated Use {@link ResultSelectorTreeData}. */
+    get resultSelectorTreeData() {
+        return this.ResultSelectorTreeData;
+    }
+    /** @deprecated Use {@link ResultSelectorTreeData}. */
+    set resultSelectorTreeData(value) {
+        this.ResultSelectorTreeData = value;
+    }
+    /** @deprecated Use {@link IsLoadingResultSelectorData}. */
+    get isLoadingResultSelectorData() {
+        return this.IsLoadingResultSelectorData;
+    }
+    /** @deprecated Use {@link IsLoadingResultSelectorData}. */
+    set isLoadingResultSelectorData(value) {
+        this.IsLoadingResultSelectorData = value;
+    }
+    /** @deprecated Use {@link DraggedIndex}. */
+    get draggedIndex() {
+        return this.DraggedIndex;
+    }
+    /** @deprecated Use {@link DraggedIndex}. */
+    set draggedIndex(value) {
+        this.DraggedIndex = value;
+    }
+    /** @deprecated Use {@link ExecutionHistory}. */
+    get executionHistory() {
+        return this.ExecutionHistory;
+    }
+    /** @deprecated Use {@link ExecutionHistory}. */
+    set executionHistory(value) {
+        this.ExecutionHistory = value;
+    }
+    /** @deprecated Use {@link IsLoadingHistory}. */
+    get isLoadingHistory() {
+        return this.IsLoadingHistory;
+    }
+    /** @deprecated Use {@link IsLoadingHistory}. */
+    set isLoadingHistory(value) {
+        this.IsLoadingHistory = value;
+    }
+    /** @deprecated Use {@link HistorySortField}. */
+    get historySortField() {
+        return this.HistorySortField;
+    }
+    /** @deprecated Use {@link HistorySortField}. */
+    set historySortField(value) {
+        this.HistorySortField = value;
+    }
+    /** @deprecated Use {@link HistorySortDirection}. */
+    get historySortDirection() {
+        return this.HistorySortDirection;
+    }
+    /** @deprecated Use {@link HistorySortDirection}. */
+    set historySortDirection(value) {
+        this.HistorySortDirection = value;
+    }
+    /** @deprecated Use {@link HasUnsavedChanges}. */
+    get hasUnsavedChanges() {
+        return this.HasUnsavedChanges;
+    }
+    /** @deprecated Use {@link HasUnsavedChanges}. */
+    set hasUnsavedChanges(value) {
+        this.HasUnsavedChanges = value;
+    }
     // Main AI Prompt permissions inherited from BaseFormComponent:
     // - UserCanEdit (Update permission)
     // - UserCanRead (Read permission) 
@@ -1669,25 +1866,41 @@ let MJAIPromptFormComponentExtended = class MJAIPromptFormComponentExtended exte
     /**
      * 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();
+    }
     // Template editor configuration
-    get templateEditorConfig() {
+    get TemplateEditorConfig() {
         return {
             allowEdit: this.EditMode && this.UserCanUpdateTemplateContents,
             showRunButton: false,
             compactMode: false
         };
     }
+    /** @deprecated Use {@link TemplateEditorConfig}. */
+    get templateEditorConfig() {
+        return this.TemplateEditorConfig;
+    }
     get _metadata() { return this.ProviderToUse; }
+    /** @deprecated Use {@link TemplateEditor}. */
+    get templateEditor() {
+        return this.TemplateEditor;
+    }
+    /** @deprecated Use {@link TemplateEditor}. */
+    set templateEditor(value) {
+        this.TemplateEditor = value;
+    }
     async ngOnInit() {
         await super.ngOnInit();
         // make sure AI Engine Base is configured, this will load stuff only if not already
         // loaded in the current process space
         await AIEngineBase.Instance.Config(false, this._metadata.CurrentUser);
-        this.__InferenceProvider_VendorTypeDefinitionID = AIEngineBase.Instance.InferenceProviderTypeID || '';
-        if (!this.__InferenceProvider_VendorTypeDefinitionID) {
+        this.__inferenceProvider_VendorTypeDefinitionID = AIEngineBase.Instance.InferenceProviderTypeID || '';
+        if (!this.__inferenceProvider_VendorTypeDefinitionID) {
             console.error('Inference Provider Vendor Type Definition ID not found');
             MJNotificationService.Instance.CreateSimpleNotification('Inference Provider Vendor Type Definition not found', 'error', 5000);
             return;
@@ -1699,26 +1912,26 @@ let MJAIPromptFormComponentExtended = class MJAIPromptFormComponentExtended exte
         }
         else {
             // No template ID, so we're not loading
-            this.isLoadingTemplate = false;
+            this.IsLoadingTemplate = false;
         }
         // Load available models, vendors, prompt types, configurations, prompt models, and result selector data
         await Promise.all([
-            this.loadAvailableModels(),
-            this.loadAvailableVendors(),
-            this.loadAvailablePromptTypes(),
-            this.loadAvailableConfigurations(),
-            this.loadPromptModels(),
-            this.loadResultSelectorTreeData()
+            this.LoadAvailableModels(),
+            this.LoadAvailableVendors(),
+            this.LoadAvailablePromptTypes(),
+            this.LoadAvailableConfigurations(),
+            this.LoadPromptModels(),
+            this.LoadResultSelectorTreeData()
         ]);
         // Load execution history if record is saved
         if (this.record?.IsSaved) {
-            await this.loadExecutionHistory();
+            await this.LoadExecutionHistory();
         }
         // Set defaults for new records
         if (!this.record.IsSaved) {
             // Default to first prompt type if not set
-            if (!this.record.TypeID && this.availablePromptTypes.length > 0) {
-                this.record.TypeID = this.availablePromptTypes[0].ID;
+            if (!this.record.TypeID && this.AvailablePromptTypes.length > 0) {
+                this.record.TypeID = this.AvailablePromptTypes[0].ID;
             }
             // Default status to Pending if not set
             if (!this.record.Status) {
@@ -1731,8 +1944,8 @@ let MJAIPromptFormComponentExtended = class MJAIPromptFormComponentExtended exte
      */
     async loadTemplate() {
         if (!this.record?.TemplateID) {
-            this.template = null;
-            this.templateNotFoundInDatabase = false;
+            this.Template = null;
+            this.TemplateNotFoundInDatabase = false;
             return;
         }
         // First check if we already have this template in pending records (newly created)
@@ -1740,23 +1953,23 @@ let MJAIPromptFormComponentExtended = class MJAIPromptFormComponentExtended exte
             p.entityObject.Get('ID') === this.record.TemplateID);
         if (pendingTemplate) {
             // Use the pending template
-            this.template = pendingTemplate.entityObject;
-            this.templateNotFoundInDatabase = false;
-            this.isLoadingTemplate = false;
+            this.Template = pendingTemplate.entityObject;
+            this.TemplateNotFoundInDatabase = false;
+            this.IsLoadingTemplate = false;
             // Clear template content and params since this is a new template
-            this.templateContent = null;
-            this.templateParams = [];
+            this.TemplateContent = null;
+            this.TemplateParams = [];
             this.cdr.detectChanges();
             return;
         }
-        this.isLoadingTemplate = true;
-        this.templateNotFoundInDatabase = false; // Reset the flag
+        this.IsLoadingTemplate = true;
+        this.TemplateNotFoundInDatabase = false; // Reset the flag
         try {
-            this.template = await this._metadata.GetEntityObject('MJ: Templates');
-            await this.template.Load(this.record.TemplateID);
-            if (!this.template.IsSaved) {
-                this.template = null;
-                this.templateNotFoundInDatabase = true; // Set flag when template not found
+            this.Template = await this._metadata.GetEntityObject('MJ: Templates');
+            await this.Template.Load(this.record.TemplateID);
+            if (!this.Template.IsSaved) {
+                this.Template = null;
+                this.TemplateNotFoundInDatabase = true; // Set flag when template not found
                 console.warn(`Template with ID ${this.record.TemplateID} not found`);
             }
             else {
@@ -1769,49 +1982,53 @@ let MJAIPromptFormComponentExtended = class MJAIPromptFormComponentExtended exte
         }
         catch (error) {
             console.error('Error loading template:', error);
-            this.template = null;
-            this.templateNotFoundInDatabase = true; // Set flag on error
+            this.Template = null;
+            this.TemplateNotFoundInDatabase = true; // Set flag on error
             MJNotificationService.Instance.CreateSimpleNotification('Error loading associated template', 'error', 5000);
         }
         finally {
-            this.isLoadingTemplate = false;
+            this.IsLoadingTemplate = false;
             this.cdr.detectChanges();
         }
     }
     /**
      * Handles template ID changes in the form
      */
-    async onTemplateIdChange() {
+    async OnTemplateIdChange() {
         if (this.record?.TemplateID) {
             await this.loadTemplate();
         }
         else {
-            this.template = null;
-            this.templateParams = [];
+            this.Template = null;
+            this.TemplateParams = [];
         }
-        this.hasUnsavedChanges = true;
+        this.HasUnsavedChanges = true;
+    }
+    /** @deprecated Use {@link OnTemplateIdChange}. */
+    async onTemplateIdChange() {
+        return this.OnTemplateIdChange();
     }
     /**
      * Opens a dialog to link an existing template
      */
-    async linkExistingTemplate() {
+    async LinkExistingTemplate() {
         try {
             this.promptManagementService.openTemplateSelectorDialog({
-                title: 'Link Existing Template',
-                multiSelect: false,
-                showCreateNew: true,
-                showActiveOnly: true,
-                selectedTemplateIds: this.record.TemplateID ? [this.record.TemplateID] : [],
+                Title: 'Link Existing Template',
+                MultiSelect: false,
+                ShowCreateNew: true,
+                ShowActiveOnly: true,
+                SelectedTemplateIds: this.record.TemplateID ? [this.record.TemplateID] : [],
                 viewContainerRef: this.viewContainerRef
             }).subscribe({
                 next: async (result) => {
-                    if (result && result.selectedTemplates.length > 0) {
-                        const selectedTemplate = result.selectedTemplates[0];
+                    if (result && result.SelectedTemplates.length > 0) {
+                        const selectedTemplate = result.SelectedTemplates[0];
                         // First, clean up any pending changes related to the old template
                         this.cleanupOldTemplateRecords();
                         // Update the AI prompt to reference the selected template
                         this.record.TemplateID = selectedTemplate.ID;
-                        this.hasUnsavedChanges = true;
+                        this.HasUnsavedChanges = true;
                         // Load the selected template
                         await this.loadTemplate();
                         // Trigger change detection to update UI
@@ -1820,7 +2037,7 @@ let MJAIPromptFormComponentExtended = class MJAIPromptFormComponentExtended exte
                     }
                     else if (result && result.createNew) {
                         // User wants to create a new template
-                        await this.createNewTemplate();
+                        await this.CreateNewTemplate();
                     }
                 },
                 error: (error) => {
@@ -1834,20 +2051,28 @@ let MJAIPromptFormComponentExtended = class MJAIPromptFormComponentExtended exte
             MJNotificationService.Instance.CreateSimpleNotification('Error linking template. Please try again.', 'error', 3000);
         }
     }
+    /** @deprecated Use {@link LinkExistingTemplate}. */
+    async linkExistingTemplate() {
+        return this.LinkExistingTemplate();
+    }
     /**
      * Opens the current template in a new window
      */
-    openTemplateInNewWindow() {
-        if (!this.template?.ID)
+    OpenTemplateInNewWindow() {
+        if (!this.Template?.ID)
             return;
         // TODO: Get the proper URL for template editing
-        const templateUrl = `/templates/${this.template.ID}`;
+        const templateUrl = `/templates/${this.Template.ID}`;
         window.open(templateUrl, '_blank');
     }
+    /** @deprecated Use {@link OpenTemplateInNewWindow}. */
+    openTemplateInNewWindow() {
+        return this.OpenTemplateInNewWindow();
+    }
     /**
      * Creates a new template for this AI prompt (deferred until save)
      */
-    async createNewTemplate() {
+    async CreateNewTemplate() {
         try {
             // First, clean up any pending changes related to the old template
             this.cleanupOldTemplateRecords();
@@ -1864,14 +2089,14 @@ let MJAIPromptFormComponentExtended = class MJAIPromptFormComponentExtended exte
             });
             // Update the AI prompt to reference the new template
             this.record.TemplateID = newTemplate.ID;
-            this.hasUnsavedChanges = true;
+            this.HasUnsavedChanges = true;
             // Set the template for UI purposes
-            this.template = newTemplate;
+            this.Template = newTemplate;
             // Clear existing template content and params since we have a new template
-            this.templateContent = null;
-            this.templateParams = [];
-            this.isLoadingTemplate = false;
-            this.templateNotFoundInDatabase = false;
+            this.TemplateContent = null;
+            this.TemplateParams = [];
+            this.IsLoadingTemplate = false;
+            this.TemplateNotFoundInDatabase = false;
             // Force UI update in next microtask to ensure template editor refreshes
             Promise.resolve().then(() => {
                 this.cdr.detectChanges();
@@ -1884,6 +2109,10 @@ let MJAIPromptFormComponentExtended = class MJAIPromptFormComponentExtended exte
             MJNotificationService.Instance.CreateSimpleNotification(`Error creating new template: ${errorMessage}`, 'error', 6000);
         }
     }
+    /** @deprecated Use {@link CreateNewTemplate}. */
+    async createNewTemplate() {
+        return this.CreateNewTemplate();
+    }
     /**
      * Cleans up any pending records related to the old template when changing templates
      */
@@ -1903,56 +2132,56 @@ let MJAIPromptFormComponentExtended = class MJAIPromptFormComponentExtended exte
      * Loads template content for the current template
      */
     async loadTemplateContent() {
-        if (!this.template?.ID) {
-            this.templateContent = null;
+        if (!this.Template?.ID) {
+            this.TemplateContent = null;
             return;
         }
         try {
             const rv = RunView.FromMetadataProvider(this.ProviderToUse);
             const results = await rv.RunView({
                 EntityName: 'MJ: Template Contents',
-                ExtraFilter: `TemplateID = '${this.template.ID}'`,
+                ExtraFilter: `TemplateID = '${this.Template.ID}'`,
                 OrderBy: 'Priority ASC',
                 ResultType: 'entity_object'
             });
             // Get the first content (highest priority)
-            this.templateContent = results.Results?.[0] || null;
+            this.TemplateContent = results.Results?.[0] || null;
         }
         catch (error) {
             console.error('Error loading template content:', error);
-            this.templateContent = null;
+            this.TemplateContent = null;
         }
     }
     /**
      * Loads template parameters for the current template
      */
     async loadTemplateParams() {
-        if (!this.template?.ID) {
-            this.templateParams = [];
+        if (!this.Template?.ID) {
+            this.TemplateParams = [];
             return;
         }
-        this.isLoadingTemplateParams = true;
+        this.IsLoadingTemplateParams = true;
         try {
             const rv = RunView.FromMetadataProvider(this.ProviderToUse);
             const results = await rv.RunView({
                 EntityName: 'MJ: Template Params',
-                ExtraFilter: `TemplateID = '${this.template.ID}'`,
+                ExtraFilter: `TemplateID = '${this.Template.ID}'`,
                 OrderBy: 'Name ASC'
             });
-            this.templateParams = results.Results || [];
+            this.TemplateParams = results.Results || [];
         }
         catch (error) {
             console.error('Error loading template params:', error);
-            this.templateParams = [];
+            this.TemplateParams = [];
         }
         finally {
-            this.isLoadingTemplateParams = false;
+            this.IsLoadingTemplateParams = false;
         }
     }
     /**
      * Opens the AI prompt execution dialog
      */
-    executeAIPrompt() {
+    ExecuteAIPrompt() {
         if (!this.record?.ID) {
             MJNotificationService.Instance.CreateSimpleNotification('Please save the AI prompt before executing', 'warning', 4000);
             return;
@@ -1962,12 +2191,16 @@ let MJAIPromptFormComponentExtended = class MJAIPromptFormComponentExtended exte
             return;
         }
         // Use test harness instead
-        this.openTestHarness();
+        this.OpenTestHarness();
+    }
+    /** @deprecated Use {@link ExecuteAIPrompt}. */
+    executeAIPrompt() {
+        return this.ExecuteAIPrompt();
     }
     /**
      * Opens the test harness
      */
-    openTestHarness() {
+    OpenTestHarness() {
         if (!this.record?.ID) {
             MJNotificationService.Instance.CreateSimpleNotification('Please save the AI prompt before testing', 'warning', 4000);
             return;
@@ -1978,7 +2211,7 @@ let MJAIPromptFormComponentExtended = class MJAIPromptFormComponentExtended exte
             next: (result) => {
                 if (result.success) {
                     // Reload execution history
-                    this.loadExecutionHistory();
+                    this.LoadExecutionHistory();
                 }
             },
             error: (error) => {
@@ -1987,28 +2220,40 @@ let MJAIPromptFormComponentExtended = class MJAIPromptFormComponentExtended exte
             }
         });
     }
+    /** @deprecated Use {@link OpenTestHarness}. */
+    openTestHarness() {
+        return this.OpenTestHarness();
+    }
     /**
      * Handles when test harness is closed
      */
+    OnTestHarnessVisibilityChanged(isVisible) {
+        this.ShowTestHarness = isVisible;
+    }
+    /** @deprecated Use {@link OnTestHarnessVisibilityChanged}. */
     onTestHarnessVisibilityChanged(isVisible) {
-        this.showTestHarness = isVisible;
+        return this.OnTestHarnessVisibilityChanged(isVisible);
     }
     /**
      * Handles template content changes from the editor
      */
-    onTemplateContentChange(content) {
+    OnTemplateContentChange(content) {
         // Handle template content changes if needed
         console.log('Template content changed:', content);
         // Mark as having unsaved changes
-        this.hasUnsavedChanges = true;
+        this.HasUnsavedChanges = true;
         // If we have content changes, we need to ensure they're added to pending records
         // This is typically handled by the template editor component itself
     }
+    /** @deprecated Use {@link OnTemplateContentChange}. */
+    onTemplateContentChange(content) {
+        return this.OnTemplateContentChange(content);
+    }
     /**
      * Handles template content record deletion
      * This method should be called by the template editor to properly manage deletions
      */
-    handleTemplateContentDelete(templateContent) {
+    HandleTemplateContentDelete(templateContent) {
         if (templateContent.IsSaved) {
             // If it's saved, add to pending deletions
             this.PendingRecords.push({
@@ -2029,13 +2274,17 @@ let MJAIPromptFormComponentExtended = class MJAIPromptFormComponentExtended exte
                 }
             }
         }
-        this.hasUnsavedChanges = true;
+        this.HasUnsavedChanges = true;
+    }
+    /** @deprecated Use {@link HandleTemplateContentDelete}. */
+    handleTemplateContentDelete(templateContent) {
+        return this.HandleTemplateContentDelete(templateContent);
     }
     /**
      * Handles template content record creation/modification
      * This method should be called by the template editor to properly manage saves
      */
-    handleTemplateContentSave(templateContent) {
+    HandleTemplateContentSave(templateContent) {
         if (templateContent.Dirty || !templateContent.IsSaved) {
             // Add to pending saves
             this.PendingRecords.push({
@@ -2043,41 +2292,37 @@ let MJAIPromptFormComponentExtended = class MJAIPromptFormComponentExtended exte
                 action: 'save'
             });
         }
-        this.hasUnsavedChanges = true;
+        this.HasUnsavedChanges = true;
+    }
+    /** @deprecated Use {@link HandleTemplateContentSave}. */
+    handleTemplateContentSave(templateContent) {
+        return this.HandleTemplateContentSave(templateContent);
     }
     /**
      * Adds template content changes to pending records
      */
     addTemplateContentsToPendingRecords() {
-        // This method would typically get pending changes from the template editor
-        // The template editor should expose its pending changes through events or direct calls
-        // For now, we'll rely on the template editor to manage its own pending records
-        // and communicate them through the MJ event system
-        // If the template editor has a method to get pending changes, we would call it here
-        if (this.templateEditor && typeof this.templateEditor.getPendingChanges === 'function') {
-            try {
-                const pendingChanges = this.templateEditor.getPendingChanges();
-                if (pendingChanges && pendingChanges.length > 0) {
-                    this.PendingRecords.push(...pendingChanges);
-                }
-            }
-            catch (error) {
-                console.warn('Template editor does not support getPendingChanges method:', error);
-            }
+        // The embedded editor's new/dirty Template Contents ride along in this form's save transaction.
+        if (this.TemplateEditor) {
+            this.PendingRecords.push(...this.TemplateEditor.GetPendingChanges());
         }
     }
     /**
      * Handles template run requests from the editor
      */
-    onTemplateRun(template) {
+    OnTemplateRun(template) {
         console.log('Template run requested:', template);
         // Could open the template parameter dialog here if needed
         MJNotificationService.Instance.CreateSimpleNotification('Template run functionality coming soon', 'info', 3000);
     }
+    /** @deprecated Use {@link OnTemplateRun}. */
+    onTemplateRun(template) {
+        return this.OnTemplateRun(template);
+    }
     /**
      * Gets the display text for parallelization mode
      */
-    getParallelizationModeDisplay() {
+    GetParallelizationModeDisplay() {
         switch (this.record?.ParallelizationMode) {
             case 'None': return 'None';
             case 'StaticCount': return `Static count (${this.record.ParallelCount || 1})`;
@@ -2086,10 +2331,14 @@ let MJAIPromptFormComponentExtended = class MJAIPromptFormComponentExtended exte
             default: return 'Unknown';
         }
     }
+    /** @deprecated Use {@link GetParallelizationModeDisplay}. */
+    getParallelizationModeDisplay() {
+        return this.GetParallelizationModeDisplay();
+    }
     /**
      * Gets the display text for output type
      */
-    getOutputTypeDisplay() {
+    GetOutputTypeDisplay() {
         const type = this.record?.OutputType || 'string';
         const validationBehavior = this.record?.ValidationBehavior || 'Warn';
         if (validationBehavior === 'None') {
@@ -2099,47 +2348,71 @@ let MJAIPromptFormComponentExtended = class MJAIPromptFormComponentExtended exte
             return `${type} (${validationBehavior})`;
         }
     }
+    /** @deprecated Use {@link GetOutputTypeDisplay}. */
+    getOutputTypeDisplay() {
+        return this.GetOutputTypeDisplay();
+    }
     /**
      * Gets the color for validation behavior display
      */
-    getValidationColor() {
+    GetValidationColor() {
         switch (this.record?.ValidationBehavior) {
             case 'Strict': return '#dc3545'; // red
             case 'Warn': return '#ffc107'; // yellow
             default: return '#6c757d'; // default gray
         }
     }
+    /** @deprecated Use {@link GetValidationColor}. */
+    getValidationColor() {
+        return this.GetValidationColor();
+    }
     /**
      * Checks if ParallelCount field should be visible
      */
-    get showParallelCount() {
+    get ShowParallelCount() {
         return this.record?.ParallelizationMode === 'StaticCount';
     }
+    /** @deprecated Use {@link ShowParallelCount}. */
+    get showParallelCount() {
+        return this.ShowParallelCount;
+    }
     /**
      * Checks if ParallelConfigParam field should be visible
      */
-    get showParallelConfigParam() {
+    get ShowParallelConfigParam() {
         return this.record?.ParallelizationMode === 'ConfigParam';
     }
+    /** @deprecated Use {@link ShowParallelConfigParam}. */
+    get showParallelConfigParam() {
+        return this.ShowParallelConfigParam;
+    }
     /**
      * Checks if OutputExample field should be visible
      */
-    get showOutputExample() {
+    get ShowOutputExample() {
         return this.record?.OutputType === 'object';
     }
+    /** @deprecated Use {@link ShowOutputExample}. */
+    get showOutputExample() {
+        return this.ShowOutputExample;
+    }
     /**
      * Checks if the AI prompt can be executed
      */
-    get canExecute() {
+    get CanExecute() {
         return !!(this.record?.ID &&
             this.record.Status === 'Active' &&
             this.record.TemplateID &&
-            this.template);
+            this.Template);
+    }
+    /** @deprecated Use {@link CanExecute}. */
+    get canExecute() {
+        return this.CanExecute;
     }
     /**
      * Gets status badge color
      */
-    getStatusBadgeColor() {
+    GetStatusBadgeColor() {
         switch (this.record?.Status) {
             case 'Active': return '#28a745';
             case 'Pending': return '#ffc107';
@@ -2147,84 +2420,104 @@ let MJAIPromptFormComponentExtended = class MJAIPromptFormComponentExtended exte
             default: return '#6c757d';
         }
     }
+    /** @deprecated Use {@link GetStatusBadgeColor}. */
+    getStatusBadgeColor() {
+        return this.GetStatusBadgeColor();
+    }
     /**
      * Loads available AI models for selection
      */
-    async loadAvailableModels() {
+    async LoadAvailableModels() {
         try {
             const engine = AIEngineBase.Instance;
             await engine.Config(false);
             const models = engine.Models;
             models.sort((a, b) => a.Name.localeCompare(b.Name));
-            this.availableModels = models;
+            this.AvailableModels = models;
         }
         catch (error) {
             console.error('Error loading available models:', error);
         }
     }
+    /** @deprecated Use {@link LoadAvailableModels}. */
+    async loadAvailableModels() {
+        return this.LoadAvailableModels();
+    }
     /**
      * Loads available AI vendors for selection
      */
-    async loadAvailableVendors() {
+    async LoadAvailableVendors() {
         try {
             const engine = AIEngineBase.Instance;
             await engine.Config(false);
             const vendors = engine.Vendors;
             vendors.sort((a, b) => a.Name.localeCompare(b.Name));
-            this.availableVendors = vendors;
+            this.AvailableVendors = vendors;
         }
         catch (error) {
             console.error('Error loading available vendors:', error);
         }
     }
+    /** @deprecated Use {@link LoadAvailableVendors}. */
+    async loadAvailableVendors() {
+        return this.LoadAvailableVendors();
+    }
     /**
      * Loads available AI prompt types for selection
      */
-    async loadAvailablePromptTypes() {
-        this.isLoadingPromptTypes = true;
+    async LoadAvailablePromptTypes() {
+        this.IsLoadingPromptTypes = true;
         try {
             const engine = AIEngineBase.Instance;
             await engine.Config(false);
             const promptTypes = engine.PromptTypes;
             promptTypes.sort((a, b) => a.Name.localeCompare(b.Name));
-            this.availablePromptTypes = promptTypes;
+            this.AvailablePromptTypes = promptTypes;
         }
         catch (error) {
             console.error('Error loading available prompt types:', error);
         }
         finally {
-            this.isLoadingPromptTypes = false;
+            this.IsLoadingPromptTypes = false;
         }
     }
+    /** @deprecated Use {@link LoadAvailablePromptTypes}. */
+    async loadAvailablePromptTypes() {
+        return this.LoadAvailablePromptTypes();
+    }
     /**
      * Loads available AI configurations for selection
      */
-    async loadAvailableConfigurations() {
-        this.isLoadingConfigurations = true;
+    async LoadAvailableConfigurations() {
+        this.IsLoadingConfigurations = true;
         try {
             const engine = AIEngineBase.Instance;
             await engine.Config(false);
             const configurations = engine.Configurations;
             configurations.sort((a, b) => a.Name.localeCompare(b.Name));
-            this.availableConfigurations = configurations;
+            this.AvailableConfigurations = configurations;
         }
         catch (error) {
             console.error('Error loading available configurations:', error);
         }
         finally {
-            this.isLoadingConfigurations = false;
+            this.IsLoadingConfigurations = false;
         }
     }
+    /** @deprecated Use {@link LoadAvailableConfigurations}. */
+    async loadAvailableConfigurations() {
+        return this.LoadAvailableConfigurations();
+    }
     /**
      * Loads vendors available for a specific model
      */
-    async loadVendorsForModel(modelId) {
+    async LoadVendorsForModel(modelId) {
         if (!modelId) {
             return { vendors: [], modelVendors: [] };
         }
         // Check cache first
-        if (this.modelVendorsMap.has(modelId)) {
-            return this.modelVendorsMap.get(modelId);
+        if (this.ModelVendorsMap.has(modelId)) {
+            return this.ModelVendorsMap.get(modelId);
         }
         try {
             // Load model vendors for this model, filtering by TypeID for inference providers only
@@ -2234,7 +2527,7 @@ let MJAIPromptFormComponentExtended = class MJAIPromptFormComponentExtended exte
             // filter vendors to just the vendors in the modelVendors array in VendorID
             const vendors = engine.Vendors.filter(v => modelVendors.some(mv => UUIDsEqual(mv.VendorID, v.ID)));
             const result = { vendors, modelVendors };
-            this.modelVendorsMap.set(modelId, result);
+            this.ModelVendorsMap.set(modelId, result);
             return result;
         }
         catch (error) {
@@ -2242,28 +2535,40 @@ let MJAIPromptFormComponentExtended = class MJAIPromptFormComponentExtended exte
             return { vendors: [], modelVendors: [] };
         }
     }
+    /** @deprecated Use {@link LoadVendorsForModel}. */
+    async loadVendorsForModel(modelId) {
+        return this.LoadVendorsForModel(modelId);
+    }
     /**
      * Gets vendors for a specific model from cache or loads them
      */
-    async getVendorsForModel(modelId) {
-        const result = await this.loadVendorsForModel(modelId);
+    async GetVendorsForModel(modelId) {
+        const result = await this.LoadVendorsForModel(modelId);
         return result.vendors;
     }
+    /** @deprecated Use {@link GetVendorsForModel}. */
+    async getVendorsForModel(modelId) {
+        return this.GetVendorsForModel(modelId);
+    }
     /**
      * Gets the status for a model-vendor combination
      */
-    getModelVendorStatus(modelId, vendorId) {
-        const modelVendorData = this.modelVendorsMap.get(modelId);
+    GetModelVendorStatus(modelId, vendorId) {
+        const modelVendorData = this.ModelVendorsMap.get(modelId);
         if (!modelVendorData)
             return 'Unknown';
         const modelVendor = modelVendorData.modelVendors.find(mv => UUIDsEqual(mv.VendorID, vendorId));
         return modelVendor?.Status || 'Unknown';
     }
+    /** @deprecated Use {@link GetModelVendorStatus}. */
+    getModelVendorStatus(modelId, vendorId) {
+        return this.GetModelVendorStatus(modelId, vendorId);
+    }
     /**
      * Gets the color for vendor status display
      */
-    getVendorStatusColor(modelId, vendorId) {
-        const status = this.getModelVendorStatus(modelId, vendorId);
+    GetVendorStatusColor(modelId, vendorId) {
+        const status = this.GetModelVendorStatus(modelId, vendorId);
         switch (status) {
             case 'Active': return '#28a745'; // green
             case 'Inactive': return '#dc3545'; // red  
@@ -2271,19 +2576,23 @@ let MJAIPromptFormComponentExtended = class MJAIPromptFormComponentExtended exte
             default: return '#6c757d'; // gray
         }
     }
+    /** @deprecated Use {@link GetVendorStatusColor}. */
+    getVendorStatusColor(modelId, vendorId) {
+        return this.GetVendorStatusColor(modelId, vendorId);
+    }
     /**
      * Handles model selection change and loads vendors for that model
      */
-    async onModelChange(modelId, promptModelIndex) {
-        const promptModel = this.promptModels[promptModelIndex];
+    async OnModelChange(modelId, promptModelIndex) {
+        const promptModel = this.PromptModels[promptModelIndex];
         if (!promptModel)
             return;
         // Clear the vendor selection when model changes
         promptModel.VendorID = null;
-        this.hasUnsavedChanges = true;
+        this.HasUnsavedChanges = true;
         // Load vendors for the new model
         if (modelId) {
-            const vendorData = await this.loadVendorsForModel(modelId);
+            const vendorData = await this.LoadVendorsForModel(modelId);
             // Auto-select first vendor if available
             if (vendorData.vendors.length > 0) {
                 promptModel.VendorID = vendorData.vendors[0].ID;
@@ -2292,68 +2601,88 @@ let MJAIPromptFormComponentExtended = class MJAIPromptFormComponentExtended exte
         // Trigger change detection
         this.cdr.detectChanges();
     }
+    /** @deprecated Use {@link OnModelChange}. */
+    async onModelChange(modelId, promptModelIndex) {
+        return this.OnModelChange(modelId, promptModelIndex);
+    }
     /**
      * Handles configuration change for a prompt model
      */
-    onConfigurationChange(configurationId, promptModelIndex) {
-        const promptModel = this.promptModels[promptModelIndex];
+    OnConfigurationChange(configurationId, promptModelIndex) {
+        const promptModel = this.PromptModels[promptModelIndex];
         if (!promptModel)
             return;
         promptModel.ConfigurationID = configurationId;
-        this.hasUnsavedChanges = true;
+        this.HasUnsavedChanges = true;
         // Trigger change detection
         this.cdr.detectChanges();
     }
+    /** @deprecated Use {@link OnConfigurationChange}. */
+    onConfigurationChange(configurationId, promptModelIndex) {
+        return this.OnConfigurationChange(configurationId, promptModelIndex);
+    }
     /**
      * Gets vendors for a specific model
      */
-    getVendorsForModelSync(modelId) {
-        const modelVendorData = this.modelVendorsMap.get(modelId);
+    GetVendorsForModelSync(modelId) {
+        const modelVendorData = this.ModelVendorsMap.get(modelId);
         return modelVendorData?.vendors || [];
     }
+    /** @deprecated Use {@link GetVendorsForModelSync}. */
+    getVendorsForModelSync(modelId) {
+        return this.GetVendorsForModelSync(modelId);
+    }
     /**
      * Checks if vendor dropdown should be shown (more than one vendor)
      */
-    shouldShowVendorDropdown(modelId) {
+    ShouldShowVendorDropdown(modelId) {
         if (!modelId)
             return false;
-        const vendors = this.getVendorsForModelSync(modelId);
+        const vendors = this.GetVendorsForModelSync(modelId);
         return vendors.length > 1;
     }
+    /** @deprecated Use {@link ShouldShowVendorDropdown}. */
+    shouldShowVendorDropdown(modelId) {
+        return this.ShouldShowVendorDropdown(modelId);
+    }
     /**
      * Loads prompt models for this AI prompt
      */
-    async loadPromptModels() {
+    async LoadPromptModels() {
         if (!this.record?.ID) {
-            this.promptModels = [];
+            this.PromptModels = [];
             return;
         }
-        this.isLoadingModels = true;
+        this.IsLoadingModels = true;
         try {
             const engine = AIEngineBase.Instance;
             await engine.Config(false);
-            this.promptModels = engine.PromptModels.filter(pm => UUIDsEqual(pm.PromptID, this.record.ID));
-            this.promptModels.sort((a, b) => {
+            this.PromptModels = engine.PromptModels.filter(pm => UUIDsEqual(pm.PromptID, this.record.ID));
+            this.PromptModels.sort((a, b) => {
                 // first sort on priority (descending), then by created date (ascending)
                 return b.Priority - a.Priority || new Date(a.__mj_CreatedAt).getTime() - new Date(b.__mj_CreatedAt).getTime();
             });
             // Load vendors for existing models
-            const modelIds = this.promptModels
+            const modelIds = this.PromptModels
                 .map(pm => pm.ModelID)
                 .filter(id => id); // Filter out null/undefined
-            await Promise.all(modelIds.map(modelId => this.loadVendorsForModel(modelId)));
+            await Promise.all(modelIds.map(modelId => this.LoadVendorsForModel(modelId)));
         }
         catch (error) {
             console.error('Error loading prompt models:', error);
         }
         finally {
-            this.isLoadingModels = false;
+            this.IsLoadingModels = false;
         }
     }
+    /** @deprecated Use {@link LoadPromptModels}. */
+    async loadPromptModels() {
+        return this.LoadPromptModels();
+    }
     /**
      * Adds a new model to the prompt (deferred until save)
      */
-    async addNewModel() {
+    async AddNewModel() {
         if (!this.record?.ID)
             return;
         try {
@@ -2366,8 +2695,8 @@ let MJAIPromptFormComponentExtended = class MJAIPromptFormComponentExtended exte
                 newModel._tempId = `temp_${Date.now()}_${Math.random().toString(36).substring(2, 11)}`;
             }
             // ModelID will be set by user
-            this.promptModels.push(newModel);
-            this.hasUnsavedChanges = true;
+            this.PromptModels.push(newModel);
+            this.HasUnsavedChanges = true;
             // Update priorities after adding
             this.updateModelPriorities();
             // Trigger change detection
@@ -2379,13 +2708,17 @@ let MJAIPromptFormComponentExtended = class MJAIPromptFormComponentExtended exte
             MJNotificationService.Instance.CreateSimpleNotification('Error creating new model', 'error', 5000);
         }
     }
+    /** @deprecated Use {@link AddNewModel}. */
+    async addNewModel() {
+        return this.AddNewModel();
+    }
     /**
      * Removes a model from the prompt (deferred until save)
      */
-    async removePromptModel(index) {
-        if (index < 0 || index >= this.promptModels.length)
+    async RemovePromptModel(index) {
+        if (index < 0 || index >= this.PromptModels.length)
             return;
-        const model = this.promptModels[index];
+        const model = this.PromptModels[index];
         try {
             // If it's a saved model, add it to pending deletions
             if (model.IsSaved) {
@@ -2395,8 +2728,8 @@ let MJAIPromptFormComponentExtended = class MJAIPromptFormComponentExtended exte
                 });
             }
             // Remove from local array
-            this.promptModels.splice(index, 1);
-            this.hasUnsavedChanges = true;
+            this.PromptModels.splice(index, 1);
+            this.HasUnsavedChanges = true;
             // Update priorities after removal
             this.updateModelPriorities();
             // Trigger change detection
@@ -2408,42 +2741,62 @@ let MJAIPromptFormComponentExtended = class MJAIPromptFormComponentExtended exte
             MJNotificationService.Instance.CreateSimpleNotification('Error removing model', 'error', 5000);
         }
     }
+    /** @deprecated Use {@link RemovePromptModel}. */
+    async removePromptModel(index) {
+        return this.RemovePromptModel(index);
+    }
     /**
      * Gets the display name for a model ID
      */
-    getModelDisplayName(modelId) {
+    GetModelDisplayName(modelId) {
         if (!modelId)
             return '';
-        const model = this.availableModels.find(m => UUIDsEqual(m.ID, modelId));
+        const model = this.AvailableModels.find(m => UUIDsEqual(m.ID, modelId));
         return model ? model.Name : modelId;
     }
+    /** @deprecated Use {@link GetModelDisplayName}. */
+    getModelDisplayName(modelId) {
+        return this.GetModelDisplayName(modelId);
+    }
     /**
      * Gets the display name for a vendor ID
      */
-    getVendorDisplayName(vendorId) {
+    GetVendorDisplayName(vendorId) {
         if (!vendorId)
             return '';
-        const vendor = this.availableVendors.find(v => UUIDsEqual(v.ID, vendorId));
+        const vendor = this.AvailableVendors.find(v => UUIDsEqual(v.ID, vendorId));
         return vendor ? vendor.Name : vendorId;
     }
+    /** @deprecated Use {@link GetVendorDisplayName}. */
+    getVendorDisplayName(vendorId) {
+        return this.GetVendorDisplayName(vendorId);
+    }
     /**
      * Gets the display name for a prompt type ID
      */
-    getPromptTypeDisplayName(typeId) {
+    GetPromptTypeDisplayName(typeId) {
         if (!typeId)
             return '';
-        const type = this.availablePromptTypes.find(t => UUIDsEqual(t.ID, typeId));
+        const type = this.AvailablePromptTypes.find(t => UUIDsEqual(t.ID, typeId));
         return type ? type.Name : typeId;
     }
+    /** @deprecated Use {@link GetPromptTypeDisplayName}. */
+    getPromptTypeDisplayName(typeId) {
+        return this.GetPromptTypeDisplayName(typeId);
+    }
     /**
      * Gets the display name for a configuration ID
      */
-    getConfigurationDisplayName(configurationId) {
+    GetConfigurationDisplayName(configurationId) {
         if (!configurationId)
             return 'Default';
-        const config = this.availableConfigurations.find(c => UUIDsEqual(c.ID, configurationId));
+        const config = this.AvailableConfigurations.find(c => UUIDsEqual(c.ID, configurationId));
         return config ? config.Name : configurationId;
     }
+    /** @deprecated Use {@link GetConfigurationDisplayName}. */
+    getConfigurationDisplayName(configurationId) {
+        return this.GetConfigurationDisplayName(configurationId);
+    }
     /**
      * Override PopulatePendingRecords to add AI prompt model changes
      */
@@ -2461,6 +2814,11 @@ let MJAIPromptFormComponentExtended = class MJAIPromptFormComponentExtended exte
         this.addPromptModelsToPendingRecords();
         // Handle template content changes through the template editor
         this.addTemplateContentsToPendingRecords();
+        // The preserved copy above and the fresh collection can name the same entity (a retry after a
+        // failed save); keep one pending record per entity object.
+        const unique = DedupePendingRecordsByEntity(this.PendingRecords);
+        this.PendingRecords.length = 0;
+        this.PendingRecords.push(...unique);
     }
     /**
      * Override StartEditMode to capture original state for cancel functionality
@@ -2485,20 +2843,20 @@ let MJAIPromptFormComponentExtended = class MJAIPromptFormComponentExtended exte
                 this.cdr.detectChanges();
             });
         }
-        else if (this.templateEditor) {
+        else if (this.TemplateEditor) {
             // Even if template didn't change, refresh the template editor to discard any unsaved content changes
-            this.templateEditor.refreshAndDiscardChanges();
+            this.TemplateEditor.refreshAndDiscardChanges();
         }
         // Clear the stored original state
         this.originalTemplateID = null;
-        this.hasUnsavedChanges = false;
+        this.HasUnsavedChanges = false;
     }
     /**
      * Adds prompt model changes to the pending records
      */
     addPromptModelsToPendingRecords() {
         // Add all prompt models that have been modified or are new
-        for (const model of this.promptModels) {
+        for (const model of this.PromptModels) {
             if (model.ModelID && (model.Dirty || !model.IsSaved)) {
                 // Set the PromptID if it's not already set
                 if (!model.PromptID) {
@@ -2559,9 +2917,9 @@ let MJAIPromptFormComponentExtended = class MJAIPromptFormComponentExtended exte
             const success = await transactionGroup.Submit();
             if (success) {
                 // Clear our local state since save was successful
-                this.hasUnsavedChanges = false;
+                this.HasUnsavedChanges = false;
                 // Reload prompt models to reflect database state
-                await this.loadPromptModels();
+                await this.LoadPromptModels();
                 // Reload template to reflect any changes
                 if (this.record.TemplateID) {
                     await this.loadTemplate();
@@ -2583,8 +2941,8 @@ let MJAIPromptFormComponentExtended = class MJAIPromptFormComponentExtended exte
     /**
      * Loads the result selector tree data (categories and prompts)
      */
-    async loadResultSelectorTreeData() {
-        this.isLoadingResultSelectorData = true;
+    async LoadResultSelectorTreeData() {
+        this.IsLoadingResultSelectorData = true;
         try {
             // Load categories and prompts
             const engine = AIEngineBase.Instance;
@@ -2594,16 +2952,20 @@ let MJAIPromptFormComponentExtended = class MJAIPromptFormComponentExtended exte
             categories.sort((a, b) => a.Name.localeCompare(b.Name));
             prompts.sort((a, b) => a.Name.localeCompare(b.Name));
             // Build tree structure
-            this.resultSelectorTreeData = this.buildResultSelectorTree(categories, prompts);
+            this.ResultSelectorTreeData = this.buildResultSelectorTree(categories, prompts);
         }
         catch (error) {
             console.error('Error loading result selector tree data:', error);
-            this.resultSelectorTreeData = [];
+            this.ResultSelectorTreeData = [];
         }
         finally {
-            this.isLoadingResultSelectorData = false;
+            this.IsLoadingResultSelectorData = false;
         }
     }
+    /** @deprecated Use {@link LoadResultSelectorTreeData}. */
+    async loadResultSelectorTreeData() {
+        return this.LoadResultSelectorTreeData();
+    }
     /**
      * Builds the tree structure for result selector
      */
@@ -2687,13 +3049,17 @@ let MJAIPromptFormComponentExtended = class MJAIPromptFormComponentExtended exte
     /**
      * Handles result selector selection
      */
-    onResultSelectorChange(value) {
+    OnResultSelectorChange(value) {
         this.record.ResultSelectorPromptID = value || null;
     }
+    /** @deprecated Use {@link OnResultSelectorChange}. */
+    onResultSelectorChange(value) {
+        return this.OnResultSelectorChange(value);
+    }
     /**
      * Gets the display name for a prompt ID from the tree data
      */
-    getPromptDisplayName(promptId) {
+    GetPromptDisplayName(promptId) {
         if (!promptId)
             return '';
         const findPromptInTree = (nodes) => {
@@ -2709,21 +3075,25 @@ let MJAIPromptFormComponentExtended = class MJAIPromptFormComponentExtended exte
             }
             return '';
         };
-        return findPromptInTree(this.resultSelectorTreeData);
+        return findPromptInTree(this.ResultSelectorTreeData);
+    }
+    /** @deprecated Use {@link GetPromptDisplayName}. */
+    getPromptDisplayName(promptId) {
+        return this.GetPromptDisplayName(promptId);
     }
     /**
      * Moves a model up in the list by swapping with the previous item
      */
-    moveModelUp(index) {
-        if (index > 0 && index < this.promptModels.length) {
+    MoveModelUp(index) {
+        if (index > 0 && index < this.PromptModels.length) {
             // Create new array to ensure Angular detects the change
-            const newModels = [...this.promptModels];
+            const newModels = [...this.PromptModels];
             // Swap with previous item
             [newModels[index - 1], newModels[index]] =
                 [newModels[index], newModels[index - 1]];
             // Replace the array and force full re-render
-            this.promptModels = [...newModels];
-            this.hasUnsavedChanges = true;
+            this.PromptModels = [...newModels];
+            this.HasUnsavedChanges = true;
             this.updateModelPriorities();
             // Force Angular to re-evaluate all bindings
             this.cdr.detectChanges();
@@ -2733,19 +3103,23 @@ let MJAIPromptFormComponentExtended = class MJAIPromptFormComponentExtended exte
             }, 0);
         }
     }
+    /** @deprecated Use {@link MoveModelUp}. */
+    moveModelUp(index) {
+        return this.MoveModelUp(index);
+    }
     /**
      * Moves a model down in the list by swapping with the next item
      */
-    moveModelDown(index) {
-        if (index >= 0 && index < this.promptModels.length - 1) {
+    MoveModelDown(index) {
+        if (index >= 0 && index < this.PromptModels.length - 1) {
             // Create new array to ensure Angular detects the change
-            const newModels = [...this.promptModels];
+            const newModels = [...this.PromptModels];
             // Swap with next item
             [newModels[index], newModels[index + 1]] =
                 [newModels[index + 1], newModels[index]];
             // Replace the array and force full re-render
-            this.promptModels = [...newModels];
-            this.hasUnsavedChanges = true;
+            this.PromptModels = [...newModels];
+            this.HasUnsavedChanges = true;
             this.updateModelPriorities();
             // Force Angular to re-evaluate all bindings
             this.cdr.detectChanges();
@@ -2755,52 +3129,68 @@ let MJAIPromptFormComponentExtended = class MJAIPromptFormComponentExtended exte
             }, 0);
         }
     }
+    /** @deprecated Use {@link MoveModelDown}. */
+    moveModelDown(index) {
+        return this.MoveModelDown(index);
+    }
     /**
      * Updates priority values based on array order
      */
     updateModelPriorities() {
         // Update priorities based on position (higher priority for items at top)
-        const maxPriority = this.promptModels.length;
-        this.promptModels.forEach((model, index) => {
+        const maxPriority = this.PromptModels.length;
+        this.PromptModels.forEach((model, index) => {
             model.Priority = maxPriority - index;
         });
     }
     /**
      * Gets a stable identifier for a model (for form tracking)
      */
-    getModelTrackId(model) {
+    GetModelTrackId(model) {
         return model.ID || model._tempId || '';
     }
+    /** @deprecated Use {@link GetModelTrackId}. */
+    getModelTrackId(model) {
+        return this.GetModelTrackId(model);
+    }
     /**
      * Handles drag start event
      */
-    onDragStart(event, index) {
-        this.draggedIndex = index;
+    OnDragStart(event, index) {
+        this.DraggedIndex = index;
         event.dataTransfer.effectAllowed = 'move';
         event.dataTransfer.setData('text/html', ''); // Required for Firefox
     }
+    /** @deprecated Use {@link OnDragStart}. */
+    onDragStart(event, index) {
+        return this.OnDragStart(event, index);
+    }
     /**
      * Handles drag over event
      */
-    onDragOver(event) {
+    OnDragOver(event) {
         event.preventDefault();
         event.dataTransfer.dropEffect = 'move';
     }
+    /** @deprecated Use {@link OnDragOver}. */
+    onDragOver(event) {
+        return this.OnDragOver(event);
+    }
     /**
      * Handles drop event
      */
-    onDrop(event, dropIndex) {
+    OnDrop(event, dropIndex) {
         event.preventDefault();
-        if (this.draggedIndex !== -1 && this.draggedIndex !== dropIndex) {
+        if (this.DraggedIndex !== -1 && this.DraggedIndex !== dropIndex) {
             // Create new array to ensure Angular detects the change
-            const newModels = [...this.promptModels];
+            const newModels = [...this.PromptModels];
             // Remove dragged item
-            const draggedItem = newModels.splice(this.draggedIndex, 1)[0];
+            const draggedItem = newModels.splice(this.DraggedIndex, 1)[0];
             // Insert at new position
             newModels.splice(dropIndex, 0, draggedItem);
             // Replace the array and force full re-render
-            this.promptModels = [...newModels];
-            this.hasUnsavedChanges = true;
+            this.PromptModels = [...newModels];
+            this.HasUnsavedChanges = true;
             // Update priorities
             this.updateModelPriorities();
             // Force Angular to re-evaluate all bindings
@@ -2810,21 +3200,29 @@ let MJAIPromptFormComponentExtended = class MJAIPromptFormComponentExtended exte
                 this.cdr.detectChanges();
             }, 0);
         }
-        this.draggedIndex = -1;
+        this.DraggedIndex = -1;
+    }
+    /** @deprecated Use {@link OnDrop}. */
+    onDrop(event, dropIndex) {
+        return this.OnDrop(event, dropIndex);
     }
     /**
      * Handles drag end event
      */
+    OnDragEnd(_event) {
+        this.DraggedIndex = -1;
+    }
+    /** @deprecated Use {@link OnDragEnd}. */
     onDragEnd(_event) {
-        this.draggedIndex = -1;
+        return this.OnDragEnd(_event);
     }
     /**
      * Load execution history for this prompt
      */
-    async loadExecutionHistory() {
+    async LoadExecutionHistory() {
         if (!this.record?.ID)
             return;
-        this.isLoadingHistory = true;
+        this.IsLoadingHistory = true;
         try {
             const rv = RunView.FromMetadataProvider(this.ProviderToUse);
             const result = await rv.RunView({
@@ -2832,26 +3230,30 @@ let MJAIPromptFormComponentExtended = class MJAIPromptFormComponentExtended exte
                 ExtraFilter: `PromptID='${this.record.ID}'`,
                 OrderBy: 'RunAt DESC'
             });
-            this.executionHistory = result.Results;
-            this.sortExecutionHistory();
+            this.ExecutionHistory = result.Results;
+            this.SortExecutionHistory();
         }
         catch (error) {
             console.error('Error loading execution history:', error);
-            this.executionHistory = [];
+            this.ExecutionHistory = [];
         }
         finally {
-            this.isLoadingHistory = false;
+            this.IsLoadingHistory = false;
         }
     }
+    /** @deprecated Use {@link LoadExecutionHistory}. */
+    async loadExecutionHistory() {
+        return this.LoadExecutionHistory();
+    }
     /**
      * Sort execution history based on current sort field and direction
      */
-    sortExecutionHistory() {
-        if (!this.executionHistory || this.executionHistory.length === 0)
+    SortExecutionHistory() {
+        if (!this.ExecutionHistory || this.ExecutionHistory.length === 0)
             return;
-        this.executionHistory.sort((a, b) => {
+        this.ExecutionHistory.sort((a, b) => {
             let aVal, bVal;
-            switch (this.historySortField) {
+            switch (this.HistorySortField) {
                 case 'runAt':
                     aVal = a.RunAt ? new Date(a.RunAt).getTime() : 0;
                     bVal = b.RunAt ? new Date(b.RunAt).getTime() : 0;
@@ -2869,7 +3271,7 @@ let MJAIPromptFormComponentExtended = class MJAIPromptFormComponentExtended exte
                     bVal = b.TokensUsed || 0;
                     break;
             }
-            if (this.historySortDirection === 'asc') {
+            if (this.HistorySortDirection === 'asc') {
                 return aVal > bVal ? 1 : aVal < bVal ? -1 : 0;
             }
             else {
@@ -2877,27 +3279,39 @@ let MJAIPromptFormComponentExtended = class MJAIPromptFormComponentExtended exte
             }
         });
     }
+    /** @deprecated Use {@link SortExecutionHistory}. */
+    sortExecutionHistory() {
+        return this.SortExecutionHistory();
+    }
     /**
      * Change sort field and direction for execution history
      */
-    changeHistorySort(field) {
-        if (this.historySortField === field) {
+    ChangeHistorySort(field) {
+        if (this.HistorySortField === field) {
             // Toggle direction if same field
-            this.historySortDirection = this.historySortDirection === 'asc' ? 'desc' : 'asc';
+            this.HistorySortDirection = this.HistorySortDirection === 'asc' ? 'desc' : 'asc';
         }
         else {
             // New field, default to desc
-            this.historySortField = field;
-            this.historySortDirection = 'desc';
+            this.HistorySortField = field;
+            this.HistorySortDirection = 'desc';
         }
-        this.sortExecutionHistory();
+        this.SortExecutionHistory();
+    }
+    /** @deprecated Use {@link ChangeHistorySort}. */
+    changeHistorySort(field) {
+        return this.ChangeHistorySort(field);
     }
     /**
      * Navigate to a prompt run record
      */
-    navigateToPromptRun(runId) {
+    NavigateToPromptRun(runId) {
         SharedService.Instance.OpenEntityRecord('MJ: AI Prompt Runs', CompositeKey.FromID(runId));
     }
+    /** @deprecated Use {@link NavigateToPromptRun}. */
+    navigateToPromptRun(runId) {
+        return this.NavigateToPromptRun(runId);
+    }
     /**
      * Format duration for display
      */
@@ -2919,43 +3333,59 @@ let MJAIPromptFormComponentExtended = class MJAIPromptFormComponentExtended exte
     /**
      * Format cost for display
      */
-    formatCost(cost) {
+    FormatCost(cost) {
         if (!cost)
             return '-';
         return `$${cost.toFixed(4)}`;
     }
+    /** @deprecated Use {@link FormatCost}. */
+    formatCost(cost) {
+        return this.FormatCost(cost);
+    }
     /**
      * Format tokens for display
      */
-    formatTokens(tokens) {
+    FormatTokens(tokens) {
         if (!tokens)
             return '-';
         return tokens.toLocaleString();
     }
+    /** @deprecated Use {@link FormatTokens}. */
+    formatTokens(tokens) {
+        return this.FormatTokens(tokens);
+    }
     /**
      * Get status color for execution
      */
-    getExecutionStatusColor(success) {
+    GetExecutionStatusColor(success) {
         if (success === true)
             return '#28a745';
         if (success === false)
             return '#dc3545';
         return '#ffc107';
     }
+    /** @deprecated Use {@link GetExecutionStatusColor}. */
+    getExecutionStatusColor(success) {
+        return this.GetExecutionStatusColor(success);
+    }
     /**
      * Get status icon for execution
      */
-    getExecutionStatusIcon(success) {
+    GetExecutionStatusIcon(success) {
         if (success === true)
             return 'fa-check-circle';
         if (success === false)
             return 'fa-times-circle';
         return 'fa-spinner fa-spin';
     }
+    /** @deprecated Use {@link GetExecutionStatusIcon}. */
+    getExecutionStatusIcon(success) {
+        return this.GetExecutionStatusIcon(success);
+    }
     /**
      * Gets the icon for a template parameter type
      */
-    getParamTypeIcon(type) {
+    GetParamTypeIcon(type) {
         switch (type) {
             case 'Scalar': return 'fa-font';
             case 'Array': return 'fa-list';
@@ -2965,10 +3395,14 @@ let MJAIPromptFormComponentExtended = class MJAIPromptFormComponentExtended exte
             default: return 'fa-question';
         }
     }
+    /** @deprecated Use {@link GetParamTypeIcon}. */
+    getParamTypeIcon(type) {
+        return this.GetParamTypeIcon(type);
+    }
     /**
      * Gets the color for a template parameter type
      */
-    getParamTypeColor(type) {
+    GetParamTypeColor(type) {
         switch (type) {
             case 'Scalar': return '#17a2b8';
             case 'Array': return '#28a745';
@@ -2978,10 +3412,14 @@ let MJAIPromptFormComponentExtended = class MJAIPromptFormComponentExtended exte
             default: return '#6c757d';
         }
     }
+    /** @deprecated Use {@link GetParamTypeColor}. */
+    getParamTypeColor(type) {
+        return this.GetParamTypeColor(type);
+    }
     /**
      * Gets a friendly description of the parameter type
      */
-    getParamTypeDescription(param) {
+    GetParamTypeDescription(param) {
         switch (param.Type) {
             case 'Scalar':
                 return 'Single value (text, number, date, etc.)';
@@ -3003,12 +3441,16 @@ let MJAIPromptFormComponentExtended = class MJAIPromptFormComponentExtended exte
                 return 'Unknown type';
         }
     }
+    /** @deprecated Use {@link GetParamTypeDescription}. */
+    getParamTypeDescription(param) {
+        return this.GetParamTypeDescription(param);
+    }
     static { this.ɵfac = /*@__PURE__*/ (() => { let ɵMJAIPromptFormComponentExtended_BaseFactory; return function MJAIPromptFormComponentExtended_Factory(__ngFactoryType__) { return (ɵMJAIPromptFormComponentExtended_BaseFactory || (ɵMJAIPromptFormComponentExtended_BaseFactory = i0.ɵɵgetInheritedFactory(MJAIPromptFormComponentExtended)))(__ngFactoryType__ || MJAIPromptFormComponentExtended); }; })(); }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJAIPromptFormComponentExtended, selectors: [["mj-ai-prompt-form"]], viewQuery: function MJAIPromptFormComponentExtended_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c0, 5);
         } if (rf & 2) {
             let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.templateEditor = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.TemplateEditor = _t.first);
         } }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 3, vars: 2, consts: [["form", "ngForm"], ["templateEditor", ""], [3, "Record", "FormComponent", "ToolbarConfig", "WidthMode"], [3, "Width", "Height", "MinWidth", "MinHeight", "Draggable", "Resizable", "Visible", "Title"], [3, "Navigate", "DeleteRequested", "FavoriteToggled", "HistoryRequested", "ListManagementRequested", "Record", "FormComponent", "ToolbarConfig", "WidthMode"], [1, "record-form", 2, "display", "flex", "flex-direction", "column", "height", "100%", "overflow", "hidden"], [1, "prompt-main-area", 2, "display", "flex", "flex-direction", "column", "flex", "1", "min-height", "0", "overflow-y", "auto"], [1, "prompt-header", 2, "flex-shrink", "0", "padding", "20px", "background", "var(--mj-bg-surface-sunken)", "border-bottom", "2px solid var(--mj-border-default)"], [2, "display", "flex", "justify-content", "space-between", "align-items", "flex-start", "gap", "20px"], [2, "flex", "1", "min-width", "0"], [2, "display", "flex", "align-items", "center", "gap", "12px", "margin-bottom", "8px"], [1, "fa-solid", "fa-robot", 2, "color", "var(--mj-brand-primary)", "font-size", "1.4em"], ["type", "text", "name", "promptName", "placeholder", "Enter prompt name...", 1, "mj-input", 2, "font-size", "1.2em", "font-weight", "600", "min-width", "300px", "flex", "1", 3, "ngModel"], [2, "display", "flex", "gap", "16px", "margin-bottom", "12px", "flex-wrap", "wrap"], ["name", "promptDescription", "placeholder", "Enter prompt description...", 1, "mj-textarea", 2, "width", "100%", "max-width", "600px", "margin-bottom", "12px", 3, "ngModel", "rows"], [2, "margin", "0 0 12px 0", "color", "var(--mj-text-muted)", "font-size", "0.9em", "line-height", "1.4"], [1, "quick-config", 2, "display", "flex", "align-items", "center", "gap", "16px", "flex-wrap", "wrap"], [1, "config-item", 2, "display", "flex", "align-items", "center", "gap", "6px", "font-size", "0.85em"], [1, "fa-solid", "fa-layer-group", 2, "color", "var(--mj-text-muted)"], [2, "color", "var(--mj-text-muted)"], [2, "color", "var(--mj-text-secondary)", "font-weight", "500"], [1, "fa-solid", "fa-code", 2, "color", "var(--mj-text-muted)"], [2, "font-weight", "500"], [1, "action-buttons", 2, "display", "flex", "flex-direction", "column", "gap", "8px", "align-items", "flex-end"], [2, "display", "flex", "gap", "8px"], ["mjButton", "", "variant", "primary", "size", "lg", "title", "Run AI Prompt Test Harness"], [2, "font-size", "0.75em", "color", "#dc3545", "text-align", "right", "max-width", "200px"], [1, "configuration-sections", 2, "flex", "1", "background", "var(--mj-bg-surface-card)", "border-top", "2px solid var(--mj-border-default)", "padding", "16px", "min-height", "0"], [2, "margin-bottom", "12px", 3, "Expanded"], ["mjAccordionTitle", ""], [1, "template-section", 2, "display", "flex", "flex-direction", "column", "min-height", "400px", "padding", "8px"], [1, "loading-state", 2, "flex", "1", "display", "flex", "align-items", "center", "justify-content", "center", "color", "var(--mj-text-muted)"], ["Size", "large", "Icon", "fa-solid fa-code", "Title", "No Template Associated", "Message", "This AI prompt needs a template to define its structure and parameters. Create a new template or link to an existing one.", 1, "no-template-state"], ["Variant", "warning", "Title", "Template Not Found", "Message", "The referenced template could not be loaded. It may have been deleted or moved.", 1, "invalid-template-state"], [1, "template-editor-container", 2, "flex", "1", "display", "flex", "flex-direction", "column", "min-height", "350px"], [2, "padding", "16px 0"], [2, "display", "grid", "grid-template-columns", "1fr 1fr", "gap", "20px"], ["FieldName", "ParallelizationMode", "Type", "dropdownlist", 3, "Record", "ShowLabel", "EditMode"], ["FieldName", "ParallelCount", "Type", "numerictextbox", 3, "Record", "ShowLabel", "EditMode"], ["FieldName", "ParallelConfigParam", "Type", "textbox", 3, "Record", "ShowLabel", "EditMode"], ["FieldName", "OutputType", "Type", "dropdownlist", 3, "Record", "ShowLabel", "EditMode"], ["FieldName", "EffortLevel", "Type", "numerictextbox", "Caption", "Effort Level (1-100)", "Description", "Higher values request more thorough reasoning", 3, "Record", "ShowLabel", "EditMode"], ["FieldName", "ValidationBehavior", "Type", "dropdownlist", 3, "Record", "ShowLabel", "EditMode"], ["FieldName", "EnableCaching", "Type", "checkbox", 3, "Record", "ShowLabel", "EditMode"], [2, "margin-bottom", "16px"], [2, "display", "block", "margin-bottom", "4px", "font-weight", "600", "color", "var(--mj-text-secondary)", "font-size", "0.9em"], [2, "color", "var(--mj-text-secondary)"], [2, "margin", "0 0 12px 0", "font-size", "0.85em", "color", "var(--mj-text-muted)"], ["FieldName", "AssistantPrefill", "Type", "textarea", 3, "Record", "ShowLabel", "EditMode"], ["FieldName", "StopSequences", "Type", "textbox", 3, "Record", "ShowLabel", "EditMode"], ["FieldName", "PrefillFallbackMode", "Type", "dropdownlist", 3, "Record", "ShowLabel", "EditMode"], ["type", "text", "name", "promptName", "placeholder", "Enter prompt name...", 1, "mj-input", 2, "font-size", "1.2em", "font-weight", "600", "min-width", "300px", "flex", "1", 3, "ngModelChange", "ngModel"], [2, "margin", "0", "color", "var(--mj-text-secondary)", "font-weight", "600", "flex", "1"], [1, "status-badge", 2, "color", "white", "padding", "4px 10px", "border-radius", "12px", "font-size", "0.75em", "font-weight", "500"], ["name", "promptStatus", "TextField", "text", "ValueField", "value", 2, "width", "150px", 3, "ngModelChange", "ngModel", "Data", "ValuePrimitive"], [2, "color", "#dc3545"], [2, "padding", "8px", "color", "var(--mj-text-muted)", "font-style", "italic", "width", "200px"], ["name", "promptTypeID", "TextField", "Name", "ValueField", "ID", "Placeholder", "Select prompt type...", 2, "width", "200px", 3, "ngModel", "Data", "ValuePrimitive", "Filterable"], [1, "fa-solid", "fa-spinner", "fa-spin"], ["name", "promptTypeID", "TextField", "Name", "ValueField", "ID", "Placeholder", "Select prompt type...", 2, "width", "200px", 3, "ngModelChange", "ngModel", "Data", "ValuePrimitive", "Filterable"], ["name", "promptDescription", "placeholder", "Enter prompt description...", 1, "mj-textarea", 2, "width", "100%", "max-width", "600px", "margin-bottom", "12px", 3, "ngModelChange", "ngModel", "rows"], [1, "fa-solid", "fa-tag", 2, "color", "var(--mj-text-muted)"], [1, "fa-solid", "fa-database", 2, "color", "#28a745"], [2, "color", "#28a745", "font-weight", "500"], [1, "fa-solid", "fa-tachometer-alt", 2, "color", "var(--mj-text-muted)"], ["mjButton", "", "variant", "primary", "size", "lg", "title", "Run AI Prompt Test Harness", 3, "click"], [1, "fa-solid", "fa-play"], [2, "display", "flex", "align-items", "center", "gap", "8px", "font-weight", "600"], [2, "color", "var(--mj-text-muted)", "font-size", "0.9em", "font-weight", "normal"], [1, "fa-solid", "fa-spinner", "fa-spin", 2, "font-size", "24px", "margin-right", "12px"], ["ngProjectAs", "[actions]", 5, ["", "actions", ""], 2, "display", "flex", "gap", "12px"], ["mjButton", "", "variant", "primary"], ["mjButton", "", "variant", "outline"], ["mjButton", "", "variant", "primary", 3, "click"], [1, "fa-solid", "fa-plus"], ["mjButton", "", "variant", "outline", 3, "click"], [1, "fa-solid", "fa-link"], [1, "fa-solid", "fa-arrows-rotate"], [1, "template-actions", 2, "display", "flex", "gap", "8px", "padding", "8px", "border-bottom", "1px solid var(--mj-border-default)", "background", "var(--mj-bg-surface-sunken)"], [2, "flex", "1", "background", "var(--mj-bg-surface-card)", "border-radius", "6px", "border", "1px solid var(--mj-border-default)"], [2, "display", "block", "min-height", "300px", 3, "contentChange", "runTemplate", "template", "config"], ["mjButton", "", "variant", "outline", "size", "sm", "title", "Change to a different template"], ["mjButton", "", "variant", "outline", "size", "sm", "title", "Open template in new window"], ["mjButton", "", "variant", "outline", "size", "sm", "title", "Change to a different template", 3, "click"], [1, "fa-solid", "fa-exchange-alt"], ["mjButton", "", "variant", "outline", "size", "sm", "title", "Open template in new window", 3, "click"], [1, "fa-solid", "fa-external-link-alt"], [1, "model-management", 2, "border", "1px solid var(--mj-border-default)", "border-radius", "6px", "background", "var(--mj-bg-surface-sunken)"], [1, "loading-state", 2, "padding", "20px", "text-align", "center", "color", "var(--mj-text-muted)"], [1, "fa-solid", "fa-microchip", 2, "color", "var(--mj-text-muted)"], [1, "mj-accordion-badge"], [2, "color", "var(--mj-text-muted)", "font-size", "0.8em", "font-weight", "normal", "margin-left", "8px"], ["title", "Models are tried in order from top to bottom. The first available model will be used.", 1, "fa-solid", "fa-info-circle"], ["Size", "compact", "Icon", "fa-solid fa-circle-info", "Title", "No models configured"], ["ngProjectAs", "[actions]", "mjButton", "", "variant", "outline", "size", "sm", 5, ["", "actions", ""]], ["ngProjectAs", "[actions]", "mjButton", "", "variant", "outline", "size", "sm", 5, ["", "actions", ""], 3, "click"], [2, "padding", "12px 16px", "background", "color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface))", "border-bottom", "1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-border-default))", "color", "var(--mj-brand-primary)", "font-size", "0.85em"], [1, "model-header", 2, "display", "grid", "grid-template-columns", "40px 2fr 1fr 1fr 1fr 60px", "gap", "12px", "padding", "12px 16px", "background", "var(--mj-bg-surface-sunken)", "font-weight", "600", "font-size", "0.85em", "color", "var(--mj-text-secondary)", "border-bottom", "1px solid var(--mj-border-default)"], ["title", "Priority order - models are tried from top to bottom"], [1, "fa-solid", "fa-sort", 2, "color", "var(--mj-text-muted)"], [1, "add-model-row", 2, "padding", "12px 16px", "text-align", "center", "background", "var(--mj-bg-surface-sunken)", "border-top", "1px solid var(--mj-border-default)"], [1, "fa-solid", "fa-info-circle", 2, "margin-right", "6px"], [1, "model-row", 2, "display", "grid", "grid-template-columns", "40px 2fr 1fr 1fr 1fr 60px", "gap", "12px", "padding", "12px 16px", "border-bottom", "1px solid var(--mj-border-default)", "align-items", "start", "transition", "background 0.2s, opacity 0.2s", 3, "dragstart", "dragover", "drop", "dragend", "draggable"], [1, "drag-handle", 2, "display", "flex", "flex-direction", "column", "align-items", "center", "justify-content", "center", "color", "var(--mj-text-muted)"], [2, "font-size", "0.9em", "font-weight", "600", 3, "title"], [1, "model-select"], ["TextField", "Name", "ValueField", "ID", "Placeholder", "Select a model...", 2, "width", "100%", 3, "ngModel", "name", "Data", "ValuePrimitive", "Filterable"], [1, "model-vendor"], [1, "model-configuration"], [2, "font-size", "0.9em"], [1, "model-created"], [2, "color", "var(--mj-text-muted)", "font-size", "0.8em"], [2, "color", "#28a745", "font-size", "0.8em", "font-style", "italic"], [1, "model-actions", 2, "display", "flex", "gap", "2px", "flex-direction", "column"], [2, "display", "grid", "grid-template-columns", "40px 1fr", "gap", "12px", "padding", "8px 16px", "border-bottom", "1px solid var(--mj-border-default)", "background", "var(--mj-bg-surface-sunken)", "font-size", "0.85em", "color", "var(--mj-text-muted)"], [2, "display", "flex", "gap", "16px", "flex-wrap", "wrap", "align-items", "center", "margin-bottom", "8px"], [2, "padding", "8px", "background", "var(--mj-bg-surface-card)", "border", "1px solid var(--mj-border-default)", "border-radius", "4px", "margin-top", "8px"], ["title", "Drag to reorder priority", 1, "fa-solid", "fa-grip-vertical", 2, "cursor", "move"], [2, "font-size", "0.7em", "margin-top", "2px"], ["TextField", "Name", "ValueField", "ID", "Placeholder", "Select a model...", 2, "width", "100%", 3, "ngModelChange", "ValueChange", "ngModel", "name", "Data", "ValuePrimitive", "Filterable"], [2, "color", "var(--mj-text-muted)", "font-style", "italic", "font-size", "0.9em"], ["TextField", "Name", "ValueField", "ID", "Placeholder", "Select vendor...", 2, "width", "100%", 3, "ngModel", "name", "Data", "ValuePrimitive", "Filterable"], ["TextField", "Name", "ValueField", "ID", "Placeholder", "Select vendor...", 2, "width", "100%", 3, "ngModelChange", "ngModel", "name", "Data", "ValuePrimitive", "Filterable"], [2, "font-size", "0.9em", "font-weight", "500", 3, "color"], [2, "font-size", "0.9em", "font-weight", "500"], [2, "font-size", "0.8em", "margin-left", "4px"], [2, "font-size", "0.9em", 3, "color"], [2, "color", "var(--mj-text-muted)", "font-size", "0.9em"], [2, "padding", "4px", "color", "var(--mj-text-muted)", "font-style", "italic", "font-size", "0.85em"], ["TextField", "Name", "ValueField", "ID", "Placeholder", "Default", 2, "width", "100%", 3, "ngModel", "name", "Data", "ValuePrimitive", "Filterable"], ["TextField", "Name", "ValueField", "ID", "Placeholder", "Default", 2, "width", "100%", 3, "ngModelChange", "ValueChange", "ngModel", "name", "Data", "ValuePrimitive", "Filterable"], [2, "display", "flex", "gap", "2px", "margin-bottom", "4px"], ["mjButton", "", "variant", "flat", "size", "sm", "title", "Remove model", 2, "color", "var(--mj-status-error)"], ["mjButton", "", "variant", "flat", "size", "sm", "title", "Move up", 3, "click", "disabled"], [1, "fa-solid", "fa-chevron-up"], ["mjButton", "", "variant", "flat", "size", "sm", "title", "Move down", 3, "click", "disabled"], [1, "fa-solid", "fa-chevron-down"], ["mjButton", "", "variant", "flat", "size", "sm", "title", "Remove model", 2, "color", "var(--mj-status-error)", 3, "click"], [1, "fa-solid", "fa-times"], [2, "margin-bottom", "6px", "font-weight", "600", "color", "var(--mj-text-secondary)", "font-size", "0.9em"], [1, "fa-solid", "fa-layer-group"], [2, "display", "grid", "grid-template-columns", "1fr 1fr 1fr", "gap", "12px", "align-items", "center"], [2, "display", "flex", "gap", "16px", "flex-wrap", "wrap", "align-items", "center"], [2, "display", "block", "margin-bottom", "2px", "font-size", "0.8em", "font-weight", "600", "color", "var(--mj-text-secondary)"], ["TextField", "text", "ValueField", "value", "Placeholder", "Select mode...", 2, "width", "100%", "font-size", "0.85em", 3, "ngModelChange", "ngModel", "name", "Data", "ValuePrimitive"], ["Placeholder", "Count...", 2, "width", "100%", "font-size", "0.85em", 3, "ngModelChange", "ngModel", "name", "Min", "Step", "Format"], ["type", "text", "placeholder", "Parameter name...", 1, "mj-input", 2, "width", "100%", "font-size", "0.85em", 3, "ngModelChange", "ngModel", "name"], ["mjButton", "", "variant", "outline", "size", "sm", 2, "color", "var(--mj-status-success)", "border-color", "var(--mj-status-success)", 3, "click"], [1, "fa-solid", "fa-cogs", 2, "color", "var(--mj-text-muted)"], [2, "padding", "8px", "color", "var(--mj-text-muted)", "font-style", "italic"], ["name", "resultSelectorPromptID", "TextField", "text", "ValueField", "value", "Placeholder", "Select a result selector prompt...", 2, "width", "100%", 3, "ngModel", "Data", "ValuePrimitive", "Filterable"], ["name", "resultSelectorPromptID", "TextField", "text", "ValueField", "value", "Placeholder", "Select a result selector prompt...", 2, "width", "100%", 3, "ngModelChange", "ValueChange", "ngModel", "Data", "ValuePrimitive", "Filterable"], [1, "fa-solid", "fa-wand-magic-sparkles", 2, "color", "var(--mj-text-muted)"], ["Size", "compact", "Icon", "fa-solid fa-circle-info", "Title", "This template has no parameters defined"], [1, "fa-solid", "fa-sliders", 2, "color", "var(--mj-text-muted)"], ["title", "These parameters are defined in the template and will be available when executing this prompt", 1, "fa-solid", "fa-info-circle"], [2, "display", "grid", "gap", "12px"], [1, "parameter-card", 2, "border", "1px solid var(--mj-border-default)", "border-radius", "8px", "padding", "16px", "background", "var(--mj-bg-surface-sunken)", "transition", "all 0.2s", 3, "border-left"], [2, "margin-top", "16px", "padding", "12px", "background", "color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface))", "border-radius", "6px", "border", "1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-border-default))"], [2, "display", "flex", "align-items", "flex-start", "gap", "8px"], [1, "fa-solid", "fa-lightbulb", 2, "color", "var(--mj-brand-primary)", "margin-top", "2px"], [2, "flex", "1", "font-size", "0.85em", "color", "var(--mj-brand-primary)", "line-height", "1.5"], [1, "parameter-card", 2, "border", "1px solid var(--mj-border-default)", "border-radius", "8px", "padding", "16px", "background", "var(--mj-bg-surface-sunken)", "transition", "all 0.2s"], [2, "display", "flex", "justify-content", "space-between", "align-items", "flex-start", "margin-bottom", "8px"], [2, "display", "flex", "align-items", "center", "gap", "8px"], [2, "font-size", "1.2em"], [2, "margin", "0", "color", "var(--mj-text-secondary)", "font-weight", "600"], [2, "color", "#dc3545", "font-size", "0.9em", "margin-left", "4px"], [1, "type-badge", 2, "color", "white", "padding", "4px 8px", "border-radius", "12px", "font-size", "0.75em", "font-weight", "500"], [2, "color", "#dc3545", "font-size", "0.85em", "font-weight", "500"], [2, "color", "var(--mj-text-muted)", "font-size", "0.85em"], [2, "margin", "0 0 8px 0", "color", "var(--mj-text-muted)", "font-size", "0.9em", "line-height", "1.4"], [2, "font-size", "0.85em", "color", "var(--mj-text-secondary)"], [2, "display", "flex", "align-items", "center", "gap", "4px", "margin-bottom", "4px"], [1, "fa-solid", "fa-info-circle", 2, "color", "var(--mj-text-muted)"], [2, "display", "grid", "grid-template-columns", "repeat(auto-fit, minmax(200px, 1fr))", "gap", "12px", "margin-top", "12px"], [2, "background", "var(--mj-bg-surface-card)", "padding", "8px 12px", "border-radius", "4px", "border", "1px solid var(--mj-border-default)"], [2, "display", "block", "font-size", "0.8em", "color", "var(--mj-text-muted)", "margin-bottom", "2px"], [2, "font-size", "0.85em", "color", "var(--mj-text-secondary)", "word-break", "break-all"], [2, "font-size", "0.8em", "color", "var(--mj-text-secondary)", "word-break", "break-all"], [2, "padding", "16px"], [2, "background", "var(--mj-bg-surface-sunken)", "border", "1px solid var(--mj-border-default)", "border-radius", "4px", "padding", "12px", "font-family", "'Courier New', monospace", "font-size", "0.9em", "white-space", "pre-wrap", "overflow", "auto", "max-height", "250px"], ["Variant", "warning"], [2, "color", "#dc3545", "font-size", "0.8em", "font-weight", "normal"], ["name", "outputExample", "language", "json", "placeholder", "Enter JSON example structure...", 2, "width", "100%", "height", "200px", "border", "1px solid var(--mj-border-default)", "border-radius", "4px", 3, "ngModelChange", "ngModel"], [2, "margin-top", "8px", "color", "var(--mj-text-muted)", "font-size", "0.85em"], [1, "fa-solid", "fa-info-circle"], [2, "text-align", "center", "padding", "40px", "color", "var(--mj-text-muted)"], ["Size", "compact", "Icon", "fa-solid fa-clock-rotate-left", "Title", "No execution history yet", "Message", "Run this prompt to see execution history here"], [1, "fa-solid", "fa-history", 2, "color", "var(--mj-text-muted)"], [2, "color", "var(--mj-text-muted)", "font-weight", "normal"], [1, "fa-solid", "fa-spinner", "fa-spin", 2, "font-size", "2em", "margin-bottom", "12px"], [2, "display", "flex", "justify-content", "space-between", "align-items", "center", "margin-bottom", "16px"], [2, "display", "flex", "gap", "8px", "align-items", "center"], [1, "mj-button-group"], ["mjButton", "", "size", "sm", 3, "click"], [2, "margin-left", "4px", "font-size", "0.8em", 3, "class"], [2, "border", "1px solid var(--mj-border-default)", "border-radius", "8px", "overflow", "hidden"], [2, "width", "100%", "border-collapse", "collapse"], [2, "background", "var(--mj-bg-surface-sunken)", "border-bottom", "2px solid var(--mj-border-default)"], [2, "padding", "12px", "text-align", "left", "font-weight", "600", "color", "var(--mj-text-secondary)"], [2, "padding", "12px", "text-align", "right", "font-weight", "600", "color", "var(--mj-text-secondary)"], [2, "padding", "12px", "text-align", "center", "font-weight", "600", "color", "var(--mj-text-secondary)"], [1, "history-row", 2, "border-bottom", "1px solid var(--mj-border-default)", 3, "even-row"], [2, "margin-left", "4px", "font-size", "0.8em"], [1, "history-row", 2, "border-bottom", "1px solid var(--mj-border-default)"], [2, "padding", "12px"], [2, "display", "flex", "align-items", "center", "gap", "6px"], [2, "padding", "12px", "color", "var(--mj-text-secondary)"], [2, "padding", "12px", "text-align", "right", "color", "var(--mj-text-secondary)"], [2, "padding", "12px", "text-align", "center"], [2, "padding", "4px 8px", "border-radius", "12px", "background", "var(--mj-bg-surface-sunken)", "color", "var(--mj-text-secondary)", "font-size", "0.85em", "font-weight", "500"], ["mjButton", "", "variant", "flat", "size", "sm", "title", "View details", 3, "click"], [1, "fa-solid", "fa-external-link"], [3, "Params", "NewRecordValues", "AllowLoad", "ShowToolbar"], [1, "fa-solid", "fa-database", 2, "color", "var(--mj-text-muted)"], [2, "margin", "0 0 12px 0", "color", "var(--mj-text-secondary)"], [1, "fa-solid", "fa-link", 2, "color", "var(--mj-text-muted)"], [3, "Close", "Width", "Height", "MinWidth", "MinHeight", "Draggable", "Resizable", "Visible", "Title"], [3, "visibilityChange", "entity", "mode", "isVisible"]], template: function MJAIPromptFormComponentExtended_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelement(0, "div");
             i0.ɵɵconditionalCreate(1, MJAIPromptFormComponentExtended_Conditional_1_Template, 77, 53, "mj-record-form-container", 2);
@@ -3027,9 +3469,9 @@ export { MJAIPromptFormComponentExtended };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJAIPromptFormComponentExtended, [{
         type: Component,
         args: [{ standalone: false, selector: 'mj-ai-prompt-form', template: "<!-- Dialog container -->\n<div></div>\n@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\" style=\"display: flex; flex-direction: column; height: 100%; overflow: hidden;\">\n      <!-- Main Content Area - Template Editor and Configuration -->\n      <div class=\"prompt-main-area\" style=\"display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto;\">\n        <!-- Header Section -->\n        <div class=\"prompt-header\" style=\"flex-shrink: 0; padding: 20px; background: var(--mj-bg-surface-sunken); border-bottom: 2px solid var(--mj-border-default);\">\n          <div style=\"display: flex; justify-content: space-between; align-items: flex-start; gap: 20px;\">\n            <!-- Left: Prompt Info -->\n            <div style=\"flex: 1; min-width: 0;\">\n              <div style=\"display: flex; align-items: center; gap: 12px; margin-bottom: 8px;\">\n                <i class=\"fa-solid fa-robot\" style=\"color: var(--mj-brand-primary); font-size: 1.4em;\"></i>\n                @if (EditMode) {\n                  <input type=\"text\" class=\"mj-input\" [(ngModel)]=\"record.Name\"\n                    name=\"promptName\"\n                    placeholder=\"Enter prompt name...\"\n                    style=\"font-size: 1.2em; font-weight: 600; min-width: 300px; flex: 1;\" />\n                } @else {\n                  <h4 style=\"margin: 0; color: var(--mj-text-secondary); font-weight: 600; flex: 1;\">{{ record.Name || 'Untitled AI Prompt' }}</h4>\n                  <span class=\"status-badge\" [style.background-color]=\"getStatusBadgeColor()\"\n                    style=\"color: white; padding: 4px 10px; border-radius: 12px; font-size: 0.75em; font-weight: 500;\">\n                    {{ record.Status }}\n                  </span>\n                }\n              </div>\n              <!-- Status and Type Editors when in edit mode -->\n              @if (EditMode) {\n                <div style=\"display: flex; gap: 16px; margin-bottom: 12px; flex-wrap: wrap;\">\n                  <div>\n                    <label style=\"display: block; margin-bottom: 4px; font-weight: 600; color: var(--mj-text-secondary); font-size: 0.9em;\">Status</label>\n                    <mj-dropdown [(ngModel)]=\"record.Status\"\n                      name=\"promptStatus\"\n                      [Data]=\"[{text: 'Active', value: 'Active'}, {text: 'Pending', value: 'Pending'}, {text: 'Disabled', value: 'Disabled'}]\"\n                      TextField=\"text\"\n                      ValueField=\"value\"\n                      [ValuePrimitive]=\"true\"\n                      style=\"width: 150px;\">\n                    </mj-dropdown>\n                  </div>\n                  <div>\n                    <label style=\"display: block; margin-bottom: 4px; font-weight: 600; color: var(--mj-text-secondary); font-size: 0.9em;\">\n                      Type <span style=\"color: #dc3545;\">*</span>\n                    </label>\n                    @if (isLoadingPromptTypes) {\n                      <div style=\"padding: 8px; color: var(--mj-text-muted); font-style: italic; width: 200px;\">\n                        <i class=\"fa-solid fa-spinner fa-spin\"></i> Loading types...\n                      </div>\n                    } @else {\n                      <mj-dropdown [(ngModel)]=\"record.TypeID\"\n                        name=\"promptTypeID\"\n                        [Data]=\"availablePromptTypes\"\n                        TextField=\"Name\"\n                        ValueField=\"ID\"\n                        [ValuePrimitive]=\"true\"\n                        [Filterable]=\"true\"\n                        Placeholder=\"Select prompt type...\"\n                        style=\"width: 200px;\">\n                      </mj-dropdown>\n                    }\n                  </div>\n                </div>\n              }\n              @if (EditMode) {\n                <textarea class=\"mj-textarea\" [(ngModel)]=\"record.Description\"\n                  name=\"promptDescription\"\n                  [rows]=\"2\"\n                  placeholder=\"Enter prompt description...\"\n                  style=\"width: 100%; max-width: 600px; margin-bottom: 12px;\"></textarea>\n              } @else if (record.Description) {\n                <p style=\"margin: 0 0 12px 0; color: var(--mj-text-muted); font-size: 0.9em; line-height: 1.4;\">{{ record.Description }}</p>\n              }\n              <!-- Quick Config Row -->\n              <div class=\"quick-config\" style=\"display: flex; align-items: center; gap: 16px; flex-wrap: wrap;\">\n                @if (record.TypeID) {\n                  <div class=\"config-item\" style=\"display: flex; align-items: center; gap: 6px; font-size: 0.85em;\">\n                    <i class=\"fa-solid fa-tag\" style=\"color: var(--mj-text-muted);\"></i>\n                    <span style=\"color: var(--mj-text-muted);\">Type:</span>\n                    <span style=\"color: var(--mj-text-secondary); font-weight: 500;\">{{ getPromptTypeDisplayName(record.TypeID) }}</span>\n                  </div>\n                }\n                <div class=\"config-item\" style=\"display: flex; align-items: center; gap: 6px; font-size: 0.85em;\">\n                  <i class=\"fa-solid fa-layer-group\" style=\"color: var(--mj-text-muted);\"></i>\n                  <span style=\"color: var(--mj-text-muted);\">Parallelization:</span>\n                  <span style=\"color: var(--mj-text-secondary); font-weight: 500;\">{{ getParallelizationModeDisplay() }}</span>\n                </div>\n                <div class=\"config-item\" style=\"display: flex; align-items: center; gap: 6px; font-size: 0.85em;\">\n                  <i class=\"fa-solid fa-code\" style=\"color: var(--mj-text-muted);\"></i>\n                  <span style=\"color: var(--mj-text-muted);\">Output:</span>\n                  <span [style.color]=\"getValidationColor()\" style=\"font-weight: 500;\">{{ getOutputTypeDisplay() }}</span>\n                </div>\n                @if (record.EnableCaching) {\n                  <div class=\"config-item\" style=\"display: flex; align-items: center; gap: 6px; font-size: 0.85em;\">\n                    <i class=\"fa-solid fa-database\" style=\"color: #28a745;\"></i>\n                    <span style=\"color: #28a745; font-weight: 500;\">Caching Enabled</span>\n                  </div>\n                }\n                @if (record.EffortLevel) {\n                  <div class=\"config-item\" style=\"display: flex; align-items: center; gap: 6px; font-size: 0.85em;\">\n                    <i class=\"fa-solid fa-tachometer-alt\" style=\"color: var(--mj-text-muted);\"></i>\n                    <span style=\"color: var(--mj-text-muted);\">Effort Level:</span>\n                    <span style=\"color: var(--mj-text-secondary); font-weight: 500;\">{{ record.EffortLevel }}</span>\n                  </div>\n                }\n              </div>\n            </div>\n            <!-- Right: Action Buttons -->\n            <div class=\"action-buttons\" style=\"display: flex; flex-direction: column; gap: 8px; align-items: flex-end;\">\n              <div style=\"display: flex; gap: 8px;\">\n                @if (record.ID) {\n                  <button mjButton variant=\"primary\" size=\"lg\"\n                    (click)=\"openTestHarness()\"\n                    title=\"Run AI Prompt Test Harness\">\n                    <i class=\"fa-solid fa-play\"></i> Run\n                  </button>\n                }\n              </div>\n              @if (!canExecute && record.ID) {\n                <div style=\"font-size: 0.75em; color: #dc3545; text-align: right; max-width: 200px;\">\n                  @if (record.Status !== 'Active') {\n                    \u2022 Prompt must be Active<br>\n                  }\n                  @if (!record.TemplateID) {\n                    \u2022 Template is required<br>\n                  }\n                  @if (!template && record.TemplateID) {\n                    \u2022 Template not found<br>\n                  }\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n        <!-- Configuration Sections with Expansion Panels -->\n        <div class=\"configuration-sections\" style=\"flex: 1; background: var(--mj-bg-surface-card); border-top: 2px solid var(--mj-border-default); padding: 16px; min-height: 0;\">\n          <!-- Template Editor Section -->\n          <mj-accordion-panel\n            [Expanded]=\"true\"\n            style=\"margin-bottom: 12px;\">\n            <ng-template mjAccordionTitle>\n              <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n                <i class=\"fa-solid fa-code\" style=\"color: var(--mj-text-muted);\"></i>\n                Template Editor\n                @if (template) {\n                  <span style=\"color: var(--mj-text-muted); font-size: 0.9em; font-weight: normal;\">&bull; {{ template.Name }}</span>\n                }\n              </span>\n            </ng-template>\n            <!-- Direct Content Projection -->\n            <div class=\"template-section\" style=\"display: flex; flex-direction: column; min-height: 400px; padding: 8px;\">\n              @if (isLoadingTemplate) {\n                <div class=\"loading-state\" style=\"flex: 1; display: flex; align-items: center; justify-content: center; color: var(--mj-text-muted);\">\n                  <i class=\"fa-solid fa-spinner fa-spin\" style=\"font-size: 24px; margin-right: 12px;\"></i>\n                  Loading template...\n                </div>\n              } @else if (!record.TemplateID) {\n                <mj-empty-state class=\"no-template-state\"\n                  Size=\"large\"\n                  Icon=\"fa-solid fa-code\"\n                  Title=\"No Template Associated\"\n                  Message=\"This AI prompt needs a template to define its structure and parameters. Create a new template or link to an existing one.\">\n                  <div ngProjectAs=\"[actions]\" style=\"display: flex; gap: 12px;\">\n                    @if (UserCanCreateTemplates) {\n                      <button mjButton variant=\"primary\" (click)=\"createNewTemplate()\">\n                        <i class=\"fa-solid fa-plus\"></i> Create New Template\n                      </button>\n                    }\n                    @if (UserCanReadTemplates) {\n                      <button mjButton variant=\"outline\" (click)=\"linkExistingTemplate()\">\n                        <i class=\"fa-solid fa-link\"></i> Link Existing Template\n                      </button>\n                    }\n                  </div>\n                </mj-empty-state>\n              } @else if (templateNotFoundInDatabase) {\n                <mj-empty-state class=\"invalid-template-state\"\n                  Variant=\"warning\"\n                  Title=\"Template Not Found\"\n                  Message=\"The referenced template could not be loaded. It may have been deleted or moved.\">\n                  <div ngProjectAs=\"[actions]\" style=\"display: flex; gap: 12px;\">\n                    <button mjButton variant=\"outline\" (click)=\"loadTemplate()\">\n                      <i class=\"fa-solid fa-arrows-rotate\"></i> Retry Loading\n                    </button>\n                    @if (UserCanCreateTemplates) {\n                      <button mjButton variant=\"primary\" (click)=\"createNewTemplate()\">\n                        <i class=\"fa-solid fa-plus\"></i> Create New Template\n                      </button>\n                    }\n                  </div>\n                </mj-empty-state>\n              } @else {\n                <!-- Active Template Editor -->\n                <div class=\"template-editor-container\" style=\"flex: 1; display: flex; flex-direction: column; min-height: 350px;\">\n                  <!-- Template Actions Bar -->\n                  @if (template && EditMode) {\n                    <div class=\"template-actions\" style=\"display: flex; gap: 8px; padding: 8px; border-bottom: 1px solid var(--mj-border-default); background: var(--mj-bg-surface-sunken);\">\n                      @if (UserCanUpdateTemplates) {\n                        <button mjButton\n                          variant=\"outline\"\n                          size=\"sm\"\n                          (click)=\"linkExistingTemplate()\"\n                          title=\"Change to a different template\">\n                          <i class=\"fa-solid fa-exchange-alt\"></i> Change Template\n                        </button>\n                      }\n                      @if (UserCanReadTemplates) {\n                        <button mjButton\n                          variant=\"outline\"\n                          size=\"sm\"\n                          (click)=\"openTemplateInNewWindow()\"\n                          title=\"Open template in new window\">\n                          <i class=\"fa-solid fa-external-link-alt\"></i> Open in New Window\n                        </button>\n                      }\n                    </div>\n                  }\n                  <!-- Template Editor -->\n                  <div style=\"flex: 1; background: var(--mj-bg-surface-card); border-radius: 6px; border: 1px solid var(--mj-border-default);\">\n                    <mj-template-editor\n                      #templateEditor\n                      [template]=\"template\"\n                      [config]=\"templateEditorConfig\"\n                      (contentChange)=\"onTemplateContentChange($event)\"\n                      (runTemplate)=\"onTemplateRun($event)\"\n                      style=\"display: block; min-height: 300px;\">\n                    </mj-template-editor>\n                  </div>\n                </div>\n              }\n            </div>\n          </mj-accordion-panel>\n          <!-- Model Configuration Expansion Panel -->\n          @if (record.IsSaved) {\n            <mj-accordion-panel\n              [Expanded]=\"true\"\n              style=\"margin-bottom: 12px;\">\n              <ng-template mjAccordionTitle>\n                <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n                  <i class=\"fa-solid fa-microchip\" style=\"color: var(--mj-text-muted);\"></i>\n                  Models\n                  @if (promptModels.length > 0) {\n                    <span class=\"mj-accordion-badge\">{{ promptModels.length }}</span>\n                  }\n                  <span style=\"color: var(--mj-text-muted); font-size: 0.8em; font-weight: normal; margin-left: 8px;\">\n                    <i class=\"fa-solid fa-info-circle\" title=\"Models are tried in order from top to bottom. The first available model will be used.\"></i>\n                    Priority order (first available model will be used)\n                  </span>\n                </span>\n              </ng-template>\n              <!-- Direct Content Projection -->\n              <div style=\"padding: 16px 0;\">\n                <!-- Model Management Interface -->\n                <div class=\"model-management\" style=\"border: 1px solid var(--mj-border-default); border-radius: 6px; background: var(--mj-bg-surface-sunken);\">\n                  @if (isLoadingModels) {\n                    <div class=\"loading-state\" style=\"padding: 20px; text-align: center; color: var(--mj-text-muted);\">\n                      <i class=\"fa-solid fa-spinner fa-spin\"></i> Loading models...\n                    </div>\n                  } @else {\n                    @if (promptModels.length === 0) {\n                      <mj-empty-state\n                        Size=\"compact\"\n                        Icon=\"fa-solid fa-circle-info\"\n                        Title=\"No models configured\">\n                        @if (EditMode && UserCanCreatePromptModels) {\n                          <button ngProjectAs=\"[actions]\" mjButton variant=\"outline\" size=\"sm\"\n                            (click)=\"addNewModel()\">\n                            <i class=\"fa-solid fa-plus\"></i> Add Model\n                          </button>\n                        }\n                      </mj-empty-state>\n                    } @else {\n                      <!-- Priority explanation for multiple models -->\n                      @if (promptModels.length > 1) {\n                        <div style=\"padding: 12px 16px; background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface)); border-bottom: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-border-default)); color: var(--mj-brand-primary); font-size: 0.85em;\">\n                          <i class=\"fa-solid fa-info-circle\" style=\"margin-right: 6px;\"></i>\n                          Models are tried in priority order (highest priority first). The first available model that meets requirements will be used for execution.\n                        </div>\n                      }\n                      <!-- Column Headers -->\n                      <div class=\"model-header\" style=\"display: grid; grid-template-columns: 40px 2fr 1fr 1fr 1fr 60px; gap: 12px; padding: 12px 16px; background: var(--mj-bg-surface-sunken); font-weight: 600; font-size: 0.85em; color: var(--mj-text-secondary); border-bottom: 1px solid var(--mj-border-default);\">\n                        <div title=\"Priority order - models are tried from top to bottom\">\n                          <i class=\"fa-solid fa-sort\" style=\"color: var(--mj-text-muted);\"></i>\n                        </div>\n                        <div>AI Model <span style=\"color: #dc3545;\">*</span></div>\n                        <div>Vendor</div>\n                        <div>Configuration</div>\n                        <div>Created</div>\n                        <div>Actions</div>\n                      </div>\n                      @for (model of promptModels; track getModelTrackId(model) || $index; let i = $index) {\n                        <div class=\"model-row\"\n                          [draggable]=\"EditMode\"\n                          (dragstart)=\"onDragStart($event, i)\"\n                          (dragover)=\"onDragOver($event)\"\n                          (drop)=\"onDrop($event, i)\"\n                          (dragend)=\"onDragEnd($event)\"\n                          [style.background]=\"!model.ModelID ? '#fff3cd' : (draggedIndex === i ? 'color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface))' : 'var(--mj-bg-surface-card)')\"\n                          [style.border-left]=\"!model.ModelID ? '3px solid #ffc107' : 'none'\"\n                          [style.opacity]=\"draggedIndex === i ? '0.5' : '1'\"\n                          style=\"display: grid; grid-template-columns: 40px 2fr 1fr 1fr 1fr 60px; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--mj-border-default); align-items: start; transition: background 0.2s, opacity 0.2s;\">\n                          <!-- Drag Handle / Priority -->\n                          <div class=\"drag-handle\" style=\"display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--mj-text-muted);\">\n                            @if (EditMode) {\n                              <i class=\"fa-solid fa-grip-vertical\" title=\"Drag to reorder priority\" style=\"cursor: move;\"></i>\n                              <span style=\"font-size: 0.7em; margin-top: 2px;\">#{{ i + 1 }}</span>\n                            } @else {\n                              <span style=\"font-size: 0.9em; font-weight: 600;\" title=\"Priority {{ model.Priority }} - Higher priority numbers are tried first\">#{{ i + 1 }}</span>\n                            }\n                          </div>\n                          <!-- Model Selection -->\n                          <div class=\"model-select\">\n                            @if (EditMode) {\n                              <mj-dropdown [(ngModel)]=\"model.ModelID\"\n                                [name]=\"'modelId_' + getModelTrackId(model)\"\n                                [Data]=\"availableModels\"\n                                TextField=\"Name\"\n                                ValueField=\"ID\"\n                                [ValuePrimitive]=\"true\"\n                                [Filterable]=\"true\"\n                                Placeholder=\"Select a model...\"\n                                (ValueChange)=\"onModelChange($any($event), i)\"\n                                style=\"width: 100%;\">\n                              </mj-dropdown>\n                            } @else {\n                              <span style=\"font-weight: 500;\">{{ getModelDisplayName(model.ModelID) }}</span>\n                            }\n                          </div>\n                          <!-- Vendor -->\n                          <div class=\"model-vendor\">\n                            @if (EditMode) {\n                              @if (model.ModelID) {\n                                @if (shouldShowVendorDropdown(model.ModelID)) {\n                                  <mj-dropdown [(ngModel)]=\"model.VendorID\"\n                                    [name]=\"'vendorId_' + getModelTrackId(model)\"\n                                    [Data]=\"getVendorsForModelSync(model.ModelID)\"\n                                    TextField=\"Name\"\n                                    ValueField=\"ID\"\n                                    [ValuePrimitive]=\"true\"\n                                    [Filterable]=\"true\"\n                                    Placeholder=\"Select vendor...\"\n                                    style=\"width: 100%;\">\n                                  </mj-dropdown>\n                                } @else {\n                                  <!-- Single vendor - just show the name -->\n                                  @if (getVendorsForModelSync(model.ModelID).length === 1) {\n                                    <span [style.color]=\"getVendorStatusColor(model.ModelID, getVendorsForModelSync(model.ModelID)[0].ID)\" style=\"font-size: 0.9em; font-weight: 500;\">\n                                      {{ getVendorsForModelSync(model.ModelID)[0].Name }}\n                                      @if (getModelVendorStatus(model.ModelID, getVendorsForModelSync(model.ModelID)[0].ID) !== 'Active') {\n                                        <span style=\"font-size: 0.8em; margin-left: 4px;\">({{ getModelVendorStatus(model.ModelID, getVendorsForModelSync(model.ModelID)[0].ID) }})</span>\n                                      }\n                                    </span>\n                                  } @else {\n                                    <span style=\"color: var(--mj-text-muted); font-style: italic; font-size: 0.9em;\">No vendors available</span>\n                                  }\n                                }\n                              } @else {\n                                <span style=\"color: var(--mj-text-muted); font-style: italic; font-size: 0.9em;\">Select model first</span>\n                              }\n                            } @else {\n                              @if (model.VendorID && model.ModelID) {\n                                <span [style.color]=\"getVendorStatusColor(model.ModelID, model.VendorID)\" style=\"font-size: 0.9em;\">\n                                  {{ getVendorDisplayName(model.VendorID) }}\n                                  @if (getModelVendorStatus(model.ModelID, model.VendorID) !== 'Active') {\n                                    <span style=\"font-size: 0.8em; margin-left: 4px;\">({{ getModelVendorStatus(model.ModelID, model.VendorID) }})</span>\n                                  }\n                                </span>\n                              } @else {\n                                <span style=\"color: var(--mj-text-muted); font-size: 0.9em;\">-</span>\n                              }\n                            }\n                          </div>\n                          <!-- Configuration -->\n                          <div class=\"model-configuration\">\n                            @if (EditMode) {\n                              @if (isLoadingConfigurations) {\n                                <div style=\"padding: 4px; color: var(--mj-text-muted); font-style: italic; font-size: 0.85em;\">\n                                  <i class=\"fa-solid fa-spinner fa-spin\"></i> Loading...\n                                </div>\n                              } @else {\n                                <mj-dropdown [(ngModel)]=\"model.ConfigurationID\"\n                                  [name]=\"'configurationId_' + getModelTrackId(model)\"\n                                  [Data]=\"availableConfigurations\"\n                                  TextField=\"Name\"\n                                  ValueField=\"ID\"\n                                  [ValuePrimitive]=\"true\"\n                                  [Filterable]=\"true\"\n                                  Placeholder=\"Default\"\n                                  (ValueChange)=\"onConfigurationChange($any($event), i)\"\n                                  style=\"width: 100%;\">\n                                </mj-dropdown>\n                              }\n                            } @else {\n                              <span style=\"font-size: 0.9em;\">{{ getConfigurationDisplayName(model.ConfigurationID) }}</span>\n                            }\n                          </div>\n                          <!-- Created Date -->\n                          <div class=\"model-created\">\n                            @if (model.ID) {\n                              <span style=\"color: var(--mj-text-muted); font-size: 0.8em;\">{{ model.__mj_CreatedAt | date:'short' }}</span>\n                            } @else {\n                              <span style=\"color: #28a745; font-size: 0.8em; font-style: italic;\">New</span>\n                            }\n                          </div>\n                          <!-- Actions -->\n                          <div class=\"model-actions\" style=\"display: flex; gap: 2px; flex-direction: column;\">\n                            @if (EditMode) {\n                              <div style=\"display: flex; gap: 2px; margin-bottom: 4px;\">\n                                @if (UserCanUpdatePromptModels) {\n                                  <button mjButton variant=\"flat\" size=\"sm\"\n                                    (click)=\"moveModelUp(i)\"\n                                    [disabled]=\"i === 0\"\n                                    title=\"Move up\">\n                                    <i class=\"fa-solid fa-chevron-up\"></i>\n                                  </button>\n                                  <button mjButton variant=\"flat\" size=\"sm\"\n                                    (click)=\"moveModelDown(i)\"\n                                    [disabled]=\"i === promptModels.length - 1\"\n                                    title=\"Move down\">\n                                    <i class=\"fa-solid fa-chevron-down\"></i>\n                                  </button>\n                                }\n                              </div>\n                              @if (UserCanDeletePromptModels) {\n                                <button mjButton variant=\"flat\" size=\"sm\"\n                                  (click)=\"removePromptModel(i)\"\n                                  title=\"Remove model\"\n                                  style=\"color: var(--mj-status-error);\">\n                                  <i class=\"fa-solid fa-times\"></i>\n                                </button>\n                              }\n                            }\n                          </div>\n                        </div>\n                        <!-- Second row with additional details -->\n                        <div style=\"display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 8px 16px; border-bottom: 1px solid var(--mj-border-default); background: var(--mj-bg-surface-sunken); font-size: 0.85em; color: var(--mj-text-muted);\">\n                          <div></div>\n                          <div>\n                            <!-- Basic model details -->\n                            <div style=\"display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-bottom: 8px;\">\n                              @if (model.Status) {\n                                <span><strong>Status:</strong> {{ model.Status }}</span>\n                              }\n                            </div>\n                            <!-- Parallel execution fields when prompt is ModelSpecific -->\n                            @if (record.ParallelizationMode === 'ModelSpecific') {\n                              <div style=\"padding: 8px; background: var(--mj-bg-surface-card); border: 1px solid var(--mj-border-default); border-radius: 4px; margin-top: 8px;\">\n                                <div style=\"margin-bottom: 6px; font-weight: 600; color: var(--mj-text-secondary); font-size: 0.9em;\">\n                                  <i class=\"fa-solid fa-layer-group\"></i> Model-Specific Parallel Execution\n                                </div>\n                                @if (EditMode) {\n                                  <div style=\"display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; align-items: center;\">\n                                    <!-- Parallel Mode -->\n                                    <div>\n                                      <label style=\"display: block; margin-bottom: 2px; font-size: 0.8em; font-weight: 600; color: var(--mj-text-secondary);\">Parallel Mode</label>\n                                      <mj-dropdown [(ngModel)]=\"model.ParallelizationMode\"\n                                        [name]=\"'parallelMode_' + i\"\n                                        [Data]=\"[{text: 'None', value: 'None'}, {text: 'Static Count', value: 'StaticCount'}, {text: 'Config Param', value: 'ConfigParam'}]\"\n                                        TextField=\"text\"\n                                        ValueField=\"value\"\n                                        [ValuePrimitive]=\"true\"\n                                        Placeholder=\"Select mode...\"\n                                        style=\"width: 100%; font-size: 0.85em;\">\n                                      </mj-dropdown>\n                                    </div>\n                                    <!-- Parallel Count (when StaticCount) -->\n                                    @if (model.ParallelizationMode === 'StaticCount') {\n                                      <div>\n                                        <label style=\"display: block; margin-bottom: 2px; font-size: 0.8em; font-weight: 600; color: var(--mj-text-secondary);\">Parallel Count</label>\n                                        <mj-numeric-input [(ngModel)]=\"model.ParallelCount\"\n                                          [name]=\"'parallelCount_' + i\"\n                                          [Min]=\"1\"\n                                          [Step]=\"1\"\n                                          [Format]=\"'n0'\"\n                                          Placeholder=\"Count...\"\n                                          style=\"width: 100%; font-size: 0.85em;\">\n                                        </mj-numeric-input>\n                                      </div>\n                                    }\n                                    <!-- Config Param (when ConfigParam) -->\n                                    @if (model.ParallelizationMode === 'ConfigParam') {\n                                      <div>\n                                        <label style=\"display: block; margin-bottom: 2px; font-size: 0.8em; font-weight: 600; color: var(--mj-text-secondary);\">Config Parameter</label>\n                                        <input type=\"text\" class=\"mj-input\" [(ngModel)]=\"model.ParallelConfigParam\"\n                                          [name]=\"'parallelConfigParam_' + i\"\n                                          placeholder=\"Parameter name...\"\n                                          style=\"width: 100%; font-size: 0.85em;\" />\n                                      </div>\n                                    }\n                                  </div>\n                                } @else {\n                                  <!-- Read-only display -->\n                                  <div style=\"display: flex; gap: 16px; flex-wrap: wrap; align-items: center;\">\n                                    @if (model.ParallelizationMode) {\n                                      <span><strong>Parallel Mode:</strong> {{ model.ParallelizationMode }}</span>\n                                    }\n                                    @if (model.ParallelCount) {\n                                      <span><strong>Parallel Count:</strong> {{ model.ParallelCount }}</span>\n                                    }\n                                    @if (model.ParallelConfigParam) {\n                                      <span><strong>Config Param:</strong> {{ model.ParallelConfigParam }}</span>\n                                    }\n                                  </div>\n                                }\n                              </div>\n                            }\n                          </div>\n                        </div>\n                      }\n                      @if (EditMode && UserCanCreatePromptModels) {\n                        <div class=\"add-model-row\" style=\"padding: 12px 16px; text-align: center; background: var(--mj-bg-surface-sunken); border-top: 1px solid var(--mj-border-default);\">\n                          <button mjButton variant=\"outline\" size=\"sm\"\n                            (click)=\"addNewModel()\"\n                            style=\"color: var(--mj-status-success); border-color: var(--mj-status-success);\">\n                            <i class=\"fa-solid fa-plus\"></i> Add Model\n                          </button>\n                        </div>\n                      }\n                    }\n                  }\n                </div>\n              </div>\n            </mj-accordion-panel>\n          }\n          <!-- Advanced Configuration Expansion Panel -->\n          <mj-accordion-panel\n            [Expanded]=\"false\"\n            style=\"margin-bottom: 12px;\">\n            <ng-template mjAccordionTitle>\n              <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n                <i class=\"fa-solid fa-cogs\" style=\"color: var(--mj-text-muted);\"></i>\n                Advanced Configuration\n              </span>\n            </ng-template>\n            <!-- Direct Content Projection -->\n            <div style=\"padding: 16px 0;\">\n              <div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 20px;\">\n                <!-- Left Column -->\n                <div>\n                  <mj-form-field\n                    [Record]=\"record\"\n                    [ShowLabel]=\"true\"\n                    FieldName=\"ParallelizationMode\"\n                    Type=\"dropdownlist\"\n                    [EditMode]=\"EditMode\">\n                  </mj-form-field>\n                  @if (showParallelCount) {\n                    <mj-form-field\n                      [Record]=\"record\"\n                      [ShowLabel]=\"true\"\n                      FieldName=\"ParallelCount\"\n                      Type=\"numerictextbox\"\n                      [EditMode]=\"EditMode\">\n                    </mj-form-field>\n                  }\n                  @if (showParallelConfigParam) {\n                    <mj-form-field\n                      [Record]=\"record\"\n                      [ShowLabel]=\"true\"\n                      FieldName=\"ParallelConfigParam\"\n                      Type=\"textbox\"\n                      [EditMode]=\"EditMode\">\n                    </mj-form-field>\n                  }\n                  <mj-form-field\n                    [Record]=\"record\"\n                    [ShowLabel]=\"true\"\n                    FieldName=\"OutputType\"\n                    Type=\"dropdownlist\"\n                    [EditMode]=\"EditMode\">\n                  </mj-form-field>\n                  <mj-form-field\n                    [Record]=\"record\"\n                    [ShowLabel]=\"true\"\n                    FieldName=\"EffortLevel\"\n                    Type=\"numerictextbox\"\n                    Caption=\"Effort Level (1-100)\"\n                    Description=\"Higher values request more thorough reasoning\"\n                    [EditMode]=\"EditMode\">\n                  </mj-form-field>\n                </div>\n                <!-- Right Column -->\n                <div>\n                  <mj-form-field\n                    [Record]=\"record\"\n                    [ShowLabel]=\"true\"\n                    FieldName=\"ValidationBehavior\"\n                    Type=\"dropdownlist\"\n                    [EditMode]=\"EditMode\">\n                  </mj-form-field>\n                  <mj-form-field\n                    [Record]=\"record\"\n                    [ShowLabel]=\"true\"\n                    FieldName=\"EnableCaching\"\n                    Type=\"checkbox\"\n                    [EditMode]=\"EditMode\">\n                  </mj-form-field>\n                  <!-- Result Selector Prompt with Tree Selector -->\n                  <div style=\"margin-bottom: 16px;\">\n                    <label style=\"display: block; margin-bottom: 4px; font-weight: 600; color: var(--mj-text-secondary); font-size: 0.9em;\">\n                      Result Selector Prompt\n                    </label>\n                    @if (EditMode) {\n                      @if (isLoadingResultSelectorData) {\n                        <div style=\"padding: 8px; color: var(--mj-text-muted); font-style: italic;\">\n                          <i class=\"fa-solid fa-spinner fa-spin\"></i> Loading prompts...\n                        </div>\n                      } @else {\n                        <mj-dropdown\n                          [(ngModel)]=\"record.ResultSelectorPromptID\"\n                          name=\"resultSelectorPromptID\"\n                          [Data]=\"resultSelectorTreeData\"\n                          TextField=\"text\"\n                          ValueField=\"value\"\n                          [ValuePrimitive]=\"true\"\n                          [Filterable]=\"true\"\n                          Placeholder=\"Select a result selector prompt...\"\n                          style=\"width: 100%;\"\n                          (ValueChange)=\"onResultSelectorChange($any($event))\">\n                        </mj-dropdown>\n                      }\n                    } @else {\n                      <span style=\"color: var(--mj-text-secondary);\">{{ getPromptDisplayName(record.ResultSelectorPromptID || '') || 'None selected' }}</span>\n                    }\n                  </div>\n                </div>\n              </div>\n            </div>\n          </mj-accordion-panel>\n          <!-- Prefill & Output Control Expansion Panel -->\n          <mj-accordion-panel\n            [Expanded]=\"false\"\n            style=\"margin-bottom: 12px;\">\n            <ng-template mjAccordionTitle>\n              <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n                <i class=\"fa-solid fa-wand-magic-sparkles\" style=\"color: var(--mj-text-muted);\"></i>\n                Prefill &amp; Output Control\n              </span>\n            </ng-template>\n            <div style=\"padding: 16px 0;\">\n              <p style=\"margin: 0 0 12px 0; font-size: 0.85em; color: var(--mj-text-muted);\">\n                Assistant prefill seeds the model's response with an initial string, guiding output format and content. Stop sequences terminate generation when encountered.\n              </p>\n              <div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 20px;\">\n                <!-- Left Column -->\n                <div>\n                  <mj-form-field\n                    [Record]=\"record\"\n                    [ShowLabel]=\"true\"\n                    FieldName=\"AssistantPrefill\"\n                    Type=\"textarea\"\n                    [EditMode]=\"EditMode\">\n                  </mj-form-field>\n                  <mj-form-field\n                    [Record]=\"record\"\n                    [ShowLabel]=\"true\"\n                    FieldName=\"StopSequences\"\n                    Type=\"textbox\"\n                    [EditMode]=\"EditMode\">\n                  </mj-form-field>\n                </div>\n                <!-- Right Column -->\n                <div>\n                  <mj-form-field\n                    [Record]=\"record\"\n                    [ShowLabel]=\"true\"\n                    FieldName=\"PrefillFallbackMode\"\n                    Type=\"dropdownlist\"\n                    [EditMode]=\"EditMode\">\n                  </mj-form-field>\n                </div>\n              </div>\n            </div>\n          </mj-accordion-panel>\n          <!-- Template Parameters Expansion Panel -->\n          @if (template && templateParams.length > 0) {\n            <mj-accordion-panel\n              [Expanded]=\"false\"\n              style=\"margin-bottom: 12px;\">\n              <ng-template mjAccordionTitle>\n                <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n                  <i class=\"fa-solid fa-sliders\" style=\"color: var(--mj-text-muted);\"></i>\n                  Template Parameters\n                  <span class=\"mj-accordion-badge\">{{ templateParams.length }}</span>\n                  <span style=\"color: var(--mj-text-muted); font-size: 0.8em; font-weight: normal; margin-left: 8px;\">\n                    <i class=\"fa-solid fa-info-circle\" title=\"These parameters are defined in the template and will be available when executing this prompt\"></i>\n                    Parameters defined in the template\n                  </span>\n                </span>\n              </ng-template>\n              <!-- Template Parameters Display -->\n              <div style=\"padding: 16px 0;\">\n                @if (isLoadingTemplateParams) {\n                  <div class=\"loading-state\" style=\"padding: 20px; text-align: center; color: var(--mj-text-muted);\">\n                    <i class=\"fa-solid fa-spinner fa-spin\"></i> Loading template parameters...\n                  </div>\n                } @else if (templateParams.length === 0) {\n                  <mj-empty-state\n                    Size=\"compact\"\n                    Icon=\"fa-solid fa-circle-info\"\n                    Title=\"This template has no parameters defined\" />\n                } @else {\n                  <!-- Parameters Grid -->\n                  <div style=\"display: grid; gap: 12px;\">\n                    @for (param of templateParams; track param.ID) {\n                      <div class=\"parameter-card\"\n                        style=\"border: 1px solid var(--mj-border-default); border-radius: 8px; padding: 16px; background: var(--mj-bg-surface-sunken); transition: all 0.2s;\"\n                        [style.border-left]=\"'4px solid ' + getParamTypeColor(param.Type)\">\n                        <!-- Parameter Header -->\n                        <div style=\"display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px;\">\n                          <div style=\"display: flex; align-items: center; gap: 8px;\">\n                            <i [class]=\"'fa-solid ' + getParamTypeIcon(param.Type)\"\n                              [style.color]=\"getParamTypeColor(param.Type)\"\n                            style=\"font-size: 1.2em;\"></i>\n                            <h6 style=\"margin: 0; color: var(--mj-text-secondary); font-weight: 600;\">\n                              {{ param.Name }}\n                              @if (param.IsRequired) {\n                                <span style=\"color: #dc3545; font-size: 0.9em; margin-left: 4px;\">*</span>\n                              }\n                            </h6>\n                          </div>\n                          <div style=\"display: flex; align-items: center; gap: 8px;\">\n                            <span class=\"type-badge\"\n                              [style.background-color]=\"getParamTypeColor(param.Type)\"\n                              style=\"color: white; padding: 4px 8px; border-radius: 12px; font-size: 0.75em; font-weight: 500;\">\n                              {{ param.Type }}\n                            </span>\n                            @if (param.IsRequired) {\n                              <span style=\"color: #dc3545; font-size: 0.85em; font-weight: 500;\">Required</span>\n                            } @else {\n                              <span style=\"color: var(--mj-text-muted); font-size: 0.85em;\">Optional</span>\n                            }\n                          </div>\n                        </div>\n                        <!-- Parameter Description -->\n                        @if (param.Description) {\n                          <p style=\"margin: 0 0 8px 0; color: var(--mj-text-muted); font-size: 0.9em; line-height: 1.4;\">\n                            {{ param.Description }}\n                          </p>\n                        }\n                        <!-- Type-specific Information -->\n                        <div style=\"font-size: 0.85em; color: var(--mj-text-secondary);\">\n                          <span style=\"display: flex; align-items: center; gap: 4px; margin-bottom: 4px;\">\n                            <i class=\"fa-solid fa-info-circle\" style=\"color: var(--mj-text-muted);\"></i>\n                            {{ getParamTypeDescription(param) }}\n                          </span>\n                        </div>\n                        <!-- Additional Parameter Details -->\n                        <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 12px;\">\n                          @if (param.DefaultValue) {\n                            <div style=\"background: var(--mj-bg-surface-card); padding: 8px 12px; border-radius: 4px; border: 1px solid var(--mj-border-default);\">\n                              <label style=\"display: block; font-size: 0.8em; color: var(--mj-text-muted); margin-bottom: 2px;\">Default Value</label>\n                              <code style=\"font-size: 0.85em; color: var(--mj-text-secondary); word-break: break-all;\">{{ param.DefaultValue }}</code>\n                            </div>\n                          }\n                          @if (param.EntityID) {\n                            <div style=\"background: var(--mj-bg-surface-card); padding: 8px 12px; border-radius: 4px; border: 1px solid var(--mj-border-default);\">\n                              <label style=\"display: block; font-size: 0.8em; color: var(--mj-text-muted); margin-bottom: 2px;\">Entity</label>\n                              <span style=\"font-size: 0.85em; color: var(--mj-text-secondary);\">{{ param.Entity || 'Entity ID: ' + param.EntityID }}</span>\n                            </div>\n                          }\n                          @if (param.LinkedParameterName) {\n                            <div style=\"background: var(--mj-bg-surface-card); padding: 8px 12px; border-radius: 4px; border: 1px solid var(--mj-border-default);\">\n                              <label style=\"display: block; font-size: 0.8em; color: var(--mj-text-muted); margin-bottom: 2px;\">Linked To</label>\n                              <span style=\"font-size: 0.85em; color: var(--mj-text-secondary);\">\n                                {{ param.LinkedParameterName }}\n                                @if (param.LinkedParameterField) {\n                                  ({{ param.LinkedParameterField }})\n                                }\n                              </span>\n                            </div>\n                          }\n                          @if (param.ExtraFilter) {\n                            <div style=\"background: var(--mj-bg-surface-card); padding: 8px 12px; border-radius: 4px; border: 1px solid var(--mj-border-default);\">\n                              <label style=\"display: block; font-size: 0.8em; color: var(--mj-text-muted); margin-bottom: 2px;\">Filter</label>\n                              <code style=\"font-size: 0.8em; color: var(--mj-text-secondary); word-break: break-all;\">{{ param.ExtraFilter }}</code>\n                            </div>\n                          }\n                          @if (param.RecordID) {\n                            <div style=\"background: var(--mj-bg-surface-card); padding: 8px 12px; border-radius: 4px; border: 1px solid var(--mj-border-default);\">\n                              <label style=\"display: block; font-size: 0.8em; color: var(--mj-text-muted); margin-bottom: 2px;\">Record ID</label>\n                              <code style=\"font-size: 0.85em; color: var(--mj-text-secondary);\">{{ param.RecordID }}</code>\n                            </div>\n                          }\n                        </div>\n                      </div>\n                    }\n                  </div>\n                  <!-- Help Text -->\n                  <div style=\"margin-top: 16px; padding: 12px; background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface)); border-radius: 6px; border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-border-default));\">\n                    <div style=\"display: flex; align-items: flex-start; gap: 8px;\">\n                      <i class=\"fa-solid fa-lightbulb\" style=\"color: var(--mj-brand-primary); margin-top: 2px;\"></i>\n                      <div style=\"flex: 1; font-size: 0.85em; color: var(--mj-brand-primary); line-height: 1.5;\">\n                        <strong>Using Template Parameters:</strong> When executing this prompt, you'll be prompted to provide values for all required parameters.\n                        Parameters can be simple values (text, numbers) or complex data structures (JSON objects, database records, or entire entity collections).\n                        The template will use these parameters to generate dynamic content based on the values provided at execution time.\n                      </div>\n                    </div>\n                  </div>\n                }\n              </div>\n            </mj-accordion-panel>\n          }\n          <!-- Output Example Expansion Panel (when OutputType = object) -->\n          @if (showOutputExample) {\n            <mj-accordion-panel\n              [Expanded]=\"true\"\n              style=\"margin-bottom: 12px;\">\n              <ng-template mjAccordionTitle>\n                <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n                  <i class=\"fa-solid fa-code\" style=\"color: var(--mj-text-muted);\"></i>\n                  Output Example (JSON)\n                  <span style=\"color: #dc3545; font-size: 0.8em; font-weight: normal;\">&bull; Required for object output type</span>\n                </span>\n              </ng-template>\n              <!-- Direct Content Projection -->\n              <div style=\"padding: 16px;\">\n                @if (EditMode) {\n                  <mj-code-editor\n                    [(ngModel)]=\"record.OutputExample\"\n                    name=\"outputExample\"\n                    language=\"json\"\n                    placeholder=\"Enter JSON example structure...\"\n                    style=\"width: 100%; height: 200px; border: 1px solid var(--mj-border-default); border-radius: 4px;\">\n                  </mj-code-editor>\n                  <div style=\"margin-top: 8px; color: var(--mj-text-muted); font-size: 0.85em;\">\n                    <i class=\"fa-solid fa-info-circle\"></i> Provide a JSON example that defines the expected structure for object output validation.\n                  </div>\n                } @else if (record.OutputExample) {\n                  <div style=\"background: var(--mj-bg-surface-sunken); border: 1px solid var(--mj-border-default); border-radius: 4px; padding: 12px; font-family: 'Courier New', monospace; font-size: 0.9em; white-space: pre-wrap; overflow: auto; max-height: 250px;\">{{ record.OutputExample }}</div>\n                } @else {\n                  <mj-alert Variant=\"warning\">Output example is required when output type is 'object'</mj-alert>\n                }\n              </div>\n            </mj-accordion-panel>\n          }\n          <!-- Execution History Expansion Panel -->\n          @if (record.IsSaved) {\n            <mj-accordion-panel\n              [Expanded]=\"false\"\n              style=\"margin-bottom: 12px;\">\n              <ng-template mjAccordionTitle>\n                <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n                  <i class=\"fa-solid fa-history\" style=\"color: var(--mj-text-muted);\"></i>\n                  Execution History\n                  @if (executionHistory.length > 0) {\n                    <span style=\"color: var(--mj-text-muted); font-weight: normal;\">({{ executionHistory.length }})</span>\n                  }\n                </span>\n              </ng-template>\n              <!-- Custom Execution History Viewer -->\n              <div style=\"padding: 16px;\">\n                @if (isLoadingHistory) {\n                  <div style=\"text-align: center; padding: 40px; color: var(--mj-text-muted);\">\n                    <i class=\"fa-solid fa-spinner fa-spin\" style=\"font-size: 2em; margin-bottom: 12px;\"></i>\n                    <p>Loading execution history...</p>\n                  </div>\n                } @else if (executionHistory.length === 0) {\n                  <mj-empty-state\n                    Size=\"compact\"\n                    Icon=\"fa-solid fa-clock-rotate-left\"\n                    Title=\"No execution history yet\"\n                    Message=\"Run this prompt to see execution history here\" />\n                } @else {\n                  <!-- Sort Controls -->\n                  <div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;\">\n                    <div style=\"color: var(--mj-text-muted); font-size: 0.9em;\">\n                      Showing {{ executionHistory.length }} executions\n                    </div>\n                    <div style=\"display: flex; gap: 8px; align-items: center;\">\n                      <span style=\"color: var(--mj-text-muted); font-size: 0.85em;\">Sort by:</span>\n                      <div class=\"mj-button-group\">\n                        <button mjButton\n                          [class.active]=\"historySortField === 'runAt'\"\n                          (click)=\"changeHistorySort('runAt')\"\n                          size=\"sm\">\n                          Date\n                          @if (historySortField === 'runAt') {\n                            <i [class]=\"'fa-solid fa-sort-' + (historySortDirection === 'asc' ? 'up' : 'down')\"\n                            style=\"margin-left: 4px; font-size: 0.8em;\"></i>\n                          }\n                        </button>\n                        <button mjButton\n                          [class.active]=\"historySortField === 'executionTime'\"\n                          (click)=\"changeHistorySort('executionTime')\"\n                          size=\"sm\">\n                          Duration\n                          @if (historySortField === 'executionTime') {\n                            <i [class]=\"'fa-solid fa-sort-' + (historySortDirection === 'asc' ? 'up' : 'down')\"\n                            style=\"margin-left: 4px; font-size: 0.8em;\"></i>\n                          }\n                        </button>\n                        <button mjButton\n                          [class.active]=\"historySortField === 'tokens'\"\n                          (click)=\"changeHistorySort('tokens')\"\n                          size=\"sm\">\n                          Tokens\n                          @if (historySortField === 'tokens') {\n                            <i [class]=\"'fa-solid fa-sort-' + (historySortDirection === 'asc' ? 'up' : 'down')\"\n                            style=\"margin-left: 4px; font-size: 0.8em;\"></i>\n                          }\n                        </button>\n                        <button mjButton\n                          [class.active]=\"historySortField === 'cost'\"\n                          (click)=\"changeHistorySort('cost')\"\n                          size=\"sm\">\n                          Cost\n                          @if (historySortField === 'cost') {\n                            <i [class]=\"'fa-solid fa-sort-' + (historySortDirection === 'asc' ? 'up' : 'down')\"\n                            style=\"margin-left: 4px; font-size: 0.8em;\"></i>\n                          }\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                  <!-- Execution History Table -->\n                  <div style=\"border: 1px solid var(--mj-border-default); border-radius: 8px; overflow: hidden;\">\n                    <table style=\"width: 100%; border-collapse: collapse;\">\n                      <thead>\n                        <tr style=\"background: var(--mj-bg-surface-sunken); border-bottom: 2px solid var(--mj-border-default);\">\n                          <th style=\"padding: 12px; text-align: left; font-weight: 600; color: var(--mj-text-secondary);\">Status</th>\n                          <th style=\"padding: 12px; text-align: left; font-weight: 600; color: var(--mj-text-secondary);\">Date & Time</th>\n                          <th style=\"padding: 12px; text-align: left; font-weight: 600; color: var(--mj-text-secondary);\">Model</th>\n                          <th style=\"padding: 12px; text-align: left; font-weight: 600; color: var(--mj-text-secondary);\">Duration</th>\n                          <th style=\"padding: 12px; text-align: right; font-weight: 600; color: var(--mj-text-secondary);\">Tokens</th>\n                          <th style=\"padding: 12px; text-align: right; font-weight: 600; color: var(--mj-text-secondary);\">Cost</th>\n                          <th style=\"padding: 12px; text-align: center; font-weight: 600; color: var(--mj-text-secondary);\">Type</th>\n                          <th style=\"padding: 12px; text-align: center; font-weight: 600; color: var(--mj-text-secondary);\">Actions</th>\n                        </tr>\n                      </thead>\n                      <tbody>\n                        @for (run of executionHistory; track run.ID; let i = $index) {\n                          <tr class=\"history-row\"\n                            [class.even-row]=\"i % 2 === 0\"\n                            style=\"border-bottom: 1px solid var(--mj-border-default);\">\n                            <td style=\"padding: 12px;\">\n                              <span style=\"display: flex; align-items: center; gap: 6px;\">\n                                <i [class]=\"'fa-solid ' + getExecutionStatusIcon(run.Success)\"\n                                [style.color]=\"getExecutionStatusColor(run.Success)\"></i>\n                                <span [style.color]=\"getExecutionStatusColor(run.Success)\" style=\"font-weight: 500;\">\n                                  {{ run.Success === true ? 'Success' : run.Success === false ? 'Failed' : 'Running' }}\n                                </span>\n                              </span>\n                            </td>\n                            <td style=\"padding: 12px; color: var(--mj-text-secondary);\">\n                              {{ run.RunAt | date:'short' }}\n                            </td>\n                            <td style=\"padding: 12px; color: var(--mj-text-secondary);\">\n                              <span style=\"display: flex; align-items: center; gap: 6px;\">\n                                <i class=\"fa-solid fa-microchip\" style=\"color: var(--mj-text-muted);\"></i>\n                                {{ run.Model || 'Unknown' }}\n                              </span>\n                            </td>\n                            <td style=\"padding: 12px; color: var(--mj-text-secondary);\">\n                              {{ formatDuration(run.ExecutionTimeMS) }}\n                            </td>\n                            <td style=\"padding: 12px; text-align: right; color: var(--mj-text-secondary);\">\n                              {{ formatTokens(run.TokensUsed) }}\n                            </td>\n                            <td style=\"padding: 12px; text-align: right; color: var(--mj-text-secondary);\">\n                              {{ formatCost(run.TotalCost || run.Cost) }}\n                            </td>\n                            <td style=\"padding: 12px; text-align: center;\">\n                              @if (run.RunType) {\n                                                            <span style=\"padding: 4px 8px; border-radius: 12px; background: var(--mj-bg-surface-sunken); \n                                                                       color: var(--mj-text-secondary); font-size: 0.85em; font-weight: 500;\">\n                                  {{ run.RunType }}\n                                </span>\n                              }\n                            </td>\n                            <td style=\"padding: 12px; text-align: center;\">\n                              <button mjButton\n                                variant=\"flat\"\n                                size=\"sm\"\n                                (click)=\"navigateToPromptRun(run.ID)\"\n                                title=\"View details\">\n                                <i class=\"fa-solid fa-external-link\"></i>\n                              </button>\n                            </td>\n                          </tr>\n                        }\n                      </tbody>\n                    </table>\n                  </div>\n                }\n              </div>\n            </mj-accordion-panel>\n          }\n          <!-- Cache Expansion Panel -->\n          @if (record.IsSaved && record.EnableCaching) {\n            <mj-accordion-panel\n              [Expanded]=\"false\"\n              style=\"margin-bottom: 12px;\">\n              <ng-template mjAccordionTitle>\n                <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n                  <i class=\"fa-solid fa-database\" style=\"color: var(--mj-text-muted);\"></i>\n                  Result Cache\n                </span>\n              </ng-template>\n              <!-- Direct Content Projection -->\n              <div style=\"padding: 16px 0;\">\n                <mj-explorer-entity-data-grid\n                  [Params]=\"BuildRelationshipViewParamsByEntityName('MJ: AI Result Cache','AIPromptID')\"\n                  [NewRecordValues]=\"NewRecordValues('MJ: AI Result Cache')\"\n                  [AllowLoad]=\"true\"\n                  [ShowToolbar]=\"false\">\n                </mj-explorer-entity-data-grid>\n              </div>\n            </mj-accordion-panel>\n          }\n          <!-- Related Items Expansion Panel -->\n          @if (record.IsSaved) {\n            <mj-accordion-panel\n              [Expanded]=\"false\"\n              style=\"margin-bottom: 12px;\">\n              <ng-template mjAccordionTitle>\n                <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n                  <i class=\"fa-solid fa-link\" style=\"color: var(--mj-text-muted);\"></i>\n                  Related Items\n                </span>\n              </ng-template>\n              <!-- Direct Content Projection -->\n              <div style=\"padding: 16px 0;\">\n                <div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 20px;\">\n                  <!-- AI Agents -->\n                  <div>\n                    <h6 style=\"margin: 0 0 12px 0; color: var(--mj-text-secondary);\">AI Agents Using This Prompt</h6>\n                    <mj-explorer-entity-data-grid\n                      [Params]=\"BuildRelationshipViewParamsByEntityName('MJ: AI Agent Prompts','PromptID')\"\n                      [NewRecordValues]=\"NewRecordValues('MJ: AI Agent Prompts')\"\n                      [AllowLoad]=\"true\"\n                      [ShowToolbar]=\"false\">\n                    </mj-explorer-entity-data-grid>\n                  </div>\n                  <!-- Result Selector References -->\n                  <div>\n                    <h6 style=\"margin: 0 0 12px 0; color: var(--mj-text-secondary);\">Prompts Using This as Result Selector</h6>\n                    <mj-explorer-entity-data-grid\n                      [Params]=\"BuildRelationshipViewParamsByEntityName('MJ: AI Prompts','ResultSelectorPromptID')\"\n                      [NewRecordValues]=\"NewRecordValues('MJ: AI Prompts')\"\n                      [AllowLoad]=\"true\"\n                      [ShowToolbar]=\"false\">\n                    </mj-explorer-entity-data-grid>\n                  </div>\n                </div>\n              </div>\n            </mj-accordion-panel>\n          }\n        </div>\n      </div>\n    </form>\n</mj-record-form-container>\n}\n\n\n<!-- AI Prompt Test Harness -->\n@if (showTestHarness) {\n  <mj-window\n    [Width]=\"1200\"\n    [Height]=\"800\"\n    [MinWidth]=\"800\"\n    [MinHeight]=\"600\"\n    [Draggable]=\"true\"\n    [Resizable]=\"true\"\n    [Visible]=\"true\"\n    (Close)=\"onTestHarnessVisibilityChanged(false)\"\n    [Title]=\"'Run AI Prompt - ' + (record.Name || 'Untitled')\">\n    <mj-ai-test-harness\n      [entity]=\"record\"\n      [mode]=\"'prompt'\"\n      [isVisible]=\"showTestHarness\"\n      (visibilityChange)=\"onTestHarnessVisibilityChanged($event)\">\n    </mj-ai-test-harness>\n  </mj-window>\n}", styles: ["/* Override shared form-styles to enable flex layout */\n:host {\n    display: block;\n    height: 100%;\n}\n\n.record-form-container {\n    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n    padding: 10px;\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    min-height: 0;\n    overflow: hidden;\n}\n\n.record-form {\n    min-height: 0 !important;\n}\n\n.custom-toolbar-actions {\n    margin-left: auto;\n}\n\n.status-badge {\n    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n    font-weight: 500;\n    letter-spacing: 0.02em;\n}\n\n.config-summary {\n    position: sticky;\n    top: 0;\n    max-height: 600px;\n    overflow-y: auto;\n}\n\n.config-item {\n    padding: 8px 0;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.config-item:last-child {\n    border-bottom: none;\n}\n\n.template-tab-content {\n    background: var(--mj-bg-surface);\n}\n\n.template-header h5 {\n    font-size: 1.1em;\n}\n\n.loading-state {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n}\n\n/* Template-editor placeholders fill the editor pane */\nmj-empty-state.no-template-state,\nmj-empty-state.invalid-template-state {\n    flex: 1;\n}\n\n.template-editor-container {\n    background: var(--mj-bg-surface);\n    border-radius: var(--mj-radius-md);\n}\n\n/* Grid layout adjustments */\n@media (max-width: 1200px) {\n    .record-form-container .mj-tab-body > div {\n        grid-template-columns: 1fr !important;\n        gap: 20px;\n    }\n\n    .config-summary {\n        order: -1;\n        position: static;\n        max-height: none;\n    }\n}\n\n/* Responsive toolbar */\n@media (max-width: 768px) {\n    .custom-toolbar-actions {\n        flex-direction: column;\n        gap: 4px !important;\n    }\n\n    .status-badge {\n        align-self: flex-start;\n    }\n}\n\n/* Ensure proper spacing in form sections */\n.record-form-container mj-form-section {\n    padding: 16px;\n}\n\n/* Smooth transitions for better UX */\n.status-badge,\n.config-item,\n.template-header {\n    transition: all 0.2s ease;\n}\n\n.config-item:hover {\n    background-color: var(--mj-bg-surface-sunken);\n    border-radius: var(--mj-radius-sm);\n    margin: 0 -8px;\n    padding: 8px;\n}\n\n/* Execution History Table Styles */\n.history-row {\n    transition: background 0.2s;\n}\n\n.history-row:not(.even-row) {\n    background: var(--mj-bg-surface-card);\n}\n\n.history-row.even-row {\n    background: var(--mj-bg-surface);\n}\n\n.history-row:hover {\n    background: var(--mj-border-default) !important;\n}\n\n/* Template Parameters Styles */\n.parameter-card {\n    position: relative;\n    overflow: hidden;\n}\n\n.parameter-card::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    width: 4px;\n    background: inherit;\n    transition: width 0.2s;\n}\n\n.parameter-card:hover {\n    transform: translateY(-2px);\n    box-shadow: var(--mj-shadow-md);\n}\n\n.parameter-card:hover::before {\n    width: 6px;\n}\n\n.type-badge {\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.03em;\n    transition: transform 0.2s;\n}\n\n.parameter-card:hover .type-badge {\n    transform: scale(1.05);\n}\n\n/* Parameter type icons animation */\n.parameter-card i.fa-solid {\n    transition: transform 0.3s;\n}\n\n.parameter-card:hover i.fa-solid {\n    transform: rotate(360deg);\n}\n\n/* Grid responsive behavior */\n@media (max-width: 768px) {\n    .parameter-card {\n        margin-bottom: 8px;\n    }\n\n    .parameter-card h6 {\n        font-size: 0.95em;\n    }\n\n    .type-badge {\n        font-size: 0.7em !important;\n    }\n}\n"] }]
-    }], null, { templateEditor: [{
+    }], null, { TemplateEditor: [{
             type: ViewChild,
             args: ['templateEditor']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJAIPromptFormComponentExtended, { className: "MJAIPromptFormComponentExtended", filePath: "src/lib/custom/AIPrompts/ai-prompt-form.component.ts", lineNumber: 22 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJAIPromptFormComponentExtended, { className: "MJAIPromptFormComponentExtended", filePath: "src/lib/custom/AIPrompts/ai-prompt-form.component.ts", lineNumber: 23 }); })();
 //# sourceMappingURL=ai-prompt-form.component.js.map