@memberjunction/ng-core-entity-forms 5.11.0 → 5.12.0

package/dist/lib/custom/ai-agent-run/ai-agent-run.component.js

@@ -1384,7 +1384,7 @@ let MJAIAgentRunFormComponentExtended = class MJAIAgentRunFormComponentExtended
             i0.ɵɵconditional(ctx.activeTab === "analytics" ? 55 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.activeTab === "details" ? 56 : -1);
-        } }, dependencies: [i1.NgClass, i2.NgControlStatus, i2.NgModel, i3.PanelBarComponent, i3.PanelBarItemComponent, i3.PanelBarContentDirective, i3.SplitterComponent, i3.SplitterPaneComponent, i4.CodeEditorComponent, i5.DeepDiffComponent, i6.AIAgentRunTimelineComponent, i7.AIAgentRunAnalyticsComponent, i8.AIAgentRunVisualizationComponent, i9.AIAgentRunStepDetailComponent, i1.DecimalPipe, i1.DatePipe], styles: [".ai-agent-run-form[_ngcontent-%COMP%] {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.record-form-container.ai-agent-run-form[_ngcontent-%COMP%]    > .record-form[_ngcontent-%COMP%], \n.ai-agent-run-form[_ngcontent-%COMP%]    > .record-form[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\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  flex-shrink: 0;\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  overflow: hidden;\n}\n\n.agent-logo[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\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\n\n.conversation-pill[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  background: linear-gradient(135deg, rgba(156, 39, 176, 0.08), rgba(171, 71, 188, 0.08));\n  border: 1px solid rgba(156, 39, 176, 0.2);\n  border-radius: 16px;\n  font-size: 12px;\n  font-weight: 500;\n  color: #9c27b0;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  white-space: nowrap;\n}\n\n.conversation-pill[_ngcontent-%COMP%]:hover {\n  background: linear-gradient(135deg, rgba(156, 39, 176, 0.15), rgba(171, 71, 188, 0.15));\n  border-color: rgba(156, 39, 176, 0.4);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 8px rgba(156, 39, 176, 0.15);\n}\n\n.conversation-pill[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]:first-child {\n  font-size: 11px;\n  opacity: 0.9;\n}\n\n.conversation-pill[_ngcontent-%COMP%]   .pill-action[_ngcontent-%COMP%] {\n  font-size: 9px;\n  opacity: 0.6;\n  transition: opacity 0.2s ease;\n}\n\n.conversation-pill[_ngcontent-%COMP%]:hover   .pill-action[_ngcontent-%COMP%] {\n  opacity: 1;\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  flex-shrink: 0;\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  flex: 1;\n  min-height: 0;\n  overflow: auto;\n  background: white;\n}\n\n.tab-content[_ngcontent-%COMP%] {\n  height: 100%;\n  min-height: 0;\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}"] }); }
+        } }, dependencies: [i1.NgClass, i2.NgControlStatus, i2.NgModel, i3.PanelBarComponent, i3.PanelBarItemComponent, i3.PanelBarContentDirective, i3.SplitterComponent, i3.SplitterPaneComponent, i4.CodeEditorComponent, i5.DeepDiffComponent, i6.AIAgentRunTimelineComponent, i7.AIAgentRunAnalyticsComponent, i8.AIAgentRunVisualizationComponent, i9.AIAgentRunStepDetailComponent, i1.DecimalPipe, i1.DatePipe], styles: [".ai-agent-run-form[_ngcontent-%COMP%] {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.record-form-container.ai-agent-run-form[_ngcontent-%COMP%]    > .record-form[_ngcontent-%COMP%], \n.ai-agent-run-form[_ngcontent-%COMP%]    > .record-form[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n}\n\n\n\n.header[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  padding: 20px;\n  box-shadow: var(--mj-shadow-sm);\n  flex-shrink: 0;\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: var(--mj-brand-primary);\n  border-radius: 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-inverse);\n  font-size: 20px;\n  overflow: hidden;\n}\n\n.agent-logo[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.header-info[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 24px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.meta-info[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 12px;\n  margin-top: 4px;\n  font-size: 14px;\n  color: var(--mj-text-muted);\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: var(--mj-status-error);\n  text-decoration: none;\n  cursor: pointer;\n  transition: color 0.2s;\n}\n\n.parent-link[_ngcontent-%COMP%]:hover {\n  color: var(--mj-status-error);\n  text-decoration: underline;\n}\n\n.agent-name[_ngcontent-%COMP%] {\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n}\n\n.run-id[_ngcontent-%COMP%] {\n  font-family: monospace;\n  font-size: 12px;\n  opacity: 0.7;\n}\n\n\n\n.conversation-pill[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n  border-radius: 16px;\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--mj-brand-primary);\n  cursor: pointer;\n  transition: all 0.2s ease;\n  white-space: nowrap;\n}\n\n.conversation-pill[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.conversation-pill[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]:first-child {\n  font-size: 11px;\n  opacity: 0.9;\n}\n\n.conversation-pill[_ngcontent-%COMP%]   .pill-action[_ngcontent-%COMP%] {\n  font-size: 9px;\n  opacity: 0.6;\n  transition: opacity 0.2s ease;\n}\n\n.conversation-pill[_ngcontent-%COMP%]:hover   .pill-action[_ngcontent-%COMP%] {\n  opacity: 1;\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: color-mix(in srgb, var(--mj-status-info) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-info);\n}\n\n.status-badge[data-status=\"Completed\"][_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n.status-badge[data-status=\"Failed\"][_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n.status-badge[data-status=\"Cancelled\"][_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.status-badge[data-status=\"Paused\"][_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-secondary);\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 var(--mj-border-default);\n  background: var(--mj-bg-surface);\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: var(--mj-text-muted);\n}\n\n.btn-icon[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-color: var(--mj-border-strong);\n  color: var(--mj-text-secondary);\n}\n\n.header-stats[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 24px;\n  padding-top: 12px;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n\n\n.configuration-bar[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 24px;\n  padding-top: 16px;\n  border-top: 1px solid var(--mj-border-default);\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: var(--mj-text-muted);\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: var(--mj-text-muted);\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: var(--mj-text-primary);\n}\n\n.config-value[_ngcontent-%COMP%]   .entity-link[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\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: var(--mj-brand-primary-hover);\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: var(--mj-text-muted);\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: var(--mj-text-secondary);\n}\n\n.stat[_ngcontent-%COMP%]   .value.success[_ngcontent-%COMP%] {\n  color: var(--mj-status-success);\n}\n\n.stat[_ngcontent-%COMP%]   .value.error[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n\n\n\n.tabs[_ngcontent-%COMP%] {\n  display: flex;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-sunken);\n  flex-shrink: 0;\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: var(--mj-text-muted);\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: var(--mj-text-secondary);\n  background: color-mix(in srgb, var(--mj-text-primary) 2%, var(--mj-bg-surface));\n}\n\n.tab.active[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  border-bottom-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface);\n}\n\n\n\n.content-area[_ngcontent-%COMP%] {\n  position: relative;\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n  background: var(--mj-bg-surface);\n}\n\n.tab-content[_ngcontent-%COMP%] {\n  height: 100%;\n  min-height: 0;\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: var(--mj-bg-surface-sunken);\n  border-left: 1px solid var(--mj-border-default);\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: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.json-pane-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\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: var(--mj-text-muted);\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: var(--mj-text-muted);\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: var(--mj-text-primary);\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: var(--mj-brand-primary);\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: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary-hover);\n}\n\n.json-viewer[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-surface);\n  border-radius: 8px;\n  border: 1px solid var(--mj-border-default);\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: var(--mj-bg-surface-sunken);\n  border-bottom: 1px solid var(--mj-border-default);\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: var(--mj-border-default);\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: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  border-color: var(--mj-brand-primary);\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: var(--mj-bg-surface);\n  border: 3px solid var(--mj-border-default);\n  z-index: 1;\n  transition: all 0.2s ease;\n}\n\n.timeline-marker[data-color=\"success\"][_ngcontent-%COMP%] {\n  border-color: var(--mj-status-success);\n  color: var(--mj-status-success);\n}\n\n.timeline-marker[data-color=\"error\"][_ngcontent-%COMP%] {\n  border-color: var(--mj-status-error);\n  color: var(--mj-status-error);\n}\n\n.timeline-marker[data-color=\"info\"][_ngcontent-%COMP%] {\n  border-color: var(--mj-status-info);\n  color: var(--mj-status-info);\n}\n\n.timeline-marker[data-color=\"warning\"][_ngcontent-%COMP%] {\n  border-color: var(--mj-status-warning);\n  color: var(--mj-status-warning);\n}\n\n.timeline-marker[data-color=\"secondary\"][_ngcontent-%COMP%] {\n  border-color: var(--mj-text-muted);\n  color: var(--mj-text-muted);\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: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 12px;\n  padding: 16px 20px;\n  margin-left: 20px;\n  box-shadow: var(--mj-shadow-sm);\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: var(--mj-text-primary);\n}\n\n.timeline-header[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n}\n\n.timeline-time[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  font-family: monospace;\n}\n\n.timeline-subtitle[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  margin-bottom: 8px;\n}\n\n.timeline-meta[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 16px;\n  font-size: 12px;\n  color: var(--mj-text-muted);\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: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n.timeline-meta[_ngcontent-%COMP%]   .status[data-status=\"Failed\"][_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n.timeline-meta[_ngcontent-%COMP%]   .status[data-status=\"Running\"][_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-info) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-info);\n}\n\n.timeline-meta[_ngcontent-%COMP%]   .status[data-status=\"Paused\"][_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-secondary);\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: var(--mj-brand-primary);\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: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.btn-expand[_ngcontent-%COMP%] {\n  width: 24px;\n  height: 24px;\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\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: var(--mj-text-muted);\n  font-size: 12px;\n}\n\n.btn-expand[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-color: var(--mj-border-strong);\n  color: var(--mj-text-secondary);\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: var(--mj-border-default);\n}\n\n.child-item[_ngcontent-%COMP%] {\n  margin-bottom: 12px;\n}\n\n.child-item[_ngcontent-%COMP%]   .timeline-content[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n  border-color: var(--mj-border-default);\n}\n\n\n\n.sub-run-timeline[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 2%, var(--mj-bg-surface));\n  border-left: 2px solid color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\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: var(--mj-bg-surface);\n  border-left: 1px solid var(--mj-border-default);\n}\n\n.json-pane-header[_ngcontent-%COMP%] {\n  padding: 16px 20px;\n  background: var(--mj-bg-surface-sunken);\n  border-bottom: 1px solid var(--mj-border-default);\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: var(--mj-text-primary);\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 var(--mj-border-default);\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: var(--mj-text-muted);\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: var(--mj-text-primary);\n  font-weight: 500;\n}\n\n.action-link[_ngcontent-%COMP%] {\n  padding: 12px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\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: var(--mj-brand-primary);\n  text-decoration: none;\n  font-size: 14px;\n  padding: 8px 12px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\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: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\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: var(--mj-text-muted);\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: var(--mj-text-secondary);\n}\n\n.error-message[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\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: var(--mj-text-muted);\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: var(--mj-brand-primary);\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: var(--mj-brand-primary-hover);\n  border-bottom-color: var(--mj-brand-primary-hover);\n}\n\n.entity-link[_ngcontent-%COMP%]:active {\n  color: var(--mj-brand-primary-hover);\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 var(--mj-border-default);\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: var(--mj-text-muted);\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: var(--mj-text-secondary);\n  background: color-mix(in srgb, var(--mj-text-primary) 2%, var(--mj-bg-surface));\n}\n\n.detail-tab.active[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  border-bottom-color: var(--mj-brand-primary);\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}"] }); }
 };
 MJAIAgentRunFormComponentExtended = __decorate([
     RegisterClass(BaseFormComponent, 'MJ: AI Agent Runs')
@@ -1392,7 +1392,7 @@ MJAIAgentRunFormComponentExtended = __decorate([
 export { MJAIAgentRunFormComponentExtended };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJAIAgentRunFormComponentExtended, [{
         type: Component,
-        args: [{ standalone: false, 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            @if (agent && agent.LogoURL) {\n              <img [src]=\"agent.LogoURL\" [alt]=\"agent.Name || 'Agent'\" class=\"agent-logo\" />\n            }\n            @if (agent && !agent.LogoURL && agent.IconClass) {\n              <i class=\"fas\" [ngClass]=\"agent.IconClass\"></i>\n            }\n            @if (!agent || (!agent.LogoURL && !agent.IconClass)) {\n              <i class=\"fas fa-robot\"></i>\n            }\n          </div>\n          <div class=\"header-info\">\n            <h2>AI Agent Run</h2>\n            <div class=\"meta-info\">\n              @if (agent) {\n                <span class=\"agent-name\">\n                  <a href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('MJ: AI Agents', record.AgentID)\">\n                    {{ agent.Name }}\n                  </a>\n                </span>\n              }\n              <span class=\"run-id\">{{ record.ID }}</span>\n              @if (record.ParentRunID) {\n                <span class=\"parent-run\">\n                  <i class=\"fas fa-level-up-alt\"></i>\n                  <a (click)=\"navigateToParentRun()\" class=\"parent-link\">Parent Run</a>\n                </span>\n              }\n              <!-- Conversation Link Pill -->\n              @if (record.ConversationID) {\n                <span class=\"conversation-pill\" (click)=\"navigateToConversation()\" title=\"Open conversation in Chat app\">\n                  <i class=\"fas fa-comments\"></i>\n                  <span>Conversation</span>\n                  <i class=\"fas fa-external-link-alt pill-action\"></i>\n                </span>\n              }\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        @if (record.CompletedAt) {\n          <div class=\"stat\">\n            <span class=\"label\">Completed</span>\n            <span class=\"value\">{{ record.CompletedAt | date:'medium' }}</span>\n          </div>\n        }\n        @if (record.CompletedAt) {\n          <div class=\"stat\">\n            <span class=\"label\">Duration</span>\n            <span class=\"value\">{{ calculateDuration(record.StartedAt, record.CompletedAt) }}</span>\n          </div>\n        }\n        @if (record.Success !== null && record.CompletedAt !== null) {\n          <div class=\"stat\">\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        }\n        @if (costMetrics && (costMetrics.totalTokensInput + costMetrics.totalTokensOutput) > 0) {\n          <div class=\"stat\">\n            <span class=\"label\">Tokens</span>\n            @if (!costMetrics.isLoading) {\n              <span class=\"value\">{{ (costMetrics.totalTokensInput + costMetrics.totalTokensOutput) | number:'1.0-0' }}</span>\n            }\n            @if (costMetrics.isLoading) {\n              <span class=\"value loading\"><i class=\"fas fa-spinner fa-spin\"></i></span>\n            }\n          </div>\n        }\n        @if (costMetrics && costMetrics.totalCost > 0) {\n          <div class=\"stat\">\n            <span class=\"label\">Cost</span>\n            @if (!costMetrics.isLoading) {\n              <span class=\"value\">${{ costMetrics.totalCost | number:'1.2-4' }}</span>\n            }\n            @if (costMetrics.isLoading) {\n              <span class=\"value loading\"><i class=\"fas fa-spinner fa-spin\"></i></span>\n            }\n          </div>\n        }\n        @if (record.EffortLevel) {\n          <div class=\"stat\">\n            <span class=\"label\">Effort Level</span>\n            <span class=\"value\">{{ record.EffortLevel }}</span>\n          </div>\n        }\n      </div>\n\n      <!-- Configuration Bar (shown below header stats when ConfigurationID exists) -->\n      @if (record.ConfigurationID) {\n        <div class=\"configuration-bar\">\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      }\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      @if (activeTab === 'timeline') {\n        <div class=\"tab-content\" 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            <!-- 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\n      <!-- Visualization Tab -->\n      @if (activeTab === 'visualization') {\n        <div class=\"tab-content\" style=\"height: 100%;\">\n          @if (visualizationLoaded) {\n            <mj-ai-agent-run-visualization\n              #visualizationComponent\n              [aiAgentRunId]=\"record.ID\"\n              [dataHelper]=\"dataHelper\"\n              >\n            </mj-ai-agent-run-visualization>\n          }\n        </div>\n      }\n\n      <!-- Analytics Tab -->\n      @if (activeTab === 'analytics') {\n        <div class=\"tab-content\" style=\"height: 100%;\">\n          @if (analyticsLoaded) {\n            <mj-ai-agent-run-analytics\n              #analyticsComponent\n              [agentRunId]=\"record.ID\"\n              >\n            </mj-ai-agent-run-analytics>\n          }\n        </div>\n      }\n\n      <!-- Details Tab -->\n      @if (activeTab === 'details') {\n        <div class=\"tab-content\">\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('MJ: 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                      @if (record.ParentRunID) {\n                        <a href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('MJ: AI Agent Runs', record.ParentRunID)\">\n                          {{ record.ParentRunID }}\n                        </a>\n                      }\n                      @if (!record.ParentRunID) {\n                        <span>None (Root)</span>\n                      }\n                    </span>\n                  </div>\n                  <div class=\"detail-item\">\n                    <label>Last Run ID</label>\n                    <span>\n                      @if (record.LastRunID) {\n                        <a href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('MJ: AI Agent Runs', record.LastRunID)\">\n                          {{ record.LastRunID }}\n                        </a>\n                      }\n                      @if (!record.LastRunID) {\n                        <span>None</span>\n                      }\n                    </span>\n                  </div>\n                  <div class=\"detail-item\">\n                    <label>Conversation ID</label>\n                    <span>\n                      @if (record.ConversationID) {\n                        <a href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('MJ: Conversations', record.ConversationID)\">\n                          {{ record.ConversationID }}\n                        </a>\n                      }\n                      @if (!record.ConversationID) {\n                        <span>N/A</span>\n                      }\n                    </span>\n                  </div>\n                  <div class=\"detail-item\">\n                    <label>User</label>\n                    <span>\n                      @if (record.UserID) {\n                        <a href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('MJ: Users', record.UserID)\">\n                          {{ record.User || 'N/A' }}\n                        </a>\n                      }\n                      @if (!record.UserID) {\n                        <span>N/A</span>\n                      }\n                    </span>\n                  </div>\n                </div>\n              </ng-template>\n            </kendo-panelbar-item>\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                      @if (record.OverrideModelID) {\n                        <a href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('MJ: AI Models', record.OverrideModelID)\">\n                          {{ record.OverrideModel || 'N/A' }}\n                        </a>\n                      }\n                      @if (!record.OverrideModelID) {\n                        <span>N/A</span>\n                      }\n                    </span>\n                  </div>\n                  <div class=\"detail-item\">\n                    <label>Override Vendor</label>\n                    <span>\n                      @if (record.OverrideVendorID) {\n                        <a href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('MJ: AI Vendors', record.OverrideVendorID)\">\n                          {{ record.OverrideVendor || 'N/A' }}\n                        </a>\n                      }\n                      @if (!record.OverrideVendorID) {\n                        <span>N/A</span>\n                      }\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            <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                    @if (record.Success === null) {\n                      <span>In Progress</span>\n                    }\n                    @else if (record.Success) {\n                    <span class=\"success\">Yes</span>\n                  }\n                  @else {\n                  <span class=\"error-message\">No</span>\n                }\n              </div>\n              @if (record.Message) {\n                <div class=\"detail-item full-width\">\n                  <label>Message</label>\n                  <div class=\"message\">{{ record.Message }}</div>\n                </div>\n              }\n              @if (record.ErrorMessage) {\n                <div class=\"detail-item full-width\">\n                  <label>Error Message</label>\n                  <div class=\"error-message\">{{ record.ErrorMessage }}</div>\n                </div>\n              }\n            </div>\n          </ng-template>\n        </kendo-panelbar-item>\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        @if (record.Result) {\n          <kendo-panelbar-item title=\"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        @if (record.StartingPayload) {\n          <kendo-panelbar-item title=\"Starting Payload\">\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        @if (record.Data) {\n          <kendo-panelbar-item title=\"Execution 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        @if (record.FinalPayload) {\n          <kendo-panelbar-item title=\"Final Payload\">\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        @if (showPayloadDiff) {\n          <kendo-panelbar-item title=\"Payload Diff\">\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        }\n      </kendo-panelbar>\n    </div>\n  }\n</div>\n</div>\n</div>", styles: [".ai-agent-run-form {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.record-form-container.ai-agent-run-form > .record-form,\n.ai-agent-run-form > .record-form {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\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  flex-shrink: 0;\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  overflow: hidden;\n}\n\n.agent-logo {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\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/* Conversation Link Pill */\n.conversation-pill {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  background: linear-gradient(135deg, rgba(156, 39, 176, 0.08), rgba(171, 71, 188, 0.08));\n  border: 1px solid rgba(156, 39, 176, 0.2);\n  border-radius: 16px;\n  font-size: 12px;\n  font-weight: 500;\n  color: #9c27b0;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  white-space: nowrap;\n}\n\n.conversation-pill:hover {\n  background: linear-gradient(135deg, rgba(156, 39, 176, 0.15), rgba(171, 71, 188, 0.15));\n  border-color: rgba(156, 39, 176, 0.4);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 8px rgba(156, 39, 176, 0.15);\n}\n\n.conversation-pill i:first-child {\n  font-size: 11px;\n  opacity: 0.9;\n}\n\n.conversation-pill .pill-action {\n  font-size: 9px;\n  opacity: 0.6;\n  transition: opacity 0.2s ease;\n}\n\n.conversation-pill:hover .pill-action {\n  opacity: 1;\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  flex-shrink: 0;\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  flex: 1;\n  min-height: 0;\n  overflow: auto;\n  background: white;\n}\n\n.tab-content {\n  height: 100%;\n  min-height: 0;\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}"] }]
+        args: [{ standalone: false, 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            @if (agent && agent.LogoURL) {\n              <img [src]=\"agent.LogoURL\" [alt]=\"agent.Name || 'Agent'\" class=\"agent-logo\" />\n            }\n            @if (agent && !agent.LogoURL && agent.IconClass) {\n              <i class=\"fas\" [ngClass]=\"agent.IconClass\"></i>\n            }\n            @if (!agent || (!agent.LogoURL && !agent.IconClass)) {\n              <i class=\"fas fa-robot\"></i>\n            }\n          </div>\n          <div class=\"header-info\">\n            <h2>AI Agent Run</h2>\n            <div class=\"meta-info\">\n              @if (agent) {\n                <span class=\"agent-name\">\n                  <a href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('MJ: AI Agents', record.AgentID)\">\n                    {{ agent.Name }}\n                  </a>\n                </span>\n              }\n              <span class=\"run-id\">{{ record.ID }}</span>\n              @if (record.ParentRunID) {\n                <span class=\"parent-run\">\n                  <i class=\"fas fa-level-up-alt\"></i>\n                  <a (click)=\"navigateToParentRun()\" class=\"parent-link\">Parent Run</a>\n                </span>\n              }\n              <!-- Conversation Link Pill -->\n              @if (record.ConversationID) {\n                <span class=\"conversation-pill\" (click)=\"navigateToConversation()\" title=\"Open conversation in Chat app\">\n                  <i class=\"fas fa-comments\"></i>\n                  <span>Conversation</span>\n                  <i class=\"fas fa-external-link-alt pill-action\"></i>\n                </span>\n              }\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        @if (record.CompletedAt) {\n          <div class=\"stat\">\n            <span class=\"label\">Completed</span>\n            <span class=\"value\">{{ record.CompletedAt | date:'medium' }}</span>\n          </div>\n        }\n        @if (record.CompletedAt) {\n          <div class=\"stat\">\n            <span class=\"label\">Duration</span>\n            <span class=\"value\">{{ calculateDuration(record.StartedAt, record.CompletedAt) }}</span>\n          </div>\n        }\n        @if (record.Success !== null && record.CompletedAt !== null) {\n          <div class=\"stat\">\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        }\n        @if (costMetrics && (costMetrics.totalTokensInput + costMetrics.totalTokensOutput) > 0) {\n          <div class=\"stat\">\n            <span class=\"label\">Tokens</span>\n            @if (!costMetrics.isLoading) {\n              <span class=\"value\">{{ (costMetrics.totalTokensInput + costMetrics.totalTokensOutput) | number:'1.0-0' }}</span>\n            }\n            @if (costMetrics.isLoading) {\n              <span class=\"value loading\"><i class=\"fas fa-spinner fa-spin\"></i></span>\n            }\n          </div>\n        }\n        @if (costMetrics && costMetrics.totalCost > 0) {\n          <div class=\"stat\">\n            <span class=\"label\">Cost</span>\n            @if (!costMetrics.isLoading) {\n              <span class=\"value\">${{ costMetrics.totalCost | number:'1.2-4' }}</span>\n            }\n            @if (costMetrics.isLoading) {\n              <span class=\"value loading\"><i class=\"fas fa-spinner fa-spin\"></i></span>\n            }\n          </div>\n        }\n        @if (record.EffortLevel) {\n          <div class=\"stat\">\n            <span class=\"label\">Effort Level</span>\n            <span class=\"value\">{{ record.EffortLevel }}</span>\n          </div>\n        }\n      </div>\n\n      <!-- Configuration Bar (shown below header stats when ConfigurationID exists) -->\n      @if (record.ConfigurationID) {\n        <div class=\"configuration-bar\">\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      }\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      @if (activeTab === 'timeline') {\n        <div class=\"tab-content\" 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            <!-- 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\n      <!-- Visualization Tab -->\n      @if (activeTab === 'visualization') {\n        <div class=\"tab-content\" style=\"height: 100%;\">\n          @if (visualizationLoaded) {\n            <mj-ai-agent-run-visualization\n              #visualizationComponent\n              [aiAgentRunId]=\"record.ID\"\n              [dataHelper]=\"dataHelper\"\n              >\n            </mj-ai-agent-run-visualization>\n          }\n        </div>\n      }\n\n      <!-- Analytics Tab -->\n      @if (activeTab === 'analytics') {\n        <div class=\"tab-content\" style=\"height: 100%;\">\n          @if (analyticsLoaded) {\n            <mj-ai-agent-run-analytics\n              #analyticsComponent\n              [agentRunId]=\"record.ID\"\n              >\n            </mj-ai-agent-run-analytics>\n          }\n        </div>\n      }\n\n      <!-- Details Tab -->\n      @if (activeTab === 'details') {\n        <div class=\"tab-content\">\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('MJ: 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                      @if (record.ParentRunID) {\n                        <a href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('MJ: AI Agent Runs', record.ParentRunID)\">\n                          {{ record.ParentRunID }}\n                        </a>\n                      }\n                      @if (!record.ParentRunID) {\n                        <span>None (Root)</span>\n                      }\n                    </span>\n                  </div>\n                  <div class=\"detail-item\">\n                    <label>Last Run ID</label>\n                    <span>\n                      @if (record.LastRunID) {\n                        <a href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('MJ: AI Agent Runs', record.LastRunID)\">\n                          {{ record.LastRunID }}\n                        </a>\n                      }\n                      @if (!record.LastRunID) {\n                        <span>None</span>\n                      }\n                    </span>\n                  </div>\n                  <div class=\"detail-item\">\n                    <label>Conversation ID</label>\n                    <span>\n                      @if (record.ConversationID) {\n                        <a href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('MJ: Conversations', record.ConversationID)\">\n                          {{ record.ConversationID }}\n                        </a>\n                      }\n                      @if (!record.ConversationID) {\n                        <span>N/A</span>\n                      }\n                    </span>\n                  </div>\n                  <div class=\"detail-item\">\n                    <label>User</label>\n                    <span>\n                      @if (record.UserID) {\n                        <a href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('MJ: Users', record.UserID)\">\n                          {{ record.User || 'N/A' }}\n                        </a>\n                      }\n                      @if (!record.UserID) {\n                        <span>N/A</span>\n                      }\n                    </span>\n                  </div>\n                </div>\n              </ng-template>\n            </kendo-panelbar-item>\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                      @if (record.OverrideModelID) {\n                        <a href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('MJ: AI Models', record.OverrideModelID)\">\n                          {{ record.OverrideModel || 'N/A' }}\n                        </a>\n                      }\n                      @if (!record.OverrideModelID) {\n                        <span>N/A</span>\n                      }\n                    </span>\n                  </div>\n                  <div class=\"detail-item\">\n                    <label>Override Vendor</label>\n                    <span>\n                      @if (record.OverrideVendorID) {\n                        <a href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('MJ: AI Vendors', record.OverrideVendorID)\">\n                          {{ record.OverrideVendor || 'N/A' }}\n                        </a>\n                      }\n                      @if (!record.OverrideVendorID) {\n                        <span>N/A</span>\n                      }\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            <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                    @if (record.Success === null) {\n                      <span>In Progress</span>\n                    }\n                    @else if (record.Success) {\n                    <span class=\"success\">Yes</span>\n                  }\n                  @else {\n                  <span class=\"error-message\">No</span>\n                }\n              </div>\n              @if (record.Message) {\n                <div class=\"detail-item full-width\">\n                  <label>Message</label>\n                  <div class=\"message\">{{ record.Message }}</div>\n                </div>\n              }\n              @if (record.ErrorMessage) {\n                <div class=\"detail-item full-width\">\n                  <label>Error Message</label>\n                  <div class=\"error-message\">{{ record.ErrorMessage }}</div>\n                </div>\n              }\n            </div>\n          </ng-template>\n        </kendo-panelbar-item>\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        @if (record.Result) {\n          <kendo-panelbar-item title=\"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        @if (record.StartingPayload) {\n          <kendo-panelbar-item title=\"Starting Payload\">\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        @if (record.Data) {\n          <kendo-panelbar-item title=\"Execution 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        @if (record.FinalPayload) {\n          <kendo-panelbar-item title=\"Final Payload\">\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        @if (showPayloadDiff) {\n          <kendo-panelbar-item title=\"Payload Diff\">\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        }\n      </kendo-panelbar>\n    </div>\n  }\n</div>\n</div>\n</div>", styles: [".ai-agent-run-form {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.record-form-container.ai-agent-run-form > .record-form,\n.ai-agent-run-form > .record-form {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n}\n\n/* Header Styles */\n.header {\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  padding: 20px;\n  box-shadow: var(--mj-shadow-sm);\n  flex-shrink: 0;\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: var(--mj-brand-primary);\n  border-radius: 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-inverse);\n  font-size: 20px;\n  overflow: hidden;\n}\n\n.agent-logo {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.header-info h2 {\n  margin: 0;\n  font-size: 24px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.meta-info {\n  display: flex;\n  gap: 12px;\n  margin-top: 4px;\n  font-size: 14px;\n  color: var(--mj-text-muted);\n}\n\n.parent-run {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.parent-link {\n  color: var(--mj-status-error);\n  text-decoration: none;\n  cursor: pointer;\n  transition: color 0.2s;\n}\n\n.parent-link:hover {\n  color: var(--mj-status-error);\n  text-decoration: underline;\n}\n\n.agent-name {\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n}\n\n.run-id {\n  font-family: monospace;\n  font-size: 12px;\n  opacity: 0.7;\n}\n\n/* Conversation Link Pill */\n.conversation-pill {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n  border-radius: 16px;\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--mj-brand-primary);\n  cursor: pointer;\n  transition: all 0.2s ease;\n  white-space: nowrap;\n}\n\n.conversation-pill:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.conversation-pill i:first-child {\n  font-size: 11px;\n  opacity: 0.9;\n}\n\n.conversation-pill .pill-action {\n  font-size: 9px;\n  opacity: 0.6;\n  transition: opacity 0.2s ease;\n}\n\n.conversation-pill:hover .pill-action {\n  opacity: 1;\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: color-mix(in srgb, var(--mj-status-info) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-info);\n}\n\n.status-badge[data-status=\"Completed\"] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n.status-badge[data-status=\"Failed\"] {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n.status-badge[data-status=\"Cancelled\"] {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.status-badge[data-status=\"Paused\"] {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-secondary);\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 var(--mj-border-default);\n  background: var(--mj-bg-surface);\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: var(--mj-text-muted);\n}\n\n.btn-icon:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-color: var(--mj-border-strong);\n  color: var(--mj-text-secondary);\n}\n\n.header-stats {\n  display: flex;\n  gap: 24px;\n  padding-top: 12px;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n/* Configuration Bar */\n.configuration-bar {\n  display: flex;\n  gap: 24px;\n  padding-top: 16px;\n  border-top: 1px solid var(--mj-border-default);\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: var(--mj-text-muted);\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: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.config-value {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.config-value .entity-link {\n  color: var(--mj-brand-primary);\n  text-decoration: none;\n  cursor: pointer;\n  transition: color 0.2s;\n}\n\n.config-value .entity-link:hover {\n  color: var(--mj-brand-primary-hover);\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: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.stat .value {\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n}\n\n.stat .value.success {\n  color: var(--mj-status-success);\n}\n\n.stat .value.error {\n  color: var(--mj-status-error);\n}\n\n/* Tabs */\n.tabs {\n  display: flex;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-sunken);\n  flex-shrink: 0;\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: var(--mj-text-muted);\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: var(--mj-text-secondary);\n  background: color-mix(in srgb, var(--mj-text-primary) 2%, var(--mj-bg-surface));\n}\n\n.tab.active {\n  color: var(--mj-brand-primary);\n  border-bottom-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface);\n}\n\n/* Content Area */\n.content-area {\n  position: relative;\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n  background: var(--mj-bg-surface);\n}\n\n.tab-content {\n  height: 100%;\n  min-height: 0;\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: var(--mj-bg-surface-sunken);\n  border-left: 1px solid var(--mj-border-default);\n}\n\n.json-pane-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px 20px;\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.json-pane-header h3 {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.json-pane-header h3 i {\n  color: var(--mj-text-muted);\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: var(--mj-text-muted);\n  font-weight: 600;\n  letter-spacing: 0.5px;\n}\n\n.json-meta .meta-item span {\n  font-size: 14px;\n  color: var(--mj-text-primary);\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: var(--mj-brand-primary);\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: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary-hover);\n}\n\n.json-viewer {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-surface);\n  border-radius: 8px;\n  border: 1px solid var(--mj-border-default);\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: var(--mj-bg-surface-sunken);\n  border-bottom: 1px solid var(--mj-border-default);\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: var(--mj-border-default);\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: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  border-color: var(--mj-brand-primary);\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: var(--mj-bg-surface);\n  border: 3px solid var(--mj-border-default);\n  z-index: 1;\n  transition: all 0.2s ease;\n}\n\n.timeline-marker[data-color=\"success\"] {\n  border-color: var(--mj-status-success);\n  color: var(--mj-status-success);\n}\n\n.timeline-marker[data-color=\"error\"] {\n  border-color: var(--mj-status-error);\n  color: var(--mj-status-error);\n}\n\n.timeline-marker[data-color=\"info\"] {\n  border-color: var(--mj-status-info);\n  color: var(--mj-status-info);\n}\n\n.timeline-marker[data-color=\"warning\"] {\n  border-color: var(--mj-status-warning);\n  color: var(--mj-status-warning);\n}\n\n.timeline-marker[data-color=\"secondary\"] {\n  border-color: var(--mj-text-muted);\n  color: var(--mj-text-muted);\n}\n\n.timeline-marker.small {\n  width: 28px;\n  height: 28px;\n  font-size: 12px;\n}\n\n.timeline-content {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 12px;\n  padding: 16px 20px;\n  margin-left: 20px;\n  box-shadow: var(--mj-shadow-sm);\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: var(--mj-text-primary);\n}\n\n.timeline-header h5 {\n  margin: 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n}\n\n.timeline-time {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  font-family: monospace;\n}\n\n.timeline-subtitle {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  margin-bottom: 8px;\n}\n\n.timeline-meta {\n  display: flex;\n  gap: 16px;\n  font-size: 12px;\n  color: var(--mj-text-muted);\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: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n.timeline-meta .status[data-status=\"Failed\"] {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n.timeline-meta .status[data-status=\"Running\"] {\n  background: color-mix(in srgb, var(--mj-status-info) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-info);\n}\n\n.timeline-meta .status[data-status=\"Paused\"] {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-secondary);\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: var(--mj-brand-primary);\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: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.btn-expand {\n  width: 24px;\n  height: 24px;\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\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: var(--mj-text-muted);\n  font-size: 12px;\n}\n\n.btn-expand:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-color: var(--mj-border-strong);\n  color: var(--mj-text-secondary);\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: var(--mj-border-default);\n}\n\n.child-item {\n  margin-bottom: 12px;\n}\n\n.child-item .timeline-content {\n  background: var(--mj-bg-surface-sunken);\n  border-color: var(--mj-border-default);\n}\n\n/* Sub-run timeline styles */\n.sub-run-timeline {\n  background: color-mix(in srgb, var(--mj-brand-primary) 2%, var(--mj-bg-surface));\n  border-left: 2px solid color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\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: var(--mj-bg-surface);\n  border-left: 1px solid var(--mj-border-default);\n}\n\n.json-pane-header {\n  padding: 16px 20px;\n  background: var(--mj-bg-surface-sunken);\n  border-bottom: 1px solid var(--mj-border-default);\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: var(--mj-text-primary);\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 var(--mj-border-default);\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: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.json-meta span {\n  font-size: 14px;\n  color: var(--mj-text-primary);\n  font-weight: 500;\n}\n\n.action-link {\n  padding: 12px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.action-link .btn-link {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  color: var(--mj-brand-primary);\n  text-decoration: none;\n  font-size: 14px;\n  padding: 8px 12px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n  border-radius: 4px;\n  transition: all 0.2s;\n  cursor: pointer;\n}\n\n.action-link .btn-link:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\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: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.detail-item span {\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n}\n\n.error-message {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\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: var(--mj-text-muted);\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: var(--mj-brand-primary);\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: var(--mj-brand-primary-hover);\n  border-bottom-color: var(--mj-brand-primary-hover);\n}\n\n.entity-link:active {\n  color: var(--mj-brand-primary-hover);\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 var(--mj-border-default);\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: var(--mj-text-muted);\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: var(--mj-text-secondary);\n  background: color-mix(in srgb, var(--mj-text-primary) 2%, var(--mj-bg-surface));\n}\n\n.detail-tab.active {\n  color: var(--mj-brand-primary);\n  border-bottom-color: var(--mj-brand-primary);\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}"] }]
     }], null, { timelineComponent: [{
             type: ViewChild,
             args: [AIAgentRunTimelineComponent]

package/dist/lib/custom/custom-forms.module.d.ts

@@ -65,9 +65,10 @@ import * as i63 from "@memberjunction/ng-actions";
 import * as i64 from "@memberjunction/ng-agents";
 import * as i65 from "@memberjunction/ng-entity-viewer";
 import * as i66 from "@memberjunction/ng-markdown";
+import * as i67 from "@memberjunction/ng-trees";
 export declare class MemberJunctionCoreEntityFormsModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MemberJunctionCoreEntityFormsModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MemberJunctionCoreEntityFormsModule, [typeof i1.MJEntityFormComponentExtended, typeof i2.MJEntityActionFormComponentExtended, typeof i3.MJTemplateFormComponentExtended, typeof i4.TemplateParamDialogComponent, typeof i5.TemplateParamsGridComponent, typeof i6.TemplateEditorComponent, typeof i7.MJAIPromptFormComponentExtended, typeof i8.MJAIAgentFormComponentExtended, typeof i9.NewAgentDialogComponent, typeof i10.AddActionDialogComponent, typeof i11.PromptSelectorDialogComponent, typeof i12.AgentPromptAdvancedSettingsDialogComponent, typeof i13.SubAgentAdvancedSettingsDialogComponent, typeof i14.SubAgentSelectorDialogComponent, typeof i15.CreatePromptDialogComponent, typeof i16.CreateSubAgentDialogComponent, typeof i17.EntitySelectorDialogComponent, typeof i18.MJAIPromptRunFormComponentExtended, typeof i19.ChatMessageViewerComponent, typeof i20.MJActionFormComponentExtended, typeof i21.MJActionExecutionLogFormComponentExtended, typeof i22.MJAIAgentRunFormComponentExtended, typeof i23.AIAgentRunTimelineComponent, typeof i24.AIAgentRunStepNodeComponent, typeof i25.AIAgentRunAnalyticsComponent, typeof i26.AIAgentRunVisualizationComponent, typeof i27.AIAgentRunStepDetailComponent, typeof i28.MJQueryFormComponentExtended, typeof i29.QueryRunDialogComponent, typeof i30.QueryCategoryDialogComponent, typeof i31.FlowAgentFormSectionComponent, typeof i32.MJTestRunFormComponentExtended, typeof i33.MJTestFormComponentExtended, typeof i34.MJTestSuiteRunFormComponentExtended, typeof i35.MJTestSuiteFormComponentExtended, typeof i36.MJTestRunFeedbackFormComponentExtended, typeof i37.MJTestRubricFormComponentExtended, typeof i38.EntityLinkPillComponent, typeof i39.MJListFormComponentExtended], [typeof i40.CommonModule, typeof i41.FormsModule, typeof i41.ReactiveFormsModule, typeof i42.LayoutModule, typeof i42.ExpansionPanelModule, typeof i42.TabStripModule, typeof i42.SplitterModule, typeof i42.PanelBarModule, typeof i43.DialogsModule, typeof i43.WindowModule, typeof i44.GridModule, typeof i45.InputsModule, typeof i45.TextBoxModule, typeof i45.TextAreaModule, typeof i45.NumericTextBoxModule, typeof i45.SwitchModule, typeof i46.DropDownsModule, typeof i46.ComboBoxModule, typeof i46.DropDownTreesModule, typeof i46.DropDownListModule, typeof i47.ButtonsModule, typeof i47.ButtonModule, typeof i47.SplitButtonModule, typeof i48.DateInputsModule, typeof i49.LinkDirectivesModule, typeof i50.JoinGridModule, typeof i51.BaseFormsModule, typeof i52.MJTabStripModule, typeof i53.CodeEditorModule, typeof i54.DeepDiffModule, typeof i55.TreeViewModule, typeof i45.CheckBoxModule, typeof i56.AITestHarnessModule, typeof i57.ActionGalleryModule, typeof i58.TestingModule, typeof i59.FlowEditorModule, typeof i60.SharedGenericModule, typeof i61.EntityRelationshipDiagramModule, typeof i62.ListManagementModule, typeof i63.ActionsModule, typeof i64.AgentsModule, typeof i65.EntityViewerModule, typeof i66.MarkdownModule], [typeof i1.MJEntityFormComponentExtended, typeof i2.MJEntityActionFormComponentExtended, typeof i3.MJTemplateFormComponentExtended, typeof i6.TemplateEditorComponent, typeof i7.MJAIPromptFormComponentExtended, typeof i8.MJAIAgentFormComponentExtended, typeof i18.MJAIPromptRunFormComponentExtended, typeof i19.ChatMessageViewerComponent, typeof i20.MJActionFormComponentExtended, typeof i21.MJActionExecutionLogFormComponentExtended, typeof i22.MJAIAgentRunFormComponentExtended, typeof i23.AIAgentRunTimelineComponent, typeof i24.AIAgentRunStepNodeComponent, typeof i25.AIAgentRunAnalyticsComponent, typeof i28.MJQueryFormComponentExtended, typeof i31.FlowAgentFormSectionComponent, typeof i32.MJTestRunFormComponentExtended, typeof i33.MJTestFormComponentExtended, typeof i34.MJTestSuiteRunFormComponentExtended, typeof i35.MJTestSuiteFormComponentExtended, typeof i36.MJTestRunFeedbackFormComponentExtended, typeof i37.MJTestRubricFormComponentExtended, typeof i38.EntityLinkPillComponent, typeof i39.MJListFormComponentExtended, typeof i63.ActionsModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MemberJunctionCoreEntityFormsModule, [typeof i1.MJEntityFormComponentExtended, typeof i2.MJEntityActionFormComponentExtended, typeof i3.MJTemplateFormComponentExtended, typeof i4.TemplateParamDialogComponent, typeof i5.TemplateParamsGridComponent, typeof i6.TemplateEditorComponent, typeof i7.MJAIPromptFormComponentExtended, typeof i8.MJAIAgentFormComponentExtended, typeof i9.NewAgentDialogComponent, typeof i10.AddActionDialogComponent, typeof i11.PromptSelectorDialogComponent, typeof i12.AgentPromptAdvancedSettingsDialogComponent, typeof i13.SubAgentAdvancedSettingsDialogComponent, typeof i14.SubAgentSelectorDialogComponent, typeof i15.CreatePromptDialogComponent, typeof i16.CreateSubAgentDialogComponent, typeof i17.EntitySelectorDialogComponent, typeof i18.MJAIPromptRunFormComponentExtended, typeof i19.ChatMessageViewerComponent, typeof i20.MJActionFormComponentExtended, typeof i21.MJActionExecutionLogFormComponentExtended, typeof i22.MJAIAgentRunFormComponentExtended, typeof i23.AIAgentRunTimelineComponent, typeof i24.AIAgentRunStepNodeComponent, typeof i25.AIAgentRunAnalyticsComponent, typeof i26.AIAgentRunVisualizationComponent, typeof i27.AIAgentRunStepDetailComponent, typeof i28.MJQueryFormComponentExtended, typeof i29.QueryRunDialogComponent, typeof i30.QueryCategoryDialogComponent, typeof i31.FlowAgentFormSectionComponent, typeof i32.MJTestRunFormComponentExtended, typeof i33.MJTestFormComponentExtended, typeof i34.MJTestSuiteRunFormComponentExtended, typeof i35.MJTestSuiteFormComponentExtended, typeof i36.MJTestRunFeedbackFormComponentExtended, typeof i37.MJTestRubricFormComponentExtended, typeof i38.EntityLinkPillComponent, typeof i39.MJListFormComponentExtended], [typeof i40.CommonModule, typeof i41.FormsModule, typeof i41.ReactiveFormsModule, typeof i42.LayoutModule, typeof i42.ExpansionPanelModule, typeof i42.TabStripModule, typeof i42.SplitterModule, typeof i42.PanelBarModule, typeof i43.DialogsModule, typeof i43.WindowModule, typeof i44.GridModule, typeof i45.InputsModule, typeof i45.TextBoxModule, typeof i45.TextAreaModule, typeof i45.NumericTextBoxModule, typeof i45.SwitchModule, typeof i46.DropDownsModule, typeof i46.ComboBoxModule, typeof i46.DropDownTreesModule, typeof i46.DropDownListModule, typeof i47.ButtonsModule, typeof i47.ButtonModule, typeof i47.SplitButtonModule, typeof i48.DateInputsModule, typeof i49.LinkDirectivesModule, typeof i50.JoinGridModule, typeof i51.BaseFormsModule, typeof i52.MJTabStripModule, typeof i53.CodeEditorModule, typeof i54.DeepDiffModule, typeof i55.TreeViewModule, typeof i45.CheckBoxModule, typeof i56.AITestHarnessModule, typeof i57.ActionGalleryModule, typeof i58.TestingModule, typeof i59.FlowEditorModule, typeof i60.SharedGenericModule, typeof i61.EntityRelationshipDiagramModule, typeof i62.ListManagementModule, typeof i63.ActionsModule, typeof i64.AgentsModule, typeof i65.EntityViewerModule, typeof i66.MarkdownModule, typeof i67.NgTreesModule], [typeof i1.MJEntityFormComponentExtended, typeof i2.MJEntityActionFormComponentExtended, typeof i3.MJTemplateFormComponentExtended, typeof i6.TemplateEditorComponent, typeof i7.MJAIPromptFormComponentExtended, typeof i8.MJAIAgentFormComponentExtended, typeof i18.MJAIPromptRunFormComponentExtended, typeof i19.ChatMessageViewerComponent, typeof i20.MJActionFormComponentExtended, typeof i21.MJActionExecutionLogFormComponentExtended, typeof i22.MJAIAgentRunFormComponentExtended, typeof i23.AIAgentRunTimelineComponent, typeof i24.AIAgentRunStepNodeComponent, typeof i25.AIAgentRunAnalyticsComponent, typeof i28.MJQueryFormComponentExtended, typeof i31.FlowAgentFormSectionComponent, typeof i32.MJTestRunFormComponentExtended, typeof i33.MJTestFormComponentExtended, typeof i34.MJTestSuiteRunFormComponentExtended, typeof i35.MJTestSuiteFormComponentExtended, typeof i36.MJTestRunFeedbackFormComponentExtended, typeof i37.MJTestRubricFormComponentExtended, typeof i38.EntityLinkPillComponent, typeof i39.MJListFormComponentExtended, typeof i63.ActionsModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<MemberJunctionCoreEntityFormsModule>;
 }
 //# sourceMappingURL=custom-forms.module.d.ts.map

package/dist/lib/custom/custom-forms.module.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"custom-forms.module.d.ts","sourceRoot":"","sources":["../../../src/lib/custom/custom-forms.module.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsEA,qBAuHa,mCAAmC;yCAAnC,mCAAmC;0CAAnC,mCAAmC;0CAAnC,mCAAmC;CAAI"}
+{"version":3,"file":"custom-forms.module.d.ts","sourceRoot":"","sources":["../../../src/lib/custom/custom-forms.module.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuEA,qBAwHa,mCAAmC;yCAAnC,mCAAmC;0CAAnC,mCAAmC;0CAAnC,mCAAmC;CAAI"}

package/dist/lib/custom/custom-forms.module.js

@@ -59,6 +59,7 @@ import { QueryCategoryDialogComponent } from "./Queries/query-category-dialog.co
 import { FlowAgentFormSectionComponent } from "./AIAgents/FlowAgentType/flow-agent-form-section.component";
 import { FlowEditorModule } from "@memberjunction/ng-flow-editor";
 import { MarkdownModule } from "@memberjunction/ng-markdown";
+import { NgTreesModule } from "@memberjunction/ng-trees";
 import { MJTestRunFormComponentExtended } from "./Tests/test-run-form.component";
 import { MJTestFormComponentExtended } from "./Tests/test-form.component";
 import { MJTestSuiteRunFormComponentExtended } from "./Tests/test-suite-run-form.component";
@@ -117,7 +118,8 @@ export class MemberJunctionCoreEntityFormsModule {
             ActionsModule,
             AgentsModule,
             EntityViewerModule,
-            MarkdownModule, ActionsModule] }); }
+            MarkdownModule,
+            NgTreesModule, ActionsModule] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MemberJunctionCoreEntityFormsModule, [{
         type: NgModule,
@@ -206,7 +208,8 @@ export class MemberJunctionCoreEntityFormsModule {
                     ActionsModule,
                     AgentsModule,
                     EntityViewerModule,
-                    MarkdownModule
+                    MarkdownModule,
+                    NgTreesModule
                 ],
                 exports: [
                     MJEntityFormComponentExtended,
@@ -321,7 +324,8 @@ export class MemberJunctionCoreEntityFormsModule {
         ActionsModule,
         AgentsModule,
         EntityViewerModule,
-        MarkdownModule], exports: [MJEntityFormComponentExtended,
+        MarkdownModule,
+        NgTreesModule], exports: [MJEntityFormComponentExtended,
         MJEntityActionFormComponentExtended,
         MJTemplateFormComponentExtended,
         TemplateEditorComponent,

package/dist/lib/custom/custom-forms.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"custom-forms.module.js","sourceRoot":"","sources":["../../../src/lib/custom/custom-forms.module.ts"],"names":[],"mappings":"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","sourcesContent":["import { NgModule } from \"@angular/core\";\nimport { CommonModule } from '@angular/common';\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { InputsModule, TextBoxModule, TextAreaModule, NumericTextBoxModule, SwitchModule, CheckBoxModule } from '@progress/kendo-angular-inputs';\nimport { DateInputsModule } from '@progress/kendo-angular-dateinputs';\nimport { ButtonsModule, ButtonModule, SplitButtonModule } from '@progress/kendo-angular-buttons';\nimport { DropDownsModule, ComboBoxModule, DropDownTreesModule, DropDownListModule } from '@progress/kendo-angular-dropdowns';\nimport { LayoutModule, ExpansionPanelModule, TabStripModule, SplitterModule, PanelBarModule } from '@progress/kendo-angular-layout';\nimport { DialogsModule, WindowModule } from '@progress/kendo-angular-dialog';\nimport { GridModule } from '@progress/kendo-angular-grid';\nimport { BaseFormsModule } from '@memberjunction/ng-base-forms';\nimport { LinkDirectivesModule } from '@memberjunction/ng-link-directives';\nimport { SharedGenericModule } from '@memberjunction/ng-shared-generic';\nimport { EntityViewerModule } from '@memberjunction/ng-entity-viewer';\nimport { MJEntityFormComponentExtended } from \"./Entities/entity-form.component\";\nimport { MJTabStripModule } from \"@memberjunction/ng-tabstrip\";\nimport { MJEntityActionFormComponentExtended } from \"./EntityActions/entityaction.form.component\";\nimport { MJTemplateFormComponentExtended } from \"./Templates/templates-form.component\";\nimport { TemplateParamDialogComponent } from \"./Templates/template-param-dialog.component\";\nimport { TemplateParamsGridComponent } from \"./Templates/template-params-grid.component\";\nimport { TemplateEditorComponent } from \"../shared/components/template-editor.component\";\nimport { MJAIPromptFormComponentExtended } from \"./AIPrompts/ai-prompt-form.component\";\nimport { MJAIAgentFormComponentExtended } from \"./AIAgents/ai-agent-form.component\";\nimport { NewAgentDialogComponent } from \"./AIAgents/new-agent-dialog.component\";\nimport { NewAgentDialogService } from \"./AIAgents/new-agent-dialog.service\";\nimport { AddActionDialogComponent } from \"./AIAgents/add-action-dialog.component\";\nimport { PromptSelectorDialogComponent } from \"./AIAgents/prompt-selector-dialog.component\";\nimport { AgentPromptAdvancedSettingsDialogComponent } from \"./AIAgents/agent-prompt-advanced-settings-dialog.component\";\nimport { SubAgentAdvancedSettingsDialogComponent } from \"./AIAgents/sub-agent-advanced-settings-dialog.component\";\nimport { SubAgentSelectorDialogComponent } from \"./AIAgents/sub-agent-selector-dialog.component\";\nimport { CreatePromptDialogComponent } from \"./AIAgents/create-prompt-dialog.component\";\nimport { CreateSubAgentDialogComponent } from \"./AIAgents/create-sub-agent-dialog.component\";\nimport { AIAgentManagementService } from \"./AIAgents/ai-agent-management.service\";\nimport { AgentsModule } from \"@memberjunction/ng-agents\";\nimport { AITestHarnessModule } from \"@memberjunction/ng-ai-test-harness\";\nimport { ActionGalleryModule } from \"@memberjunction/ng-action-gallery\";\nimport { TestingModule } from \"@memberjunction/ng-testing\";\nimport { JoinGridModule } from \"@memberjunction/ng-join-grid\";\nimport { CodeEditorModule } from \"@memberjunction/ng-code-editor\";\nimport { DeepDiffModule } from \"@memberjunction/ng-deep-diff\";\nimport { TreeViewModule } from '@progress/kendo-angular-treeview';\nimport { EntityRelationshipDiagramModule } from '@memberjunction/ng-entity-relationship-diagram';\nimport { ListManagementModule } from '@memberjunction/ng-list-management';\nimport { EntitySelectorDialogComponent } from \"./shared/entity-selector-dialog.component\";\nimport { MJAIPromptRunFormComponentExtended } from \"./AIPromptRuns/ai-prompt-run-form.component\";\nimport { ChatMessageViewerComponent } from \"./AIPromptRuns/chat-message-viewer.component\";\nimport { MJActionFormComponentExtended } from \"./Actions/action-form.component\";\nimport { MJActionExecutionLogFormComponentExtended } from \"./Actions/action-execution-log-form.component\";\nimport { ActionsModule } from \"@memberjunction/ng-actions\";\nimport { MJAIAgentRunFormComponentExtended } from \"./ai-agent-run/ai-agent-run.component\";\nimport { AIAgentRunTimelineComponent } from \"./ai-agent-run/ai-agent-run-timeline.component\";\nimport { AIAgentRunStepNodeComponent } from \"./ai-agent-run/ai-agent-run-step-node.component\";\nimport { AIAgentRunAnalyticsComponent } from \"./ai-agent-run/ai-agent-run-analytics.component\";\nimport { AIAgentRunVisualizationComponent } from \"./ai-agent-run/ai-agent-run-visualization.component\";\nimport { AIAgentRunStepDetailComponent } from \"./ai-agent-run/ai-agent-run-step-detail.component\";\nimport { MJQueryFormComponentExtended } from \"./Queries/query-form.component\";\nimport { QueryRunDialogComponent } from \"./Queries/query-run-dialog.component\";\nimport { QueryCategoryDialogComponent } from \"./Queries/query-category-dialog.component\";\nimport { FlowAgentFormSectionComponent } from \"./AIAgents/FlowAgentType/flow-agent-form-section.component\";\nimport { FlowEditorModule } from \"@memberjunction/ng-flow-editor\";\nimport { MarkdownModule } from \"@memberjunction/ng-markdown\";\nimport { MJTestRunFormComponentExtended } from \"./Tests/test-run-form.component\";\nimport { MJTestFormComponentExtended } from \"./Tests/test-form.component\";\nimport { MJTestSuiteRunFormComponentExtended } from \"./Tests/test-suite-run-form.component\";\nimport { MJTestSuiteFormComponentExtended } from \"./Tests/test-suite-form.component\";\nimport { MJTestRunFeedbackFormComponentExtended } from \"./Tests/test-run-feedback-form.component\";\nimport { MJTestRubricFormComponentExtended } from \"./Tests/test-rubric-form.component\";\nimport { EntityLinkPillComponent } from \"./Tests/entity-link-pill.component\";\nimport { MJListFormComponentExtended } from \"./Lists/list-form.component\";\n\n@NgModule({\n    declarations: [\n        MJEntityFormComponentExtended,\n        MJEntityActionFormComponentExtended,\n        MJTemplateFormComponentExtended,\n        TemplateParamDialogComponent,\n        TemplateParamsGridComponent,\n        TemplateEditorComponent,\n        MJAIPromptFormComponentExtended,\n        MJAIAgentFormComponentExtended,\n        NewAgentDialogComponent,\n        AddActionDialogComponent,\n        PromptSelectorDialogComponent,\n        AgentPromptAdvancedSettingsDialogComponent,\n        SubAgentAdvancedSettingsDialogComponent,\n        SubAgentSelectorDialogComponent,\n        CreatePromptDialogComponent,\n        CreateSubAgentDialogComponent,\n        EntitySelectorDialogComponent,\n        MJAIPromptRunFormComponentExtended,\n        ChatMessageViewerComponent,\n        MJActionFormComponentExtended,\n        MJActionExecutionLogFormComponentExtended,\n        MJAIAgentRunFormComponentExtended,\n        AIAgentRunTimelineComponent,\n        AIAgentRunStepNodeComponent,\n        AIAgentRunAnalyticsComponent,\n        AIAgentRunVisualizationComponent,\n        AIAgentRunStepDetailComponent,\n        MJQueryFormComponentExtended,\n        QueryRunDialogComponent,\n        QueryCategoryDialogComponent,\n        FlowAgentFormSectionComponent,\n        MJTestRunFormComponentExtended,\n        MJTestFormComponentExtended,\n        MJTestSuiteRunFormComponentExtended,\n        MJTestSuiteFormComponentExtended,\n        MJTestRunFeedbackFormComponentExtended,\n        MJTestRubricFormComponentExtended,\n        EntityLinkPillComponent,\n        MJListFormComponentExtended,\n    ],\n    imports: [\n        CommonModule,\n        FormsModule,\n        ReactiveFormsModule,\n        LayoutModule,\n        ExpansionPanelModule,\n        TabStripModule,\n        SplitterModule,\n        PanelBarModule,\n        DialogsModule,\n        WindowModule,\n        GridModule,\n        InputsModule,\n        TextBoxModule,\n        TextAreaModule,\n        NumericTextBoxModule,\n        SwitchModule,\n        DropDownsModule,\n        ComboBoxModule,\n        DropDownTreesModule,\n        DropDownListModule,\n        ButtonsModule,\n        ButtonModule,\n        SplitButtonModule,\n        DateInputsModule,\n        LinkDirectivesModule,\n        JoinGridModule,\n        BaseFormsModule,\n        MJTabStripModule,\n        CodeEditorModule,\n        DeepDiffModule,\n        TreeViewModule,\n        CheckBoxModule,\n        AITestHarnessModule,\n        ActionGalleryModule,\n        TestingModule,\n        FlowEditorModule,\n        SharedGenericModule,\n        EntityRelationshipDiagramModule,\n        ListManagementModule,\n        ActionsModule,\n        AgentsModule,\n        EntityViewerModule,\n        MarkdownModule\n    ],\n    exports: [\n        MJEntityFormComponentExtended,\n        MJEntityActionFormComponentExtended,\n        MJTemplateFormComponentExtended,\n        TemplateEditorComponent,\n        MJAIPromptFormComponentExtended,\n        MJAIAgentFormComponentExtended,\n        MJAIPromptRunFormComponentExtended,\n        ChatMessageViewerComponent,\n        MJActionFormComponentExtended,\n        MJActionExecutionLogFormComponentExtended,\n        MJAIAgentRunFormComponentExtended,\n        AIAgentRunTimelineComponent,\n        AIAgentRunStepNodeComponent,\n        AIAgentRunAnalyticsComponent,\n        MJQueryFormComponentExtended,\n        FlowAgentFormSectionComponent,\n        MJTestRunFormComponentExtended,\n        MJTestFormComponentExtended,\n        MJTestSuiteRunFormComponentExtended,\n        MJTestSuiteFormComponentExtended,\n        MJTestRunFeedbackFormComponentExtended,\n        MJTestRubricFormComponentExtended,\n        EntityLinkPillComponent,\n        MJListFormComponentExtended,\n        ActionsModule\n    ],\n    providers: [\n        NewAgentDialogService,\n        AIAgentManagementService\n    ]\n})\nexport class MemberJunctionCoreEntityFormsModule { }\n"]}
+{"version":3,"file":"custom-forms.module.js","sourceRoot":"","sources":["../../../src/lib/custom/custom-forms.module.ts"],"names":[],"mappings":"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","sourcesContent":["import { NgModule } from \"@angular/core\";\nimport { CommonModule } from '@angular/common';\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { InputsModule, TextBoxModule, TextAreaModule, NumericTextBoxModule, SwitchModule, CheckBoxModule } from '@progress/kendo-angular-inputs';\nimport { DateInputsModule } from '@progress/kendo-angular-dateinputs';\nimport { ButtonsModule, ButtonModule, SplitButtonModule } from '@progress/kendo-angular-buttons';\nimport { DropDownsModule, ComboBoxModule, DropDownTreesModule, DropDownListModule } from '@progress/kendo-angular-dropdowns';\nimport { LayoutModule, ExpansionPanelModule, TabStripModule, SplitterModule, PanelBarModule } from '@progress/kendo-angular-layout';\nimport { DialogsModule, WindowModule } from '@progress/kendo-angular-dialog';\nimport { GridModule } from '@progress/kendo-angular-grid';\nimport { BaseFormsModule } from '@memberjunction/ng-base-forms';\nimport { LinkDirectivesModule } from '@memberjunction/ng-link-directives';\nimport { SharedGenericModule } from '@memberjunction/ng-shared-generic';\nimport { EntityViewerModule } from '@memberjunction/ng-entity-viewer';\nimport { MJEntityFormComponentExtended } from \"./Entities/entity-form.component\";\nimport { MJTabStripModule } from \"@memberjunction/ng-tabstrip\";\nimport { MJEntityActionFormComponentExtended } from \"./EntityActions/entityaction.form.component\";\nimport { MJTemplateFormComponentExtended } from \"./Templates/templates-form.component\";\nimport { TemplateParamDialogComponent } from \"./Templates/template-param-dialog.component\";\nimport { TemplateParamsGridComponent } from \"./Templates/template-params-grid.component\";\nimport { TemplateEditorComponent } from \"../shared/components/template-editor.component\";\nimport { MJAIPromptFormComponentExtended } from \"./AIPrompts/ai-prompt-form.component\";\nimport { MJAIAgentFormComponentExtended } from \"./AIAgents/ai-agent-form.component\";\nimport { NewAgentDialogComponent } from \"./AIAgents/new-agent-dialog.component\";\nimport { NewAgentDialogService } from \"./AIAgents/new-agent-dialog.service\";\nimport { AddActionDialogComponent } from \"./AIAgents/add-action-dialog.component\";\nimport { PromptSelectorDialogComponent } from \"./AIAgents/prompt-selector-dialog.component\";\nimport { AgentPromptAdvancedSettingsDialogComponent } from \"./AIAgents/agent-prompt-advanced-settings-dialog.component\";\nimport { SubAgentAdvancedSettingsDialogComponent } from \"./AIAgents/sub-agent-advanced-settings-dialog.component\";\nimport { SubAgentSelectorDialogComponent } from \"./AIAgents/sub-agent-selector-dialog.component\";\nimport { CreatePromptDialogComponent } from \"./AIAgents/create-prompt-dialog.component\";\nimport { CreateSubAgentDialogComponent } from \"./AIAgents/create-sub-agent-dialog.component\";\nimport { AIAgentManagementService } from \"./AIAgents/ai-agent-management.service\";\nimport { AgentsModule } from \"@memberjunction/ng-agents\";\nimport { AITestHarnessModule } from \"@memberjunction/ng-ai-test-harness\";\nimport { ActionGalleryModule } from \"@memberjunction/ng-action-gallery\";\nimport { TestingModule } from \"@memberjunction/ng-testing\";\nimport { JoinGridModule } from \"@memberjunction/ng-join-grid\";\nimport { CodeEditorModule } from \"@memberjunction/ng-code-editor\";\nimport { DeepDiffModule } from \"@memberjunction/ng-deep-diff\";\nimport { TreeViewModule } from '@progress/kendo-angular-treeview';\nimport { EntityRelationshipDiagramModule } from '@memberjunction/ng-entity-relationship-diagram';\nimport { ListManagementModule } from '@memberjunction/ng-list-management';\nimport { EntitySelectorDialogComponent } from \"./shared/entity-selector-dialog.component\";\nimport { MJAIPromptRunFormComponentExtended } from \"./AIPromptRuns/ai-prompt-run-form.component\";\nimport { ChatMessageViewerComponent } from \"./AIPromptRuns/chat-message-viewer.component\";\nimport { MJActionFormComponentExtended } from \"./Actions/action-form.component\";\nimport { MJActionExecutionLogFormComponentExtended } from \"./Actions/action-execution-log-form.component\";\nimport { ActionsModule } from \"@memberjunction/ng-actions\";\nimport { MJAIAgentRunFormComponentExtended } from \"./ai-agent-run/ai-agent-run.component\";\nimport { AIAgentRunTimelineComponent } from \"./ai-agent-run/ai-agent-run-timeline.component\";\nimport { AIAgentRunStepNodeComponent } from \"./ai-agent-run/ai-agent-run-step-node.component\";\nimport { AIAgentRunAnalyticsComponent } from \"./ai-agent-run/ai-agent-run-analytics.component\";\nimport { AIAgentRunVisualizationComponent } from \"./ai-agent-run/ai-agent-run-visualization.component\";\nimport { AIAgentRunStepDetailComponent } from \"./ai-agent-run/ai-agent-run-step-detail.component\";\nimport { MJQueryFormComponentExtended } from \"./Queries/query-form.component\";\nimport { QueryRunDialogComponent } from \"./Queries/query-run-dialog.component\";\nimport { QueryCategoryDialogComponent } from \"./Queries/query-category-dialog.component\";\nimport { FlowAgentFormSectionComponent } from \"./AIAgents/FlowAgentType/flow-agent-form-section.component\";\nimport { FlowEditorModule } from \"@memberjunction/ng-flow-editor\";\nimport { MarkdownModule } from \"@memberjunction/ng-markdown\";\nimport { NgTreesModule } from \"@memberjunction/ng-trees\";\nimport { MJTestRunFormComponentExtended } from \"./Tests/test-run-form.component\";\nimport { MJTestFormComponentExtended } from \"./Tests/test-form.component\";\nimport { MJTestSuiteRunFormComponentExtended } from \"./Tests/test-suite-run-form.component\";\nimport { MJTestSuiteFormComponentExtended } from \"./Tests/test-suite-form.component\";\nimport { MJTestRunFeedbackFormComponentExtended } from \"./Tests/test-run-feedback-form.component\";\nimport { MJTestRubricFormComponentExtended } from \"./Tests/test-rubric-form.component\";\nimport { EntityLinkPillComponent } from \"./Tests/entity-link-pill.component\";\nimport { MJListFormComponentExtended } from \"./Lists/list-form.component\";\n\n@NgModule({\n    declarations: [\n        MJEntityFormComponentExtended,\n        MJEntityActionFormComponentExtended,\n        MJTemplateFormComponentExtended,\n        TemplateParamDialogComponent,\n        TemplateParamsGridComponent,\n        TemplateEditorComponent,\n        MJAIPromptFormComponentExtended,\n        MJAIAgentFormComponentExtended,\n        NewAgentDialogComponent,\n        AddActionDialogComponent,\n        PromptSelectorDialogComponent,\n        AgentPromptAdvancedSettingsDialogComponent,\n        SubAgentAdvancedSettingsDialogComponent,\n        SubAgentSelectorDialogComponent,\n        CreatePromptDialogComponent,\n        CreateSubAgentDialogComponent,\n        EntitySelectorDialogComponent,\n        MJAIPromptRunFormComponentExtended,\n        ChatMessageViewerComponent,\n        MJActionFormComponentExtended,\n        MJActionExecutionLogFormComponentExtended,\n        MJAIAgentRunFormComponentExtended,\n        AIAgentRunTimelineComponent,\n        AIAgentRunStepNodeComponent,\n        AIAgentRunAnalyticsComponent,\n        AIAgentRunVisualizationComponent,\n        AIAgentRunStepDetailComponent,\n        MJQueryFormComponentExtended,\n        QueryRunDialogComponent,\n        QueryCategoryDialogComponent,\n        FlowAgentFormSectionComponent,\n        MJTestRunFormComponentExtended,\n        MJTestFormComponentExtended,\n        MJTestSuiteRunFormComponentExtended,\n        MJTestSuiteFormComponentExtended,\n        MJTestRunFeedbackFormComponentExtended,\n        MJTestRubricFormComponentExtended,\n        EntityLinkPillComponent,\n        MJListFormComponentExtended,\n    ],\n    imports: [\n        CommonModule,\n        FormsModule,\n        ReactiveFormsModule,\n        LayoutModule,\n        ExpansionPanelModule,\n        TabStripModule,\n        SplitterModule,\n        PanelBarModule,\n        DialogsModule,\n        WindowModule,\n        GridModule,\n        InputsModule,\n        TextBoxModule,\n        TextAreaModule,\n        NumericTextBoxModule,\n        SwitchModule,\n        DropDownsModule,\n        ComboBoxModule,\n        DropDownTreesModule,\n        DropDownListModule,\n        ButtonsModule,\n        ButtonModule,\n        SplitButtonModule,\n        DateInputsModule,\n        LinkDirectivesModule,\n        JoinGridModule,\n        BaseFormsModule,\n        MJTabStripModule,\n        CodeEditorModule,\n        DeepDiffModule,\n        TreeViewModule,\n        CheckBoxModule,\n        AITestHarnessModule,\n        ActionGalleryModule,\n        TestingModule,\n        FlowEditorModule,\n        SharedGenericModule,\n        EntityRelationshipDiagramModule,\n        ListManagementModule,\n        ActionsModule,\n        AgentsModule,\n        EntityViewerModule,\n        MarkdownModule,\n        NgTreesModule\n    ],\n    exports: [\n        MJEntityFormComponentExtended,\n        MJEntityActionFormComponentExtended,\n        MJTemplateFormComponentExtended,\n        TemplateEditorComponent,\n        MJAIPromptFormComponentExtended,\n        MJAIAgentFormComponentExtended,\n        MJAIPromptRunFormComponentExtended,\n        ChatMessageViewerComponent,\n        MJActionFormComponentExtended,\n        MJActionExecutionLogFormComponentExtended,\n        MJAIAgentRunFormComponentExtended,\n        AIAgentRunTimelineComponent,\n        AIAgentRunStepNodeComponent,\n        AIAgentRunAnalyticsComponent,\n        MJQueryFormComponentExtended,\n        FlowAgentFormSectionComponent,\n        MJTestRunFormComponentExtended,\n        MJTestFormComponentExtended,\n        MJTestSuiteRunFormComponentExtended,\n        MJTestSuiteFormComponentExtended,\n        MJTestRunFeedbackFormComponentExtended,\n        MJTestRubricFormComponentExtended,\n        EntityLinkPillComponent,\n        MJListFormComponentExtended,\n        ActionsModule\n    ],\n    providers: [\n        NewAgentDialogService,\n        AIAgentManagementService\n    ]\n})\nexport class MemberJunctionCoreEntityFormsModule { }\n"]}

package/dist/lib/custom/shared/entity-selector-dialog.component.js

@@ -210,7 +210,7 @@ export class EntitySelectorDialogComponent {
             i0.ɵɵconditional(!ctx.isLoading ? 10 : -1);
             i0.ɵɵadvance(7);
             i0.ɵɵproperty("disabled", !ctx.selectedEntity);
-        } }, dependencies: [i3.NgControlStatus, i3.NgModel, i4.TextBoxComponent, i4.TextBoxPrefixTemplateDirective, i5.ButtonComponent], styles: [".dialog-wrapper[_ngcontent-%COMP%] {\n            display: flex;\n            flex-direction: column;\n            height: 600px;\n            width: 800px;\n        }\n\n        .dialog-header[_ngcontent-%COMP%] {\n            padding: 16px;\n            border-bottom: 1px solid #e0e6ed;\n        }\n\n        .dialog-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n            margin: 0;\n            display: flex;\n            align-items: center;\n            gap: 8px;\n        }\n\n        .dialog-content[_ngcontent-%COMP%] {\n            display: flex;\n            flex-direction: column;\n            flex: 1;\n            padding: 16px;\n            gap: 16px;\n            overflow: hidden;\n        }\n\n        .dialog-actions[_ngcontent-%COMP%] {\n            padding: 16px;\n            border-top: 1px solid #e0e6ed;\n            display: flex;\n            gap: 8px;\n            justify-content: flex-end;\n        }\n\n        .search-bar[_ngcontent-%COMP%] {\n            display: flex;\n            gap: 12px;\n        }\n\n        .search-input[_ngcontent-%COMP%] {\n            flex: 1;\n        }\n\n        .loading-state[_ngcontent-%COMP%], \n   .empty-state[_ngcontent-%COMP%] {\n            flex: 1;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n            color: #6c757d;\n            gap: 12px;\n        }\n\n        .loading-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n   .empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n            font-size: 48px;\n            color: #dee2e6;\n        }\n\n        .entity-list-container[_ngcontent-%COMP%] {\n            flex: 1;\n            overflow-y: auto;\n            border: 1px solid #e0e6ed;\n            border-radius: 8px;\n            background: #f8f9fa;\n        }\n\n        .entity-list[_ngcontent-%COMP%] {\n            padding: 8px;\n        }\n\n        .entity-item[_ngcontent-%COMP%] {\n            display: flex;\n            align-items: center;\n            gap: 12px;\n            padding: 12px;\n            margin-bottom: 8px;\n            background: white;\n            border: 1px solid #e0e6ed;\n            border-radius: 8px;\n            cursor: pointer;\n            transition: all 0.2s ease;\n        }\n\n        .entity-item[_ngcontent-%COMP%]:hover {\n            border-color: #2196f3;\n            box-shadow: 0 2px 8px rgba(0,0,0,0.08);\n        }\n\n        .entity-item.selected[_ngcontent-%COMP%] {\n            background: #e3f2fd;\n            border-color: #2196f3;\n        }\n\n        .item-icon[_ngcontent-%COMP%] {\n            width: 36px;\n            height: 36px;\n            background: #f0f4f8;\n            border-radius: 8px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            flex-shrink: 0;\n        }\n\n        .item-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n            color: #2196f3;\n            font-size: 16px;\n        }\n\n        .item-content[_ngcontent-%COMP%] {\n            flex: 1;\n            min-width: 0;\n        }\n\n        .item-title[_ngcontent-%COMP%] {\n            font-weight: 600;\n            color: #2c3e50;\n            margin-bottom: 4px;\n        }\n\n        .item-description[_ngcontent-%COMP%] {\n            font-size: 13px;\n            color: #6c757d;\n            line-height: 1.4;\n            display: -webkit-box;\n            -webkit-line-clamp: 2;\n            -webkit-box-orient: vertical;\n            overflow: hidden;\n        }\n\n        .item-status[_ngcontent-%COMP%] {\n            margin-top: 4px;\n        }\n\n        .status-badge[_ngcontent-%COMP%] {\n            font-size: 11px;\n            padding: 2px 8px;\n            border-radius: 12px;\n            background: #e9ecef;\n            color: #495057;\n            font-weight: 500;\n        }\n\n        .status-badge.active[_ngcontent-%COMP%] {\n            background: #d4edda;\n            color: #28a745;\n        }"] }); }
+        } }, dependencies: [i3.NgControlStatus, i3.NgModel, i4.TextBoxComponent, i4.TextBoxPrefixTemplateDirective, i5.ButtonComponent], styles: [".dialog-wrapper[_ngcontent-%COMP%] {\n            display: flex;\n            flex-direction: column;\n            height: 600px;\n            width: 800px;\n        }\n\n        .dialog-header[_ngcontent-%COMP%] {\n            padding: 16px;\n            border-bottom: 1px solid var(--mj-border-default);\n        }\n\n        .dialog-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n            margin: 0;\n            display: flex;\n            align-items: center;\n            gap: 8px;\n        }\n\n        .dialog-content[_ngcontent-%COMP%] {\n            display: flex;\n            flex-direction: column;\n            flex: 1;\n            padding: 16px;\n            gap: 16px;\n            overflow: hidden;\n        }\n\n        .dialog-actions[_ngcontent-%COMP%] {\n            padding: 16px;\n            border-top: 1px solid var(--mj-border-default);\n            display: flex;\n            gap: 8px;\n            justify-content: flex-end;\n        }\n\n        .search-bar[_ngcontent-%COMP%] {\n            display: flex;\n            gap: 12px;\n        }\n\n        .search-input[_ngcontent-%COMP%] {\n            flex: 1;\n        }\n\n        .loading-state[_ngcontent-%COMP%], \n   .empty-state[_ngcontent-%COMP%] {\n            flex: 1;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n            color: var(--mj-text-muted);\n            gap: 12px;\n        }\n\n        .loading-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n   .empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n            font-size: 48px;\n            color: var(--mj-border-default);\n        }\n\n        .entity-list-container[_ngcontent-%COMP%] {\n            flex: 1;\n            overflow-y: auto;\n            border: 1px solid var(--mj-border-default);\n            border-radius: 8px;\n            background: var(--mj-bg-surface-sunken);\n        }\n\n        .entity-list[_ngcontent-%COMP%] {\n            padding: 8px;\n        }\n\n        .entity-item[_ngcontent-%COMP%] {\n            display: flex;\n            align-items: center;\n            gap: 12px;\n            padding: 12px;\n            margin-bottom: 8px;\n            background: var(--mj-bg-surface-card);\n            border: 1px solid var(--mj-border-default);\n            border-radius: 8px;\n            cursor: pointer;\n            transition: all 0.2s ease;\n        }\n\n        .entity-item[_ngcontent-%COMP%]:hover {\n            border-color: var(--mj-brand-primary);\n            box-shadow: 0 2px 8px rgba(0,0,0,0.08);\n        }\n\n        .entity-item.selected[_ngcontent-%COMP%] {\n            background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n            border-color: var(--mj-brand-primary);\n        }\n\n        .item-icon[_ngcontent-%COMP%] {\n            width: 36px;\n            height: 36px;\n            background: var(--mj-bg-surface-sunken);\n            border-radius: 8px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            flex-shrink: 0;\n        }\n\n        .item-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n            color: var(--mj-brand-primary);\n            font-size: 16px;\n        }\n\n        .item-content[_ngcontent-%COMP%] {\n            flex: 1;\n            min-width: 0;\n        }\n\n        .item-title[_ngcontent-%COMP%] {\n            font-weight: 600;\n            color: var(--mj-text-primary);\n            margin-bottom: 4px;\n        }\n\n        .item-description[_ngcontent-%COMP%] {\n            font-size: 13px;\n            color: var(--mj-text-muted);\n            line-height: 1.4;\n            display: -webkit-box;\n            -webkit-line-clamp: 2;\n            -webkit-box-orient: vertical;\n            overflow: hidden;\n        }\n\n        .item-status[_ngcontent-%COMP%] {\n            margin-top: 4px;\n        }\n\n        .status-badge[_ngcontent-%COMP%] {\n            font-size: 11px;\n            padding: 2px 8px;\n            border-radius: 12px;\n            background: var(--mj-bg-surface-sunken);\n            color: var(--mj-text-secondary);\n            font-weight: 500;\n        }\n\n        .status-badge.active[_ngcontent-%COMP%] {\n            background: #d4edda;\n            color: #28a745;\n        }"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EntitySelectorDialogComponent, [{
         type: Component,
@@ -288,7 +288,7 @@ export class EntitySelectorDialogComponent {
             <button kendoButton themeColor="primary" [disabled]="!selectedEntity" (click)="onSelect()">Select</button>
           </div>
         </div>
-        `, styles: ["\n        .dialog-wrapper {\n            display: flex;\n            flex-direction: column;\n            height: 600px;\n            width: 800px;\n        }\n\n        .dialog-header {\n            padding: 16px;\n            border-bottom: 1px solid #e0e6ed;\n        }\n\n        .dialog-header h3 {\n            margin: 0;\n            display: flex;\n            align-items: center;\n            gap: 8px;\n        }\n\n        .dialog-content {\n            display: flex;\n            flex-direction: column;\n            flex: 1;\n            padding: 16px;\n            gap: 16px;\n            overflow: hidden;\n        }\n\n        .dialog-actions {\n            padding: 16px;\n            border-top: 1px solid #e0e6ed;\n            display: flex;\n            gap: 8px;\n            justify-content: flex-end;\n        }\n\n        .search-bar {\n            display: flex;\n            gap: 12px;\n        }\n\n        .search-input {\n            flex: 1;\n        }\n\n        .loading-state,\n        .empty-state {\n            flex: 1;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n            color: #6c757d;\n            gap: 12px;\n        }\n\n        .loading-state i,\n        .empty-state i {\n            font-size: 48px;\n            color: #dee2e6;\n        }\n\n        .entity-list-container {\n            flex: 1;\n            overflow-y: auto;\n            border: 1px solid #e0e6ed;\n            border-radius: 8px;\n            background: #f8f9fa;\n        }\n\n        .entity-list {\n            padding: 8px;\n        }\n\n        .entity-item {\n            display: flex;\n            align-items: center;\n            gap: 12px;\n            padding: 12px;\n            margin-bottom: 8px;\n            background: white;\n            border: 1px solid #e0e6ed;\n            border-radius: 8px;\n            cursor: pointer;\n            transition: all 0.2s ease;\n        }\n\n        .entity-item:hover {\n            border-color: #2196f3;\n            box-shadow: 0 2px 8px rgba(0,0,0,0.08);\n        }\n\n        .entity-item.selected {\n            background: #e3f2fd;\n            border-color: #2196f3;\n        }\n\n        .item-icon {\n            width: 36px;\n            height: 36px;\n            background: #f0f4f8;\n            border-radius: 8px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            flex-shrink: 0;\n        }\n\n        .item-icon i {\n            color: #2196f3;\n            font-size: 16px;\n        }\n\n        .item-content {\n            flex: 1;\n            min-width: 0;\n        }\n\n        .item-title {\n            font-weight: 600;\n            color: #2c3e50;\n            margin-bottom: 4px;\n        }\n\n        .item-description {\n            font-size: 13px;\n            color: #6c757d;\n            line-height: 1.4;\n            display: -webkit-box;\n            -webkit-line-clamp: 2;\n            -webkit-box-orient: vertical;\n            overflow: hidden;\n        }\n\n        .item-status {\n            margin-top: 4px;\n        }\n\n        .status-badge {\n            font-size: 11px;\n            padding: 2px 8px;\n            border-radius: 12px;\n            background: #e9ecef;\n            color: #495057;\n            font-weight: 500;\n        }\n\n        .status-badge.active {\n            background: #d4edda;\n            color: #28a745;\n        }\n    "] }]
+        `, styles: ["\n        .dialog-wrapper {\n            display: flex;\n            flex-direction: column;\n            height: 600px;\n            width: 800px;\n        }\n\n        .dialog-header {\n            padding: 16px;\n            border-bottom: 1px solid var(--mj-border-default);\n        }\n\n        .dialog-header h3 {\n            margin: 0;\n            display: flex;\n            align-items: center;\n            gap: 8px;\n        }\n\n        .dialog-content {\n            display: flex;\n            flex-direction: column;\n            flex: 1;\n            padding: 16px;\n            gap: 16px;\n            overflow: hidden;\n        }\n\n        .dialog-actions {\n            padding: 16px;\n            border-top: 1px solid var(--mj-border-default);\n            display: flex;\n            gap: 8px;\n            justify-content: flex-end;\n        }\n\n        .search-bar {\n            display: flex;\n            gap: 12px;\n        }\n\n        .search-input {\n            flex: 1;\n        }\n\n        .loading-state,\n        .empty-state {\n            flex: 1;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n            color: var(--mj-text-muted);\n            gap: 12px;\n        }\n\n        .loading-state i,\n        .empty-state i {\n            font-size: 48px;\n            color: var(--mj-border-default);\n        }\n\n        .entity-list-container {\n            flex: 1;\n            overflow-y: auto;\n            border: 1px solid var(--mj-border-default);\n            border-radius: 8px;\n            background: var(--mj-bg-surface-sunken);\n        }\n\n        .entity-list {\n            padding: 8px;\n        }\n\n        .entity-item {\n            display: flex;\n            align-items: center;\n            gap: 12px;\n            padding: 12px;\n            margin-bottom: 8px;\n            background: var(--mj-bg-surface-card);\n            border: 1px solid var(--mj-border-default);\n            border-radius: 8px;\n            cursor: pointer;\n            transition: all 0.2s ease;\n        }\n\n        .entity-item:hover {\n            border-color: var(--mj-brand-primary);\n            box-shadow: 0 2px 8px rgba(0,0,0,0.08);\n        }\n\n        .entity-item.selected {\n            background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n            border-color: var(--mj-brand-primary);\n        }\n\n        .item-icon {\n            width: 36px;\n            height: 36px;\n            background: var(--mj-bg-surface-sunken);\n            border-radius: 8px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            flex-shrink: 0;\n        }\n\n        .item-icon i {\n            color: var(--mj-brand-primary);\n            font-size: 16px;\n        }\n\n        .item-content {\n            flex: 1;\n            min-width: 0;\n        }\n\n        .item-title {\n            font-weight: 600;\n            color: var(--mj-text-primary);\n            margin-bottom: 4px;\n        }\n\n        .item-description {\n            font-size: 13px;\n            color: var(--mj-text-muted);\n            line-height: 1.4;\n            display: -webkit-box;\n            -webkit-line-clamp: 2;\n            -webkit-box-orient: vertical;\n            overflow: hidden;\n        }\n\n        .item-status {\n            margin-top: 4px;\n        }\n\n        .status-badge {\n            font-size: 11px;\n            padding: 2px 8px;\n            border-radius: 12px;\n            background: var(--mj-bg-surface-sunken);\n            color: var(--mj-text-secondary);\n            font-weight: 500;\n        }\n\n        .status-badge.active {\n            background: #d4edda;\n            color: #28a745;\n        }\n    "] }]
     }], () => [{ type: i1.SharedService }, { type: i2.DialogRef }], { config: [{
             type: Input
         }] }); })();