@memberjunction/ng-dashboards 2.48.0 → 2.50.0

package/dist/AI/components/prompts/prompt-management.component.js

@@ -1,12 +1,3 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 import { Component, Output, EventEmitter } from '@angular/core';
 import { RunView, Metadata, LogError, LogStatus } from '@memberjunction/core';
 import { Subject, BehaviorSubject, combineLatest } from 'rxjs';
@@ -686,61 +677,62 @@ function PromptManagementComponent_Conditional_2_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵconditional(ctx_r1.isEditing ? 57 : -1);
 } }
 export class PromptManagementComponent {
+    mjNotificationsService;
+    openEntityRecord = new EventEmitter();
+    stateChange = new EventEmitter();
+    // Data properties
+    prompts = [];
+    categories = [];
+    types = [];
+    templates = [];
+    templateContents = [];
+    promptsWithTemplates = [];
+    filteredPrompts = [];
+    // UI state
+    isLoading = false;
+    loadingMessage = 'Loading prompts...';
+    error = null;
+    currentView = 'list';
+    currentSubView = 'list';
+    selectedPrompt = null;
+    isEditing = false;
+    isDirty = false;
+    // Editor state
+    editorContent = '';
+    editorMode = 'nunjucks';
+    showPreview = false;
+    supportedLanguages = languages;
+    editorLanguage = 'jinja2';
+    // Category creation
+    newCategoryName = '';
+    showNewCategoryInput = false;
+    // Splitter panel width
+    promptDetailsPanelWidth = 300;
+    // Filter panel visibility
+    filterPanelVisible = true;
+    // Current filters object for the filter panel
+    currentFilters = {
+        searchTerm: '',
+        categoryId: 'all',
+        typeId: 'all',
+        status: 'all'
+    };
+    // Filter state
+    searchTerm$ = new BehaviorSubject('');
+    selectedCategory$ = new BehaviorSubject('all');
+    selectedType$ = new BehaviorSubject('all');
+    selectedStatus$ = new BehaviorSubject('all');
+    categoryOptions = [];
+    typeOptions = [];
+    statusOptions = [
+        { text: 'All Statuses', value: 'all' },
+        { text: 'Active', value: 'Active' },
+        { text: 'Pending', value: 'Pending' },
+        { text: 'Disabled', value: 'Disabled' }
+    ];
+    destroy$ = new Subject();
     constructor(mjNotificationsService) {
         this.mjNotificationsService = mjNotificationsService;
-        this.openEntityRecord = new EventEmitter();
-        this.stateChange = new EventEmitter();
-        // Data properties
-        this.prompts = [];
-        this.categories = [];
-        this.types = [];
-        this.templates = [];
-        this.templateContents = [];
-        this.promptsWithTemplates = [];
-        this.filteredPrompts = [];
-        // UI state
-        this.isLoading = false;
-        this.loadingMessage = 'Loading prompts...';
-        this.error = null;
-        this.currentView = 'list';
-        this.currentSubView = 'list';
-        this.selectedPrompt = null;
-        this.isEditing = false;
-        this.isDirty = false;
-        // Editor state
-        this.editorContent = '';
-        this.editorMode = 'nunjucks';
-        this.showPreview = false;
-        this.supportedLanguages = languages;
-        this.editorLanguage = 'jinja2';
-        // Category creation
-        this.newCategoryName = '';
-        this.showNewCategoryInput = false;
-        // Splitter panel width
-        this.promptDetailsPanelWidth = 300;
-        // Filter panel visibility
-        this.filterPanelVisible = true;
-        // Current filters object for the filter panel
-        this.currentFilters = {
-            searchTerm: '',
-            categoryId: 'all',
-            typeId: 'all',
-            status: 'all'
-        };
-        // Filter state
-        this.searchTerm$ = new BehaviorSubject('');
-        this.selectedCategory$ = new BehaviorSubject('all');
-        this.selectedType$ = new BehaviorSubject('all');
-        this.selectedStatus$ = new BehaviorSubject('all');
-        this.categoryOptions = [];
-        this.typeOptions = [];
-        this.statusOptions = [
-            { text: 'All Statuses', value: 'all' },
-            { text: 'Active', value: 'Active' },
-            { text: 'Pending', value: 'Pending' },
-            { text: 'Disabled', value: 'Disabled' }
-        ];
-        this.destroy$ = new Subject();
     }
     toggleFilterPanel() {
         this.filterPanelVisible = !this.filterPanelVisible;
@@ -751,7 +743,7 @@ export class PromptManagementComponent {
         this.emitStateChange();
     }
     onFiltersChange(filters) {
-        this.currentFilters = Object.assign({}, filters);
+        this.currentFilters = { ...filters };
         // Update the BehaviorSubjects to match the filter panel
         this.searchTerm$.next(filters.searchTerm);
         this.selectedCategory$.next(filters.categoryId);
@@ -791,132 +783,120 @@ export class PromptManagementComponent {
             this.applyFilters();
         });
     }
-    loadData() {
-        return __awaiter(this, void 0, void 0, function* () {
-            try {
-                this.isLoading = true;
-                this.error = null;
-                this.loadingMessage = 'Loading prompts and templates...';
-                const [prompts, categories, types, templates, templateContents] = yield Promise.all([
-                    this.loadPrompts(),
-                    this.loadCategories(),
-                    this.loadTypes(),
-                    this.loadTemplates(),
-                    this.loadTemplateContents()
-                ]);
-                this.prompts = prompts;
-                this.categories = categories;
-                this.types = types;
-                this.templates = templates;
-                this.templateContents = templateContents;
-                this.buildPromptTemplateRelationships();
-                this.buildFilterOptions();
-                this.applyFilters();
-                LogStatus('Prompt management data loaded successfully');
-            }
-            catch (error) {
-                this.error = 'Failed to load prompt data. Please try again.';
-                LogError('Error loading prompt management data', undefined, error);
-            }
-            finally {
-                this.isLoading = false;
-            }
-        });
+    async loadData() {
+        try {
+            this.isLoading = true;
+            this.error = null;
+            this.loadingMessage = 'Loading prompts and templates...';
+            const [prompts, categories, types, templates, templateContents] = await Promise.all([
+                this.loadPrompts(),
+                this.loadCategories(),
+                this.loadTypes(),
+                this.loadTemplates(),
+                this.loadTemplateContents()
+            ]);
+            this.prompts = prompts;
+            this.categories = categories;
+            this.types = types;
+            this.templates = templates;
+            this.templateContents = templateContents;
+            this.buildPromptTemplateRelationships();
+            this.buildFilterOptions();
+            this.applyFilters();
+            LogStatus('Prompt management data loaded successfully');
+        }
+        catch (error) {
+            this.error = 'Failed to load prompt data. Please try again.';
+            LogError('Error loading prompt management data', undefined, error);
+        }
+        finally {
+            this.isLoading = false;
+        }
     }
-    loadPrompts() {
-        return __awaiter(this, void 0, void 0, function* () {
-            const rv = new RunView();
-            const result = yield rv.RunView({
-                EntityName: 'AI Prompts',
-                ExtraFilter: '',
-                OrderBy: 'Name',
-                UserSearchString: '',
-                IgnoreMaxRows: false,
-                MaxRows: 1000
-            });
-            if (result && result.Success && result.Results) {
-                return result.Results;
-            }
-            else {
-                throw new Error('Failed to load AI prompts');
-            }
+    async loadPrompts() {
+        const rv = new RunView();
+        const result = await rv.RunView({
+            EntityName: 'AI Prompts',
+            ExtraFilter: '',
+            OrderBy: 'Name',
+            UserSearchString: '',
+            IgnoreMaxRows: false,
+            MaxRows: 1000
         });
+        if (result && result.Success && result.Results) {
+            return result.Results;
+        }
+        else {
+            throw new Error('Failed to load AI prompts');
+        }
     }
-    loadCategories() {
-        return __awaiter(this, void 0, void 0, function* () {
-            const rv = new RunView();
-            const result = yield rv.RunView({
-                EntityName: 'AI Prompt Categories',
-                ExtraFilter: '',
-                OrderBy: 'Name',
-                UserSearchString: '',
-                IgnoreMaxRows: false,
-                MaxRows: 1000
-            });
-            if (result && result.Success && result.Results) {
-                return result.Results;
-            }
-            else {
-                throw new Error('Failed to load AI prompt categories');
-            }
+    async loadCategories() {
+        const rv = new RunView();
+        const result = await rv.RunView({
+            EntityName: 'AI Prompt Categories',
+            ExtraFilter: '',
+            OrderBy: 'Name',
+            UserSearchString: '',
+            IgnoreMaxRows: false,
+            MaxRows: 1000
         });
+        if (result && result.Success && result.Results) {
+            return result.Results;
+        }
+        else {
+            throw new Error('Failed to load AI prompt categories');
+        }
     }
-    loadTypes() {
-        return __awaiter(this, void 0, void 0, function* () {
-            const rv = new RunView();
-            const result = yield rv.RunView({
-                EntityName: 'AI Prompt Types',
-                ExtraFilter: '',
-                OrderBy: 'Name',
-                UserSearchString: '',
-                IgnoreMaxRows: false,
-                MaxRows: 1000
-            });
-            if (result && result.Success && result.Results) {
-                return result.Results;
-            }
-            else {
-                throw new Error('Failed to load AI prompt types');
-            }
+    async loadTypes() {
+        const rv = new RunView();
+        const result = await rv.RunView({
+            EntityName: 'AI Prompt Types',
+            ExtraFilter: '',
+            OrderBy: 'Name',
+            UserSearchString: '',
+            IgnoreMaxRows: false,
+            MaxRows: 1000
         });
+        if (result && result.Success && result.Results) {
+            return result.Results;
+        }
+        else {
+            throw new Error('Failed to load AI prompt types');
+        }
     }
-    loadTemplates() {
-        return __awaiter(this, void 0, void 0, function* () {
-            const rv = new RunView();
-            const result = yield rv.RunView({
-                EntityName: 'Templates',
-                ExtraFilter: '',
-                OrderBy: 'Name',
-                UserSearchString: '',
-                IgnoreMaxRows: false,
-                MaxRows: 1000
-            });
-            if (result && result.Success && result.Results) {
-                return result.Results;
-            }
-            else {
-                throw new Error('Failed to load templates');
-            }
+    async loadTemplates() {
+        const rv = new RunView();
+        const result = await rv.RunView({
+            EntityName: 'Templates',
+            ExtraFilter: '',
+            OrderBy: 'Name',
+            UserSearchString: '',
+            IgnoreMaxRows: false,
+            MaxRows: 1000
         });
+        if (result && result.Success && result.Results) {
+            return result.Results;
+        }
+        else {
+            throw new Error('Failed to load templates');
+        }
     }
-    loadTemplateContents() {
-        return __awaiter(this, void 0, void 0, function* () {
-            const rv = new RunView();
-            const result = yield rv.RunView({
-                EntityName: 'Template Contents',
-                ExtraFilter: '',
-                OrderBy: 'TemplateID',
-                UserSearchString: '',
-                IgnoreMaxRows: false,
-                MaxRows: 1000
-            });
-            if (result && result.Success && result.Results) {
-                return result.Results;
-            }
-            else {
-                throw new Error('Failed to load template contents');
-            }
+    async loadTemplateContents() {
+        const rv = new RunView();
+        const result = await rv.RunView({
+            EntityName: 'Template Contents',
+            ExtraFilter: '',
+            OrderBy: 'TemplateID',
+            UserSearchString: '',
+            IgnoreMaxRows: false,
+            MaxRows: 1000
         });
+        if (result && result.Success && result.Results) {
+            return result.Results;
+        }
+        else {
+            throw new Error('Failed to load template contents');
+        }
     }
     buildPromptTemplateRelationships() {
         this.promptsWithTemplates = this.prompts.map(prompt => {
@@ -949,13 +929,10 @@ export class PromptManagementComponent {
         // Apply search filter
         const searchTerm = this.searchTerm$.value.toLowerCase();
         if (searchTerm) {
-            filtered = filtered.filter(item => {
-                var _a, _b;
-                return item.prompt.Name.toLowerCase().includes(searchTerm) ||
-                    (item.prompt.Description || '').toLowerCase().includes(searchTerm) ||
-                    (((_a = item.category) === null || _a === void 0 ? void 0 : _a.Name) || '').toLowerCase().includes(searchTerm) ||
-                    (((_b = item.template) === null || _b === void 0 ? void 0 : _b.Name) || '').toLowerCase().includes(searchTerm);
-            });
+            filtered = filtered.filter(item => item.prompt.Name.toLowerCase().includes(searchTerm) ||
+                (item.prompt.Description || '').toLowerCase().includes(searchTerm) ||
+                (item.category?.Name || '').toLowerCase().includes(searchTerm) ||
+                (item.template?.Name || '').toLowerCase().includes(searchTerm));
         }
         // Apply category filter
         const categoryId = this.selectedCategory$.value;
@@ -989,64 +966,59 @@ export class PromptManagementComponent {
     }
     // Navigation methods
     viewPrompt(promptWithTemplate) {
-        var _a;
         this.selectedPrompt = promptWithTemplate;
         this.currentView = 'editor';
         this.isEditing = false;
         this.isDirty = false;
-        this.editorContent = ((_a = promptWithTemplate.templateContent) === null || _a === void 0 ? void 0 : _a.TemplateText) || '';
+        this.editorContent = promptWithTemplate.templateContent?.TemplateText || '';
         this.emitStateChange();
     }
     editPrompt(promptWithTemplate) {
-        var _a;
         this.selectedPrompt = promptWithTemplate;
         this.currentView = 'editor';
         this.isEditing = true;
         this.isDirty = false;
-        this.editorContent = ((_a = promptWithTemplate.templateContent) === null || _a === void 0 ? void 0 : _a.TemplateText) || '';
+        this.editorContent = promptWithTemplate.templateContent?.TemplateText || '';
         this.emitStateChange();
     }
-    createNewCategory() {
-        return __awaiter(this, void 0, void 0, function* () {
-            var _a;
-            if (!this.newCategoryName.trim())
-                return null;
-            try {
-                const md = new Metadata();
-                if (!md)
-                    throw new Error('Metadata provider not available');
-                const category = yield md.GetEntityObject('AI Prompt Categories', md.CurrentUser);
-                category.Name = this.newCategoryName.trim();
-                category.Description = 'Category created during prompt editing';
-                const result = yield category.Save();
-                if (result) {
-                    LogStatus('Category created successfully');
-                    this.mjNotificationsService.CreateSimpleNotification('Category created successfully', 'success', 2000);
-                    yield this.loadCategories();
-                    this.buildFilterOptions();
-                    // Update filter panel categories
-                    this.updateFilterPanelCategories();
-                    this.newCategoryName = '';
-                    this.showNewCategoryInput = false;
-                    return category.ID;
-                }
-                else {
-                    // Handle save failure
-                    const errorMessage = ((_a = category.LatestResult) === null || _a === void 0 ? void 0 : _a.Message) || 'Unknown error occurred while saving category';
-                    console.error('Category save failed:', category.LatestResult);
-                    LogError('Category save failed', undefined, category.LatestResult);
-                    this.mjNotificationsService.CreateSimpleNotification(errorMessage, 'error', 3500);
-                    this.error = `Failed to create category: ${errorMessage}`;
-                    return null;
-                }
+    async createNewCategory() {
+        if (!this.newCategoryName.trim())
+            return null;
+        try {
+            const md = new Metadata();
+            if (!md)
+                throw new Error('Metadata provider not available');
+            const category = await md.GetEntityObject('AI Prompt Categories', md.CurrentUser);
+            category.Name = this.newCategoryName.trim();
+            category.Description = 'Category created during prompt editing';
+            const result = await category.Save();
+            if (result) {
+                LogStatus('Category created successfully');
+                this.mjNotificationsService.CreateSimpleNotification('Category created successfully', 'success', 2000);
+                await this.loadCategories();
+                this.buildFilterOptions();
+                // Update filter panel categories
+                this.updateFilterPanelCategories();
+                this.newCategoryName = '';
+                this.showNewCategoryInput = false;
+                return category.ID;
             }
-            catch (error) {
-                LogError('Error creating category', undefined, error);
-                this.mjNotificationsService.CreateSimpleNotification('Failed to create category. Please try again.', 'error', 3500);
-                this.error = 'Failed to create category. Please try again.';
+            else {
+                // Handle save failure
+                const errorMessage = category.LatestResult?.Message || 'Unknown error occurred while saving category';
+                console.error('Category save failed:', category.LatestResult);
+                LogError('Category save failed', undefined, category.LatestResult);
+                this.mjNotificationsService.CreateSimpleNotification(errorMessage, 'error', 3500);
+                this.error = `Failed to create category: ${errorMessage}`;
                 return null;
             }
-        });
+        }
+        catch (error) {
+            LogError('Error creating category', undefined, error);
+            this.mjNotificationsService.CreateSimpleNotification('Failed to create category. Please try again.', 'error', 3500);
+            this.error = 'Failed to create category. Please try again.';
+            return null;
+        }
     }
     updateFilterPanelCategories() {
         // Trigger update of filter panel categories when new ones are created
@@ -1062,56 +1034,50 @@ export class PromptManagementComponent {
             this.isDirty = true;
         }
     }
-    onCreateNewCategoryKeyup(event) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (event.key === 'Enter') {
-                yield this.createAndSelectNewCategory();
-            }
-            else if (event.key === 'Escape') {
-                this.newCategoryName = '';
-                this.showNewCategoryInput = false;
-            }
-        });
+    async onCreateNewCategoryKeyup(event) {
+        if (event.key === 'Enter') {
+            await this.createAndSelectNewCategory();
+        }
+        else if (event.key === 'Escape') {
+            this.newCategoryName = '';
+            this.showNewCategoryInput = false;
+        }
     }
     cancelNewCategory() {
         this.newCategoryName = '';
         this.showNewCategoryInput = false;
     }
-    createAndSelectNewCategory() {
-        return __awaiter(this, void 0, void 0, function* () {
-            const newCategoryId = yield this.createNewCategory();
-            if (newCategoryId && this.selectedPrompt) {
-                this.selectedPrompt.prompt.CategoryID = newCategoryId;
-                this.isDirty = true;
-            }
-        });
+    async createAndSelectNewCategory() {
+        const newCategoryId = await this.createNewCategory();
+        if (newCategoryId && this.selectedPrompt) {
+            this.selectedPrompt.prompt.CategoryID = newCategoryId;
+            this.isDirty = true;
+        }
     }
-    createNewPrompt() {
-        return __awaiter(this, void 0, void 0, function* () {
-            // Create a new prompt structure
-            const md = new Metadata();
-            if (!md)
-                return;
-            const promptEntity = yield md.GetEntityObject('AI Prompts', md.CurrentUser);
-            promptEntity.Name = 'New Prompt';
-            promptEntity.Description = '';
-            promptEntity.CategoryID = '';
-            promptEntity.TypeID = '';
-            promptEntity.Status = 'Pending';
-            promptEntity.TemplateID = '';
-            const newPrompt = {
-                prompt: promptEntity,
-                template: null,
-                templateContent: null,
-                category: null,
-                type: null
-            };
-            this.selectedPrompt = newPrompt;
-            this.currentView = 'editor';
-            this.isEditing = true;
-            this.isDirty = false;
-            this.editorContent = '';
-        });
+    async createNewPrompt() {
+        // Create a new prompt structure
+        const md = new Metadata();
+        if (!md)
+            return;
+        const promptEntity = await md.GetEntityObject('AI Prompts', md.CurrentUser);
+        promptEntity.Name = 'New Prompt';
+        promptEntity.Description = '';
+        promptEntity.CategoryID = '';
+        promptEntity.TypeID = '';
+        promptEntity.Status = 'Pending';
+        promptEntity.TemplateID = '';
+        const newPrompt = {
+            prompt: promptEntity,
+            template: null,
+            templateContent: null,
+            category: null,
+            type: null
+        };
+        this.selectedPrompt = newPrompt;
+        this.currentView = 'editor';
+        this.isEditing = true;
+        this.isDirty = false;
+        this.editorContent = '';
     }
     backToList() {
         if (this.isDirty) {
@@ -1154,11 +1120,10 @@ export class PromptManagementComponent {
         }
     }
     emitStateChange() {
-        var _a;
         const state = {
             currentView: this.currentView,
             currentSubView: this.currentSubView,
-            selectedPromptId: ((_a = this.selectedPrompt) === null || _a === void 0 ? void 0 : _a.prompt.ID) || null,
+            selectedPromptId: this.selectedPrompt?.prompt.ID || null,
             isEditing: this.isEditing,
             promptDetailsPanelWidth: this.promptDetailsPanelWidth,
             filterPanelVisible: this.filterPanelVisible,
@@ -1169,160 +1134,154 @@ export class PromptManagementComponent {
         };
         this.stateChange.emit(state);
     }
-    savePrompt() {
-        return __awaiter(this, void 0, void 0, function* () {
-            var _a, _b, _c, _d, _e, _f;
-            if (!this.selectedPrompt || !this.isEditing)
-                return;
-            try {
-                this.isLoading = true;
-                const md = new Metadata();
-                if (!md)
-                    throw new Error('Metadata provider not available');
-                // Save or create template content first
-                let templateContentId = (_a = this.selectedPrompt.templateContent) === null || _a === void 0 ? void 0 : _a.ID;
-                if (!templateContentId) {
-                    // Create new template content
-                    const templateContent = yield md.GetEntityObject('Template Contents', md.CurrentUser);
-                    templateContent.TemplateText = this.editorContent;
-                    // make sure the template engine metadata is set correctly
-                    yield TemplateEngineBase.Instance.Config(false);
-                    const tcType = TemplateEngineBase.Instance.TemplateContentTypes.find(tct => tct.Name.trim().toLowerCase() === 'text');
-                    if (!tcType) {
-                        throw new Error('Template content type "text" not found');
-                    }
-                    templateContent.TypeID = tcType.ID;
-                    templateContent.Priority = 0; // Default priority
-                    // We need to link to a template, create one if needed
-                    if (!this.selectedPrompt.template) {
-                        const template = yield md.GetEntityObject('Templates', md.CurrentUser);
-                        template.Name = this.selectedPrompt.prompt.Name + ' Template';
-                        template.Description = 'Template for ' + this.selectedPrompt.prompt.Name;
-                        template.UserID = md.CurrentUser.ID;
-                        if (yield template.Save()) {
-                            templateContent.TemplateID = template.ID;
-                            this.selectedPrompt.template = template;
-                        }
-                        else {
-                            // we have an error saving the template
-                            const errorMessage = ((_b = template.LatestResult) === null || _b === void 0 ? void 0 : _b.Message) || 'Unknown error occurred while saving template';
-                            console.error('Template save failed:', errorMessage);
-                            LogError('Template save failed', undefined, errorMessage);
-                            this.mjNotificationsService.CreateSimpleNotification(errorMessage, 'error', 3500);
-                            this.error = `Failed to save template: ${errorMessage}`;
-                            return;
-                        }
-                    }
-                    else {
-                        templateContent.TemplateID = this.selectedPrompt.template.ID;
-                    }
-                    if (yield templateContent.Save()) {
-                        templateContentId = templateContent.ID;
-                        this.selectedPrompt.templateContent = templateContent;
+    async savePrompt() {
+        if (!this.selectedPrompt || !this.isEditing)
+            return;
+        try {
+            this.isLoading = true;
+            const md = new Metadata();
+            if (!md)
+                throw new Error('Metadata provider not available');
+            // Save or create template content first
+            let templateContentId = this.selectedPrompt.templateContent?.ID;
+            if (!templateContentId) {
+                // Create new template content
+                const templateContent = await md.GetEntityObject('Template Contents', md.CurrentUser);
+                templateContent.TemplateText = this.editorContent;
+                // make sure the template engine metadata is set correctly
+                await TemplateEngineBase.Instance.Config(false);
+                const tcType = TemplateEngineBase.Instance.TemplateContentTypes.find(tct => tct.Name.trim().toLowerCase() === 'text');
+                if (!tcType) {
+                    throw new Error('Template content type "text" not found');
+                }
+                templateContent.TypeID = tcType.ID;
+                templateContent.Priority = 0; // Default priority
+                // We need to link to a template, create one if needed
+                if (!this.selectedPrompt.template) {
+                    const template = await md.GetEntityObject('Templates', md.CurrentUser);
+                    template.Name = this.selectedPrompt.prompt.Name + ' Template';
+                    template.Description = 'Template for ' + this.selectedPrompt.prompt.Name;
+                    template.UserID = md.CurrentUser.ID;
+                    if (await template.Save()) {
+                        templateContent.TemplateID = template.ID;
+                        this.selectedPrompt.template = template;
                     }
                     else {
-                        // Handle save failure
-                        const errorMessage = ((_c = templateContent.LatestResult) === null || _c === void 0 ? void 0 : _c.Message) || 'Unknown error occurred while saving template content';
-                        console.error('Template content save failed:', errorMessage);
-                        LogError('Template content save failed', undefined, errorMessage);
+                        // we have an error saving the template
+                        const errorMessage = template.LatestResult?.Message || 'Unknown error occurred while saving template';
+                        console.error('Template save failed:', errorMessage);
+                        LogError('Template save failed', undefined, errorMessage);
                         this.mjNotificationsService.CreateSimpleNotification(errorMessage, 'error', 3500);
-                        this.error = `Failed to save template content: ${errorMessage}`;
+                        this.error = `Failed to save template: ${errorMessage}`;
                         return;
                     }
                 }
                 else {
-                    // Update existing template content
-                    const templateContent = yield md.GetEntityObject('Template Contents');
-                    yield templateContent.Load(templateContentId);
-                    templateContent.TemplateText = this.editorContent;
-                    if (!(yield templateContent.Save())) {
-                        // Handle save failure
-                        const errorMessage = ((_d = templateContent.LatestResult) === null || _d === void 0 ? void 0 : _d.Message) || 'Unknown error occurred while saving template content';
-                        console.error('Template content update failed:', errorMessage);
-                        LogError('Template content update failed', undefined, errorMessage);
-                        this.mjNotificationsService.CreateSimpleNotification(errorMessage, 'error', 3500);
-                        this.error = `Failed to update template content: ${errorMessage}`;
-                        return;
-                    }
+                    templateContent.TemplateID = this.selectedPrompt.template.ID;
                 }
-                // Save the prompt
-                let prompt;
-                if (this.selectedPrompt.prompt.ID) {
-                    // Update existing prompt
-                    prompt = yield md.GetEntityObject('AI Prompts', md.CurrentUser);
-                    yield prompt.Load(this.selectedPrompt.prompt.ID);
+                if (await templateContent.Save()) {
+                    templateContentId = templateContent.ID;
+                    this.selectedPrompt.templateContent = templateContent;
                 }
                 else {
-                    // Create new prompt
-                    prompt = yield md.GetEntityObject('AI Prompts', md.CurrentUser);
-                }
-                // Update prompt properties
-                prompt.Name = this.selectedPrompt.prompt.Name;
-                prompt.Description = this.selectedPrompt.prompt.Description;
-                prompt.CategoryID = this.selectedPrompt.prompt.CategoryID;
-                prompt.TypeID = this.selectedPrompt.prompt.TypeID;
-                prompt.Status = this.selectedPrompt.prompt.Status;
-                prompt.TemplateID = ((_e = this.selectedPrompt.template) === null || _e === void 0 ? void 0 : _e.ID) || '';
-                const promptResult = yield prompt.Save();
-                if (promptResult) {
-                    this.isDirty = false;
-                    this.isEditing = false;
-                    LogStatus('Prompt saved successfully');
-                    // Reload data to get the updated state
-                    yield this.loadData();
-                    // Find and select the updated prompt
-                    this.selectedPrompt = this.promptsWithTemplates.find(p => p.prompt.ID === prompt.ID) || null;
+                    // Handle save failure
+                    const errorMessage = templateContent.LatestResult?.Message || 'Unknown error occurred while saving template content';
+                    console.error('Template content save failed:', errorMessage);
+                    LogError('Template content save failed', undefined, errorMessage);
+                    this.mjNotificationsService.CreateSimpleNotification(errorMessage, 'error', 3500);
+                    this.error = `Failed to save template content: ${errorMessage}`;
+                    return;
                 }
-                else {
+            }
+            else {
+                // Update existing template content
+                const templateContent = await md.GetEntityObject('Template Contents');
+                await templateContent.Load(templateContentId);
+                templateContent.TemplateText = this.editorContent;
+                if (!await templateContent.Save()) {
                     // Handle save failure
-                    const errorMessage = ((_f = prompt.LatestResult) === null || _f === void 0 ? void 0 : _f.Message) || 'Unknown error occurred while saving prompt';
-                    console.error('Prompt save failed:', errorMessage);
-                    LogError('Prompt save failed', undefined, errorMessage);
+                    const errorMessage = templateContent.LatestResult?.Message || 'Unknown error occurred while saving template content';
+                    console.error('Template content update failed:', errorMessage);
+                    LogError('Template content update failed', undefined, errorMessage);
                     this.mjNotificationsService.CreateSimpleNotification(errorMessage, 'error', 3500);
-                    this.error = `Failed to save prompt: ${errorMessage}`;
+                    this.error = `Failed to update template content: ${errorMessage}`;
+                    return;
                 }
             }
-            catch (error) {
-                LogError('Error saving prompt', undefined, error);
-                this.error = 'Failed to save prompt. Please try again.';
+            // Save the prompt
+            let prompt;
+            if (this.selectedPrompt.prompt.ID) {
+                // Update existing prompt
+                prompt = await md.GetEntityObject('AI Prompts', md.CurrentUser);
+                await prompt.Load(this.selectedPrompt.prompt.ID);
             }
-            finally {
-                this.isLoading = false;
+            else {
+                // Create new prompt
+                prompt = await md.GetEntityObject('AI Prompts', md.CurrentUser);
             }
-        });
-    }
-    deletePrompt(promptWithTemplate) {
-        return __awaiter(this, void 0, void 0, function* () {
-            var _a;
-            if (!promptWithTemplate.prompt.ID)
-                return;
-            const confirm = window.confirm(`Are you sure you want to delete "${promptWithTemplate.prompt.Name}"?`);
-            if (!confirm)
-                return;
-            try {
-                this.isLoading = true;
-                const md = Metadata.Provider;
-                if (!md)
-                    throw new Error('Metadata provider not available');
-                const prompt = yield md.GetEntityObject('AI Prompts', md.CurrentUser);
-                yield prompt.Load(promptWithTemplate.prompt.ID);
-                const result = yield prompt.Delete();
-                if (result) {
-                    LogStatus('Prompt deleted successfully');
-                    yield this.loadData();
-                    if (((_a = this.selectedPrompt) === null || _a === void 0 ? void 0 : _a.prompt.ID) === promptWithTemplate.prompt.ID) {
-                        this.backToList();
-                    }
-                }
+            // Update prompt properties
+            prompt.Name = this.selectedPrompt.prompt.Name;
+            prompt.Description = this.selectedPrompt.prompt.Description;
+            prompt.CategoryID = this.selectedPrompt.prompt.CategoryID;
+            prompt.TypeID = this.selectedPrompt.prompt.TypeID;
+            prompt.Status = this.selectedPrompt.prompt.Status;
+            prompt.TemplateID = this.selectedPrompt.template?.ID || '';
+            const promptResult = await prompt.Save();
+            if (promptResult) {
+                this.isDirty = false;
+                this.isEditing = false;
+                LogStatus('Prompt saved successfully');
+                // Reload data to get the updated state
+                await this.loadData();
+                // Find and select the updated prompt
+                this.selectedPrompt = this.promptsWithTemplates.find(p => p.prompt.ID === prompt.ID) || null;
             }
-            catch (error) {
-                LogError('Error deleting prompt', undefined, error);
-                this.error = 'Failed to delete prompt. Please try again.';
+            else {
+                // Handle save failure
+                const errorMessage = prompt.LatestResult?.Message || 'Unknown error occurred while saving prompt';
+                console.error('Prompt save failed:', errorMessage);
+                LogError('Prompt save failed', undefined, errorMessage);
+                this.mjNotificationsService.CreateSimpleNotification(errorMessage, 'error', 3500);
+                this.error = `Failed to save prompt: ${errorMessage}`;
             }
-            finally {
-                this.isLoading = false;
+        }
+        catch (error) {
+            LogError('Error saving prompt', undefined, error);
+            this.error = 'Failed to save prompt. Please try again.';
+        }
+        finally {
+            this.isLoading = false;
+        }
+    }
+    async deletePrompt(promptWithTemplate) {
+        if (!promptWithTemplate.prompt.ID)
+            return;
+        const confirm = window.confirm(`Are you sure you want to delete "${promptWithTemplate.prompt.Name}"?`);
+        if (!confirm)
+            return;
+        try {
+            this.isLoading = true;
+            const md = Metadata.Provider;
+            if (!md)
+                throw new Error('Metadata provider not available');
+            const prompt = await md.GetEntityObject('AI Prompts', md.CurrentUser);
+            await prompt.Load(promptWithTemplate.prompt.ID);
+            const result = await prompt.Delete();
+            if (result) {
+                LogStatus('Prompt deleted successfully');
+                await this.loadData();
+                if (this.selectedPrompt?.prompt.ID === promptWithTemplate.prompt.ID) {
+                    this.backToList();
+                }
             }
-        });
+        }
+        catch (error) {
+            LogError('Error deleting prompt', undefined, error);
+            this.error = 'Failed to delete prompt. Please try again.';
+        }
+        finally {
+            this.isLoading = false;
+        }
     }
     // Utility methods
     getStatusColor(status) {
@@ -1337,16 +1296,14 @@ export class PromptManagementComponent {
         return 'fa-solid fa-comment-dots';
     }
     getCategoryName(categoryId) {
-        var _a;
         if (!categoryId || categoryId === '')
             return 'No Category';
-        return ((_a = this.categories.find(c => c.ID === categoryId)) === null || _a === void 0 ? void 0 : _a.Name) || 'Unknown Category';
+        return this.categories.find(c => c.ID === categoryId)?.Name || 'Unknown Category';
     }
     getTypeName(typeId) {
-        var _a;
         if (!typeId || typeId === '')
             return 'No Type';
-        return ((_a = this.types.find(t => t.ID === typeId)) === null || _a === void 0 ? void 0 : _a.Name) || 'Unknown Type';
+        return this.types.find(t => t.ID === typeId)?.Name || 'Unknown Type';
     }
     setSubView(subView) {
         this.currentSubView = subView;
@@ -1369,19 +1326,19 @@ export class PromptManagementComponent {
     get promptsForMatrix() {
         return this.filteredPrompts.map(p => p.prompt);
     }
+    static ɵfac = function PromptManagementComponent_Factory(t) { return new (t || PromptManagementComponent)(i0.ɵɵdirectiveInject(i1.MJNotificationService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PromptManagementComponent, selectors: [["app-prompt-management"]], outputs: { openEntityRecord: "openEntityRecord", stateChange: "stateChange" }, decls: 3, vars: 4, consts: [["newCategoryInput", ""], ["mjFillContainer", "", 1, "prompt-management-container", 3, "rightMargin", "bottomMargin"], [1, "list-view"], [1, "editor-view"], [1, "dashboard-header"], [1, "header-info"], ["type", "button", "title", "Toggle Filters", 1, "filter-toggle-btn", 3, "click"], [1, "fa-solid", "fa-filter"], [1, "prompt-count"], [1, "header-controls"], ["type", "button", 1, "control-btn", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "sub-navigation"], ["type", "button", "title", "List View", 1, "sub-nav-btn", 3, "click"], [1, "fa-solid", "fa-list"], ["type", "button", "title", "Priority Matrix", 1, "sub-nav-btn", 3, "click"], [1, "fa-solid", "fa-th"], ["type", "button", "title", "Version Control", 1, "sub-nav-btn", 3, "click"], [1, "fa-solid", "fa-code-branch"], [1, "main-content"], ["orientation", "horizontal", "mjFillContainer", "", 1, "main-splitter"], ["mjFillContainer", "", 3, "selectedPrompts"], ["mjFillContainer", "", 3, "prompt"], ["orientation", "horizontal", "mjFillContainer", "", 1, "main-splitter", 3, "layoutChange"], [3, "size", "collapsible", "resizable", "scrollable", "hidden"], [3, "filtersChange", "filterChange", "resetFilters", "closePanel", "prompts", "filteredPrompts", "categories", "types", "filters"], [3, "resizable", "scrollable"], [1, "prompts-content"], [1, "loading-container"], [1, "error-container"], [1, "prompts-list"], [1, "loading-content"], [1, "loading-spinner"], [1, "spinner-ring"], [1, "loading-text"], [1, "error-message"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "empty-state"], [1, "prompts-grid"], [1, "fa-solid", "fa-comment-dots"], [1, "prompt-card"], [1, "prompt-card", 3, "click"], [1, "card-header"], [1, "prompt-info"], [1, "prompt-icon"], [1, "prompt-details"], [1, "prompt-name"], [1, "prompt-meta"], [1, "prompt-category"], [1, "prompt-type"], [1, "card-body"], [1, "prompt-description"], [1, "prompt-description", "text-muted"], [1, "template-info"], [1, "template-item", "text-muted"], [1, "card-actions", 3, "click"], ["type", "button", 1, "action-btn", 3, "click"], [1, "fa-solid", "fa-eye"], ["type", "button", 1, "action-btn", "action-btn-primary", 3, "click"], [1, "fa-solid", "fa-edit"], ["type", "button", 1, "action-btn", "action-btn-danger", 3, "click"], [1, "fa-solid", "fa-trash"], [1, "template-item"], [1, "fa-solid", "fa-file-code"], [1, "template-content-info"], ["mjFillContainer", "", 3, "promptSelected", "selectedPrompts"], ["mjFillContainer", "", 3, "versionSelected", "prompt"], [1, "editor-header"], [1, "breadcrumb-section"], ["type", "button", 1, "back-btn", 3, "click"], [1, "fa-solid", "fa-arrow-left"], [1, "editor-title"], [3, "class"], [1, "editor-actions"], ["type", "button", 1, "control-btn"], [1, "editor-content"], ["orientation", "horizontal", "mjFillContainer", "", 1, "editor-splitter", 3, "layoutChange"], [3, "collapsible", "resizable", "scrollable"], [1, "prompt-details-panel"], [1, "form-field"], [1, "field-label"], ["type", "text", "placeholder", "Enter prompt name", 1, "field-input", 3, "ngModel"], [1, "field-value"], ["placeholder", "Enter prompt description", 1, "field-textarea", 3, "ngModel"], [1, "field-select", 3, "ngModel"], [1, "template-info-section"], [1, "template-editor-panel"], [1, "editor-info"], [1, "editor-badge", "editor-badge-secondary"], [1, "editor-container"], [3, "change", "value", "languages", "language", "placeholder", "lineWrapping", "highlightWhitespace", "indentWithTab", "indentUnit", "readonly"], [1, "editor-help"], [1, "fa-solid", "fa-times"], ["type", "button", 1, "control-btn", "control-btn-primary", 3, "click", "disabled"], [1, "loading-spinner-sm"], [1, "fa-solid", "fa-save"], ["type", "text", "placeholder", "Enter prompt name", 1, "field-input", 3, "ngModelChange", "input", "ngModel"], ["placeholder", "Enter prompt description", 1, "field-textarea", 3, "ngModelChange", "input", "ngModel"], [1, "new-category-container"], [1, "field-select", 3, "ngModelChange", "ngModel"], ["value", ""], [3, "value"], ["value", "new", 1, "new-category-option"], ["type", "text", "placeholder", "Enter new category name", 1, "field-input", 3, "ngModelChange", "keyup", "ngModel"], [1, "new-category-actions"], [1, "fa-solid", "fa-check"], [1, "field-select", 3, "ngModelChange", "change", "ngModel"], ["value", "Active"], ["value", "Pending"], ["value", "Disabled"], [1, "template-details"], [1, "editor-badge", "editor-badge-info"], [1, "editor-badge", "editor-badge-warning"], [1, "help-section"], [1, "syntax-examples"], [1, "syntax-item"]], template: function PromptManagementComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 1);
+            i0.ɵɵtemplate(1, PromptManagementComponent_Conditional_1_Template, 27, 11, "div", 2)(2, PromptManagementComponent_Conditional_2_Template, 58, 25, "div", 3);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵproperty("rightMargin", 8)("bottomMargin", 8);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.currentView === "list" ? 1 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.currentView === "editor" && ctx.selectedPrompt ? 2 : -1);
+        } }, dependencies: [i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.DefaultValueAccessor, i2.SelectControlValueAccessor, i2.NgControlStatus, i2.NgModel, i3.SplitterComponent, i3.SplitterPaneComponent, i4.FillContainer, i5.CodeEditorComponent, i6.PromptFilterPanelComponent, i7.ModelPromptPriorityMatrixComponent, i8.PromptVersionControlComponent], styles: [".prompt-management-container[_ngcontent-%COMP%] {\n  overflow: hidden;\n  padding: 4px;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n.dashboard-header[_ngcontent-%COMP%] {\n  margin-bottom: 16px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-shrink: 0;\n  \n  .header-info {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    gap: 12px;\n  }\n  \n  .filter-toggle-btn {\n    padding: 6px 10px;\n    border: 1px solid #ddd;\n    border-radius: 4px;\n    background: white;\n    cursor: pointer;\n    font-size: 11px;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    transition: all 0.2s;\n    color: #555;\n    \n    &:hover {\n      background-color: #f0f0f0;\n      border-color: #2196f3;\n      color: #2196f3;\n    }\n    \n    .fa-solid {\n      font-size: 10px;\n    }\n  }\n  \n  .prompt-count {\n    font-size: 12px;\n    color: #2196f3;\n    font-weight: 600;\n    background: rgba(33, 150, 243, 0.1);\n    padding: 4px 8px;\n    border-radius: 4px;\n    border: 1px solid rgba(33, 150, 243, 0.2);\n  }\n  \n  .header-controls {\n    display: flex;\n    gap: 8px;\n    \n    .control-btn {\n      padding: 8px 12px;\n      border: 1px solid #ccc;\n      border-radius: 4px;\n      background: white;\n      cursor: pointer;\n      font-size: 12px;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      transition: all 0.2s;\n      \n      &:hover {\n        background-color: #f0f0f0;\n        border-color: #2196f3;\n      }\n      \n      &.active {\n        background-color: #2196f3;\n        border-color: #2196f3;\n        color: white;\n      }\n      \n      &.control-btn-primary {\n        background-color: #2196f3;\n        border-color: #2196f3;\n        color: white;\n        \n        &:hover {\n          background-color: #1976d2;\n        }\n      }\n      \n      &:disabled {\n        opacity: 0.5;\n        cursor: not-allowed;\n        \n        &:hover {\n          background-color: white;\n          border-color: #ccc;\n        }\n      }\n      \n      .fa-solid {\n        font-size: 14px;\n      }\n    }\n  }\n}\n\n//[_ngcontent-%COMP%]   Filters[_ngcontent-%COMP%]   now[_ngcontent-%COMP%]   handled[_ngcontent-%COMP%]   by[_ngcontent-%COMP%]   filter[_ngcontent-%COMP%]   panel[_ngcontent-%COMP%]   component\n\n.loading-container[_ngcontent-%COMP%], .error-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  background: #fafafa;\n  flex: 1;\n  \n  p {\n    color: #666;\n    font-size: 14px;\n  }\n}\n\n.error-message[_ngcontent-%COMP%] {\n  color: #d32f2f;\n  font-weight: 500;\n  \n  .fa-solid {\n    margin-right: 8px;\n  }\n}\n\n.loading-content[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 16px;\n}\n\n.loading-spinner[_ngcontent-%COMP%] {\n  display: inline-block;\n  position: relative;\n  width: 40px;\n  height: 40px;\n  \n  .spinner-ring {\n    box-sizing: border-box;\n    display: block;\n    position: absolute;\n    width: 32px;\n    height: 32px;\n    margin: 4px;\n    border: 3px solid #2196f3;\n    border-radius: 50%;\n    animation: _ngcontent-%COMP%_loading-spin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n    border-color: #2196f3 transparent transparent transparent;\n    \n    &:nth-child(1) { animation-delay: -0.45s; }\n    &:nth-child(2) { animation-delay: -0.3s; }\n    &:nth-child(3) { animation-delay: -0.15s; }\n  }\n}\n\n@keyframes _ngcontent-%COMP%_loading-spin {\n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n}\n\n.empty-state[_ngcontent-%COMP%] {\n  text-align: center;\n  padding: 60px 20px;\n  color: #666;\n  \n  .fa-solid {\n    font-size: 48px;\n    margin-bottom: 16px;\n    color: #ccc;\n  }\n  \n  h3 {\n    margin: 0 0 8px 0;\n    color: #333;\n    font-size: 18px;\n    font-weight: 500;\n  }\n  \n  p {\n    margin: 0;\n    font-size: 14px;\n  }\n}\n\n.prompts-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));\n  gap: 16px;\n  flex: 1;\n  overflow-y: auto;\n}\n\n.prompt-card[_ngcontent-%COMP%] {\n  background: white;\n  border: 1px solid #e0e0e0;\n  border-radius: 4px;\n  padding: 16px;\n  transition: all 0.2s ease;\n  height: fit-content;\n  cursor: pointer;\n  \n  &:hover {\n    border-color: #2196f3;\n    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.1);\n    transform: translateY(-1px);\n  }\n  \n  .card-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    margin-bottom: 12px;\n    \n    .prompt-info {\n      display: flex;\n      gap: 12px;\n      flex: 1;\n      \n      .prompt-icon {\n        color: #2196f3;\n        font-size: 20px;\n        margin-top: 2px;\n      }\n      \n      .prompt-details {\n        flex: 1;\n        \n        .prompt-name {\n          margin: 0 0 4px 0;\n          font-size: 16px;\n          font-weight: 500;\n          color: #333;\n        }\n        \n        .prompt-meta {\n          font-size: 12px;\n          color: #666;\n          \n          .prompt-type {\n            margin-left: 8px;\n          }\n        }\n      }\n    }\n  }\n  \n  .card-body {\n    margin-bottom: 12px;\n    \n    .prompt-description {\n      margin-bottom: 12px;\n      color: #555;\n      font-size: 13px;\n      line-height: 1.4;\n    }\n    \n    .template-info {\n      .template-item {\n        display: flex;\n        align-items: center;\n        margin-bottom: 4px;\n        font-size: 12px;\n        color: #666;\n        \n        .fa-solid {\n          margin-right: 6px;\n          color: #999;\n        }\n      }\n      \n      .template-content-info {\n        font-size: 11px;\n        color: #999;\n      }\n    }\n  }\n  \n  .card-actions {\n    display: flex;\n    gap: 8px;\n    border-top: 1px solid #f0f0f0;\n    padding-top: 12px;\n    \n    .action-btn {\n      padding: 6px 12px;\n      border: 1px solid #ddd;\n      border-radius: 3px;\n      background: white;\n      cursor: pointer;\n      font-size: 11px;\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      transition: all 0.2s;\n      \n      &:hover {\n        background-color: #f5f5f5;\n        border-color: #bbb;\n      }\n      \n      &.action-btn-primary {\n        background-color: #2196f3;\n        border-color: #2196f3;\n        color: white;\n        \n        &:hover {\n          background-color: #1976d2;\n        }\n      }\n      \n      &.action-btn-danger {\n        background-color: #f44336;\n        border-color: #f44336;\n        color: white;\n        \n        &:hover {\n          background-color: #d32f2f;\n        }\n      }\n      \n      .fa-solid {\n        font-size: 10px;\n      }\n    }\n  }\n}\n\n//[_ngcontent-%COMP%]   Editor[_ngcontent-%COMP%]   View\n.editor-view[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  overflow: hidden;\n}\n\n.editor-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 16px;\n  padding-bottom: 16px;\n  border-bottom: 1px solid #e0e0e0;\n  \n  .breadcrumb-section {\n    .back-btn {\n      background: none;\n      border: none;\n      color: #2196f3;\n      cursor: pointer;\n      font-size: 12px;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      \n      &:hover {\n        text-decoration: underline;\n      }\n    }\n  }\n  \n  .editor-title {\n    flex: 1;\n    margin: 0 20px;\n    \n    h2 {\n      margin: 0;\n      font-size: 18px;\n      font-weight: 500;\n      color: #333;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n  }\n  \n  .editor-actions {\n    display: flex;\n    gap: 8px;\n  }\n}\n\n.editor-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: hidden;\n}\n\n.editor-splitter[_ngcontent-%COMP%] {\n  height: 100%;\n  \n  .k-pane {\n    overflow: hidden;\n  }\n}\n\n.prompt-details-panel[_ngcontent-%COMP%], .template-editor-panel[_ngcontent-%COMP%] {\n  background: white;\n  border: 1px solid #e0e0e0;\n  border-radius: 4px;\n  padding: 16px;\n  height: 100%;\n  overflow-y: auto;\n  \n  h3 {\n    margin: 0 0 16px 0;\n    font-size: 16px;\n    font-weight: 500;\n    color: #333;\n    border-bottom: 1px solid #f0f0f0;\n    padding-bottom: 8px;\n  }\n}\n\n.form-field[_ngcontent-%COMP%] {\n  margin-bottom: 16px;\n  \n  .field-label {\n    display: block;\n    margin-bottom: 4px;\n    font-size: 12px;\n    font-weight: 500;\n    color: #555;\n  }\n  \n  .field-input, .field-select {\n    width: 100%;\n    padding: 6px 8px;\n    border: 1px solid #ddd;\n    border-radius: 3px;\n    font-size: 12px;\n    \n    &:focus {\n      outline: none;\n      border-color: #2196f3;\n    }\n  }\n  \n  .field-textarea {\n    width: 100%;\n    padding: 6px 8px;\n    border: 1px solid #ddd;\n    border-radius: 3px;\n    font-size: 12px;\n    resize: vertical;\n    min-height: 60px;\n    \n    &:focus {\n      outline: none;\n      border-color: #2196f3;\n    }\n  }\n  \n  .field-value {\n    padding: 6px 8px;\n    background: #f8f9fa;\n    border: 1px solid #e0e0e0;\n    border-radius: 3px;\n    font-size: 12px;\n    color: #555;\n  }\n}\n\n.template-editor-panel[_ngcontent-%COMP%] {\n  .editor-container {\n    margin-bottom: 16px;\n    \n    .code-editor {\n      width: 100%;\n      min-height: 300px;\n      font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n      font-size: 12px;\n      border: 1px solid #ddd;\n      border-radius: 3px;\n      padding: 8px;\n      background: #f8f9fa;\n      \n      &:focus {\n        outline: none;\n        border-color: #2196f3;\n      }\n    }\n    \n    .code-display {\n      border: 1px solid #e0e0e0;\n      border-radius: 3px;\n      background: #f8f9fa;\n      max-height: 400px;\n      overflow-y: auto;\n      \n      pre {\n        margin: 0;\n        padding: 12px;\n        font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n        font-size: 12px;\n        line-height: 1.4;\n        color: #333;\n        \n        code {\n          background: none;\n          padding: 0;\n          font-size: inherit;\n          color: inherit;\n        }\n      }\n    }\n  }\n  \n  .editor-help {\n    .help-section {\n      h5 {\n        font-size: 13px;\n        font-weight: 500;\n        margin-bottom: 8px;\n        color: #333;\n      }\n      \n      .syntax-examples {\n        .syntax-item {\n          margin-bottom: 6px;\n          padding: 6px 8px;\n          background: #f0f0f0;\n          border-radius: 3px;\n          font-size: 11px;\n          \n          code {\n            background: #e0e0e0;\n            padding: 2px 4px;\n            border-radius: 2px;\n            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n            margin-right: 8px;\n          }\n        }\n      }\n    }\n  }\n}\n\n//[_ngcontent-%COMP%]   CodeMirror[_ngcontent-%COMP%]   overrides\n.CodeMirror[_ngcontent-%COMP%] {\n  border: 1px solid #ddd !important;\n  border-radius: 3px !important;\n  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace !important;\n  font-size: 12px !important;\n  min-height: 300px !important;\n}\n\n.CodeMirror-focused[_ngcontent-%COMP%] {\n  border-color: #2196f3 !important;\n}\n\n//[_ngcontent-%COMP%]   Status[_ngcontent-%COMP%]   badges\n.status-badge[_ngcontent-%COMP%] {\n  padding: 2px 6px;\n  border-radius: 3px;\n  font-size: 10px;\n  font-weight: 500;\n  text-transform: uppercase;\n  \n  &.status-active {\n    background: #e8f5e8;\n    color: #2e7d32;\n  }\n  \n  &.status-pending {\n    background: #fff3e0;\n    color: #f57c00;\n  }\n  \n  &.status-disabled {\n    background: #ffebee;\n    color: #c62828;\n  }\n}\n\n//[_ngcontent-%COMP%]   Editor[_ngcontent-%COMP%]   badges\n.editor-badge[_ngcontent-%COMP%] {\n  padding: 2px 6px;\n  border-radius: 3px;\n  font-size: 10px;\n  font-weight: 500;\n  margin-left: 8px;\n  \n  &.editor-badge-info {\n    background: #e3f2fd;\n    color: #1976d2;\n  }\n  \n  &.editor-badge-warning {\n    background: #fff3e0;\n    color: #f57c00;\n  }\n  \n  &.editor-badge-secondary {\n    background: #f5f5f5;\n    color: #666;\n  }\n}\n\n//[_ngcontent-%COMP%]   New[_ngcontent-%COMP%]   category[_ngcontent-%COMP%]   creation\n.new-category-container[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 4px;\n  align-items: center;\n  \n  .field-input {\n    flex: 1;\n  }\n  \n  .new-category-actions {\n    display: flex;\n    gap: 2px;\n    \n    .action-btn {\n      padding: 4px 6px;\n      border: 1px solid #ddd;\n      border-radius: 3px;\n      background: white;\n      cursor: pointer;\n      font-size: 10px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      min-width: 24px;\n      height: 24px;\n      \n      &:hover {\n        background-color: #f5f5f5;\n      }\n      \n      &.action-btn-primary {\n        background-color: #2196f3;\n        border-color: #2196f3;\n        color: white;\n        \n        &:hover {\n          background-color: #1976d2;\n        }\n      }\n      \n      .fa-solid {\n        font-size: 10px;\n      }\n    }\n  }\n}\n\n.new-category-option[_ngcontent-%COMP%] {\n  color: #2196f3;\n  font-style: italic;\n}\n\n//[_ngcontent-%COMP%]   CodeMirror[_ngcontent-%COMP%]   6[_ngcontent-%COMP%]   styling\nmj-code-editor[_ngcontent-%COMP%] {\n  display: block;\n  border: 1px solid #ddd;\n  border-radius: 3px;\n  overflow: hidden;\n  min-height: 300px;\n  \n  .cm-editor {\n    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace !important;\n    font-size: 12px !important;\n    min-height: 300px;\n  }\n  \n  .cm-focused {\n    outline: none !important;\n  }\n  \n  .cm-editor.cm-focused {\n    border-color: #2196f3;\n  }\n}\n\n//[_ngcontent-%COMP%]   List[_ngcontent-%COMP%]   View[_ngcontent-%COMP%]   Layout\n.list-view[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  overflow: hidden;\n}\n\n.sub-navigation[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n  margin-bottom: 16px;\n  padding: 8px 0;\n  border-bottom: 1px solid #e0e0e0;\n  flex-shrink: 0;\n\n  .sub-nav-btn {\n    padding: 8px 12px;\n    border: 1px solid #ddd;\n    border-radius: 4px;\n    background: white;\n    cursor: pointer;\n    font-size: 12px;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    transition: all 0.2s;\n    color: #555;\n    font-weight: 500;\n\n    &:hover {\n      background-color: #f0f0f0;\n      border-color: #2196f3;\n      color: #2196f3;\n    }\n\n    &.active {\n      background-color: #2196f3;\n      border-color: #2196f3;\n      color: white;\n      box-shadow: 0 2px 4px rgba(33, 150, 243, 0.2);\n    }\n\n    .fa-solid {\n      font-size: 11px;\n    }\n  }\n}\n\n.main-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: hidden;\n}\n\n.main-splitter[_ngcontent-%COMP%] {\n  height: 100%;\n  \n  .k-pane {\n    overflow: hidden;\n  }\n}\n\n.prompts-content[_ngcontent-%COMP%] {\n  height: 100%;\n  overflow-y: auto;\n  padding: 0 16px;\n}"] });
 }
-PromptManagementComponent.ɵfac = function PromptManagementComponent_Factory(t) { return new (t || PromptManagementComponent)(i0.ɵɵdirectiveInject(i1.MJNotificationService)); };
-PromptManagementComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PromptManagementComponent, selectors: [["app-prompt-management"]], outputs: { openEntityRecord: "openEntityRecord", stateChange: "stateChange" }, decls: 3, vars: 4, consts: [["newCategoryInput", ""], ["mjFillContainer", "", 1, "prompt-management-container", 3, "rightMargin", "bottomMargin"], [1, "list-view"], [1, "editor-view"], [1, "dashboard-header"], [1, "header-info"], ["type", "button", "title", "Toggle Filters", 1, "filter-toggle-btn", 3, "click"], [1, "fa-solid", "fa-filter"], [1, "prompt-count"], [1, "header-controls"], ["type", "button", 1, "control-btn", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "sub-navigation"], ["type", "button", "title", "List View", 1, "sub-nav-btn", 3, "click"], [1, "fa-solid", "fa-list"], ["type", "button", "title", "Priority Matrix", 1, "sub-nav-btn", 3, "click"], [1, "fa-solid", "fa-th"], ["type", "button", "title", "Version Control", 1, "sub-nav-btn", 3, "click"], [1, "fa-solid", "fa-code-branch"], [1, "main-content"], ["orientation", "horizontal", "mjFillContainer", "", 1, "main-splitter"], ["mjFillContainer", "", 3, "selectedPrompts"], ["mjFillContainer", "", 3, "prompt"], ["orientation", "horizontal", "mjFillContainer", "", 1, "main-splitter", 3, "layoutChange"], [3, "size", "collapsible", "resizable", "scrollable", "hidden"], [3, "filtersChange", "filterChange", "resetFilters", "closePanel", "prompts", "filteredPrompts", "categories", "types", "filters"], [3, "resizable", "scrollable"], [1, "prompts-content"], [1, "loading-container"], [1, "error-container"], [1, "prompts-list"], [1, "loading-content"], [1, "loading-spinner"], [1, "spinner-ring"], [1, "loading-text"], [1, "error-message"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "empty-state"], [1, "prompts-grid"], [1, "fa-solid", "fa-comment-dots"], [1, "prompt-card"], [1, "prompt-card", 3, "click"], [1, "card-header"], [1, "prompt-info"], [1, "prompt-icon"], [1, "prompt-details"], [1, "prompt-name"], [1, "prompt-meta"], [1, "prompt-category"], [1, "prompt-type"], [1, "card-body"], [1, "prompt-description"], [1, "prompt-description", "text-muted"], [1, "template-info"], [1, "template-item", "text-muted"], [1, "card-actions", 3, "click"], ["type", "button", 1, "action-btn", 3, "click"], [1, "fa-solid", "fa-eye"], ["type", "button", 1, "action-btn", "action-btn-primary", 3, "click"], [1, "fa-solid", "fa-edit"], ["type", "button", 1, "action-btn", "action-btn-danger", 3, "click"], [1, "fa-solid", "fa-trash"], [1, "template-item"], [1, "fa-solid", "fa-file-code"], [1, "template-content-info"], ["mjFillContainer", "", 3, "promptSelected", "selectedPrompts"], ["mjFillContainer", "", 3, "versionSelected", "prompt"], [1, "editor-header"], [1, "breadcrumb-section"], ["type", "button", 1, "back-btn", 3, "click"], [1, "fa-solid", "fa-arrow-left"], [1, "editor-title"], [3, "class"], [1, "editor-actions"], ["type", "button", 1, "control-btn"], [1, "editor-content"], ["orientation", "horizontal", "mjFillContainer", "", 1, "editor-splitter", 3, "layoutChange"], [3, "collapsible", "resizable", "scrollable"], [1, "prompt-details-panel"], [1, "form-field"], [1, "field-label"], ["type", "text", "placeholder", "Enter prompt name", 1, "field-input", 3, "ngModel"], [1, "field-value"], ["placeholder", "Enter prompt description", 1, "field-textarea", 3, "ngModel"], [1, "field-select", 3, "ngModel"], [1, "template-info-section"], [1, "template-editor-panel"], [1, "editor-info"], [1, "editor-badge", "editor-badge-secondary"], [1, "editor-container"], [3, "change", "value", "languages", "language", "placeholder", "lineWrapping", "highlightWhitespace", "indentWithTab", "indentUnit", "readonly"], [1, "editor-help"], [1, "fa-solid", "fa-times"], ["type", "button", 1, "control-btn", "control-btn-primary", 3, "click", "disabled"], [1, "loading-spinner-sm"], [1, "fa-solid", "fa-save"], ["type", "text", "placeholder", "Enter prompt name", 1, "field-input", 3, "ngModelChange", "input", "ngModel"], ["placeholder", "Enter prompt description", 1, "field-textarea", 3, "ngModelChange", "input", "ngModel"], [1, "new-category-container"], [1, "field-select", 3, "ngModelChange", "ngModel"], ["value", ""], [3, "value"], ["value", "new", 1, "new-category-option"], ["type", "text", "placeholder", "Enter new category name", 1, "field-input", 3, "ngModelChange", "keyup", "ngModel"], [1, "new-category-actions"], [1, "fa-solid", "fa-check"], [1, "field-select", 3, "ngModelChange", "change", "ngModel"], ["value", "Active"], ["value", "Pending"], ["value", "Disabled"], [1, "template-details"], [1, "editor-badge", "editor-badge-info"], [1, "editor-badge", "editor-badge-warning"], [1, "help-section"], [1, "syntax-examples"], [1, "syntax-item"]], template: function PromptManagementComponent_Template(rf, ctx) { if (rf & 1) {
-        i0.ɵɵelementStart(0, "div", 1);
-        i0.ɵɵtemplate(1, PromptManagementComponent_Conditional_1_Template, 27, 11, "div", 2)(2, PromptManagementComponent_Conditional_2_Template, 58, 25, "div", 3);
-        i0.ɵɵelementEnd();
-    } if (rf & 2) {
-        i0.ɵɵproperty("rightMargin", 8)("bottomMargin", 8);
-        i0.ɵɵadvance();
-        i0.ɵɵconditional(ctx.currentView === "list" ? 1 : -1);
-        i0.ɵɵadvance();
-        i0.ɵɵconditional(ctx.currentView === "editor" && ctx.selectedPrompt ? 2 : -1);
-    } }, dependencies: [i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.DefaultValueAccessor, i2.SelectControlValueAccessor, i2.NgControlStatus, i2.NgModel, i3.SplitterComponent, i3.SplitterPaneComponent, i4.FillContainer, i5.CodeEditorComponent, i6.PromptFilterPanelComponent, i7.ModelPromptPriorityMatrixComponent, i8.PromptVersionControlComponent], styles: [".prompt-management-container[_ngcontent-%COMP%] {\n  overflow: hidden;\n  padding: 4px;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n.dashboard-header[_ngcontent-%COMP%] {\n  margin-bottom: 16px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-shrink: 0;\n  \n  .header-info {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    gap: 12px;\n  }\n  \n  .filter-toggle-btn {\n    padding: 6px 10px;\n    border: 1px solid #ddd;\n    border-radius: 4px;\n    background: white;\n    cursor: pointer;\n    font-size: 11px;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    transition: all 0.2s;\n    color: #555;\n    \n    &:hover {\n      background-color: #f0f0f0;\n      border-color: #2196f3;\n      color: #2196f3;\n    }\n    \n    .fa-solid {\n      font-size: 10px;\n    }\n  }\n  \n  .prompt-count {\n    font-size: 12px;\n    color: #2196f3;\n    font-weight: 600;\n    background: rgba(33, 150, 243, 0.1);\n    padding: 4px 8px;\n    border-radius: 4px;\n    border: 1px solid rgba(33, 150, 243, 0.2);\n  }\n  \n  .header-controls {\n    display: flex;\n    gap: 8px;\n    \n    .control-btn {\n      padding: 8px 12px;\n      border: 1px solid #ccc;\n      border-radius: 4px;\n      background: white;\n      cursor: pointer;\n      font-size: 12px;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      transition: all 0.2s;\n      \n      &:hover {\n        background-color: #f0f0f0;\n        border-color: #2196f3;\n      }\n      \n      &.active {\n        background-color: #2196f3;\n        border-color: #2196f3;\n        color: white;\n      }\n      \n      &.control-btn-primary {\n        background-color: #2196f3;\n        border-color: #2196f3;\n        color: white;\n        \n        &:hover {\n          background-color: #1976d2;\n        }\n      }\n      \n      &:disabled {\n        opacity: 0.5;\n        cursor: not-allowed;\n        \n        &:hover {\n          background-color: white;\n          border-color: #ccc;\n        }\n      }\n      \n      .fa-solid {\n        font-size: 14px;\n      }\n    }\n  }\n}\n\n//[_ngcontent-%COMP%]   Filters[_ngcontent-%COMP%]   now[_ngcontent-%COMP%]   handled[_ngcontent-%COMP%]   by[_ngcontent-%COMP%]   filter[_ngcontent-%COMP%]   panel[_ngcontent-%COMP%]   component\n\n.loading-container[_ngcontent-%COMP%], .error-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  background: #fafafa;\n  flex: 1;\n  \n  p {\n    color: #666;\n    font-size: 14px;\n  }\n}\n\n.error-message[_ngcontent-%COMP%] {\n  color: #d32f2f;\n  font-weight: 500;\n  \n  .fa-solid {\n    margin-right: 8px;\n  }\n}\n\n.loading-content[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 16px;\n}\n\n.loading-spinner[_ngcontent-%COMP%] {\n  display: inline-block;\n  position: relative;\n  width: 40px;\n  height: 40px;\n  \n  .spinner-ring {\n    box-sizing: border-box;\n    display: block;\n    position: absolute;\n    width: 32px;\n    height: 32px;\n    margin: 4px;\n    border: 3px solid #2196f3;\n    border-radius: 50%;\n    animation: _ngcontent-%COMP%_loading-spin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n    border-color: #2196f3 transparent transparent transparent;\n    \n    &:nth-child(1) { animation-delay: -0.45s; }\n    &:nth-child(2) { animation-delay: -0.3s; }\n    &:nth-child(3) { animation-delay: -0.15s; }\n  }\n}\n\n@keyframes _ngcontent-%COMP%_loading-spin {\n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n}\n\n.empty-state[_ngcontent-%COMP%] {\n  text-align: center;\n  padding: 60px 20px;\n  color: #666;\n  \n  .fa-solid {\n    font-size: 48px;\n    margin-bottom: 16px;\n    color: #ccc;\n  }\n  \n  h3 {\n    margin: 0 0 8px 0;\n    color: #333;\n    font-size: 18px;\n    font-weight: 500;\n  }\n  \n  p {\n    margin: 0;\n    font-size: 14px;\n  }\n}\n\n.prompts-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));\n  gap: 16px;\n  flex: 1;\n  overflow-y: auto;\n}\n\n.prompt-card[_ngcontent-%COMP%] {\n  background: white;\n  border: 1px solid #e0e0e0;\n  border-radius: 4px;\n  padding: 16px;\n  transition: all 0.2s ease;\n  height: fit-content;\n  cursor: pointer;\n  \n  &:hover {\n    border-color: #2196f3;\n    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.1);\n    transform: translateY(-1px);\n  }\n  \n  .card-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    margin-bottom: 12px;\n    \n    .prompt-info {\n      display: flex;\n      gap: 12px;\n      flex: 1;\n      \n      .prompt-icon {\n        color: #2196f3;\n        font-size: 20px;\n        margin-top: 2px;\n      }\n      \n      .prompt-details {\n        flex: 1;\n        \n        .prompt-name {\n          margin: 0 0 4px 0;\n          font-size: 16px;\n          font-weight: 500;\n          color: #333;\n        }\n        \n        .prompt-meta {\n          font-size: 12px;\n          color: #666;\n          \n          .prompt-type {\n            margin-left: 8px;\n          }\n        }\n      }\n    }\n  }\n  \n  .card-body {\n    margin-bottom: 12px;\n    \n    .prompt-description {\n      margin-bottom: 12px;\n      color: #555;\n      font-size: 13px;\n      line-height: 1.4;\n    }\n    \n    .template-info {\n      .template-item {\n        display: flex;\n        align-items: center;\n        margin-bottom: 4px;\n        font-size: 12px;\n        color: #666;\n        \n        .fa-solid {\n          margin-right: 6px;\n          color: #999;\n        }\n      }\n      \n      .template-content-info {\n        font-size: 11px;\n        color: #999;\n      }\n    }\n  }\n  \n  .card-actions {\n    display: flex;\n    gap: 8px;\n    border-top: 1px solid #f0f0f0;\n    padding-top: 12px;\n    \n    .action-btn {\n      padding: 6px 12px;\n      border: 1px solid #ddd;\n      border-radius: 3px;\n      background: white;\n      cursor: pointer;\n      font-size: 11px;\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      transition: all 0.2s;\n      \n      &:hover {\n        background-color: #f5f5f5;\n        border-color: #bbb;\n      }\n      \n      &.action-btn-primary {\n        background-color: #2196f3;\n        border-color: #2196f3;\n        color: white;\n        \n        &:hover {\n          background-color: #1976d2;\n        }\n      }\n      \n      &.action-btn-danger {\n        background-color: #f44336;\n        border-color: #f44336;\n        color: white;\n        \n        &:hover {\n          background-color: #d32f2f;\n        }\n      }\n      \n      .fa-solid {\n        font-size: 10px;\n      }\n    }\n  }\n}\n\n//[_ngcontent-%COMP%]   Editor[_ngcontent-%COMP%]   View\n.editor-view[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  overflow: hidden;\n}\n\n.editor-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 16px;\n  padding-bottom: 16px;\n  border-bottom: 1px solid #e0e0e0;\n  \n  .breadcrumb-section {\n    .back-btn {\n      background: none;\n      border: none;\n      color: #2196f3;\n      cursor: pointer;\n      font-size: 12px;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      \n      &:hover {\n        text-decoration: underline;\n      }\n    }\n  }\n  \n  .editor-title {\n    flex: 1;\n    margin: 0 20px;\n    \n    h2 {\n      margin: 0;\n      font-size: 18px;\n      font-weight: 500;\n      color: #333;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n  }\n  \n  .editor-actions {\n    display: flex;\n    gap: 8px;\n  }\n}\n\n.editor-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: hidden;\n}\n\n.editor-splitter[_ngcontent-%COMP%] {\n  height: 100%;\n  \n  .k-pane {\n    overflow: hidden;\n  }\n}\n\n.prompt-details-panel[_ngcontent-%COMP%], .template-editor-panel[_ngcontent-%COMP%] {\n  background: white;\n  border: 1px solid #e0e0e0;\n  border-radius: 4px;\n  padding: 16px;\n  height: 100%;\n  overflow-y: auto;\n  \n  h3 {\n    margin: 0 0 16px 0;\n    font-size: 16px;\n    font-weight: 500;\n    color: #333;\n    border-bottom: 1px solid #f0f0f0;\n    padding-bottom: 8px;\n  }\n}\n\n.form-field[_ngcontent-%COMP%] {\n  margin-bottom: 16px;\n  \n  .field-label {\n    display: block;\n    margin-bottom: 4px;\n    font-size: 12px;\n    font-weight: 500;\n    color: #555;\n  }\n  \n  .field-input, .field-select {\n    width: 100%;\n    padding: 6px 8px;\n    border: 1px solid #ddd;\n    border-radius: 3px;\n    font-size: 12px;\n    \n    &:focus {\n      outline: none;\n      border-color: #2196f3;\n    }\n  }\n  \n  .field-textarea {\n    width: 100%;\n    padding: 6px 8px;\n    border: 1px solid #ddd;\n    border-radius: 3px;\n    font-size: 12px;\n    resize: vertical;\n    min-height: 60px;\n    \n    &:focus {\n      outline: none;\n      border-color: #2196f3;\n    }\n  }\n  \n  .field-value {\n    padding: 6px 8px;\n    background: #f8f9fa;\n    border: 1px solid #e0e0e0;\n    border-radius: 3px;\n    font-size: 12px;\n    color: #555;\n  }\n}\n\n.template-editor-panel[_ngcontent-%COMP%] {\n  .editor-container {\n    margin-bottom: 16px;\n    \n    .code-editor {\n      width: 100%;\n      min-height: 300px;\n      font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n      font-size: 12px;\n      border: 1px solid #ddd;\n      border-radius: 3px;\n      padding: 8px;\n      background: #f8f9fa;\n      \n      &:focus {\n        outline: none;\n        border-color: #2196f3;\n      }\n    }\n    \n    .code-display {\n      border: 1px solid #e0e0e0;\n      border-radius: 3px;\n      background: #f8f9fa;\n      max-height: 400px;\n      overflow-y: auto;\n      \n      pre {\n        margin: 0;\n        padding: 12px;\n        font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n        font-size: 12px;\n        line-height: 1.4;\n        color: #333;\n        \n        code {\n          background: none;\n          padding: 0;\n          font-size: inherit;\n          color: inherit;\n        }\n      }\n    }\n  }\n  \n  .editor-help {\n    .help-section {\n      h5 {\n        font-size: 13px;\n        font-weight: 500;\n        margin-bottom: 8px;\n        color: #333;\n      }\n      \n      .syntax-examples {\n        .syntax-item {\n          margin-bottom: 6px;\n          padding: 6px 8px;\n          background: #f0f0f0;\n          border-radius: 3px;\n          font-size: 11px;\n          \n          code {\n            background: #e0e0e0;\n            padding: 2px 4px;\n            border-radius: 2px;\n            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n            margin-right: 8px;\n          }\n        }\n      }\n    }\n  }\n}\n\n//[_ngcontent-%COMP%]   CodeMirror[_ngcontent-%COMP%]   overrides\n.CodeMirror[_ngcontent-%COMP%] {\n  border: 1px solid #ddd !important;\n  border-radius: 3px !important;\n  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace !important;\n  font-size: 12px !important;\n  min-height: 300px !important;\n}\n\n.CodeMirror-focused[_ngcontent-%COMP%] {\n  border-color: #2196f3 !important;\n}\n\n//[_ngcontent-%COMP%]   Status[_ngcontent-%COMP%]   badges\n.status-badge[_ngcontent-%COMP%] {\n  padding: 2px 6px;\n  border-radius: 3px;\n  font-size: 10px;\n  font-weight: 500;\n  text-transform: uppercase;\n  \n  &.status-active {\n    background: #e8f5e8;\n    color: #2e7d32;\n  }\n  \n  &.status-pending {\n    background: #fff3e0;\n    color: #f57c00;\n  }\n  \n  &.status-disabled {\n    background: #ffebee;\n    color: #c62828;\n  }\n}\n\n//[_ngcontent-%COMP%]   Editor[_ngcontent-%COMP%]   badges\n.editor-badge[_ngcontent-%COMP%] {\n  padding: 2px 6px;\n  border-radius: 3px;\n  font-size: 10px;\n  font-weight: 500;\n  margin-left: 8px;\n  \n  &.editor-badge-info {\n    background: #e3f2fd;\n    color: #1976d2;\n  }\n  \n  &.editor-badge-warning {\n    background: #fff3e0;\n    color: #f57c00;\n  }\n  \n  &.editor-badge-secondary {\n    background: #f5f5f5;\n    color: #666;\n  }\n}\n\n//[_ngcontent-%COMP%]   New[_ngcontent-%COMP%]   category[_ngcontent-%COMP%]   creation\n.new-category-container[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 4px;\n  align-items: center;\n  \n  .field-input {\n    flex: 1;\n  }\n  \n  .new-category-actions {\n    display: flex;\n    gap: 2px;\n    \n    .action-btn {\n      padding: 4px 6px;\n      border: 1px solid #ddd;\n      border-radius: 3px;\n      background: white;\n      cursor: pointer;\n      font-size: 10px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      min-width: 24px;\n      height: 24px;\n      \n      &:hover {\n        background-color: #f5f5f5;\n      }\n      \n      &.action-btn-primary {\n        background-color: #2196f3;\n        border-color: #2196f3;\n        color: white;\n        \n        &:hover {\n          background-color: #1976d2;\n        }\n      }\n      \n      .fa-solid {\n        font-size: 10px;\n      }\n    }\n  }\n}\n\n.new-category-option[_ngcontent-%COMP%] {\n  color: #2196f3;\n  font-style: italic;\n}\n\n//[_ngcontent-%COMP%]   CodeMirror[_ngcontent-%COMP%]   6[_ngcontent-%COMP%]   styling\nmj-code-editor[_ngcontent-%COMP%] {\n  display: block;\n  border: 1px solid #ddd;\n  border-radius: 3px;\n  overflow: hidden;\n  min-height: 300px;\n  \n  .cm-editor {\n    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace !important;\n    font-size: 12px !important;\n    min-height: 300px;\n  }\n  \n  .cm-focused {\n    outline: none !important;\n  }\n  \n  .cm-editor.cm-focused {\n    border-color: #2196f3;\n  }\n}\n\n//[_ngcontent-%COMP%]   List[_ngcontent-%COMP%]   View[_ngcontent-%COMP%]   Layout\n.list-view[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  overflow: hidden;\n}\n\n.sub-navigation[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n  margin-bottom: 16px;\n  padding: 8px 0;\n  border-bottom: 1px solid #e0e0e0;\n  flex-shrink: 0;\n\n  .sub-nav-btn {\n    padding: 8px 12px;\n    border: 1px solid #ddd;\n    border-radius: 4px;\n    background: white;\n    cursor: pointer;\n    font-size: 12px;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    transition: all 0.2s;\n    color: #555;\n    font-weight: 500;\n\n    &:hover {\n      background-color: #f0f0f0;\n      border-color: #2196f3;\n      color: #2196f3;\n    }\n\n    &.active {\n      background-color: #2196f3;\n      border-color: #2196f3;\n      color: white;\n      box-shadow: 0 2px 4px rgba(33, 150, 243, 0.2);\n    }\n\n    .fa-solid {\n      font-size: 11px;\n    }\n  }\n}\n\n.main-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: hidden;\n}\n\n.main-splitter[_ngcontent-%COMP%] {\n  height: 100%;\n  \n  .k-pane {\n    overflow: hidden;\n  }\n}\n\n.prompts-content[_ngcontent-%COMP%] {\n  height: 100%;\n  overflow-y: auto;\n  padding: 0 16px;\n}"] });
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PromptManagementComponent, [{
         type: Component,
         args: [{ selector: 'app-prompt-management', template: "<div class=\"prompt-management-container\" mjFillContainer [rightMargin]=\"8\" [bottomMargin]=\"8\">\n  <!-- List View -->\n  @if (currentView === 'list') {\n    <div class=\"list-view\">\n      <!-- Header -->\n      <div class=\"dashboard-header\">\n        <div class=\"header-info\">\n          <button \n            type=\"button\" \n            class=\"filter-toggle-btn\"\n            (click)=\"toggleFilterPanel()\"\n            title=\"Toggle Filters\">\n            <i class=\"fa-solid fa-filter\"></i>\n            @if (filterPanelVisible) {\n              Hide Filters\n            } @else {\n              Show Filters\n            }\n          </button>\n          <span class=\"prompt-count\">{{ filteredPrompts.length }} prompts</span>\n        </div>\n        \n        <div class=\"header-controls\">\n          <button \n            type=\"button\" \n            class=\"control-btn\"\n            (click)=\"createNewPrompt()\">\n            <i class=\"fa-solid fa-plus\"></i>\n            New Prompt\n          </button>\n        </div>\n      </div>\n\n      <!-- Sub Navigation -->\n      <div class=\"sub-navigation\">\n        <button \n          type=\"button\" \n          class=\"sub-nav-btn\"\n          [class.active]=\"currentSubView === 'list'\"\n          (click)=\"setSubView('list')\"\n          title=\"List View\">\n          <i class=\"fa-solid fa-list\"></i>\n          List View\n        </button>\n        <button \n          type=\"button\" \n          class=\"sub-nav-btn\"\n          [class.active]=\"currentSubView === 'priority-matrix'\"\n          (click)=\"setSubView('priority-matrix')\"\n          title=\"Priority Matrix\">\n          <i class=\"fa-solid fa-th\"></i>\n          Priority Matrix\n        </button>\n        <button \n          type=\"button\" \n          class=\"sub-nav-btn\"\n          [class.active]=\"currentSubView === 'version-control'\"\n          (click)=\"setSubView('version-control')\"\n          title=\"Version Control\">\n          <i class=\"fa-solid fa-code-branch\"></i>\n          Version Control\n        </button>\n      </div>\n\n      <!-- Main Content with Splitter -->\n      <div class=\"main-content\">\n        <!-- List View Content -->\n        @if (currentSubView === 'list') {\n          <kendo-splitter \n            class=\"main-splitter\"\n            orientation=\"horizontal\"\n            (layoutChange)=\"onMainSplitterChange($event)\"\n            mjFillContainer>\n          \n          <!-- Filter Panel (Left) -->\n          <kendo-splitter-pane \n            [size]=\"filterPanelVisible ? '320px' : '0px'\"\n            [collapsible]=\"false\"\n            [resizable]=\"filterPanelVisible\"\n            [scrollable]=\"false\"\n            [hidden]=\"!filterPanelVisible\">\n            <mj-prompt-filter-panel\n              [prompts]=\"promptsWithTemplates\"\n              [filteredPrompts]=\"filteredPrompts\"\n              [categories]=\"categories\"\n              [types]=\"types\"\n              [filters]=\"currentFilters\"\n              (filtersChange)=\"onFiltersChange($event)\"\n              (filterChange)=\"onFilterChange()\"\n              (resetFilters)=\"onResetFilters()\"\n              (closePanel)=\"toggleFilterPanel()\">\n            </mj-prompt-filter-panel>\n          </kendo-splitter-pane>\n          \n          <!-- Prompts List Panel -->\n          <kendo-splitter-pane \n            [resizable]=\"true\"\n            [scrollable]=\"false\">\n            <div class=\"prompts-content\">\n\n      <!-- Loading State -->\n      @if (isLoading) {\n        <div class=\"loading-container\">\n          <div class=\"loading-content\">\n            <div class=\"loading-spinner\">\n              <div class=\"spinner-ring\"></div>\n              <div class=\"spinner-ring\"></div>\n              <div class=\"spinner-ring\"></div>\n            </div>\n            <div class=\"loading-text\">{{ loadingMessage }}</div>\n          </div>\n        </div>\n      }\n\n      <!-- Error State -->\n      @if (error) {\n        <div class=\"error-container\">\n          <p class=\"error-message\">\n            <i class=\"fa-solid fa-exclamation-triangle\"></i>\n            {{ error }}\n          </p>\n        </div>\n      }\n\n      <!-- Prompts List -->\n      @if (!isLoading && !error) {\n        <div class=\"prompts-list\">\n          @if (filteredPrompts.length === 0) {\n            <div class=\"empty-state\">\n              <i class=\"fa-solid fa-comment-dots\"></i>\n              <h3>No prompts found</h3>\n              <p>No prompts match your current filters. Try adjusting your search criteria or create a new prompt.</p>\n            </div>\n          } @else {\n            <div class=\"prompts-grid\">\n              @for (promptWithTemplate of filteredPrompts; track promptWithTemplate.prompt.ID || $index) {\n                <div class=\"prompt-card\" (click)=\"viewPrompt(promptWithTemplate)\">\n                  <!-- Card Header -->\n                  <div class=\"card-header\">\n                    <div class=\"prompt-info\">\n                      <div class=\"prompt-icon\">\n                        <i [class]=\"getPromptIcon()\"></i>\n                      </div>\n                      <div class=\"prompt-details\">\n                        <h4 class=\"prompt-name\">{{ promptWithTemplate.prompt.Name }}</h4>\n                        <div class=\"prompt-meta\">\n                          <span class=\"prompt-category\">{{ getCategoryName(promptWithTemplate.prompt.CategoryID) }}</span>\n                          @if (promptWithTemplate.type) {\n                            <span class=\"prompt-type\">\u2022 {{ promptWithTemplate.type.Name }}</span>\n                          }\n                        </div>\n                      </div>\n                    </div>\n                    \n                    <div class=\"status-badge status-{{ promptWithTemplate.prompt.Status.toLowerCase() }}\">\n                      {{ promptWithTemplate.prompt.Status }}\n                    </div>\n                  </div>\n\n                  <!-- Card Body -->\n                  <div class=\"card-body\">\n                    @if (promptWithTemplate.prompt.Description) {\n                      <p class=\"prompt-description\">{{ promptWithTemplate.prompt.Description }}</p>\n                    } @else {\n                      <p class=\"prompt-description text-muted\">No description provided</p>\n                    }\n                    \n                    <!-- Template Info -->\n                    <div class=\"template-info\">\n                      @if (promptWithTemplate.template) {\n                        <div class=\"template-item\">\n                          <i class=\"fa-solid fa-file-code\"></i>\n                          <span>{{ promptWithTemplate.template.Name }}</span>\n                        </div>\n                        @if (promptWithTemplate.templateContent) {\n                          <div class=\"template-content-info\">\n                            <small>\n                              Template content: {{ (promptWithTemplate.templateContent.TemplateText || '').length }} characters\n                            </small>\n                          </div>\n                        }\n                      } @else {\n                        <div class=\"template-item text-muted\">\n                          <i class=\"fa-solid fa-file-code\"></i>\n                          <span>No template assigned</span>\n                        </div>\n                      }\n                    </div>\n                  </div>\n\n                  <!-- Card Actions -->\n                  <div class=\"card-actions\" (click)=\"$event.stopPropagation()\">\n                    <button \n                      type=\"button\" \n                      class=\"action-btn\"\n                      (click)=\"viewPrompt(promptWithTemplate)\">\n                      <i class=\"fa-solid fa-eye\"></i>\n                      View\n                    </button>\n                    \n                    <button \n                      type=\"button\" \n                      class=\"action-btn action-btn-primary\"\n                      (click)=\"editPrompt(promptWithTemplate)\">\n                      <i class=\"fa-solid fa-edit\"></i>\n                      Edit\n                    </button>\n                    \n                    <button \n                      type=\"button\" \n                      class=\"action-btn action-btn-danger\"\n                      (click)=\"deletePrompt(promptWithTemplate)\">\n                      <i class=\"fa-solid fa-trash\"></i>\n                      Delete\n                    </button>\n                  </div>\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n            </div>\n          </kendo-splitter-pane>\n        </kendo-splitter>\n        }\n\n\n        <!-- Priority Matrix View -->\n        @if (currentSubView === 'priority-matrix') {\n          <app-model-prompt-priority-matrix\n            [selectedPrompts]=\"promptsForMatrix\"\n            (promptSelected)=\"onPromptSelectedFromMatrix($event)\"\n            mjFillContainer>\n          </app-model-prompt-priority-matrix>\n        }\n\n        <!-- Version Control View -->\n        @if (currentSubView === 'version-control') {\n          <app-prompt-version-control\n            [prompt]=\"selectedPrompt?.prompt || null\"\n            (versionSelected)=\"onVersionSelected($event)\"\n            mjFillContainer>\n          </app-prompt-version-control>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Editor View -->\n  @if (currentView === 'editor' && selectedPrompt) {\n    <div class=\"editor-view\">\n      <!-- Editor Header -->\n      <div class=\"editor-header\">\n        <div class=\"breadcrumb-section\">\n          <button \n            type=\"button\" \n            class=\"back-btn\"\n            (click)=\"backToList()\">\n            <i class=\"fa-solid fa-arrow-left\"></i>\n            Back to Prompts\n          </button>\n        </div>\n        \n        <div class=\"editor-title\">\n          <h2>\n            @if (isEditing && !selectedPrompt.prompt.ID) {\n              <i class=\"fa-solid fa-plus\"></i>\n              Create New Prompt\n            } @else if (isEditing) {\n              <i class=\"fa-solid fa-edit\"></i>\n              Edit Prompt\n            } @else {\n              <i class=\"fa-solid fa-eye\"></i>\n              View Prompt\n            }\n          </h2>\n          \n          @if (selectedPrompt.prompt.ID) {\n            <div class=\"status-badge status-{{ selectedPrompt.prompt.Status.toLowerCase() }}\">\n              {{ selectedPrompt.prompt.Status }}\n            </div>\n          }\n        </div>\n        \n        <div class=\"editor-actions\">\n          @if (!isEditing) {\n            <button \n              type=\"button\" \n              class=\"control-btn\"\n              (click)=\"toggleEdit()\">\n              <i class=\"fa-solid fa-edit\"></i>\n              Edit\n            </button>\n          } @else {\n            <button \n              type=\"button\" \n              class=\"control-btn\"\n              (click)=\"toggleEdit()\">\n              <i class=\"fa-solid fa-times\"></i>\n              Cancel\n            </button>\n            \n            <button \n              type=\"button\" \n              class=\"control-btn control-btn-primary\"\n              (click)=\"savePrompt()\"\n              [disabled]=\"isLoading\">\n              @if (isLoading) {\n                <span class=\"loading-spinner-sm\"></span>\n              } @else {\n                <i class=\"fa-solid fa-save\"></i>\n              }\n              Save\n            </button>\n          }\n        </div>\n      </div>\n\n      <!-- Editor Content -->\n      <div class=\"editor-content\">\n        <kendo-splitter \n          class=\"editor-splitter\"\n          orientation=\"horizontal\"\n          (layoutChange)=\"onEditorSplitterChange($event)\"\n          mjFillContainer>\n          \n          <!-- Prompt Details Panel -->\n          <kendo-splitter-pane \n            [collapsible]=\"false\"\n            [resizable]=\"true\"\n            [scrollable]=\"true\">\n            <div class=\"prompt-details-panel\">\n              <h3>Prompt Details</h3>\n              \n              <!-- Name -->\n              <div class=\"form-field\">\n                <label class=\"field-label\">Name *</label>\n                @if (isEditing) {\n                  <input \n                    type=\"text\" \n                    class=\"field-input\"\n                    [(ngModel)]=\"selectedPrompt.prompt.Name\"\n                    placeholder=\"Enter prompt name\"\n                    (input)=\"isDirty = true\">\n                } @else {\n                  <div class=\"field-value\">{{ selectedPrompt.prompt.Name }}</div>\n                }\n              </div>\n              \n              <!-- Description -->\n              <div class=\"form-field\">\n                <label class=\"field-label\">Description</label>\n                @if (isEditing) {\n                  <textarea \n                    class=\"field-textarea\"\n                    [(ngModel)]=\"selectedPrompt.prompt.Description\"\n                    placeholder=\"Enter prompt description\"\n                    (input)=\"isDirty = true\"></textarea>\n                } @else {\n                  <div class=\"field-value\">\n                    {{ selectedPrompt.prompt.Description || 'No description provided' }}\n                  </div>\n                }\n              </div>\n              \n              <!-- Category -->\n              <div class=\"form-field\">\n                <label class=\"field-label\">Category</label>\n                @if (isEditing) {\n                  @if (!showNewCategoryInput) {\n                    <select \n                      class=\"field-select\"\n                      [(ngModel)]=\"selectedPrompt.prompt.CategoryID\"\n                      (ngModelChange)=\"onCategoryChange($event)\">\n                      <option value=\"\">Select category...</option>\n                      @for (category of categories; track category.ID) {\n                        <option [value]=\"category.ID\">{{ category.Name }}</option>\n                      }\n                      <option value=\"new\" class=\"new-category-option\">+ Create New Category</option>\n                    </select>\n                  } @else {\n                    <div class=\"new-category-container\">\n                      <input \n                        type=\"text\" \n                        class=\"field-input\"\n                        [(ngModel)]=\"newCategoryName\"\n                        placeholder=\"Enter new category name\"\n                        (keyup)=\"onCreateNewCategoryKeyup($event)\"\n                        #newCategoryInput>\n                      <div class=\"new-category-actions\">\n                        <button \n                          type=\"button\" \n                          class=\"action-btn action-btn-primary\"\n                          (click)=\"createAndSelectNewCategory()\">\n                          <i class=\"fa-solid fa-check\"></i>\n                        </button>\n                        <button \n                          type=\"button\" \n                          class=\"action-btn\"\n                          (click)=\"cancelNewCategory()\">\n                          <i class=\"fa-solid fa-times\"></i>\n                        </button>\n                      </div>\n                    </div>\n                  }\n                } @else {\n                  <div class=\"field-value\">\n                    {{ getCategoryName(selectedPrompt.prompt.CategoryID) }}\n                  </div>\n                }\n              </div>\n              \n              <!-- Type -->\n              <div class=\"form-field\">\n                <label class=\"field-label\">Type</label>\n                @if (isEditing) {\n                  <select \n                    class=\"field-select\"\n                    [(ngModel)]=\"selectedPrompt.prompt.TypeID\"\n                    (change)=\"isDirty = true\">\n                    <option value=\"\">Select type...</option>\n                    @for (type of types; track type.ID) {\n                      <option [value]=\"type.ID\">{{ type.Name }}</option>\n                    }\n                  </select>\n                } @else {\n                  <div class=\"field-value\">\n                    {{ getTypeName(selectedPrompt.prompt.TypeID) }}\n                  </div>\n                }\n              </div>\n              \n              <!-- Status -->\n              <div class=\"form-field\">\n                <label class=\"field-label\">Status</label>\n                @if (isEditing) {\n                  <select \n                    class=\"field-select\"\n                    [(ngModel)]=\"selectedPrompt.prompt.Status\"\n                    (change)=\"isDirty = true\">\n                    <option value=\"Active\">Active</option>\n                    <option value=\"Pending\">Pending</option>\n                    <option value=\"Disabled\">Disabled</option>\n                  </select>\n                } @else {\n                  <div class=\"field-value\">\n                    <span class=\"status-badge status-{{ selectedPrompt.prompt.Status.toLowerCase() }}\">\n                      {{ selectedPrompt.prompt.Status }}\n                    </span>\n                  </div>\n                }\n              </div>\n              \n              <!-- Template Info -->\n              @if (selectedPrompt.template) {\n                <div class=\"template-info-section\">\n                  <h4>Template Information</h4>\n                  <div class=\"template-details\">\n                    <div><strong>Template:</strong> {{ selectedPrompt.template.Name }}</div>\n                    @if (selectedPrompt.template.Description) {\n                      <div><strong>Description:</strong> {{ selectedPrompt.template.Description }}</div>\n                    }\n                    @if (selectedPrompt.templateContent) {\n                      <div><strong>Content Length:</strong> {{ (selectedPrompt.templateContent.TemplateText || '').length }} characters</div>\n                    }\n                  </div>\n                </div>\n              }\n            </div>\n          </kendo-splitter-pane>\n          \n          <!-- Template Editor Panel -->\n          <kendo-splitter-pane \n            [resizable]=\"true\"\n            [scrollable]=\"true\">\n            <div class=\"template-editor-panel\">\n              <div class=\"editor-header\">\n                <h3>Template Content</h3>\n                <div class=\"editor-info\">\n                  @if (isEditing) {\n                    <span class=\"editor-badge editor-badge-info\">Nunjucks Template</span>\n                    @if (isDirty) {\n                      <span class=\"editor-badge editor-badge-warning\">Unsaved Changes</span>\n                    }\n                  } @else {\n                    <span class=\"editor-badge editor-badge-secondary\">Read Only</span>\n                  }\n                </div>\n              </div>\n              \n              <div class=\"editor-container\">\n                <mj-code-editor\n                  [value]=\"editorContent\"\n                  [languages]=\"supportedLanguages\"\n                  [language]=\"editorLanguage\"\n                  [placeholder]=\"'Enter your Nunjucks template here...'\"\n                  [lineWrapping]=\"true\"\n                  [highlightWhitespace]=\"false\"\n                  [indentWithTab]=\"true\"\n                  [indentUnit]=\"'  '\"\n                  [readonly]=\"!isEditing\"\n                  (change)=\"onEditorContentChange($event)\">\n                </mj-code-editor>\n              </div>\n              \n              <!-- Editor Help -->\n              @if (isEditing) {\n                <div class=\"editor-help\">\n                  <div class=\"help-section\">\n                    <h5>Nunjucks Template Syntax</h5>\n                    <div class=\"syntax-examples\">\n                      <div class=\"syntax-item\">\n                        <code>{{ \"{{ variable }}\" }}</code> - Variable output\n                      </div>\n                      <div class=\"syntax-item\">\n                        <code>{{ \"{% if condition %} ... {% endif %}\" }}</code> - Conditionals\n                      </div>\n                      <div class=\"syntax-item\">\n                        <code>{{ \"{% for item in items %} ... {% endfor %}\" }}</code> - Loops\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              }\n            </div>\n          </kendo-splitter-pane>\n        </kendo-splitter>\n      </div>\n    </div>\n  }\n</div>", styles: [".prompt-management-container {\n  overflow: hidden;\n  padding: 4px;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n.dashboard-header {\n  margin-bottom: 16px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-shrink: 0;\n  \n  .header-info {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    gap: 12px;\n  }\n  \n  .filter-toggle-btn {\n    padding: 6px 10px;\n    border: 1px solid #ddd;\n    border-radius: 4px;\n    background: white;\n    cursor: pointer;\n    font-size: 11px;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    transition: all 0.2s;\n    color: #555;\n    \n    &:hover {\n      background-color: #f0f0f0;\n      border-color: #2196f3;\n      color: #2196f3;\n    }\n    \n    .fa-solid {\n      font-size: 10px;\n    }\n  }\n  \n  .prompt-count {\n    font-size: 12px;\n    color: #2196f3;\n    font-weight: 600;\n    background: rgba(33, 150, 243, 0.1);\n    padding: 4px 8px;\n    border-radius: 4px;\n    border: 1px solid rgba(33, 150, 243, 0.2);\n  }\n  \n  .header-controls {\n    display: flex;\n    gap: 8px;\n    \n    .control-btn {\n      padding: 8px 12px;\n      border: 1px solid #ccc;\n      border-radius: 4px;\n      background: white;\n      cursor: pointer;\n      font-size: 12px;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      transition: all 0.2s;\n      \n      &:hover {\n        background-color: #f0f0f0;\n        border-color: #2196f3;\n      }\n      \n      &.active {\n        background-color: #2196f3;\n        border-color: #2196f3;\n        color: white;\n      }\n      \n      &.control-btn-primary {\n        background-color: #2196f3;\n        border-color: #2196f3;\n        color: white;\n        \n        &:hover {\n          background-color: #1976d2;\n        }\n      }\n      \n      &:disabled {\n        opacity: 0.5;\n        cursor: not-allowed;\n        \n        &:hover {\n          background-color: white;\n          border-color: #ccc;\n        }\n      }\n      \n      .fa-solid {\n        font-size: 14px;\n      }\n    }\n  }\n}\n\n// Filters now handled by filter panel component\n\n.loading-container, .error-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  background: #fafafa;\n  flex: 1;\n  \n  p {\n    color: #666;\n    font-size: 14px;\n  }\n}\n\n.error-message {\n  color: #d32f2f;\n  font-weight: 500;\n  \n  .fa-solid {\n    margin-right: 8px;\n  }\n}\n\n.loading-content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 16px;\n}\n\n.loading-spinner {\n  display: inline-block;\n  position: relative;\n  width: 40px;\n  height: 40px;\n  \n  .spinner-ring {\n    box-sizing: border-box;\n    display: block;\n    position: absolute;\n    width: 32px;\n    height: 32px;\n    margin: 4px;\n    border: 3px solid #2196f3;\n    border-radius: 50%;\n    animation: loading-spin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n    border-color: #2196f3 transparent transparent transparent;\n    \n    &:nth-child(1) { animation-delay: -0.45s; }\n    &:nth-child(2) { animation-delay: -0.3s; }\n    &:nth-child(3) { animation-delay: -0.15s; }\n  }\n}\n\n@keyframes loading-spin {\n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n}\n\n.empty-state {\n  text-align: center;\n  padding: 60px 20px;\n  color: #666;\n  \n  .fa-solid {\n    font-size: 48px;\n    margin-bottom: 16px;\n    color: #ccc;\n  }\n  \n  h3 {\n    margin: 0 0 8px 0;\n    color: #333;\n    font-size: 18px;\n    font-weight: 500;\n  }\n  \n  p {\n    margin: 0;\n    font-size: 14px;\n  }\n}\n\n.prompts-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));\n  gap: 16px;\n  flex: 1;\n  overflow-y: auto;\n}\n\n.prompt-card {\n  background: white;\n  border: 1px solid #e0e0e0;\n  border-radius: 4px;\n  padding: 16px;\n  transition: all 0.2s ease;\n  height: fit-content;\n  cursor: pointer;\n  \n  &:hover {\n    border-color: #2196f3;\n    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.1);\n    transform: translateY(-1px);\n  }\n  \n  .card-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    margin-bottom: 12px;\n    \n    .prompt-info {\n      display: flex;\n      gap: 12px;\n      flex: 1;\n      \n      .prompt-icon {\n        color: #2196f3;\n        font-size: 20px;\n        margin-top: 2px;\n      }\n      \n      .prompt-details {\n        flex: 1;\n        \n        .prompt-name {\n          margin: 0 0 4px 0;\n          font-size: 16px;\n          font-weight: 500;\n          color: #333;\n        }\n        \n        .prompt-meta {\n          font-size: 12px;\n          color: #666;\n          \n          .prompt-type {\n            margin-left: 8px;\n          }\n        }\n      }\n    }\n  }\n  \n  .card-body {\n    margin-bottom: 12px;\n    \n    .prompt-description {\n      margin-bottom: 12px;\n      color: #555;\n      font-size: 13px;\n      line-height: 1.4;\n    }\n    \n    .template-info {\n      .template-item {\n        display: flex;\n        align-items: center;\n        margin-bottom: 4px;\n        font-size: 12px;\n        color: #666;\n        \n        .fa-solid {\n          margin-right: 6px;\n          color: #999;\n        }\n      }\n      \n      .template-content-info {\n        font-size: 11px;\n        color: #999;\n      }\n    }\n  }\n  \n  .card-actions {\n    display: flex;\n    gap: 8px;\n    border-top: 1px solid #f0f0f0;\n    padding-top: 12px;\n    \n    .action-btn {\n      padding: 6px 12px;\n      border: 1px solid #ddd;\n      border-radius: 3px;\n      background: white;\n      cursor: pointer;\n      font-size: 11px;\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      transition: all 0.2s;\n      \n      &:hover {\n        background-color: #f5f5f5;\n        border-color: #bbb;\n      }\n      \n      &.action-btn-primary {\n        background-color: #2196f3;\n        border-color: #2196f3;\n        color: white;\n        \n        &:hover {\n          background-color: #1976d2;\n        }\n      }\n      \n      &.action-btn-danger {\n        background-color: #f44336;\n        border-color: #f44336;\n        color: white;\n        \n        &:hover {\n          background-color: #d32f2f;\n        }\n      }\n      \n      .fa-solid {\n        font-size: 10px;\n      }\n    }\n  }\n}\n\n// Editor View\n.editor-view {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  overflow: hidden;\n}\n\n.editor-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 16px;\n  padding-bottom: 16px;\n  border-bottom: 1px solid #e0e0e0;\n  \n  .breadcrumb-section {\n    .back-btn {\n      background: none;\n      border: none;\n      color: #2196f3;\n      cursor: pointer;\n      font-size: 12px;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      \n      &:hover {\n        text-decoration: underline;\n      }\n    }\n  }\n  \n  .editor-title {\n    flex: 1;\n    margin: 0 20px;\n    \n    h2 {\n      margin: 0;\n      font-size: 18px;\n      font-weight: 500;\n      color: #333;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n  }\n  \n  .editor-actions {\n    display: flex;\n    gap: 8px;\n  }\n}\n\n.editor-content {\n  flex: 1;\n  overflow: hidden;\n}\n\n.editor-splitter {\n  height: 100%;\n  \n  .k-pane {\n    overflow: hidden;\n  }\n}\n\n.prompt-details-panel, .template-editor-panel {\n  background: white;\n  border: 1px solid #e0e0e0;\n  border-radius: 4px;\n  padding: 16px;\n  height: 100%;\n  overflow-y: auto;\n  \n  h3 {\n    margin: 0 0 16px 0;\n    font-size: 16px;\n    font-weight: 500;\n    color: #333;\n    border-bottom: 1px solid #f0f0f0;\n    padding-bottom: 8px;\n  }\n}\n\n.form-field {\n  margin-bottom: 16px;\n  \n  .field-label {\n    display: block;\n    margin-bottom: 4px;\n    font-size: 12px;\n    font-weight: 500;\n    color: #555;\n  }\n  \n  .field-input, .field-select {\n    width: 100%;\n    padding: 6px 8px;\n    border: 1px solid #ddd;\n    border-radius: 3px;\n    font-size: 12px;\n    \n    &:focus {\n      outline: none;\n      border-color: #2196f3;\n    }\n  }\n  \n  .field-textarea {\n    width: 100%;\n    padding: 6px 8px;\n    border: 1px solid #ddd;\n    border-radius: 3px;\n    font-size: 12px;\n    resize: vertical;\n    min-height: 60px;\n    \n    &:focus {\n      outline: none;\n      border-color: #2196f3;\n    }\n  }\n  \n  .field-value {\n    padding: 6px 8px;\n    background: #f8f9fa;\n    border: 1px solid #e0e0e0;\n    border-radius: 3px;\n    font-size: 12px;\n    color: #555;\n  }\n}\n\n.template-editor-panel {\n  .editor-container {\n    margin-bottom: 16px;\n    \n    .code-editor {\n      width: 100%;\n      min-height: 300px;\n      font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n      font-size: 12px;\n      border: 1px solid #ddd;\n      border-radius: 3px;\n      padding: 8px;\n      background: #f8f9fa;\n      \n      &:focus {\n        outline: none;\n        border-color: #2196f3;\n      }\n    }\n    \n    .code-display {\n      border: 1px solid #e0e0e0;\n      border-radius: 3px;\n      background: #f8f9fa;\n      max-height: 400px;\n      overflow-y: auto;\n      \n      pre {\n        margin: 0;\n        padding: 12px;\n        font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n        font-size: 12px;\n        line-height: 1.4;\n        color: #333;\n        \n        code {\n          background: none;\n          padding: 0;\n          font-size: inherit;\n          color: inherit;\n        }\n      }\n    }\n  }\n  \n  .editor-help {\n    .help-section {\n      h5 {\n        font-size: 13px;\n        font-weight: 500;\n        margin-bottom: 8px;\n        color: #333;\n      }\n      \n      .syntax-examples {\n        .syntax-item {\n          margin-bottom: 6px;\n          padding: 6px 8px;\n          background: #f0f0f0;\n          border-radius: 3px;\n          font-size: 11px;\n          \n          code {\n            background: #e0e0e0;\n            padding: 2px 4px;\n            border-radius: 2px;\n            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n            margin-right: 8px;\n          }\n        }\n      }\n    }\n  }\n}\n\n// CodeMirror overrides\n.CodeMirror {\n  border: 1px solid #ddd !important;\n  border-radius: 3px !important;\n  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace !important;\n  font-size: 12px !important;\n  min-height: 300px !important;\n}\n\n.CodeMirror-focused {\n  border-color: #2196f3 !important;\n}\n\n// Status badges\n.status-badge {\n  padding: 2px 6px;\n  border-radius: 3px;\n  font-size: 10px;\n  font-weight: 500;\n  text-transform: uppercase;\n  \n  &.status-active {\n    background: #e8f5e8;\n    color: #2e7d32;\n  }\n  \n  &.status-pending {\n    background: #fff3e0;\n    color: #f57c00;\n  }\n  \n  &.status-disabled {\n    background: #ffebee;\n    color: #c62828;\n  }\n}\n\n// Editor badges\n.editor-badge {\n  padding: 2px 6px;\n  border-radius: 3px;\n  font-size: 10px;\n  font-weight: 500;\n  margin-left: 8px;\n  \n  &.editor-badge-info {\n    background: #e3f2fd;\n    color: #1976d2;\n  }\n  \n  &.editor-badge-warning {\n    background: #fff3e0;\n    color: #f57c00;\n  }\n  \n  &.editor-badge-secondary {\n    background: #f5f5f5;\n    color: #666;\n  }\n}\n\n// New category creation\n.new-category-container {\n  display: flex;\n  gap: 4px;\n  align-items: center;\n  \n  .field-input {\n    flex: 1;\n  }\n  \n  .new-category-actions {\n    display: flex;\n    gap: 2px;\n    \n    .action-btn {\n      padding: 4px 6px;\n      border: 1px solid #ddd;\n      border-radius: 3px;\n      background: white;\n      cursor: pointer;\n      font-size: 10px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      min-width: 24px;\n      height: 24px;\n      \n      &:hover {\n        background-color: #f5f5f5;\n      }\n      \n      &.action-btn-primary {\n        background-color: #2196f3;\n        border-color: #2196f3;\n        color: white;\n        \n        &:hover {\n          background-color: #1976d2;\n        }\n      }\n      \n      .fa-solid {\n        font-size: 10px;\n      }\n    }\n  }\n}\n\n.new-category-option {\n  color: #2196f3;\n  font-style: italic;\n}\n\n// CodeMirror 6 styling\nmj-code-editor {\n  display: block;\n  border: 1px solid #ddd;\n  border-radius: 3px;\n  overflow: hidden;\n  min-height: 300px;\n  \n  .cm-editor {\n    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace !important;\n    font-size: 12px !important;\n    min-height: 300px;\n  }\n  \n  .cm-focused {\n    outline: none !important;\n  }\n  \n  .cm-editor.cm-focused {\n    border-color: #2196f3;\n  }\n}\n\n// List View Layout\n.list-view {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  overflow: hidden;\n}\n\n.sub-navigation {\n  display: flex;\n  gap: 8px;\n  margin-bottom: 16px;\n  padding: 8px 0;\n  border-bottom: 1px solid #e0e0e0;\n  flex-shrink: 0;\n\n  .sub-nav-btn {\n    padding: 8px 12px;\n    border: 1px solid #ddd;\n    border-radius: 4px;\n    background: white;\n    cursor: pointer;\n    font-size: 12px;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    transition: all 0.2s;\n    color: #555;\n    font-weight: 500;\n\n    &:hover {\n      background-color: #f0f0f0;\n      border-color: #2196f3;\n      color: #2196f3;\n    }\n\n    &.active {\n      background-color: #2196f3;\n      border-color: #2196f3;\n      color: white;\n      box-shadow: 0 2px 4px rgba(33, 150, 243, 0.2);\n    }\n\n    .fa-solid {\n      font-size: 11px;\n    }\n  }\n}\n\n.main-content {\n  flex: 1;\n  overflow: hidden;\n}\n\n.main-splitter {\n  height: 100%;\n  \n  .k-pane {\n    overflow: hidden;\n  }\n}\n\n.prompts-content {\n  height: 100%;\n  overflow-y: auto;\n  padding: 0 16px;\n}"] }]