@memberjunction/ng-core-entity-forms 2.91.0 → 2.92.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/lib/custom/ai-agent-run/ai-agent-run-step-detail.component.js +3 -3
- package/dist/lib/custom/ai-agent-run/ai-agent-run-step-detail.component.js.map +1 -1
- package/dist/lib/custom/ai-agent-run/ai-agent-run.component.js +2 -2
- package/dist/lib/generated/Entities/ComponentLibrary/sections/details.component.d.ts.map +1 -1
- package/dist/lib/generated/Entities/ComponentLibrary/sections/details.component.js +13 -4
- package/dist/lib/generated/Entities/ComponentLibrary/sections/details.component.js.map +1 -1
- package/package.json +16 -16
|
@@ -243,15 +243,15 @@ export class AIAgentRunStepDetailComponent {
|
|
|
243
243
|
this.copyToClipboard.emit(this.getSelectedItemJson());
|
|
244
244
|
}
|
|
245
245
|
static { this.ɵfac = function AIAgentRunStepDetailComponent_Factory(t) { return new (t || AIAgentRunStepDetailComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); }; }
|
|
246
|
-
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AIAgentRunStepDetailComponent, selectors: [["mj-ai-agent-run-step-detail"]], inputs: { selectedTimelineItem: "selectedTimelineItem" }, outputs: { closePanel: "closePanel", navigateToActionLog: "navigateToActionLog", copyToClipboard: "copyToClipboard" }, features: [i0.ɵɵNgOnChangesFeature], decls: 1, vars: 1, consts: [["class", "json-detail-pane", 4, "ngIf"], [1, "json-detail-pane"], [1, "json-pane-header"], [1, "fas", 3, "ngClass"], ["title", "Close", 1, "btn-icon", 3, "click"], [1, "fas", "fa-times"], [1, "json-pane-content"], [1, "json-meta"], [1, "meta-item"], [1, "status-badge", "small"], ["class", "action-link", 4, "ngIf"], [1, "detail-pane-tabs"], [1, "detail-pane-content"], [1, "step-payload-diff"], [1, "json-viewer"], [1, "action-link"], [1, "btn-link", 3, "click"], [1, "fas", "fa-external-link-alt"], [1, "detail-tab", 3, "click"], [1, "fa-solid", "fa-code-branch"], [1, "fa-solid", "fa-code"], [3, "oldValue", "newValue", "title", "showSummary", "showUnchanged", "expandAll", "maxDepth", "maxStringLength", "treatNullAsUndefined"], [1, "json-toolbar"], ["title", "Copy JSON", 1, "btn-icon", 3, "click"], [1, "fas", "fa-copy"], [2, "
|
|
246
|
+
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AIAgentRunStepDetailComponent, selectors: [["mj-ai-agent-run-step-detail"]], inputs: { selectedTimelineItem: "selectedTimelineItem" }, outputs: { closePanel: "closePanel", navigateToActionLog: "navigateToActionLog", copyToClipboard: "copyToClipboard" }, features: [i0.ɵɵNgOnChangesFeature], decls: 1, vars: 1, consts: [["class", "json-detail-pane", 4, "ngIf"], [1, "json-detail-pane"], [1, "json-pane-header"], [1, "fas", 3, "ngClass"], ["title", "Close", 1, "btn-icon", 3, "click"], [1, "fas", "fa-times"], [1, "json-pane-content"], [1, "json-meta"], [1, "meta-item"], [1, "status-badge", "small"], ["class", "action-link", 4, "ngIf"], [1, "detail-pane-tabs"], [1, "detail-pane-content"], [1, "step-payload-diff"], [1, "json-viewer"], [1, "action-link"], [1, "btn-link", 3, "click"], [1, "fas", "fa-external-link-alt"], [1, "detail-tab", 3, "click"], [1, "fa-solid", "fa-code-branch"], [1, "fa-solid", "fa-code"], [3, "oldValue", "newValue", "title", "showSummary", "showUnchanged", "expandAll", "maxDepth", "maxStringLength", "treatNullAsUndefined"], [1, "json-toolbar"], ["title", "Copy JSON", 1, "btn-icon", 3, "click"], [1, "fas", "fa-copy"], [2, "width", "100%", 3, "ngModelChange", "ngModel", "language", "readonly"]], template: function AIAgentRunStepDetailComponent_Template(rf, ctx) { if (rf & 1) {
|
|
247
247
|
i0.ɵɵtemplate(0, AIAgentRunStepDetailComponent_div_0_Template, 29, 12, "div", 0);
|
|
248
248
|
} if (rf & 2) {
|
|
249
249
|
i0.ɵɵproperty("ngIf", ctx.selectedTimelineItem);
|
|
250
|
-
} }, dependencies: [i1.NgClass, i1.NgIf, i2.NgControlStatus, i2.NgModel, i3.CodeEditorComponent, i4.DeepDiffComponent], styles: [".json-detail-pane[_ngcontent-%COMP%] {\n height: 100%;\n display: flex;\n flex-direction: column;\n background: white;\n border-left: 1px solid #e0e6ed;\n}\n\n.json-pane-header[_ngcontent-%COMP%] {\n padding: 16px;\n border-bottom: 1px solid #e0e6ed;\n display: flex;\n justify-content: space-between;\n align-items: center;\n background: #f8f9fa;\n}\n\n.json-pane-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n color: #2c3e50;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.btn-icon[_ngcontent-%COMP%] {\n background: none;\n border: none;\n padding: 4px 8px;\n cursor: pointer;\n color: #6c757d;\n border-radius: 4px;\n transition: all 0.2s;\n}\n\n.btn-icon[_ngcontent-%COMP%]:hover {\n background: rgba(0, 0, 0, 0.05);\n color: #495057;\n}\n\n.json-pane-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n display: flex;\n flex-direction: column;\n}\n\n.json-meta[_ngcontent-%COMP%] {\n padding: 16px;\n display: flex;\n gap: 24px;\n border-bottom: 1px solid #e0e6ed;\n}\n\n.meta-item[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.meta-item[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n font-size: 11px;\n text-transform: uppercase;\n color: #6c757d;\n font-weight: 600;\n}\n\n.meta-item[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n font-size: 13px;\n color: #2c3e50;\n}\n\n.status-badge[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n padding: 4px 8px;\n border-radius: 4px;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n}\n\n.status-badge.small[_ngcontent-%COMP%] {\n padding: 2px 6px;\n font-size: 10px;\n}\n\n.status-badge[data-status=\"Running\"][_ngcontent-%COMP%] {\n background: #e3f2fd;\n color: #1976d2;\n}\n\n.status-badge[data-status=\"Completed\"][_ngcontent-%COMP%] {\n background: #e8f5e9;\n color: #388e3c;\n}\n\n.status-badge[data-status=\"Failed\"][_ngcontent-%COMP%] {\n background: #ffebee;\n color: #d32f2f;\n}\n\n.status-badge[data-status=\"Cancelled\"][_ngcontent-%COMP%] {\n background: #fff3e0;\n color: #f57c00;\n}\n\n.action-link[_ngcontent-%COMP%] {\n padding: 12px 16px;\n border-bottom: 1px solid #e0e6ed;\n}\n\n.btn-link[_ngcontent-%COMP%] {\n background: none;\n border: none;\n color: #2196f3;\n cursor: pointer;\n padding: 6px 12px;\n border-radius: 4px;\n transition: all 0.2s;\n display: inline-flex;\n align-items: center;\n gap: 6px;\n font-size: 13px;\n}\n\n.btn-link[_ngcontent-%COMP%]:hover {\n background: rgba(33, 150, 243, 0.1);\n color: #1976d2;\n}\n\n.detail-pane-tabs[_ngcontent-%COMP%] {\n display: flex;\n gap: 0;\n background: #f8f9fa;\n border-bottom: 1px solid #e0e6ed;\n padding: 0 16px;\n}\n\n.detail-tab[_ngcontent-%COMP%] {\n padding: 12px 16px;\n background: none;\n border: none;\n border-bottom: 2px solid transparent;\n cursor: pointer;\n font-size: 13px;\n color: #6c757d;\n transition: all 0.2s;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.detail-tab[_ngcontent-%COMP%]:hover {\n color: #495057;\n background: rgba(0, 0, 0, 0.02);\n}\n\n.detail-tab.active[_ngcontent-%COMP%] {\n color: #2196f3;\n border-bottom-color: #2196f3;\n font-weight: 600;\n}\n\n.detail-pane-content[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n height:
|
|
250
|
+
} }, dependencies: [i1.NgClass, i1.NgIf, i2.NgControlStatus, i2.NgModel, i3.CodeEditorComponent, i4.DeepDiffComponent], styles: [".json-detail-pane[_ngcontent-%COMP%] {\n height: 100%;\n display: flex;\n flex-direction: column;\n background: white;\n border-left: 1px solid #e0e6ed;\n}\n\n.json-pane-header[_ngcontent-%COMP%] {\n padding: 16px;\n border-bottom: 1px solid #e0e6ed;\n display: flex;\n justify-content: space-between;\n align-items: center;\n background: #f8f9fa;\n}\n\n.json-pane-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n color: #2c3e50;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.btn-icon[_ngcontent-%COMP%] {\n background: none;\n border: none;\n padding: 4px 8px;\n cursor: pointer;\n color: #6c757d;\n border-radius: 4px;\n transition: all 0.2s;\n}\n\n.btn-icon[_ngcontent-%COMP%]:hover {\n background: rgba(0, 0, 0, 0.05);\n color: #495057;\n}\n\n.json-pane-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n display: flex;\n flex-direction: column;\n}\n\n.json-meta[_ngcontent-%COMP%] {\n padding: 16px;\n display: flex;\n gap: 24px;\n border-bottom: 1px solid #e0e6ed;\n}\n\n.meta-item[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.meta-item[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n font-size: 11px;\n text-transform: uppercase;\n color: #6c757d;\n font-weight: 600;\n}\n\n.meta-item[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n font-size: 13px;\n color: #2c3e50;\n}\n\n.status-badge[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n padding: 4px 8px;\n border-radius: 4px;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n}\n\n.status-badge.small[_ngcontent-%COMP%] {\n padding: 2px 6px;\n font-size: 10px;\n}\n\n.status-badge[data-status=\"Running\"][_ngcontent-%COMP%] {\n background: #e3f2fd;\n color: #1976d2;\n}\n\n.status-badge[data-status=\"Completed\"][_ngcontent-%COMP%] {\n background: #e8f5e9;\n color: #388e3c;\n}\n\n.status-badge[data-status=\"Failed\"][_ngcontent-%COMP%] {\n background: #ffebee;\n color: #d32f2f;\n}\n\n.status-badge[data-status=\"Cancelled\"][_ngcontent-%COMP%] {\n background: #fff3e0;\n color: #f57c00;\n}\n\n.action-link[_ngcontent-%COMP%] {\n padding: 12px 16px;\n border-bottom: 1px solid #e0e6ed;\n}\n\n.btn-link[_ngcontent-%COMP%] {\n background: none;\n border: none;\n color: #2196f3;\n cursor: pointer;\n padding: 6px 12px;\n border-radius: 4px;\n transition: all 0.2s;\n display: inline-flex;\n align-items: center;\n gap: 6px;\n font-size: 13px;\n}\n\n.btn-link[_ngcontent-%COMP%]:hover {\n background: rgba(33, 150, 243, 0.1);\n color: #1976d2;\n}\n\n.detail-pane-tabs[_ngcontent-%COMP%] {\n display: flex;\n gap: 0;\n background: #f8f9fa;\n border-bottom: 1px solid #e0e6ed;\n padding: 0 16px;\n}\n\n.detail-tab[_ngcontent-%COMP%] {\n padding: 12px 16px;\n background: none;\n border: none;\n border-bottom: 2px solid transparent;\n cursor: pointer;\n font-size: 13px;\n color: #6c757d;\n transition: all 0.2s;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.detail-tab[_ngcontent-%COMP%]:hover {\n color: #495057;\n background: rgba(0, 0, 0, 0.02);\n}\n\n.detail-tab.active[_ngcontent-%COMP%] {\n color: #2196f3;\n border-bottom-color: #2196f3;\n font-weight: 600;\n}\n\n.detail-pane-content[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n min-height: 0; \n\n}\n\n\n\n\n\n\n\n\n.json-viewer[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n flex-direction: column;\n position: relative;\n overflow: hidden;\n min-height: 0; \n\n}\n\n.json-toolbar[_ngcontent-%COMP%] {\n position: absolute;\n top: 8px;\n right: 8px;\n z-index: 10;\n display: flex;\n gap: 4px;\n}\n\n.step-payload-diff[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n padding: 16px;\n min-height: 0; \n\n}\n\n\n\n.json-viewer[_ngcontent-%COMP%] mj-code-editor[_ngcontent-%COMP%] {\n flex: 1;\n overflow: hidden;\n min-height: 0;\n display: flex;\n flex-direction: column;\n}"] }); }
|
|
251
251
|
}
|
|
252
252
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AIAgentRunStepDetailComponent, [{
|
|
253
253
|
type: Component,
|
|
254
|
-
args: [{ selector: 'mj-ai-agent-run-step-detail', template: "<div class=\"json-detail-pane\" *ngIf=\"selectedTimelineItem\">\n <div class=\"json-pane-header\">\n <h3>\n <i class=\"fas\" [ngClass]=\"selectedTimelineItem.icon\"></i>\n {{ selectedTimelineItem.title }}\n </h3>\n <button class=\"btn-icon\" (click)=\"onClosePanel()\" title=\"Close\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n <div class=\"json-pane-content\">\n <div class=\"json-meta\">\n <div class=\"meta-item\">\n <label>Type</label>\n <span>{{ selectedTimelineItem.type }}</span>\n </div>\n <div class=\"meta-item\">\n <label>Status</label>\n <span class=\"status-badge small\" [attr.data-status]=\"selectedTimelineItem.status\">\n {{ selectedTimelineItem.status }}\n </span>\n </div>\n <div class=\"meta-item\">\n <label>Duration</label>\n <span>{{ selectedTimelineItem.duration || 'N/A' }}</span>\n </div>\n </div>\n \n <!-- Action-specific link -->\n <div class=\"action-link\" *ngIf=\"selectedTimelineItem.type === 'action' && selectedTimelineItem.data?.ID\">\n <button class=\"btn-link\" (click)=\"onNavigateToActionLog(selectedTimelineItem.data.ID)\">\n <i class=\"fas fa-external-link-alt\"></i> View Action Execution Log\n </button>\n </div>\n \n <!-- Tab Navigation - Only show when we have both options -->\n @if (showStepPayloadDiff) {\n <div class=\"detail-pane-tabs\">\n <button \n class=\"detail-tab\" \n [class.active]=\"detailPaneTab === 'diff'\"\n (click)=\"detailPaneTab = 'diff'\">\n <i class=\"fa-solid fa-code-branch\"></i>\n Payload Changes\n </button>\n <button \n class=\"detail-tab\" \n [class.active]=\"detailPaneTab === 'json'\"\n (click)=\"detailPaneTab = 'json'\">\n <i class=\"fa-solid fa-code\"></i>\n Full JSON\n </button>\n </div>\n }\n \n <!-- Tab Content -->\n <div class=\"detail-pane-content\" [class.with-tabs]=\"showStepPayloadDiff\">\n <!-- Payload Diff Tab -->\n @if (detailPaneTab === 'diff' && showStepPayloadDiff) {\n <div class=\"step-payload-diff\">\n <mj-deep-diff\n [oldValue]=\"stepPayloadAtStartObject\"\n [newValue]=\"stepPayloadAtEndObject\"\n [title]=\"''\"\n [showSummary]=\"true\"\n [showUnchanged]=\"false\"\n [expandAll]=\"false\"\n [maxDepth]=\"8\"\n [maxStringLength]=\"150\"\n [treatNullAsUndefined]=\"true\">\n </mj-deep-diff>\n </div>\n }\n \n <!-- Full JSON Tab -->\n @if (detailPaneTab === 'json' || !showStepPayloadDiff) {\n <div class=\"json-viewer\">\n <div class=\"json-toolbar\">\n <button class=\"btn-icon\" title=\"Copy JSON\" (click)=\"onCopyToClipboard()\">\n <i class=\"fas fa-copy\"></i>\n </button>\n </div>\n <mj-code-editor\n [(ngModel)]=\"selectedItemJsonString\"\n [language]=\"'json'\"\n [readonly]=\"true\"\n style=\"
|
|
254
|
+
args: [{ selector: 'mj-ai-agent-run-step-detail', template: "<div class=\"json-detail-pane\" *ngIf=\"selectedTimelineItem\">\n <div class=\"json-pane-header\">\n <h3>\n <i class=\"fas\" [ngClass]=\"selectedTimelineItem.icon\"></i>\n {{ selectedTimelineItem.title }}\n </h3>\n <button class=\"btn-icon\" (click)=\"onClosePanel()\" title=\"Close\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n <div class=\"json-pane-content\">\n <div class=\"json-meta\">\n <div class=\"meta-item\">\n <label>Type</label>\n <span>{{ selectedTimelineItem.type }}</span>\n </div>\n <div class=\"meta-item\">\n <label>Status</label>\n <span class=\"status-badge small\" [attr.data-status]=\"selectedTimelineItem.status\">\n {{ selectedTimelineItem.status }}\n </span>\n </div>\n <div class=\"meta-item\">\n <label>Duration</label>\n <span>{{ selectedTimelineItem.duration || 'N/A' }}</span>\n </div>\n </div>\n \n <!-- Action-specific link -->\n <div class=\"action-link\" *ngIf=\"selectedTimelineItem.type === 'action' && selectedTimelineItem.data?.ID\">\n <button class=\"btn-link\" (click)=\"onNavigateToActionLog(selectedTimelineItem.data.ID)\">\n <i class=\"fas fa-external-link-alt\"></i> View Action Execution Log\n </button>\n </div>\n \n <!-- Tab Navigation - Only show when we have both options -->\n @if (showStepPayloadDiff) {\n <div class=\"detail-pane-tabs\">\n <button \n class=\"detail-tab\" \n [class.active]=\"detailPaneTab === 'diff'\"\n (click)=\"detailPaneTab = 'diff'\">\n <i class=\"fa-solid fa-code-branch\"></i>\n Payload Changes\n </button>\n <button \n class=\"detail-tab\" \n [class.active]=\"detailPaneTab === 'json'\"\n (click)=\"detailPaneTab = 'json'\">\n <i class=\"fa-solid fa-code\"></i>\n Full JSON\n </button>\n </div>\n }\n \n <!-- Tab Content -->\n <div class=\"detail-pane-content\" [class.with-tabs]=\"showStepPayloadDiff\">\n <!-- Payload Diff Tab -->\n @if (detailPaneTab === 'diff' && showStepPayloadDiff) {\n <div class=\"step-payload-diff\">\n <mj-deep-diff\n [oldValue]=\"stepPayloadAtStartObject\"\n [newValue]=\"stepPayloadAtEndObject\"\n [title]=\"''\"\n [showSummary]=\"true\"\n [showUnchanged]=\"false\"\n [expandAll]=\"false\"\n [maxDepth]=\"8\"\n [maxStringLength]=\"150\"\n [treatNullAsUndefined]=\"true\">\n </mj-deep-diff>\n </div>\n }\n \n <!-- Full JSON Tab -->\n @if (detailPaneTab === 'json' || !showStepPayloadDiff) {\n <div class=\"json-viewer\">\n <div class=\"json-toolbar\">\n <button class=\"btn-icon\" title=\"Copy JSON\" (click)=\"onCopyToClipboard()\">\n <i class=\"fas fa-copy\"></i>\n </button>\n </div>\n <mj-code-editor\n [(ngModel)]=\"selectedItemJsonString\"\n [language]=\"'json'\"\n [readonly]=\"true\"\n style=\"width: 100%;\">\n </mj-code-editor>\n </div>\n }\n </div>\n </div>\n</div>", styles: [".json-detail-pane {\n height: 100%;\n display: flex;\n flex-direction: column;\n background: white;\n border-left: 1px solid #e0e6ed;\n}\n\n.json-pane-header {\n padding: 16px;\n border-bottom: 1px solid #e0e6ed;\n display: flex;\n justify-content: space-between;\n align-items: center;\n background: #f8f9fa;\n}\n\n.json-pane-header h3 {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n color: #2c3e50;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.btn-icon {\n background: none;\n border: none;\n padding: 4px 8px;\n cursor: pointer;\n color: #6c757d;\n border-radius: 4px;\n transition: all 0.2s;\n}\n\n.btn-icon:hover {\n background: rgba(0, 0, 0, 0.05);\n color: #495057;\n}\n\n.json-pane-content {\n flex: 1;\n overflow-y: auto;\n display: flex;\n flex-direction: column;\n}\n\n.json-meta {\n padding: 16px;\n display: flex;\n gap: 24px;\n border-bottom: 1px solid #e0e6ed;\n}\n\n.meta-item {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.meta-item label {\n font-size: 11px;\n text-transform: uppercase;\n color: #6c757d;\n font-weight: 600;\n}\n\n.meta-item span {\n font-size: 13px;\n color: #2c3e50;\n}\n\n.status-badge {\n display: inline-flex;\n align-items: center;\n padding: 4px 8px;\n border-radius: 4px;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n}\n\n.status-badge.small {\n padding: 2px 6px;\n font-size: 10px;\n}\n\n.status-badge[data-status=\"Running\"] {\n background: #e3f2fd;\n color: #1976d2;\n}\n\n.status-badge[data-status=\"Completed\"] {\n background: #e8f5e9;\n color: #388e3c;\n}\n\n.status-badge[data-status=\"Failed\"] {\n background: #ffebee;\n color: #d32f2f;\n}\n\n.status-badge[data-status=\"Cancelled\"] {\n background: #fff3e0;\n color: #f57c00;\n}\n\n.action-link {\n padding: 12px 16px;\n border-bottom: 1px solid #e0e6ed;\n}\n\n.btn-link {\n background: none;\n border: none;\n color: #2196f3;\n cursor: pointer;\n padding: 6px 12px;\n border-radius: 4px;\n transition: all 0.2s;\n display: inline-flex;\n align-items: center;\n gap: 6px;\n font-size: 13px;\n}\n\n.btn-link:hover {\n background: rgba(33, 150, 243, 0.1);\n color: #1976d2;\n}\n\n.detail-pane-tabs {\n display: flex;\n gap: 0;\n background: #f8f9fa;\n border-bottom: 1px solid #e0e6ed;\n padding: 0 16px;\n}\n\n.detail-tab {\n padding: 12px 16px;\n background: none;\n border: none;\n border-bottom: 2px solid transparent;\n cursor: pointer;\n font-size: 13px;\n color: #6c757d;\n transition: all 0.2s;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.detail-tab:hover {\n color: #495057;\n background: rgba(0, 0, 0, 0.02);\n}\n\n.detail-tab.active {\n color: #2196f3;\n border-bottom-color: #2196f3;\n font-weight: 600;\n}\n\n.detail-pane-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n min-height: 0; /* Allow flexbox to properly size */\n}\n\n/* \n.detail-pane-content.with-tabs {\n // No explicit height needed with flexbox \n} \n*/\n\n.json-viewer {\n flex: 1;\n display: flex;\n flex-direction: column;\n position: relative;\n overflow: hidden;\n min-height: 0; /* Important for flexbox children to respect overflow */\n}\n\n.json-toolbar {\n position: absolute;\n top: 8px;\n right: 8px;\n z-index: 10;\n display: flex;\n gap: 4px;\n}\n\n.step-payload-diff {\n flex: 1;\n overflow-y: auto;\n padding: 16px;\n min-height: 0; /* Allow proper scrolling */\n}\n\n/* Specific styling for mj-code-editor container */\n.json-viewer mj-code-editor {\n flex: 1;\n overflow: hidden;\n min-height: 0;\n display: flex;\n flex-direction: column;\n}"] }]
|
|
255
255
|
}], () => [{ type: i0.ChangeDetectorRef }], { selectedTimelineItem: [{
|
|
256
256
|
type: Input
|
|
257
257
|
}], closePanel: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ai-agent-run-step-detail.component.js","sourceRoot":"","sources":["../../../../src/lib/custom/ai-agent-run/ai-agent-run-step-detail.component.ts","../../../../src/lib/custom/ai-agent-run/ai-agent-run-step-detail.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,EAAqB,MAAM,eAAe,CAAC;AAE1F,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AACrE,OAAO,EAAE,kBAAkB,EAAoB,MAAM,wBAAwB,CAAC;;;;;;;;IC2BxE,AADF,+BAAyG,iBAChB;IAA9D,iMAAS,iEAAmD,KAAC;IACpF,wBAAwC;IAAC,2CAC3C;IACF,AADE,iBAAS,EACL;;;;IAKF,AADF,+BAA8B,iBAIO;IAAjC,gOAAyB,MAAM,KAAC;IAChC,wBAAuC;IACvC,iCACF;IAAA,iBAAS;IACT,kCAGmC;IAAjC,gOAAyB,MAAM,KAAC;IAChC,wBAAgC;IAChC,2BACF;IACF,AADE,iBAAS,EACL;;;IAZF,cAAyC;IAAzC,yDAAyC;IAOzC,eAAyC;IAAzC,yDAAyC;;;IAY3C,+BAA+B;IAC7B,mCAUe;IACjB,iBAAM;;;IAVF,cAAqC;IAQrC,AADA,AADA,AADA,AADA,AADA,AADA,AADA,AADA,0DAAqC,2CACF,aACvB,qBACQ,wBACG,oBACJ,eACL,wBACS,8BACM;;;;IAS7B,AADF,AADF,+BAAyB,cACG,iBACiD;IAA9B,yMAAS,0BAAmB,KAAC;IACtE,wBAA2B;IAE/B,AADE,iBAAS,EACL;IACN,
|
|
1
|
+
{"version":3,"file":"ai-agent-run-step-detail.component.js","sourceRoot":"","sources":["../../../../src/lib/custom/ai-agent-run/ai-agent-run-step-detail.component.ts","../../../../src/lib/custom/ai-agent-run/ai-agent-run-step-detail.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,EAAqB,MAAM,eAAe,CAAC;AAE1F,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AACrE,OAAO,EAAE,kBAAkB,EAAoB,MAAM,wBAAwB,CAAC;;;;;;;;IC2BxE,AADF,+BAAyG,iBAChB;IAA9D,iMAAS,iEAAmD,KAAC;IACpF,wBAAwC;IAAC,2CAC3C;IACF,AADE,iBAAS,EACL;;;;IAKF,AADF,+BAA8B,iBAIO;IAAjC,gOAAyB,MAAM,KAAC;IAChC,wBAAuC;IACvC,iCACF;IAAA,iBAAS;IACT,kCAGmC;IAAjC,gOAAyB,MAAM,KAAC;IAChC,wBAAgC;IAChC,2BACF;IACF,AADE,iBAAS,EACL;;;IAZF,cAAyC;IAAzC,yDAAyC;IAOzC,eAAyC;IAAzC,yDAAyC;;;IAY3C,+BAA+B;IAC7B,mCAUe;IACjB,iBAAM;;;IAVF,cAAqC;IAQrC,AADA,AADA,AADA,AADA,AADA,AADA,AADA,AADA,0DAAqC,2CACF,aACvB,qBACQ,wBACG,oBACJ,eACL,wBACS,8BACM;;;;IAS7B,AADF,AADF,+BAAyB,cACG,iBACiD;IAA9B,yMAAS,0BAAmB,KAAC;IACtE,wBAA2B;IAE/B,AADE,iBAAS,EACL;IACN,0CAIuB;IAHrB,kWAAoC;IAKxC,AADE,iBAAiB,EACb;;;IALF,eAAoC;IAApC,6DAAoC;IAEpC,AADA,iCAAmB,kBACF;;;;IAnFzB,AADF,AADF,8BAA2D,aAC3B,SACxB;IACF,uBAAyD;IACzD,YACF;IAAA,iBAAK;IACL,iCAAgE;IAAvC,yLAAS,qBAAc,KAAC;IAC/C,uBAA4B;IAEhC,AADE,iBAAS,EACL;IAIA,AADF,AADF,AADF,8BAA+B,aACN,aACE,aACd;IAAA,qBAAI;IAAA,iBAAQ;IACnB,6BAAM;IAAA,aAA+B;IACvC,AADuC,iBAAO,EACxC;IAEJ,AADF,+BAAuB,aACd;IAAA,uBAAM;IAAA,iBAAQ;IACrB,gCAAkF;IAChF,aACF;IACF,AADE,iBAAO,EACH;IAEJ,AADF,+BAAuB,aACd;IAAA,yBAAQ;IAAA,iBAAQ;IACvB,6BAAM;IAAA,aAA4C;IAEtD,AADE,AADoD,iBAAO,EACrD,EACF;IAUN,AAPA,uFAAyG,kFAO9E;IAoB3B,gCAAyE;IAmBvE,AAjBA,+FAAuD,kFAiBC;IAiB9D,AADE,AADE,iBAAM,EACF,EACF;;;IAzFe,eAAqC;IAArC,0DAAqC;IACpD,cACF;IADE,kEACF;IASU,eAA+B;IAA/B,sDAA+B;IAIJ,eAAgD;;IAC/E,cACF;IADE,mEACF;IAIM,eAA4C;IAA5C,mEAA4C;IAK5B,cAA6E;IAA7E,+JAA6E;IAOvG,cAiBC;IAjBD,sDAiBC;IAGgC,cAAuC;IAAvC,uDAAuC;IAEtE,cAcC;IAdD,yFAcC;IAGD,cAcC;IAdD,0FAcC;;AD/EP,MAAM,OAAO,6BAA6B;IASxC,YAAoB,GAAsB;QAAtB,QAAG,GAAH,GAAG,CAAmB;QARjC,yBAAoB,GAAwB,IAAI,CAAC;QAChD,eAAU,GAAG,IAAI,YAAY,EAAQ,CAAC;QACtC,wBAAmB,GAAG,IAAI,YAAY,EAAU,CAAC;QACjD,oBAAe,GAAG,IAAI,YAAY,EAAU,CAAC;QAEvD,2BAAsB,GAAG,IAAI,CAAC;QAC9B,kBAAa,GAAoB,MAAM,CAAC;IAEK,CAAC;IAE9C,WAAW;QACT,IAAI,IAAI,CAAC,oBAAoB,EAAE,CAAC;YAC9B,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC;YACzD,mEAAmE;YACnE,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;YAChE,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE,CAAC;QAC3B,CAAC;IACH,CAAC;IAED,mBAAmB;QACjB,IAAI,CAAC,IAAI,CAAC,oBAAoB;YAAE,OAAO,IAAI,CAAC;QAE5C,mCAAmC;QACnC,IAAI,IAAI,CAAC;QACT,IAAI,IAAI,CAAC,oBAAoB,CAAC,IAAI,YAAY,oBAAoB,EAAE,CAAC;YACnE,0DAA0D;YAC1D,IAAI,GAAG,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;QACjD,CAAC;aAAM,CAAC;YACN,IAAI,GAAG,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC;QACxC,CAAC;QAED,yDAAyD;QACzD,MAAM,YAAY,GAAqB;YACrC,iBAAiB,EAAE,IAAI;YACvB,QAAQ,EAAE,GAAG;YACb,KAAK,EAAE,KAAK;SACb,CAAC;QACF,MAAM,UAAU,GAAG,kBAAkB,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;QAE1D,OAAO,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IAC7C,CAAC;IAED;;OAEG;IACH,IAAI,mBAAmB;QACrB,IAAI,CAAC,IAAI,CAAC,oBAAoB,IAAI,IAAI,CAAC,oBAAoB,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;YAC5E,OAAO,KAAK,CAAC;QACf,CAAC;QAED,MAAM,QAAQ,GAAG,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC;QAChD,IAAI,QAAQ,IAAI,CAAC,QAAQ,CAAC,cAAc,EAAE,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC;eAC3C,QAAQ,CAAC,YAAY,EAAE,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE,CAAC;YAC1D,OAAO,QAAQ,CAAC,cAAc,KAAK,QAAQ,CAAC,YAAY,CAAC;QAC3D,CAAC;aAAM,CAAC;YACN,OAAO,KAAK,CAAC;QACf,CAAC;IACH,CAAC;IAED;;OAEG;IACH,IAAI,wBAAwB;QAC1B,IAAI,CAAC,IAAI,CAAC,oBAAoB,IAAI,IAAI,CAAC,oBAAoB,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;YAC5E,OAAO,IAAI,CAAC;QACd,CAAC;QAED,MAAM,QAAQ,GAAG,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC;QAChD,IAAI,CAAC,QAAQ,EAAE,cAAc;YAAE,OAAO,IAAI,CAAC;QAE3C,IAAI,CAAC;YACH,0EAA0E;YAC1E,IAAI,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC;YAC1C,IAAI,CAAC;gBACH,qDAAqD;gBACrD,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC;YACpD,CAAC;YAAC,MAAM,CAAC;gBACP,uCAAuC;gBACvC,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC;YACxC,CAAC;YAED,MAAM,YAAY,GAAqB;gBACrC,iBAAiB,EAAE,IAAI;gBACvB,QAAQ,EAAE,GAAG;gBACb,KAAK,EAAE,KAAK;aACb,CAAC;YACF,OAAO,kBAAkB,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC;QACvD,CAAC;QAAC,OAAO,CAAC,EAAE,CAAC;YACX,OAAO,IAAI,CAAC;QACd,CAAC;IACH,CAAC;IAED;;OAEG;IACH,IAAI,sBAAsB;QACxB,IAAI,CAAC,IAAI,CAAC,oBAAoB,IAAI,IAAI,CAAC,oBAAoB,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;YAC5E,OAAO,IAAI,CAAC;QACd,CAAC;QAED,MAAM,QAAQ,GAAG,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC;QAChD,IAAI,CAAC,QAAQ,EAAE,YAAY;YAAE,OAAO,IAAI,CAAC;QAEzC,IAAI,CAAC;YACH,wEAAwE;YACxE,IAAI,WAAW,GAAG,QAAQ,CAAC,YAAY,CAAC;YACxC,IAAI,CAAC;gBACH,mDAAmD;gBACnD,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC;YAClD,CAAC;YAAC,MAAM,CAAC;gBACP,uCAAuC;gBACvC,WAAW,GAAG,QAAQ,CAAC,YAAY,CAAC;YACtC,CAAC;YAED,MAAM,YAAY,GAAqB;gBACrC,iBAAiB,EAAE,IAAI;gBACvB,QAAQ,EAAE,GAAG;gBACb,KAAK,EAAE,KAAK;aACb,CAAC;YACF,OAAO,kBAAkB,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC;QACvD,CAAC;QAAC,OAAO,CAAC,EAAE,CAAC;YACX,OAAO,IAAI,CAAC;QACd,CAAC;IACH,CAAC;IAED,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;IACzB,CAAC;IAED,qBAAqB,CAAC,KAAa;QACjC,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACvC,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAAE,CAAC,CAAC;IACxD,CAAC;8FAxIU,6BAA6B;oEAA7B,6BAA6B;YCV1C,gFAA2D;;YAA5B,+CAA0B;;;iFDU5C,6BAA6B;cALzC,SAAS;2BACE,6BAA6B;kDAK9B,oBAAoB;kBAA5B,KAAK;YACI,UAAU;kBAAnB,MAAM;YACG,mBAAmB;kBAA5B,MAAM;YACG,eAAe;kBAAxB,MAAM;;kFAJI,6BAA6B"}
|
|
@@ -1283,7 +1283,7 @@ let AIAgentRunFormComponentExtended = class AIAgentRunFormComponentExtended exte
|
|
|
1283
1283
|
i0.ɵɵproperty("ngIf", ctx.activeTab === "analytics");
|
|
1284
1284
|
i0.ɵɵadvance();
|
|
1285
1285
|
i0.ɵɵproperty("ngIf", ctx.activeTab === "details");
|
|
1286
|
-
} }, dependencies: [i4.NgClass, i4.NgIf, i5.NgControlStatus, i5.NgModel, i6.PanelBarComponent, i6.PanelBarItemComponent, i6.PanelBarContentDirective, i6.SplitterComponent, i6.SplitterPaneComponent, i7.CodeEditorComponent, i8.DeepDiffComponent, i9.AIAgentRunTimelineComponent, i10.AIAgentRunAnalyticsComponent, i11.AIAgentRunVisualizationComponent, i12.AIAgentRunStepDetailComponent, i4.DecimalPipe, i4.DatePipe], styles: [".ai-agent-run-form[_ngcontent-%COMP%] {\n height: 100%;\n overflow: auto;\n}\n\n\n\n.header[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);\n border-bottom: 1px solid #e0e6ed;\n padding: 20px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.04);\n}\n\n.header-content[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n margin-bottom: 16px;\n}\n\n.header-left[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 16px;\n}\n\n.icon-wrapper[_ngcontent-%COMP%] {\n width: 48px;\n height: 48px;\n background: linear-gradient(135deg, #2196f3, #1976d2);\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-size: 20px;\n}\n\n.header-info[_ngcontent-%COMP%] h2[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 24px;\n font-weight: 600;\n color: #2c3e50;\n}\n\n.meta-info[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n margin-top: 4px;\n font-size: 14px;\n color: #6c757d;\n}\n\n.parent-run[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.parent-link[_ngcontent-%COMP%] {\n color: #ff6358;\n text-decoration: none;\n cursor: pointer;\n transition: color 0.2s;\n}\n\n.parent-link[_ngcontent-%COMP%]:hover {\n color: #ff4444;\n text-decoration: underline;\n}\n\n.agent-name[_ngcontent-%COMP%] {\n font-weight: 500;\n color: #495057;\n}\n\n.run-id[_ngcontent-%COMP%] {\n font-family: monospace;\n font-size: 12px;\n opacity: 0.7;\n}\n\n.header-right[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 16px;\n}\n\n.status-badge[_ngcontent-%COMP%] {\n padding: 6px 16px;\n border-radius: 20px;\n font-size: 13px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n display: inline-flex;\n align-items: center;\n gap: 6px;\n}\n\n.status-badge[data-status=\"Running\"][_ngcontent-%COMP%] {\n background: #e3f2fd;\n color: #1976d2;\n}\n\n.status-badge[data-status=\"Completed\"][_ngcontent-%COMP%] {\n background: #d4edda;\n color: #155724;\n}\n\n.status-badge[data-status=\"Failed\"][_ngcontent-%COMP%] {\n background: #f8d7da;\n color: #721c24;\n}\n\n.status-badge[data-status=\"Cancelled\"][_ngcontent-%COMP%] {\n background: #fff3cd;\n color: #856404;\n}\n\n.status-badge[data-status=\"Paused\"][_ngcontent-%COMP%] {\n background: #e2e3e5;\n color: #383d41;\n}\n\n.status-badge.small[_ngcontent-%COMP%] {\n padding: 4px 12px;\n font-size: 11px;\n}\n\n.header-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n}\n\n.btn-icon[_ngcontent-%COMP%] {\n width: 36px;\n height: 36px;\n border: 1px solid #dee2e6;\n background: white;\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.2s ease;\n color: #6c757d;\n}\n\n.btn-icon[_ngcontent-%COMP%]:hover {\n background: #f8f9fa;\n border-color: #adb5bd;\n color: #495057;\n}\n\n.header-stats[_ngcontent-%COMP%] {\n display: flex;\n gap: 24px;\n padding-top: 12px;\n border-top: 1px solid #e9ecef;\n}\n\n\n\n.configuration-bar[_ngcontent-%COMP%] {\n display: flex;\n gap: 24px;\n padding-top: 16px;\n border-top: 1px solid #e9ecef;\n margin-top: 16px;\n}\n\n.config-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.config-item[_ngcontent-%COMP%] > i[_ngcontent-%COMP%] {\n font-size: 1.2em;\n color: #6c757d;\n width: 24px;\n text-align: center;\n}\n\n.config-content[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n}\n\n.config-label[_ngcontent-%COMP%] {\n font-size: 12px;\n color: #6c757d;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.config-value[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 600;\n color: #2c3e50;\n}\n\n.config-value[_ngcontent-%COMP%] .entity-link[_ngcontent-%COMP%] {\n color: #007bff;\n text-decoration: none;\n cursor: pointer;\n transition: color 0.2s;\n}\n\n.config-value[_ngcontent-%COMP%] .entity-link[_ngcontent-%COMP%]:hover {\n color: #0056b3;\n text-decoration: underline;\n}\n\n.stat[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.stat[_ngcontent-%COMP%] .label[_ngcontent-%COMP%] {\n font-size: 12px;\n color: #6c757d;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.stat[_ngcontent-%COMP%] .value[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 500;\n color: #495057;\n}\n\n.stat[_ngcontent-%COMP%] .value.success[_ngcontent-%COMP%] {\n color: #28a745;\n}\n\n.stat[_ngcontent-%COMP%] .value.error[_ngcontent-%COMP%] {\n color: #dc3545;\n}\n\n\n\n.tabs[_ngcontent-%COMP%] {\n display: flex;\n border-bottom: 1px solid #dee2e6;\n background: #f8f9fa;\n}\n\n.tab[_ngcontent-%COMP%] {\n padding: 12px 24px;\n border: none;\n background: transparent;\n cursor: pointer;\n font-size: 14px;\n font-weight: 500;\n color: #6c757d;\n display: flex;\n align-items: center;\n gap: 8px;\n transition: all 0.2s ease;\n border-bottom: 3px solid transparent;\n}\n\n.tab[_ngcontent-%COMP%]:hover {\n color: #495057;\n background: rgba(0,0,0,0.02);\n}\n\n.tab.active[_ngcontent-%COMP%] {\n color: #2196f3;\n border-bottom-color: #2196f3;\n background: white;\n}\n\n\n\n.content-area[_ngcontent-%COMP%] {\n position: relative;\n height: calc(100vh - 280px);\n overflow: auto;\n background: white;\n}\n\n.tab-content[_ngcontent-%COMP%] {\n height: 100%;\n overflow: auto;\n}\n\n\n\n.tab-content[ng-reflect-ng-if=\"true\"][_ngcontent-%COMP%] > kendo-panelbar[_ngcontent-%COMP%] {\n height: 100%;\n overflow-y: auto;\n}\n\n\n\n.json-detail-pane[_ngcontent-%COMP%] {\n height: 100%;\n display: flex;\n flex-direction: column;\n background: #f8f9fa;\n border-left: 1px solid #e0e6ed;\n}\n\n.json-pane-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 16px 20px;\n background: white;\n border-bottom: 1px solid #e0e6ed;\n box-shadow: 0 2px 4px rgba(0,0,0,0.04);\n}\n\n.json-pane-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n color: #2c3e50;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.json-pane-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #6b7280;\n font-size: 14px;\n}\n\n.json-pane-content[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: auto;\n padding: 16px;\n}\n\n.json-meta[_ngcontent-%COMP%] {\n display: flex;\n gap: 20px;\n margin-bottom: 16px;\n flex-wrap: wrap;\n}\n\n.json-meta[_ngcontent-%COMP%] .meta-item[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.json-meta[_ngcontent-%COMP%] .meta-item[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n font-size: 11px;\n text-transform: uppercase;\n color: #6b7280;\n font-weight: 600;\n letter-spacing: 0.5px;\n}\n\n.json-meta[_ngcontent-%COMP%] .meta-item[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n font-size: 14px;\n color: #2c3e50;\n font-weight: 500;\n}\n\n.action-link[_ngcontent-%COMP%] {\n margin-bottom: 12px;\n}\n\n.action-link[_ngcontent-%COMP%] .btn-link[_ngcontent-%COMP%] {\n background: none;\n border: none;\n color: #2196f3;\n font-size: 14px;\n cursor: pointer;\n padding: 6px 12px;\n border-radius: 4px;\n transition: all 0.2s;\n display: inline-flex;\n align-items: center;\n gap: 6px;\n}\n\n.action-link[_ngcontent-%COMP%] .btn-link[_ngcontent-%COMP%]:hover {\n background: rgba(33, 150, 243, 0.08);\n color: #1976d2;\n}\n\n.json-viewer[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n flex-direction: column;\n background: white;\n border-radius: 8px;\n border: 1px solid #e0e6ed;\n overflow: auto;\n padding: 20px;\n gap: 10px;\n min-height: 0;\n margin-bottom: 45px;\n}\n\n\n.json-toolbar[_ngcontent-%COMP%] {\n display: flex;\n justify-content: flex-end;\n padding: 8px 12px;\n background: #f8f9fa;\n border-bottom: 1px solid #e0e6ed;\n}\n\n\n\n.timeline-container[_ngcontent-%COMP%] {\n height: 100%;\n overflow-y: auto;\n padding: 20px;\n}\n\n.timeline-container[_ngcontent-%COMP%] > .timeline[_ngcontent-%COMP%] {\n max-width: 900px;\n margin: 0 auto;\n}\n\n.timeline[_ngcontent-%COMP%] {\n position: relative;\n padding-left: 40px;\n}\n\n.timeline[_ngcontent-%COMP%]::before {\n content: '';\n position: absolute;\n left: 20px;\n top: 0;\n bottom: 0;\n width: 2px;\n background: #e9ecef;\n}\n\n.timeline-item[_ngcontent-%COMP%] {\n position: relative;\n margin-bottom: 24px;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.timeline-item[_ngcontent-%COMP%]:hover {\n transform: translateX(4px);\n}\n\n.timeline-item.selected[_ngcontent-%COMP%] {\n transform: translateX(8px);\n}\n\n.timeline-item.selected[_ngcontent-%COMP%] .timeline-content[_ngcontent-%COMP%] {\n background: #f0f7ff;\n border-color: #2196f3;\n}\n\n.timeline-marker[_ngcontent-%COMP%] {\n position: absolute;\n left: -30px;\n top: 0;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n background: white;\n border: 3px solid #e9ecef;\n z-index: 1;\n transition: all 0.2s ease;\n}\n\n.timeline-marker[data-color=\"success\"][_ngcontent-%COMP%] {\n border-color: #28a745;\n color: #28a745;\n}\n\n.timeline-marker[data-color=\"error\"][_ngcontent-%COMP%] {\n border-color: #dc3545;\n color: #dc3545;\n}\n\n.timeline-marker[data-color=\"info\"][_ngcontent-%COMP%] {\n border-color: #17a2b8;\n color: #17a2b8;\n}\n\n.timeline-marker[data-color=\"warning\"][_ngcontent-%COMP%] {\n border-color: #ffc107;\n color: #ffc107;\n}\n\n.timeline-marker[data-color=\"secondary\"][_ngcontent-%COMP%] {\n border-color: #6c757d;\n color: #6c757d;\n}\n\n.timeline-marker.small[_ngcontent-%COMP%] {\n width: 28px;\n height: 28px;\n font-size: 12px;\n}\n\n.timeline-content[_ngcontent-%COMP%] {\n background: white;\n border: 1px solid #e9ecef;\n border-radius: 12px;\n padding: 16px 20px;\n margin-left: 20px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.04);\n transition: all 0.2s ease;\n}\n\n.timeline-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 8px;\n}\n\n.timeline-header[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n color: #2c3e50;\n}\n\n.timeline-header[_ngcontent-%COMP%] h5[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 14px;\n font-weight: 600;\n color: #495057;\n}\n\n.timeline-time[_ngcontent-%COMP%] {\n font-size: 12px;\n color: #6c757d;\n font-family: monospace;\n}\n\n.timeline-subtitle[_ngcontent-%COMP%] {\n font-size: 13px;\n color: #6c757d;\n margin-bottom: 8px;\n}\n\n.timeline-meta[_ngcontent-%COMP%] {\n display: flex;\n gap: 16px;\n font-size: 12px;\n color: #6c757d;\n}\n\n.timeline-meta[_ngcontent-%COMP%] .status[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 2px 8px;\n border-radius: 12px;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.timeline-meta[_ngcontent-%COMP%] .status[data-status=\"Completed\"][_ngcontent-%COMP%] {\n background: #d4edda;\n color: #155724;\n}\n\n.timeline-meta[_ngcontent-%COMP%] .status[data-status=\"Failed\"][_ngcontent-%COMP%] {\n background: #f8d7da;\n color: #721c24;\n}\n\n.timeline-meta[_ngcontent-%COMP%] .status[data-status=\"Running\"][_ngcontent-%COMP%] {\n background: #cce5ff;\n color: #004085;\n}\n\n.timeline-meta[_ngcontent-%COMP%] .status[data-status=\"Paused\"][_ngcontent-%COMP%] {\n background: #e2e3e5;\n color: #383d41;\n}\n\n.duration[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.timeline-actions[_ngcontent-%COMP%] {\n position: absolute;\n right: 20px;\n top: 50%;\n transform: translateY(-50%);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.btn-link[_ngcontent-%COMP%] {\n background: none;\n border: none;\n color: #2196f3;\n cursor: pointer;\n font-size: 12px;\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 4px 8px;\n border-radius: 4px;\n transition: all 0.2s ease;\n}\n\n.btn-link[_ngcontent-%COMP%]:hover {\n background: rgba(33, 150, 243, 0.1);\n}\n\n.btn-expand[_ngcontent-%COMP%] {\n width: 24px;\n height: 24px;\n border: 1px solid #dee2e6;\n background: white;\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.2s ease;\n color: #6c757d;\n font-size: 12px;\n}\n\n.btn-expand[_ngcontent-%COMP%]:hover {\n background: #f8f9fa;\n border-color: #adb5bd;\n color: #495057;\n}\n\n\n\n.timeline-children[_ngcontent-%COMP%] {\n position: relative;\n margin-top: 12px;\n margin-bottom: 12px;\n}\n\n.timeline-children[_ngcontent-%COMP%]::before {\n content: '';\n position: absolute;\n left: -10px;\n top: -12px;\n bottom: 0;\n width: 2px;\n background: #e9ecef;\n}\n\n.child-item[_ngcontent-%COMP%] {\n margin-bottom: 12px;\n}\n\n.child-item[_ngcontent-%COMP%] .timeline-content[_ngcontent-%COMP%] {\n background: #f8f9fa;\n border-color: #e0e6ed;\n}\n\n\n\n.sub-run-timeline[_ngcontent-%COMP%] {\n background: rgba(33, 150, 243, 0.02);\n border-left: 2px solid rgba(33, 150, 243, 0.2);\n margin-left: 20px;\n padding-left: 20px;\n margin-top: 8px;\n margin-bottom: 8px;\n}\n\n.sub-run-item[_ngcontent-%COMP%] .timeline-marker[_ngcontent-%COMP%] {\n border-width: 2px;\n}\n\n.sub-run-item[_ngcontent-%COMP%] .timeline-content[_ngcontent-%COMP%] {\n transition: all 0.2s ease;\n}\n\n\n\n.json-detail-pane[_ngcontent-%COMP%] {\n height: 100%;\n display: flex;\n flex-direction: column;\n background: white;\n border-left: 1px solid #e0e6ed;\n}\n\n.json-pane-header[_ngcontent-%COMP%] {\n padding: 16px 20px;\n background: #f8f9fa;\n border-bottom: 1px solid #e0e6ed;\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-shrink: 0;\n}\n\n.json-pane-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 16px;\n color: #2c3e50;\n display: flex;\n align-items: center;\n gap: 10px;\n font-weight: 600;\n}\n\n.json-pane-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n display: flex;\n flex-direction: column;\n}\n\n.json-meta[_ngcontent-%COMP%] {\n padding: 16px 20px;\n border-bottom: 1px solid #e0e6ed;\n display: flex;\n gap: 20px;\n flex-wrap: wrap;\n flex-shrink: 0;\n}\n\n.json-meta[_ngcontent-%COMP%] .meta-item[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.json-meta[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n font-size: 11px;\n color: #7c8798;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.json-meta[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n font-size: 14px;\n color: #2c3e50;\n font-weight: 500;\n}\n\n.action-link[_ngcontent-%COMP%] {\n padding: 12px 20px;\n border-bottom: 1px solid #e0e6ed;\n flex-shrink: 0;\n}\n\n.action-link[_ngcontent-%COMP%] .btn-link[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n color: #2196f3;\n text-decoration: none;\n font-size: 14px;\n padding: 8px 12px;\n background: #f0f7ff;\n border: 1px solid #d0e5ff;\n border-radius: 4px;\n transition: all 0.2s;\n cursor: pointer;\n}\n\n.action-link[_ngcontent-%COMP%] .btn-link[_ngcontent-%COMP%]:hover {\n background: #e1f0ff;\n border-color: #b0d5ff;\n text-decoration: none;\n}\n\n\n.json-toolbar[_ngcontent-%COMP%] {\n display: flex;\n justify-content: flex-end;\n gap: 8px;\n margin-bottom: 8px;\n}\n\n\n\n.details-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 20px;\n padding: 20px;\n}\n\n.detail-item[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.detail-item.full-width[_ngcontent-%COMP%] {\n grid-column: 1 / -1;\n}\n\n.detail-item[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n font-size: 12px;\n color: #6c757d;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.detail-item[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n font-size: 14px;\n color: #495057;\n}\n\n.error-message[_ngcontent-%COMP%] {\n background: #f8d7da;\n color: #721c24;\n padding: 12px;\n border-radius: 8px;\n font-size: 13px;\n}\n\n.result-viewer[_ngcontent-%COMP%], \n.state-viewer[_ngcontent-%COMP%] {\n padding: 20px;\n max-height: 450px;\n overflow: auto;\n display: flex;\n flex-direction: column;\n}\n\n.result-viewer[_ngcontent-%COMP%] mj-code-editor[_ngcontent-%COMP%], \n.state-viewer[_ngcontent-%COMP%] mj-code-editor[_ngcontent-%COMP%] {\n flex: 1;\n min-height: 0;\n}\n\n\n\n.empty-state[_ngcontent-%COMP%], \n.loading-state[_ngcontent-%COMP%], \n.error-state[_ngcontent-%COMP%] {\n text-align: center;\n padding: 60px 20px;\n color: #6c757d;\n}\n\n.empty-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%], \n.loading-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%], \n.error-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n opacity: 0.3;\n margin-bottom: 16px;\n}\n\n\n\n@media (max-width: 768px) {\n .header-content[_ngcontent-%COMP%] {\n flex-direction: column;\n gap: 16px;\n }\n \n .header-stats[_ngcontent-%COMP%] {\n flex-wrap: wrap;\n }\n \n .json-detail-pane[_ngcontent-%COMP%] {\n width: 100%;\n }\n \n .timeline[_ngcontent-%COMP%] {\n padding-left: 30px;\n }\n \n .timeline-marker[_ngcontent-%COMP%] {\n left: -25px;\n width: 32px;\n height: 32px;\n }\n \n .timeline-content[_ngcontent-%COMP%] {\n margin-left: 10px;\n }\n}\n\n\n\n.entity-link[_ngcontent-%COMP%] {\n color: #2196f3;\n text-decoration: none;\n transition: all 0.2s ease;\n border-bottom: 1px solid transparent;\n display: inline-block;\n}\n\n.entity-link[_ngcontent-%COMP%]:hover {\n color: #1976d2;\n border-bottom-color: #1976d2;\n}\n\n.entity-link[_ngcontent-%COMP%]:active {\n color: #0d47a1;\n}\n\n\n\n.detail-pane-tabs[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n margin: 8px 0 0 0;\n border-bottom: 1px solid #e0e6ed;\n padding: 0 16px;\n}\n\n.detail-tab[_ngcontent-%COMP%] {\n padding: 10px 16px;\n background: none;\n border: none;\n border-bottom: 3px solid transparent;\n color: #6c757d;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s ease;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.detail-tab[_ngcontent-%COMP%]:hover {\n color: #495057;\n background: rgba(0, 0, 0, 0.02);\n}\n\n.detail-tab.active[_ngcontent-%COMP%] {\n color: #2196f3;\n border-bottom-color: #2196f3;\n}\n\n.detail-tab[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 14px;\n}\n\n\n\n.detail-pane-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n min-height: 0;\n margin-bottom: 35px;\n}\n\n.detail-pane-content.with-tabs[_ngcontent-%COMP%] {\n \n\n margin-top: 0;\n}\n\n\n\n.step-payload-diff[_ngcontent-%COMP%] {\n height: 100%;\n overflow-y: auto;\n padding: 16px;\n}\n\n.step-payload-diff[_ngcontent-%COMP%] mj-deep-diff[_ngcontent-%COMP%] {\n display: block;\n height: 100%;\n}\n\n\n\n.detail-pane-content[_ngcontent-%COMP%]:not(.with-tabs) .json-viewer[_ngcontent-%COMP%] {\n margin-top: 16px;\n}"] }); }
|
|
1286
|
+
} }, dependencies: [i4.NgClass, i4.NgIf, i5.NgControlStatus, i5.NgModel, i6.PanelBarComponent, i6.PanelBarItemComponent, i6.PanelBarContentDirective, i6.SplitterComponent, i6.SplitterPaneComponent, i7.CodeEditorComponent, i8.DeepDiffComponent, i9.AIAgentRunTimelineComponent, i10.AIAgentRunAnalyticsComponent, i11.AIAgentRunVisualizationComponent, i12.AIAgentRunStepDetailComponent, i4.DecimalPipe, i4.DatePipe], styles: [".ai-agent-run-form[_ngcontent-%COMP%] {\n height: 100%;\n overflow: auto;\n}\n\n\n\n.header[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);\n border-bottom: 1px solid #e0e6ed;\n padding: 20px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.04);\n}\n\n.header-content[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n margin-bottom: 16px;\n}\n\n.header-left[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 16px;\n}\n\n.icon-wrapper[_ngcontent-%COMP%] {\n width: 48px;\n height: 48px;\n background: linear-gradient(135deg, #2196f3, #1976d2);\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-size: 20px;\n}\n\n.header-info[_ngcontent-%COMP%] h2[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 24px;\n font-weight: 600;\n color: #2c3e50;\n}\n\n.meta-info[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n margin-top: 4px;\n font-size: 14px;\n color: #6c757d;\n}\n\n.parent-run[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.parent-link[_ngcontent-%COMP%] {\n color: #ff6358;\n text-decoration: none;\n cursor: pointer;\n transition: color 0.2s;\n}\n\n.parent-link[_ngcontent-%COMP%]:hover {\n color: #ff4444;\n text-decoration: underline;\n}\n\n.agent-name[_ngcontent-%COMP%] {\n font-weight: 500;\n color: #495057;\n}\n\n.run-id[_ngcontent-%COMP%] {\n font-family: monospace;\n font-size: 12px;\n opacity: 0.7;\n}\n\n.header-right[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 16px;\n}\n\n.status-badge[_ngcontent-%COMP%] {\n padding: 6px 16px;\n border-radius: 20px;\n font-size: 13px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n display: inline-flex;\n align-items: center;\n gap: 6px;\n}\n\n.status-badge[data-status=\"Running\"][_ngcontent-%COMP%] {\n background: #e3f2fd;\n color: #1976d2;\n}\n\n.status-badge[data-status=\"Completed\"][_ngcontent-%COMP%] {\n background: #d4edda;\n color: #155724;\n}\n\n.status-badge[data-status=\"Failed\"][_ngcontent-%COMP%] {\n background: #f8d7da;\n color: #721c24;\n}\n\n.status-badge[data-status=\"Cancelled\"][_ngcontent-%COMP%] {\n background: #fff3cd;\n color: #856404;\n}\n\n.status-badge[data-status=\"Paused\"][_ngcontent-%COMP%] {\n background: #e2e3e5;\n color: #383d41;\n}\n\n.status-badge.small[_ngcontent-%COMP%] {\n padding: 4px 12px;\n font-size: 11px;\n}\n\n.header-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n}\n\n.btn-icon[_ngcontent-%COMP%] {\n width: 36px;\n height: 36px;\n border: 1px solid #dee2e6;\n background: white;\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.2s ease;\n color: #6c757d;\n}\n\n.btn-icon[_ngcontent-%COMP%]:hover {\n background: #f8f9fa;\n border-color: #adb5bd;\n color: #495057;\n}\n\n.header-stats[_ngcontent-%COMP%] {\n display: flex;\n gap: 24px;\n padding-top: 12px;\n border-top: 1px solid #e9ecef;\n}\n\n\n\n.configuration-bar[_ngcontent-%COMP%] {\n display: flex;\n gap: 24px;\n padding-top: 16px;\n border-top: 1px solid #e9ecef;\n margin-top: 16px;\n}\n\n.config-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.config-item[_ngcontent-%COMP%] > i[_ngcontent-%COMP%] {\n font-size: 1.2em;\n color: #6c757d;\n width: 24px;\n text-align: center;\n}\n\n.config-content[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n}\n\n.config-label[_ngcontent-%COMP%] {\n font-size: 12px;\n color: #6c757d;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.config-value[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 600;\n color: #2c3e50;\n}\n\n.config-value[_ngcontent-%COMP%] .entity-link[_ngcontent-%COMP%] {\n color: #007bff;\n text-decoration: none;\n cursor: pointer;\n transition: color 0.2s;\n}\n\n.config-value[_ngcontent-%COMP%] .entity-link[_ngcontent-%COMP%]:hover {\n color: #0056b3;\n text-decoration: underline;\n}\n\n.stat[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.stat[_ngcontent-%COMP%] .label[_ngcontent-%COMP%] {\n font-size: 12px;\n color: #6c757d;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.stat[_ngcontent-%COMP%] .value[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 500;\n color: #495057;\n}\n\n.stat[_ngcontent-%COMP%] .value.success[_ngcontent-%COMP%] {\n color: #28a745;\n}\n\n.stat[_ngcontent-%COMP%] .value.error[_ngcontent-%COMP%] {\n color: #dc3545;\n}\n\n\n\n.tabs[_ngcontent-%COMP%] {\n display: flex;\n border-bottom: 1px solid #dee2e6;\n background: #f8f9fa;\n}\n\n.tab[_ngcontent-%COMP%] {\n padding: 12px 24px;\n border: none;\n background: transparent;\n cursor: pointer;\n font-size: 14px;\n font-weight: 500;\n color: #6c757d;\n display: flex;\n align-items: center;\n gap: 8px;\n transition: all 0.2s ease;\n border-bottom: 3px solid transparent;\n}\n\n.tab[_ngcontent-%COMP%]:hover {\n color: #495057;\n background: rgba(0,0,0,0.02);\n}\n\n.tab.active[_ngcontent-%COMP%] {\n color: #2196f3;\n border-bottom-color: #2196f3;\n background: white;\n}\n\n\n\n.content-area[_ngcontent-%COMP%] {\n position: relative;\n height: calc(100vh - 390px);\n overflow: auto;\n background: white;\n}\n\n.tab-content[_ngcontent-%COMP%] {\n height: 100%;\n overflow: auto;\n}\n\n\n\n.tab-content[ng-reflect-ng-if=\"true\"][_ngcontent-%COMP%] > kendo-panelbar[_ngcontent-%COMP%] {\n height: 100%;\n overflow-y: auto;\n}\n\n\n\n.json-detail-pane[_ngcontent-%COMP%] {\n height: 100%;\n display: flex;\n flex-direction: column;\n background: #f8f9fa;\n border-left: 1px solid #e0e6ed;\n}\n\n.json-pane-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 16px 20px;\n background: white;\n border-bottom: 1px solid #e0e6ed;\n box-shadow: 0 2px 4px rgba(0,0,0,0.04);\n}\n\n.json-pane-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n color: #2c3e50;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.json-pane-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #6b7280;\n font-size: 14px;\n}\n\n.json-pane-content[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: auto;\n padding: 16px;\n}\n\n.json-meta[_ngcontent-%COMP%] {\n display: flex;\n gap: 20px;\n margin-bottom: 16px;\n flex-wrap: wrap;\n}\n\n.json-meta[_ngcontent-%COMP%] .meta-item[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.json-meta[_ngcontent-%COMP%] .meta-item[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n font-size: 11px;\n text-transform: uppercase;\n color: #6b7280;\n font-weight: 600;\n letter-spacing: 0.5px;\n}\n\n.json-meta[_ngcontent-%COMP%] .meta-item[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n font-size: 14px;\n color: #2c3e50;\n font-weight: 500;\n}\n\n.action-link[_ngcontent-%COMP%] {\n margin-bottom: 12px;\n}\n\n.action-link[_ngcontent-%COMP%] .btn-link[_ngcontent-%COMP%] {\n background: none;\n border: none;\n color: #2196f3;\n font-size: 14px;\n cursor: pointer;\n padding: 6px 12px;\n border-radius: 4px;\n transition: all 0.2s;\n display: inline-flex;\n align-items: center;\n gap: 6px;\n}\n\n.action-link[_ngcontent-%COMP%] .btn-link[_ngcontent-%COMP%]:hover {\n background: rgba(33, 150, 243, 0.08);\n color: #1976d2;\n}\n\n.json-viewer[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n flex-direction: column;\n background: white;\n border-radius: 8px;\n border: 1px solid #e0e6ed;\n overflow: auto;\n padding: 20px;\n gap: 10px;\n min-height: 0;\n margin-bottom: 45px;\n}\n\n\n.json-toolbar[_ngcontent-%COMP%] {\n display: flex;\n justify-content: flex-end;\n padding: 8px 12px;\n background: #f8f9fa;\n border-bottom: 1px solid #e0e6ed;\n}\n\n\n\n.timeline-container[_ngcontent-%COMP%] {\n height: 100%;\n overflow-y: auto;\n padding: 20px;\n}\n\n.timeline-container[_ngcontent-%COMP%] > .timeline[_ngcontent-%COMP%] {\n max-width: 900px;\n margin: 0 auto;\n}\n\n.timeline[_ngcontent-%COMP%] {\n position: relative;\n padding-left: 40px;\n}\n\n.timeline[_ngcontent-%COMP%]::before {\n content: '';\n position: absolute;\n left: 20px;\n top: 0;\n bottom: 0;\n width: 2px;\n background: #e9ecef;\n}\n\n.timeline-item[_ngcontent-%COMP%] {\n position: relative;\n margin-bottom: 24px;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.timeline-item[_ngcontent-%COMP%]:hover {\n transform: translateX(4px);\n}\n\n.timeline-item.selected[_ngcontent-%COMP%] {\n transform: translateX(8px);\n}\n\n.timeline-item.selected[_ngcontent-%COMP%] .timeline-content[_ngcontent-%COMP%] {\n background: #f0f7ff;\n border-color: #2196f3;\n}\n\n.timeline-marker[_ngcontent-%COMP%] {\n position: absolute;\n left: -30px;\n top: 0;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n background: white;\n border: 3px solid #e9ecef;\n z-index: 1;\n transition: all 0.2s ease;\n}\n\n.timeline-marker[data-color=\"success\"][_ngcontent-%COMP%] {\n border-color: #28a745;\n color: #28a745;\n}\n\n.timeline-marker[data-color=\"error\"][_ngcontent-%COMP%] {\n border-color: #dc3545;\n color: #dc3545;\n}\n\n.timeline-marker[data-color=\"info\"][_ngcontent-%COMP%] {\n border-color: #17a2b8;\n color: #17a2b8;\n}\n\n.timeline-marker[data-color=\"warning\"][_ngcontent-%COMP%] {\n border-color: #ffc107;\n color: #ffc107;\n}\n\n.timeline-marker[data-color=\"secondary\"][_ngcontent-%COMP%] {\n border-color: #6c757d;\n color: #6c757d;\n}\n\n.timeline-marker.small[_ngcontent-%COMP%] {\n width: 28px;\n height: 28px;\n font-size: 12px;\n}\n\n.timeline-content[_ngcontent-%COMP%] {\n background: white;\n border: 1px solid #e9ecef;\n border-radius: 12px;\n padding: 16px 20px;\n margin-left: 20px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.04);\n transition: all 0.2s ease;\n}\n\n.timeline-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 8px;\n}\n\n.timeline-header[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n color: #2c3e50;\n}\n\n.timeline-header[_ngcontent-%COMP%] h5[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 14px;\n font-weight: 600;\n color: #495057;\n}\n\n.timeline-time[_ngcontent-%COMP%] {\n font-size: 12px;\n color: #6c757d;\n font-family: monospace;\n}\n\n.timeline-subtitle[_ngcontent-%COMP%] {\n font-size: 13px;\n color: #6c757d;\n margin-bottom: 8px;\n}\n\n.timeline-meta[_ngcontent-%COMP%] {\n display: flex;\n gap: 16px;\n font-size: 12px;\n color: #6c757d;\n}\n\n.timeline-meta[_ngcontent-%COMP%] .status[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 2px 8px;\n border-radius: 12px;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.timeline-meta[_ngcontent-%COMP%] .status[data-status=\"Completed\"][_ngcontent-%COMP%] {\n background: #d4edda;\n color: #155724;\n}\n\n.timeline-meta[_ngcontent-%COMP%] .status[data-status=\"Failed\"][_ngcontent-%COMP%] {\n background: #f8d7da;\n color: #721c24;\n}\n\n.timeline-meta[_ngcontent-%COMP%] .status[data-status=\"Running\"][_ngcontent-%COMP%] {\n background: #cce5ff;\n color: #004085;\n}\n\n.timeline-meta[_ngcontent-%COMP%] .status[data-status=\"Paused\"][_ngcontent-%COMP%] {\n background: #e2e3e5;\n color: #383d41;\n}\n\n.duration[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.timeline-actions[_ngcontent-%COMP%] {\n position: absolute;\n right: 20px;\n top: 50%;\n transform: translateY(-50%);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.btn-link[_ngcontent-%COMP%] {\n background: none;\n border: none;\n color: #2196f3;\n cursor: pointer;\n font-size: 12px;\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 4px 8px;\n border-radius: 4px;\n transition: all 0.2s ease;\n}\n\n.btn-link[_ngcontent-%COMP%]:hover {\n background: rgba(33, 150, 243, 0.1);\n}\n\n.btn-expand[_ngcontent-%COMP%] {\n width: 24px;\n height: 24px;\n border: 1px solid #dee2e6;\n background: white;\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.2s ease;\n color: #6c757d;\n font-size: 12px;\n}\n\n.btn-expand[_ngcontent-%COMP%]:hover {\n background: #f8f9fa;\n border-color: #adb5bd;\n color: #495057;\n}\n\n\n\n.timeline-children[_ngcontent-%COMP%] {\n position: relative;\n margin-top: 12px;\n margin-bottom: 12px;\n}\n\n.timeline-children[_ngcontent-%COMP%]::before {\n content: '';\n position: absolute;\n left: -10px;\n top: -12px;\n bottom: 0;\n width: 2px;\n background: #e9ecef;\n}\n\n.child-item[_ngcontent-%COMP%] {\n margin-bottom: 12px;\n}\n\n.child-item[_ngcontent-%COMP%] .timeline-content[_ngcontent-%COMP%] {\n background: #f8f9fa;\n border-color: #e0e6ed;\n}\n\n\n\n.sub-run-timeline[_ngcontent-%COMP%] {\n background: rgba(33, 150, 243, 0.02);\n border-left: 2px solid rgba(33, 150, 243, 0.2);\n margin-left: 20px;\n padding-left: 20px;\n margin-top: 8px;\n margin-bottom: 8px;\n}\n\n.sub-run-item[_ngcontent-%COMP%] .timeline-marker[_ngcontent-%COMP%] {\n border-width: 2px;\n}\n\n.sub-run-item[_ngcontent-%COMP%] .timeline-content[_ngcontent-%COMP%] {\n transition: all 0.2s ease;\n}\n\n\n\n.json-detail-pane[_ngcontent-%COMP%] {\n height: 100%;\n display: flex;\n flex-direction: column;\n background: white;\n border-left: 1px solid #e0e6ed;\n}\n\n.json-pane-header[_ngcontent-%COMP%] {\n padding: 16px 20px;\n background: #f8f9fa;\n border-bottom: 1px solid #e0e6ed;\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-shrink: 0;\n}\n\n.json-pane-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 16px;\n color: #2c3e50;\n display: flex;\n align-items: center;\n gap: 10px;\n font-weight: 600;\n}\n\n.json-pane-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n display: flex;\n flex-direction: column;\n}\n\n.json-meta[_ngcontent-%COMP%] {\n padding: 16px 20px;\n border-bottom: 1px solid #e0e6ed;\n display: flex;\n gap: 20px;\n flex-wrap: wrap;\n flex-shrink: 0;\n}\n\n.json-meta[_ngcontent-%COMP%] .meta-item[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.json-meta[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n font-size: 11px;\n color: #7c8798;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.json-meta[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n font-size: 14px;\n color: #2c3e50;\n font-weight: 500;\n}\n\n.action-link[_ngcontent-%COMP%] {\n padding: 12px 20px;\n border-bottom: 1px solid #e0e6ed;\n flex-shrink: 0;\n}\n\n.action-link[_ngcontent-%COMP%] .btn-link[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n color: #2196f3;\n text-decoration: none;\n font-size: 14px;\n padding: 8px 12px;\n background: #f0f7ff;\n border: 1px solid #d0e5ff;\n border-radius: 4px;\n transition: all 0.2s;\n cursor: pointer;\n}\n\n.action-link[_ngcontent-%COMP%] .btn-link[_ngcontent-%COMP%]:hover {\n background: #e1f0ff;\n border-color: #b0d5ff;\n text-decoration: none;\n}\n\n\n.json-toolbar[_ngcontent-%COMP%] {\n display: flex;\n justify-content: flex-end;\n gap: 8px;\n margin-bottom: 8px;\n}\n\n\n\n.details-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 20px;\n padding: 20px;\n}\n\n.detail-item[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.detail-item.full-width[_ngcontent-%COMP%] {\n grid-column: 1 / -1;\n}\n\n.detail-item[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n font-size: 12px;\n color: #6c757d;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.detail-item[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n font-size: 14px;\n color: #495057;\n}\n\n.error-message[_ngcontent-%COMP%] {\n background: #f8d7da;\n color: #721c24;\n padding: 12px;\n border-radius: 8px;\n font-size: 13px;\n}\n\n.result-viewer[_ngcontent-%COMP%], \n.state-viewer[_ngcontent-%COMP%] {\n padding: 20px;\n max-height: 450px;\n overflow: auto;\n display: flex;\n flex-direction: column;\n}\n\n.result-viewer[_ngcontent-%COMP%] mj-code-editor[_ngcontent-%COMP%], \n.state-viewer[_ngcontent-%COMP%] mj-code-editor[_ngcontent-%COMP%] {\n flex: 1;\n min-height: 0;\n}\n\n\n\n.empty-state[_ngcontent-%COMP%], \n.loading-state[_ngcontent-%COMP%], \n.error-state[_ngcontent-%COMP%] {\n text-align: center;\n padding: 60px 20px;\n color: #6c757d;\n}\n\n.empty-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%], \n.loading-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%], \n.error-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n opacity: 0.3;\n margin-bottom: 16px;\n}\n\n\n\n@media (max-width: 768px) {\n .header-content[_ngcontent-%COMP%] {\n flex-direction: column;\n gap: 16px;\n }\n \n .header-stats[_ngcontent-%COMP%] {\n flex-wrap: wrap;\n }\n \n .json-detail-pane[_ngcontent-%COMP%] {\n width: 100%;\n }\n \n .timeline[_ngcontent-%COMP%] {\n padding-left: 30px;\n }\n \n .timeline-marker[_ngcontent-%COMP%] {\n left: -25px;\n width: 32px;\n height: 32px;\n }\n \n .timeline-content[_ngcontent-%COMP%] {\n margin-left: 10px;\n }\n}\n\n\n\n.entity-link[_ngcontent-%COMP%] {\n color: #2196f3;\n text-decoration: none;\n transition: all 0.2s ease;\n border-bottom: 1px solid transparent;\n display: inline-block;\n}\n\n.entity-link[_ngcontent-%COMP%]:hover {\n color: #1976d2;\n border-bottom-color: #1976d2;\n}\n\n.entity-link[_ngcontent-%COMP%]:active {\n color: #0d47a1;\n}\n\n\n\n.detail-pane-tabs[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n margin: 8px 0 0 0;\n border-bottom: 1px solid #e0e6ed;\n padding: 0 16px;\n}\n\n.detail-tab[_ngcontent-%COMP%] {\n padding: 10px 16px;\n background: none;\n border: none;\n border-bottom: 3px solid transparent;\n color: #6c757d;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s ease;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.detail-tab[_ngcontent-%COMP%]:hover {\n color: #495057;\n background: rgba(0, 0, 0, 0.02);\n}\n\n.detail-tab.active[_ngcontent-%COMP%] {\n color: #2196f3;\n border-bottom-color: #2196f3;\n}\n\n.detail-tab[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 14px;\n}\n\n\n\n.detail-pane-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n min-height: 0;\n margin-bottom: 35px;\n}\n\n.detail-pane-content.with-tabs[_ngcontent-%COMP%] {\n \n\n margin-top: 0;\n}\n\n\n\n.step-payload-diff[_ngcontent-%COMP%] {\n height: 100%;\n overflow-y: auto;\n padding: 16px;\n}\n\n.step-payload-diff[_ngcontent-%COMP%] mj-deep-diff[_ngcontent-%COMP%] {\n display: block;\n height: 100%;\n}\n\n\n\n.detail-pane-content[_ngcontent-%COMP%]:not(.with-tabs) .json-viewer[_ngcontent-%COMP%] {\n margin-top: 16px;\n}"] }); }
|
|
1287
1287
|
};
|
|
1288
1288
|
AIAgentRunFormComponentExtended = __decorate([
|
|
1289
1289
|
RegisterClass(BaseFormComponent, 'MJ: AI Agent Runs')
|
|
@@ -1291,7 +1291,7 @@ AIAgentRunFormComponentExtended = __decorate([
|
|
|
1291
1291
|
export { AIAgentRunFormComponentExtended };
|
|
1292
1292
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AIAgentRunFormComponentExtended, [{
|
|
1293
1293
|
type: Component,
|
|
1294
|
-
args: [{ selector: 'mj-ai-agent-run-form', template: "<div class=\"record-form-container ai-agent-run-form\">\n <div class=\"record-form\">\n <!-- Header -->\n <div class=\"header\">\n <div class=\"header-content\">\n <div class=\"header-left\">\n <div class=\"icon-wrapper\">\n <i class=\"fas fa-robot\"></i>\n </div>\n <div class=\"header-info\">\n <h2>AI Agent Run</h2>\n <div class=\"meta-info\">\n <span class=\"agent-name\" *ngIf=\"agent\">{{ agent.Name }}</span>\n <span class=\"run-id\">{{ record.ID }}</span>\n <span class=\"parent-run\" *ngIf=\"record.ParentRunID\">\n <i class=\"fas fa-level-up-alt\"></i>\n <a (click)=\"navigateToParentRun()\" class=\"parent-link\">Parent Run</a>\n </span>\n </div>\n </div>\n </div>\n <div class=\"header-right\">\n <div class=\"status-badge\" [attr.data-status]=\"record.Status\">\n <i class=\"fas\" [ngClass]=\"getStatusIcon(record.Status || '')\"></i>\n {{ record.Status }}\n </div>\n <div class=\"header-actions\">\n <button class=\"btn-icon\" (click)=\"refreshData()\" title=\"Refresh\">\n <i class=\"fas fa-sync-alt\"></i>\n </button>\n </div>\n </div>\n </div>\n <div class=\"header-stats\">\n <div class=\"stat\">\n <span class=\"label\">Started</span>\n <span class=\"value\">{{ record.StartedAt | date:'medium' }}</span>\n </div>\n <div class=\"stat\" *ngIf=\"record.CompletedAt\">\n <span class=\"label\">Completed</span>\n <span class=\"value\">{{ record.CompletedAt | date:'medium' }}</span>\n </div>\n <div class=\"stat\" *ngIf=\"record.CompletedAt\">\n <span class=\"label\">Duration</span>\n <span class=\"value\">{{ calculateDuration(record.StartedAt, record.CompletedAt) }}</span>\n </div>\n <div class=\"stat\" *ngIf=\"record.Success !== null && record.CompletedAt !== null\">\n <span class=\"label\">Result</span>\n <span class=\"value\" [class.success]=\"record.Success\" [class.error]=\"!record.Success\">\n {{ record.Success ? 'Success' : 'Failed' }}\n </span>\n </div>\n <div class=\"stat\" *ngIf=\"costMetrics && (costMetrics.totalTokensInput + costMetrics.totalTokensOutput) > 0\">\n <span class=\"label\">Tokens</span>\n <span class=\"value\" *ngIf=\"!costMetrics.isLoading\">{{ (costMetrics.totalTokensInput + costMetrics.totalTokensOutput) | number:'1.0-0' }}</span>\n <span class=\"value loading\" *ngIf=\"costMetrics.isLoading\"><i class=\"fas fa-spinner fa-spin\"></i></span>\n </div>\n <div class=\"stat\" *ngIf=\"costMetrics && costMetrics.totalCost > 0\">\n <span class=\"label\">Cost</span>\n <span class=\"value\" *ngIf=\"!costMetrics.isLoading\">${{ costMetrics.totalCost | number:'1.2-4' }}</span>\n <span class=\"value loading\" *ngIf=\"costMetrics.isLoading\"><i class=\"fas fa-spinner fa-spin\"></i></span>\n </div>\n <div class=\"stat\" *ngIf=\"record.EffortLevel\">\n <span class=\"label\">Effort Level</span>\n <span class=\"value\">{{ record.EffortLevel }}</span>\n </div>\n </div>\n \n <!-- Configuration Bar (shown below header stats when ConfigurationID exists) -->\n <div class=\"configuration-bar\" *ngIf=\"record.ConfigurationID\">\n <div class=\"config-item\">\n <i class=\"fas fa-cog\"></i>\n <div class=\"config-content\">\n <div class=\"config-label\">Configuration</div>\n <div class=\"config-value\">\n <a href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('MJ: AI Configurations', record.ConfigurationID)\">\n {{ record.Configuration || 'Unknown' }}\n </a>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Tabs -->\n <div class=\"tabs\">\n <button class=\"tab\" [class.active]=\"activeTab === 'timeline'\" (click)=\"changeTab('timeline')\">\n <i class=\"fas fa-stream\"></i> Timeline\n </button>\n <button class=\"tab\" [class.active]=\"activeTab === 'visualization'\" (click)=\"changeTab('visualization')\">\n <i class=\"fas fa-diagram-project\"></i> Visualization\n </button>\n <button class=\"tab\" [class.active]=\"activeTab === 'analytics'\" (click)=\"changeTab('analytics')\">\n <i class=\"fas fa-chart-line\"></i> Analytics\n </button>\n <button class=\"tab\" [class.active]=\"activeTab === 'details'\" (click)=\"changeTab('details')\">\n <i class=\"fas fa-info-circle\"></i> Details\n </button>\n </div>\n\n <!-- Content -->\n <div class=\"content-area\">\n <!-- Timeline Tab -->\n <div class=\"tab-content\" *ngIf=\"activeTab === 'timeline'\" style=\"height: 100%;\">\n <kendo-splitter style=\"height: 100%;\" orientation=\"horizontal\">\n <!-- Timeline Pane -->\n <kendo-splitter-pane [min]=\"'400px'\">\n <mj-ai-agent-run-timeline\n [aiAgentRunId]=\"record.ID\"\n [dataHelper]=\"dataHelper\"\n [autoRefresh]=\"record.Status === 'Running'\"\n [refreshInterval]=\"30000\"\n (itemSelected)=\"selectTimelineItem($event)\"\n (navigateToEntity)=\"navigateToEntityRecord($event)\"\n (agentRunCompleted)=\"onAgentRunCompleted($event)\">\n </mj-ai-agent-run-timeline>\n </kendo-splitter-pane>\n \n <!-- JSON Detail Pane -->\n <kendo-splitter-pane [size]=\"'45%'\" [min]=\"'300px'\" [collapsed]=\"!selectedTimelineItem\">\n <mj-ai-agent-run-step-detail\n [selectedTimelineItem]=\"selectedTimelineItem\"\n (closePanel)=\"closeJsonPanel()\"\n (navigateToActionLog)=\"navigateToActionLog($event)\"\n (copyToClipboard)=\"copyToClipboard($event)\">\n </mj-ai-agent-run-step-detail>\n </kendo-splitter-pane>\n </kendo-splitter>\n </div>\n\n <!-- Visualization Tab -->\n <div class=\"tab-content\" *ngIf=\"activeTab === 'visualization'\" style=\"height: 100%;\">\n <mj-ai-agent-run-visualization\n #visualizationComponent\n [aiAgentRunId]=\"record.ID\"\n [dataHelper]=\"dataHelper\"\n *ngIf=\"visualizationLoaded\">\n </mj-ai-agent-run-visualization>\n </div>\n\n <!-- Analytics Tab -->\n <div class=\"tab-content\" *ngIf=\"activeTab === 'analytics'\" style=\"height: 100%;\">\n <mj-ai-agent-run-analytics \n #analyticsComponent\n [agentRunId]=\"record.ID\"\n *ngIf=\"analyticsLoaded\">\n </mj-ai-agent-run-analytics>\n </div>\n\n <!-- Details Tab -->\n <div class=\"tab-content\" *ngIf=\"activeTab === 'details'\">\n <kendo-panelbar [keepItemContent]=\"true\">\n <kendo-panelbar-item title=\"General Information\" [expanded]=\"true\">\n <ng-template kendoPanelBarContent>\n <div class=\"details-grid\">\n <div class=\"detail-item\">\n <label>Agent</label>\n <span>\n <a href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('AI Agents', record.AgentID)\">\n {{ agent?.Name || 'N/A' }}\n </a>\n </span>\n </div>\n <div class=\"detail-item\">\n <label>Parent Run ID</label>\n <span>\n <a *ngIf=\"record.ParentRunID\" href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('MJ: AI Agent Runs', record.ParentRunID)\">\n {{ record.ParentRunID }}\n </a>\n <span *ngIf=\"!record.ParentRunID\">None (Root)</span>\n </span>\n </div>\n <div class=\"detail-item\">\n <label>Last Run ID</label>\n <span>\n <a *ngIf=\"record.LastRunID\" href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('MJ: AI Agent Runs', record.LastRunID)\">\n {{ record.LastRunID }}\n </a>\n <span *ngIf=\"!record.LastRunID\">None</span>\n </span>\n </div>\n <div class=\"detail-item\">\n <label>Conversation ID</label>\n <span>\n <a *ngIf=\"record.ConversationID\" href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('Conversations', record.ConversationID)\">\n {{ record.ConversationID }}\n </a>\n <span *ngIf=\"!record.ConversationID\">N/A</span>\n </span>\n </div>\n <div class=\"detail-item\">\n <label>User</label>\n <span>\n <a *ngIf=\"record.UserID\" href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('Users', record.UserID)\">\n {{ record.User || 'N/A' }}\n </a>\n <span *ngIf=\"!record.UserID\">N/A</span>\n </span>\n </div>\n </div>\n </ng-template>\n </kendo-panelbar-item>\n \n <kendo-panelbar-item title=\"Execution Settings\">\n <ng-template kendoPanelBarContent>\n <div class=\"details-grid\">\n <div class=\"detail-item\">\n <label>Override Model</label>\n <span>\n <a *ngIf=\"record.OverrideModelID\" href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('AI Models', record.OverrideModelID)\">\n {{ record.OverrideModel || 'N/A' }}\n </a>\n <span *ngIf=\"!record.OverrideModelID\">N/A</span>\n </span>\n </div>\n <div class=\"detail-item\">\n <label>Override Vendor</label>\n <span>\n <a *ngIf=\"record.OverrideVendorID\" href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('AI Vendors', record.OverrideVendorID)\">\n {{ record.OverrideVendor || 'N/A' }}\n </a>\n <span *ngIf=\"!record.OverrideVendorID\">N/A</span>\n </span>\n </div>\n <div class=\"detail-item\">\n <label>Verbose Logging</label>\n <span>{{ record.Verbose ? 'Yes' : 'No' }}</span>\n </div>\n </div>\n </ng-template>\n </kendo-panelbar-item>\n \n <kendo-panelbar-item title=\"Execution Status\">\n <ng-template kendoPanelBarContent>\n <div class=\"details-grid\">\n <div class=\"detail-item\">\n <label>Status</label>\n <span class=\"status-badge\" [attr.data-status]=\"record.Status\">\n {{ record.Status }}\n </span>\n </div>\n <div class=\"detail-item\">\n <label>Success</label>\n <span [class.success]=\"record.Success\" [class.error]=\"record.Success === false\">\n {{ record.Success === null ? 'In Progress' : (record.Success ? 'Yes' : 'No') }}\n </span>\n </div>\n <div class=\"detail-item full-width\" *ngIf=\"record.ErrorMessage\">\n <label>Error Message</label>\n <div class=\"error-message\">{{ record.ErrorMessage }}</div>\n </div>\n </div>\n </ng-template>\n </kendo-panelbar-item>\n \n <kendo-panelbar-item title=\"Usage & Cost\">\n <ng-template kendoPanelBarContent>\n <div class=\"details-grid\">\n <div class=\"detail-item\">\n <label>Total Tokens Used</label>\n <span>{{ record.TotalTokensUsed ? (record.TotalTokensUsed | number:'1.0-0') : 'N/A' }}</span>\n </div>\n <div class=\"detail-item\">\n <label>Prompt Tokens</label>\n <span>{{ record.TotalPromptTokensUsed ? (record.TotalPromptTokensUsed | number:'1.0-0') : 'N/A' }}</span>\n </div>\n <div class=\"detail-item\">\n <label>Completion Tokens</label>\n <span>{{ record.TotalCompletionTokensUsed ? (record.TotalCompletionTokensUsed | number:'1.0-0') : 'N/A' }}</span>\n </div>\n <div class=\"detail-item\">\n <label>Total Cost</label>\n <span>{{ record.TotalCost != null ? ('$' + (record.TotalCost | number:'1.2-4')) : 'N/A' }}</span>\n </div>\n <div class=\"detail-item\">\n <label>Total Prompt Iterations</label>\n <span>{{ record.TotalPromptIterations != null ? (record.TotalPromptIterations | number:'1.0-0') : 'N/A' }}</span>\n </div>\n </div>\n </ng-template>\n </kendo-panelbar-item>\n \n <kendo-panelbar-item title=\"Result\" *ngIf=\"record.Result\">\n <ng-template kendoPanelBarContent>\n <div class=\"result-viewer\">\n @if (isParsingComplete) {\n <mj-code-editor\n [ngModel]=\"parsedResult\"\n [language]=\"'json'\"\n [readonly]=\"true\"\n style=\"height: 300px; width: 100%;\">\n </mj-code-editor>\n } @else {\n <div style=\"padding: 20px; text-align: center; color: #666;\">\n <i class=\"fas fa-spinner fa-spin\"></i> Loading result data...\n </div>\n }\n </div>\n </ng-template>\n </kendo-panelbar-item>\n \n <kendo-panelbar-item title=\"Starting Payload\" *ngIf=\"record.StartingPayload\">\n <ng-template kendoPanelBarContent>\n <div class=\"result-viewer\">\n @if (isParsingComplete) {\n <mj-code-editor\n [ngModel]=\"parsedStartingPayload\"\n [language]=\"'json'\"\n [readonly]=\"true\"\n style=\"height: 300px; width: 100%;\">\n </mj-code-editor>\n } @else {\n <div style=\"padding: 20px; text-align: center; color: #666;\">\n <i class=\"fas fa-spinner fa-spin\"></i> Loading payload data...\n </div>\n }\n </div>\n </ng-template>\n </kendo-panelbar-item>\n \n <kendo-panelbar-item title=\"Execution Data\" *ngIf=\"record.Data\">\n <ng-template kendoPanelBarContent>\n <div class=\"result-viewer\">\n @if (isParsingComplete) {\n <mj-code-editor\n [ngModel]=\"parsedData\"\n [language]=\"'json'\"\n [readonly]=\"true\"\n style=\"height: 300px; width: 100%;\">\n </mj-code-editor>\n } @else {\n <div style=\"padding: 20px; text-align: center; color: #666;\">\n <i class=\"fas fa-spinner fa-spin\"></i> Loading execution data...\n </div>\n }\n </div>\n </ng-template>\n </kendo-panelbar-item>\n \n <kendo-panelbar-item title=\"Final Payload\" *ngIf=\"record.FinalPayload\">\n <ng-template kendoPanelBarContent>\n <div class=\"result-viewer\">\n @if (isParsingComplete) {\n <mj-code-editor\n [ngModel]=\"parsedFinalPayload\"\n [language]=\"'json'\"\n [readonly]=\"true\"\n style=\"height: 300px; width: 100%;\">\n </mj-code-editor>\n } @else {\n <div style=\"padding: 20px; text-align: center; color: #666;\">\n <i class=\"fas fa-spinner fa-spin\"></i> Loading final payload data...\n </div>\n }\n </div>\n </ng-template>\n </kendo-panelbar-item>\n \n <kendo-panelbar-item title=\"Payload Diff\" *ngIf=\"showPayloadDiff\">\n <ng-template kendoPanelBarContent>\n <div style=\"padding: 20px; background: #f8f9fa;\">\n @if (isParsingComplete) {\n <mj-deep-diff\n [oldValue]=\"startingPayloadObject\"\n [newValue]=\"finalPayloadObject\"\n [title]=\"''\"\n [showSummary]=\"true\"\n [showUnchanged]=\"false\"\n [expandAll]=\"false\"\n [maxDepth]=\"10\"\n [maxStringLength]=\"200\"\n [treatNullAsUndefined]=\"true\">\n </mj-deep-diff>\n } @else {\n <div style=\"padding: 20px; text-align: center; color: #666;\">\n <i class=\"fas fa-spinner fa-spin\"></i> Loading payload diff...\n </div>\n }\n </div>\n </ng-template>\n </kendo-panelbar-item>\n </kendo-panelbar>\n </div>\n </div>\n </div>\n</div>", styles: [".ai-agent-run-form {\n height: 100%;\n overflow: auto;\n}\n\n/* Header Styles */\n.header {\n background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);\n border-bottom: 1px solid #e0e6ed;\n padding: 20px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.04);\n}\n\n.header-content {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n margin-bottom: 16px;\n}\n\n.header-left {\n display: flex;\n align-items: center;\n gap: 16px;\n}\n\n.icon-wrapper {\n width: 48px;\n height: 48px;\n background: linear-gradient(135deg, #2196f3, #1976d2);\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-size: 20px;\n}\n\n.header-info h2 {\n margin: 0;\n font-size: 24px;\n font-weight: 600;\n color: #2c3e50;\n}\n\n.meta-info {\n display: flex;\n gap: 12px;\n margin-top: 4px;\n font-size: 14px;\n color: #6c757d;\n}\n\n.parent-run {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.parent-link {\n color: #ff6358;\n text-decoration: none;\n cursor: pointer;\n transition: color 0.2s;\n}\n\n.parent-link:hover {\n color: #ff4444;\n text-decoration: underline;\n}\n\n.agent-name {\n font-weight: 500;\n color: #495057;\n}\n\n.run-id {\n font-family: monospace;\n font-size: 12px;\n opacity: 0.7;\n}\n\n.header-right {\n display: flex;\n align-items: center;\n gap: 16px;\n}\n\n.status-badge {\n padding: 6px 16px;\n border-radius: 20px;\n font-size: 13px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n display: inline-flex;\n align-items: center;\n gap: 6px;\n}\n\n.status-badge[data-status=\"Running\"] {\n background: #e3f2fd;\n color: #1976d2;\n}\n\n.status-badge[data-status=\"Completed\"] {\n background: #d4edda;\n color: #155724;\n}\n\n.status-badge[data-status=\"Failed\"] {\n background: #f8d7da;\n color: #721c24;\n}\n\n.status-badge[data-status=\"Cancelled\"] {\n background: #fff3cd;\n color: #856404;\n}\n\n.status-badge[data-status=\"Paused\"] {\n background: #e2e3e5;\n color: #383d41;\n}\n\n.status-badge.small {\n padding: 4px 12px;\n font-size: 11px;\n}\n\n.header-actions {\n display: flex;\n gap: 8px;\n}\n\n.btn-icon {\n width: 36px;\n height: 36px;\n border: 1px solid #dee2e6;\n background: white;\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.2s ease;\n color: #6c757d;\n}\n\n.btn-icon:hover {\n background: #f8f9fa;\n border-color: #adb5bd;\n color: #495057;\n}\n\n.header-stats {\n display: flex;\n gap: 24px;\n padding-top: 12px;\n border-top: 1px solid #e9ecef;\n}\n\n/* Configuration Bar */\n.configuration-bar {\n display: flex;\n gap: 24px;\n padding-top: 16px;\n border-top: 1px solid #e9ecef;\n margin-top: 16px;\n}\n\n.config-item {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.config-item > i {\n font-size: 1.2em;\n color: #6c757d;\n width: 24px;\n text-align: center;\n}\n\n.config-content {\n display: flex;\n flex-direction: column;\n}\n\n.config-label {\n font-size: 12px;\n color: #6c757d;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.config-value {\n font-size: 14px;\n font-weight: 600;\n color: #2c3e50;\n}\n\n.config-value .entity-link {\n color: #007bff;\n text-decoration: none;\n cursor: pointer;\n transition: color 0.2s;\n}\n\n.config-value .entity-link:hover {\n color: #0056b3;\n text-decoration: underline;\n}\n\n.stat {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.stat .label {\n font-size: 12px;\n color: #6c757d;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.stat .value {\n font-size: 14px;\n font-weight: 500;\n color: #495057;\n}\n\n.stat .value.success {\n color: #28a745;\n}\n\n.stat .value.error {\n color: #dc3545;\n}\n\n/* Tabs */\n.tabs {\n display: flex;\n border-bottom: 1px solid #dee2e6;\n background: #f8f9fa;\n}\n\n.tab {\n padding: 12px 24px;\n border: none;\n background: transparent;\n cursor: pointer;\n font-size: 14px;\n font-weight: 500;\n color: #6c757d;\n display: flex;\n align-items: center;\n gap: 8px;\n transition: all 0.2s ease;\n border-bottom: 3px solid transparent;\n}\n\n.tab:hover {\n color: #495057;\n background: rgba(0,0,0,0.02);\n}\n\n.tab.active {\n color: #2196f3;\n border-bottom-color: #2196f3;\n background: white;\n}\n\n/* Content Area */\n.content-area {\n position: relative;\n height: calc(100vh - 280px);\n overflow: auto;\n background: white;\n}\n\n.tab-content {\n height: 100%;\n overflow: auto;\n}\n\n/* Details tab specific */\n.tab-content[ng-reflect-ng-if=\"true\"] > kendo-panelbar {\n height: 100%;\n overflow-y: auto;\n}\n\n/* JSON Detail Pane */\n.json-detail-pane {\n height: 100%;\n display: flex;\n flex-direction: column;\n background: #f8f9fa;\n border-left: 1px solid #e0e6ed;\n}\n\n.json-pane-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 16px 20px;\n background: white;\n border-bottom: 1px solid #e0e6ed;\n box-shadow: 0 2px 4px rgba(0,0,0,0.04);\n}\n\n.json-pane-header h3 {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n color: #2c3e50;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.json-pane-header h3 i {\n color: #6b7280;\n font-size: 14px;\n}\n\n.json-pane-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: auto;\n padding: 16px;\n}\n\n.json-meta {\n display: flex;\n gap: 20px;\n margin-bottom: 16px;\n flex-wrap: wrap;\n}\n\n.json-meta .meta-item {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.json-meta .meta-item label {\n font-size: 11px;\n text-transform: uppercase;\n color: #6b7280;\n font-weight: 600;\n letter-spacing: 0.5px;\n}\n\n.json-meta .meta-item span {\n font-size: 14px;\n color: #2c3e50;\n font-weight: 500;\n}\n\n.action-link {\n margin-bottom: 12px;\n}\n\n.action-link .btn-link {\n background: none;\n border: none;\n color: #2196f3;\n font-size: 14px;\n cursor: pointer;\n padding: 6px 12px;\n border-radius: 4px;\n transition: all 0.2s;\n display: inline-flex;\n align-items: center;\n gap: 6px;\n}\n\n.action-link .btn-link:hover {\n background: rgba(33, 150, 243, 0.08);\n color: #1976d2;\n}\n\n.json-viewer {\n flex: 1;\n display: flex;\n flex-direction: column;\n background: white;\n border-radius: 8px;\n border: 1px solid #e0e6ed;\n overflow: auto;\n padding: 20px;\n gap: 10px;\n min-height: 0;\n margin-bottom: 45px;\n}\n\n\n.json-toolbar {\n display: flex;\n justify-content: flex-end;\n padding: 8px 12px;\n background: #f8f9fa;\n border-bottom: 1px solid #e0e6ed;\n}\n\n/* Timeline Styles */\n.timeline-container {\n height: 100%;\n overflow-y: auto;\n padding: 20px;\n}\n\n.timeline-container > .timeline {\n max-width: 900px;\n margin: 0 auto;\n}\n\n.timeline {\n position: relative;\n padding-left: 40px;\n}\n\n.timeline::before {\n content: '';\n position: absolute;\n left: 20px;\n top: 0;\n bottom: 0;\n width: 2px;\n background: #e9ecef;\n}\n\n.timeline-item {\n position: relative;\n margin-bottom: 24px;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.timeline-item:hover {\n transform: translateX(4px);\n}\n\n.timeline-item.selected {\n transform: translateX(8px);\n}\n\n.timeline-item.selected .timeline-content {\n background: #f0f7ff;\n border-color: #2196f3;\n}\n\n.timeline-marker {\n position: absolute;\n left: -30px;\n top: 0;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n background: white;\n border: 3px solid #e9ecef;\n z-index: 1;\n transition: all 0.2s ease;\n}\n\n.timeline-marker[data-color=\"success\"] {\n border-color: #28a745;\n color: #28a745;\n}\n\n.timeline-marker[data-color=\"error\"] {\n border-color: #dc3545;\n color: #dc3545;\n}\n\n.timeline-marker[data-color=\"info\"] {\n border-color: #17a2b8;\n color: #17a2b8;\n}\n\n.timeline-marker[data-color=\"warning\"] {\n border-color: #ffc107;\n color: #ffc107;\n}\n\n.timeline-marker[data-color=\"secondary\"] {\n border-color: #6c757d;\n color: #6c757d;\n}\n\n.timeline-marker.small {\n width: 28px;\n height: 28px;\n font-size: 12px;\n}\n\n.timeline-content {\n background: white;\n border: 1px solid #e9ecef;\n border-radius: 12px;\n padding: 16px 20px;\n margin-left: 20px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.04);\n transition: all 0.2s ease;\n}\n\n.timeline-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 8px;\n}\n\n.timeline-header h4 {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n color: #2c3e50;\n}\n\n.timeline-header h5 {\n margin: 0;\n font-size: 14px;\n font-weight: 600;\n color: #495057;\n}\n\n.timeline-time {\n font-size: 12px;\n color: #6c757d;\n font-family: monospace;\n}\n\n.timeline-subtitle {\n font-size: 13px;\n color: #6c757d;\n margin-bottom: 8px;\n}\n\n.timeline-meta {\n display: flex;\n gap: 16px;\n font-size: 12px;\n color: #6c757d;\n}\n\n.timeline-meta .status {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 2px 8px;\n border-radius: 12px;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.timeline-meta .status[data-status=\"Completed\"] {\n background: #d4edda;\n color: #155724;\n}\n\n.timeline-meta .status[data-status=\"Failed\"] {\n background: #f8d7da;\n color: #721c24;\n}\n\n.timeline-meta .status[data-status=\"Running\"] {\n background: #cce5ff;\n color: #004085;\n}\n\n.timeline-meta .status[data-status=\"Paused\"] {\n background: #e2e3e5;\n color: #383d41;\n}\n\n.duration {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.timeline-actions {\n position: absolute;\n right: 20px;\n top: 50%;\n transform: translateY(-50%);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.btn-link {\n background: none;\n border: none;\n color: #2196f3;\n cursor: pointer;\n font-size: 12px;\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 4px 8px;\n border-radius: 4px;\n transition: all 0.2s ease;\n}\n\n.btn-link:hover {\n background: rgba(33, 150, 243, 0.1);\n}\n\n.btn-expand {\n width: 24px;\n height: 24px;\n border: 1px solid #dee2e6;\n background: white;\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.2s ease;\n color: #6c757d;\n font-size: 12px;\n}\n\n.btn-expand:hover {\n background: #f8f9fa;\n border-color: #adb5bd;\n color: #495057;\n}\n\n/* Timeline Children */\n.timeline-children {\n position: relative;\n margin-top: 12px;\n margin-bottom: 12px;\n}\n\n.timeline-children::before {\n content: '';\n position: absolute;\n left: -10px;\n top: -12px;\n bottom: 0;\n width: 2px;\n background: #e9ecef;\n}\n\n.child-item {\n margin-bottom: 12px;\n}\n\n.child-item .timeline-content {\n background: #f8f9fa;\n border-color: #e0e6ed;\n}\n\n/* Sub-run timeline styles */\n.sub-run-timeline {\n background: rgba(33, 150, 243, 0.02);\n border-left: 2px solid rgba(33, 150, 243, 0.2);\n margin-left: 20px;\n padding-left: 20px;\n margin-top: 8px;\n margin-bottom: 8px;\n}\n\n.sub-run-item .timeline-marker {\n border-width: 2px;\n}\n\n.sub-run-item .timeline-content {\n transition: all 0.2s ease;\n}\n\n/* JSON Detail Pane (in splitter) */\n.json-detail-pane {\n height: 100%;\n display: flex;\n flex-direction: column;\n background: white;\n border-left: 1px solid #e0e6ed;\n}\n\n.json-pane-header {\n padding: 16px 20px;\n background: #f8f9fa;\n border-bottom: 1px solid #e0e6ed;\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-shrink: 0;\n}\n\n.json-pane-header h3 {\n margin: 0;\n font-size: 16px;\n color: #2c3e50;\n display: flex;\n align-items: center;\n gap: 10px;\n font-weight: 600;\n}\n\n.json-pane-content {\n flex: 1;\n overflow-y: auto;\n display: flex;\n flex-direction: column;\n}\n\n.json-meta {\n padding: 16px 20px;\n border-bottom: 1px solid #e0e6ed;\n display: flex;\n gap: 20px;\n flex-wrap: wrap;\n flex-shrink: 0;\n}\n\n.json-meta .meta-item {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.json-meta label {\n font-size: 11px;\n color: #7c8798;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.json-meta span {\n font-size: 14px;\n color: #2c3e50;\n font-weight: 500;\n}\n\n.action-link {\n padding: 12px 20px;\n border-bottom: 1px solid #e0e6ed;\n flex-shrink: 0;\n}\n\n.action-link .btn-link {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n color: #2196f3;\n text-decoration: none;\n font-size: 14px;\n padding: 8px 12px;\n background: #f0f7ff;\n border: 1px solid #d0e5ff;\n border-radius: 4px;\n transition: all 0.2s;\n cursor: pointer;\n}\n\n.action-link .btn-link:hover {\n background: #e1f0ff;\n border-color: #b0d5ff;\n text-decoration: none;\n}\n\n\n.json-toolbar {\n display: flex;\n justify-content: flex-end;\n gap: 8px;\n margin-bottom: 8px;\n}\n\n/* Details Tab */\n.details-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 20px;\n padding: 20px;\n}\n\n.detail-item {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.detail-item.full-width {\n grid-column: 1 / -1;\n}\n\n.detail-item label {\n font-size: 12px;\n color: #6c757d;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.detail-item span {\n font-size: 14px;\n color: #495057;\n}\n\n.error-message {\n background: #f8d7da;\n color: #721c24;\n padding: 12px;\n border-radius: 8px;\n font-size: 13px;\n}\n\n.result-viewer,\n.state-viewer {\n padding: 20px;\n max-height: 450px;\n overflow: auto;\n display: flex;\n flex-direction: column;\n}\n\n.result-viewer mj-code-editor,\n.state-viewer mj-code-editor {\n flex: 1;\n min-height: 0;\n}\n\n/* Empty States */\n.empty-state,\n.loading-state,\n.error-state {\n text-align: center;\n padding: 60px 20px;\n color: #6c757d;\n}\n\n.empty-state i,\n.loading-state i,\n.error-state i {\n opacity: 0.3;\n margin-bottom: 16px;\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n .header-content {\n flex-direction: column;\n gap: 16px;\n }\n \n .header-stats {\n flex-wrap: wrap;\n }\n \n .json-detail-pane {\n width: 100%;\n }\n \n .timeline {\n padding-left: 30px;\n }\n \n .timeline-marker {\n left: -25px;\n width: 32px;\n height: 32px;\n }\n \n .timeline-content {\n margin-left: 10px;\n }\n}\n\n/* Entity Link Styles */\n.entity-link {\n color: #2196f3;\n text-decoration: none;\n transition: all 0.2s ease;\n border-bottom: 1px solid transparent;\n display: inline-block;\n}\n\n.entity-link:hover {\n color: #1976d2;\n border-bottom-color: #1976d2;\n}\n\n.entity-link:active {\n color: #0d47a1;\n}\n\n/* Detail Pane Tabs */\n.detail-pane-tabs {\n display: flex;\n gap: 8px;\n margin: 8px 0 0 0;\n border-bottom: 1px solid #e0e6ed;\n padding: 0 16px;\n}\n\n.detail-tab {\n padding: 10px 16px;\n background: none;\n border: none;\n border-bottom: 3px solid transparent;\n color: #6c757d;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s ease;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.detail-tab:hover {\n color: #495057;\n background: rgba(0, 0, 0, 0.02);\n}\n\n.detail-tab.active {\n color: #2196f3;\n border-bottom-color: #2196f3;\n}\n\n.detail-tab i {\n font-size: 14px;\n}\n\n/* Detail Pane Content */\n.detail-pane-content {\n flex: 1;\n overflow-y: auto;\n min-height: 0;\n margin-bottom: 35px;\n}\n\n.detail-pane-content.with-tabs {\n /* When tabs are shown, content starts right after tabs */\n margin-top: 0;\n}\n\n/* Step Payload Diff */\n.step-payload-diff {\n height: 100%;\n overflow-y: auto;\n padding: 16px;\n}\n\n.step-payload-diff mj-deep-diff {\n display: block;\n height: 100%;\n}\n\n/* JSON Viewer adjustments when no tabs */\n.detail-pane-content:not(.with-tabs) .json-viewer {\n margin-top: 16px;\n}"] }]
|
|
1294
|
+
args: [{ selector: 'mj-ai-agent-run-form', template: "<div class=\"record-form-container ai-agent-run-form\">\n <div class=\"record-form\">\n <!-- Header -->\n <div class=\"header\">\n <div class=\"header-content\">\n <div class=\"header-left\">\n <div class=\"icon-wrapper\">\n <i class=\"fas fa-robot\"></i>\n </div>\n <div class=\"header-info\">\n <h2>AI Agent Run</h2>\n <div class=\"meta-info\">\n <span class=\"agent-name\" *ngIf=\"agent\">{{ agent.Name }}</span>\n <span class=\"run-id\">{{ record.ID }}</span>\n <span class=\"parent-run\" *ngIf=\"record.ParentRunID\">\n <i class=\"fas fa-level-up-alt\"></i>\n <a (click)=\"navigateToParentRun()\" class=\"parent-link\">Parent Run</a>\n </span>\n </div>\n </div>\n </div>\n <div class=\"header-right\">\n <div class=\"status-badge\" [attr.data-status]=\"record.Status\">\n <i class=\"fas\" [ngClass]=\"getStatusIcon(record.Status || '')\"></i>\n {{ record.Status }}\n </div>\n <div class=\"header-actions\">\n <button class=\"btn-icon\" (click)=\"refreshData()\" title=\"Refresh\">\n <i class=\"fas fa-sync-alt\"></i>\n </button>\n </div>\n </div>\n </div>\n <div class=\"header-stats\">\n <div class=\"stat\">\n <span class=\"label\">Started</span>\n <span class=\"value\">{{ record.StartedAt | date:'medium' }}</span>\n </div>\n <div class=\"stat\" *ngIf=\"record.CompletedAt\">\n <span class=\"label\">Completed</span>\n <span class=\"value\">{{ record.CompletedAt | date:'medium' }}</span>\n </div>\n <div class=\"stat\" *ngIf=\"record.CompletedAt\">\n <span class=\"label\">Duration</span>\n <span class=\"value\">{{ calculateDuration(record.StartedAt, record.CompletedAt) }}</span>\n </div>\n <div class=\"stat\" *ngIf=\"record.Success !== null && record.CompletedAt !== null\">\n <span class=\"label\">Result</span>\n <span class=\"value\" [class.success]=\"record.Success\" [class.error]=\"!record.Success\">\n {{ record.Success ? 'Success' : 'Failed' }}\n </span>\n </div>\n <div class=\"stat\" *ngIf=\"costMetrics && (costMetrics.totalTokensInput + costMetrics.totalTokensOutput) > 0\">\n <span class=\"label\">Tokens</span>\n <span class=\"value\" *ngIf=\"!costMetrics.isLoading\">{{ (costMetrics.totalTokensInput + costMetrics.totalTokensOutput) | number:'1.0-0' }}</span>\n <span class=\"value loading\" *ngIf=\"costMetrics.isLoading\"><i class=\"fas fa-spinner fa-spin\"></i></span>\n </div>\n <div class=\"stat\" *ngIf=\"costMetrics && costMetrics.totalCost > 0\">\n <span class=\"label\">Cost</span>\n <span class=\"value\" *ngIf=\"!costMetrics.isLoading\">${{ costMetrics.totalCost | number:'1.2-4' }}</span>\n <span class=\"value loading\" *ngIf=\"costMetrics.isLoading\"><i class=\"fas fa-spinner fa-spin\"></i></span>\n </div>\n <div class=\"stat\" *ngIf=\"record.EffortLevel\">\n <span class=\"label\">Effort Level</span>\n <span class=\"value\">{{ record.EffortLevel }}</span>\n </div>\n </div>\n \n <!-- Configuration Bar (shown below header stats when ConfigurationID exists) -->\n <div class=\"configuration-bar\" *ngIf=\"record.ConfigurationID\">\n <div class=\"config-item\">\n <i class=\"fas fa-cog\"></i>\n <div class=\"config-content\">\n <div class=\"config-label\">Configuration</div>\n <div class=\"config-value\">\n <a href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('MJ: AI Configurations', record.ConfigurationID)\">\n {{ record.Configuration || 'Unknown' }}\n </a>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Tabs -->\n <div class=\"tabs\">\n <button class=\"tab\" [class.active]=\"activeTab === 'timeline'\" (click)=\"changeTab('timeline')\">\n <i class=\"fas fa-stream\"></i> Timeline\n </button>\n <button class=\"tab\" [class.active]=\"activeTab === 'visualization'\" (click)=\"changeTab('visualization')\">\n <i class=\"fas fa-diagram-project\"></i> Visualization\n </button>\n <button class=\"tab\" [class.active]=\"activeTab === 'analytics'\" (click)=\"changeTab('analytics')\">\n <i class=\"fas fa-chart-line\"></i> Analytics\n </button>\n <button class=\"tab\" [class.active]=\"activeTab === 'details'\" (click)=\"changeTab('details')\">\n <i class=\"fas fa-info-circle\"></i> Details\n </button>\n </div>\n\n <!-- Content -->\n <div class=\"content-area\">\n <!-- Timeline Tab -->\n <div class=\"tab-content\" *ngIf=\"activeTab === 'timeline'\" style=\"height: 100%;\">\n <kendo-splitter style=\"height: 100%;\" orientation=\"horizontal\">\n <!-- Timeline Pane -->\n <kendo-splitter-pane [min]=\"'400px'\">\n <mj-ai-agent-run-timeline\n [aiAgentRunId]=\"record.ID\"\n [dataHelper]=\"dataHelper\"\n [autoRefresh]=\"record.Status === 'Running'\"\n [refreshInterval]=\"30000\"\n (itemSelected)=\"selectTimelineItem($event)\"\n (navigateToEntity)=\"navigateToEntityRecord($event)\"\n (agentRunCompleted)=\"onAgentRunCompleted($event)\">\n </mj-ai-agent-run-timeline>\n </kendo-splitter-pane>\n \n <!-- JSON Detail Pane -->\n <kendo-splitter-pane [size]=\"'45%'\" [min]=\"'300px'\" [collapsed]=\"!selectedTimelineItem\">\n <mj-ai-agent-run-step-detail\n [selectedTimelineItem]=\"selectedTimelineItem\"\n (closePanel)=\"closeJsonPanel()\"\n (navigateToActionLog)=\"navigateToActionLog($event)\"\n (copyToClipboard)=\"copyToClipboard($event)\">\n </mj-ai-agent-run-step-detail>\n </kendo-splitter-pane>\n </kendo-splitter>\n </div>\n\n <!-- Visualization Tab -->\n <div class=\"tab-content\" *ngIf=\"activeTab === 'visualization'\" style=\"height: 100%;\">\n <mj-ai-agent-run-visualization\n #visualizationComponent\n [aiAgentRunId]=\"record.ID\"\n [dataHelper]=\"dataHelper\"\n *ngIf=\"visualizationLoaded\">\n </mj-ai-agent-run-visualization>\n </div>\n\n <!-- Analytics Tab -->\n <div class=\"tab-content\" *ngIf=\"activeTab === 'analytics'\" style=\"height: 100%;\">\n <mj-ai-agent-run-analytics \n #analyticsComponent\n [agentRunId]=\"record.ID\"\n *ngIf=\"analyticsLoaded\">\n </mj-ai-agent-run-analytics>\n </div>\n\n <!-- Details Tab -->\n <div class=\"tab-content\" *ngIf=\"activeTab === 'details'\">\n <kendo-panelbar [keepItemContent]=\"true\">\n <kendo-panelbar-item title=\"General Information\" [expanded]=\"true\">\n <ng-template kendoPanelBarContent>\n <div class=\"details-grid\">\n <div class=\"detail-item\">\n <label>Agent</label>\n <span>\n <a href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('AI Agents', record.AgentID)\">\n {{ agent?.Name || 'N/A' }}\n </a>\n </span>\n </div>\n <div class=\"detail-item\">\n <label>Parent Run ID</label>\n <span>\n <a *ngIf=\"record.ParentRunID\" href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('MJ: AI Agent Runs', record.ParentRunID)\">\n {{ record.ParentRunID }}\n </a>\n <span *ngIf=\"!record.ParentRunID\">None (Root)</span>\n </span>\n </div>\n <div class=\"detail-item\">\n <label>Last Run ID</label>\n <span>\n <a *ngIf=\"record.LastRunID\" href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('MJ: AI Agent Runs', record.LastRunID)\">\n {{ record.LastRunID }}\n </a>\n <span *ngIf=\"!record.LastRunID\">None</span>\n </span>\n </div>\n <div class=\"detail-item\">\n <label>Conversation ID</label>\n <span>\n <a *ngIf=\"record.ConversationID\" href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('Conversations', record.ConversationID)\">\n {{ record.ConversationID }}\n </a>\n <span *ngIf=\"!record.ConversationID\">N/A</span>\n </span>\n </div>\n <div class=\"detail-item\">\n <label>User</label>\n <span>\n <a *ngIf=\"record.UserID\" href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('Users', record.UserID)\">\n {{ record.User || 'N/A' }}\n </a>\n <span *ngIf=\"!record.UserID\">N/A</span>\n </span>\n </div>\n </div>\n </ng-template>\n </kendo-panelbar-item>\n \n <kendo-panelbar-item title=\"Execution Settings\">\n <ng-template kendoPanelBarContent>\n <div class=\"details-grid\">\n <div class=\"detail-item\">\n <label>Override Model</label>\n <span>\n <a *ngIf=\"record.OverrideModelID\" href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('AI Models', record.OverrideModelID)\">\n {{ record.OverrideModel || 'N/A' }}\n </a>\n <span *ngIf=\"!record.OverrideModelID\">N/A</span>\n </span>\n </div>\n <div class=\"detail-item\">\n <label>Override Vendor</label>\n <span>\n <a *ngIf=\"record.OverrideVendorID\" href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('AI Vendors', record.OverrideVendorID)\">\n {{ record.OverrideVendor || 'N/A' }}\n </a>\n <span *ngIf=\"!record.OverrideVendorID\">N/A</span>\n </span>\n </div>\n <div class=\"detail-item\">\n <label>Verbose Logging</label>\n <span>{{ record.Verbose ? 'Yes' : 'No' }}</span>\n </div>\n </div>\n </ng-template>\n </kendo-panelbar-item>\n \n <kendo-panelbar-item title=\"Execution Status\">\n <ng-template kendoPanelBarContent>\n <div class=\"details-grid\">\n <div class=\"detail-item\">\n <label>Status</label>\n <span class=\"status-badge\" [attr.data-status]=\"record.Status\">\n {{ record.Status }}\n </span>\n </div>\n <div class=\"detail-item\">\n <label>Success</label>\n <span [class.success]=\"record.Success\" [class.error]=\"record.Success === false\">\n {{ record.Success === null ? 'In Progress' : (record.Success ? 'Yes' : 'No') }}\n </span>\n </div>\n <div class=\"detail-item full-width\" *ngIf=\"record.ErrorMessage\">\n <label>Error Message</label>\n <div class=\"error-message\">{{ record.ErrorMessage }}</div>\n </div>\n </div>\n </ng-template>\n </kendo-panelbar-item>\n \n <kendo-panelbar-item title=\"Usage & Cost\">\n <ng-template kendoPanelBarContent>\n <div class=\"details-grid\">\n <div class=\"detail-item\">\n <label>Total Tokens Used</label>\n <span>{{ record.TotalTokensUsed ? (record.TotalTokensUsed | number:'1.0-0') : 'N/A' }}</span>\n </div>\n <div class=\"detail-item\">\n <label>Prompt Tokens</label>\n <span>{{ record.TotalPromptTokensUsed ? (record.TotalPromptTokensUsed | number:'1.0-0') : 'N/A' }}</span>\n </div>\n <div class=\"detail-item\">\n <label>Completion Tokens</label>\n <span>{{ record.TotalCompletionTokensUsed ? (record.TotalCompletionTokensUsed | number:'1.0-0') : 'N/A' }}</span>\n </div>\n <div class=\"detail-item\">\n <label>Total Cost</label>\n <span>{{ record.TotalCost != null ? ('$' + (record.TotalCost | number:'1.2-4')) : 'N/A' }}</span>\n </div>\n <div class=\"detail-item\">\n <label>Total Prompt Iterations</label>\n <span>{{ record.TotalPromptIterations != null ? (record.TotalPromptIterations | number:'1.0-0') : 'N/A' }}</span>\n </div>\n </div>\n </ng-template>\n </kendo-panelbar-item>\n \n <kendo-panelbar-item title=\"Result\" *ngIf=\"record.Result\">\n <ng-template kendoPanelBarContent>\n <div class=\"result-viewer\">\n @if (isParsingComplete) {\n <mj-code-editor\n [ngModel]=\"parsedResult\"\n [language]=\"'json'\"\n [readonly]=\"true\"\n style=\"height: 300px; width: 100%;\">\n </mj-code-editor>\n } @else {\n <div style=\"padding: 20px; text-align: center; color: #666;\">\n <i class=\"fas fa-spinner fa-spin\"></i> Loading result data...\n </div>\n }\n </div>\n </ng-template>\n </kendo-panelbar-item>\n \n <kendo-panelbar-item title=\"Starting Payload\" *ngIf=\"record.StartingPayload\">\n <ng-template kendoPanelBarContent>\n <div class=\"result-viewer\">\n @if (isParsingComplete) {\n <mj-code-editor\n [ngModel]=\"parsedStartingPayload\"\n [language]=\"'json'\"\n [readonly]=\"true\"\n style=\"height: 300px; width: 100%;\">\n </mj-code-editor>\n } @else {\n <div style=\"padding: 20px; text-align: center; color: #666;\">\n <i class=\"fas fa-spinner fa-spin\"></i> Loading payload data...\n </div>\n }\n </div>\n </ng-template>\n </kendo-panelbar-item>\n \n <kendo-panelbar-item title=\"Execution Data\" *ngIf=\"record.Data\">\n <ng-template kendoPanelBarContent>\n <div class=\"result-viewer\">\n @if (isParsingComplete) {\n <mj-code-editor\n [ngModel]=\"parsedData\"\n [language]=\"'json'\"\n [readonly]=\"true\"\n style=\"height: 300px; width: 100%;\">\n </mj-code-editor>\n } @else {\n <div style=\"padding: 20px; text-align: center; color: #666;\">\n <i class=\"fas fa-spinner fa-spin\"></i> Loading execution data...\n </div>\n }\n </div>\n </ng-template>\n </kendo-panelbar-item>\n \n <kendo-panelbar-item title=\"Final Payload\" *ngIf=\"record.FinalPayload\">\n <ng-template kendoPanelBarContent>\n <div class=\"result-viewer\">\n @if (isParsingComplete) {\n <mj-code-editor\n [ngModel]=\"parsedFinalPayload\"\n [language]=\"'json'\"\n [readonly]=\"true\"\n style=\"height: 300px; width: 100%;\">\n </mj-code-editor>\n } @else {\n <div style=\"padding: 20px; text-align: center; color: #666;\">\n <i class=\"fas fa-spinner fa-spin\"></i> Loading final payload data...\n </div>\n }\n </div>\n </ng-template>\n </kendo-panelbar-item>\n \n <kendo-panelbar-item title=\"Payload Diff\" *ngIf=\"showPayloadDiff\">\n <ng-template kendoPanelBarContent>\n <div style=\"padding: 20px; background: #f8f9fa;\">\n @if (isParsingComplete) {\n <mj-deep-diff\n [oldValue]=\"startingPayloadObject\"\n [newValue]=\"finalPayloadObject\"\n [title]=\"''\"\n [showSummary]=\"true\"\n [showUnchanged]=\"false\"\n [expandAll]=\"false\"\n [maxDepth]=\"10\"\n [maxStringLength]=\"200\"\n [treatNullAsUndefined]=\"true\">\n </mj-deep-diff>\n } @else {\n <div style=\"padding: 20px; text-align: center; color: #666;\">\n <i class=\"fas fa-spinner fa-spin\"></i> Loading payload diff...\n </div>\n }\n </div>\n </ng-template>\n </kendo-panelbar-item>\n </kendo-panelbar>\n </div>\n </div>\n </div>\n</div>", styles: [".ai-agent-run-form {\n height: 100%;\n overflow: auto;\n}\n\n/* Header Styles */\n.header {\n background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);\n border-bottom: 1px solid #e0e6ed;\n padding: 20px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.04);\n}\n\n.header-content {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n margin-bottom: 16px;\n}\n\n.header-left {\n display: flex;\n align-items: center;\n gap: 16px;\n}\n\n.icon-wrapper {\n width: 48px;\n height: 48px;\n background: linear-gradient(135deg, #2196f3, #1976d2);\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-size: 20px;\n}\n\n.header-info h2 {\n margin: 0;\n font-size: 24px;\n font-weight: 600;\n color: #2c3e50;\n}\n\n.meta-info {\n display: flex;\n gap: 12px;\n margin-top: 4px;\n font-size: 14px;\n color: #6c757d;\n}\n\n.parent-run {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.parent-link {\n color: #ff6358;\n text-decoration: none;\n cursor: pointer;\n transition: color 0.2s;\n}\n\n.parent-link:hover {\n color: #ff4444;\n text-decoration: underline;\n}\n\n.agent-name {\n font-weight: 500;\n color: #495057;\n}\n\n.run-id {\n font-family: monospace;\n font-size: 12px;\n opacity: 0.7;\n}\n\n.header-right {\n display: flex;\n align-items: center;\n gap: 16px;\n}\n\n.status-badge {\n padding: 6px 16px;\n border-radius: 20px;\n font-size: 13px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n display: inline-flex;\n align-items: center;\n gap: 6px;\n}\n\n.status-badge[data-status=\"Running\"] {\n background: #e3f2fd;\n color: #1976d2;\n}\n\n.status-badge[data-status=\"Completed\"] {\n background: #d4edda;\n color: #155724;\n}\n\n.status-badge[data-status=\"Failed\"] {\n background: #f8d7da;\n color: #721c24;\n}\n\n.status-badge[data-status=\"Cancelled\"] {\n background: #fff3cd;\n color: #856404;\n}\n\n.status-badge[data-status=\"Paused\"] {\n background: #e2e3e5;\n color: #383d41;\n}\n\n.status-badge.small {\n padding: 4px 12px;\n font-size: 11px;\n}\n\n.header-actions {\n display: flex;\n gap: 8px;\n}\n\n.btn-icon {\n width: 36px;\n height: 36px;\n border: 1px solid #dee2e6;\n background: white;\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.2s ease;\n color: #6c757d;\n}\n\n.btn-icon:hover {\n background: #f8f9fa;\n border-color: #adb5bd;\n color: #495057;\n}\n\n.header-stats {\n display: flex;\n gap: 24px;\n padding-top: 12px;\n border-top: 1px solid #e9ecef;\n}\n\n/* Configuration Bar */\n.configuration-bar {\n display: flex;\n gap: 24px;\n padding-top: 16px;\n border-top: 1px solid #e9ecef;\n margin-top: 16px;\n}\n\n.config-item {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.config-item > i {\n font-size: 1.2em;\n color: #6c757d;\n width: 24px;\n text-align: center;\n}\n\n.config-content {\n display: flex;\n flex-direction: column;\n}\n\n.config-label {\n font-size: 12px;\n color: #6c757d;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.config-value {\n font-size: 14px;\n font-weight: 600;\n color: #2c3e50;\n}\n\n.config-value .entity-link {\n color: #007bff;\n text-decoration: none;\n cursor: pointer;\n transition: color 0.2s;\n}\n\n.config-value .entity-link:hover {\n color: #0056b3;\n text-decoration: underline;\n}\n\n.stat {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.stat .label {\n font-size: 12px;\n color: #6c757d;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.stat .value {\n font-size: 14px;\n font-weight: 500;\n color: #495057;\n}\n\n.stat .value.success {\n color: #28a745;\n}\n\n.stat .value.error {\n color: #dc3545;\n}\n\n/* Tabs */\n.tabs {\n display: flex;\n border-bottom: 1px solid #dee2e6;\n background: #f8f9fa;\n}\n\n.tab {\n padding: 12px 24px;\n border: none;\n background: transparent;\n cursor: pointer;\n font-size: 14px;\n font-weight: 500;\n color: #6c757d;\n display: flex;\n align-items: center;\n gap: 8px;\n transition: all 0.2s ease;\n border-bottom: 3px solid transparent;\n}\n\n.tab:hover {\n color: #495057;\n background: rgba(0,0,0,0.02);\n}\n\n.tab.active {\n color: #2196f3;\n border-bottom-color: #2196f3;\n background: white;\n}\n\n/* Content Area */\n.content-area {\n position: relative;\n height: calc(100vh - 390px);\n overflow: auto;\n background: white;\n}\n\n.tab-content {\n height: 100%;\n overflow: auto;\n}\n\n/* Details tab specific */\n.tab-content[ng-reflect-ng-if=\"true\"] > kendo-panelbar {\n height: 100%;\n overflow-y: auto;\n}\n\n/* JSON Detail Pane */\n.json-detail-pane {\n height: 100%;\n display: flex;\n flex-direction: column;\n background: #f8f9fa;\n border-left: 1px solid #e0e6ed;\n}\n\n.json-pane-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 16px 20px;\n background: white;\n border-bottom: 1px solid #e0e6ed;\n box-shadow: 0 2px 4px rgba(0,0,0,0.04);\n}\n\n.json-pane-header h3 {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n color: #2c3e50;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.json-pane-header h3 i {\n color: #6b7280;\n font-size: 14px;\n}\n\n.json-pane-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: auto;\n padding: 16px;\n}\n\n.json-meta {\n display: flex;\n gap: 20px;\n margin-bottom: 16px;\n flex-wrap: wrap;\n}\n\n.json-meta .meta-item {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.json-meta .meta-item label {\n font-size: 11px;\n text-transform: uppercase;\n color: #6b7280;\n font-weight: 600;\n letter-spacing: 0.5px;\n}\n\n.json-meta .meta-item span {\n font-size: 14px;\n color: #2c3e50;\n font-weight: 500;\n}\n\n.action-link {\n margin-bottom: 12px;\n}\n\n.action-link .btn-link {\n background: none;\n border: none;\n color: #2196f3;\n font-size: 14px;\n cursor: pointer;\n padding: 6px 12px;\n border-radius: 4px;\n transition: all 0.2s;\n display: inline-flex;\n align-items: center;\n gap: 6px;\n}\n\n.action-link .btn-link:hover {\n background: rgba(33, 150, 243, 0.08);\n color: #1976d2;\n}\n\n.json-viewer {\n flex: 1;\n display: flex;\n flex-direction: column;\n background: white;\n border-radius: 8px;\n border: 1px solid #e0e6ed;\n overflow: auto;\n padding: 20px;\n gap: 10px;\n min-height: 0;\n margin-bottom: 45px;\n}\n\n\n.json-toolbar {\n display: flex;\n justify-content: flex-end;\n padding: 8px 12px;\n background: #f8f9fa;\n border-bottom: 1px solid #e0e6ed;\n}\n\n/* Timeline Styles */\n.timeline-container {\n height: 100%;\n overflow-y: auto;\n padding: 20px;\n}\n\n.timeline-container > .timeline {\n max-width: 900px;\n margin: 0 auto;\n}\n\n.timeline {\n position: relative;\n padding-left: 40px;\n}\n\n.timeline::before {\n content: '';\n position: absolute;\n left: 20px;\n top: 0;\n bottom: 0;\n width: 2px;\n background: #e9ecef;\n}\n\n.timeline-item {\n position: relative;\n margin-bottom: 24px;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.timeline-item:hover {\n transform: translateX(4px);\n}\n\n.timeline-item.selected {\n transform: translateX(8px);\n}\n\n.timeline-item.selected .timeline-content {\n background: #f0f7ff;\n border-color: #2196f3;\n}\n\n.timeline-marker {\n position: absolute;\n left: -30px;\n top: 0;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n background: white;\n border: 3px solid #e9ecef;\n z-index: 1;\n transition: all 0.2s ease;\n}\n\n.timeline-marker[data-color=\"success\"] {\n border-color: #28a745;\n color: #28a745;\n}\n\n.timeline-marker[data-color=\"error\"] {\n border-color: #dc3545;\n color: #dc3545;\n}\n\n.timeline-marker[data-color=\"info\"] {\n border-color: #17a2b8;\n color: #17a2b8;\n}\n\n.timeline-marker[data-color=\"warning\"] {\n border-color: #ffc107;\n color: #ffc107;\n}\n\n.timeline-marker[data-color=\"secondary\"] {\n border-color: #6c757d;\n color: #6c757d;\n}\n\n.timeline-marker.small {\n width: 28px;\n height: 28px;\n font-size: 12px;\n}\n\n.timeline-content {\n background: white;\n border: 1px solid #e9ecef;\n border-radius: 12px;\n padding: 16px 20px;\n margin-left: 20px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.04);\n transition: all 0.2s ease;\n}\n\n.timeline-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 8px;\n}\n\n.timeline-header h4 {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n color: #2c3e50;\n}\n\n.timeline-header h5 {\n margin: 0;\n font-size: 14px;\n font-weight: 600;\n color: #495057;\n}\n\n.timeline-time {\n font-size: 12px;\n color: #6c757d;\n font-family: monospace;\n}\n\n.timeline-subtitle {\n font-size: 13px;\n color: #6c757d;\n margin-bottom: 8px;\n}\n\n.timeline-meta {\n display: flex;\n gap: 16px;\n font-size: 12px;\n color: #6c757d;\n}\n\n.timeline-meta .status {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 2px 8px;\n border-radius: 12px;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.timeline-meta .status[data-status=\"Completed\"] {\n background: #d4edda;\n color: #155724;\n}\n\n.timeline-meta .status[data-status=\"Failed\"] {\n background: #f8d7da;\n color: #721c24;\n}\n\n.timeline-meta .status[data-status=\"Running\"] {\n background: #cce5ff;\n color: #004085;\n}\n\n.timeline-meta .status[data-status=\"Paused\"] {\n background: #e2e3e5;\n color: #383d41;\n}\n\n.duration {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.timeline-actions {\n position: absolute;\n right: 20px;\n top: 50%;\n transform: translateY(-50%);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.btn-link {\n background: none;\n border: none;\n color: #2196f3;\n cursor: pointer;\n font-size: 12px;\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 4px 8px;\n border-radius: 4px;\n transition: all 0.2s ease;\n}\n\n.btn-link:hover {\n background: rgba(33, 150, 243, 0.1);\n}\n\n.btn-expand {\n width: 24px;\n height: 24px;\n border: 1px solid #dee2e6;\n background: white;\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.2s ease;\n color: #6c757d;\n font-size: 12px;\n}\n\n.btn-expand:hover {\n background: #f8f9fa;\n border-color: #adb5bd;\n color: #495057;\n}\n\n/* Timeline Children */\n.timeline-children {\n position: relative;\n margin-top: 12px;\n margin-bottom: 12px;\n}\n\n.timeline-children::before {\n content: '';\n position: absolute;\n left: -10px;\n top: -12px;\n bottom: 0;\n width: 2px;\n background: #e9ecef;\n}\n\n.child-item {\n margin-bottom: 12px;\n}\n\n.child-item .timeline-content {\n background: #f8f9fa;\n border-color: #e0e6ed;\n}\n\n/* Sub-run timeline styles */\n.sub-run-timeline {\n background: rgba(33, 150, 243, 0.02);\n border-left: 2px solid rgba(33, 150, 243, 0.2);\n margin-left: 20px;\n padding-left: 20px;\n margin-top: 8px;\n margin-bottom: 8px;\n}\n\n.sub-run-item .timeline-marker {\n border-width: 2px;\n}\n\n.sub-run-item .timeline-content {\n transition: all 0.2s ease;\n}\n\n/* JSON Detail Pane (in splitter) */\n.json-detail-pane {\n height: 100%;\n display: flex;\n flex-direction: column;\n background: white;\n border-left: 1px solid #e0e6ed;\n}\n\n.json-pane-header {\n padding: 16px 20px;\n background: #f8f9fa;\n border-bottom: 1px solid #e0e6ed;\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-shrink: 0;\n}\n\n.json-pane-header h3 {\n margin: 0;\n font-size: 16px;\n color: #2c3e50;\n display: flex;\n align-items: center;\n gap: 10px;\n font-weight: 600;\n}\n\n.json-pane-content {\n flex: 1;\n overflow-y: auto;\n display: flex;\n flex-direction: column;\n}\n\n.json-meta {\n padding: 16px 20px;\n border-bottom: 1px solid #e0e6ed;\n display: flex;\n gap: 20px;\n flex-wrap: wrap;\n flex-shrink: 0;\n}\n\n.json-meta .meta-item {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.json-meta label {\n font-size: 11px;\n color: #7c8798;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.json-meta span {\n font-size: 14px;\n color: #2c3e50;\n font-weight: 500;\n}\n\n.action-link {\n padding: 12px 20px;\n border-bottom: 1px solid #e0e6ed;\n flex-shrink: 0;\n}\n\n.action-link .btn-link {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n color: #2196f3;\n text-decoration: none;\n font-size: 14px;\n padding: 8px 12px;\n background: #f0f7ff;\n border: 1px solid #d0e5ff;\n border-radius: 4px;\n transition: all 0.2s;\n cursor: pointer;\n}\n\n.action-link .btn-link:hover {\n background: #e1f0ff;\n border-color: #b0d5ff;\n text-decoration: none;\n}\n\n\n.json-toolbar {\n display: flex;\n justify-content: flex-end;\n gap: 8px;\n margin-bottom: 8px;\n}\n\n/* Details Tab */\n.details-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 20px;\n padding: 20px;\n}\n\n.detail-item {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.detail-item.full-width {\n grid-column: 1 / -1;\n}\n\n.detail-item label {\n font-size: 12px;\n color: #6c757d;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.detail-item span {\n font-size: 14px;\n color: #495057;\n}\n\n.error-message {\n background: #f8d7da;\n color: #721c24;\n padding: 12px;\n border-radius: 8px;\n font-size: 13px;\n}\n\n.result-viewer,\n.state-viewer {\n padding: 20px;\n max-height: 450px;\n overflow: auto;\n display: flex;\n flex-direction: column;\n}\n\n.result-viewer mj-code-editor,\n.state-viewer mj-code-editor {\n flex: 1;\n min-height: 0;\n}\n\n/* Empty States */\n.empty-state,\n.loading-state,\n.error-state {\n text-align: center;\n padding: 60px 20px;\n color: #6c757d;\n}\n\n.empty-state i,\n.loading-state i,\n.error-state i {\n opacity: 0.3;\n margin-bottom: 16px;\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n .header-content {\n flex-direction: column;\n gap: 16px;\n }\n \n .header-stats {\n flex-wrap: wrap;\n }\n \n .json-detail-pane {\n width: 100%;\n }\n \n .timeline {\n padding-left: 30px;\n }\n \n .timeline-marker {\n left: -25px;\n width: 32px;\n height: 32px;\n }\n \n .timeline-content {\n margin-left: 10px;\n }\n}\n\n/* Entity Link Styles */\n.entity-link {\n color: #2196f3;\n text-decoration: none;\n transition: all 0.2s ease;\n border-bottom: 1px solid transparent;\n display: inline-block;\n}\n\n.entity-link:hover {\n color: #1976d2;\n border-bottom-color: #1976d2;\n}\n\n.entity-link:active {\n color: #0d47a1;\n}\n\n/* Detail Pane Tabs */\n.detail-pane-tabs {\n display: flex;\n gap: 8px;\n margin: 8px 0 0 0;\n border-bottom: 1px solid #e0e6ed;\n padding: 0 16px;\n}\n\n.detail-tab {\n padding: 10px 16px;\n background: none;\n border: none;\n border-bottom: 3px solid transparent;\n color: #6c757d;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s ease;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.detail-tab:hover {\n color: #495057;\n background: rgba(0, 0, 0, 0.02);\n}\n\n.detail-tab.active {\n color: #2196f3;\n border-bottom-color: #2196f3;\n}\n\n.detail-tab i {\n font-size: 14px;\n}\n\n/* Detail Pane Content */\n.detail-pane-content {\n flex: 1;\n overflow-y: auto;\n min-height: 0;\n margin-bottom: 35px;\n}\n\n.detail-pane-content.with-tabs {\n /* When tabs are shown, content starts right after tabs */\n margin-top: 0;\n}\n\n/* Step Payload Diff */\n.step-payload-diff {\n height: 100%;\n overflow-y: auto;\n padding: 16px;\n}\n\n.step-payload-diff mj-deep-diff {\n display: block;\n height: 100%;\n}\n\n/* JSON Viewer adjustments when no tabs */\n.detail-pane-content:not(.with-tabs) .json-viewer {\n margin-top: 16px;\n}"] }]
|
|
1295
1295
|
}], () => [{ type: i0.ElementRef }, { type: i1.SharedService }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: i0.ChangeDetectorRef }, { type: i3.AIAgentRunCostService }], { timelineComponent: [{
|
|
1296
1296
|
type: ViewChild,
|
|
1297
1297
|
args: [AIAgentRunTimelineComponent]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"details.component.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/generated/Entities/ComponentLibrary/sections/details.component.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AACzE,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;;AAEvE,
|
|
1
|
+
{"version":3,"file":"details.component.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/generated/Entities/ComponentLibrary/sections/details.component.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AACzE,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;;AAEvE,qBA+Fa,gCAAiC,SAAQ,wBAAwB;IACxD,MAAM,EAAG,sBAAsB,CAAC;IAChC,QAAQ,EAAE,OAAO,CAAS;yCAFnC,gCAAgC;2CAAhC,gCAAgC;CAG5C;AAED,wBAAgB,oCAAoC,SAEnD"}
|
|
@@ -12,7 +12,7 @@ import * as i1 from "@angular/common";
|
|
|
12
12
|
import * as i2 from "@memberjunction/ng-base-forms";
|
|
13
13
|
function ComponentLibraryDetailsComponent_div_0_Template(rf, ctx) { if (rf & 1) {
|
|
14
14
|
i0.ɵɵelementStart(0, "div")(1, "div", 1);
|
|
15
|
-
i0.ɵɵelement(2, "mj-form-field", 2)(3, "mj-form-field", 3)(4, "mj-form-field", 4)(5, "mj-form-field", 5)(6, "mj-form-field", 6)(7, "mj-form-field", 7)(8, "mj-form-field", 8)(9, "mj-form-field", 9)(10, "mj-form-field", 10)(11, "mj-form-field", 11)(12, "mj-form-field", 12);
|
|
15
|
+
i0.ɵɵelement(2, "mj-form-field", 2)(3, "mj-form-field", 3)(4, "mj-form-field", 4)(5, "mj-form-field", 5)(6, "mj-form-field", 6)(7, "mj-form-field", 7)(8, "mj-form-field", 8)(9, "mj-form-field", 9)(10, "mj-form-field", 10)(11, "mj-form-field", 11)(12, "mj-form-field", 12)(13, "mj-form-field", 13);
|
|
16
16
|
i0.ɵɵelementEnd()();
|
|
17
17
|
} if (rf & 2) {
|
|
18
18
|
const ctx_r0 = i0.ɵɵnextContext();
|
|
@@ -38,6 +38,8 @@ function ComponentLibraryDetailsComponent_div_0_Template(rf, ctx) { if (rf & 1)
|
|
|
38
38
|
i0.ɵɵproperty("record", ctx_r0.record)("ShowLabel", true)("EditMode", ctx_r0.EditMode);
|
|
39
39
|
i0.ɵɵadvance();
|
|
40
40
|
i0.ɵɵproperty("record", ctx_r0.record)("ShowLabel", true)("EditMode", ctx_r0.EditMode);
|
|
41
|
+
i0.ɵɵadvance();
|
|
42
|
+
i0.ɵɵproperty("record", ctx_r0.record)("ShowLabel", true)("EditMode", ctx_r0.EditMode);
|
|
41
43
|
} }
|
|
42
44
|
let ComponentLibraryDetailsComponent = class ComponentLibraryDetailsComponent extends BaseFormSectionComponent {
|
|
43
45
|
constructor() {
|
|
@@ -45,8 +47,8 @@ let ComponentLibraryDetailsComponent = class ComponentLibraryDetailsComponent ex
|
|
|
45
47
|
this.EditMode = false;
|
|
46
48
|
}
|
|
47
49
|
static { this.ɵfac = /*@__PURE__*/ (() => { let ɵComponentLibraryDetailsComponent_BaseFactory; return function ComponentLibraryDetailsComponent_Factory(t) { return (ɵComponentLibraryDetailsComponent_BaseFactory || (ɵComponentLibraryDetailsComponent_BaseFactory = i0.ɵɵgetInheritedFactory(ComponentLibraryDetailsComponent)))(t || ComponentLibraryDetailsComponent); }; })(); }
|
|
48
|
-
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ComponentLibraryDetailsComponent, selectors: [["gen-componentlibrary-form-details"]], inputs: { record: "record", EditMode: "EditMode" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 1, vars: 1, consts: [[4, "ngIf"], [1, "record-form"], ["FieldName", "Name", "Type", "textarea", 3, "record", "ShowLabel", "EditMode"], ["FieldName", "DisplayName", "Type", "textarea", 3, "record", "ShowLabel", "EditMode"], ["FieldName", "Version", "Type", "textbox", 3, "record", "ShowLabel", "EditMode"], ["FieldName", "GlobalVariable", "Type", "textarea", 3, "record", "ShowLabel", "EditMode"], ["FieldName", "Category", "Type", "dropdownlist", 3, "record", "ShowLabel", "EditMode"], ["FieldName", "CDNUrl", "Type", "textarea", 3, "record", "ShowLabel", "EditMode"], ["FieldName", "CDNCssUrl", "Type", "textarea", 3, "record", "ShowLabel", "EditMode"], ["FieldName", "Description", "Type", "textarea", 3, "record", "ShowLabel", "EditMode"], ["FieldName", "__mj_CreatedAt", "Type", "textbox", 3, "record", "ShowLabel", "EditMode"], ["FieldName", "__mj_UpdatedAt", "Type", "textbox", 3, "record", "ShowLabel", "EditMode"], ["FieldName", "Status", "Type", "dropdownlist", 3, "record", "ShowLabel", "EditMode"]], template: function ComponentLibraryDetailsComponent_Template(rf, ctx) { if (rf & 1) {
|
|
49
|
-
i0.ɵɵtemplate(0, ComponentLibraryDetailsComponent_div_0_Template,
|
|
50
|
+
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ComponentLibraryDetailsComponent, selectors: [["gen-componentlibrary-form-details"]], inputs: { record: "record", EditMode: "EditMode" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 1, vars: 1, consts: [[4, "ngIf"], [1, "record-form"], ["FieldName", "Name", "Type", "textarea", 3, "record", "ShowLabel", "EditMode"], ["FieldName", "DisplayName", "Type", "textarea", 3, "record", "ShowLabel", "EditMode"], ["FieldName", "Version", "Type", "textbox", 3, "record", "ShowLabel", "EditMode"], ["FieldName", "GlobalVariable", "Type", "textarea", 3, "record", "ShowLabel", "EditMode"], ["FieldName", "Category", "Type", "dropdownlist", 3, "record", "ShowLabel", "EditMode"], ["FieldName", "CDNUrl", "Type", "textarea", 3, "record", "ShowLabel", "EditMode"], ["FieldName", "CDNCssUrl", "Type", "textarea", 3, "record", "ShowLabel", "EditMode"], ["FieldName", "Description", "Type", "textarea", 3, "record", "ShowLabel", "EditMode"], ["FieldName", "__mj_CreatedAt", "Type", "textbox", 3, "record", "ShowLabel", "EditMode"], ["FieldName", "__mj_UpdatedAt", "Type", "textbox", 3, "record", "ShowLabel", "EditMode"], ["FieldName", "Status", "Type", "dropdownlist", 3, "record", "ShowLabel", "EditMode"], ["FieldName", "LintRules", "Type", "textarea", 3, "record", "ShowLabel", "EditMode"]], template: function ComponentLibraryDetailsComponent_Template(rf, ctx) { if (rf & 1) {
|
|
51
|
+
i0.ɵɵtemplate(0, ComponentLibraryDetailsComponent_div_0_Template, 14, 36, "div", 0);
|
|
50
52
|
} if (rf & 2) {
|
|
51
53
|
i0.ɵɵproperty("ngIf", ctx.record);
|
|
52
54
|
} }, dependencies: [i1.NgIf, i2.MJFormField], styles: [".k-pane[_ngcontent-%COMP%] {\n background-color: #F5F6FA;\n}\n\n.content-margin[_ngcontent-%COMP%] {\n margin: 10px;\n} \n\n\na[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: bolder;\n}\n\n.tab-header-icon[_ngcontent-%COMP%] {\n margin-right: 5px;\n}\n\n.record-form[_ngcontent-%COMP%] {\n display: block;\n flex-direction: column;\n background-color: #F5F6FA;\n padding: 10px;\n}\n\n.record-form-group[_ngcontent-%COMP%] {\n margin-top: 0px;\n background-color: #F5F6FA;\n}\n\nbutton[_ngcontent-%COMP%] {\n margin-right: 5px;\n}\n\n.record-form[_ngcontent-%COMP%] h2[_ngcontent-%COMP%] {\n margin-bottom: 10px;\n}\n\n.k-splitter[_ngcontent-%COMP%] {\n border-width: 0px;\n}\n\n.record-form-row[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: start;\n gap: 10px;\n margin-bottom: 12px;\n padding-top: 5px;\n padding-bottom: 5px;\n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n.record-form[_ngcontent-%COMP%] .record-form-row[_ngcontent-%COMP%] > [_ngcontent-%COMP%]:first-child {\n font-weight: bold;\n padding-right: 10px;\n} \n\n.record-form[_ngcontent-%COMP%] .record-form-row[_ngcontent-%COMP%] > span[_ngcontent-%COMP%] {\n white-space: pre-line;\n max-height: 300px;\n overflow: auto;\n}\n\n \n\n@media (min-width: 768px) {\n .record-form-row[_ngcontent-%COMP%] {\n flex-direction: row;\n align-items: center;\n }\n\n .record-form-row[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n width: 240px;\n margin-bottom: 0;\n }\n}"] }); }
|
|
@@ -136,6 +138,13 @@ export { ComponentLibraryDetailsComponent };
|
|
|
136
138
|
Type="dropdownlist"
|
|
137
139
|
[EditMode]="EditMode"
|
|
138
140
|
></mj-form-field>
|
|
141
|
+
<mj-form-field
|
|
142
|
+
[record]="record"
|
|
143
|
+
[ShowLabel]="true"
|
|
144
|
+
FieldName="LintRules"
|
|
145
|
+
Type="textarea"
|
|
146
|
+
[EditMode]="EditMode"
|
|
147
|
+
></mj-form-field>
|
|
139
148
|
|
|
140
149
|
</div>
|
|
141
150
|
</div>
|
|
@@ -145,7 +154,7 @@ export { ComponentLibraryDetailsComponent };
|
|
|
145
154
|
}], EditMode: [{
|
|
146
155
|
type: Input
|
|
147
156
|
}] }); })();
|
|
148
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ComponentLibraryDetailsComponent, { className: "ComponentLibraryDetailsComponent", filePath: "src/lib/generated/Entities/ComponentLibrary/sections/details.component.ts", lineNumber:
|
|
157
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ComponentLibraryDetailsComponent, { className: "ComponentLibraryDetailsComponent", filePath: "src/lib/generated/Entities/ComponentLibrary/sections/details.component.ts", lineNumber: 101 }); })();
|
|
149
158
|
export function LoadComponentLibraryDetailsComponent() {
|
|
150
159
|
// does nothing, but called in order to prevent tree-shaking from eliminating this component from the build
|
|
151
160
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"details.component.js","sourceRoot":"","sources":["../../../../../../src/lib/generated/Entities/ComponentLibrary/sections/details.component.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;;;;;IAQrE,AADW,2BAAyB,aACX;
|
|
1
|
+
{"version":3,"file":"details.component.js","sourceRoot":"","sources":["../../../../../../src/lib/generated/Entities/ComponentLibrary/sections/details.component.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;;;;;IAQrE,AADW,2BAAyB,aACX;IA8ErB,AAPA,AAPA,AAPA,AAPA,AAPA,AAPA,AAPA,AAPA,AAPA,AAPA,AAPA,mCAMiB,uBAOA,uBAOA,uBAOA,uBAOA,uBAOA,uBAOA,uBAOA,yBAOA,yBAOA,yBAOA,yBAOA;IAGzB,AADI,iBAAM,EACJ;;;IArFM,eAAiB;IAIjB,AAHA,AADA,sCAAiB,mBACC,6BAGG;IAGrB,cAAiB;IAIjB,AAHA,AADA,sCAAiB,mBACC,6BAGG;IAGrB,cAAiB;IAIjB,AAHA,AADA,sCAAiB,mBACC,6BAGG;IAGrB,cAAiB;IAIjB,AAHA,AADA,sCAAiB,mBACC,6BAGG;IAGrB,cAAiB;IAIjB,AAHA,AADA,sCAAiB,mBACC,6BAGG;IAGrB,cAAiB;IAIjB,AAHA,AADA,sCAAiB,mBACC,6BAGG;IAGrB,cAAiB;IAIjB,AAHA,AADA,sCAAiB,mBACC,6BAGG;IAGrB,cAAiB;IAIjB,AAHA,AADA,sCAAiB,mBACC,6BAGG;IAGrB,cAAiB;IAIjB,AAHA,AADA,sCAAiB,mBACC,6BAGG;IAGrB,cAAiB;IAIjB,AAHA,AADA,sCAAiB,mBACC,6BAGG;IAGrB,cAAiB;IAIjB,AAHA,AADA,sCAAiB,mBACC,6BAGG;IAGrB,cAAiB;IAIjB,AAHA,AADA,sCAAiB,mBACC,6BAGG;;AAO1B,IAAM,gCAAgC,GAAtC,MAAM,gCAAiC,SAAQ,wBAAwB;IAAvE;;QAEe,aAAQ,GAAY,KAAK,CAAC;KAC/C;oSAHY,gCAAgC,SAAhC,gCAAgC;oEAAhC,gCAAgC;YA3F9B,mFAAyB;;YAAnB,iCAAiB;;;AA2FzB,gCAAgC;IA/F5C,aAAa,CAAC,wBAAwB,EAAE,iCAAiC,CAAC,CAAC,wCAAwC;GA+FvG,gCAAgC,CAG5C;;iFAHY,gCAAgC;cA9F5C,SAAS;2BACI,mCAAmC,YAEnC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyFT;gBAGiB,MAAM;kBAAvB,KAAK;YACY,QAAQ;kBAAzB,KAAK;;kFAFG,gCAAgC;AAK7C,MAAM,UAAU,oCAAoC;IAChD,2GAA2G;AAC/G,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@memberjunction/ng-core-entity-forms",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.92.0",
|
|
4
4
|
"description": "MemberJunction Core Entity Angular Forms",
|
|
5
5
|
"main": "./dist/public-api.js",
|
|
6
6
|
"typings": "./dist/public-api.d.ts",
|
|
@@ -24,21 +24,21 @@
|
|
|
24
24
|
"@angular/forms": "18.0.2"
|
|
25
25
|
},
|
|
26
26
|
"dependencies": {
|
|
27
|
-
"@memberjunction/global": "2.
|
|
28
|
-
"@memberjunction/core": "2.
|
|
29
|
-
"@memberjunction/core-entities": "2.
|
|
30
|
-
"@memberjunction/ai-core-plus": "2.
|
|
31
|
-
"@memberjunction/ng-base-forms": "2.
|
|
32
|
-
"@memberjunction/ng-deep-diff": "2.
|
|
33
|
-
"@memberjunction/ng-form-toolbar": "2.
|
|
34
|
-
"@memberjunction/ng-tabstrip": "2.
|
|
35
|
-
"@memberjunction/ng-container-directives": "2.
|
|
36
|
-
"@memberjunction/ng-code-editor": "2.
|
|
37
|
-
"@memberjunction/ng-timeline": "2.
|
|
38
|
-
"@memberjunction/ng-join-grid": "2.
|
|
39
|
-
"@memberjunction/ai-engine-base": "2.
|
|
40
|
-
"@memberjunction/ng-ai-test-harness": "2.
|
|
41
|
-
"@memberjunction/ng-action-gallery": "2.
|
|
27
|
+
"@memberjunction/global": "2.92.0",
|
|
28
|
+
"@memberjunction/core": "2.92.0",
|
|
29
|
+
"@memberjunction/core-entities": "2.92.0",
|
|
30
|
+
"@memberjunction/ai-core-plus": "2.92.0",
|
|
31
|
+
"@memberjunction/ng-base-forms": "2.92.0",
|
|
32
|
+
"@memberjunction/ng-deep-diff": "2.92.0",
|
|
33
|
+
"@memberjunction/ng-form-toolbar": "2.92.0",
|
|
34
|
+
"@memberjunction/ng-tabstrip": "2.92.0",
|
|
35
|
+
"@memberjunction/ng-container-directives": "2.92.0",
|
|
36
|
+
"@memberjunction/ng-code-editor": "2.92.0",
|
|
37
|
+
"@memberjunction/ng-timeline": "2.92.0",
|
|
38
|
+
"@memberjunction/ng-join-grid": "2.92.0",
|
|
39
|
+
"@memberjunction/ai-engine-base": "2.92.0",
|
|
40
|
+
"@memberjunction/ng-ai-test-harness": "2.92.0",
|
|
41
|
+
"@memberjunction/ng-action-gallery": "2.92.0",
|
|
42
42
|
"@progress/kendo-angular-grid": "16.2.0",
|
|
43
43
|
"@progress/kendo-angular-dropdowns": "16.2.0",
|
|
44
44
|
"@progress/kendo-angular-dialog": "16.2.0",
|