@memberjunction/ng-core-entity-forms 5.36.0 → 5.38.0

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

@@ -609,7 +609,7 @@ function MJAIPromptRunFormComponentExtended_Conditional_0_Conditional_43_Templat
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(4);
-    i0.ɵɵconditional(ctx_r1.record.Status === "Failed" || ctx_r1.record.Success === false ? 4 : -1);
+    i0.ɵɵconditional(ctx_r1.record.CompletedAt && (ctx_r1.record.Status === "Failed" || ctx_r1.record.Success === false) ? 4 : -1);
 } }
 function MJAIPromptRunFormComponentExtended_Conditional_0_ng_template_45_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 92);
@@ -984,11 +984,11 @@ function MJAIPromptRunFormComponentExtended_Conditional_0_Conditional_87_Templat
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("Expanded", ctx_r1.validationExpanded);
     i0.ɵɵadvance(7);
-    i0.ɵɵclassProp("success", ctx_r1.record.FinalValidationPassed)("failed", !ctx_r1.record.FinalValidationPassed);
+    i0.ɵɵclassProp("success", ctx_r1.record.FinalValidationPassed === true)("failed", ctx_r1.record.FinalValidationPassed === false);
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(ctx_r1.record.FinalValidationPassed ? "fa-solid fa-check-circle" : "fa-solid fa-times-circle");
+    i0.ɵɵclassMap(ctx_r1.record.FinalValidationPassed === true ? "fa-solid fa-check-circle" : ctx_r1.record.FinalValidationPassed === false ? "fa-solid fa-times-circle" : "fa-solid fa-hourglass-half");
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.record.FinalValidationPassed ? "Validation Passed" : "Validation Failed", " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.record.FinalValidationPassed === true ? "Validation Passed" : ctx_r1.record.FinalValidationPassed === false ? "Validation Failed" : "Validation Pending", " ");
     i0.ɵɵadvance(6);
     i0.ɵɵtextInterpolate(ctx_r1.record.ValidationAttemptCount || 0);
     i0.ɵɵadvance(5);
@@ -2104,49 +2104,49 @@ let MJAIPromptRunFormComponentExtended = class MJAIPromptRunFormComponentExtende
     getStatusColor() {
         if (!this.record)
             return '#6c757d';
-        if (this.record.Success === true) {
+        if (!this.record.CompletedAt) {
+            return '#ffc107'; // Yellow (still running — CompletedAt is the authority)
+        }
+        else if (this.record.Success === true) {
             return '#28a745'; // Green
         }
         else if (this.record.Success === false) {
             return '#dc3545'; // Red
         }
-        else if (this.record.CompletedAt) {
-            return '#17a2b8'; // Blue (completed but no success flag)
-        }
         else {
-            return '#ffc107'; // Yellow (running)
+            return '#17a2b8'; // Blue (completed but no success flag)
         }
     }
     getStatusIcon() {
         if (!this.record)
             return 'fa-circle';
-        if (this.record.Success === true) {
+        if (!this.record.CompletedAt) {
+            return 'fa-spinner fa-spin';
+        }
+        else if (this.record.Success === true) {
             return 'fa-check-circle';
         }
         else if (this.record.Success === false) {
             return 'fa-times-circle';
         }
-        else if (this.record.CompletedAt) {
-            return 'fa-info-circle';
-        }
         else {
-            return 'fa-spinner fa-spin';
+            return 'fa-info-circle';
         }
     }
     getStatusText() {
         if (!this.record)
             return 'Unknown';
-        if (this.record.Success === true) {
+        if (!this.record.CompletedAt) {
+            return 'Running';
+        }
+        else if (this.record.Success === true) {
             return 'Success';
         }
         else if (this.record.Success === false) {
             return 'Failed';
         }
-        else if (this.record.CompletedAt) {
-            return 'Completed';
-        }
         else {
-            return 'Running';
+            return 'Completed';
         }
     }
     formatDuration(ms) {
@@ -2331,7 +2331,7 @@ MJAIPromptRunFormComponentExtended = __decorate([
 export { MJAIPromptRunFormComponentExtended };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJAIPromptRunFormComponentExtended, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-ai-prompt-run-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (record) {\n<mj-record-form-container [Record]=\"record\" [FormComponent]=\"this\"\n    [ToolbarConfig]=\"toolbarConfig\"\n    [WidthMode]=\"'full-width'\"\n    (Navigate)=\"OnFormNavigate($event)\"\n    (DeleteRequested)=\"OnDeleteRequested()\"\n    (FavoriteToggled)=\"OnFavoriteToggled()\"\n    (HistoryRequested)=\"OnHistoryRequested()\"\n    (ListManagementRequested)=\"OnListManagementRequested()\">\n        <form class=\"record-form\" #form=\"ngForm\" style=\"display: flex; flex-direction: column; height: 100%; overflow: hidden;\">\n\n            <!-- Header Section -->\n            <div class=\"prompt-run-header\">\n                <div class=\"header-content\">\n                    <div class=\"run-overview\">\n                        <div class=\"run-icon-wrapper\" [style.background-color]=\"getStatusColor() + '20'\">\n                            <i [class]=\"'fa-solid ' + getStatusIcon()\" [style.color]=\"getStatusColor()\"></i>\n                        </div>\n                        <div class=\"run-info\">\n                            <h1 class=\"run-title\">\n                                Prompt Run\n                                @if (record.ID) {\n                                    <span class=\"run-id\">#{{ record.ID.substring(0, 8) }}</span>\n                                }\n                            </h1>\n                            <div class=\"run-meta\">\n                                <!-- Status Card -->\n                                <div class=\"meta-card status-card\">\n                                    <div class=\"c3-card-label\">Status</div>\n                                    <div class=\"meta-card-body\">\n                                        <span class=\"status-indicator\" [style.background-color]=\"getStatusColor()\"></span>\n                                        <i [class]=\"'fa-solid ' + getStatusIcon()\" [style.color]=\"getStatusColor()\"></i>\n                                        {{ getStatusText() }}\n                                    </div>\n                                </div>\n\n                                <!-- Execution Card -->\n                                @if (record.RunType) {\n                                    <div class=\"meta-card execution-card\">\n                                        <div class=\"c3-card-label\">Execution</div>\n                                        <div class=\"meta-card-body\">\n                                            <i [class]=\"'fa-solid ' + getRunTypeIcon(record.RunType)\" [style.color]=\"getRunTypeColor(record.RunType)\"></i>\n                                            {{ record.RunType }}\n                                        </div>\n                                    </div>\n                                }\n\n                                <!-- Prompt Card -->\n                                @if (prompt) {\n                                    @if (record.ChildPromptID) {\n                                        <!-- C3 Stacked Connector: child prompt prominent, parent nested -->\n                                        <div class=\"prompt-card-c3\">\n                                            <div class=\"c3-card-label\">Prompt</div>\n                                            <div class=\"c3-child-section\" (click)=\"navigateToEntity('MJ: AI Prompts', record.ChildPromptID)\" title=\"View Agent Prompt\">\n                                                <i class=\"fa-solid fa-comment prompt-icon\"></i>\n                                                {{ record.ChildPrompt }}\n                                            </div>\n                                            <div class=\"c3-divider\">\n                                                <span class=\"c3-line\"></span>\n                                                <span class=\"c3-divider-label\">wrapped by</span>\n                                                <span class=\"c3-line\"></span>\n                                            </div>\n                                            <div class=\"c3-parent-section\" (click)=\"navigateToEntity('MJ: AI Prompts', prompt.ID)\" title=\"View System Prompt\">\n                                                <i class=\"fa-solid fa-cog\"></i>\n                                                {{ prompt.Name }}\n                                                <i class=\"fa-solid fa-arrow-up-right-from-square c3-link-icon\"></i>\n                                            </div>\n                                        </div>\n                                    } @else {\n                                        <!-- Single prompt (no child) \u2014 same card style -->\n                                        <div class=\"meta-card prompt-single-card\">\n                                            <div class=\"c3-card-label\">Prompt</div>\n                                            <div class=\"meta-card-body clickable\" (click)=\"navigateToEntity('MJ: AI Prompts', prompt.ID)\" title=\"View Prompt\">\n                                                <i class=\"fa-solid fa-comment-dots\" style=\"color: var(--mj-brand-primary);\"></i>\n                                                {{ prompt.Name }}\n                                            </div>\n                                        </div>\n                                    }\n                                }\n\n                                <!-- Model Card -->\n                                @if (model) {\n                                    <div class=\"model-card-c3\">\n                                        <div class=\"c3-card-label\">Model</div>\n                                        <div class=\"c3-card-body\" (click)=\"navigateToEntity('MJ: AI Models', model.ID)\" title=\"View Model\">\n                                            <span class=\"c3-model-name\"><i class=\"fa-solid fa-microchip\"></i> {{ model.Name }}</span>\n                                            @if (record.Vendor) {\n                                                <span class=\"c3-vendor-name\">{{ record.Vendor }}</span>\n                                            }\n                                        </div>\n                                    </div>\n                                }\n                                @if (record.RerunFromPromptRunID) {\n                                    <span class=\"original-run\" title=\"View Original Run\">\n                                        <i class=\"fa-solid fa-level-up-alt\"></i>\n                                        <a (click)=\"navigateToOriginalRun()\" class=\"original-link\">Original Run</a>\n                                    </span>\n                                }\n                            </div>\n                        </div>\n                    </div>\n                    \n                    <!-- Action Buttons -->\n                    <div class=\"run-actions\">\n                        <button mjButton variant=\"outline\" size=\"sm\" (click)=\"reRunPrompt()\" title=\"Re-run this prompt\">\n                            <i class=\"fa-solid fa-play-circle\"></i>\n                            Re-Run\n                        </button>\n                        <button mjButton variant=\"outline\" size=\"sm\" (click)=\"refreshData()\" title=\"Refresh data\">\n                            <i class=\"fa-solid fa-refresh\"></i>\n                        </button>\n                    </div>\n                </div>\n                \n                <!-- Key Metrics Bar -->\n                @if (record.ConfigurationID) {\n                    <!-- Configuration Bar -->\n                    <div class=\"metrics-bar\">\n                        <div class=\"metric-item\">\n                            <i class=\"fa-solid fa-cog\"></i>\n                            <div class=\"metric-content\">\n                                <div class=\"metric-label\">Configuration</div>\n                                <div class=\"metric-value\">\n                                    <a href=\"javascript:void(0)\" class=\"config-link\" (click)=\"navigateToEntity('MJ: AI Configurations', record.ConfigurationID)\">\n                                        {{ record.Configuration || 'Unknown' }}\n                                    </a>\n                                </div>\n                            </div>\n                        </div>\n                        @if (record.Temperature !== null && record.Temperature !== undefined) {\n                            <div class=\"metric-item\">\n                                <i class=\"fa-solid fa-temperature-high\"></i>\n                                <div class=\"metric-content\">\n                                    <div class=\"metric-label\">Temperature</div>\n                                    <div class=\"metric-value\">{{ record.Temperature }}</div>\n                                </div>\n                            </div>\n                        }\n                        @if (record.TopP !== null && record.TopP !== undefined) {\n                            <div class=\"metric-item\">\n                                <i class=\"fa-solid fa-percentage\"></i>\n                                <div class=\"metric-content\">\n                                    <div class=\"metric-label\">Top P</div>\n                                    <div class=\"metric-value\">{{ record.TopP }}</div>\n                                </div>\n                            </div>\n                        }\n                        @if (record.TopK !== null && record.TopK !== undefined) {\n                            <div class=\"metric-item\">\n                                <i class=\"fa-solid fa-list-ol\"></i>\n                                <div class=\"metric-content\">\n                                    <div class=\"metric-label\">Top K</div>\n                                    <div class=\"metric-value\">{{ record.TopK }}</div>\n                                </div>\n                            </div>\n                        }\n                        @if (record.EffortLevel !== null && record.EffortLevel !== undefined) {\n                            <div class=\"metric-item\">\n                                <i class=\"fa-solid fa-tachometer-alt\"></i>\n                                <div class=\"metric-content\">\n                                    <div class=\"metric-label\">Effort Level</div>\n                                    <div class=\"metric-value\">{{ record.EffortLevel }}</div>\n                                </div>\n                            </div>\n                        }\n                        @if (record.ResponseFormat) {\n                            <div class=\"metric-item\">\n                                <i class=\"fa-solid fa-code\"></i>\n                                <div class=\"metric-content\">\n                                    <div class=\"metric-label\">Response Format</div>\n                                    <div class=\"metric-value\">{{ record.ResponseFormat }}</div>\n                                </div>\n                            </div>\n                        }\n                    </div>\n                    \n                    <!-- Execution Metrics Bar (always show when configuration exists) -->\n                    <div class=\"metrics-bar\">\n                        <div class=\"metric-item\">\n                            <i class=\"fa-solid fa-clock\"></i>\n                            <div class=\"metric-content\">\n                                <div class=\"metric-label\">Duration</div>\n                                <div class=\"metric-value\">{{ formatDuration(record.ExecutionTimeMS) }}</div>\n                            </div>\n                        </div>\n                        <div class=\"metric-item\">\n                            <i class=\"fa-solid fa-coins\"></i>\n                            <div class=\"metric-content\">\n                                <div class=\"metric-label\">Total Tokens</div>\n                                <div class=\"metric-value\">{{ formatTokens(record.TokensUsed) }}</div>\n                            </div>\n                        </div>\n                        <div class=\"metric-item\">\n                            <i class=\"fa-solid fa-dollar-sign\"></i>\n                            <div class=\"metric-content\">\n                                <div class=\"metric-label\">Cost</div>\n                                <div class=\"metric-value\">{{ formatCost(record.TotalCost || record.Cost) }}</div>\n                            </div>\n                        </div>\n                        @if (record.RunAt) {\n                            <div class=\"metric-item\">\n                                <i class=\"fa-solid fa-calendar\"></i>\n                                <div class=\"metric-content\">\n                                    <div class=\"metric-label\">Started</div>\n                                    <div class=\"metric-value\">{{ record.RunAt | date:'short' }}</div>\n                                </div>\n                            </div>\n                        }\n                    </div>\n                } @else {\n                    <!-- Execution Metrics Bar (original behavior when no configuration) -->\n                    <div class=\"metrics-bar\">\n                        <div class=\"metric-item\">\n                            <i class=\"fa-solid fa-clock\"></i>\n                            <div class=\"metric-content\">\n                                <div class=\"metric-label\">Duration</div>\n                                <div class=\"metric-value\">{{ formatDuration(record.ExecutionTimeMS) }}</div>\n                            </div>\n                        </div>\n                        <div class=\"metric-item\">\n                            <i class=\"fa-solid fa-coins\"></i>\n                            <div class=\"metric-content\">\n                                <div class=\"metric-label\">Total Tokens</div>\n                                <div class=\"metric-value\">{{ formatTokens(record.TokensUsed) }}</div>\n                            </div>\n                        </div>\n                        <div class=\"metric-item\">\n                            <i class=\"fa-solid fa-dollar-sign\"></i>\n                            <div class=\"metric-content\">\n                                <div class=\"metric-label\">Cost</div>\n                                <div class=\"metric-value\">{{ formatCost(record.TotalCost || record.Cost) }}</div>\n                            </div>\n                        </div>\n                        @if (record.RunAt) {\n                            <div class=\"metric-item\">\n                                <i class=\"fa-solid fa-calendar\"></i>\n                                <div class=\"metric-content\">\n                                    <div class=\"metric-label\">Started</div>\n                                    <div class=\"metric-value\">{{ record.RunAt | date:'short' }}</div>\n                                </div>\n                            </div>\n                        }\n                    </div>\n                }\n            </div>\n\n            <!-- Main Content with Expansion Panels -->\n            <div class=\"form-content\" style=\"display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto;\">\n\n                    <!-- Input Panel with nested sub-panels -->\n                    <mj-accordion-panel [Expanded]=\"inputExpanded\" (ExpandedChange)=\"onInputPanelToggle($event)\" style=\"margin-bottom: 8px;\">\n                        <ng-template mjAccordionTitle>\n                            <span class=\"panel-title\">\n                                <i class=\"fa-solid fa-comment-dots\"></i>\n                                Input\n                                @if (record.Messages && record.Messages.trim() !== '') {\n                                    <span class=\"panel-badge\">JSON</span>\n                                }\n                            </span>\n                        </ng-template>\n                            <div class=\"panel-content\">\n                                @if (record.Messages && record.Messages.trim() !== '') {\n                                    <!-- Nested expansion panels for sub-sections -->\n                                    <div class=\"nested-panels\">\n                                        <!-- Messages Sub-Panel -->\n                                        <mj-accordion-panel\n                                            [Expanded]=\"messagesExpanded\"\n                                            class=\"sub-expansion-panel\"\n                                            style=\"margin-bottom: 8px;\">\n                                            <ng-template mjAccordionTitle>\n                                                <span class=\"sub-panel-title\">\n                                                    <i class=\"fa-solid fa-comments\"></i>\n                                                    Messages\n                                                    @if (chatMessages.length > 0) {\n                                                        <span class=\"panel-count\">({{ chatMessages.length }})</span>\n                                                    }\n                                                </span>\n                                            </ng-template>\n                                            <div class=\"sub-panel-content\">\n                                                @if (isParsingMessages || isLoadingRelatedData) {\n                                                    <div class=\"loading-state\">\n                                                        <i class=\"fa-solid fa-spinner fa-spin\"></i>\n                                                        <p>Loading messages...</p>\n                                                    </div>\n                                                } @else if (chatMessages.length > 0) {\n                                                    <mj-chat-message-viewer \n                                                        [messages]=\"chatMessages\">\n                                                    </mj-chat-message-viewer>\n                                                } @else {\n                                                    <div class=\"empty-state\">\n                                                        <i class=\"fa-solid fa-comment-slash\"></i>\n                                                        <p>No chat messages found</p>\n                                                    </div>\n                                                }\n                                            </div>\n                                        </mj-accordion-panel>\n\n                                        <!-- Data Sub-Panel -->\n                                        <mj-accordion-panel\n                                            [Expanded]=\"dataExpanded\"\n                                            class=\"sub-expansion-panel\"\n                                            style=\"margin-bottom: 8px;\">\n                                            <ng-template mjAccordionTitle>\n                                                <span class=\"sub-panel-title\">\n                                                    <i class=\"fa-solid fa-database\"></i>\n                                                    Data\n                                                    @if (inputData) {\n                                                        <span class=\"panel-badge\">Object</span>\n                                                    }\n                                                </span>\n                                            </ng-template>\n                                            <div class=\"sub-panel-content\">\n                                                @if (inputData && formattedData) {\n                                                    <div class=\"json-editor-container\">\n                                                        <div class=\"json-toolbar\">\n                                                            <button mjButton\n                                                                variant=\"flat\"\n                                                                size=\"sm\"\n                                                                (click)=\"copyToClipboard(formattedData, 'Data')\"\n                                                                title=\"Copy JSON\">\n                                                                <i class=\"fa-solid fa-copy\"></i> Copy\n                                                            </button>\n                                                            <button mjButton\n                                                                variant=\"flat\"\n                                                                size=\"sm\"\n                                                                (click)=\"openFullScreen(formattedData, 'json', 'Data')\"\n                                                                title=\"View full screen\">\n                                                                <i class=\"fa-solid fa-expand\"></i>\n                                                            </button>\n                                                        </div>\n                                                        <mj-code-editor \n                                                            [(ngModel)]=\"formattedData\"\n                                                            name=\"formattedData\"\n                                                            [readonly]=\"true\"\n                                                            [language]=\"'json'\"\n                                                            [lineWrapping]=\"true\"\n                                                            style=\"height: 300px; width: 100%;\">\n                                                        </mj-code-editor>\n                                                    </div>\n                                                } @else {\n                                                    <div class=\"empty-state\">\n                                                        <i class=\"fa-solid fa-database\"></i>\n                                                        <p>No data object found</p>\n                                                    </div>\n                                                }\n                                            </div>\n                                        </mj-accordion-panel>\n\n                                        <!-- Raw Sub-Panel -->\n                                        <mj-accordion-panel\n                                            [Expanded]=\"rawExpanded\"\n                                            class=\"sub-expansion-panel\"\n                                            style=\"margin-bottom: 8px;\">\n                                            <ng-template mjAccordionTitle>\n                                                <span class=\"sub-panel-title\">\n                                                    <i class=\"fa-solid fa-code\"></i>\n                                                    Raw\n                                                </span>\n                                            </ng-template>\n                                            <div class=\"sub-panel-content\">\n                                                <div class=\"json-editor-container\">\n                                                    <div class=\"json-toolbar\">\n                                                        <button mjButton\n                                                            variant=\"flat\"\n                                                            size=\"sm\"\n                                                            (click)=\"copyToClipboard(formattedMessages, 'Messages')\"\n                                                            title=\"Copy JSON\">\n                                                            <i class=\"fa-solid fa-copy\"></i> Copy\n                                                        </button>\n                                                        <button mjButton\n                                                            variant=\"flat\"\n                                                            size=\"sm\"\n                                                            (click)=\"openFullScreen(formattedMessages, 'json', 'Raw Messages')\"\n                                                            title=\"View full screen\">\n                                                            <i class=\"fa-solid fa-expand\"></i>\n                                                        </button>\n                                                    </div>\n                                                    <mj-code-editor \n                                                        [(ngModel)]=\"formattedMessages\"\n                                                        name=\"formattedMessages\"\n                                                        [readonly]=\"true\"\n                                                        [language]=\"'json'\"\n                                                        [lineWrapping]=\"true\"\n                                                        style=\"height: 400px; width: 100%;\">\n                                                    </mj-code-editor>\n                                                </div>\n                                            </div>\n                                        </mj-accordion-panel>\n                                    </div>\n                                } @else {\n                                    <div class=\"empty-state\">\n                                        <i class=\"fa-solid fa-comment-slash\"></i>\n                                        <p>No input messages recorded</p>\n                                    </div>\n                                }\n                            </div>\n                    </mj-accordion-panel>\n                    \n                    <!-- Result Panel -->\n                    <mj-accordion-panel [Expanded]=\"resultExpanded\" (ExpandedChange)=\"onResultPanelToggle($event)\" style=\"margin-bottom: 8px;\">\n                        <ng-template mjAccordionTitle>\n                            <span class=\"panel-title\">\n                                <i class=\"fa-solid fa-square-check\"></i>\n                                Result\n                                @if (record.Result && record.Result.trim() !== '') {\n                                    <span class=\"panel-badge\">JSON</span>\n                                }\n                                @if (record.ErrorMessage) {\n                                    <span class=\"panel-badge error\">Error</span>\n                                }\n                            </span>\n                        </ng-template>\n                            <div class=\"panel-content\">\n                                @if (record.ErrorMessage) {\n                                    <div class=\"error-message\">\n                                        <i class=\"fa-solid fa-exclamation-triangle\"></i>\n                                        <div class=\"error-content\">\n                                            <h4>Error Message</h4>\n                                            <p>{{ record.ErrorMessage }}</p>\n                                        </div>\n                                    </div>\n                                }\n                                \n                                @if (record.Result && record.Result.trim() !== '') {\n                                    <div class=\"json-editor-container\">\n                                        <div class=\"json-toolbar\">\n                                            <button mjButton\n                                                variant=\"flat\"\n                                                size=\"sm\"\n                                                (click)=\"copyToClipboard(formattedResult, 'Result')\"\n                                                title=\"Copy JSON\">\n                                                <i class=\"fa-solid fa-copy\"></i> Copy\n                                            </button>\n                                            <button mjButton\n                                                variant=\"flat\"\n                                                size=\"sm\"\n                                                (click)=\"openFullScreen(formattedResult, 'json', 'Result')\"\n                                                title=\"View full screen\">\n                                                <i class=\"fa-solid fa-expand\"></i>\n                                            </button>\n                                        </div>\n                                        <mj-code-editor \n                                            [(ngModel)]=\"formattedResult\"\n                                            name=\"formattedResult\"\n                                            [readonly]=\"true\"\n                                            [language]=\"'json'\"\n                                            [lineWrapping]=\"true\"\n                                            style=\"height: 400px; width: 100%;\">\n                                        </mj-code-editor>\n                                    </div>\n                                } @else if (!record.ErrorMessage) {\n                                    <div class=\"empty-state\">\n                                        <i class=\"fa-solid fa-inbox\"></i>\n                                        <p>No result data recorded</p>\n                                        @if (record.Status === 'Failed' || record.Success === false) {\n                                            <div class=\"error-info\">\n                                                @if (record.Status) {\n                                                    <p class=\"finish-reason\">\n                                                        <strong>Status:</strong> {{ record.Status }}\n                                                    </p>\n                                                }\n                                                @if (formattedErrorDetails) {\n                                                    <div class=\"error-details\">\n                                                        <div class=\"json-toolbar\">\n                                                            <h4 style=\"margin: 0;\">Error Details</h4>\n                                                            <button mjButton\n                                                                variant=\"flat\"\n                                                                size=\"sm\"\n                                                                (click)=\"openFullScreen(formattedErrorDetails, 'json', 'Error Details')\"\n                                                                title=\"View full screen\">\n                                                                <i class=\"fa-solid fa-expand\"></i>\n                                                            </button>\n                                                        </div>\n                                                        <mj-code-editor\n                                                            [ngModel]=\"formattedErrorDetails\"\n                                                            [disabled]=\"true\"\n                                                            [language]=\"'json'\"\n                                                            [lineWrapping]=\"true\"\n                                                            style=\"height: 200px; width: 100%;\">\n                                                        </mj-code-editor>\n                                                    </div>\n                                                }\n                                                @if (!formattedErrorDetails) {\n                                                    <p class=\"error-hint\">\n                                                        The prompt execution failed but no additional error information is available.\n                                                    </p>\n                                                }\n                                            </div>\n                                        }\n                                    </div>\n                                }\n                            </div>\n                    </mj-accordion-panel>\n\n                    <!-- Token Usage & Metrics Panel -->\n                    <mj-accordion-panel [Expanded]=\"metricsExpanded\" (ExpandedChange)=\"onMetricsPanelToggle($event)\" style=\"margin-bottom: 8px;\">\n                        <ng-template mjAccordionTitle>\n                            <span class=\"panel-title\">\n                                <i class=\"fa-solid fa-chart-line\"></i>\n                                Token Usage &amp; Metrics\n                            </span>\n                        </ng-template>\n                            <div class=\"panel-content\">\n                                <div class=\"metrics-grid\">\n                                    <div class=\"metric-card\">\n                                        <div class=\"metric-header\">\n                                            <i class=\"fa-solid fa-message\"></i>\n                                            <h4>Prompt Tokens</h4>\n                                        </div>\n                                        <div class=\"metric-value large\">{{ formatTokens(record.TokensPrompt) }}</div>\n                                        @if (record.TokensPromptRollup && record.TokensPromptRollup !== record.TokensPrompt) {\n                                            <div class=\"metric-rollup\">\n                                                <span>Rollup: {{ formatTokens(record.TokensPromptRollup) }}</span>\n                                            </div>\n                                        }\n                                    </div>\n                                    \n                                    <div class=\"metric-card\">\n                                        <div class=\"metric-header\">\n                                            <i class=\"fa-solid fa-reply\"></i>\n                                            <h4>Completion Tokens</h4>\n                                        </div>\n                                        <div class=\"metric-value large\">{{ formatTokens(record.TokensCompletion) }}</div>\n                                        @if (record.TokensCompletionRollup && record.TokensCompletionRollup !== record.TokensCompletion) {\n                                            <div class=\"metric-rollup\">\n                                                <span>Rollup: {{ formatTokens(record.TokensCompletionRollup) }}</span>\n                                            </div>\n                                        }\n                                    </div>\n                                    \n                                    <div class=\"metric-card\">\n                                        <div class=\"metric-header\">\n                                            <i class=\"fa-solid fa-coins\"></i>\n                                            <h4>Total Tokens</h4>\n                                        </div>\n                                        <div class=\"metric-value large\">{{ formatTokens(record.TokensUsed) }}</div>\n                                        @if (record.TokensUsedRollup && record.TokensUsedRollup !== record.TokensUsed) {\n                                            <div class=\"metric-rollup\">\n                                                <span>Rollup: {{ formatTokens(record.TokensUsedRollup) }}</span>\n                                            </div>\n                                        }\n                                    </div>\n                                    \n                                    <div class=\"metric-card\">\n                                        <div class=\"metric-header\">\n                                            <i class=\"fa-solid fa-dollar-sign\"></i>\n                                            <h4>Cost</h4>\n                                        </div>\n                                        <div class=\"metric-value large\">{{ formatCost(record.Cost) }}</div>\n                                        @if (record.TotalCost && record.TotalCost !== record.Cost) {\n                                            <div class=\"metric-rollup\">\n                                                <span>Total: {{ formatCost(record.TotalCost) }}</span>\n                                            </div>\n                                        }\n                                        @if (record.CostCurrency) {\n                                            <div class=\"metric-currency\">{{ record.CostCurrency }}</div>\n                                        }\n                                    </div>\n                                    \n                                    <!-- Timing Metrics -->\n                                    @if (record.QueueTime != null) {\n                                        <div class=\"metric-card\">\n                                            <div class=\"metric-header\">\n                                                <i class=\"fa-solid fa-hourglass-start\"></i>\n                                                <h4>Queue Time</h4>\n                                            </div>\n                                            <div class=\"metric-value large\">{{ formatDuration(record.QueueTime) }}</div>\n                                        </div>\n                                    }\n                                    \n                                    @if (record.PromptTime != null) {\n                                        <div class=\"metric-card\">\n                                            <div class=\"metric-header\">\n                                                <i class=\"fa-solid fa-brain\"></i>\n                                                <h4>Prompt Time</h4>\n                                            </div>\n                                            <div class=\"metric-value large\">{{ formatDuration(record.PromptTime) }}</div>\n                                        </div>\n                                    }\n                                    \n                                    @if (record.CompletionTime != null) {\n                                        <div class=\"metric-card\">\n                                            <div class=\"metric-header\">\n                                                <i class=\"fa-solid fa-flag-checkered\"></i>\n                                                <h4>Completion Time</h4>\n                                            </div>\n                                            <div class=\"metric-value large\">{{ formatDuration(record.CompletionTime) }}</div>\n                                        </div>\n                                    }\n                                </div>\n                                \n                                <!-- Additional Metrics -->\n                                <div class=\"additional-metrics\">\n                                    @if (record.ExecutionOrder !== null) {\n                                        <div class=\"metric-row\">\n                                            <span class=\"metric-label\">Execution Order:</span>\n                                            <span class=\"metric-value\">{{ record.ExecutionOrder }}</span>\n                                        </div>\n                                    }\n                                    @if (record.AgentID) {\n                                        <div class=\"metric-row\">\n                                            <span class=\"metric-label\">Agent:</span>\n                                            <span class=\"metric-value link\" (click)=\"navigateToEntity('MJ: AI Agents', record.AgentID)\">\n                                                {{ record.Agent }}\n                                                <i class=\"fa-solid fa-external-link\"></i>\n                                            </span>\n                                        </div>\n                                    }\n                                </div>\n                            </div>\n                    </mj-accordion-panel>\n\n                    <!-- Validation & Retry Panel -->\n                    @if (record && ((record.ValidationAttemptCount && record.ValidationAttemptCount > 0) || record.ValidationBehavior)) {\n                        <mj-accordion-panel [Expanded]=\"validationExpanded\" (ExpandedChange)=\"onValidationPanelToggle($event)\" style=\"margin-bottom: 8px;\">\n                            <ng-template mjAccordionTitle>\n                                <span class=\"panel-title\">\n                                    <i class=\"fa-solid fa-shield-check\"></i>\n                                    Validation &amp; Retries\n                                    @if (record && record.ValidationAttemptCount && record.ValidationAttemptCount > 1) {\n                                        <span class=\"panel-count\">({{ record.ValidationAttemptCount }} attempts)</span>\n                                    }\n                                    @if (record.FinalValidationPassed) {\n                                        <span class=\"panel-badge success\">Passed</span>\n                                    } @else if (record.FinalValidationPassed === false) {\n                                        <span class=\"panel-badge error\">Failed</span>\n                                    }\n                                </span>\n                            </ng-template>\n                                <div class=\"panel-content\">\n                                    <!-- Validation Summary -->\n                                    <div class=\"validation-summary\">\n                                        <div class=\"summary-header\">\n                                            <h4>Validation Summary</h4>\n                                            <div class=\"validation-status\" [class.success]=\"record.FinalValidationPassed\" [class.failed]=\"!record.FinalValidationPassed\">\n                                                <i [class]=\"record.FinalValidationPassed ? 'fa-solid fa-check-circle' : 'fa-solid fa-times-circle'\"></i>\n                                                {{ record.FinalValidationPassed ? 'Validation Passed' : 'Validation Failed' }}\n                                            </div>\n                                        </div>\n                                        \n                                        <div class=\"validation-metrics\">\n                                            <div class=\"metric-card small\">\n                                                <div class=\"metric-label\">Total Attempts</div>\n                                                <div class=\"metric-value\">{{ record.ValidationAttemptCount || 0 }}</div>\n                                            </div>\n                                            <div class=\"metric-card small\">\n                                                <div class=\"metric-label\">Successful</div>\n                                                <div class=\"metric-value\">{{ record.SuccessfulValidationCount || 0 }}</div>\n                                            </div>\n                                            <div class=\"metric-card small\">\n                                                <div class=\"metric-label\">Behavior</div>\n                                                <div class=\"metric-value\">{{ record.ValidationBehavior || 'Not set' }}</div>\n                                            </div>\n                                            <div class=\"metric-card small\">\n                                                <div class=\"metric-label\">Retry Strategy</div>\n                                                <div class=\"metric-value\">{{ record.RetryStrategy || 'Not set' }}</div>\n                                            </div>\n                                        </div>\n                                        \n                                        @if (record.FinalValidationError) {\n                                            <div class=\"validation-error\">\n                                                <h5><i class=\"fa-solid fa-exclamation-triangle\"></i> Final Validation Error</h5>\n                                                <p>{{ record.FinalValidationError }}</p>\n                                                @if (record && record.ValidationErrorCount && record.ValidationErrorCount > 0) {\n                                                    <span class=\"error-count\">{{ record.ValidationErrorCount }} validation errors</span>\n                                                }\n                                            </div>\n                                        }\n                                        \n                                        @if (record.CommonValidationError && record.CommonValidationError !== record.FinalValidationError) {\n                                            <div class=\"common-error\">\n                                                <h5><i class=\"fa-solid fa-repeat\"></i> Most Common Error</h5>\n                                                <p>{{ record.CommonValidationError }}</p>\n                                            </div>\n                                        }\n                                    </div>\n                                    \n                                    <!-- Retry Timeline -->\n                                    @if (record && record.ValidationAttemptCount && record.ValidationAttemptCount > 1) {\n                                        <div class=\"retry-timeline\">\n                                            <h4>Retry Timeline</h4>\n                                            <div class=\"timeline-info\">\n                                                <div class=\"timeline-stat\">\n                                                    <i class=\"fa-solid fa-clock\"></i>\n                                                    <span>First Attempt: {{ record.FirstAttemptAt | date:'short' }}</span>\n                                                </div>\n                                                <div class=\"timeline-stat\">\n                                                    <i class=\"fa-solid fa-flag-checkered\"></i>\n                                                    <span>Last Attempt: {{ record.LastAttemptAt | date:'short' }}</span>\n                                                </div>\n                                                <div class=\"timeline-stat\">\n                                                    <i class=\"fa-solid fa-stopwatch\"></i>\n                                                    <span>Total Retry Duration: {{ formatDuration(record.TotalRetryDurationMS) }}</span>\n                                                </div>\n                                            </div>\n                                        </div>\n                                    }\n                                    \n                                    <!-- Validation Attempts Details -->\n                                    @if (validationAttempts && validationAttempts.length > 0) {\n                                        <div class=\"validation-attempts\">\n                                            <h4>Validation Attempts</h4>\n                                            <div class=\"attempts-list\">\n                                                @for (attempt of validationAttempts; track attempt.attemptNumber) {\n                                                    <div class=\"attempt-item\" [class.success]=\"attempt.success\" [class.failed]=\"!attempt.success\">\n                                                        <div class=\"attempt-number\">\n                                                            <i [class]=\"attempt.success ? 'fa-solid fa-check' : 'fa-solid fa-times'\"></i>\n                                                            Attempt #{{ attempt.attemptNumber }}\n                                                        </div>\n                                                        <div class=\"attempt-details\">\n                                                            <span class=\"attempt-time\">{{ attempt.timestamp }}</span>\n                                                            @if (!attempt.success) {\n                                                                <span class=\"attempt-error\">{{ attempt.errorMessage || 'Unknown error' }}</span>\n                                                                @if (attempt.validationErrorCount > 0) {\n                                                                    <span class=\"error-count\">({{ attempt.validationErrorCount }} errors)</span>\n                                                                }\n                                                            }\n                                                            @if (attempt.outputLength) {\n                                                                <span class=\"output-length\">Output: {{ attempt.outputLength }} chars</span>\n                                                            }\n                                                        </div>\n                                                    </div>\n                                                }\n                                            </div>\n                                        </div>\n                                    }\n                                    \n                                    <!-- Validation Summary JSON -->\n                                    @if (validationSummary) {\n                                        <div class=\"validation-json\">\n                                            <div class=\"json-toolbar\">\n                                                <h4 style=\"margin: 0;\">Validation Summary Details</h4>\n                                                <button mjButton\n                                                    variant=\"flat\"\n                                                    size=\"sm\"\n                                                    (click)=\"openFullScreen(formattedValidationSummary, 'json', 'Validation Summary')\"\n                                                    title=\"View full screen\">\n                                                    <i class=\"fa-solid fa-expand\"></i>\n                                                </button>\n                                            </div>\n                                            <div class=\"json-viewer-container\">\n                                                <mj-code-editor\n                                                    [(ngModel)]=\"formattedValidationSummary\"\n                                                    name=\"formattedValidationSummary\"\n                                                    [readonly]=\"true\"\n                                                    [language]=\"'json'\"\n                                                    [lineWrapping]=\"true\"\n                                                    style=\"height: 200px; width: 100%;\">\n                                                </mj-code-editor>\n                                            </div>\n                                        </div>\n                                    }\n                                    \n                                    <!-- Validation Attempts JSON -->\n                                    @if (record.ValidationAttempts) {\n                                        <div class=\"validation-json\">\n                                            <div class=\"json-toolbar\">\n                                                <h4 style=\"margin: 0;\">Validation Attempts (Raw JSON)</h4>\n                                                <button mjButton\n                                                    variant=\"flat\"\n                                                    size=\"sm\"\n                                                    (click)=\"openFullScreen(formattedValidationAttempts, 'json', 'Validation Attempts')\"\n                                                    title=\"View full screen\">\n                                                    <i class=\"fa-solid fa-expand\"></i>\n                                                </button>\n                                            </div>\n                                            <div class=\"json-viewer-container\">\n                                                <mj-code-editor\n                                                    [(ngModel)]=\"formattedValidationAttempts\"\n                                                    name=\"formattedValidationAttempts\"\n                                                    [readonly]=\"true\"\n                                                    [language]=\"'json'\"\n                                                    [lineWrapping]=\"true\"\n                                                    style=\"height: 300px; width: 100%;\">\n                                                </mj-code-editor>\n                                            </div>\n                                        </div>\n                                    }\n                                </div>\n                        </mj-accordion-panel>\n                    }\n\n                    <!-- Hierarchy Panel (for parent/child relationships) -->\n                    @if (record.ParentID || childRuns.length > 0) {\n                        <mj-accordion-panel [Expanded]=\"hierarchyExpanded\" style=\"margin-bottom: 8px;\">\n                            <ng-template mjAccordionTitle>\n                                <span class=\"panel-title\">\n                                    <i class=\"fa-solid fa-sitemap\"></i>\n                                    Run Hierarchy\n                                    @if (childRuns.length > 0) {\n                                        <span class=\"panel-count\">({{ childRuns.length }} children)</span>\n                                    }\n                                </span>\n                            </ng-template>\n                                <div class=\"panel-content\">\n                                    @if (parentRun) {\n                                        <div class=\"parent-run-section\">\n                                            <h4><i class=\"fa-solid fa-level-up-alt\"></i> Parent Run</h4>\n                                            <div class=\"run-item parent\" (click)=\"navigateToEntity('MJ: AI Prompt Runs', parentRun.ID)\">\n                                                <div class=\"run-item-icon\" [style.background-color]=\"getStatusColor() + '20'\">\n                                                    <i [class]=\"'fa-solid ' + getRunTypeIcon(parentRun.RunType)\"></i>\n                                                </div>\n                                                <div class=\"run-item-content\">\n                                                    <div class=\"run-item-title\">\n                                                        Parent Run #{{ parentRun.ID.substring(0, 8) }}\n                                                        <span class=\"run-item-type\">{{ parentRun.RunType }}</span>\n                                                    </div>\n                                                    <div class=\"run-item-meta\">\n                                                        <span><i class=\"fa-solid fa-clock\"></i> {{ formatDuration(parentRun.ExecutionTimeMS) }}</span>\n                                                        <span><i class=\"fa-solid fa-coins\"></i> {{ formatTokens(parentRun.TokensUsed) }}</span>\n                                                        <span><i class=\"fa-solid fa-calendar\"></i> {{ parentRun.RunAt | date:'short' }}</span>\n                                                    </div>\n                                                </div>\n                                                <i class=\"fa-solid fa-external-link\"></i>\n                                            </div>\n                                        </div>\n                                    }\n                                    \n                                    @if (childRuns.length > 0) {\n                                        <div class=\"child-runs-section\">\n                                            <h4><i class=\"fa-solid fa-level-down-alt\"></i> Child Runs</h4>\n                                            <div class=\"runs-list\">\n                                                @for (childRun of childRuns; track childRun.ID) {\n                                                    <div class=\"run-item child\" (click)=\"navigateToEntity('MJ: AI Prompt Runs', childRun.ID)\">\n                                                        <div class=\"run-item-icon\" [style.background-color]=\"getStatusColor() + '20'\">\n                                                            <i [class]=\"'fa-solid ' + getRunTypeIcon(childRun.RunType)\"></i>\n                                                        </div>\n                                                        <div class=\"run-item-content\">\n                                                            <div class=\"run-item-title\">\n                                                                Child Run #{{ childRun.ID.substring(0, 8) }}\n                                                                @if (childRun.ExecutionOrder !== null) {\n                                                                    <span class=\"execution-order\">#{{ childRun.ExecutionOrder }}</span>\n                                                                }\n                                                                <span class=\"run-item-type\">{{ childRun.RunType }}</span>\n                                                            </div>\n                                                            <div class=\"run-item-meta\">\n                                                                <span class=\"status-indicator\" [style.color]=\"getStatusColor()\">\n                                                                    <i [class]=\"'fa-solid ' + getStatusIcon()\"></i>\n                                                                    {{ childRun.Success ? 'Success' : childRun.ErrorMessage ? 'Failed' : 'Running' }}\n                                                                </span>\n                                                                <span><i class=\"fa-solid fa-clock\"></i> {{ formatDuration(childRun.ExecutionTimeMS) }}</span>\n                                                                <span><i class=\"fa-solid fa-coins\"></i> {{ formatTokens(childRun.TokensUsed) }}</span>\n                                                            </div>\n                                                        </div>\n                                                        <i class=\"fa-solid fa-external-link\"></i>\n                                                    </div>\n                                                }\n                                            </div>\n                                        </div>\n                                    }\n                                </div>\n                        </mj-accordion-panel>\n                    }\n\n                    <!-- Additional Details Panel -->\n                    <mj-accordion-panel [Expanded]=\"false\" style=\"margin-bottom: 8px;\">\n                        <ng-template mjAccordionTitle>\n                            <span class=\"panel-title\">\n                                <i class=\"fa-solid fa-info-circle\"></i>\n                                Additional Details\n                            </span>\n                        </ng-template>\n                            <div class=\"panel-content\">\n                                <div class=\"detail-fields-grid\">\n                                    @if (record.AgentID) {\n                                        <div class=\"detail-field\">\n                                            <label>Agent</label>\n                                            <div class=\"detail-value clickable\" (click)=\"navigateToEntity('MJ: AI Agents', record.AgentID)\" title=\"View Agent\">\n                                                <i class=\"fa-solid fa-robot\"></i>\n                                                {{ record.Agent || 'Unknown' }}\n                                                <i class=\"fa-solid fa-external-link\"></i>\n                                            </div>\n                                        </div>\n                                    }\n                                    \n                                    \n                                    @if (record.RunType) {\n                                        <div class=\"detail-field\">\n                                            <label>Run Type</label>\n                                            <div class=\"detail-value\">\n                                                <i [class]=\"'fa-solid ' + getRunTypeIcon(record.RunType)\"></i>\n                                                {{ record.RunType }}\n                                            </div>\n                                        </div>\n                                    }\n                                    \n                                    @if (record.ResponseFormat) {\n                                        <div class=\"detail-field\">\n                                            <label>Response Format</label>\n                                            <div class=\"detail-value\">\n                                                <i class=\"fa-solid fa-code\"></i>\n                                                {{ record.ResponseFormat }}\n                                            </div>\n                                        </div>\n                                    }\n                                    \n                                    <div class=\"detail-field\">\n                                        <label>Temperature</label>\n                                        <div class=\"detail-value\" [class.null-value]=\"record.Temperature === null || record.Temperature === undefined\">\n                                            <i class=\"fa-solid fa-temperature-high\"></i>\n                                            {{ record.Temperature !== null && record.Temperature !== undefined ? record.Temperature : '\u2014' }}\n                                        </div>\n                                    </div>\n                                    \n                                    <div class=\"detail-field\">\n                                        <label>Top P</label>\n                                        <div class=\"detail-value\" [class.null-value]=\"record.TopP === null || record.TopP === undefined\">\n                                            <i class=\"fa-solid fa-percentage\"></i>\n                                            {{ record.TopP !== null && record.TopP !== undefined ? record.TopP : '\u2014' }}\n                                        </div>\n                                    </div>\n                                    \n                                    <div class=\"detail-field\">\n                                        <label>Top K</label>\n                                        <div class=\"detail-value\" [class.null-value]=\"record.TopK === null || record.TopK === undefined\">\n                                            <i class=\"fa-solid fa-list-ol\"></i>\n                                            {{ record.TopK !== null && record.TopK !== undefined ? record.TopK : '\u2014' }}\n                                        </div>\n                                    </div>\n                                    \n                                    <div class=\"detail-field\">\n                                        <label>Min P</label>\n                                        <div class=\"detail-value\" [class.null-value]=\"record.MinP === null || record.MinP === undefined\">\n                                            <i class=\"fa-solid fa-filter\"></i>\n                                            {{ record.MinP !== null && record.MinP !== undefined ? record.MinP : '\u2014' }}\n                                        </div>\n                                    </div>\n                                    \n                                    <div class=\"detail-field\">\n                                        <label>Frequency Penalty</label>\n                                        <div class=\"detail-value\" [class.null-value]=\"record.FrequencyPenalty === null || record.FrequencyPenalty === undefined\">\n                                            <i class=\"fa-solid fa-repeat\"></i>\n                                            {{ record.FrequencyPenalty !== null && record.FrequencyPenalty !== undefined ? record.FrequencyPenalty : '\u2014' }}\n                                        </div>\n                                    </div>\n                                    \n                                    <div class=\"detail-field\">\n                                        <label>Presence Penalty</label>\n                                        <div class=\"detail-value\" [class.null-value]=\"record.PresencePenalty === null || record.PresencePenalty === undefined\">\n                                            <i class=\"fa-solid fa-plus-circle\"></i>\n                                            {{ record.PresencePenalty !== null && record.PresencePenalty !== undefined ? record.PresencePenalty : '\u2014' }}\n                                        </div>\n                                    </div>\n                                    \n                                    <div class=\"detail-field\">\n                                        <label>Seed</label>\n                                        <div class=\"detail-value\" [class.null-value]=\"record.Seed === null || record.Seed === undefined\">\n                                            <i class=\"fa-solid fa-seedling\"></i>\n                                            {{ record.Seed !== null && record.Seed !== undefined ? record.Seed : '\u2014' }}\n                                        </div>\n                                    </div>\n\n                                    <div class=\"detail-field\">\n                                        <label>Stop Sequences</label>\n                                        <div class=\"detail-value\" [class.null-value]=\"!record.StopSequences\">\n                                            <i class=\"fa-solid fa-stop-circle\"></i>\n                                            {{ record.StopSequences || '\u2014' }}\n                                        </div>\n                                    </div>\n\n                                    <div class=\"detail-field\">\n                                        <label>Assistant Prefill</label>\n                                        <div class=\"detail-value\" [class.null-value]=\"!record.AssistantPrefill\">\n                                            <i class=\"fa-solid fa-wand-magic-sparkles\"></i>\n                                            {{ record.AssistantPrefill || '\u2014' }}\n                                        </div>\n                                    </div>\n\n                                    @if (record.RunAt) {\n                                        <div class=\"detail-field\">\n                                            <label>Started At</label>\n                                            <div class=\"detail-value\">\n                                                <i class=\"fa-solid fa-clock\"></i>\n                                                {{ record.RunAt | date:'medium' }}\n                                            </div>\n                                        </div>\n                                    }\n                                    \n                                    @if (record.CompletedAt) {\n                                        <div class=\"detail-field\">\n                                            <label>Completed At</label>\n                                            <div class=\"detail-value\">\n                                                <i class=\"fa-solid fa-check-circle\"></i>\n                                                {{ record.CompletedAt | date:'medium' }}\n                                            </div>\n                                        </div>\n                                    }\n                                </div>\n                            </div>\n                    </mj-accordion-panel>\n\n                    <!-- Model Specific Response Details Panel -->\n                    @if (record.ModelSpecificResponseDetails) {\n                        <mj-accordion-panel [Expanded]=\"modelSpecificExpanded\" (ExpandedChange)=\"onModelSpecificPanelToggle($event)\" style=\"margin-bottom: 8px;\">\n                            <ng-template mjAccordionTitle>\n                                <span class=\"panel-title\">\n                                    <i class=\"fa-solid fa-microchip\"></i>\n                                    Model Specific Response Details\n                                    <span class=\"panel-badge\">JSON</span>\n                                </span>\n                            </ng-template>\n                                <div class=\"panel-content\">\n                                    <div class=\"json-editor-container\">\n                                        <div class=\"json-toolbar\">\n                                            <button mjButton\n                                                variant=\"flat\"\n                                                size=\"sm\"\n                                                (click)=\"copyToClipboard(formattedModelSpecificResponseDetails, 'Model Specific Response Details')\"\n                                                title=\"Copy JSON\">\n                                                <i class=\"fa-solid fa-copy\"></i> Copy\n                                            </button>\n                                            <button mjButton\n                                                variant=\"flat\"\n                                                size=\"sm\"\n                                                (click)=\"openFullScreen(formattedModelSpecificResponseDetails, 'json', 'Model Specific Response Details')\"\n                                                title=\"View full screen\">\n                                                <i class=\"fa-solid fa-expand\"></i>\n                                            </button>\n                                        </div>\n                                        <mj-code-editor \n                                            [(ngModel)]=\"formattedModelSpecificResponseDetails\"\n                                            name=\"formattedModelSpecificResponseDetails\"\n                                            [readonly]=\"true\"\n                                            [language]=\"'json'\"\n                                            [lineWrapping]=\"true\"\n                                            style=\"height: 400px; width: 100%;\">\n                                        </mj-code-editor>\n                                    </div>\n                                </div>\n                        </mj-accordion-panel>\n                    }\n\n                    <!-- Model Selection & Performance Panel (v2.78 fields) -->\n                    <mj-accordion-panel [Expanded]=\"false\" (ExpandedChange)=\"onModelSelectionPanelToggle($event)\" style=\"margin-bottom: 8px;\">\n                        <ng-template mjAccordionTitle>\n                            <span class=\"panel-title\">\n                                <i class=\"fa-solid fa-microchip\"></i>\n                                Model Selection &amp; Performance\n                                @if (record.CacheHit) {\n                                    <span class=\"panel-badge success\">Cached</span>\n                                }\n                                @if (record.WasSelectedResult) {\n                                    <span class=\"panel-badge success\">Selected</span>\n                                }\n                            </span>\n                        </ng-template>\n                            <div class=\"panel-content\">\n                                <div class=\"detail-fields-grid\">\n                                    <!-- Model Selection Details -->\n                                    <div class=\"detail-field\">\n                                        <label>Status</label>\n                                        <div class=\"detail-value\">\n                                            <i class=\"fa-solid fa-info-circle\"></i>\n                                            {{ record.Status || 'Unknown' }}\n                                        </div>\n                                    </div>\n                                    \n                                    <div class=\"detail-field\">\n                                        <label>Selection Strategy</label>\n                                        <div class=\"detail-value\">\n                                            <i class=\"fa-solid fa-strategy\"></i>\n                                            {{ record.SelectionStrategy || '\u2014' }}\n                                        </div>\n                                    </div>\n                                    \n                                    <div class=\"detail-field\">\n                                        <label>Model Power Rank</label>\n                                        <div class=\"detail-value\" [class.null-value]=\"record.ModelPowerRank === null\">\n                                            <i class=\"fa-solid fa-ranking-star\"></i>\n                                            {{ record.ModelPowerRank !== null ? record.ModelPowerRank : '\u2014' }}\n                                        </div>\n                                    </div>\n                                    \n                                    <!-- Cache Information -->\n                                    <div class=\"detail-field\">\n                                        <label>Cache Hit</label>\n                                        <div class=\"detail-value\">\n                                            <i [class]=\"record.CacheHit ? 'fa-solid fa-check-circle' : 'fa-solid fa-times-circle'\"></i>\n                                            {{ record.CacheHit ? 'Yes' : 'No' }}\n                                        </div>\n                                    </div>\n                                    \n                                    @if (record.CacheKey) {\n                                        <div class=\"detail-field full-width\">\n                                            <label>Cache Key</label>\n                                            <div class=\"detail-value\">\n                                                <i class=\"fa-solid fa-key\"></i>\n                                                <code>{{ record.CacheKey }}</code>\n                                            </div>\n                                        </div>\n                                    }\n                                    \n                                    <!-- Judge Information -->\n                                    @if (record.JudgeID) {\n                                        <div class=\"detail-field\">\n                                            <label>Judge Prompt</label>\n                                            <div class=\"detail-value clickable\" (click)=\"navigateToEntity('MJ: AI Prompts', record.JudgeID)\" title=\"View Judge Prompt\">\n                                                <i class=\"fa-solid fa-gavel\"></i>\n                                                {{ record.Judge || 'Unknown' }}\n                                                <i class=\"fa-solid fa-external-link\"></i>\n                                            </div>\n                                        </div>\n                                    }\n                                    \n                                    @if (record.JudgeScore !== null) {\n                                        <div class=\"detail-field\">\n                                            <label>Judge Score</label>\n                                            <div class=\"detail-value\">\n                                                <i class=\"fa-solid fa-star\"></i>\n                                                {{ record.JudgeScore }}\n                                            </div>\n                                        </div>\n                                    }\n                                    \n                                    <div class=\"detail-field\">\n                                        <label>Was Selected Result</label>\n                                        <div class=\"detail-value\">\n                                            <i [class]=\"record.WasSelectedResult ? 'fa-solid fa-trophy' : 'fa-solid fa-times'\"></i>\n                                            {{ record.WasSelectedResult ? 'Yes' : 'No' }}\n                                        </div>\n                                    </div>\n                                    \n                                    <!-- Performance Metrics -->\n                                    <div class=\"detail-field\">\n                                        <label>Streaming Enabled</label>\n                                        <div class=\"detail-value\">\n                                            <i [class]=\"record.StreamingEnabled ? 'fa-solid fa-stream' : 'fa-solid fa-ban'\"></i>\n                                            {{ record.StreamingEnabled ? 'Yes' : 'No' }}\n                                        </div>\n                                    </div>\n                                    \n                                    @if (record.FirstTokenTime !== null) {\n                                        <div class=\"detail-field\">\n                                            <label>First Token Time</label>\n                                            <div class=\"detail-value\">\n                                                <i class=\"fa-solid fa-bolt\"></i>\n                                                {{ record.FirstTokenTime }} ms\n                                            </div>\n                                        </div>\n                                    }\n                                    \n                                    @if (record.Cancelled) {\n                                        <div class=\"detail-field\">\n                                            <label>Cancelled</label>\n                                            <div class=\"detail-value error\">\n                                                <i class=\"fa-solid fa-ban\"></i>\n                                                Yes\n                                            </div>\n                                        </div>\n                                        \n                                        @if (record.CancellationReason) {\n                                            <div class=\"detail-field full-width\">\n                                                <label>Cancellation Reason</label>\n                                                <div class=\"detail-value\">\n                                                    <i class=\"fa-solid fa-exclamation-circle\"></i>\n                                                    {{ record.CancellationReason }}\n                                                </div>\n                                            </div>\n                                        }\n                                    }\n                                </div>\n                                \n                                <!-- Model Selection JSON -->\n                                @if (record.ModelSelection) {\n                                    <div class=\"model-selection-json\">\n                                        <div class=\"json-toolbar\">\n                                            <h4 style=\"margin: 0;\">Model Selection Details</h4>\n                                            <button mjButton\n                                                variant=\"flat\"\n                                                size=\"sm\"\n                                                (click)=\"openFullScreen(formattedModelSelection, 'json', 'Model Selection')\"\n                                                title=\"View full screen\">\n                                                <i class=\"fa-solid fa-expand\"></i>\n                                            </button>\n                                        </div>\n                                        <div class=\"json-viewer-container\">\n                                            <mj-code-editor\n                                                [(ngModel)]=\"formattedModelSelection\"\n                                                name=\"formattedModelSelection\"\n                                                [readonly]=\"true\"\n                                                [language]=\"'json'\"\n                                                [lineWrapping]=\"true\"\n                                                style=\"height: 300px; width: 100%;\">\n                                            </mj-code-editor>\n                                        </div>\n                                    </div>\n                                }\n                                \n                                <!-- Error Details JSON -->\n                                @if (record.ErrorDetails) {\n                                    <div class=\"error-details-json\">\n                                        <div class=\"json-toolbar\">\n                                            <h4 style=\"margin: 0;\">Error Details</h4>\n                                            <button mjButton\n                                                variant=\"flat\"\n                                                size=\"sm\"\n                                                (click)=\"openFullScreen(formattedErrorDetails, 'json', 'Error Details')\"\n                                                title=\"View full screen\">\n                                                <i class=\"fa-solid fa-expand\"></i>\n                                            </button>\n                                        </div>\n                                        <div class=\"json-viewer-container\">\n                                            <mj-code-editor\n                                                [(ngModel)]=\"formattedErrorDetails\"\n                                                name=\"formattedErrorDetails\"\n                                                [readonly]=\"true\"\n                                                [language]=\"'json'\"\n                                                [lineWrapping]=\"true\"\n                                                style=\"height: 200px; width: 100%;\">\n                                            </mj-code-editor>\n                                        </div>\n                                    </div>\n                                }\n                            </div>\n                    </mj-accordion-panel>\n\n            </div>\n        </form>\n</mj-record-form-container>\n}\n\n<!-- Full-screen overlay -->\n    @if (FullScreenContent) {\n        <div class=\"fullscreen-overlay\" (click)=\"closeFullScreen()\">\n            <div class=\"fullscreen-container\" (click)=\"$event.stopPropagation()\">\n                <div class=\"fullscreen-header\">\n                    <span class=\"fullscreen-title\">\n                        <i class=\"fa-solid fa-expand\"></i>\n                        {{ FullScreenTitle }}\n                    </span>\n                    <div class=\"fullscreen-actions\">\n                        <button mjButton\n                            variant=\"flat\"\n                            size=\"sm\"\n                            (click)=\"copyToClipboard(FullScreenContent, FullScreenTitle)\"\n                            title=\"Copy content\">\n                            <i class=\"fa-solid fa-copy\"></i> Copy\n                        </button>\n                        <button mjButton\n                            variant=\"flat\"\n                            size=\"sm\"\n                            (click)=\"closeFullScreen()\"\n                            title=\"Close\">\n                            <i class=\"fa-solid fa-times\"></i> Close\n                        </button>\n                    </div>\n                </div>\n                <div class=\"fullscreen-body\">\n                    <mj-code-editor\n                        [value]=\"FullScreenContent\"\n                        [readonly]=\"true\"\n                        [language]=\"FullScreenLanguage\"\n                        style=\"height: 100%; width: 100%;\">\n                    </mj-code-editor>\n                </div>\n            </div>\n        </div>\n    }", styles: ["/* Host and Container Layout */\n:host {\n    display: block;\n    height: 100%;\n}\n\n.record-form-container {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    min-height: 0;\n    overflow: hidden;\n}\n\n.record-form {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    min-height: 0 !important;\n    overflow: hidden;\n}\n\n.form-content {\n    padding: 16px;\n    flex: 1;\n    min-height: 0;\n    overflow-y: auto;\n}\n\n/* Error Info Styles */\n.error-info {\n    margin-top: 16px;\n    padding: 16px;\n    background-color: color-mix(in srgb, var(--mj-status-error) 5%, var(--mj-bg-surface));\n    border: 1px solid color-mix(in srgb, var(--mj-status-error) 20%, var(--mj-bg-surface));\n    border-radius: 8px;\n}\n\n.finish-reason {\n    margin: 0 0 12px 0;\n    color: var(--mj-status-error);\n    font-size: 14px;\n}\n\n.error-details {\n    margin-top: 12px;\n}\n\n.error-details h4 {\n    margin: 0 0 8px 0;\n    color: color-mix(in srgb, var(--mj-status-error) 80%, black);\n    font-size: 14px;\n    font-weight: 600;\n}\n\n.error-hint {\n    margin: 0;\n    color: color-mix(in srgb, var(--mj-status-error) 70%, black);\n    font-size: 14px;\n    font-style: italic;\n}\n\n/* Header Section */\n.prompt-run-header {\n    background: var(--mj-bg-surface-card);\n    border-bottom: 2px solid var(--mj-border-default);\n    padding: 20px;\n    margin-bottom: 0;\n}\n\n.header-content {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    gap: 20px;\n    margin-bottom: 16px;\n}\n\n.run-overview {\n    display: flex;\n    align-items: flex-start;\n    gap: 16px;\n    flex: 1;\n}\n\n.run-icon-wrapper {\n    width: 56px;\n    height: 56px;\n    border-radius: 12px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n}\n\n.run-icon-wrapper i {\n    font-size: 24px;\n}\n\n.run-info {\n    flex: 1;\n    min-width: 0;\n}\n\n.run-title {\n    margin: 0 0 8px 0;\n    font-size: 1.5em;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.run-id {\n    font-size: 0.8em;\n    color: var(--mj-text-muted);\n    font-weight: 400;\n    font-family: 'Courier New', monospace;\n}\n\n.run-meta {\n    display: flex;\n    align-items: stretch;\n    gap: 10px;\n    flex-wrap: wrap;\n}\n\n/* Shared meta-card style (Status, Execution, single Prompt) */\n.meta-card {\n    display: flex;\n    flex-direction: column;\n    border-radius: 8px;\n    overflow: hidden;\n    border: 1px solid var(--mj-border-default);\n}\n\n.meta-card-body {\n    display: flex;\n    align-items: center;\n    gap: 7px;\n    padding: 8px 12px;\n    background: var(--mj-bg-surface-card);\n    font-size: 0.82em;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n    white-space: nowrap;\n}\n\n.meta-card-body.clickable {\n    cursor: pointer;\n    transition: color 0.15s;\n}\n\n.meta-card-body.clickable:hover {\n    color: var(--mj-brand-primary-hover);\n}\n\n/* Status indicator dot */\n.status-indicator {\n    width: 8px;\n    height: 8px;\n    border-radius: 50%;\n    flex-shrink: 0;\n}\n\n/* C3 Stacked Connector \u2014 Prompt Card */\n.prompt-card-c3 {\n    display: flex;\n    flex-direction: column;\n    border-radius: 10px;\n    overflow: hidden;\n    border: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface-card);\n}\n\n.c3-child-section {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 14px;\n    font-size: 0.92em;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    cursor: pointer;\n    transition: color 0.15s;\n    border-left: 3px solid var(--mj-brand-primary);\n}\n\n.c3-child-section:hover {\n    color: var(--mj-brand-primary-hover);\n}\n\n.c3-child-section i.prompt-icon {\n    color: var(--mj-brand-primary);\n    font-size: 1rem;\n}\n\n.c3-divider {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 0 14px;\n    border-left: 3px solid var(--mj-brand-primary);\n}\n\n.c3-line {\n    flex: 1;\n    height: 1px;\n    background: var(--mj-border-default);\n}\n\n.c3-divider-label {\n    font-size: 0.55rem;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.1em;\n    color: var(--mj-text-disabled);\n    white-space: nowrap;\n}\n\n.c3-parent-section {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 7px 14px 9px 14px;\n    font-size: 0.76em;\n    color: var(--mj-text-muted);\n    cursor: pointer;\n    transition: color 0.15s;\n    border-left: 3px solid color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.c3-parent-section:hover {\n    color: var(--mj-text-secondary);\n}\n\n.c3-parent-section i {\n    font-size: 0.75rem;\n}\n\n.c3-link-icon {\n    margin-left: auto;\n    font-size: 0.6rem !important;\n    opacity: 0.4;\n}\n\n.c3-parent-section:hover .c3-link-icon {\n    opacity: 0.8;\n}\n\n/* C3 Model Card */\n.model-card-c3 {\n    display: flex;\n    flex-direction: column;\n    border-radius: 8px;\n    overflow: hidden;\n    border: 1px solid var(--mj-border-default);\n    cursor: pointer;\n    transition: border-color 0.15s;\n}\n\n.model-card-c3:hover {\n    border-color: var(--mj-border-strong);\n}\n\n.c3-card-label {\n    font-size: 0.6rem;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.08em;\n    padding: 4px 10px;\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-muted);\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.c3-card-body {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    padding: 8px 12px;\n    background: var(--mj-bg-surface-card);\n    font-size: 0.82em;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n}\n\n.c3-model-name {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n.c3-model-name i {\n    color: var(--mj-text-muted);\n    font-size: 0.9rem;\n}\n\n.c3-vendor-name {\n    font-size: 0.72em;\n    color: var(--mj-text-muted);\n    font-weight: 400;\n    padding-left: 22px;\n}\n\n.original-run {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 12px;\n    border-radius: 16px;\n    background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n    font-size: 0.85em;\n}\n\n.original-link {\n    color: var(--mj-status-error);\n    text-decoration: none;\n    cursor: pointer;\n    transition: all 0.2s;\n}\n\n.original-link:hover {\n    color: color-mix(in srgb, var(--mj-status-error) 85%, black);\n    text-decoration: underline;\n}\n\n.run-actions {\n    display: flex;\n    gap: 8px;\n}\n\n/* Metrics Bar */\n.metrics-bar {\n    display: flex;\n    gap: 24px;\n    padding-top: 16px;\n    border-top: 1px solid var(--mj-border-default);\n    flex-wrap: wrap;\n}\n\n.metric-item {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.metric-item > i {\n    font-size: 1.2em;\n    color: var(--mj-text-muted);\n    width: 24px;\n    text-align: center;\n}\n\n.metric-content {\n    display: flex;\n    flex-direction: column;\n}\n\n.metric-label {\n    font-size: 0.75em;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.metric-value {\n    font-size: 1.1em;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.config-link {\n    color: var(--mj-brand-primary);\n    text-decoration: none;\n    cursor: pointer;\n    transition: color 0.2s;\n}\n\n.config-link:hover {\n    color: color-mix(in srgb, var(--mj-brand-primary) 75%, black);\n    text-decoration: underline;\n}\n\n/* Panels */\n.form-content {\n    padding: 16px;\n}\n\n.panel-title {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-weight: 600;\n}\n\n/* Nested Sub-Panel Styles */\n.sub-panel-title {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-weight: 500;\n    font-size: 0.95em;\n}\n\n.sub-panel-content {\n    padding: 0;\n}\n\n/* Nested accordion panel styles */\n.nested-panels mj-accordion-panel {\n    margin-bottom: 8px;\n}\n\n/* Ensure chat message viewer takes appropriate height */\n.sub-panel-content mj-chat-message-viewer {\n    display: block;\n    min-height: 200px;\n    max-height: 750px; /* Increased by 50% from 500px */\n    height: auto;\n    overflow: hidden;\n}\n\n/* Different colors for sub-expansion panels */\n.sub-expansion-panel {\n    margin-bottom: 8px;\n}\n\n/* Sub-expansion panel styles */\n.sub-expansion-panel {\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    overflow: hidden;\n}\n\n.panel-badge {\n    margin-left: auto;\n    padding: 2px 8px;\n    border-radius: 12px;\n    background: var(--mj-border-default);\n    color: var(--mj-text-secondary);\n    font-size: 0.75em;\n    font-weight: 500;\n}\n\n.panel-badge.error {\n    background: var(--mj-status-error);\n    color: white;\n}\n\n.panel-count {\n    color: var(--mj-text-muted);\n    font-weight: 400;\n    font-size: 0.9em;\n}\n\n.panel-content {\n    padding: 20px;\n    max-height: none !important;\n    overflow: visible !important;\n}\n\n/* JSON Editor Container */\n.json-editor-container {\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    overflow: hidden;\n}\n\n.json-toolbar {\n    background: var(--mj-bg-surface-card);\n    padding: 8px 12px;\n    border-bottom: 1px solid var(--mj-border-default);\n    display: flex;\n    justify-content: flex-end;\n}\n\n/* Error Message */\n.error-message {\n    background: color-mix(in srgb, var(--mj-status-error) 6%, var(--mj-bg-surface));\n    border: 1px solid var(--mj-status-error);\n    border-radius: 6px;\n    padding: 16px;\n    display: flex;\n    gap: 16px;\n    margin-bottom: 16px;\n}\n\n.error-message i {\n    font-size: 1.5em;\n    color: var(--mj-status-error);\n    flex-shrink: 0;\n}\n\n.error-content h4 {\n    margin: 0 0 8px 0;\n    color: var(--mj-status-error);\n    font-size: 1em;\n}\n\n.error-content p {\n    margin: 0;\n    color: var(--mj-text-secondary);\n}\n\n/* Empty State */\n.empty-state {\n    text-align: center;\n    padding: 60px 40px;\n    color: var(--mj-text-muted);\n}\n\n.empty-state i {\n    font-size: 3em;\n    margin-bottom: 16px;\n    opacity: 0.3;\n}\n\n.empty-state p {\n    margin: 0;\n    font-size: 1.1em;\n}\n\n/* Loading State */\n.loading-state {\n    text-align: center;\n    padding: 60px 40px;\n    color: var(--mj-text-muted);\n}\n\n.loading-state i {\n    font-size: 3em;\n    margin-bottom: 16px;\n    opacity: 0.6;\n    color: var(--mj-brand-primary);\n}\n\n.loading-state p {\n    margin: 0;\n    font-size: 1.1em;\n}\n\n/* Metrics Grid */\n.metrics-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n    gap: 20px;\n    margin-bottom: 24px;\n}\n\n.metric-card {\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    padding: 20px;\n}\n\n.metric-header {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin-bottom: 12px;\n}\n\n.metric-header i {\n    font-size: 1.2em;\n    color: var(--mj-text-muted);\n}\n\n.metric-header h4 {\n    margin: 0;\n    font-size: 0.9em;\n    color: var(--mj-text-muted);\n    font-weight: 500;\n}\n\n.metric-value.large {\n    font-size: 1.8em;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n}\n\n.metric-rollup {\n    margin-top: 8px;\n    font-size: 0.85em;\n    color: var(--mj-text-muted);\n}\n\n.metric-currency {\n    margin-top: 4px;\n    font-size: 0.85em;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n}\n\n/* Additional Metrics */\n.additional-metrics {\n    padding-top: 16px;\n}\n\n.metric-row {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 8px 0;\n    border-bottom: 1px solid var(--mj-bg-surface-sunken);\n}\n\n.metric-row:last-child {\n    border-bottom: none;\n}\n\n.metric-row .metric-label {\n    font-weight: 500;\n    color: var(--mj-text-muted);\n}\n\n.metric-row .metric-value {\n    font-weight: 400;\n    color: var(--mj-text-primary);\n}\n\n.metric-row .metric-value.link {\n    color: var(--mj-brand-primary);\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    transition: color 0.2s;\n}\n\n.metric-row .metric-value.link:hover {\n    color: color-mix(in srgb, var(--mj-brand-primary) 75%, black);\n}\n\n/* Hierarchy Section */\n.parent-run-section,\n.child-runs-section {\n    margin-bottom: 24px;\n}\n\n.parent-run-section:last-child,\n.child-runs-section:last-child {\n    margin-bottom: 0;\n}\n\n.parent-run-section h4,\n.child-runs-section h4 {\n    margin: 0 0 12px 0;\n    font-size: 0.95em;\n    color: var(--mj-text-secondary);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.runs-list {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.run-item {\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    padding: 12px 16px;\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    cursor: pointer;\n    transition: all 0.2s;\n}\n\n.run-item:hover {\n    background: var(--mj-border-default);\n    border-color: var(--mj-border-strong);\n}\n\n.run-item.parent {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-bg-surface));\n}\n\n.run-item.parent:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 20%, var(--mj-bg-surface));\n}\n\n.run-item-icon {\n    width: 36px;\n    height: 36px;\n    border-radius: 8px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n}\n\n.run-item-content {\n    flex: 1;\n    min-width: 0;\n}\n\n.run-item-title {\n    font-weight: 500;\n    color: var(--mj-text-primary);\n    margin-bottom: 4px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.execution-order {\n    background: var(--mj-text-muted);\n    color: white;\n    padding: 2px 6px;\n    border-radius: 10px;\n    font-size: 0.75em;\n    font-weight: 600;\n}\n\n.run-item-type {\n    font-size: 0.85em;\n    color: var(--mj-text-muted);\n    font-weight: 400;\n}\n\n.run-item-meta {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    font-size: 0.85em;\n    color: var(--mj-text-muted);\n}\n\n.run-item-meta span {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n}\n\n.status-indicator {\n    font-weight: 500;\n}\n\n.run-item > i:last-child {\n    color: var(--mj-text-muted);\n    font-size: 0.85em;\n}\n\n/* Detail Fields Grid */\n.detail-fields-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n    gap: 24px;\n    width: 100%;\n    min-height: auto;\n    overflow: visible;\n}\n\n.detail-field {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.detail-field label {\n    font-size: 0.85em;\n    color: var(--mj-text-muted);\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.detail-value {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    font-size: 1em;\n    color: var(--mj-text-primary);\n    padding: 10px 14px;\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    transition: all 0.2s;\n}\n\n.detail-value i:first-child {\n    color: var(--mj-text-muted);\n    font-size: 1.1em;\n    width: 20px;\n    text-align: center;\n}\n\n.detail-value.clickable {\n    cursor: pointer;\n}\n\n.detail-value.clickable:hover {\n    background: var(--mj-border-default);\n    border-color: var(--mj-border-strong);\n    color: var(--mj-brand-primary);\n    transform: translateY(-1px);\n    box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n\n.detail-value.clickable i:last-child {\n    margin-left: auto;\n    font-size: 0.85em;\n    opacity: 0.6;\n}\n\n.detail-value.clickable:hover i:last-child {\n    opacity: 1;\n}\n\n.detail-value.null-value {\n    color: var(--mj-text-disabled);\n    font-style: italic;\n}\n\n.detail-value.null-value i:first-child {\n    opacity: 0.5;\n}\n\n/* Accordion Panel Overrides */\nmj-accordion-panel {\n    display: block;\n}\n\n/* Validation Panel Styles */\n.validation-summary {\n    margin-bottom: 24px;\n}\n\n.summary-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 16px;\n}\n\n.summary-header h4 {\n    margin: 0;\n    font-size: 1.1em;\n    color: var(--mj-text-primary);\n}\n\n.validation-status {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 6px 16px;\n    border-radius: 20px;\n    font-weight: 500;\n    font-size: 0.9em;\n}\n\n.validation-status.success {\n    background: color-mix(in srgb, var(--mj-status-success) 12%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.validation-status.failed {\n    background: color-mix(in srgb, var(--mj-status-error) 12%, var(--mj-bg-surface));\n    color: var(--mj-status-error);\n}\n\n.validation-metrics {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n    gap: 12px;\n    margin-bottom: 20px;\n}\n\n.metric-card.small {\n    padding: 16px;\n    text-align: center;\n}\n\n.metric-card.small .metric-label {\n    font-size: 0.8em;\n    margin-bottom: 8px;\n    font-weight: 600;\n}\n\n.metric-card.small .metric-value {\n    font-size: 1.4em;\n    font-weight: 700;\n}\n\n.validation-error,\n.common-error {\n    background: color-mix(in srgb, var(--mj-status-error) 6%, var(--mj-bg-surface));\n    border: 1px solid color-mix(in srgb, var(--mj-status-error) 18%, var(--mj-bg-surface));\n    border-radius: 8px;\n    padding: 16px;\n    margin-bottom: 16px;\n}\n\n.validation-error h5,\n.common-error h5 {\n    margin: 0 0 8px 0;\n    color: var(--mj-status-error);\n    font-size: 0.95em;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.validation-error p,\n.common-error p {\n    margin: 0;\n    color: var(--mj-text-secondary);\n    font-size: 0.9em;\n}\n\n.error-count {\n    display: inline-block;\n    margin-top: 8px;\n    padding: 2px 8px;\n    background: var(--mj-status-error);\n    color: white;\n    border-radius: 12px;\n    font-size: 0.75em;\n    font-weight: 500;\n}\n\n/* Retry Timeline */\n.retry-timeline {\n    margin-bottom: 24px;\n}\n\n.retry-timeline h4 {\n    margin: 0 0 12px 0;\n    font-size: 1em;\n    color: var(--mj-text-secondary);\n}\n\n.timeline-info {\n    display: flex;\n    gap: 24px;\n    flex-wrap: wrap;\n}\n\n.timeline-stat {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    color: var(--mj-text-muted);\n    font-size: 0.9em;\n}\n\n.timeline-stat i {\n    font-size: 1.1em;\n}\n\n/* Validation Attempts */\n.validation-attempts {\n    margin-bottom: 24px;\n}\n\n.validation-attempts h4 {\n    margin: 0 0 12px 0;\n    font-size: 1em;\n    color: var(--mj-text-secondary);\n}\n\n.attempts-list {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.attempt-item {\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    padding: 12px 16px;\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    gap: 16px;\n}\n\n.attempt-item.success {\n    background: color-mix(in srgb, var(--mj-status-success) 6%, var(--mj-bg-surface));\n    border-color: color-mix(in srgb, var(--mj-status-success) 18%, var(--mj-bg-surface));\n}\n\n.attempt-item.failed {\n    background: color-mix(in srgb, var(--mj-status-error) 6%, var(--mj-bg-surface));\n    border-color: color-mix(in srgb, var(--mj-status-error) 18%, var(--mj-bg-surface));\n}\n\n.attempt-number {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.attempt-item.success .attempt-number {\n    color: var(--mj-status-success);\n}\n\n.attempt-item.failed .attempt-number {\n    color: var(--mj-status-error);\n}\n\n.attempt-details {\n    flex: 1;\n    display: flex;\n    flex-wrap: wrap;\n    gap: 12px;\n    font-size: 0.85em;\n}\n\n.attempt-time {\n    color: var(--mj-text-muted);\n}\n\n.attempt-error {\n    color: var(--mj-status-error);\n    flex: 1 0 100%;\n}\n\n.output-length {\n    color: var(--mj-text-muted);\n    font-style: italic;\n}\n\n/* Validation JSON */\n.validation-json {\n    margin-top: 24px;\n}\n\n.validation-json h4 {\n    margin: 0 0 12px 0;\n    font-size: 1em;\n    color: var(--mj-text-secondary);\n}\n\n.json-viewer-container {\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    overflow: hidden;\n}\n\n/* Panel badge styles */\n.panel-badge.success {\n    background: var(--mj-status-success);\n    color: white;\n}\n\n/* Full-screen overlay */\n.fullscreen-overlay {\n    position: fixed;\n    inset: 0;\n    z-index: 10000;\n    background: var(--mj-bg-overlay, rgba(0, 0, 0, 0.6));\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 1.5rem;\n}\n\n.fullscreen-container {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    height: 100%;\n    max-width: 95vw;\n    max-height: 95vh;\n    background: var(--mj-bg-surface);\n    border-radius: 10px;\n    border: 1px solid var(--mj-border-default);\n    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);\n    overflow: hidden;\n}\n\n.fullscreen-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 0.75rem 1rem;\n    background: var(--mj-bg-surface-sunken);\n    border-bottom: 1px solid var(--mj-border-default);\n    flex-shrink: 0;\n}\n\n.fullscreen-title {\n    font-weight: 600;\n    font-size: 0.9rem;\n    color: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n}\n\n.fullscreen-title i {\n    color: var(--mj-text-secondary);\n}\n\n.fullscreen-actions {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.fullscreen-body {\n    flex: 1;\n    min-height: 0;\n    overflow: hidden;\n}\n\n.fullscreen-body mj-code-editor {\n    display: block;\n    height: 100%;\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-ai-prompt-run-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (record) {\n<mj-record-form-container [Record]=\"record\" [FormComponent]=\"this\"\n    [ToolbarConfig]=\"toolbarConfig\"\n    [WidthMode]=\"'full-width'\"\n    (Navigate)=\"OnFormNavigate($event)\"\n    (DeleteRequested)=\"OnDeleteRequested()\"\n    (FavoriteToggled)=\"OnFavoriteToggled()\"\n    (HistoryRequested)=\"OnHistoryRequested()\"\n    (ListManagementRequested)=\"OnListManagementRequested()\">\n        <form class=\"record-form\" #form=\"ngForm\" style=\"display: flex; flex-direction: column; height: 100%; overflow: hidden;\">\n\n            <!-- Header Section -->\n            <div class=\"prompt-run-header\">\n                <div class=\"header-content\">\n                    <div class=\"run-overview\">\n                        <div class=\"run-icon-wrapper\" [style.background-color]=\"getStatusColor() + '20'\">\n                            <i [class]=\"'fa-solid ' + getStatusIcon()\" [style.color]=\"getStatusColor()\"></i>\n                        </div>\n                        <div class=\"run-info\">\n                            <h1 class=\"run-title\">\n                                Prompt Run\n                                @if (record.ID) {\n                                    <span class=\"run-id\">#{{ record.ID.substring(0, 8) }}</span>\n                                }\n                            </h1>\n                            <div class=\"run-meta\">\n                                <!-- Status Card -->\n                                <div class=\"meta-card status-card\">\n                                    <div class=\"c3-card-label\">Status</div>\n                                    <div class=\"meta-card-body\">\n                                        <span class=\"status-indicator\" [style.background-color]=\"getStatusColor()\"></span>\n                                        <i [class]=\"'fa-solid ' + getStatusIcon()\" [style.color]=\"getStatusColor()\"></i>\n                                        {{ getStatusText() }}\n                                    </div>\n                                </div>\n\n                                <!-- Execution Card -->\n                                @if (record.RunType) {\n                                    <div class=\"meta-card execution-card\">\n                                        <div class=\"c3-card-label\">Execution</div>\n                                        <div class=\"meta-card-body\">\n                                            <i [class]=\"'fa-solid ' + getRunTypeIcon(record.RunType)\" [style.color]=\"getRunTypeColor(record.RunType)\"></i>\n                                            {{ record.RunType }}\n                                        </div>\n                                    </div>\n                                }\n\n                                <!-- Prompt Card -->\n                                @if (prompt) {\n                                    @if (record.ChildPromptID) {\n                                        <!-- C3 Stacked Connector: child prompt prominent, parent nested -->\n                                        <div class=\"prompt-card-c3\">\n                                            <div class=\"c3-card-label\">Prompt</div>\n                                            <div class=\"c3-child-section\" (click)=\"navigateToEntity('MJ: AI Prompts', record.ChildPromptID)\" title=\"View Agent Prompt\">\n                                                <i class=\"fa-solid fa-comment prompt-icon\"></i>\n                                                {{ record.ChildPrompt }}\n                                            </div>\n                                            <div class=\"c3-divider\">\n                                                <span class=\"c3-line\"></span>\n                                                <span class=\"c3-divider-label\">wrapped by</span>\n                                                <span class=\"c3-line\"></span>\n                                            </div>\n                                            <div class=\"c3-parent-section\" (click)=\"navigateToEntity('MJ: AI Prompts', prompt.ID)\" title=\"View System Prompt\">\n                                                <i class=\"fa-solid fa-cog\"></i>\n                                                {{ prompt.Name }}\n                                                <i class=\"fa-solid fa-arrow-up-right-from-square c3-link-icon\"></i>\n                                            </div>\n                                        </div>\n                                    } @else {\n                                        <!-- Single prompt (no child) \u2014 same card style -->\n                                        <div class=\"meta-card prompt-single-card\">\n                                            <div class=\"c3-card-label\">Prompt</div>\n                                            <div class=\"meta-card-body clickable\" (click)=\"navigateToEntity('MJ: AI Prompts', prompt.ID)\" title=\"View Prompt\">\n                                                <i class=\"fa-solid fa-comment-dots\" style=\"color: var(--mj-brand-primary);\"></i>\n                                                {{ prompt.Name }}\n                                            </div>\n                                        </div>\n                                    }\n                                }\n\n                                <!-- Model Card -->\n                                @if (model) {\n                                    <div class=\"model-card-c3\">\n                                        <div class=\"c3-card-label\">Model</div>\n                                        <div class=\"c3-card-body\" (click)=\"navigateToEntity('MJ: AI Models', model.ID)\" title=\"View Model\">\n                                            <span class=\"c3-model-name\"><i class=\"fa-solid fa-microchip\"></i> {{ model.Name }}</span>\n                                            @if (record.Vendor) {\n                                                <span class=\"c3-vendor-name\">{{ record.Vendor }}</span>\n                                            }\n                                        </div>\n                                    </div>\n                                }\n                                @if (record.RerunFromPromptRunID) {\n                                    <span class=\"original-run\" title=\"View Original Run\">\n                                        <i class=\"fa-solid fa-level-up-alt\"></i>\n                                        <a (click)=\"navigateToOriginalRun()\" class=\"original-link\">Original Run</a>\n                                    </span>\n                                }\n                            </div>\n                        </div>\n                    </div>\n                    \n                    <!-- Action Buttons -->\n                    <div class=\"run-actions\">\n                        <button mjButton variant=\"outline\" size=\"sm\" (click)=\"reRunPrompt()\" title=\"Re-run this prompt\">\n                            <i class=\"fa-solid fa-play-circle\"></i>\n                            Re-Run\n                        </button>\n                        <button mjButton variant=\"outline\" size=\"sm\" (click)=\"refreshData()\" title=\"Refresh data\">\n                            <i class=\"fa-solid fa-refresh\"></i>\n                        </button>\n                    </div>\n                </div>\n                \n                <!-- Key Metrics Bar -->\n                @if (record.ConfigurationID) {\n                    <!-- Configuration Bar -->\n                    <div class=\"metrics-bar\">\n                        <div class=\"metric-item\">\n                            <i class=\"fa-solid fa-cog\"></i>\n                            <div class=\"metric-content\">\n                                <div class=\"metric-label\">Configuration</div>\n                                <div class=\"metric-value\">\n                                    <a href=\"javascript:void(0)\" class=\"config-link\" (click)=\"navigateToEntity('MJ: AI Configurations', record.ConfigurationID)\">\n                                        {{ record.Configuration || 'Unknown' }}\n                                    </a>\n                                </div>\n                            </div>\n                        </div>\n                        @if (record.Temperature !== null && record.Temperature !== undefined) {\n                            <div class=\"metric-item\">\n                                <i class=\"fa-solid fa-temperature-high\"></i>\n                                <div class=\"metric-content\">\n                                    <div class=\"metric-label\">Temperature</div>\n                                    <div class=\"metric-value\">{{ record.Temperature }}</div>\n                                </div>\n                            </div>\n                        }\n                        @if (record.TopP !== null && record.TopP !== undefined) {\n                            <div class=\"metric-item\">\n                                <i class=\"fa-solid fa-percentage\"></i>\n                                <div class=\"metric-content\">\n                                    <div class=\"metric-label\">Top P</div>\n                                    <div class=\"metric-value\">{{ record.TopP }}</div>\n                                </div>\n                            </div>\n                        }\n                        @if (record.TopK !== null && record.TopK !== undefined) {\n                            <div class=\"metric-item\">\n                                <i class=\"fa-solid fa-list-ol\"></i>\n                                <div class=\"metric-content\">\n                                    <div class=\"metric-label\">Top K</div>\n                                    <div class=\"metric-value\">{{ record.TopK }}</div>\n                                </div>\n                            </div>\n                        }\n                        @if (record.EffortLevel !== null && record.EffortLevel !== undefined) {\n                            <div class=\"metric-item\">\n                                <i class=\"fa-solid fa-tachometer-alt\"></i>\n                                <div class=\"metric-content\">\n                                    <div class=\"metric-label\">Effort Level</div>\n                                    <div class=\"metric-value\">{{ record.EffortLevel }}</div>\n                                </div>\n                            </div>\n                        }\n                        @if (record.ResponseFormat) {\n                            <div class=\"metric-item\">\n                                <i class=\"fa-solid fa-code\"></i>\n                                <div class=\"metric-content\">\n                                    <div class=\"metric-label\">Response Format</div>\n                                    <div class=\"metric-value\">{{ record.ResponseFormat }}</div>\n                                </div>\n                            </div>\n                        }\n                    </div>\n                    \n                    <!-- Execution Metrics Bar (always show when configuration exists) -->\n                    <div class=\"metrics-bar\">\n                        <div class=\"metric-item\">\n                            <i class=\"fa-solid fa-clock\"></i>\n                            <div class=\"metric-content\">\n                                <div class=\"metric-label\">Duration</div>\n                                <div class=\"metric-value\">{{ formatDuration(record.ExecutionTimeMS) }}</div>\n                            </div>\n                        </div>\n                        <div class=\"metric-item\">\n                            <i class=\"fa-solid fa-coins\"></i>\n                            <div class=\"metric-content\">\n                                <div class=\"metric-label\">Total Tokens</div>\n                                <div class=\"metric-value\">{{ formatTokens(record.TokensUsed) }}</div>\n                            </div>\n                        </div>\n                        <div class=\"metric-item\">\n                            <i class=\"fa-solid fa-dollar-sign\"></i>\n                            <div class=\"metric-content\">\n                                <div class=\"metric-label\">Cost</div>\n                                <div class=\"metric-value\">{{ formatCost(record.TotalCost || record.Cost) }}</div>\n                            </div>\n                        </div>\n                        @if (record.RunAt) {\n                            <div class=\"metric-item\">\n                                <i class=\"fa-solid fa-calendar\"></i>\n                                <div class=\"metric-content\">\n                                    <div class=\"metric-label\">Started</div>\n                                    <div class=\"metric-value\">{{ record.RunAt | date:'short' }}</div>\n                                </div>\n                            </div>\n                        }\n                    </div>\n                } @else {\n                    <!-- Execution Metrics Bar (original behavior when no configuration) -->\n                    <div class=\"metrics-bar\">\n                        <div class=\"metric-item\">\n                            <i class=\"fa-solid fa-clock\"></i>\n                            <div class=\"metric-content\">\n                                <div class=\"metric-label\">Duration</div>\n                                <div class=\"metric-value\">{{ formatDuration(record.ExecutionTimeMS) }}</div>\n                            </div>\n                        </div>\n                        <div class=\"metric-item\">\n                            <i class=\"fa-solid fa-coins\"></i>\n                            <div class=\"metric-content\">\n                                <div class=\"metric-label\">Total Tokens</div>\n                                <div class=\"metric-value\">{{ formatTokens(record.TokensUsed) }}</div>\n                            </div>\n                        </div>\n                        <div class=\"metric-item\">\n                            <i class=\"fa-solid fa-dollar-sign\"></i>\n                            <div class=\"metric-content\">\n                                <div class=\"metric-label\">Cost</div>\n                                <div class=\"metric-value\">{{ formatCost(record.TotalCost || record.Cost) }}</div>\n                            </div>\n                        </div>\n                        @if (record.RunAt) {\n                            <div class=\"metric-item\">\n                                <i class=\"fa-solid fa-calendar\"></i>\n                                <div class=\"metric-content\">\n                                    <div class=\"metric-label\">Started</div>\n                                    <div class=\"metric-value\">{{ record.RunAt | date:'short' }}</div>\n                                </div>\n                            </div>\n                        }\n                    </div>\n                }\n            </div>\n\n            <!-- Main Content with Expansion Panels -->\n            <div class=\"form-content\" style=\"display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto;\">\n\n                    <!-- Input Panel with nested sub-panels -->\n                    <mj-accordion-panel [Expanded]=\"inputExpanded\" (ExpandedChange)=\"onInputPanelToggle($event)\" style=\"margin-bottom: 8px;\">\n                        <ng-template mjAccordionTitle>\n                            <span class=\"panel-title\">\n                                <i class=\"fa-solid fa-comment-dots\"></i>\n                                Input\n                                @if (record.Messages && record.Messages.trim() !== '') {\n                                    <span class=\"panel-badge\">JSON</span>\n                                }\n                            </span>\n                        </ng-template>\n                            <div class=\"panel-content\">\n                                @if (record.Messages && record.Messages.trim() !== '') {\n                                    <!-- Nested expansion panels for sub-sections -->\n                                    <div class=\"nested-panels\">\n                                        <!-- Messages Sub-Panel -->\n                                        <mj-accordion-panel\n                                            [Expanded]=\"messagesExpanded\"\n                                            class=\"sub-expansion-panel\"\n                                            style=\"margin-bottom: 8px;\">\n                                            <ng-template mjAccordionTitle>\n                                                <span class=\"sub-panel-title\">\n                                                    <i class=\"fa-solid fa-comments\"></i>\n                                                    Messages\n                                                    @if (chatMessages.length > 0) {\n                                                        <span class=\"panel-count\">({{ chatMessages.length }})</span>\n                                                    }\n                                                </span>\n                                            </ng-template>\n                                            <div class=\"sub-panel-content\">\n                                                @if (isParsingMessages || isLoadingRelatedData) {\n                                                    <div class=\"loading-state\">\n                                                        <i class=\"fa-solid fa-spinner fa-spin\"></i>\n                                                        <p>Loading messages...</p>\n                                                    </div>\n                                                } @else if (chatMessages.length > 0) {\n                                                    <mj-chat-message-viewer \n                                                        [messages]=\"chatMessages\">\n                                                    </mj-chat-message-viewer>\n                                                } @else {\n                                                    <div class=\"empty-state\">\n                                                        <i class=\"fa-solid fa-comment-slash\"></i>\n                                                        <p>No chat messages found</p>\n                                                    </div>\n                                                }\n                                            </div>\n                                        </mj-accordion-panel>\n\n                                        <!-- Data Sub-Panel -->\n                                        <mj-accordion-panel\n                                            [Expanded]=\"dataExpanded\"\n                                            class=\"sub-expansion-panel\"\n                                            style=\"margin-bottom: 8px;\">\n                                            <ng-template mjAccordionTitle>\n                                                <span class=\"sub-panel-title\">\n                                                    <i class=\"fa-solid fa-database\"></i>\n                                                    Data\n                                                    @if (inputData) {\n                                                        <span class=\"panel-badge\">Object</span>\n                                                    }\n                                                </span>\n                                            </ng-template>\n                                            <div class=\"sub-panel-content\">\n                                                @if (inputData && formattedData) {\n                                                    <div class=\"json-editor-container\">\n                                                        <div class=\"json-toolbar\">\n                                                            <button mjButton\n                                                                variant=\"flat\"\n                                                                size=\"sm\"\n                                                                (click)=\"copyToClipboard(formattedData, 'Data')\"\n                                                                title=\"Copy JSON\">\n                                                                <i class=\"fa-solid fa-copy\"></i> Copy\n                                                            </button>\n                                                            <button mjButton\n                                                                variant=\"flat\"\n                                                                size=\"sm\"\n                                                                (click)=\"openFullScreen(formattedData, 'json', 'Data')\"\n                                                                title=\"View full screen\">\n                                                                <i class=\"fa-solid fa-expand\"></i>\n                                                            </button>\n                                                        </div>\n                                                        <mj-code-editor \n                                                            [(ngModel)]=\"formattedData\"\n                                                            name=\"formattedData\"\n                                                            [readonly]=\"true\"\n                                                            [language]=\"'json'\"\n                                                            [lineWrapping]=\"true\"\n                                                            style=\"height: 300px; width: 100%;\">\n                                                        </mj-code-editor>\n                                                    </div>\n                                                } @else {\n                                                    <div class=\"empty-state\">\n                                                        <i class=\"fa-solid fa-database\"></i>\n                                                        <p>No data object found</p>\n                                                    </div>\n                                                }\n                                            </div>\n                                        </mj-accordion-panel>\n\n                                        <!-- Raw Sub-Panel -->\n                                        <mj-accordion-panel\n                                            [Expanded]=\"rawExpanded\"\n                                            class=\"sub-expansion-panel\"\n                                            style=\"margin-bottom: 8px;\">\n                                            <ng-template mjAccordionTitle>\n                                                <span class=\"sub-panel-title\">\n                                                    <i class=\"fa-solid fa-code\"></i>\n                                                    Raw\n                                                </span>\n                                            </ng-template>\n                                            <div class=\"sub-panel-content\">\n                                                <div class=\"json-editor-container\">\n                                                    <div class=\"json-toolbar\">\n                                                        <button mjButton\n                                                            variant=\"flat\"\n                                                            size=\"sm\"\n                                                            (click)=\"copyToClipboard(formattedMessages, 'Messages')\"\n                                                            title=\"Copy JSON\">\n                                                            <i class=\"fa-solid fa-copy\"></i> Copy\n                                                        </button>\n                                                        <button mjButton\n                                                            variant=\"flat\"\n                                                            size=\"sm\"\n                                                            (click)=\"openFullScreen(formattedMessages, 'json', 'Raw Messages')\"\n                                                            title=\"View full screen\">\n                                                            <i class=\"fa-solid fa-expand\"></i>\n                                                        </button>\n                                                    </div>\n                                                    <mj-code-editor \n                                                        [(ngModel)]=\"formattedMessages\"\n                                                        name=\"formattedMessages\"\n                                                        [readonly]=\"true\"\n                                                        [language]=\"'json'\"\n                                                        [lineWrapping]=\"true\"\n                                                        style=\"height: 400px; width: 100%;\">\n                                                    </mj-code-editor>\n                                                </div>\n                                            </div>\n                                        </mj-accordion-panel>\n                                    </div>\n                                } @else {\n                                    <div class=\"empty-state\">\n                                        <i class=\"fa-solid fa-comment-slash\"></i>\n                                        <p>No input messages recorded</p>\n                                    </div>\n                                }\n                            </div>\n                    </mj-accordion-panel>\n                    \n                    <!-- Result Panel -->\n                    <mj-accordion-panel [Expanded]=\"resultExpanded\" (ExpandedChange)=\"onResultPanelToggle($event)\" style=\"margin-bottom: 8px;\">\n                        <ng-template mjAccordionTitle>\n                            <span class=\"panel-title\">\n                                <i class=\"fa-solid fa-square-check\"></i>\n                                Result\n                                @if (record.Result && record.Result.trim() !== '') {\n                                    <span class=\"panel-badge\">JSON</span>\n                                }\n                                @if (record.ErrorMessage) {\n                                    <span class=\"panel-badge error\">Error</span>\n                                }\n                            </span>\n                        </ng-template>\n                            <div class=\"panel-content\">\n                                @if (record.ErrorMessage) {\n                                    <div class=\"error-message\">\n                                        <i class=\"fa-solid fa-exclamation-triangle\"></i>\n                                        <div class=\"error-content\">\n                                            <h4>Error Message</h4>\n                                            <p>{{ record.ErrorMessage }}</p>\n                                        </div>\n                                    </div>\n                                }\n                                \n                                @if (record.Result && record.Result.trim() !== '') {\n                                    <div class=\"json-editor-container\">\n                                        <div class=\"json-toolbar\">\n                                            <button mjButton\n                                                variant=\"flat\"\n                                                size=\"sm\"\n                                                (click)=\"copyToClipboard(formattedResult, 'Result')\"\n                                                title=\"Copy JSON\">\n                                                <i class=\"fa-solid fa-copy\"></i> Copy\n                                            </button>\n                                            <button mjButton\n                                                variant=\"flat\"\n                                                size=\"sm\"\n                                                (click)=\"openFullScreen(formattedResult, 'json', 'Result')\"\n                                                title=\"View full screen\">\n                                                <i class=\"fa-solid fa-expand\"></i>\n                                            </button>\n                                        </div>\n                                        <mj-code-editor \n                                            [(ngModel)]=\"formattedResult\"\n                                            name=\"formattedResult\"\n                                            [readonly]=\"true\"\n                                            [language]=\"'json'\"\n                                            [lineWrapping]=\"true\"\n                                            style=\"height: 400px; width: 100%;\">\n                                        </mj-code-editor>\n                                    </div>\n                                } @else if (!record.ErrorMessage) {\n                                    <div class=\"empty-state\">\n                                        <i class=\"fa-solid fa-inbox\"></i>\n                                        <p>No result data recorded</p>\n                                        @if (record.CompletedAt && (record.Status === 'Failed' || record.Success === false)) {\n                                            <div class=\"error-info\">\n                                                @if (record.Status) {\n                                                    <p class=\"finish-reason\">\n                                                        <strong>Status:</strong> {{ record.Status }}\n                                                    </p>\n                                                }\n                                                @if (formattedErrorDetails) {\n                                                    <div class=\"error-details\">\n                                                        <div class=\"json-toolbar\">\n                                                            <h4 style=\"margin: 0;\">Error Details</h4>\n                                                            <button mjButton\n                                                                variant=\"flat\"\n                                                                size=\"sm\"\n                                                                (click)=\"openFullScreen(formattedErrorDetails, 'json', 'Error Details')\"\n                                                                title=\"View full screen\">\n                                                                <i class=\"fa-solid fa-expand\"></i>\n                                                            </button>\n                                                        </div>\n                                                        <mj-code-editor\n                                                            [ngModel]=\"formattedErrorDetails\"\n                                                            [disabled]=\"true\"\n                                                            [language]=\"'json'\"\n                                                            [lineWrapping]=\"true\"\n                                                            style=\"height: 200px; width: 100%;\">\n                                                        </mj-code-editor>\n                                                    </div>\n                                                }\n                                                @if (!formattedErrorDetails) {\n                                                    <p class=\"error-hint\">\n                                                        The prompt execution failed but no additional error information is available.\n                                                    </p>\n                                                }\n                                            </div>\n                                        }\n                                    </div>\n                                }\n                            </div>\n                    </mj-accordion-panel>\n\n                    <!-- Token Usage & Metrics Panel -->\n                    <mj-accordion-panel [Expanded]=\"metricsExpanded\" (ExpandedChange)=\"onMetricsPanelToggle($event)\" style=\"margin-bottom: 8px;\">\n                        <ng-template mjAccordionTitle>\n                            <span class=\"panel-title\">\n                                <i class=\"fa-solid fa-chart-line\"></i>\n                                Token Usage &amp; Metrics\n                            </span>\n                        </ng-template>\n                            <div class=\"panel-content\">\n                                <div class=\"metrics-grid\">\n                                    <div class=\"metric-card\">\n                                        <div class=\"metric-header\">\n                                            <i class=\"fa-solid fa-message\"></i>\n                                            <h4>Prompt Tokens</h4>\n                                        </div>\n                                        <div class=\"metric-value large\">{{ formatTokens(record.TokensPrompt) }}</div>\n                                        @if (record.TokensPromptRollup && record.TokensPromptRollup !== record.TokensPrompt) {\n                                            <div class=\"metric-rollup\">\n                                                <span>Rollup: {{ formatTokens(record.TokensPromptRollup) }}</span>\n                                            </div>\n                                        }\n                                    </div>\n                                    \n                                    <div class=\"metric-card\">\n                                        <div class=\"metric-header\">\n                                            <i class=\"fa-solid fa-reply\"></i>\n                                            <h4>Completion Tokens</h4>\n                                        </div>\n                                        <div class=\"metric-value large\">{{ formatTokens(record.TokensCompletion) }}</div>\n                                        @if (record.TokensCompletionRollup && record.TokensCompletionRollup !== record.TokensCompletion) {\n                                            <div class=\"metric-rollup\">\n                                                <span>Rollup: {{ formatTokens(record.TokensCompletionRollup) }}</span>\n                                            </div>\n                                        }\n                                    </div>\n                                    \n                                    <div class=\"metric-card\">\n                                        <div class=\"metric-header\">\n                                            <i class=\"fa-solid fa-coins\"></i>\n                                            <h4>Total Tokens</h4>\n                                        </div>\n                                        <div class=\"metric-value large\">{{ formatTokens(record.TokensUsed) }}</div>\n                                        @if (record.TokensUsedRollup && record.TokensUsedRollup !== record.TokensUsed) {\n                                            <div class=\"metric-rollup\">\n                                                <span>Rollup: {{ formatTokens(record.TokensUsedRollup) }}</span>\n                                            </div>\n                                        }\n                                    </div>\n                                    \n                                    <div class=\"metric-card\">\n                                        <div class=\"metric-header\">\n                                            <i class=\"fa-solid fa-dollar-sign\"></i>\n                                            <h4>Cost</h4>\n                                        </div>\n                                        <div class=\"metric-value large\">{{ formatCost(record.Cost) }}</div>\n                                        @if (record.TotalCost && record.TotalCost !== record.Cost) {\n                                            <div class=\"metric-rollup\">\n                                                <span>Total: {{ formatCost(record.TotalCost) }}</span>\n                                            </div>\n                                        }\n                                        @if (record.CostCurrency) {\n                                            <div class=\"metric-currency\">{{ record.CostCurrency }}</div>\n                                        }\n                                    </div>\n                                    \n                                    <!-- Timing Metrics -->\n                                    @if (record.QueueTime != null) {\n                                        <div class=\"metric-card\">\n                                            <div class=\"metric-header\">\n                                                <i class=\"fa-solid fa-hourglass-start\"></i>\n                                                <h4>Queue Time</h4>\n                                            </div>\n                                            <div class=\"metric-value large\">{{ formatDuration(record.QueueTime) }}</div>\n                                        </div>\n                                    }\n                                    \n                                    @if (record.PromptTime != null) {\n                                        <div class=\"metric-card\">\n                                            <div class=\"metric-header\">\n                                                <i class=\"fa-solid fa-brain\"></i>\n                                                <h4>Prompt Time</h4>\n                                            </div>\n                                            <div class=\"metric-value large\">{{ formatDuration(record.PromptTime) }}</div>\n                                        </div>\n                                    }\n                                    \n                                    @if (record.CompletionTime != null) {\n                                        <div class=\"metric-card\">\n                                            <div class=\"metric-header\">\n                                                <i class=\"fa-solid fa-flag-checkered\"></i>\n                                                <h4>Completion Time</h4>\n                                            </div>\n                                            <div class=\"metric-value large\">{{ formatDuration(record.CompletionTime) }}</div>\n                                        </div>\n                                    }\n                                </div>\n                                \n                                <!-- Additional Metrics -->\n                                <div class=\"additional-metrics\">\n                                    @if (record.ExecutionOrder !== null) {\n                                        <div class=\"metric-row\">\n                                            <span class=\"metric-label\">Execution Order:</span>\n                                            <span class=\"metric-value\">{{ record.ExecutionOrder }}</span>\n                                        </div>\n                                    }\n                                    @if (record.AgentID) {\n                                        <div class=\"metric-row\">\n                                            <span class=\"metric-label\">Agent:</span>\n                                            <span class=\"metric-value link\" (click)=\"navigateToEntity('MJ: AI Agents', record.AgentID)\">\n                                                {{ record.Agent }}\n                                                <i class=\"fa-solid fa-external-link\"></i>\n                                            </span>\n                                        </div>\n                                    }\n                                </div>\n                            </div>\n                    </mj-accordion-panel>\n\n                    <!-- Validation & Retry Panel -->\n                    @if (record && ((record.ValidationAttemptCount && record.ValidationAttemptCount > 0) || record.ValidationBehavior)) {\n                        <mj-accordion-panel [Expanded]=\"validationExpanded\" (ExpandedChange)=\"onValidationPanelToggle($event)\" style=\"margin-bottom: 8px;\">\n                            <ng-template mjAccordionTitle>\n                                <span class=\"panel-title\">\n                                    <i class=\"fa-solid fa-shield-check\"></i>\n                                    Validation &amp; Retries\n                                    @if (record && record.ValidationAttemptCount && record.ValidationAttemptCount > 1) {\n                                        <span class=\"panel-count\">({{ record.ValidationAttemptCount }} attempts)</span>\n                                    }\n                                    @if (record.FinalValidationPassed) {\n                                        <span class=\"panel-badge success\">Passed</span>\n                                    } @else if (record.FinalValidationPassed === false) {\n                                        <span class=\"panel-badge error\">Failed</span>\n                                    }\n                                </span>\n                            </ng-template>\n                                <div class=\"panel-content\">\n                                    <!-- Validation Summary -->\n                                    <div class=\"validation-summary\">\n                                        <div class=\"summary-header\">\n                                            <h4>Validation Summary</h4>\n                                            <div class=\"validation-status\" [class.success]=\"record.FinalValidationPassed === true\" [class.failed]=\"record.FinalValidationPassed === false\">\n                                                <i [class]=\"record.FinalValidationPassed === true ? 'fa-solid fa-check-circle' : (record.FinalValidationPassed === false ? 'fa-solid fa-times-circle' : 'fa-solid fa-hourglass-half')\"></i>\n                                                {{ record.FinalValidationPassed === true ? 'Validation Passed' : (record.FinalValidationPassed === false ? 'Validation Failed' : 'Validation Pending') }}\n                                            </div>\n                                        </div>\n                                        \n                                        <div class=\"validation-metrics\">\n                                            <div class=\"metric-card small\">\n                                                <div class=\"metric-label\">Total Attempts</div>\n                                                <div class=\"metric-value\">{{ record.ValidationAttemptCount || 0 }}</div>\n                                            </div>\n                                            <div class=\"metric-card small\">\n                                                <div class=\"metric-label\">Successful</div>\n                                                <div class=\"metric-value\">{{ record.SuccessfulValidationCount || 0 }}</div>\n                                            </div>\n                                            <div class=\"metric-card small\">\n                                                <div class=\"metric-label\">Behavior</div>\n                                                <div class=\"metric-value\">{{ record.ValidationBehavior || 'Not set' }}</div>\n                                            </div>\n                                            <div class=\"metric-card small\">\n                                                <div class=\"metric-label\">Retry Strategy</div>\n                                                <div class=\"metric-value\">{{ record.RetryStrategy || 'Not set' }}</div>\n                                            </div>\n                                        </div>\n                                        \n                                        @if (record.FinalValidationError) {\n                                            <div class=\"validation-error\">\n                                                <h5><i class=\"fa-solid fa-exclamation-triangle\"></i> Final Validation Error</h5>\n                                                <p>{{ record.FinalValidationError }}</p>\n                                                @if (record && record.ValidationErrorCount && record.ValidationErrorCount > 0) {\n                                                    <span class=\"error-count\">{{ record.ValidationErrorCount }} validation errors</span>\n                                                }\n                                            </div>\n                                        }\n                                        \n                                        @if (record.CommonValidationError && record.CommonValidationError !== record.FinalValidationError) {\n                                            <div class=\"common-error\">\n                                                <h5><i class=\"fa-solid fa-repeat\"></i> Most Common Error</h5>\n                                                <p>{{ record.CommonValidationError }}</p>\n                                            </div>\n                                        }\n                                    </div>\n                                    \n                                    <!-- Retry Timeline -->\n                                    @if (record && record.ValidationAttemptCount && record.ValidationAttemptCount > 1) {\n                                        <div class=\"retry-timeline\">\n                                            <h4>Retry Timeline</h4>\n                                            <div class=\"timeline-info\">\n                                                <div class=\"timeline-stat\">\n                                                    <i class=\"fa-solid fa-clock\"></i>\n                                                    <span>First Attempt: {{ record.FirstAttemptAt | date:'short' }}</span>\n                                                </div>\n                                                <div class=\"timeline-stat\">\n                                                    <i class=\"fa-solid fa-flag-checkered\"></i>\n                                                    <span>Last Attempt: {{ record.LastAttemptAt | date:'short' }}</span>\n                                                </div>\n                                                <div class=\"timeline-stat\">\n                                                    <i class=\"fa-solid fa-stopwatch\"></i>\n                                                    <span>Total Retry Duration: {{ formatDuration(record.TotalRetryDurationMS) }}</span>\n                                                </div>\n                                            </div>\n                                        </div>\n                                    }\n                                    \n                                    <!-- Validation Attempts Details -->\n                                    @if (validationAttempts && validationAttempts.length > 0) {\n                                        <div class=\"validation-attempts\">\n                                            <h4>Validation Attempts</h4>\n                                            <div class=\"attempts-list\">\n                                                @for (attempt of validationAttempts; track attempt.attemptNumber) {\n                                                    <div class=\"attempt-item\" [class.success]=\"attempt.success\" [class.failed]=\"!attempt.success\">\n                                                        <div class=\"attempt-number\">\n                                                            <i [class]=\"attempt.success ? 'fa-solid fa-check' : 'fa-solid fa-times'\"></i>\n                                                            Attempt #{{ attempt.attemptNumber }}\n                                                        </div>\n                                                        <div class=\"attempt-details\">\n                                                            <span class=\"attempt-time\">{{ attempt.timestamp }}</span>\n                                                            @if (!attempt.success) {\n                                                                <span class=\"attempt-error\">{{ attempt.errorMessage || 'Unknown error' }}</span>\n                                                                @if (attempt.validationErrorCount > 0) {\n                                                                    <span class=\"error-count\">({{ attempt.validationErrorCount }} errors)</span>\n                                                                }\n                                                            }\n                                                            @if (attempt.outputLength) {\n                                                                <span class=\"output-length\">Output: {{ attempt.outputLength }} chars</span>\n                                                            }\n                                                        </div>\n                                                    </div>\n                                                }\n                                            </div>\n                                        </div>\n                                    }\n                                    \n                                    <!-- Validation Summary JSON -->\n                                    @if (validationSummary) {\n                                        <div class=\"validation-json\">\n                                            <div class=\"json-toolbar\">\n                                                <h4 style=\"margin: 0;\">Validation Summary Details</h4>\n                                                <button mjButton\n                                                    variant=\"flat\"\n                                                    size=\"sm\"\n                                                    (click)=\"openFullScreen(formattedValidationSummary, 'json', 'Validation Summary')\"\n                                                    title=\"View full screen\">\n                                                    <i class=\"fa-solid fa-expand\"></i>\n                                                </button>\n                                            </div>\n                                            <div class=\"json-viewer-container\">\n                                                <mj-code-editor\n                                                    [(ngModel)]=\"formattedValidationSummary\"\n                                                    name=\"formattedValidationSummary\"\n                                                    [readonly]=\"true\"\n                                                    [language]=\"'json'\"\n                                                    [lineWrapping]=\"true\"\n                                                    style=\"height: 200px; width: 100%;\">\n                                                </mj-code-editor>\n                                            </div>\n                                        </div>\n                                    }\n                                    \n                                    <!-- Validation Attempts JSON -->\n                                    @if (record.ValidationAttempts) {\n                                        <div class=\"validation-json\">\n                                            <div class=\"json-toolbar\">\n                                                <h4 style=\"margin: 0;\">Validation Attempts (Raw JSON)</h4>\n                                                <button mjButton\n                                                    variant=\"flat\"\n                                                    size=\"sm\"\n                                                    (click)=\"openFullScreen(formattedValidationAttempts, 'json', 'Validation Attempts')\"\n                                                    title=\"View full screen\">\n                                                    <i class=\"fa-solid fa-expand\"></i>\n                                                </button>\n                                            </div>\n                                            <div class=\"json-viewer-container\">\n                                                <mj-code-editor\n                                                    [(ngModel)]=\"formattedValidationAttempts\"\n                                                    name=\"formattedValidationAttempts\"\n                                                    [readonly]=\"true\"\n                                                    [language]=\"'json'\"\n                                                    [lineWrapping]=\"true\"\n                                                    style=\"height: 300px; width: 100%;\">\n                                                </mj-code-editor>\n                                            </div>\n                                        </div>\n                                    }\n                                </div>\n                        </mj-accordion-panel>\n                    }\n\n                    <!-- Hierarchy Panel (for parent/child relationships) -->\n                    @if (record.ParentID || childRuns.length > 0) {\n                        <mj-accordion-panel [Expanded]=\"hierarchyExpanded\" style=\"margin-bottom: 8px;\">\n                            <ng-template mjAccordionTitle>\n                                <span class=\"panel-title\">\n                                    <i class=\"fa-solid fa-sitemap\"></i>\n                                    Run Hierarchy\n                                    @if (childRuns.length > 0) {\n                                        <span class=\"panel-count\">({{ childRuns.length }} children)</span>\n                                    }\n                                </span>\n                            </ng-template>\n                                <div class=\"panel-content\">\n                                    @if (parentRun) {\n                                        <div class=\"parent-run-section\">\n                                            <h4><i class=\"fa-solid fa-level-up-alt\"></i> Parent Run</h4>\n                                            <div class=\"run-item parent\" (click)=\"navigateToEntity('MJ: AI Prompt Runs', parentRun.ID)\">\n                                                <div class=\"run-item-icon\" [style.background-color]=\"getStatusColor() + '20'\">\n                                                    <i [class]=\"'fa-solid ' + getRunTypeIcon(parentRun.RunType)\"></i>\n                                                </div>\n                                                <div class=\"run-item-content\">\n                                                    <div class=\"run-item-title\">\n                                                        Parent Run #{{ parentRun.ID.substring(0, 8) }}\n                                                        <span class=\"run-item-type\">{{ parentRun.RunType }}</span>\n                                                    </div>\n                                                    <div class=\"run-item-meta\">\n                                                        <span><i class=\"fa-solid fa-clock\"></i> {{ formatDuration(parentRun.ExecutionTimeMS) }}</span>\n                                                        <span><i class=\"fa-solid fa-coins\"></i> {{ formatTokens(parentRun.TokensUsed) }}</span>\n                                                        <span><i class=\"fa-solid fa-calendar\"></i> {{ parentRun.RunAt | date:'short' }}</span>\n                                                    </div>\n                                                </div>\n                                                <i class=\"fa-solid fa-external-link\"></i>\n                                            </div>\n                                        </div>\n                                    }\n                                    \n                                    @if (childRuns.length > 0) {\n                                        <div class=\"child-runs-section\">\n                                            <h4><i class=\"fa-solid fa-level-down-alt\"></i> Child Runs</h4>\n                                            <div class=\"runs-list\">\n                                                @for (childRun of childRuns; track childRun.ID) {\n                                                    <div class=\"run-item child\" (click)=\"navigateToEntity('MJ: AI Prompt Runs', childRun.ID)\">\n                                                        <div class=\"run-item-icon\" [style.background-color]=\"getStatusColor() + '20'\">\n                                                            <i [class]=\"'fa-solid ' + getRunTypeIcon(childRun.RunType)\"></i>\n                                                        </div>\n                                                        <div class=\"run-item-content\">\n                                                            <div class=\"run-item-title\">\n                                                                Child Run #{{ childRun.ID.substring(0, 8) }}\n                                                                @if (childRun.ExecutionOrder !== null) {\n                                                                    <span class=\"execution-order\">#{{ childRun.ExecutionOrder }}</span>\n                                                                }\n                                                                <span class=\"run-item-type\">{{ childRun.RunType }}</span>\n                                                            </div>\n                                                            <div class=\"run-item-meta\">\n                                                                <span class=\"status-indicator\" [style.color]=\"getStatusColor()\">\n                                                                    <i [class]=\"'fa-solid ' + getStatusIcon()\"></i>\n                                                                    {{ childRun.Success ? 'Success' : childRun.ErrorMessage ? 'Failed' : 'Running' }}\n                                                                </span>\n                                                                <span><i class=\"fa-solid fa-clock\"></i> {{ formatDuration(childRun.ExecutionTimeMS) }}</span>\n                                                                <span><i class=\"fa-solid fa-coins\"></i> {{ formatTokens(childRun.TokensUsed) }}</span>\n                                                            </div>\n                                                        </div>\n                                                        <i class=\"fa-solid fa-external-link\"></i>\n                                                    </div>\n                                                }\n                                            </div>\n                                        </div>\n                                    }\n                                </div>\n                        </mj-accordion-panel>\n                    }\n\n                    <!-- Additional Details Panel -->\n                    <mj-accordion-panel [Expanded]=\"false\" style=\"margin-bottom: 8px;\">\n                        <ng-template mjAccordionTitle>\n                            <span class=\"panel-title\">\n                                <i class=\"fa-solid fa-info-circle\"></i>\n                                Additional Details\n                            </span>\n                        </ng-template>\n                            <div class=\"panel-content\">\n                                <div class=\"detail-fields-grid\">\n                                    @if (record.AgentID) {\n                                        <div class=\"detail-field\">\n                                            <label>Agent</label>\n                                            <div class=\"detail-value clickable\" (click)=\"navigateToEntity('MJ: AI Agents', record.AgentID)\" title=\"View Agent\">\n                                                <i class=\"fa-solid fa-robot\"></i>\n                                                {{ record.Agent || 'Unknown' }}\n                                                <i class=\"fa-solid fa-external-link\"></i>\n                                            </div>\n                                        </div>\n                                    }\n                                    \n                                    \n                                    @if (record.RunType) {\n                                        <div class=\"detail-field\">\n                                            <label>Run Type</label>\n                                            <div class=\"detail-value\">\n                                                <i [class]=\"'fa-solid ' + getRunTypeIcon(record.RunType)\"></i>\n                                                {{ record.RunType }}\n                                            </div>\n                                        </div>\n                                    }\n                                    \n                                    @if (record.ResponseFormat) {\n                                        <div class=\"detail-field\">\n                                            <label>Response Format</label>\n                                            <div class=\"detail-value\">\n                                                <i class=\"fa-solid fa-code\"></i>\n                                                {{ record.ResponseFormat }}\n                                            </div>\n                                        </div>\n                                    }\n                                    \n                                    <div class=\"detail-field\">\n                                        <label>Temperature</label>\n                                        <div class=\"detail-value\" [class.null-value]=\"record.Temperature === null || record.Temperature === undefined\">\n                                            <i class=\"fa-solid fa-temperature-high\"></i>\n                                            {{ record.Temperature !== null && record.Temperature !== undefined ? record.Temperature : '\u2014' }}\n                                        </div>\n                                    </div>\n                                    \n                                    <div class=\"detail-field\">\n                                        <label>Top P</label>\n                                        <div class=\"detail-value\" [class.null-value]=\"record.TopP === null || record.TopP === undefined\">\n                                            <i class=\"fa-solid fa-percentage\"></i>\n                                            {{ record.TopP !== null && record.TopP !== undefined ? record.TopP : '\u2014' }}\n                                        </div>\n                                    </div>\n                                    \n                                    <div class=\"detail-field\">\n                                        <label>Top K</label>\n                                        <div class=\"detail-value\" [class.null-value]=\"record.TopK === null || record.TopK === undefined\">\n                                            <i class=\"fa-solid fa-list-ol\"></i>\n                                            {{ record.TopK !== null && record.TopK !== undefined ? record.TopK : '\u2014' }}\n                                        </div>\n                                    </div>\n                                    \n                                    <div class=\"detail-field\">\n                                        <label>Min P</label>\n                                        <div class=\"detail-value\" [class.null-value]=\"record.MinP === null || record.MinP === undefined\">\n                                            <i class=\"fa-solid fa-filter\"></i>\n                                            {{ record.MinP !== null && record.MinP !== undefined ? record.MinP : '\u2014' }}\n                                        </div>\n                                    </div>\n                                    \n                                    <div class=\"detail-field\">\n                                        <label>Frequency Penalty</label>\n                                        <div class=\"detail-value\" [class.null-value]=\"record.FrequencyPenalty === null || record.FrequencyPenalty === undefined\">\n                                            <i class=\"fa-solid fa-repeat\"></i>\n                                            {{ record.FrequencyPenalty !== null && record.FrequencyPenalty !== undefined ? record.FrequencyPenalty : '\u2014' }}\n                                        </div>\n                                    </div>\n                                    \n                                    <div class=\"detail-field\">\n                                        <label>Presence Penalty</label>\n                                        <div class=\"detail-value\" [class.null-value]=\"record.PresencePenalty === null || record.PresencePenalty === undefined\">\n                                            <i class=\"fa-solid fa-plus-circle\"></i>\n                                            {{ record.PresencePenalty !== null && record.PresencePenalty !== undefined ? record.PresencePenalty : '\u2014' }}\n                                        </div>\n                                    </div>\n                                    \n                                    <div class=\"detail-field\">\n                                        <label>Seed</label>\n                                        <div class=\"detail-value\" [class.null-value]=\"record.Seed === null || record.Seed === undefined\">\n                                            <i class=\"fa-solid fa-seedling\"></i>\n                                            {{ record.Seed !== null && record.Seed !== undefined ? record.Seed : '\u2014' }}\n                                        </div>\n                                    </div>\n\n                                    <div class=\"detail-field\">\n                                        <label>Stop Sequences</label>\n                                        <div class=\"detail-value\" [class.null-value]=\"!record.StopSequences\">\n                                            <i class=\"fa-solid fa-stop-circle\"></i>\n                                            {{ record.StopSequences || '\u2014' }}\n                                        </div>\n                                    </div>\n\n                                    <div class=\"detail-field\">\n                                        <label>Assistant Prefill</label>\n                                        <div class=\"detail-value\" [class.null-value]=\"!record.AssistantPrefill\">\n                                            <i class=\"fa-solid fa-wand-magic-sparkles\"></i>\n                                            {{ record.AssistantPrefill || '\u2014' }}\n                                        </div>\n                                    </div>\n\n                                    @if (record.RunAt) {\n                                        <div class=\"detail-field\">\n                                            <label>Started At</label>\n                                            <div class=\"detail-value\">\n                                                <i class=\"fa-solid fa-clock\"></i>\n                                                {{ record.RunAt | date:'medium' }}\n                                            </div>\n                                        </div>\n                                    }\n                                    \n                                    @if (record.CompletedAt) {\n                                        <div class=\"detail-field\">\n                                            <label>Completed At</label>\n                                            <div class=\"detail-value\">\n                                                <i class=\"fa-solid fa-check-circle\"></i>\n                                                {{ record.CompletedAt | date:'medium' }}\n                                            </div>\n                                        </div>\n                                    }\n                                </div>\n                            </div>\n                    </mj-accordion-panel>\n\n                    <!-- Model Specific Response Details Panel -->\n                    @if (record.ModelSpecificResponseDetails) {\n                        <mj-accordion-panel [Expanded]=\"modelSpecificExpanded\" (ExpandedChange)=\"onModelSpecificPanelToggle($event)\" style=\"margin-bottom: 8px;\">\n                            <ng-template mjAccordionTitle>\n                                <span class=\"panel-title\">\n                                    <i class=\"fa-solid fa-microchip\"></i>\n                                    Model Specific Response Details\n                                    <span class=\"panel-badge\">JSON</span>\n                                </span>\n                            </ng-template>\n                                <div class=\"panel-content\">\n                                    <div class=\"json-editor-container\">\n                                        <div class=\"json-toolbar\">\n                                            <button mjButton\n                                                variant=\"flat\"\n                                                size=\"sm\"\n                                                (click)=\"copyToClipboard(formattedModelSpecificResponseDetails, 'Model Specific Response Details')\"\n                                                title=\"Copy JSON\">\n                                                <i class=\"fa-solid fa-copy\"></i> Copy\n                                            </button>\n                                            <button mjButton\n                                                variant=\"flat\"\n                                                size=\"sm\"\n                                                (click)=\"openFullScreen(formattedModelSpecificResponseDetails, 'json', 'Model Specific Response Details')\"\n                                                title=\"View full screen\">\n                                                <i class=\"fa-solid fa-expand\"></i>\n                                            </button>\n                                        </div>\n                                        <mj-code-editor \n                                            [(ngModel)]=\"formattedModelSpecificResponseDetails\"\n                                            name=\"formattedModelSpecificResponseDetails\"\n                                            [readonly]=\"true\"\n                                            [language]=\"'json'\"\n                                            [lineWrapping]=\"true\"\n                                            style=\"height: 400px; width: 100%;\">\n                                        </mj-code-editor>\n                                    </div>\n                                </div>\n                        </mj-accordion-panel>\n                    }\n\n                    <!-- Model Selection & Performance Panel (v2.78 fields) -->\n                    <mj-accordion-panel [Expanded]=\"false\" (ExpandedChange)=\"onModelSelectionPanelToggle($event)\" style=\"margin-bottom: 8px;\">\n                        <ng-template mjAccordionTitle>\n                            <span class=\"panel-title\">\n                                <i class=\"fa-solid fa-microchip\"></i>\n                                Model Selection &amp; Performance\n                                @if (record.CacheHit) {\n                                    <span class=\"panel-badge success\">Cached</span>\n                                }\n                                @if (record.WasSelectedResult) {\n                                    <span class=\"panel-badge success\">Selected</span>\n                                }\n                            </span>\n                        </ng-template>\n                            <div class=\"panel-content\">\n                                <div class=\"detail-fields-grid\">\n                                    <!-- Model Selection Details -->\n                                    <div class=\"detail-field\">\n                                        <label>Status</label>\n                                        <div class=\"detail-value\">\n                                            <i class=\"fa-solid fa-info-circle\"></i>\n                                            {{ record.Status || 'Unknown' }}\n                                        </div>\n                                    </div>\n                                    \n                                    <div class=\"detail-field\">\n                                        <label>Selection Strategy</label>\n                                        <div class=\"detail-value\">\n                                            <i class=\"fa-solid fa-strategy\"></i>\n                                            {{ record.SelectionStrategy || '\u2014' }}\n                                        </div>\n                                    </div>\n                                    \n                                    <div class=\"detail-field\">\n                                        <label>Model Power Rank</label>\n                                        <div class=\"detail-value\" [class.null-value]=\"record.ModelPowerRank === null\">\n                                            <i class=\"fa-solid fa-ranking-star\"></i>\n                                            {{ record.ModelPowerRank !== null ? record.ModelPowerRank : '\u2014' }}\n                                        </div>\n                                    </div>\n                                    \n                                    <!-- Cache Information -->\n                                    <div class=\"detail-field\">\n                                        <label>Cache Hit</label>\n                                        <div class=\"detail-value\">\n                                            <i [class]=\"record.CacheHit ? 'fa-solid fa-check-circle' : 'fa-solid fa-times-circle'\"></i>\n                                            {{ record.CacheHit ? 'Yes' : 'No' }}\n                                        </div>\n                                    </div>\n                                    \n                                    @if (record.CacheKey) {\n                                        <div class=\"detail-field full-width\">\n                                            <label>Cache Key</label>\n                                            <div class=\"detail-value\">\n                                                <i class=\"fa-solid fa-key\"></i>\n                                                <code>{{ record.CacheKey }}</code>\n                                            </div>\n                                        </div>\n                                    }\n                                    \n                                    <!-- Judge Information -->\n                                    @if (record.JudgeID) {\n                                        <div class=\"detail-field\">\n                                            <label>Judge Prompt</label>\n                                            <div class=\"detail-value clickable\" (click)=\"navigateToEntity('MJ: AI Prompts', record.JudgeID)\" title=\"View Judge Prompt\">\n                                                <i class=\"fa-solid fa-gavel\"></i>\n                                                {{ record.Judge || 'Unknown' }}\n                                                <i class=\"fa-solid fa-external-link\"></i>\n                                            </div>\n                                        </div>\n                                    }\n                                    \n                                    @if (record.JudgeScore !== null) {\n                                        <div class=\"detail-field\">\n                                            <label>Judge Score</label>\n                                            <div class=\"detail-value\">\n                                                <i class=\"fa-solid fa-star\"></i>\n                                                {{ record.JudgeScore }}\n                                            </div>\n                                        </div>\n                                    }\n                                    \n                                    <div class=\"detail-field\">\n                                        <label>Was Selected Result</label>\n                                        <div class=\"detail-value\">\n                                            <i [class]=\"record.WasSelectedResult ? 'fa-solid fa-trophy' : 'fa-solid fa-times'\"></i>\n                                            {{ record.WasSelectedResult ? 'Yes' : 'No' }}\n                                        </div>\n                                    </div>\n                                    \n                                    <!-- Performance Metrics -->\n                                    <div class=\"detail-field\">\n                                        <label>Streaming Enabled</label>\n                                        <div class=\"detail-value\">\n                                            <i [class]=\"record.StreamingEnabled ? 'fa-solid fa-stream' : 'fa-solid fa-ban'\"></i>\n                                            {{ record.StreamingEnabled ? 'Yes' : 'No' }}\n                                        </div>\n                                    </div>\n                                    \n                                    @if (record.FirstTokenTime !== null) {\n                                        <div class=\"detail-field\">\n                                            <label>First Token Time</label>\n                                            <div class=\"detail-value\">\n                                                <i class=\"fa-solid fa-bolt\"></i>\n                                                {{ record.FirstTokenTime }} ms\n                                            </div>\n                                        </div>\n                                    }\n                                    \n                                    @if (record.Cancelled) {\n                                        <div class=\"detail-field\">\n                                            <label>Cancelled</label>\n                                            <div class=\"detail-value error\">\n                                                <i class=\"fa-solid fa-ban\"></i>\n                                                Yes\n                                            </div>\n                                        </div>\n                                        \n                                        @if (record.CancellationReason) {\n                                            <div class=\"detail-field full-width\">\n                                                <label>Cancellation Reason</label>\n                                                <div class=\"detail-value\">\n                                                    <i class=\"fa-solid fa-exclamation-circle\"></i>\n                                                    {{ record.CancellationReason }}\n                                                </div>\n                                            </div>\n                                        }\n                                    }\n                                </div>\n                                \n                                <!-- Model Selection JSON -->\n                                @if (record.ModelSelection) {\n                                    <div class=\"model-selection-json\">\n                                        <div class=\"json-toolbar\">\n                                            <h4 style=\"margin: 0;\">Model Selection Details</h4>\n                                            <button mjButton\n                                                variant=\"flat\"\n                                                size=\"sm\"\n                                                (click)=\"openFullScreen(formattedModelSelection, 'json', 'Model Selection')\"\n                                                title=\"View full screen\">\n                                                <i class=\"fa-solid fa-expand\"></i>\n                                            </button>\n                                        </div>\n                                        <div class=\"json-viewer-container\">\n                                            <mj-code-editor\n                                                [(ngModel)]=\"formattedModelSelection\"\n                                                name=\"formattedModelSelection\"\n                                                [readonly]=\"true\"\n                                                [language]=\"'json'\"\n                                                [lineWrapping]=\"true\"\n                                                style=\"height: 300px; width: 100%;\">\n                                            </mj-code-editor>\n                                        </div>\n                                    </div>\n                                }\n                                \n                                <!-- Error Details JSON -->\n                                @if (record.ErrorDetails) {\n                                    <div class=\"error-details-json\">\n                                        <div class=\"json-toolbar\">\n                                            <h4 style=\"margin: 0;\">Error Details</h4>\n                                            <button mjButton\n                                                variant=\"flat\"\n                                                size=\"sm\"\n                                                (click)=\"openFullScreen(formattedErrorDetails, 'json', 'Error Details')\"\n                                                title=\"View full screen\">\n                                                <i class=\"fa-solid fa-expand\"></i>\n                                            </button>\n                                        </div>\n                                        <div class=\"json-viewer-container\">\n                                            <mj-code-editor\n                                                [(ngModel)]=\"formattedErrorDetails\"\n                                                name=\"formattedErrorDetails\"\n                                                [readonly]=\"true\"\n                                                [language]=\"'json'\"\n                                                [lineWrapping]=\"true\"\n                                                style=\"height: 200px; width: 100%;\">\n                                            </mj-code-editor>\n                                        </div>\n                                    </div>\n                                }\n                            </div>\n                    </mj-accordion-panel>\n\n            </div>\n        </form>\n</mj-record-form-container>\n}\n\n<!-- Full-screen overlay -->\n    @if (FullScreenContent) {\n        <div class=\"fullscreen-overlay\" (click)=\"closeFullScreen()\">\n            <div class=\"fullscreen-container\" (click)=\"$event.stopPropagation()\">\n                <div class=\"fullscreen-header\">\n                    <span class=\"fullscreen-title\">\n                        <i class=\"fa-solid fa-expand\"></i>\n                        {{ FullScreenTitle }}\n                    </span>\n                    <div class=\"fullscreen-actions\">\n                        <button mjButton\n                            variant=\"flat\"\n                            size=\"sm\"\n                            (click)=\"copyToClipboard(FullScreenContent, FullScreenTitle)\"\n                            title=\"Copy content\">\n                            <i class=\"fa-solid fa-copy\"></i> Copy\n                        </button>\n                        <button mjButton\n                            variant=\"flat\"\n                            size=\"sm\"\n                            (click)=\"closeFullScreen()\"\n                            title=\"Close\">\n                            <i class=\"fa-solid fa-times\"></i> Close\n                        </button>\n                    </div>\n                </div>\n                <div class=\"fullscreen-body\">\n                    <mj-code-editor\n                        [value]=\"FullScreenContent\"\n                        [readonly]=\"true\"\n                        [language]=\"FullScreenLanguage\"\n                        style=\"height: 100%; width: 100%;\">\n                    </mj-code-editor>\n                </div>\n            </div>\n        </div>\n    }", styles: ["/* Host and Container Layout */\n:host {\n    display: block;\n    height: 100%;\n}\n\n.record-form-container {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    min-height: 0;\n    overflow: hidden;\n}\n\n.record-form {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    min-height: 0 !important;\n    overflow: hidden;\n}\n\n.form-content {\n    padding: 16px;\n    flex: 1;\n    min-height: 0;\n    overflow-y: auto;\n}\n\n/* Error Info Styles */\n.error-info {\n    margin-top: 16px;\n    padding: 16px;\n    background-color: color-mix(in srgb, var(--mj-status-error) 5%, var(--mj-bg-surface));\n    border: 1px solid color-mix(in srgb, var(--mj-status-error) 20%, var(--mj-bg-surface));\n    border-radius: 8px;\n}\n\n.finish-reason {\n    margin: 0 0 12px 0;\n    color: var(--mj-status-error);\n    font-size: 14px;\n}\n\n.error-details {\n    margin-top: 12px;\n}\n\n.error-details h4 {\n    margin: 0 0 8px 0;\n    color: color-mix(in srgb, var(--mj-status-error) 80%, black);\n    font-size: 14px;\n    font-weight: 600;\n}\n\n.error-hint {\n    margin: 0;\n    color: color-mix(in srgb, var(--mj-status-error) 70%, black);\n    font-size: 14px;\n    font-style: italic;\n}\n\n/* Header Section */\n.prompt-run-header {\n    background: var(--mj-bg-surface-card);\n    border-bottom: 2px solid var(--mj-border-default);\n    padding: 20px;\n    margin-bottom: 0;\n}\n\n.header-content {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    gap: 20px;\n    margin-bottom: 16px;\n}\n\n.run-overview {\n    display: flex;\n    align-items: flex-start;\n    gap: 16px;\n    flex: 1;\n}\n\n.run-icon-wrapper {\n    width: 56px;\n    height: 56px;\n    border-radius: 12px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n}\n\n.run-icon-wrapper i {\n    font-size: 24px;\n}\n\n.run-info {\n    flex: 1;\n    min-width: 0;\n}\n\n.run-title {\n    margin: 0 0 8px 0;\n    font-size: 1.5em;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.run-id {\n    font-size: 0.8em;\n    color: var(--mj-text-muted);\n    font-weight: 400;\n    font-family: 'Courier New', monospace;\n}\n\n.run-meta {\n    display: flex;\n    align-items: stretch;\n    gap: 10px;\n    flex-wrap: wrap;\n}\n\n/* Shared meta-card style (Status, Execution, single Prompt) */\n.meta-card {\n    display: flex;\n    flex-direction: column;\n    border-radius: 8px;\n    overflow: hidden;\n    border: 1px solid var(--mj-border-default);\n}\n\n.meta-card-body {\n    display: flex;\n    align-items: center;\n    gap: 7px;\n    padding: 8px 12px;\n    background: var(--mj-bg-surface-card);\n    font-size: 0.82em;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n    white-space: nowrap;\n}\n\n.meta-card-body.clickable {\n    cursor: pointer;\n    transition: color 0.15s;\n}\n\n.meta-card-body.clickable:hover {\n    color: var(--mj-brand-primary-hover);\n}\n\n/* Status indicator dot */\n.status-indicator {\n    width: 8px;\n    height: 8px;\n    border-radius: 50%;\n    flex-shrink: 0;\n}\n\n/* C3 Stacked Connector \u2014 Prompt Card */\n.prompt-card-c3 {\n    display: flex;\n    flex-direction: column;\n    border-radius: 10px;\n    overflow: hidden;\n    border: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface-card);\n}\n\n.c3-child-section {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 14px;\n    font-size: 0.92em;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    cursor: pointer;\n    transition: color 0.15s;\n    border-left: 3px solid var(--mj-brand-primary);\n}\n\n.c3-child-section:hover {\n    color: var(--mj-brand-primary-hover);\n}\n\n.c3-child-section i.prompt-icon {\n    color: var(--mj-brand-primary);\n    font-size: 1rem;\n}\n\n.c3-divider {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 0 14px;\n    border-left: 3px solid var(--mj-brand-primary);\n}\n\n.c3-line {\n    flex: 1;\n    height: 1px;\n    background: var(--mj-border-default);\n}\n\n.c3-divider-label {\n    font-size: 0.55rem;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.1em;\n    color: var(--mj-text-disabled);\n    white-space: nowrap;\n}\n\n.c3-parent-section {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 7px 14px 9px 14px;\n    font-size: 0.76em;\n    color: var(--mj-text-muted);\n    cursor: pointer;\n    transition: color 0.15s;\n    border-left: 3px solid color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.c3-parent-section:hover {\n    color: var(--mj-text-secondary);\n}\n\n.c3-parent-section i {\n    font-size: 0.75rem;\n}\n\n.c3-link-icon {\n    margin-left: auto;\n    font-size: 0.6rem !important;\n    opacity: 0.4;\n}\n\n.c3-parent-section:hover .c3-link-icon {\n    opacity: 0.8;\n}\n\n/* C3 Model Card */\n.model-card-c3 {\n    display: flex;\n    flex-direction: column;\n    border-radius: 8px;\n    overflow: hidden;\n    border: 1px solid var(--mj-border-default);\n    cursor: pointer;\n    transition: border-color 0.15s;\n}\n\n.model-card-c3:hover {\n    border-color: var(--mj-border-strong);\n}\n\n.c3-card-label {\n    font-size: 0.6rem;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.08em;\n    padding: 4px 10px;\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-muted);\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.c3-card-body {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    padding: 8px 12px;\n    background: var(--mj-bg-surface-card);\n    font-size: 0.82em;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n}\n\n.c3-model-name {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n.c3-model-name i {\n    color: var(--mj-text-muted);\n    font-size: 0.9rem;\n}\n\n.c3-vendor-name {\n    font-size: 0.72em;\n    color: var(--mj-text-muted);\n    font-weight: 400;\n    padding-left: 22px;\n}\n\n.original-run {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 12px;\n    border-radius: 16px;\n    background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n    font-size: 0.85em;\n}\n\n.original-link {\n    color: var(--mj-status-error);\n    text-decoration: none;\n    cursor: pointer;\n    transition: all 0.2s;\n}\n\n.original-link:hover {\n    color: color-mix(in srgb, var(--mj-status-error) 85%, black);\n    text-decoration: underline;\n}\n\n.run-actions {\n    display: flex;\n    gap: 8px;\n}\n\n/* Metrics Bar */\n.metrics-bar {\n    display: flex;\n    gap: 24px;\n    padding-top: 16px;\n    border-top: 1px solid var(--mj-border-default);\n    flex-wrap: wrap;\n}\n\n.metric-item {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.metric-item > i {\n    font-size: 1.2em;\n    color: var(--mj-text-muted);\n    width: 24px;\n    text-align: center;\n}\n\n.metric-content {\n    display: flex;\n    flex-direction: column;\n}\n\n.metric-label {\n    font-size: 0.75em;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.metric-value {\n    font-size: 1.1em;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.config-link {\n    color: var(--mj-brand-primary);\n    text-decoration: none;\n    cursor: pointer;\n    transition: color 0.2s;\n}\n\n.config-link:hover {\n    color: color-mix(in srgb, var(--mj-brand-primary) 75%, black);\n    text-decoration: underline;\n}\n\n/* Panels */\n.form-content {\n    padding: 16px;\n}\n\n.panel-title {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-weight: 600;\n}\n\n/* Nested Sub-Panel Styles */\n.sub-panel-title {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-weight: 500;\n    font-size: 0.95em;\n}\n\n.sub-panel-content {\n    padding: 0;\n}\n\n/* Nested accordion panel styles */\n.nested-panels mj-accordion-panel {\n    margin-bottom: 8px;\n}\n\n/* Ensure chat message viewer takes appropriate height */\n.sub-panel-content mj-chat-message-viewer {\n    display: block;\n    min-height: 200px;\n    max-height: 750px; /* Increased by 50% from 500px */\n    height: auto;\n    overflow: hidden;\n}\n\n/* Different colors for sub-expansion panels */\n.sub-expansion-panel {\n    margin-bottom: 8px;\n}\n\n/* Sub-expansion panel styles */\n.sub-expansion-panel {\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    overflow: hidden;\n}\n\n.panel-badge {\n    margin-left: auto;\n    padding: 2px 8px;\n    border-radius: 12px;\n    background: var(--mj-border-default);\n    color: var(--mj-text-secondary);\n    font-size: 0.75em;\n    font-weight: 500;\n}\n\n.panel-badge.error {\n    background: var(--mj-status-error);\n    color: white;\n}\n\n.panel-count {\n    color: var(--mj-text-muted);\n    font-weight: 400;\n    font-size: 0.9em;\n}\n\n.panel-content {\n    padding: 20px;\n    max-height: none !important;\n    overflow: visible !important;\n}\n\n/* JSON Editor Container */\n.json-editor-container {\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    overflow: hidden;\n}\n\n.json-toolbar {\n    background: var(--mj-bg-surface-card);\n    padding: 8px 12px;\n    border-bottom: 1px solid var(--mj-border-default);\n    display: flex;\n    justify-content: flex-end;\n}\n\n/* Error Message */\n.error-message {\n    background: color-mix(in srgb, var(--mj-status-error) 6%, var(--mj-bg-surface));\n    border: 1px solid var(--mj-status-error);\n    border-radius: 6px;\n    padding: 16px;\n    display: flex;\n    gap: 16px;\n    margin-bottom: 16px;\n}\n\n.error-message i {\n    font-size: 1.5em;\n    color: var(--mj-status-error);\n    flex-shrink: 0;\n}\n\n.error-content h4 {\n    margin: 0 0 8px 0;\n    color: var(--mj-status-error);\n    font-size: 1em;\n}\n\n.error-content p {\n    margin: 0;\n    color: var(--mj-text-secondary);\n}\n\n/* Empty State */\n.empty-state {\n    text-align: center;\n    padding: 60px 40px;\n    color: var(--mj-text-muted);\n}\n\n.empty-state i {\n    font-size: 3em;\n    margin-bottom: 16px;\n    opacity: 0.3;\n}\n\n.empty-state p {\n    margin: 0;\n    font-size: 1.1em;\n}\n\n/* Loading State */\n.loading-state {\n    text-align: center;\n    padding: 60px 40px;\n    color: var(--mj-text-muted);\n}\n\n.loading-state i {\n    font-size: 3em;\n    margin-bottom: 16px;\n    opacity: 0.6;\n    color: var(--mj-brand-primary);\n}\n\n.loading-state p {\n    margin: 0;\n    font-size: 1.1em;\n}\n\n/* Metrics Grid */\n.metrics-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n    gap: 20px;\n    margin-bottom: 24px;\n}\n\n.metric-card {\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    padding: 20px;\n}\n\n.metric-header {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin-bottom: 12px;\n}\n\n.metric-header i {\n    font-size: 1.2em;\n    color: var(--mj-text-muted);\n}\n\n.metric-header h4 {\n    margin: 0;\n    font-size: 0.9em;\n    color: var(--mj-text-muted);\n    font-weight: 500;\n}\n\n.metric-value.large {\n    font-size: 1.8em;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n}\n\n.metric-rollup {\n    margin-top: 8px;\n    font-size: 0.85em;\n    color: var(--mj-text-muted);\n}\n\n.metric-currency {\n    margin-top: 4px;\n    font-size: 0.85em;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n}\n\n/* Additional Metrics */\n.additional-metrics {\n    padding-top: 16px;\n}\n\n.metric-row {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 8px 0;\n    border-bottom: 1px solid var(--mj-bg-surface-sunken);\n}\n\n.metric-row:last-child {\n    border-bottom: none;\n}\n\n.metric-row .metric-label {\n    font-weight: 500;\n    color: var(--mj-text-muted);\n}\n\n.metric-row .metric-value {\n    font-weight: 400;\n    color: var(--mj-text-primary);\n}\n\n.metric-row .metric-value.link {\n    color: var(--mj-brand-primary);\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    transition: color 0.2s;\n}\n\n.metric-row .metric-value.link:hover {\n    color: color-mix(in srgb, var(--mj-brand-primary) 75%, black);\n}\n\n/* Hierarchy Section */\n.parent-run-section,\n.child-runs-section {\n    margin-bottom: 24px;\n}\n\n.parent-run-section:last-child,\n.child-runs-section:last-child {\n    margin-bottom: 0;\n}\n\n.parent-run-section h4,\n.child-runs-section h4 {\n    margin: 0 0 12px 0;\n    font-size: 0.95em;\n    color: var(--mj-text-secondary);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.runs-list {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.run-item {\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    padding: 12px 16px;\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    cursor: pointer;\n    transition: all 0.2s;\n}\n\n.run-item:hover {\n    background: var(--mj-border-default);\n    border-color: var(--mj-border-strong);\n}\n\n.run-item.parent {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-bg-surface));\n}\n\n.run-item.parent:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 20%, var(--mj-bg-surface));\n}\n\n.run-item-icon {\n    width: 36px;\n    height: 36px;\n    border-radius: 8px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n}\n\n.run-item-content {\n    flex: 1;\n    min-width: 0;\n}\n\n.run-item-title {\n    font-weight: 500;\n    color: var(--mj-text-primary);\n    margin-bottom: 4px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.execution-order {\n    background: var(--mj-text-muted);\n    color: white;\n    padding: 2px 6px;\n    border-radius: 10px;\n    font-size: 0.75em;\n    font-weight: 600;\n}\n\n.run-item-type {\n    font-size: 0.85em;\n    color: var(--mj-text-muted);\n    font-weight: 400;\n}\n\n.run-item-meta {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    font-size: 0.85em;\n    color: var(--mj-text-muted);\n}\n\n.run-item-meta span {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n}\n\n.status-indicator {\n    font-weight: 500;\n}\n\n.run-item > i:last-child {\n    color: var(--mj-text-muted);\n    font-size: 0.85em;\n}\n\n/* Detail Fields Grid */\n.detail-fields-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n    gap: 24px;\n    width: 100%;\n    min-height: auto;\n    overflow: visible;\n}\n\n.detail-field {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.detail-field label {\n    font-size: 0.85em;\n    color: var(--mj-text-muted);\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.detail-value {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    font-size: 1em;\n    color: var(--mj-text-primary);\n    padding: 10px 14px;\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    transition: all 0.2s;\n}\n\n.detail-value i:first-child {\n    color: var(--mj-text-muted);\n    font-size: 1.1em;\n    width: 20px;\n    text-align: center;\n}\n\n.detail-value.clickable {\n    cursor: pointer;\n}\n\n.detail-value.clickable:hover {\n    background: var(--mj-border-default);\n    border-color: var(--mj-border-strong);\n    color: var(--mj-brand-primary);\n    transform: translateY(-1px);\n    box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n\n.detail-value.clickable i:last-child {\n    margin-left: auto;\n    font-size: 0.85em;\n    opacity: 0.6;\n}\n\n.detail-value.clickable:hover i:last-child {\n    opacity: 1;\n}\n\n.detail-value.null-value {\n    color: var(--mj-text-disabled);\n    font-style: italic;\n}\n\n.detail-value.null-value i:first-child {\n    opacity: 0.5;\n}\n\n/* Accordion Panel Overrides */\nmj-accordion-panel {\n    display: block;\n}\n\n/* Validation Panel Styles */\n.validation-summary {\n    margin-bottom: 24px;\n}\n\n.summary-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 16px;\n}\n\n.summary-header h4 {\n    margin: 0;\n    font-size: 1.1em;\n    color: var(--mj-text-primary);\n}\n\n.validation-status {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 6px 16px;\n    border-radius: 20px;\n    font-weight: 500;\n    font-size: 0.9em;\n}\n\n.validation-status.success {\n    background: color-mix(in srgb, var(--mj-status-success) 12%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.validation-status.failed {\n    background: color-mix(in srgb, var(--mj-status-error) 12%, var(--mj-bg-surface));\n    color: var(--mj-status-error);\n}\n\n.validation-metrics {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n    gap: 12px;\n    margin-bottom: 20px;\n}\n\n.metric-card.small {\n    padding: 16px;\n    text-align: center;\n}\n\n.metric-card.small .metric-label {\n    font-size: 0.8em;\n    margin-bottom: 8px;\n    font-weight: 600;\n}\n\n.metric-card.small .metric-value {\n    font-size: 1.4em;\n    font-weight: 700;\n}\n\n.validation-error,\n.common-error {\n    background: color-mix(in srgb, var(--mj-status-error) 6%, var(--mj-bg-surface));\n    border: 1px solid color-mix(in srgb, var(--mj-status-error) 18%, var(--mj-bg-surface));\n    border-radius: 8px;\n    padding: 16px;\n    margin-bottom: 16px;\n}\n\n.validation-error h5,\n.common-error h5 {\n    margin: 0 0 8px 0;\n    color: var(--mj-status-error);\n    font-size: 0.95em;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.validation-error p,\n.common-error p {\n    margin: 0;\n    color: var(--mj-text-secondary);\n    font-size: 0.9em;\n}\n\n.error-count {\n    display: inline-block;\n    margin-top: 8px;\n    padding: 2px 8px;\n    background: var(--mj-status-error);\n    color: white;\n    border-radius: 12px;\n    font-size: 0.75em;\n    font-weight: 500;\n}\n\n/* Retry Timeline */\n.retry-timeline {\n    margin-bottom: 24px;\n}\n\n.retry-timeline h4 {\n    margin: 0 0 12px 0;\n    font-size: 1em;\n    color: var(--mj-text-secondary);\n}\n\n.timeline-info {\n    display: flex;\n    gap: 24px;\n    flex-wrap: wrap;\n}\n\n.timeline-stat {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    color: var(--mj-text-muted);\n    font-size: 0.9em;\n}\n\n.timeline-stat i {\n    font-size: 1.1em;\n}\n\n/* Validation Attempts */\n.validation-attempts {\n    margin-bottom: 24px;\n}\n\n.validation-attempts h4 {\n    margin: 0 0 12px 0;\n    font-size: 1em;\n    color: var(--mj-text-secondary);\n}\n\n.attempts-list {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.attempt-item {\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    padding: 12px 16px;\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    gap: 16px;\n}\n\n.attempt-item.success {\n    background: color-mix(in srgb, var(--mj-status-success) 6%, var(--mj-bg-surface));\n    border-color: color-mix(in srgb, var(--mj-status-success) 18%, var(--mj-bg-surface));\n}\n\n.attempt-item.failed {\n    background: color-mix(in srgb, var(--mj-status-error) 6%, var(--mj-bg-surface));\n    border-color: color-mix(in srgb, var(--mj-status-error) 18%, var(--mj-bg-surface));\n}\n\n.attempt-number {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.attempt-item.success .attempt-number {\n    color: var(--mj-status-success);\n}\n\n.attempt-item.failed .attempt-number {\n    color: var(--mj-status-error);\n}\n\n.attempt-details {\n    flex: 1;\n    display: flex;\n    flex-wrap: wrap;\n    gap: 12px;\n    font-size: 0.85em;\n}\n\n.attempt-time {\n    color: var(--mj-text-muted);\n}\n\n.attempt-error {\n    color: var(--mj-status-error);\n    flex: 1 0 100%;\n}\n\n.output-length {\n    color: var(--mj-text-muted);\n    font-style: italic;\n}\n\n/* Validation JSON */\n.validation-json {\n    margin-top: 24px;\n}\n\n.validation-json h4 {\n    margin: 0 0 12px 0;\n    font-size: 1em;\n    color: var(--mj-text-secondary);\n}\n\n.json-viewer-container {\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    overflow: hidden;\n}\n\n/* Panel badge styles */\n.panel-badge.success {\n    background: var(--mj-status-success);\n    color: white;\n}\n\n/* Full-screen overlay */\n.fullscreen-overlay {\n    position: fixed;\n    inset: 0;\n    z-index: 10000;\n    background: var(--mj-bg-overlay, rgba(0, 0, 0, 0.6));\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 1.5rem;\n}\n\n.fullscreen-container {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    height: 100%;\n    max-width: 95vw;\n    max-height: 95vh;\n    background: var(--mj-bg-surface);\n    border-radius: 10px;\n    border: 1px solid var(--mj-border-default);\n    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);\n    overflow: hidden;\n}\n\n.fullscreen-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 0.75rem 1rem;\n    background: var(--mj-bg-surface-sunken);\n    border-bottom: 1px solid var(--mj-border-default);\n    flex-shrink: 0;\n}\n\n.fullscreen-title {\n    font-weight: 600;\n    font-size: 0.9rem;\n    color: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n}\n\n.fullscreen-title i {\n    color: var(--mj-text-secondary);\n}\n\n.fullscreen-actions {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.fullscreen-body {\n    flex: 1;\n    min-height: 0;\n    overflow: hidden;\n}\n\n.fullscreen-body mj-code-editor {\n    display: block;\n    height: 100%;\n}\n"] }]
     }], null, null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJAIPromptRunFormComponentExtended, { className: "MJAIPromptRunFormComponentExtended", filePath: "src/lib/custom/AIPromptRuns/ai-prompt-run-form.component.ts", lineNumber: 21 }); })();
 //# sourceMappingURL=ai-prompt-run-form.component.js.map