@memberjunction/ng-dashboards 2.48.0 → 2.49.0

package/dist/AI/components/prompts/prompt-version-control.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, Input, Output, EventEmitter } from '@angular/core';
 import { Metadata, CompositeKey, LogError, LogStatus } from '@memberjunction/core';
 import { Subject, BehaviorSubject } from 'rxjs';
@@ -701,45 +692,46 @@ function PromptVersionControlComponent_Conditional_2_Template(rf, ctx) { if (rf
     i0.ɵɵconditional(ctx_r1.error ? 52 : -1);
 } }
 export class PromptVersionControlComponent {
+    notificationService;
+    prompt = null;
+    autoLoad = true;
+    showRestoreActions = true;
+    showComparison = true;
+    maxVersions = 50;
+    versionSelected = new EventEmitter();
+    versionRestored = new EventEmitter();
+    versionCompared = new EventEmitter();
+    // Data
+    versions = [];
+    recordChanges = [];
+    templateContents = new Map();
+    availablePrompts = [];
+    filteredAvailablePrompts = [];
+    // UI State
+    isLoading = false;
+    loadingMessage = '';
+    error = null;
+    currentView = 'timeline';
+    selectedVersion = null;
+    compareFromVersion = null;
+    compareToVersion = null;
+    comparisonResult = null;
+    // Filtering and sorting
+    filterBy = 'all';
+    sortDirection = 'desc';
+    searchTerm$ = new BehaviorSubject('');
+    promptSearchTerm$ = new BehaviorSubject('');
+    showSystemChanges = false;
+    // Timeline configuration
+    timelineConfig = {
+        showThumbnails: true,
+        showDiffs: true,
+        compactMode: false,
+        groupByDate: true
+    };
+    destroy$ = new Subject();
     constructor(notificationService) {
         this.notificationService = notificationService;
-        this.prompt = null;
-        this.autoLoad = true;
-        this.showRestoreActions = true;
-        this.showComparison = true;
-        this.maxVersions = 50;
-        this.versionSelected = new EventEmitter();
-        this.versionRestored = new EventEmitter();
-        this.versionCompared = new EventEmitter();
-        // Data
-        this.versions = [];
-        this.recordChanges = [];
-        this.templateContents = new Map();
-        this.availablePrompts = [];
-        this.filteredAvailablePrompts = [];
-        // UI State
-        this.isLoading = false;
-        this.loadingMessage = '';
-        this.error = null;
-        this.currentView = 'timeline';
-        this.selectedVersion = null;
-        this.compareFromVersion = null;
-        this.compareToVersion = null;
-        this.comparisonResult = null;
-        // Filtering and sorting
-        this.filterBy = 'all';
-        this.sortDirection = 'desc';
-        this.searchTerm$ = new BehaviorSubject('');
-        this.promptSearchTerm$ = new BehaviorSubject('');
-        this.showSystemChanges = false;
-        // Timeline configuration
-        this.timelineConfig = {
-            showThumbnails: true,
-            showDiffs: true,
-            compactMode: false,
-            groupByDate: true
-        };
-        this.destroy$ = new Subject();
     }
     ngOnInit() {
         this.loadAvailablePrompts();
@@ -752,89 +744,85 @@ export class PromptVersionControlComponent {
         this.destroy$.next();
         this.destroy$.complete();
     }
-    loadVersionHistory() {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this.prompt) {
-                this.error = 'No prompt specified for version history';
+    async loadVersionHistory() {
+        if (!this.prompt) {
+            this.error = 'No prompt specified for version history';
+            return;
+        }
+        try {
+            this.isLoading = true;
+            this.error = null;
+            this.loadingMessage = 'Loading version history...';
+            const md = new Metadata();
+            const primaryKey = new CompositeKey();
+            primaryKey.KeyValuePairs.push({ FieldName: 'ID', Value: this.prompt.ID });
+            // Get record changes using the new method
+            this.recordChanges = await md.GetRecordChanges('AI Prompts', primaryKey);
+            if (this.recordChanges.length === 0) {
+                this.versions = [];
+                LogStatus(`No version history found for prompt: ${this.prompt.Name}`);
                 return;
             }
+            // Load template contents for versions that have template changes
+            await this.loadTemplateContents();
+            // Process record changes into version objects
+            this.processRecordChanges();
+            // Apply current filters
+            this.applyFilters();
+            LogStatus(`Loaded ${this.versions.length} versions for prompt: ${this.prompt.Name}`);
+        }
+        catch (error) {
+            this.error = 'Failed to load version history. Please try again.';
+            LogError('Error loading prompt version history', undefined, error);
+        }
+        finally {
+            this.isLoading = false;
+        }
+    }
+    async loadTemplateContents() {
+        const templateIds = new Set();
+        // Extract template IDs from record changes
+        this.recordChanges.forEach(change => {
             try {
-                this.isLoading = true;
-                this.error = null;
-                this.loadingMessage = 'Loading version history...';
-                const md = new Metadata();
-                const primaryKey = new CompositeKey();
-                primaryKey.KeyValuePairs.push({ FieldName: 'ID', Value: this.prompt.ID });
-                // Get record changes using the new method
-                this.recordChanges = yield md.GetRecordChanges('AI Prompts', primaryKey);
-                if (this.recordChanges.length === 0) {
-                    this.versions = [];
-                    LogStatus(`No version history found for prompt: ${this.prompt.Name}`);
-                    return;
+                const fullRecord = JSON.parse(change.FullRecordJSON);
+                if (fullRecord.TemplateID) {
+                    templateIds.add(fullRecord.TemplateID);
+                }
+                // Also check changes JSON for template changes
+                if (change.ChangesJSON) {
+                    const changes = JSON.parse(change.ChangesJSON);
+                    if (changes.TemplateID && changes.TemplateID.newValue) {
+                        templateIds.add(changes.TemplateID.newValue);
+                    }
+                    if (changes.TemplateID && changes.TemplateID.oldValue) {
+                        templateIds.add(changes.TemplateID.oldValue);
+                    }
                 }
-                // Load template contents for versions that have template changes
-                yield this.loadTemplateContents();
-                // Process record changes into version objects
-                this.processRecordChanges();
-                // Apply current filters
-                this.applyFilters();
-                LogStatus(`Loaded ${this.versions.length} versions for prompt: ${this.prompt.Name}`);
-            }
-            catch (error) {
-                this.error = 'Failed to load version history. Please try again.';
-                LogError('Error loading prompt version history', undefined, error);
             }
-            finally {
-                this.isLoading = false;
+            catch (e) {
+                // Ignore parsing errors
             }
         });
-    }
-    loadTemplateContents() {
-        return __awaiter(this, void 0, void 0, function* () {
-            const templateIds = new Set();
-            // Extract template IDs from record changes
-            this.recordChanges.forEach(change => {
+        // Load template content entities
+        if (templateIds.size > 0) {
+            this.loadingMessage = 'Loading template content history...';
+            // Note: We would need a way to get historical template content
+            // For now, we'll get current template content and note this limitation
+            const md = new Metadata();
+            for (const templateId of templateIds) {
                 try {
-                    const fullRecord = JSON.parse(change.FullRecordJSON);
-                    if (fullRecord.TemplateID) {
-                        templateIds.add(fullRecord.TemplateID);
-                    }
-                    // Also check changes JSON for template changes
-                    if (change.ChangesJSON) {
-                        const changes = JSON.parse(change.ChangesJSON);
-                        if (changes.TemplateID && changes.TemplateID.newValue) {
-                            templateIds.add(changes.TemplateID.newValue);
-                        }
-                        if (changes.TemplateID && changes.TemplateID.oldValue) {
-                            templateIds.add(changes.TemplateID.oldValue);
-                        }
+                    const templateContent = await md.GetEntityObject('Template Contents', md.CurrentUser);
+                    const loaded = await templateContent.Load(templateId);
+                    if (loaded) {
+                        this.templateContents.set(templateId, templateContent);
                     }
                 }
                 catch (e) {
-                    // Ignore parsing errors
-                }
-            });
-            // Load template content entities
-            if (templateIds.size > 0) {
-                this.loadingMessage = 'Loading template content history...';
-                // Note: We would need a way to get historical template content
-                // For now, we'll get current template content and note this limitation
-                const md = new Metadata();
-                for (const templateId of templateIds) {
-                    try {
-                        const templateContent = yield md.GetEntityObject('Template Contents', md.CurrentUser);
-                        const loaded = yield templateContent.Load(templateId);
-                        if (loaded) {
-                            this.templateContents.set(templateId, templateContent);
-                        }
-                    }
-                    catch (e) {
-                        // Template content might not exist anymore
-                        LogError(`Failed to load template content for ID: ${templateId}`, undefined, e);
-                    }
+                    // Template content might not exist anymore
+                    LogError(`Failed to load template content for ID: ${templateId}`, undefined, e);
                 }
             }
-        });
+        }
     }
     processRecordChanges() {
         this.versions = this.recordChanges.map((change, index) => {
@@ -934,52 +922,50 @@ export class PromptVersionControlComponent {
     applyFiltersPublic() {
         this.applyFilters();
     }
-    restoreVersion(version) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!version.canRestore || !this.prompt) {
-                this.notificationService.CreateSimpleNotification('Cannot restore this version', 'warning', 3000);
-                return;
-            }
-            const confirm = window.confirm(`Are you sure you want to restore to version ${version.version} from ${version.changedAt.toLocaleString()}? This will overwrite the current prompt.`);
-            if (!confirm)
-                return;
-            try {
-                this.isLoading = true;
-                this.loadingMessage = 'Restoring version...';
-                const md = new Metadata();
-                const promptToRestore = yield md.GetEntityObject('AI Prompts', md.CurrentUser);
-                yield promptToRestore.Load(this.prompt.ID);
-                // Apply the historical data
-                if (version.fullRecordJSON) {
-                    const historicalData = version.fullRecordJSON;
-                    // Update prompt fields (excluding system fields)
-                    const fieldsToRestore = ['Name', 'Description', 'CategoryID', 'TypeID', 'Status', 'TemplateID'];
-                    fieldsToRestore.forEach(field => {
-                        if (historicalData[field] !== undefined) {
-                            promptToRestore[field] = historicalData[field];
-                        }
-                    });
-                    const saved = yield promptToRestore.Save();
-                    if (saved) {
-                        this.notificationService.CreateSimpleNotification(`Version ${version.version} restored successfully`, 'success', 3000);
-                        this.versionRestored.emit(promptToRestore);
-                        // Reload version history to reflect the new change
-                        yield this.loadVersionHistory();
-                    }
-                    else {
-                        throw new Error('Failed to save restored version');
+    async restoreVersion(version) {
+        if (!version.canRestore || !this.prompt) {
+            this.notificationService.CreateSimpleNotification('Cannot restore this version', 'warning', 3000);
+            return;
+        }
+        const confirm = window.confirm(`Are you sure you want to restore to version ${version.version} from ${version.changedAt.toLocaleString()}? This will overwrite the current prompt.`);
+        if (!confirm)
+            return;
+        try {
+            this.isLoading = true;
+            this.loadingMessage = 'Restoring version...';
+            const md = new Metadata();
+            const promptToRestore = await md.GetEntityObject('AI Prompts', md.CurrentUser);
+            await promptToRestore.Load(this.prompt.ID);
+            // Apply the historical data
+            if (version.fullRecordJSON) {
+                const historicalData = version.fullRecordJSON;
+                // Update prompt fields (excluding system fields)
+                const fieldsToRestore = ['Name', 'Description', 'CategoryID', 'TypeID', 'Status', 'TemplateID'];
+                fieldsToRestore.forEach(field => {
+                    if (historicalData[field] !== undefined) {
+                        promptToRestore[field] = historicalData[field];
                     }
+                });
+                const saved = await promptToRestore.Save();
+                if (saved) {
+                    this.notificationService.CreateSimpleNotification(`Version ${version.version} restored successfully`, 'success', 3000);
+                    this.versionRestored.emit(promptToRestore);
+                    // Reload version history to reflect the new change
+                    await this.loadVersionHistory();
+                }
+                else {
+                    throw new Error('Failed to save restored version');
                 }
             }
-            catch (error) {
-                this.error = 'Failed to restore version. Please try again.';
-                LogError('Error restoring prompt version', undefined, error);
-                this.notificationService.CreateSimpleNotification('Failed to restore version', 'error', 4000);
-            }
-            finally {
-                this.isLoading = false;
-            }
-        });
+        }
+        catch (error) {
+            this.error = 'Failed to restore version. Please try again.';
+            LogError('Error restoring prompt version', undefined, error);
+            this.notificationService.CreateSimpleNotification('Failed to restore version', 'error', 4000);
+        }
+        finally {
+            this.isLoading = false;
+        }
     }
     startComparison(fromVersion, toVersion) {
         this.compareFromVersion = fromVersion;
@@ -1026,12 +1012,11 @@ export class PromptVersionControlComponent {
         this.versionCompared.emit(this.comparisonResult);
     }
     compareTemplateContent(differences) {
-        var _a, _b;
-        const fromTemplate = (_a = this.compareFromVersion) === null || _a === void 0 ? void 0 : _a.templateContent;
-        const toTemplate = (_b = this.compareToVersion) === null || _b === void 0 ? void 0 : _b.templateContent;
+        const fromTemplate = this.compareFromVersion?.templateContent;
+        const toTemplate = this.compareToVersion?.templateContent;
         if (fromTemplate || toTemplate) {
-            const fromContent = (fromTemplate === null || fromTemplate === void 0 ? void 0 : fromTemplate.TemplateText) || '';
-            const toContent = (toTemplate === null || toTemplate === void 0 ? void 0 : toTemplate.TemplateText) || '';
+            const fromContent = fromTemplate?.TemplateText || '';
+            const toContent = toTemplate?.TemplateText || '';
             if (fromContent !== toContent) {
                 differences.push({
                     fieldName: 'TemplateText',
@@ -1109,10 +1094,9 @@ export class PromptVersionControlComponent {
         return label;
     }
     exportVersionHistory() {
-        var _a, _b, _c;
         const exportData = {
-            promptId: (_a = this.prompt) === null || _a === void 0 ? void 0 : _a.ID,
-            promptName: (_b = this.prompt) === null || _b === void 0 ? void 0 : _b.Name,
+            promptId: this.prompt?.ID,
+            promptName: this.prompt?.Name,
             exportedAt: new Date().toISOString(),
             versions: this.versions.map(v => ({
                 version: v.version,
@@ -1127,27 +1111,25 @@ export class PromptVersionControlComponent {
         const url = URL.createObjectURL(blob);
         const a = document.createElement('a');
         a.href = url;
-        a.download = `prompt-version-history-${((_c = this.prompt) === null || _c === void 0 ? void 0 : _c.Name) || 'unknown'}-${new Date().toISOString().split('T')[0]}.json`;
+        a.download = `prompt-version-history-${this.prompt?.Name || 'unknown'}-${new Date().toISOString().split('T')[0]}.json`;
         a.click();
         URL.revokeObjectURL(url);
     }
     refreshHistory() {
         this.loadVersionHistory();
     }
-    loadAvailablePrompts() {
-        return __awaiter(this, void 0, void 0, function* () {
-            try {
-                const metadata = new Metadata();
-                const promptEntity = yield metadata.GetEntityObject('AI Prompts');
-                const prompts = yield promptEntity.GetAll();
-                this.availablePrompts = prompts.sort((a, b) => a.Name.localeCompare(b.Name));
-                this.filteredAvailablePrompts = [...this.availablePrompts];
-            }
-            catch (error) {
-                console.error('Failed to load available prompts:', error);
-                LogError('Failed to load available prompts', undefined, error);
-            }
-        });
+    async loadAvailablePrompts() {
+        try {
+            const metadata = new Metadata();
+            const promptEntity = await metadata.GetEntityObject('AI Prompts');
+            const prompts = await promptEntity.GetAll();
+            this.availablePrompts = prompts.sort((a, b) => a.Name.localeCompare(b.Name));
+            this.filteredAvailablePrompts = [...this.availablePrompts];
+        }
+        catch (error) {
+            console.error('Failed to load available prompts:', error);
+            LogError('Failed to load available prompts', undefined, error);
+        }
     }
     setupPromptFiltering() {
         this.promptSearchTerm$.subscribe(searchTerm => {
@@ -1171,16 +1153,16 @@ export class PromptVersionControlComponent {
         this.prompt = prompt;
         this.loadVersionHistory();
     }
+    static ɵfac = function PromptVersionControlComponent_Factory(t) { return new (t || PromptVersionControlComponent)(i0.ɵɵdirectiveInject(i1.MJNotificationService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PromptVersionControlComponent, selectors: [["app-prompt-version-control"]], inputs: { prompt: "prompt", autoLoad: "autoLoad", showRestoreActions: "showRestoreActions", showComparison: "showComparison", maxVersions: "maxVersions" }, outputs: { versionSelected: "versionSelected", versionRestored: "versionRestored", versionCompared: "versionCompared" }, decls: 3, vars: 1, consts: [[1, "prompt-version-control"], [1, "prompt-selector-section"], [1, "section-title"], [1, "fa-solid", "fa-history"], [1, "text-muted", "mb-3"], [1, "prompt-selector"], [1, "search-box", "mb-3"], [1, "input-group"], [1, "input-group-text"], [1, "fa-solid", "fa-search"], ["type", "text", "placeholder", "Search prompts...", 1, "form-control", 3, "ngModelChange", "ngModel"], [1, "prompts-list"], [1, "empty-state"], [1, "fa-solid", "fa-comment-dots", "text-muted"], [1, "text-muted"], [1, "prompt-item"], [1, "prompt-item", 3, "click"], [1, "prompt-info"], [1, "prompt-title"], [1, "prompt-description"], [1, "prompt-actions"], [1, "fa-solid", "fa-arrow-right"], [1, "version-toolbar"], [1, "toolbar-section"], [1, "toolbar-title"], [1, "prompt-name"], [1, "view-mode-toggle"], ["role", "group", 1, "btn-group", "btn-group-sm"], ["type", "radio", "name", "view", "id", "timelineView", "value", "timeline", 1, "btn-check", 3, "ngModelChange", "ngModel"], ["for", "timelineView", 1, "btn", "btn-outline-primary"], [1, "fa-solid", "fa-timeline"], ["type", "radio", "name", "view", "id", "comparisonView", "value", "comparison", 1, "btn-check", 3, "ngModelChange", "ngModel"], ["for", "comparisonView", 1, "btn", "btn-outline-primary"], [1, "fa-solid", "fa-code-compare"], ["type", "radio", "name", "view", "id", "detailsView", "value", "details", 1, "btn-check", 3, "ngModelChange", "ngModel"], ["for", "detailsView", 1, "btn", "btn-outline-primary"], [1, "fa-solid", "fa-list"], [1, "filter-controls"], [1, "form-label"], [1, "form-select", "form-select-sm", 3, "ngModelChange", "ngModel"], ["value", "all"], ["value", "updates"], ["value", "major"], ["value", "template"], [1, "form-check", "form-switch"], ["type", "checkbox", "id", "showSystem", 1, "form-check-input", 3, "ngModelChange", "ngModel"], ["for", "showSystem", 1, "form-check-label"], [1, "search-controls"], ["type", "text", "placeholder", "Search changes...", 1, "form-control", "form-control-sm", 3, "ngModelChange", "ngModel"], [1, "action-buttons"], ["type", "button", 1, "btn", "btn-sm", "btn-outline-secondary", 3, "click", "title"], [1, "fa-solid"], ["type", "button", "title", "Refresh history", 1, "btn", "btn-sm", "btn-outline-secondary", 3, "click", "disabled"], [1, "fa-solid", "fa-refresh"], ["type", "button", "title", "Export history", 1, "btn", "btn-sm", "btn-outline-info", 3, "click"], [1, "fa-solid", "fa-download"], [1, "loading-container"], [1, "error-container"], [1, "loading-content"], ["role", "status", 1, "spinner-border", "text-primary"], [1, "visually-hidden"], [1, "loading-message"], [1, "timeline-container"], [1, "comparison-container"], [1, "details-container"], [1, "version-timeline"], [1, "no-versions-message"], [1, "timeline-item", 3, "selected", "active"], [1, "timeline-item", 3, "click"], [1, "timeline-marker"], [1, "marker-icon"], [1, "timeline-line"], [1, "timeline-content"], [1, "version-header"], [1, "version-info"], [1, "version-label"], [1, "version-meta"], [1, "change-date"], [1, "changed-by"], [1, "change-source", "badge"], [1, "version-actions"], ["type", "button", "title", "Compare with next version", 1, "btn", "btn-sm", "btn-outline-primary"], ["type", "button", "title", "Restore this version", 1, "btn", "btn-sm", "btn-outline-success"], [1, "version-description"], [1, "changes-summary"], ["type", "button", "title", "Compare with next version", 1, "btn", "btn-sm", "btn-outline-primary", 3, "click"], ["type", "button", "title", "Restore this version", 1, "btn", "btn-sm", "btn-outline-success", 3, "click"], [1, "fa-solid", "fa-undo"], [1, "changes-list"], [1, "change-item"], [1, "field-name"], [1, "change-arrow"], [1, "new-value"], [1, "old-value"], [1, "fa-solid", "fa-info-circle", "text-muted"], [1, "comparison-selectors"], [1, "selector-group"], [1, "form-select", 3, "ngModelChange", "ngModel"], [3, "ngValue"], [1, "comparison-arrow"], [1, "comparison-results"], [1, "comparison-header"], [1, "comparison-title"], [1, "changes-count"], [1, "differences-list"], [1, "no-differences"], [1, "difference-item", 3, "class"], [1, "difference-item"], [1, "diff-header"], [1, "field-info"], [1, "change-type", "badge"], [1, "template-badge", "badge", "badge-info"], [1, "diff-content"], [1, "side-by-side-diff"], [1, "diff-added"], [1, "diff-removed"], [1, "diff-old"], [1, "diff-label"], [1, "diff-value", "old-value"], [1, "template-content"], [1, "diff-new"], [1, "diff-value", "new-value"], [1, "fa-solid", "fa-check-circle", "text-success"], [1, "version-details"], [1, "no-selection-message"], [1, "details-header"], [1, "details-title"], [1, "details-meta"], [1, "details-content"], [1, "detail-section"], [1, "detail-grid"], [1, "detail-item"], [1, "detail-label"], [1, "detail-value"], [1, "json-viewer"], [1, "json-content"], [1, "template-viewer"], [1, "fa-solid", "fa-hand-pointer", "text-muted"], ["role", "alert", 1, "alert", "alert-danger"], [1, "fa-solid", "fa-exclamation-triangle"], ["type", "button", 1, "btn", "btn-sm", "btn-outline-danger", "ms-2", 3, "click"]], template: function PromptVersionControlComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0);
+            i0.ɵɵtemplate(1, PromptVersionControlComponent_Conditional_1_Template, 15, 2, "div", 1)(2, PromptVersionControlComponent_Conditional_2_Template, 53, 17);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(!ctx.prompt ? 1 : 2);
+        } }, dependencies: [i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.DefaultValueAccessor, i2.CheckboxControlValueAccessor, i2.SelectControlValueAccessor, i2.RadioControlValueAccessor, i2.NgControlStatus, i2.NgModel, i3.JsonPipe, i3.DatePipe], styles: [".prompt-version-control[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: #f8f9fa;\n\n  .version-toolbar {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 1rem;\n    background: white;\n    border-bottom: 1px solid #dee2e6;\n    flex-shrink: 0;\n    gap: 1rem;\n    flex-wrap: wrap;\n\n    .toolbar-section {\n      display: flex;\n      align-items: center;\n      gap: 1rem;\n      flex-wrap: wrap;\n\n      .toolbar-title {\n        margin: 0;\n        color: #495057;\n        display: flex;\n        align-items: center;\n        gap: 0.5rem;\n        font-weight: 600;\n\n        i {\n          color: #0d6efd;\n        }\n\n        .prompt-name {\n          font-weight: 400;\n          color: #6c757d;\n        }\n      }\n\n      .filter-controls,\n      .search-controls {\n        display: flex;\n        align-items: center;\n        gap: 0.5rem;\n\n        .form-label {\n          margin: 0;\n          font-size: 0.875rem;\n          color: #6c757d;\n          white-space: nowrap;\n        }\n\n        .form-select,\n        .form-control {\n          min-width: 120px;\n        }\n\n        .form-check {\n          margin: 0;\n          \n          .form-check-label {\n            font-size: 0.875rem;\n          }\n        }\n      }\n\n      .action-buttons {\n        display: flex;\n        gap: 0.5rem;\n\n        .btn {\n          font-size: 0.875rem;\n        }\n      }\n    }\n  }\n\n  .loading-container {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    .loading-content {\n      text-align: center;\n      \n      .loading-message {\n        margin-top: 1rem;\n        color: #6c757d;\n      }\n    }\n  }\n\n  .timeline-container {\n    flex: 1;\n    padding: 1rem;\n    overflow-y: auto;\n\n    .version-timeline {\n      max-width: 800px;\n      margin: 0 auto;\n\n      .timeline-item {\n        display: flex;\n        position: relative;\n        margin-bottom: 2rem;\n        cursor: pointer;\n        transition: all 0.2s ease;\n\n        &:hover {\n          .timeline-content {\n            box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);\n            transform: translateY(-1px);\n          }\n        }\n\n        &.selected {\n          .timeline-content {\n            border-color: #0d6efd;\n            box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);\n          }\n        }\n\n        &.active {\n          .timeline-marker .marker-icon {\n            border-color: #28a745;\n            background-color: #28a745;\n            color: white;\n          }\n        }\n\n        .timeline-marker {\n          display: flex;\n          flex-direction: column;\n          align-items: center;\n          margin-right: 1.5rem;\n          flex-shrink: 0;\n\n          .marker-icon {\n            width: 2.5rem;\n            height: 2.5rem;\n            border-radius: 50%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            border: 3px solid;\n            background: white;\n            font-size: 1rem;\n            z-index: 2;\n\n            &.change-create {\n              border-color: #28a745;\n              color: #28a745;\n            }\n\n            &.change-update {\n              border-color: #0d6efd;\n              color: #0d6efd;\n            }\n\n            &.change-delete {\n              border-color: #dc3545;\n              color: #dc3545;\n            }\n          }\n\n          .timeline-line {\n            width: 2px;\n            flex: 1;\n            background: #dee2e6;\n            margin-top: 0.5rem;\n            min-height: 2rem;\n          }\n        }\n\n        .timeline-content {\n          flex: 1;\n          background: white;\n          border: 1px solid #dee2e6;\n          border-radius: 0.5rem;\n          padding: 1.5rem;\n          transition: all 0.2s ease;\n\n          .version-header {\n            display: flex;\n            justify-content: space-between;\n            align-items: flex-start;\n            margin-bottom: 1rem;\n\n            .version-info {\n              .version-label {\n                margin: 0 0 0.5rem 0;\n                color: #495057;\n                font-weight: 600;\n              }\n\n              .version-meta {\n                display: flex;\n                align-items: center;\n                gap: 0.75rem;\n                font-size: 0.875rem;\n                color: #6c757d;\n                flex-wrap: wrap;\n\n                .change-date {\n                  font-weight: 500;\n                }\n\n                .badge {\n                  font-size: 0.75rem;\n                }\n              }\n            }\n\n            .version-actions {\n              display: flex;\n              gap: 0.5rem;\n\n              .btn {\n                padding: 0.25rem 0.5rem;\n                font-size: 0.75rem;\n              }\n            }\n          }\n\n          .version-description {\n            color: #495057;\n            margin-bottom: 1rem;\n            line-height: 1.5;\n          }\n\n          .changes-summary {\n            .changes-list {\n              .change-item {\n                display: flex;\n                align-items: center;\n                padding: 0.5rem;\n                background: #f8f9fa;\n                border-radius: 0.375rem;\n                margin-bottom: 0.5rem;\n                font-size: 0.875rem;\n\n                .field-name {\n                  font-weight: 500;\n                  color: #495057;\n                  margin-right: 0.75rem;\n                  min-width: 100px;\n                }\n\n                .change-arrow {\n                  display: flex;\n                  align-items: center;\n                  gap: 0.5rem;\n\n                  .old-value {\n                    color: #dc3545;\n                    text-decoration: line-through;\n                  }\n\n                  .new-value {\n                    color: #28a745;\n                    font-weight: 500;\n                  }\n\n                  i {\n                    color: #6c757d;\n                  }\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n\n    .no-versions-message {\n      text-align: center;\n      padding: 3rem 1rem;\n      color: #6c757d;\n\n      i {\n        font-size: 3rem;\n        margin-bottom: 1rem;\n        display: block;\n        opacity: 0.5;\n      }\n\n      p {\n        margin: 0.5rem 0;\n        font-size: 1rem;\n        line-height: 1.5;\n      }\n    }\n  }\n\n  .comparison-container {\n    flex: 1;\n    padding: 1rem;\n    overflow-y: auto;\n\n    .comparison-selectors {\n      display: flex;\n      align-items: end;\n      gap: 1rem;\n      margin-bottom: 2rem;\n      padding: 1rem;\n      background: white;\n      border: 1px solid #dee2e6;\n      border-radius: 0.5rem;\n\n      .selector-group {\n        flex: 1;\n\n        .form-label {\n          font-weight: 500;\n          color: #495057;\n        }\n      }\n\n      .comparison-arrow {\n        padding-bottom: 0.375rem;\n        color: #6c757d;\n        font-size: 1.25rem;\n      }\n    }\n\n    .comparison-results {\n      background: white;\n      border: 1px solid #dee2e6;\n      border-radius: 0.5rem;\n      overflow: hidden;\n\n      .comparison-header {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        padding: 1rem;\n        background: #f8f9fa;\n        border-bottom: 1px solid #dee2e6;\n\n        .comparison-title {\n          margin: 0;\n          color: #495057;\n          font-weight: 600;\n          display: flex;\n          align-items: center;\n          gap: 0.5rem;\n        }\n\n        .changes-count {\n          font-size: 0.875rem;\n          color: #6c757d;\n          font-weight: 500;\n        }\n      }\n\n      .differences-list {\n        .difference-item {\n          border-bottom: 1px solid #f1f3f4;\n          padding: 1.5rem;\n\n          &:last-child {\n            border-bottom: none;\n          }\n\n          &.diff-added {\n            border-left: 4px solid #28a745;\n          }\n\n          &.diff-modified {\n            border-left: 4px solid #ffc107;\n          }\n\n          &.diff-removed {\n            border-left: 4px solid #dc3545;\n          }\n\n          .diff-header {\n            margin-bottom: 1rem;\n\n            .field-info {\n              display: flex;\n              align-items: center;\n              gap: 0.75rem;\n\n              .field-name {\n                font-size: 1rem;\n                color: #495057;\n              }\n\n              .badge {\n                font-size: 0.75rem;\n                \n                &.template-badge {\n                  background-color: #6f42c1;\n                }\n              }\n            }\n          }\n\n          .diff-content {\n            .side-by-side-diff {\n              display: grid;\n              grid-template-columns: 1fr 1fr;\n              gap: 1rem;\n\n              .diff-old,\n              .diff-new {\n                .diff-label {\n                  font-size: 0.875rem;\n                  font-weight: 600;\n                  margin-bottom: 0.5rem;\n                  color: #6c757d;\n                }\n\n                .diff-value {\n                  padding: 1rem;\n                  border-radius: 0.375rem;\n                  font-family: 'Fira Code', Monaco, Consolas, monospace;\n                  font-size: 0.875rem;\n                  line-height: 1.5;\n                  white-space: pre-wrap;\n                  word-break: break-word;\n\n                  &.old-value {\n                    background: #fff5f5;\n                    border: 1px solid #fed7d7;\n                    color: #c53030;\n                  }\n\n                  &.new-value {\n                    background: #f0fff4;\n                    border: 1px solid #9ae6b4;\n                    color: #2f855a;\n                  }\n\n                  .template-content {\n                    margin: 0;\n                    background: transparent;\n                    border: none;\n                    padding: 0;\n                    font-family: inherit;\n                    font-size: inherit;\n                    line-height: inherit;\n                    white-space: pre-wrap;\n                  }\n                }\n              }\n            }\n\n            .diff-added,\n            .diff-removed {\n              .diff-label {\n                font-size: 0.875rem;\n                font-weight: 600;\n                margin-bottom: 0.5rem;\n                color: #6c757d;\n              }\n\n              .diff-value {\n                padding: 1rem;\n                border-radius: 0.375rem;\n                font-family: 'Fira Code', Monaco, Consolas, monospace;\n                font-size: 0.875rem;\n                line-height: 1.5;\n                white-space: pre-wrap;\n                word-break: break-word;\n              }\n            }\n\n            .diff-added .diff-value {\n              background: #f0fff4;\n              border: 1px solid #9ae6b4;\n              color: #2f855a;\n            }\n\n            .diff-removed .diff-value {\n              background: #fff5f5;\n              border: 1px solid #fed7d7;\n              color: #c53030;\n            }\n          }\n        }\n      }\n\n      .no-differences {\n        text-align: center;\n        padding: 3rem 1rem;\n\n        i {\n          font-size: 3rem;\n          margin-bottom: 1rem;\n          display: block;\n        }\n\n        p {\n          margin: 0;\n          font-size: 1rem;\n        }\n      }\n    }\n  }\n\n  .details-container {\n    flex: 1;\n    padding: 1rem;\n    overflow-y: auto;\n\n    .version-details {\n      max-width: 800px;\n      margin: 0 auto;\n      background: white;\n      border: 1px solid #dee2e6;\n      border-radius: 0.5rem;\n      overflow: hidden;\n\n      .details-header {\n        padding: 1.5rem;\n        background: #f8f9fa;\n        border-bottom: 1px solid #dee2e6;\n\n        .details-title {\n          margin: 0 0 0.5rem 0;\n          color: #495057;\n          font-weight: 600;\n        }\n\n        .details-meta {\n          display: flex;\n          gap: 1rem;\n          font-size: 0.875rem;\n          color: #6c757d;\n          flex-wrap: wrap;\n        }\n      }\n\n      .details-content {\n        padding: 1.5rem;\n\n        .detail-section {\n          margin-bottom: 2rem;\n\n          &:last-child {\n            margin-bottom: 0;\n          }\n\n          .section-title {\n            margin: 0 0 1rem 0;\n            color: #495057;\n            font-weight: 600;\n            font-size: 1rem;\n            border-bottom: 1px solid #e9ecef;\n            padding-bottom: 0.5rem;\n          }\n\n          .detail-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n            gap: 1rem;\n\n            .detail-item {\n              display: flex;\n              flex-direction: column;\n              gap: 0.25rem;\n\n              .detail-label {\n                font-size: 0.875rem;\n                font-weight: 500;\n                color: #6c757d;\n              }\n\n              .detail-value {\n                font-size: 0.875rem;\n                color: #495057;\n                display: flex;\n                align-items: center;\n                gap: 0.5rem;\n              }\n            }\n          }\n\n          .json-viewer,\n          .template-viewer {\n            .json-content,\n            .template-content {\n              background: #f8f9fa;\n              border: 1px solid #dee2e6;\n              border-radius: 0.375rem;\n              padding: 1rem;\n              margin: 0;\n              font-family: 'Fira Code', Monaco, Consolas, monospace;\n              font-size: 0.875rem;\n              line-height: 1.5;\n              overflow-x: auto;\n              max-height: 400px;\n              overflow-y: auto;\n            }\n          }\n        }\n      }\n    }\n\n    .no-selection-message {\n      text-align: center;\n      padding: 3rem 1rem;\n      color: #6c757d;\n\n      i {\n        font-size: 3rem;\n        margin-bottom: 1rem;\n        display: block;\n        opacity: 0.5;\n      }\n\n      p {\n        margin: 0;\n        font-size: 1rem;\n        line-height: 1.5;\n      }\n    }\n  }\n\n  .error-container {\n    padding: 1rem;\n\n    .alert {\n      display: flex;\n      align-items: center;\n      gap: 0.5rem;\n    }\n  }\n}\n\n//[_ngcontent-%COMP%]   Responsive[_ngcontent-%COMP%]   adjustments\n@media[_ngcontent-%COMP%]   (max-width[_ngcontent-%COMP%]:   1200px)[_ngcontent-%COMP%] {\n  .prompt-version-control {\n    .version-toolbar {\n      .toolbar-section {\n        min-width: 100%;\n        justify-content: space-between;\n      }\n    }\n\n    .comparison-container {\n      .comparison-selectors {\n        flex-direction: column;\n        align-items: stretch;\n\n        .comparison-arrow {\n          align-self: center;\n          padding: 0.5rem 0;\n        }\n      }\n\n      .comparison-results {\n        .differences-list {\n          .difference-item {\n            .diff-content {\n              .side-by-side-diff {\n                grid-template-columns: 1fr;\n                gap: 0.5rem;\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}\n\n@media (max-width: 768px) {\n  .prompt-version-control[_ngcontent-%COMP%] {\n    .version-toolbar {\n      padding: 0.75rem;\n      \n      .toolbar-section {\n        flex-wrap: wrap;\n        gap: 0.5rem;\n      }\n    }\n\n    .timeline-container {\n      padding: 0.75rem;\n\n      .version-timeline {\n        .timeline-item {\n          .timeline-marker {\n            margin-right: 1rem;\n\n            .marker-icon {\n              width: 2rem;\n              height: 2rem;\n              font-size: 0.875rem;\n            }\n          }\n\n          .timeline-content {\n            padding: 1rem;\n\n            .version-header {\n              flex-direction: column;\n              align-items: flex-start;\n              gap: 0.75rem;\n\n              .version-actions {\n                align-self: flex-end;\n              }\n            }\n          }\n        }\n      }\n    }\n\n    .comparison-container,\n    .details-container {\n      padding: 0.75rem;\n    }\n  }\n\n  .prompt-selector-section[_ngcontent-%COMP%] {\n    padding: 2rem;\n    background: white;\n    border-radius: 8px;\n    margin: 1rem;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n\n    .section-title {\n      color: #495057;\n      display: flex;\n      align-items: center;\n      gap: 0.5rem;\n      font-weight: 600;\n      margin-bottom: 0.5rem;\n\n      i {\n        color: #007bff;\n      }\n    }\n\n    .prompt-selector {\n      .search-box {\n        .input-group-text {\n          background: #f8f9fa;\n          border-color: #ced4da;\n\n          i {\n            color: #6c757d;\n          }\n        }\n\n        .form-control {\n          border-color: #ced4da;\n\n          &:focus {\n            border-color: #007bff;\n            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);\n          }\n        }\n      }\n\n      .prompts-list {\n        max-height: 400px;\n        overflow-y: auto;\n        border: 1px solid #dee2e6;\n        border-radius: 4px;\n\n        .empty-state {\n          text-align: center;\n          padding: 2rem;\n\n          i {\n            font-size: 2rem;\n            margin-bottom: 0.5rem;\n          }\n        }\n\n        .prompt-item {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          padding: 0.75rem 1rem;\n          border-bottom: 1px solid #dee2e6;\n          cursor: pointer;\n          transition: background-color 0.2s;\n\n          &:last-child {\n            border-bottom: none;\n          }\n\n          &:hover {\n            background-color: #f8f9fa;\n          }\n\n          .prompt-info {\n            flex: 1;\n\n            .prompt-title {\n              margin: 0 0 0.25rem 0;\n              font-weight: 600;\n              color: #495057;\n            }\n\n            .prompt-description {\n              margin: 0;\n              font-size: 0.875rem;\n              color: #6c757d;\n              line-height: 1.4;\n            }\n          }\n\n          .prompt-actions {\n            color: #007bff;\n            opacity: 0.7;\n            transition: opacity 0.2s;\n          }\n\n          &:hover .prompt-actions {\n            opacity: 1;\n          }\n        }\n      }\n    }\n  }\n}"] });
 }
-PromptVersionControlComponent.ɵfac = function PromptVersionControlComponent_Factory(t) { return new (t || PromptVersionControlComponent)(i0.ɵɵdirectiveInject(i1.MJNotificationService)); };
-PromptVersionControlComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PromptVersionControlComponent, selectors: [["app-prompt-version-control"]], inputs: { prompt: "prompt", autoLoad: "autoLoad", showRestoreActions: "showRestoreActions", showComparison: "showComparison", maxVersions: "maxVersions" }, outputs: { versionSelected: "versionSelected", versionRestored: "versionRestored", versionCompared: "versionCompared" }, decls: 3, vars: 1, consts: [[1, "prompt-version-control"], [1, "prompt-selector-section"], [1, "section-title"], [1, "fa-solid", "fa-history"], [1, "text-muted", "mb-3"], [1, "prompt-selector"], [1, "search-box", "mb-3"], [1, "input-group"], [1, "input-group-text"], [1, "fa-solid", "fa-search"], ["type", "text", "placeholder", "Search prompts...", 1, "form-control", 3, "ngModelChange", "ngModel"], [1, "prompts-list"], [1, "empty-state"], [1, "fa-solid", "fa-comment-dots", "text-muted"], [1, "text-muted"], [1, "prompt-item"], [1, "prompt-item", 3, "click"], [1, "prompt-info"], [1, "prompt-title"], [1, "prompt-description"], [1, "prompt-actions"], [1, "fa-solid", "fa-arrow-right"], [1, "version-toolbar"], [1, "toolbar-section"], [1, "toolbar-title"], [1, "prompt-name"], [1, "view-mode-toggle"], ["role", "group", 1, "btn-group", "btn-group-sm"], ["type", "radio", "name", "view", "id", "timelineView", "value", "timeline", 1, "btn-check", 3, "ngModelChange", "ngModel"], ["for", "timelineView", 1, "btn", "btn-outline-primary"], [1, "fa-solid", "fa-timeline"], ["type", "radio", "name", "view", "id", "comparisonView", "value", "comparison", 1, "btn-check", 3, "ngModelChange", "ngModel"], ["for", "comparisonView", 1, "btn", "btn-outline-primary"], [1, "fa-solid", "fa-code-compare"], ["type", "radio", "name", "view", "id", "detailsView", "value", "details", 1, "btn-check", 3, "ngModelChange", "ngModel"], ["for", "detailsView", 1, "btn", "btn-outline-primary"], [1, "fa-solid", "fa-list"], [1, "filter-controls"], [1, "form-label"], [1, "form-select", "form-select-sm", 3, "ngModelChange", "ngModel"], ["value", "all"], ["value", "updates"], ["value", "major"], ["value", "template"], [1, "form-check", "form-switch"], ["type", "checkbox", "id", "showSystem", 1, "form-check-input", 3, "ngModelChange", "ngModel"], ["for", "showSystem", 1, "form-check-label"], [1, "search-controls"], ["type", "text", "placeholder", "Search changes...", 1, "form-control", "form-control-sm", 3, "ngModelChange", "ngModel"], [1, "action-buttons"], ["type", "button", 1, "btn", "btn-sm", "btn-outline-secondary", 3, "click", "title"], [1, "fa-solid"], ["type", "button", "title", "Refresh history", 1, "btn", "btn-sm", "btn-outline-secondary", 3, "click", "disabled"], [1, "fa-solid", "fa-refresh"], ["type", "button", "title", "Export history", 1, "btn", "btn-sm", "btn-outline-info", 3, "click"], [1, "fa-solid", "fa-download"], [1, "loading-container"], [1, "error-container"], [1, "loading-content"], ["role", "status", 1, "spinner-border", "text-primary"], [1, "visually-hidden"], [1, "loading-message"], [1, "timeline-container"], [1, "comparison-container"], [1, "details-container"], [1, "version-timeline"], [1, "no-versions-message"], [1, "timeline-item", 3, "selected", "active"], [1, "timeline-item", 3, "click"], [1, "timeline-marker"], [1, "marker-icon"], [1, "timeline-line"], [1, "timeline-content"], [1, "version-header"], [1, "version-info"], [1, "version-label"], [1, "version-meta"], [1, "change-date"], [1, "changed-by"], [1, "change-source", "badge"], [1, "version-actions"], ["type", "button", "title", "Compare with next version", 1, "btn", "btn-sm", "btn-outline-primary"], ["type", "button", "title", "Restore this version", 1, "btn", "btn-sm", "btn-outline-success"], [1, "version-description"], [1, "changes-summary"], ["type", "button", "title", "Compare with next version", 1, "btn", "btn-sm", "btn-outline-primary", 3, "click"], ["type", "button", "title", "Restore this version", 1, "btn", "btn-sm", "btn-outline-success", 3, "click"], [1, "fa-solid", "fa-undo"], [1, "changes-list"], [1, "change-item"], [1, "field-name"], [1, "change-arrow"], [1, "new-value"], [1, "old-value"], [1, "fa-solid", "fa-info-circle", "text-muted"], [1, "comparison-selectors"], [1, "selector-group"], [1, "form-select", 3, "ngModelChange", "ngModel"], [3, "ngValue"], [1, "comparison-arrow"], [1, "comparison-results"], [1, "comparison-header"], [1, "comparison-title"], [1, "changes-count"], [1, "differences-list"], [1, "no-differences"], [1, "difference-item", 3, "class"], [1, "difference-item"], [1, "diff-header"], [1, "field-info"], [1, "change-type", "badge"], [1, "template-badge", "badge", "badge-info"], [1, "diff-content"], [1, "side-by-side-diff"], [1, "diff-added"], [1, "diff-removed"], [1, "diff-old"], [1, "diff-label"], [1, "diff-value", "old-value"], [1, "template-content"], [1, "diff-new"], [1, "diff-value", "new-value"], [1, "fa-solid", "fa-check-circle", "text-success"], [1, "version-details"], [1, "no-selection-message"], [1, "details-header"], [1, "details-title"], [1, "details-meta"], [1, "details-content"], [1, "detail-section"], [1, "detail-grid"], [1, "detail-item"], [1, "detail-label"], [1, "detail-value"], [1, "json-viewer"], [1, "json-content"], [1, "template-viewer"], [1, "fa-solid", "fa-hand-pointer", "text-muted"], ["role", "alert", 1, "alert", "alert-danger"], [1, "fa-solid", "fa-exclamation-triangle"], ["type", "button", 1, "btn", "btn-sm", "btn-outline-danger", "ms-2", 3, "click"]], template: function PromptVersionControlComponent_Template(rf, ctx) { if (rf & 1) {
-        i0.ɵɵelementStart(0, "div", 0);
-        i0.ɵɵtemplate(1, PromptVersionControlComponent_Conditional_1_Template, 15, 2, "div", 1)(2, PromptVersionControlComponent_Conditional_2_Template, 53, 17);
-        i0.ɵɵelementEnd();
-    } if (rf & 2) {
-        i0.ɵɵadvance();
-        i0.ɵɵconditional(!ctx.prompt ? 1 : 2);
-    } }, dependencies: [i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.DefaultValueAccessor, i2.CheckboxControlValueAccessor, i2.SelectControlValueAccessor, i2.RadioControlValueAccessor, i2.NgControlStatus, i2.NgModel, i3.JsonPipe, i3.DatePipe], styles: [".prompt-version-control[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: #f8f9fa;\n\n  .version-toolbar {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 1rem;\n    background: white;\n    border-bottom: 1px solid #dee2e6;\n    flex-shrink: 0;\n    gap: 1rem;\n    flex-wrap: wrap;\n\n    .toolbar-section {\n      display: flex;\n      align-items: center;\n      gap: 1rem;\n      flex-wrap: wrap;\n\n      .toolbar-title {\n        margin: 0;\n        color: #495057;\n        display: flex;\n        align-items: center;\n        gap: 0.5rem;\n        font-weight: 600;\n\n        i {\n          color: #0d6efd;\n        }\n\n        .prompt-name {\n          font-weight: 400;\n          color: #6c757d;\n        }\n      }\n\n      .filter-controls,\n      .search-controls {\n        display: flex;\n        align-items: center;\n        gap: 0.5rem;\n\n        .form-label {\n          margin: 0;\n          font-size: 0.875rem;\n          color: #6c757d;\n          white-space: nowrap;\n        }\n\n        .form-select,\n        .form-control {\n          min-width: 120px;\n        }\n\n        .form-check {\n          margin: 0;\n          \n          .form-check-label {\n            font-size: 0.875rem;\n          }\n        }\n      }\n\n      .action-buttons {\n        display: flex;\n        gap: 0.5rem;\n\n        .btn {\n          font-size: 0.875rem;\n        }\n      }\n    }\n  }\n\n  .loading-container {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    .loading-content {\n      text-align: center;\n      \n      .loading-message {\n        margin-top: 1rem;\n        color: #6c757d;\n      }\n    }\n  }\n\n  .timeline-container {\n    flex: 1;\n    padding: 1rem;\n    overflow-y: auto;\n\n    .version-timeline {\n      max-width: 800px;\n      margin: 0 auto;\n\n      .timeline-item {\n        display: flex;\n        position: relative;\n        margin-bottom: 2rem;\n        cursor: pointer;\n        transition: all 0.2s ease;\n\n        &:hover {\n          .timeline-content {\n            box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);\n            transform: translateY(-1px);\n          }\n        }\n\n        &.selected {\n          .timeline-content {\n            border-color: #0d6efd;\n            box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);\n          }\n        }\n\n        &.active {\n          .timeline-marker .marker-icon {\n            border-color: #28a745;\n            background-color: #28a745;\n            color: white;\n          }\n        }\n\n        .timeline-marker {\n          display: flex;\n          flex-direction: column;\n          align-items: center;\n          margin-right: 1.5rem;\n          flex-shrink: 0;\n\n          .marker-icon {\n            width: 2.5rem;\n            height: 2.5rem;\n            border-radius: 50%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            border: 3px solid;\n            background: white;\n            font-size: 1rem;\n            z-index: 2;\n\n            &.change-create {\n              border-color: #28a745;\n              color: #28a745;\n            }\n\n            &.change-update {\n              border-color: #0d6efd;\n              color: #0d6efd;\n            }\n\n            &.change-delete {\n              border-color: #dc3545;\n              color: #dc3545;\n            }\n          }\n\n          .timeline-line {\n            width: 2px;\n            flex: 1;\n            background: #dee2e6;\n            margin-top: 0.5rem;\n            min-height: 2rem;\n          }\n        }\n\n        .timeline-content {\n          flex: 1;\n          background: white;\n          border: 1px solid #dee2e6;\n          border-radius: 0.5rem;\n          padding: 1.5rem;\n          transition: all 0.2s ease;\n\n          .version-header {\n            display: flex;\n            justify-content: space-between;\n            align-items: flex-start;\n            margin-bottom: 1rem;\n\n            .version-info {\n              .version-label {\n                margin: 0 0 0.5rem 0;\n                color: #495057;\n                font-weight: 600;\n              }\n\n              .version-meta {\n                display: flex;\n                align-items: center;\n                gap: 0.75rem;\n                font-size: 0.875rem;\n                color: #6c757d;\n                flex-wrap: wrap;\n\n                .change-date {\n                  font-weight: 500;\n                }\n\n                .badge {\n                  font-size: 0.75rem;\n                }\n              }\n            }\n\n            .version-actions {\n              display: flex;\n              gap: 0.5rem;\n\n              .btn {\n                padding: 0.25rem 0.5rem;\n                font-size: 0.75rem;\n              }\n            }\n          }\n\n          .version-description {\n            color: #495057;\n            margin-bottom: 1rem;\n            line-height: 1.5;\n          }\n\n          .changes-summary {\n            .changes-list {\n              .change-item {\n                display: flex;\n                align-items: center;\n                padding: 0.5rem;\n                background: #f8f9fa;\n                border-radius: 0.375rem;\n                margin-bottom: 0.5rem;\n                font-size: 0.875rem;\n\n                .field-name {\n                  font-weight: 500;\n                  color: #495057;\n                  margin-right: 0.75rem;\n                  min-width: 100px;\n                }\n\n                .change-arrow {\n                  display: flex;\n                  align-items: center;\n                  gap: 0.5rem;\n\n                  .old-value {\n                    color: #dc3545;\n                    text-decoration: line-through;\n                  }\n\n                  .new-value {\n                    color: #28a745;\n                    font-weight: 500;\n                  }\n\n                  i {\n                    color: #6c757d;\n                  }\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n\n    .no-versions-message {\n      text-align: center;\n      padding: 3rem 1rem;\n      color: #6c757d;\n\n      i {\n        font-size: 3rem;\n        margin-bottom: 1rem;\n        display: block;\n        opacity: 0.5;\n      }\n\n      p {\n        margin: 0.5rem 0;\n        font-size: 1rem;\n        line-height: 1.5;\n      }\n    }\n  }\n\n  .comparison-container {\n    flex: 1;\n    padding: 1rem;\n    overflow-y: auto;\n\n    .comparison-selectors {\n      display: flex;\n      align-items: end;\n      gap: 1rem;\n      margin-bottom: 2rem;\n      padding: 1rem;\n      background: white;\n      border: 1px solid #dee2e6;\n      border-radius: 0.5rem;\n\n      .selector-group {\n        flex: 1;\n\n        .form-label {\n          font-weight: 500;\n          color: #495057;\n        }\n      }\n\n      .comparison-arrow {\n        padding-bottom: 0.375rem;\n        color: #6c757d;\n        font-size: 1.25rem;\n      }\n    }\n\n    .comparison-results {\n      background: white;\n      border: 1px solid #dee2e6;\n      border-radius: 0.5rem;\n      overflow: hidden;\n\n      .comparison-header {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        padding: 1rem;\n        background: #f8f9fa;\n        border-bottom: 1px solid #dee2e6;\n\n        .comparison-title {\n          margin: 0;\n          color: #495057;\n          font-weight: 600;\n          display: flex;\n          align-items: center;\n          gap: 0.5rem;\n        }\n\n        .changes-count {\n          font-size: 0.875rem;\n          color: #6c757d;\n          font-weight: 500;\n        }\n      }\n\n      .differences-list {\n        .difference-item {\n          border-bottom: 1px solid #f1f3f4;\n          padding: 1.5rem;\n\n          &:last-child {\n            border-bottom: none;\n          }\n\n          &.diff-added {\n            border-left: 4px solid #28a745;\n          }\n\n          &.diff-modified {\n            border-left: 4px solid #ffc107;\n          }\n\n          &.diff-removed {\n            border-left: 4px solid #dc3545;\n          }\n\n          .diff-header {\n            margin-bottom: 1rem;\n\n            .field-info {\n              display: flex;\n              align-items: center;\n              gap: 0.75rem;\n\n              .field-name {\n                font-size: 1rem;\n                color: #495057;\n              }\n\n              .badge {\n                font-size: 0.75rem;\n                \n                &.template-badge {\n                  background-color: #6f42c1;\n                }\n              }\n            }\n          }\n\n          .diff-content {\n            .side-by-side-diff {\n              display: grid;\n              grid-template-columns: 1fr 1fr;\n              gap: 1rem;\n\n              .diff-old,\n              .diff-new {\n                .diff-label {\n                  font-size: 0.875rem;\n                  font-weight: 600;\n                  margin-bottom: 0.5rem;\n                  color: #6c757d;\n                }\n\n                .diff-value {\n                  padding: 1rem;\n                  border-radius: 0.375rem;\n                  font-family: 'Fira Code', Monaco, Consolas, monospace;\n                  font-size: 0.875rem;\n                  line-height: 1.5;\n                  white-space: pre-wrap;\n                  word-break: break-word;\n\n                  &.old-value {\n                    background: #fff5f5;\n                    border: 1px solid #fed7d7;\n                    color: #c53030;\n                  }\n\n                  &.new-value {\n                    background: #f0fff4;\n                    border: 1px solid #9ae6b4;\n                    color: #2f855a;\n                  }\n\n                  .template-content {\n                    margin: 0;\n                    background: transparent;\n                    border: none;\n                    padding: 0;\n                    font-family: inherit;\n                    font-size: inherit;\n                    line-height: inherit;\n                    white-space: pre-wrap;\n                  }\n                }\n              }\n            }\n\n            .diff-added,\n            .diff-removed {\n              .diff-label {\n                font-size: 0.875rem;\n                font-weight: 600;\n                margin-bottom: 0.5rem;\n                color: #6c757d;\n              }\n\n              .diff-value {\n                padding: 1rem;\n                border-radius: 0.375rem;\n                font-family: 'Fira Code', Monaco, Consolas, monospace;\n                font-size: 0.875rem;\n                line-height: 1.5;\n                white-space: pre-wrap;\n                word-break: break-word;\n              }\n            }\n\n            .diff-added .diff-value {\n              background: #f0fff4;\n              border: 1px solid #9ae6b4;\n              color: #2f855a;\n            }\n\n            .diff-removed .diff-value {\n              background: #fff5f5;\n              border: 1px solid #fed7d7;\n              color: #c53030;\n            }\n          }\n        }\n      }\n\n      .no-differences {\n        text-align: center;\n        padding: 3rem 1rem;\n\n        i {\n          font-size: 3rem;\n          margin-bottom: 1rem;\n          display: block;\n        }\n\n        p {\n          margin: 0;\n          font-size: 1rem;\n        }\n      }\n    }\n  }\n\n  .details-container {\n    flex: 1;\n    padding: 1rem;\n    overflow-y: auto;\n\n    .version-details {\n      max-width: 800px;\n      margin: 0 auto;\n      background: white;\n      border: 1px solid #dee2e6;\n      border-radius: 0.5rem;\n      overflow: hidden;\n\n      .details-header {\n        padding: 1.5rem;\n        background: #f8f9fa;\n        border-bottom: 1px solid #dee2e6;\n\n        .details-title {\n          margin: 0 0 0.5rem 0;\n          color: #495057;\n          font-weight: 600;\n        }\n\n        .details-meta {\n          display: flex;\n          gap: 1rem;\n          font-size: 0.875rem;\n          color: #6c757d;\n          flex-wrap: wrap;\n        }\n      }\n\n      .details-content {\n        padding: 1.5rem;\n\n        .detail-section {\n          margin-bottom: 2rem;\n\n          &:last-child {\n            margin-bottom: 0;\n          }\n\n          .section-title {\n            margin: 0 0 1rem 0;\n            color: #495057;\n            font-weight: 600;\n            font-size: 1rem;\n            border-bottom: 1px solid #e9ecef;\n            padding-bottom: 0.5rem;\n          }\n\n          .detail-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n            gap: 1rem;\n\n            .detail-item {\n              display: flex;\n              flex-direction: column;\n              gap: 0.25rem;\n\n              .detail-label {\n                font-size: 0.875rem;\n                font-weight: 500;\n                color: #6c757d;\n              }\n\n              .detail-value {\n                font-size: 0.875rem;\n                color: #495057;\n                display: flex;\n                align-items: center;\n                gap: 0.5rem;\n              }\n            }\n          }\n\n          .json-viewer,\n          .template-viewer {\n            .json-content,\n            .template-content {\n              background: #f8f9fa;\n              border: 1px solid #dee2e6;\n              border-radius: 0.375rem;\n              padding: 1rem;\n              margin: 0;\n              font-family: 'Fira Code', Monaco, Consolas, monospace;\n              font-size: 0.875rem;\n              line-height: 1.5;\n              overflow-x: auto;\n              max-height: 400px;\n              overflow-y: auto;\n            }\n          }\n        }\n      }\n    }\n\n    .no-selection-message {\n      text-align: center;\n      padding: 3rem 1rem;\n      color: #6c757d;\n\n      i {\n        font-size: 3rem;\n        margin-bottom: 1rem;\n        display: block;\n        opacity: 0.5;\n      }\n\n      p {\n        margin: 0;\n        font-size: 1rem;\n        line-height: 1.5;\n      }\n    }\n  }\n\n  .error-container {\n    padding: 1rem;\n\n    .alert {\n      display: flex;\n      align-items: center;\n      gap: 0.5rem;\n    }\n  }\n}\n\n//[_ngcontent-%COMP%]   Responsive[_ngcontent-%COMP%]   adjustments\n@media[_ngcontent-%COMP%]   (max-width[_ngcontent-%COMP%]:   1200px)[_ngcontent-%COMP%] {\n  .prompt-version-control {\n    .version-toolbar {\n      .toolbar-section {\n        min-width: 100%;\n        justify-content: space-between;\n      }\n    }\n\n    .comparison-container {\n      .comparison-selectors {\n        flex-direction: column;\n        align-items: stretch;\n\n        .comparison-arrow {\n          align-self: center;\n          padding: 0.5rem 0;\n        }\n      }\n\n      .comparison-results {\n        .differences-list {\n          .difference-item {\n            .diff-content {\n              .side-by-side-diff {\n                grid-template-columns: 1fr;\n                gap: 0.5rem;\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}\n\n@media (max-width: 768px) {\n  .prompt-version-control[_ngcontent-%COMP%] {\n    .version-toolbar {\n      padding: 0.75rem;\n      \n      .toolbar-section {\n        flex-wrap: wrap;\n        gap: 0.5rem;\n      }\n    }\n\n    .timeline-container {\n      padding: 0.75rem;\n\n      .version-timeline {\n        .timeline-item {\n          .timeline-marker {\n            margin-right: 1rem;\n\n            .marker-icon {\n              width: 2rem;\n              height: 2rem;\n              font-size: 0.875rem;\n            }\n          }\n\n          .timeline-content {\n            padding: 1rem;\n\n            .version-header {\n              flex-direction: column;\n              align-items: flex-start;\n              gap: 0.75rem;\n\n              .version-actions {\n                align-self: flex-end;\n              }\n            }\n          }\n        }\n      }\n    }\n\n    .comparison-container,\n    .details-container {\n      padding: 0.75rem;\n    }\n  }\n\n  .prompt-selector-section[_ngcontent-%COMP%] {\n    padding: 2rem;\n    background: white;\n    border-radius: 8px;\n    margin: 1rem;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n\n    .section-title {\n      color: #495057;\n      display: flex;\n      align-items: center;\n      gap: 0.5rem;\n      font-weight: 600;\n      margin-bottom: 0.5rem;\n\n      i {\n        color: #007bff;\n      }\n    }\n\n    .prompt-selector {\n      .search-box {\n        .input-group-text {\n          background: #f8f9fa;\n          border-color: #ced4da;\n\n          i {\n            color: #6c757d;\n          }\n        }\n\n        .form-control {\n          border-color: #ced4da;\n\n          &:focus {\n            border-color: #007bff;\n            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);\n          }\n        }\n      }\n\n      .prompts-list {\n        max-height: 400px;\n        overflow-y: auto;\n        border: 1px solid #dee2e6;\n        border-radius: 4px;\n\n        .empty-state {\n          text-align: center;\n          padding: 2rem;\n\n          i {\n            font-size: 2rem;\n            margin-bottom: 0.5rem;\n          }\n        }\n\n        .prompt-item {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          padding: 0.75rem 1rem;\n          border-bottom: 1px solid #dee2e6;\n          cursor: pointer;\n          transition: background-color 0.2s;\n\n          &:last-child {\n            border-bottom: none;\n          }\n\n          &:hover {\n            background-color: #f8f9fa;\n          }\n\n          .prompt-info {\n            flex: 1;\n\n            .prompt-title {\n              margin: 0 0 0.25rem 0;\n              font-weight: 600;\n              color: #495057;\n            }\n\n            .prompt-description {\n              margin: 0;\n              font-size: 0.875rem;\n              color: #6c757d;\n              line-height: 1.4;\n            }\n          }\n\n          .prompt-actions {\n            color: #007bff;\n            opacity: 0.7;\n            transition: opacity 0.2s;\n          }\n\n          &:hover .prompt-actions {\n            opacity: 1;\n          }\n        }\n      }\n    }\n  }\n}"] });
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PromptVersionControlComponent, [{
         type: Component,
         args: [{ selector: 'app-prompt-version-control', template: "<div class=\"prompt-version-control\">\n  <!-- Prompt Selector (when no prompt selected) -->\n  @if (!prompt) {\n    <div class=\"prompt-selector-section\">\n      <h5 class=\"section-title\">\n        <i class=\"fa-solid fa-history\"></i>\n        Version History\n      </h5>\n      <p class=\"text-muted mb-3\">Select a prompt to view its version history</p>\n      \n      <div class=\"prompt-selector\">\n        <div class=\"search-box mb-3\">\n          <div class=\"input-group\">\n            <span class=\"input-group-text\">\n              <i class=\"fa-solid fa-search\"></i>\n            </span>\n            <input \n              type=\"text\" \n              class=\"form-control\" \n              placeholder=\"Search prompts...\"\n              [ngModel]=\"promptSearchTerm$.value\"\n              (ngModelChange)=\"onPromptSearchChange($event)\">\n          </div>\n        </div>\n        \n        <div class=\"prompts-list\">\n          @if (availablePrompts.length === 0) {\n            <div class=\"empty-state\">\n              <i class=\"fa-solid fa-comment-dots text-muted\"></i>\n              <p class=\"text-muted\">No prompts available</p>\n            </div>\n          } @else {\n            @for (promptItem of filteredAvailablePrompts; track promptItem.ID) {\n              <div class=\"prompt-item\" (click)=\"selectPromptForHistory(promptItem)\">\n                <div class=\"prompt-info\">\n                  <h6 class=\"prompt-title\">{{ promptItem.Name }}</h6>\n                  @if (promptItem.Description) {\n                    <p class=\"prompt-description\">{{ promptItem.Description }}</p>\n                  }\n                </div>\n                <div class=\"prompt-actions\">\n                  <i class=\"fa-solid fa-arrow-right\"></i>\n                </div>\n              </div>\n            }\n          }\n        </div>\n      </div>\n    </div>\n  } @else {\n    <!-- Header toolbar -->\n    <div class=\"version-toolbar\">\n    <div class=\"toolbar-section\">\n      <h5 class=\"toolbar-title\">\n        <i class=\"fa-solid fa-history\"></i>\n        Version History\n        @if (prompt) {\n          <span class=\"prompt-name\">- {{ prompt.Name }}</span>\n        }\n      </h5>\n      \n      <div class=\"view-mode-toggle\">\n        <div class=\"btn-group btn-group-sm\" role=\"group\">\n          <input type=\"radio\" class=\"btn-check\" name=\"view\" id=\"timelineView\" value=\"timeline\" [(ngModel)]=\"currentView\" (ngModelChange)=\"onViewChange($event)\">\n          <label class=\"btn btn-outline-primary\" for=\"timelineView\">\n            <i class=\"fa-solid fa-timeline\"></i>\n            Timeline\n          </label>\n          \n          <input type=\"radio\" class=\"btn-check\" name=\"view\" id=\"comparisonView\" value=\"comparison\" [(ngModel)]=\"currentView\" (ngModelChange)=\"onViewChange($event)\">\n          <label class=\"btn btn-outline-primary\" for=\"comparisonView\">\n            <i class=\"fa-solid fa-code-compare\"></i>\n            Compare\n          </label>\n          \n          <input type=\"radio\" class=\"btn-check\" name=\"view\" id=\"detailsView\" value=\"details\" [(ngModel)]=\"currentView\" (ngModelChange)=\"onViewChange($event)\">\n          <label class=\"btn btn-outline-primary\" for=\"detailsView\">\n            <i class=\"fa-solid fa-list\"></i>\n            Details\n          </label>\n        </div>\n      </div>\n    </div>\n    \n    <div class=\"toolbar-section\">\n      <div class=\"filter-controls\">\n        <label class=\"form-label\">Filter:</label>\n        <select class=\"form-select form-select-sm\" [(ngModel)]=\"filterBy\" (ngModelChange)=\"onFilterChange($event)\">\n          <option value=\"all\">All Changes</option>\n          <option value=\"updates\">Updates Only</option>\n          <option value=\"major\">Major Changes</option>\n          <option value=\"template\">Template Changes</option>\n        </select>\n        \n        <div class=\"form-check form-switch\">\n          <input class=\"form-check-input\" type=\"checkbox\" id=\"showSystem\" [(ngModel)]=\"showSystemChanges\" (ngModelChange)=\"applyFiltersPublic()\">\n          <label class=\"form-check-label\" for=\"showSystem\">System</label>\n        </div>\n      </div>\n      \n      <div class=\"search-controls\">\n        <input \n          type=\"text\" \n          class=\"form-control form-control-sm\" \n          placeholder=\"Search changes...\"\n          [ngModel]=\"searchTerm$.value\" (ngModelChange)=\"onSearchChange($event)\">\n      </div>\n    </div>\n    \n    <div class=\"toolbar-section\">\n      <div class=\"action-buttons\">\n        <button type=\"button\" class=\"btn btn-sm btn-outline-secondary\" (click)=\"onSortDirectionChange()\" [title]=\"'Sort ' + (sortDirection === 'asc' ? 'descending' : 'ascending')\">\n          <i class=\"fa-solid\" [class.fa-sort-up]=\"sortDirection === 'asc'\" [class.fa-sort-down]=\"sortDirection === 'desc'\"></i>\n          Sort\n        </button>\n        \n        <button type=\"button\" class=\"btn btn-sm btn-outline-secondary\" (click)=\"refreshHistory()\" [disabled]=\"isLoading\" title=\"Refresh history\">\n          <i class=\"fa-solid fa-refresh\" [class.fa-spin]=\"isLoading\"></i>\n          Refresh\n        </button>\n        \n        <button type=\"button\" class=\"btn btn-sm btn-outline-info\" (click)=\"exportVersionHistory()\" title=\"Export history\">\n          <i class=\"fa-solid fa-download\"></i>\n          Export\n        </button>\n      </div>\n    </div>\n  </div>\n  \n  <!-- Loading state -->\n  @if (isLoading) {\n    <div class=\"loading-container\">\n      <div class=\"loading-content\">\n        <div class=\"spinner-border text-primary\" role=\"status\">\n          <span class=\"visually-hidden\">Loading...</span>\n        </div>\n        <p class=\"loading-message\">{{ loadingMessage }}</p>\n      </div>\n    </div>\n  } @else {\n    \n    <!-- Timeline View -->\n    @if (currentView === 'timeline') {\n      <div class=\"timeline-container\">\n        @if (versions.length > 0) {\n          <div class=\"version-timeline\">\n            @for (version of versions; track version.id; let i = $index) {\n              <div class=\"timeline-item\" \n                   [class.selected]=\"selectedVersion?.id === version.id\"\n                   [class.active]=\"version.isActive\"\n                   (click)=\"onVersionSelect(version)\">\n                \n                <div class=\"timeline-marker\">\n                  <div class=\"marker-icon\" [class]=\"getChangeTypeClass(version.changeType)\">\n                    <i class=\"fa-solid\" [class]=\"getChangeTypeIcon(version.changeType)\"></i>\n                  </div>\n                  @if (i < versions.length - 1) {\n                    <div class=\"timeline-line\"></div>\n                  }\n                </div>\n                \n                <div class=\"timeline-content\">\n                  <div class=\"version-header\">\n                    <div class=\"version-info\">\n                      <h6 class=\"version-label\">{{ getVersionLabel(version) }}</h6>\n                      <div class=\"version-meta\">\n                        <span class=\"change-date\">{{ version.changedAt | date:'medium' }}</span>\n                        <span class=\"changed-by\">by {{ version.changedBy }}</span>\n                        <span class=\"change-source badge\" [class.badge-primary]=\"version.changeSource === 'Internal'\" [class.badge-secondary]=\"version.changeSource === 'External'\">\n                          {{ version.changeSource }}\n                        </span>\n                      </div>\n                    </div>\n                    \n                    <div class=\"version-actions\">\n                      @if (showComparison && i < versions.length - 1) {\n                        <button \n                          type=\"button\" \n                          class=\"btn btn-sm btn-outline-primary\"\n                          (click)=\"$event.stopPropagation(); startComparison(version)\"\n                          title=\"Compare with next version\">\n                          <i class=\"fa-solid fa-code-compare\"></i>\n                        </button>\n                      }\n                      \n                      @if (showRestoreActions && version.canRestore) {\n                        <button \n                          type=\"button\" \n                          class=\"btn btn-sm btn-outline-success\"\n                          (click)=\"$event.stopPropagation(); onVersionRestore(version)\"\n                          title=\"Restore this version\">\n                          <i class=\"fa-solid fa-undo\"></i>\n                        </button>\n                      }\n                    </div>\n                  </div>\n                  \n                  <div class=\"version-description\">\n                    {{ version.changesDescription }}\n                  </div>\n                  \n                  @if (version.changesJSON && timelineConfig.showDiffs) {\n                    <div class=\"changes-summary\">\n                      <div class=\"changes-list\">\n                        @for (field of getObjectKeys(version.changesJSON); track field) {\n                          <div class=\"change-item\">\n                            <span class=\"field-name\">{{ getFieldDisplayNamePublic(field) }}</span>\n                            @if (version.changesJSON[field].oldValue !== undefined) {\n                              <span class=\"change-arrow\">\n                                <span class=\"old-value\">{{ formatChangeValue(version.changesJSON[field].oldValue) }}</span>\n                                <i class=\"fa-solid fa-arrow-right\"></i>\n                                <span class=\"new-value\">{{ formatChangeValue(version.changesJSON[field].newValue) }}</span>\n                              </span>\n                            } @else {\n                              <span class=\"new-value\">{{ formatChangeValue(version.changesJSON[field].newValue) }}</span>\n                            }\n                          </div>\n                        }\n                      </div>\n                    </div>\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        } @else {\n          <div class=\"no-versions-message\">\n            <i class=\"fa-solid fa-info-circle text-muted\"></i>\n            <p class=\"text-muted\">No version history available for this prompt.</p>\n            @if (prompt && !prompt.EntityInfo.TrackRecordChanges) {\n              <p class=\"text-muted\"><small>Record changes tracking may not be enabled for prompts.</small></p>\n            }\n          </div>\n        }\n      </div>\n    }\n    \n    <!-- Comparison View -->\n    @if (currentView === 'comparison') {\n      <div class=\"comparison-container\">\n        <!-- Version selectors -->\n        <div class=\"comparison-selectors\">\n          <div class=\"selector-group\">\n            <label class=\"form-label\">Compare from:</label>\n            <select class=\"form-select\" [(ngModel)]=\"compareFromVersion\" (ngModelChange)=\"generateComparisonPublic()\">\n              @for (version of versions; track version.id) {\n                <option [ngValue]=\"version\">{{ getVersionLabel(version) }} - {{ version.changedAt | date:'short' }}</option>\n              }\n            </select>\n          </div>\n          \n          <div class=\"comparison-arrow\">\n            <i class=\"fa-solid fa-arrow-right\"></i>\n          </div>\n          \n          <div class=\"selector-group\">\n            <label class=\"form-label\">Compare to:</label>\n            <select class=\"form-select\" [(ngModel)]=\"compareToVersion\" (ngModelChange)=\"generateComparisonPublic()\">\n              @for (version of versions; track version.id) {\n                <option [ngValue]=\"version\">{{ getVersionLabel(version) }} - {{ version.changedAt | date:'short' }}</option>\n              }\n            </select>\n          </div>\n        </div>\n        \n        <!-- Comparison results -->\n        @if (comparisonResult) {\n          <div class=\"comparison-results\">\n            <div class=\"comparison-header\">\n              <h6 class=\"comparison-title\">\n                <i class=\"fa-solid fa-code-compare\"></i>\n                Changes between {{ getVersionLabel(comparisonResult.fromVersion) }} and {{ getVersionLabel(comparisonResult.toVersion) }}\n              </h6>\n              <div class=\"changes-count\">\n                {{ comparisonResult.differences.length }} change(s) found\n              </div>\n            </div>\n            \n            @if (comparisonResult.differences.length > 0) {\n              <div class=\"differences-list\">\n                @for (diff of comparisonResult.differences; track diff.fieldName) {\n                  <div class=\"difference-item\" [class]=\"'diff-' + diff.changeType\">\n                    <div class=\"diff-header\">\n                      <div class=\"field-info\">\n                        <strong class=\"field-name\">{{ diff.displayName }}</strong>\n                        <span class=\"change-type badge\" \n                              [class.badge-success]=\"diff.changeType === 'added'\"\n                              [class.badge-warning]=\"diff.changeType === 'modified'\"\n                              [class.badge-danger]=\"diff.changeType === 'removed'\">\n                          {{ diff.changeType }}\n                        </span>\n                        @if (diff.isTemplate) {\n                          <span class=\"template-badge badge badge-info\">Template</span>\n                        }\n                      </div>\n                    </div>\n                    \n                    <div class=\"diff-content\">\n                      @if (diff.changeType === 'modified') {\n                        <div class=\"side-by-side-diff\">\n                          <div class=\"diff-old\">\n                            <h6 class=\"diff-label\">Before:</h6>\n                            <div class=\"diff-value old-value\">\n                              @if (diff.isTemplate && diff.fieldName === 'TemplateText') {\n                                <pre class=\"template-content\">{{ diff.oldValue }}</pre>\n                              } @else {\n                                {{ formatChangeValue(diff.oldValue) }}\n                              }\n                            </div>\n                          </div>\n                          \n                          <div class=\"diff-new\">\n                            <h6 class=\"diff-label\">After:</h6>\n                            <div class=\"diff-value new-value\">\n                              @if (diff.isTemplate && diff.fieldName === 'TemplateText') {\n                                <pre class=\"template-content\">{{ diff.newValue }}</pre>\n                              } @else {\n                                {{ formatChangeValue(diff.newValue) }}\n                              }\n                            </div>\n                          </div>\n                        </div>\n                      } @else if (diff.changeType === 'added') {\n                        <div class=\"diff-added\">\n                          <h6 class=\"diff-label\">Added:</h6>\n                          <div class=\"diff-value new-value\">{{ formatChangeValue(diff.newValue) }}</div>\n                        </div>\n                      } @else if (diff.changeType === 'removed') {\n                        <div class=\"diff-removed\">\n                          <h6 class=\"diff-label\">Removed:</h6>\n                          <div class=\"diff-value old-value\">{{ formatChangeValue(diff.oldValue) }}</div>\n                        </div>\n                      }\n                    </div>\n                  </div>\n                }\n              </div>\n            } @else {\n              <div class=\"no-differences\">\n                <i class=\"fa-solid fa-check-circle text-success\"></i>\n                <p class=\"text-muted\">No differences found between the selected versions.</p>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n    \n    <!-- Details View -->\n    @if (currentView === 'details') {\n      <div class=\"details-container\">\n        @if (selectedVersion) {\n          <div class=\"version-details\">\n            <div class=\"details-header\">\n              <h6 class=\"details-title\">{{ getVersionLabel(selectedVersion) }}</h6>\n              <div class=\"details-meta\">\n                <span class=\"change-date\">{{ selectedVersion.changedAt | date:'full' }}</span>\n                <span class=\"changed-by\">Changed by {{ selectedVersion.changedBy }}</span>\n              </div>\n            </div>\n            \n            <div class=\"details-content\">\n              <div class=\"detail-section\">\n                <h6 class=\"section-title\">Change Information</h6>\n                <div class=\"detail-grid\">\n                  <div class=\"detail-item\">\n                    <span class=\"detail-label\">Type:</span>\n                    <span class=\"detail-value\">\n                      <i class=\"fa-solid\" [class]=\"getChangeTypeIcon(selectedVersion.changeType)\"></i>\n                      {{ selectedVersion.changeType }}\n                    </span>\n                  </div>\n                  \n                  <div class=\"detail-item\">\n                    <span class=\"detail-label\">Source:</span>\n                    <span class=\"detail-value\">{{ selectedVersion.changeSource }}</span>\n                  </div>\n                  \n                  <div class=\"detail-item\">\n                    <span class=\"detail-label\">Description:</span>\n                    <span class=\"detail-value\">{{ selectedVersion.changesDescription }}</span>\n                  </div>\n                </div>\n              </div>\n              \n              @if (selectedVersion.fullRecordJSON) {\n                <div class=\"detail-section\">\n                  <h6 class=\"section-title\">Record State</h6>\n                  <div class=\"json-viewer\">\n                    <pre class=\"json-content\">{{ selectedVersion.fullRecordJSON | json }}</pre>\n                  </div>\n                </div>\n              }\n              \n              @if (selectedVersion.templateContent) {\n                <div class=\"detail-section\">\n                  <h6 class=\"section-title\">Template Content</h6>\n                  <div class=\"template-viewer\">\n                    <pre class=\"template-content\">{{ selectedVersion.templateContent.TemplateText }}</pre>\n                  </div>\n                </div>\n              }\n            </div>\n          </div>\n        } @else {\n          <div class=\"no-selection-message\">\n            <i class=\"fa-solid fa-hand-pointer text-muted\"></i>\n            <p class=\"text-muted\">Select a version from the timeline to view details.</p>\n          </div>\n        }\n      </div>\n    }\n  }\n  \n  <!-- Error state -->\n  @if (error) {\n    <div class=\"error-container\">\n      <div class=\"alert alert-danger\" role=\"alert\">\n        <i class=\"fa-solid fa-exclamation-triangle\"></i>\n        {{ error }}\n        <button type=\"button\" class=\"btn btn-sm btn-outline-danger ms-2\" (click)=\"refreshHistory()\">\n          <i class=\"fa-solid fa-refresh\"></i>\n          Retry\n        </button>\n      </div>\n    </div>\n  }\n  }\n</div>", styles: [".prompt-version-control {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: #f8f9fa;\n\n  .version-toolbar {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 1rem;\n    background: white;\n    border-bottom: 1px solid #dee2e6;\n    flex-shrink: 0;\n    gap: 1rem;\n    flex-wrap: wrap;\n\n    .toolbar-section {\n      display: flex;\n      align-items: center;\n      gap: 1rem;\n      flex-wrap: wrap;\n\n      .toolbar-title {\n        margin: 0;\n        color: #495057;\n        display: flex;\n        align-items: center;\n        gap: 0.5rem;\n        font-weight: 600;\n\n        i {\n          color: #0d6efd;\n        }\n\n        .prompt-name {\n          font-weight: 400;\n          color: #6c757d;\n        }\n      }\n\n      .filter-controls,\n      .search-controls {\n        display: flex;\n        align-items: center;\n        gap: 0.5rem;\n\n        .form-label {\n          margin: 0;\n          font-size: 0.875rem;\n          color: #6c757d;\n          white-space: nowrap;\n        }\n\n        .form-select,\n        .form-control {\n          min-width: 120px;\n        }\n\n        .form-check {\n          margin: 0;\n          \n          .form-check-label {\n            font-size: 0.875rem;\n          }\n        }\n      }\n\n      .action-buttons {\n        display: flex;\n        gap: 0.5rem;\n\n        .btn {\n          font-size: 0.875rem;\n        }\n      }\n    }\n  }\n\n  .loading-container {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    .loading-content {\n      text-align: center;\n      \n      .loading-message {\n        margin-top: 1rem;\n        color: #6c757d;\n      }\n    }\n  }\n\n  .timeline-container {\n    flex: 1;\n    padding: 1rem;\n    overflow-y: auto;\n\n    .version-timeline {\n      max-width: 800px;\n      margin: 0 auto;\n\n      .timeline-item {\n        display: flex;\n        position: relative;\n        margin-bottom: 2rem;\n        cursor: pointer;\n        transition: all 0.2s ease;\n\n        &:hover {\n          .timeline-content {\n            box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);\n            transform: translateY(-1px);\n          }\n        }\n\n        &.selected {\n          .timeline-content {\n            border-color: #0d6efd;\n            box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);\n          }\n        }\n\n        &.active {\n          .timeline-marker .marker-icon {\n            border-color: #28a745;\n            background-color: #28a745;\n            color: white;\n          }\n        }\n\n        .timeline-marker {\n          display: flex;\n          flex-direction: column;\n          align-items: center;\n          margin-right: 1.5rem;\n          flex-shrink: 0;\n\n          .marker-icon {\n            width: 2.5rem;\n            height: 2.5rem;\n            border-radius: 50%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            border: 3px solid;\n            background: white;\n            font-size: 1rem;\n            z-index: 2;\n\n            &.change-create {\n              border-color: #28a745;\n              color: #28a745;\n            }\n\n            &.change-update {\n              border-color: #0d6efd;\n              color: #0d6efd;\n            }\n\n            &.change-delete {\n              border-color: #dc3545;\n              color: #dc3545;\n            }\n          }\n\n          .timeline-line {\n            width: 2px;\n            flex: 1;\n            background: #dee2e6;\n            margin-top: 0.5rem;\n            min-height: 2rem;\n          }\n        }\n\n        .timeline-content {\n          flex: 1;\n          background: white;\n          border: 1px solid #dee2e6;\n          border-radius: 0.5rem;\n          padding: 1.5rem;\n          transition: all 0.2s ease;\n\n          .version-header {\n            display: flex;\n            justify-content: space-between;\n            align-items: flex-start;\n            margin-bottom: 1rem;\n\n            .version-info {\n              .version-label {\n                margin: 0 0 0.5rem 0;\n                color: #495057;\n                font-weight: 600;\n              }\n\n              .version-meta {\n                display: flex;\n                align-items: center;\n                gap: 0.75rem;\n                font-size: 0.875rem;\n                color: #6c757d;\n                flex-wrap: wrap;\n\n                .change-date {\n                  font-weight: 500;\n                }\n\n                .badge {\n                  font-size: 0.75rem;\n                }\n              }\n            }\n\n            .version-actions {\n              display: flex;\n              gap: 0.5rem;\n\n              .btn {\n                padding: 0.25rem 0.5rem;\n                font-size: 0.75rem;\n              }\n            }\n          }\n\n          .version-description {\n            color: #495057;\n            margin-bottom: 1rem;\n            line-height: 1.5;\n          }\n\n          .changes-summary {\n            .changes-list {\n              .change-item {\n                display: flex;\n                align-items: center;\n                padding: 0.5rem;\n                background: #f8f9fa;\n                border-radius: 0.375rem;\n                margin-bottom: 0.5rem;\n                font-size: 0.875rem;\n\n                .field-name {\n                  font-weight: 500;\n                  color: #495057;\n                  margin-right: 0.75rem;\n                  min-width: 100px;\n                }\n\n                .change-arrow {\n                  display: flex;\n                  align-items: center;\n                  gap: 0.5rem;\n\n                  .old-value {\n                    color: #dc3545;\n                    text-decoration: line-through;\n                  }\n\n                  .new-value {\n                    color: #28a745;\n                    font-weight: 500;\n                  }\n\n                  i {\n                    color: #6c757d;\n                  }\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n\n    .no-versions-message {\n      text-align: center;\n      padding: 3rem 1rem;\n      color: #6c757d;\n\n      i {\n        font-size: 3rem;\n        margin-bottom: 1rem;\n        display: block;\n        opacity: 0.5;\n      }\n\n      p {\n        margin: 0.5rem 0;\n        font-size: 1rem;\n        line-height: 1.5;\n      }\n    }\n  }\n\n  .comparison-container {\n    flex: 1;\n    padding: 1rem;\n    overflow-y: auto;\n\n    .comparison-selectors {\n      display: flex;\n      align-items: end;\n      gap: 1rem;\n      margin-bottom: 2rem;\n      padding: 1rem;\n      background: white;\n      border: 1px solid #dee2e6;\n      border-radius: 0.5rem;\n\n      .selector-group {\n        flex: 1;\n\n        .form-label {\n          font-weight: 500;\n          color: #495057;\n        }\n      }\n\n      .comparison-arrow {\n        padding-bottom: 0.375rem;\n        color: #6c757d;\n        font-size: 1.25rem;\n      }\n    }\n\n    .comparison-results {\n      background: white;\n      border: 1px solid #dee2e6;\n      border-radius: 0.5rem;\n      overflow: hidden;\n\n      .comparison-header {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        padding: 1rem;\n        background: #f8f9fa;\n        border-bottom: 1px solid #dee2e6;\n\n        .comparison-title {\n          margin: 0;\n          color: #495057;\n          font-weight: 600;\n          display: flex;\n          align-items: center;\n          gap: 0.5rem;\n        }\n\n        .changes-count {\n          font-size: 0.875rem;\n          color: #6c757d;\n          font-weight: 500;\n        }\n      }\n\n      .differences-list {\n        .difference-item {\n          border-bottom: 1px solid #f1f3f4;\n          padding: 1.5rem;\n\n          &:last-child {\n            border-bottom: none;\n          }\n\n          &.diff-added {\n            border-left: 4px solid #28a745;\n          }\n\n          &.diff-modified {\n            border-left: 4px solid #ffc107;\n          }\n\n          &.diff-removed {\n            border-left: 4px solid #dc3545;\n          }\n\n          .diff-header {\n            margin-bottom: 1rem;\n\n            .field-info {\n              display: flex;\n              align-items: center;\n              gap: 0.75rem;\n\n              .field-name {\n                font-size: 1rem;\n                color: #495057;\n              }\n\n              .badge {\n                font-size: 0.75rem;\n                \n                &.template-badge {\n                  background-color: #6f42c1;\n                }\n              }\n            }\n          }\n\n          .diff-content {\n            .side-by-side-diff {\n              display: grid;\n              grid-template-columns: 1fr 1fr;\n              gap: 1rem;\n\n              .diff-old,\n              .diff-new {\n                .diff-label {\n                  font-size: 0.875rem;\n                  font-weight: 600;\n                  margin-bottom: 0.5rem;\n                  color: #6c757d;\n                }\n\n                .diff-value {\n                  padding: 1rem;\n                  border-radius: 0.375rem;\n                  font-family: 'Fira Code', Monaco, Consolas, monospace;\n                  font-size: 0.875rem;\n                  line-height: 1.5;\n                  white-space: pre-wrap;\n                  word-break: break-word;\n\n                  &.old-value {\n                    background: #fff5f5;\n                    border: 1px solid #fed7d7;\n                    color: #c53030;\n                  }\n\n                  &.new-value {\n                    background: #f0fff4;\n                    border: 1px solid #9ae6b4;\n                    color: #2f855a;\n                  }\n\n                  .template-content {\n                    margin: 0;\n                    background: transparent;\n                    border: none;\n                    padding: 0;\n                    font-family: inherit;\n                    font-size: inherit;\n                    line-height: inherit;\n                    white-space: pre-wrap;\n                  }\n                }\n              }\n            }\n\n            .diff-added,\n            .diff-removed {\n              .diff-label {\n                font-size: 0.875rem;\n                font-weight: 600;\n                margin-bottom: 0.5rem;\n                color: #6c757d;\n              }\n\n              .diff-value {\n                padding: 1rem;\n                border-radius: 0.375rem;\n                font-family: 'Fira Code', Monaco, Consolas, monospace;\n                font-size: 0.875rem;\n                line-height: 1.5;\n                white-space: pre-wrap;\n                word-break: break-word;\n              }\n            }\n\n            .diff-added .diff-value {\n              background: #f0fff4;\n              border: 1px solid #9ae6b4;\n              color: #2f855a;\n            }\n\n            .diff-removed .diff-value {\n              background: #fff5f5;\n              border: 1px solid #fed7d7;\n              color: #c53030;\n            }\n          }\n        }\n      }\n\n      .no-differences {\n        text-align: center;\n        padding: 3rem 1rem;\n\n        i {\n          font-size: 3rem;\n          margin-bottom: 1rem;\n          display: block;\n        }\n\n        p {\n          margin: 0;\n          font-size: 1rem;\n        }\n      }\n    }\n  }\n\n  .details-container {\n    flex: 1;\n    padding: 1rem;\n    overflow-y: auto;\n\n    .version-details {\n      max-width: 800px;\n      margin: 0 auto;\n      background: white;\n      border: 1px solid #dee2e6;\n      border-radius: 0.5rem;\n      overflow: hidden;\n\n      .details-header {\n        padding: 1.5rem;\n        background: #f8f9fa;\n        border-bottom: 1px solid #dee2e6;\n\n        .details-title {\n          margin: 0 0 0.5rem 0;\n          color: #495057;\n          font-weight: 600;\n        }\n\n        .details-meta {\n          display: flex;\n          gap: 1rem;\n          font-size: 0.875rem;\n          color: #6c757d;\n          flex-wrap: wrap;\n        }\n      }\n\n      .details-content {\n        padding: 1.5rem;\n\n        .detail-section {\n          margin-bottom: 2rem;\n\n          &:last-child {\n            margin-bottom: 0;\n          }\n\n          .section-title {\n            margin: 0 0 1rem 0;\n            color: #495057;\n            font-weight: 600;\n            font-size: 1rem;\n            border-bottom: 1px solid #e9ecef;\n            padding-bottom: 0.5rem;\n          }\n\n          .detail-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n            gap: 1rem;\n\n            .detail-item {\n              display: flex;\n              flex-direction: column;\n              gap: 0.25rem;\n\n              .detail-label {\n                font-size: 0.875rem;\n                font-weight: 500;\n                color: #6c757d;\n              }\n\n              .detail-value {\n                font-size: 0.875rem;\n                color: #495057;\n                display: flex;\n                align-items: center;\n                gap: 0.5rem;\n              }\n            }\n          }\n\n          .json-viewer,\n          .template-viewer {\n            .json-content,\n            .template-content {\n              background: #f8f9fa;\n              border: 1px solid #dee2e6;\n              border-radius: 0.375rem;\n              padding: 1rem;\n              margin: 0;\n              font-family: 'Fira Code', Monaco, Consolas, monospace;\n              font-size: 0.875rem;\n              line-height: 1.5;\n              overflow-x: auto;\n              max-height: 400px;\n              overflow-y: auto;\n            }\n          }\n        }\n      }\n    }\n\n    .no-selection-message {\n      text-align: center;\n      padding: 3rem 1rem;\n      color: #6c757d;\n\n      i {\n        font-size: 3rem;\n        margin-bottom: 1rem;\n        display: block;\n        opacity: 0.5;\n      }\n\n      p {\n        margin: 0;\n        font-size: 1rem;\n        line-height: 1.5;\n      }\n    }\n  }\n\n  .error-container {\n    padding: 1rem;\n\n    .alert {\n      display: flex;\n      align-items: center;\n      gap: 0.5rem;\n    }\n  }\n}\n\n// Responsive adjustments\n@media (max-width: 1200px) {\n  .prompt-version-control {\n    .version-toolbar {\n      .toolbar-section {\n        min-width: 100%;\n        justify-content: space-between;\n      }\n    }\n\n    .comparison-container {\n      .comparison-selectors {\n        flex-direction: column;\n        align-items: stretch;\n\n        .comparison-arrow {\n          align-self: center;\n          padding: 0.5rem 0;\n        }\n      }\n\n      .comparison-results {\n        .differences-list {\n          .difference-item {\n            .diff-content {\n              .side-by-side-diff {\n                grid-template-columns: 1fr;\n                gap: 0.5rem;\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}\n\n@media (max-width: 768px) {\n  .prompt-version-control {\n    .version-toolbar {\n      padding: 0.75rem;\n      \n      .toolbar-section {\n        flex-wrap: wrap;\n        gap: 0.5rem;\n      }\n    }\n\n    .timeline-container {\n      padding: 0.75rem;\n\n      .version-timeline {\n        .timeline-item {\n          .timeline-marker {\n            margin-right: 1rem;\n\n            .marker-icon {\n              width: 2rem;\n              height: 2rem;\n              font-size: 0.875rem;\n            }\n          }\n\n          .timeline-content {\n            padding: 1rem;\n\n            .version-header {\n              flex-direction: column;\n              align-items: flex-start;\n              gap: 0.75rem;\n\n              .version-actions {\n                align-self: flex-end;\n              }\n            }\n          }\n        }\n      }\n    }\n\n    .comparison-container,\n    .details-container {\n      padding: 0.75rem;\n    }\n  }\n\n  .prompt-selector-section {\n    padding: 2rem;\n    background: white;\n    border-radius: 8px;\n    margin: 1rem;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n\n    .section-title {\n      color: #495057;\n      display: flex;\n      align-items: center;\n      gap: 0.5rem;\n      font-weight: 600;\n      margin-bottom: 0.5rem;\n\n      i {\n        color: #007bff;\n      }\n    }\n\n    .prompt-selector {\n      .search-box {\n        .input-group-text {\n          background: #f8f9fa;\n          border-color: #ced4da;\n\n          i {\n            color: #6c757d;\n          }\n        }\n\n        .form-control {\n          border-color: #ced4da;\n\n          &:focus {\n            border-color: #007bff;\n            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);\n          }\n        }\n      }\n\n      .prompts-list {\n        max-height: 400px;\n        overflow-y: auto;\n        border: 1px solid #dee2e6;\n        border-radius: 4px;\n\n        .empty-state {\n          text-align: center;\n          padding: 2rem;\n\n          i {\n            font-size: 2rem;\n            margin-bottom: 0.5rem;\n          }\n        }\n\n        .prompt-item {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          padding: 0.75rem 1rem;\n          border-bottom: 1px solid #dee2e6;\n          cursor: pointer;\n          transition: background-color 0.2s;\n\n          &:last-child {\n            border-bottom: none;\n          }\n\n          &:hover {\n            background-color: #f8f9fa;\n          }\n\n          .prompt-info {\n            flex: 1;\n\n            .prompt-title {\n              margin: 0 0 0.25rem 0;\n              font-weight: 600;\n              color: #495057;\n            }\n\n            .prompt-description {\n              margin: 0;\n              font-size: 0.875rem;\n              color: #6c757d;\n              line-height: 1.4;\n            }\n          }\n\n          .prompt-actions {\n            color: #007bff;\n            opacity: 0.7;\n            transition: opacity 0.2s;\n          }\n\n          &:hover .prompt-actions {\n            opacity: 1;\n          }\n        }\n      }\n    }\n  }\n}"] }]