npm - @memberjunction/ng-dashboards - Versions diffs - 5.22.0 → 5.23.0 - Mend

@memberjunction/ng-dashboards 5.22.0 → 5.23.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (204) hide show

package/dist/AI/components/agents/agent-editor.component.js CHANGED Viewed

@@ -780,11 +780,11 @@ export class AgentEditorComponent {
             i0.ɵɵconditional(ctx.error ? 11 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(!ctx.isLoading && !ctx.error && ctx.currentAgent ? 12 : -1);
-        } }, dependencies: [i3.NgSelectOption, i3.ɵNgSelectMultipleOption, i4.LoadingComponent], styles: [".agent-editor-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--mj-bg-surface-card);\n}\n\n.editor-header[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  padding: 16px 20px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-shrink: 0;\n}\n.editor-header[_ngcontent-%COMP%]   .header-info[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 20px;\n}\n.editor-header[_ngcontent-%COMP%]   .header-info[_ngcontent-%COMP%]   .header-actions[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n.editor-header[_ngcontent-%COMP%]   .header-info[_ngcontent-%COMP%]   .back-btn[_ngcontent-%COMP%], .editor-header[_ngcontent-%COMP%]   .header-info[_ngcontent-%COMP%]   .open-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 16px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  text-decoration: none;\n  font-size: 14px;\n  cursor: pointer;\n  transition: all 0.2s;\n}\n.editor-header[_ngcontent-%COMP%]   .header-info[_ngcontent-%COMP%]   .back-btn[_ngcontent-%COMP%]:hover, .editor-header[_ngcontent-%COMP%]   .header-info[_ngcontent-%COMP%]   .open-btn[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-border-strong);\n}\n.editor-header[_ngcontent-%COMP%]   .header-info[_ngcontent-%COMP%]   .back-btn[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-muted);\n}\n.editor-header[_ngcontent-%COMP%]   .header-info[_ngcontent-%COMP%]   .back-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-border-default);\n  color: var(--mj-text-primary);\n}\n.editor-header[_ngcontent-%COMP%]   .header-info[_ngcontent-%COMP%]   .open-btn[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n.editor-header[_ngcontent-%COMP%]   .header-info[_ngcontent-%COMP%]   .open-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary-hover);\n}\n.editor-header[_ngcontent-%COMP%]   .header-info[_ngcontent-%COMP%]   .agent-breadcrumb[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 24px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n.editor-header[_ngcontent-%COMP%]   .header-info[_ngcontent-%COMP%]   .agent-breadcrumb[_ngcontent-%COMP%]   .breadcrumb-item[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: var(--mj-text-muted);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-top: 4px;\n}\n.editor-header[_ngcontent-%COMP%]   .header-controls[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n}\n.editor-header[_ngcontent-%COMP%]   .header-controls[_ngcontent-%COMP%]   .control-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 12px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  color: var(--mj-text-muted);\n  font-size: 12px;\n  cursor: pointer;\n  transition: all 0.2s;\n}\n.editor-header[_ngcontent-%COMP%]   .header-controls[_ngcontent-%COMP%]   .control-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}\n.editor-header[_ngcontent-%COMP%]   .header-controls[_ngcontent-%COMP%]   .control-btn.active[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n.tab-navigation[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  padding: 0 20px;\n  display: flex;\n  gap: 2px;\n  flex-shrink: 0;\n}\n.tab-navigation[_ngcontent-%COMP%]   .tab-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 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;\n}\n.tab-navigation[_ngcontent-%COMP%]   .tab-btn[_ngcontent-%COMP%]:hover {\n  color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-card);\n}\n.tab-navigation[_ngcontent-%COMP%]   .tab-btn.active[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  border-bottom-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-card);\n}\n.tab-navigation[_ngcontent-%COMP%]   .tab-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 16px;\n}\n\n.tab-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: hidden;\n}\n\n.loading-container[_ngcontent-%COMP%], .error-container[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n}\n.loading-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%], .loading-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%], .error-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%], .error-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%] {\n  text-align: center;\n}\n.loading-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%]   .loading-spinner[_ngcontent-%COMP%], .loading-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%]   .loading-spinner[_ngcontent-%COMP%], .error-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%]   .loading-spinner[_ngcontent-%COMP%], .error-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%]   .loading-spinner[_ngcontent-%COMP%] {\n  position: relative;\n  width: 60px;\n  height: 60px;\n  margin: 0 auto 20px;\n}\n.loading-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%]   .spinner-ring[_ngcontent-%COMP%], .loading-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%]   .spinner-ring[_ngcontent-%COMP%], .error-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%]   .spinner-ring[_ngcontent-%COMP%], .error-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%]   .spinner-ring[_ngcontent-%COMP%] {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border: 3px solid transparent;\n  border-radius: 50%;\n  animation: _ngcontent-%COMP%_spin 1.5s linear infinite;\n}\n.loading-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%]   .spinner-ring[_ngcontent-%COMP%]:nth-child(1), .loading-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%]   .spinner-ring[_ngcontent-%COMP%]:nth-child(1), .error-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%]   .spinner-ring[_ngcontent-%COMP%]:nth-child(1), .error-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%]   .spinner-ring[_ngcontent-%COMP%]:nth-child(1) {\n  border-top-color: var(--mj-brand-primary);\n  animation-delay: 0s;\n}\n.loading-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%]   .spinner-ring[_ngcontent-%COMP%]:nth-child(2), .loading-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%]   .spinner-ring[_ngcontent-%COMP%]:nth-child(2), .error-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%]   .spinner-ring[_ngcontent-%COMP%]:nth-child(2), .error-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%]   .spinner-ring[_ngcontent-%COMP%]:nth-child(2) {\n  border-top-color: var(--mj-brand-primary);\n  animation-delay: 0.3s;\n  transform: scale(0.8);\n}\n.loading-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%]   .spinner-ring[_ngcontent-%COMP%]:nth-child(3), .loading-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%]   .spinner-ring[_ngcontent-%COMP%]:nth-child(3), .error-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%]   .spinner-ring[_ngcontent-%COMP%]:nth-child(3), .error-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%]   .spinner-ring[_ngcontent-%COMP%]:nth-child(3) {\n  border-top-color: var(--mj-status-warning);\n  animation-delay: 0.6s;\n  transform: scale(0.6);\n}\n.loading-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%]   .loading-text[_ngcontent-%COMP%], .loading-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%]   .loading-text[_ngcontent-%COMP%], .error-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%]   .loading-text[_ngcontent-%COMP%], .error-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%]   .loading-text[_ngcontent-%COMP%] {\n  font-size: 16px;\n  color: var(--mj-text-muted);\n}\n.loading-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], .loading-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], .error-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], .error-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 48px;\n  color: var(--mj-status-error);\n  margin-bottom: 16px;\n}\n.loading-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%], .loading-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%], .error-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%], .error-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 8px 0;\n  color: var(--mj-text-primary);\n}\n.loading-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%]   p[_ngcontent-%COMP%], .loading-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%]   p[_ngcontent-%COMP%], .error-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%]   p[_ngcontent-%COMP%], .error-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0 0 16px 0;\n  color: var(--mj-text-muted);\n}\n.loading-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%]   .retry-btn[_ngcontent-%COMP%], .loading-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%]   .retry-btn[_ngcontent-%COMP%], .error-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%]   .retry-btn[_ngcontent-%COMP%], .error-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%]   .retry-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 16px;\n  background: var(--mj-status-error);\n  border: none;\n  border-radius: 4px;\n  color: var(--mj-text-inverse);\n  cursor: pointer;\n}\n.loading-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%]   .retry-btn[_ngcontent-%COMP%]:hover, .loading-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%]   .retry-btn[_ngcontent-%COMP%]:hover, .error-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%]   .retry-btn[_ngcontent-%COMP%]:hover, .error-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%]   .retry-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-status-error);\n}\n\n.editor-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: hidden;\n}\n\n.main-splitter[_ngcontent-%COMP%], .bottom-splitter[_ngcontent-%COMP%] {\n  height: 100%;\n}\n.main-splitter[_ngcontent-%COMP%]   .k-pane[_ngcontent-%COMP%], .bottom-splitter[_ngcontent-%COMP%]   .k-pane[_ngcontent-%COMP%] {\n  overflow: hidden;\n}\n\n.hierarchy-section[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--mj-bg-surface);\n}\n.hierarchy-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%] {\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-bg-surface-sunken);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-shrink: 0;\n}\n.hierarchy-section[_ngcontent-%COMP%]   .section-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.hierarchy-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%]   .hierarchy-controls[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 20px;\n}\n.hierarchy-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%]   .hierarchy-controls[_ngcontent-%COMP%]   .zoom-controls[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 4px;\n}\n.hierarchy-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%]   .hierarchy-controls[_ngcontent-%COMP%]   .zoom-controls[_ngcontent-%COMP%]   .zoom-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  transition: all 0.2s;\n}\n.hierarchy-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%]   .hierarchy-controls[_ngcontent-%COMP%]   .zoom-controls[_ngcontent-%COMP%]   .zoom-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}\n.hierarchy-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%]   .hierarchy-controls[_ngcontent-%COMP%]   .zoom-controls[_ngcontent-%COMP%]   .zoom-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n.hierarchy-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%]   .hierarchy-controls[_ngcontent-%COMP%]   .hierarchy-legend[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 16px;\n}\n.hierarchy-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%]   .hierarchy-controls[_ngcontent-%COMP%]   .hierarchy-legend[_ngcontent-%COMP%]   .legend-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n.hierarchy-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%]   .hierarchy-controls[_ngcontent-%COMP%]   .hierarchy-legend[_ngcontent-%COMP%]   .legend-item[_ngcontent-%COMP%]   .legend-rect[_ngcontent-%COMP%] {\n  width: 20px;\n  height: 12px;\n  border-radius: 2px;\n  border: 1px solid;\n}\n.hierarchy-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%]   .hierarchy-controls[_ngcontent-%COMP%]   .hierarchy-legend[_ngcontent-%COMP%]   .legend-item[_ngcontent-%COMP%]   .legend-rect.level-0[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary-hover);\n}\n.hierarchy-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%]   .hierarchy-controls[_ngcontent-%COMP%]   .hierarchy-legend[_ngcontent-%COMP%]   .legend-item[_ngcontent-%COMP%]   .legend-rect.level-1[_ngcontent-%COMP%] {\n  background: var(--mj-status-success);\n  border-color: var(--mj-color-success-700);\n}\n.hierarchy-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%]   .hierarchy-controls[_ngcontent-%COMP%]   .hierarchy-legend[_ngcontent-%COMP%]   .legend-item[_ngcontent-%COMP%]   .legend-rect.level-2[_ngcontent-%COMP%] {\n  background: var(--mj-status-warning);\n  border-color: var(--mj-status-warning);\n}\n.hierarchy-section[_ngcontent-%COMP%]   .hierarchy-chart[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 300px;\n  overflow: hidden;\n  position: relative;\n}\n.hierarchy-section[_ngcontent-%COMP%]   .hierarchy-chart[_ngcontent-%COMP%]   .chart-help[_ngcontent-%COMP%] {\n  position: absolute;\n  bottom: 10px;\n  left: 10px;\n  background: color-mix(in srgb, var(--mj-bg-surface) 90%, transparent);\n  padding: 6px 10px;\n  border-radius: 4px;\n  border: 1px solid var(--mj-border-default);\n  z-index: 10;\n}\n.hierarchy-section[_ngcontent-%COMP%]   .hierarchy-chart[_ngcontent-%COMP%]   .chart-help[_ngcontent-%COMP%]   small[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n.hierarchy-section[_ngcontent-%COMP%]   .hierarchy-chart[_ngcontent-%COMP%]   .chart-help[_ngcontent-%COMP%]   small[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n.hierarchy-section[_ngcontent-%COMP%]   .hierarchy-chart[_ngcontent-%COMP%]   .empty-hierarchy[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  padding: 40px 20px;\n  text-align: center;\n  color: var(--mj-text-muted);\n}\n.hierarchy-section[_ngcontent-%COMP%]   .hierarchy-chart[_ngcontent-%COMP%]   .empty-hierarchy[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 64px;\n  margin-bottom: 20px;\n  opacity: 0.5;\n}\n.hierarchy-section[_ngcontent-%COMP%]   .hierarchy-chart[_ngcontent-%COMP%]   .empty-hierarchy[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n  margin: 0 0 12px 0;\n  font-size: 18px;\n  color: var(--mj-text-primary);\n}\n.hierarchy-section[_ngcontent-%COMP%]   .hierarchy-chart[_ngcontent-%COMP%]   .empty-hierarchy[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0 0 24px 0;\n  font-size: 14px;\n  color: var(--mj-text-muted);\n  line-height: 1.5;\n}\n.hierarchy-section[_ngcontent-%COMP%]   .hierarchy-chart[_ngcontent-%COMP%]   .empty-hierarchy[_ngcontent-%COMP%]   .create-subagent-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 20px;\n  background: var(--mj-brand-primary);\n  border: none;\n  border-radius: 6px;\n  color: var(--mj-text-inverse);\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: background 0.2s;\n}\n.hierarchy-section[_ngcontent-%COMP%]   .hierarchy-chart[_ngcontent-%COMP%]   .empty-hierarchy[_ngcontent-%COMP%]   .create-subagent-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary);\n}\n\n.prompts-section[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--mj-bg-surface);\n  border-right: 1px solid var(--mj-bg-surface-sunken);\n}\n.prompts-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%] {\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-bg-surface-sunken);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-shrink: 0;\n}\n.prompts-section[_ngcontent-%COMP%]   .section-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.prompts-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%]   .add-prompt-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  background: var(--mj-brand-primary);\n  border: none;\n  border-radius: 4px;\n  color: var(--mj-text-inverse);\n  font-size: 12px;\n  cursor: pointer;\n}\n.prompts-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%]   .add-prompt-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary);\n}\n.prompts-section[_ngcontent-%COMP%]   .prompts-list[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 16px 20px;\n}\n.prompts-section[_ngcontent-%COMP%]   .prompts-list[_ngcontent-%COMP%]   .empty-prompts[_ngcontent-%COMP%] {\n  text-align: center;\n  padding: 40px 20px;\n  color: var(--mj-text-muted);\n}\n.prompts-section[_ngcontent-%COMP%]   .prompts-list[_ngcontent-%COMP%]   .empty-prompts[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 48px;\n  margin-bottom: 16px;\n}\n.prompts-section[_ngcontent-%COMP%]   .prompts-list[_ngcontent-%COMP%]   .empty-prompts[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0 0 20px 0;\n  font-size: 14px;\n}\n.prompts-section[_ngcontent-%COMP%]   .prompts-list[_ngcontent-%COMP%]   .empty-prompts[_ngcontent-%COMP%]   .add-first-prompt-btn[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 16px;\n  background: var(--mj-brand-primary);\n  border: none;\n  border-radius: 4px;\n  color: var(--mj-text-inverse);\n  cursor: pointer;\n}\n.prompts-section[_ngcontent-%COMP%]   .prompts-list[_ngcontent-%COMP%]   .empty-prompts[_ngcontent-%COMP%]   .add-first-prompt-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary);\n}\n.prompts-section[_ngcontent-%COMP%]   .prompts-list[_ngcontent-%COMP%]   .prompt-card[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  margin-bottom: 12px;\n}\n.prompts-section[_ngcontent-%COMP%]   .prompts-list[_ngcontent-%COMP%]   .prompt-card[_ngcontent-%COMP%]   .prompt-header[_ngcontent-%COMP%] {\n  padding: 12px 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.prompts-section[_ngcontent-%COMP%]   .prompts-list[_ngcontent-%COMP%]   .prompt-card[_ngcontent-%COMP%]   .prompt-header[_ngcontent-%COMP%]   .prompt-info[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n  margin: 0 0 4px 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n.prompts-section[_ngcontent-%COMP%]   .prompts-list[_ngcontent-%COMP%]   .prompt-card[_ngcontent-%COMP%]   .prompt-header[_ngcontent-%COMP%]   .prompt-info[_ngcontent-%COMP%]   .prompt-type[_ngcontent-%COMP%] {\n  font-size: 11px;\n  padding: 2px 6px;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-radius: 3px;\n  text-transform: uppercase;\n}\n.prompts-section[_ngcontent-%COMP%]   .prompts-list[_ngcontent-%COMP%]   .prompt-card[_ngcontent-%COMP%]   .prompt-header[_ngcontent-%COMP%]   .prompt-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 4px;\n}\n.prompts-section[_ngcontent-%COMP%]   .prompts-list[_ngcontent-%COMP%]   .prompt-card[_ngcontent-%COMP%]   .prompt-header[_ngcontent-%COMP%]   .prompt-actions[_ngcontent-%COMP%]   .action-btn[_ngcontent-%COMP%] {\n  padding: 4px 8px;\n  background: none;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 3px;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  font-size: 12px;\n}\n.prompts-section[_ngcontent-%COMP%]   .prompts-list[_ngcontent-%COMP%]   .prompt-card[_ngcontent-%COMP%]   .prompt-header[_ngcontent-%COMP%]   .prompt-actions[_ngcontent-%COMP%]   .action-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-color: var(--mj-border-strong);\n}\n.prompts-section[_ngcontent-%COMP%]   .prompts-list[_ngcontent-%COMP%]   .prompt-card[_ngcontent-%COMP%]   .prompt-header[_ngcontent-%COMP%]   .prompt-actions[_ngcontent-%COMP%]   .action-btn.danger[_ngcontent-%COMP%]:hover {\n  background: var(--mj-status-error);\n  border-color: var(--mj-status-error);\n  color: var(--mj-text-inverse);\n}\n.prompts-section[_ngcontent-%COMP%]   .prompts-list[_ngcontent-%COMP%]   .prompt-card[_ngcontent-%COMP%]   .prompt-content[_ngcontent-%COMP%] {\n  padding: 12px 16px;\n}\n.prompts-section[_ngcontent-%COMP%]   .prompts-list[_ngcontent-%COMP%]   .prompt-card[_ngcontent-%COMP%]   .prompt-content[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  line-height: 1.4;\n}\n\n.properties-section[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--mj-bg-surface);\n}\n.properties-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%] {\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-bg-surface-sunken);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-shrink: 0;\n}\n.properties-section[_ngcontent-%COMP%]   .section-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.properties-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%]   .save-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  background: var(--mj-status-success);\n  border: none;\n  border-radius: 4px;\n  color: var(--mj-text-inverse);\n  font-size: 12px;\n  cursor: pointer;\n}\n.properties-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%]   .save-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-color-success-700);\n}\n.properties-section[_ngcontent-%COMP%]   .properties-form[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 20px;\n}\n.properties-section[_ngcontent-%COMP%]   .properties-form[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%] {\n  margin-bottom: 16px;\n}\n.properties-section[_ngcontent-%COMP%]   .properties-form[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  display: block;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 4px;\n}\n.properties-section[_ngcontent-%COMP%]   .properties-form[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%]   .form-input[_ngcontent-%COMP%], .properties-section[_ngcontent-%COMP%]   .properties-form[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%]   .form-select[_ngcontent-%COMP%], .properties-section[_ngcontent-%COMP%]   .properties-form[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%]   .form-textarea[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 8px 12px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  font-size: 13px;\n  background: var(--mj-bg-surface);\n  box-sizing: border-box;\n}\n.properties-section[_ngcontent-%COMP%]   .properties-form[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%]   .form-input[_ngcontent-%COMP%]:focus, .properties-section[_ngcontent-%COMP%]   .properties-form[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%]   .form-select[_ngcontent-%COMP%]:focus, .properties-section[_ngcontent-%COMP%]   .properties-form[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%]   .form-textarea[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n}\n.properties-section[_ngcontent-%COMP%]   .properties-form[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%]   .form-textarea[_ngcontent-%COMP%] {\n  resize: vertical;\n  min-height: 60px;\n}\n.properties-section[_ngcontent-%COMP%]   .properties-form[_ngcontent-%COMP%]   .form-group.checkbox-group[_ngcontent-%COMP%]   .checkbox-label[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n  font-size: 13px;\n  font-weight: 500;\n}\n.properties-section[_ngcontent-%COMP%]   .properties-form[_ngcontent-%COMP%]   .form-group.checkbox-group[_ngcontent-%COMP%]   .checkbox-label[_ngcontent-%COMP%]   input[type=checkbox][_ngcontent-%COMP%] {\n  width: auto;\n  margin: 0;\n}\n.properties-section[_ngcontent-%COMP%]   .properties-form[_ngcontent-%COMP%]   .form-group.checkbox-group[_ngcontent-%COMP%]   small[_ngcontent-%COMP%] {\n  display: block;\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  margin-top: 4px;\n  margin-left: 24px;\n}\n.properties-section[_ngcontent-%COMP%]   .properties-form[_ngcontent-%COMP%]   .form-row[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 16px;\n}\n\n@keyframes _ngcontent-%COMP%_spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n.modal-overlay[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  width: 100vw;\n  height: 100vh;\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 9999;\n  padding: 20px;\n  box-sizing: border-box;\n}\n\n.create-subagent-modal[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border-radius: 8px;\n  width: 100%;\n  max-width: 500px;\n  max-height: calc(100vh - 40px);\n  min-height: 300px;\n  display: flex;\n  flex-direction: column;\n  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);\n  position: relative;\n}\n.create-subagent-modal[_ngcontent-%COMP%]   .modal-header[_ngcontent-%COMP%] {\n  padding: 20px 24px;\n  border-bottom: 1px solid var(--mj-border-default);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.create-subagent-modal[_ngcontent-%COMP%]   .modal-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n.create-subagent-modal[_ngcontent-%COMP%]   .modal-header[_ngcontent-%COMP%]   .close-btn[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  padding: 8px;\n  cursor: pointer;\n  color: var(--mj-text-muted);\n  border-radius: 4px;\n}\n.create-subagent-modal[_ngcontent-%COMP%]   .modal-header[_ngcontent-%COMP%]   .close-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-primary);\n}\n.create-subagent-modal[_ngcontent-%COMP%]   .modal-body[_ngcontent-%COMP%] {\n  padding: 24px;\n  flex: 1;\n  overflow-y: auto;\n}\n.create-subagent-modal[_ngcontent-%COMP%]   .modal-body[_ngcontent-%COMP%]   .error-message[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-status-error) 20%, var(--mj-bg-surface));\n  border-radius: 6px;\n  padding: 12px;\n  margin-bottom: 20px;\n  color: var(--mj-status-error);\n  font-size: 14px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.create-subagent-modal[_ngcontent-%COMP%]   .modal-body[_ngcontent-%COMP%]   .error-message[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n.create-subagent-modal[_ngcontent-%COMP%]   .modal-body[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%] {\n  margin-bottom: 20px;\n}\n.create-subagent-modal[_ngcontent-%COMP%]   .modal-body[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  display: block;\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 8px;\n}\n.create-subagent-modal[_ngcontent-%COMP%]   .modal-body[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%]   .form-input[_ngcontent-%COMP%], .create-subagent-modal[_ngcontent-%COMP%]   .modal-body[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%]   .form-textarea[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 12px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  font-size: 14px;\n  background: var(--mj-bg-surface);\n  box-sizing: border-box;\n  transition: border-color 0.2s;\n}\n.create-subagent-modal[_ngcontent-%COMP%]   .modal-body[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%]   .form-input[_ngcontent-%COMP%]:focus, .create-subagent-modal[_ngcontent-%COMP%]   .modal-body[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%]   .form-textarea[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n}\n.create-subagent-modal[_ngcontent-%COMP%]   .modal-body[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%]   .form-input[_ngcontent-%COMP%]::placeholder, .create-subagent-modal[_ngcontent-%COMP%]   .modal-body[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%]   .form-textarea[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-disabled);\n}\n.create-subagent-modal[_ngcontent-%COMP%]   .modal-body[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%]   .form-textarea[_ngcontent-%COMP%] {\n  resize: vertical;\n  min-height: 80px;\n  font-family: inherit;\n}\n.create-subagent-modal[_ngcontent-%COMP%]   .modal-body[_ngcontent-%COMP%]   .parent-info[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  padding: 12px;\n  font-size: 14px;\n  color: var(--mj-text-muted);\n}\n.create-subagent-modal[_ngcontent-%COMP%]   .modal-body[_ngcontent-%COMP%]   .parent-info[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {\n  color: var(--mj-text-primary);\n}\n.create-subagent-modal[_ngcontent-%COMP%]   .modal-footer[_ngcontent-%COMP%] {\n  padding: 20px 24px;\n  border-top: 1px solid var(--mj-border-default);\n  display: flex;\n  justify-content: flex-end;\n  gap: 12px;\n}\n.create-subagent-modal[_ngcontent-%COMP%]   .modal-footer[_ngcontent-%COMP%]   .cancel-btn[_ngcontent-%COMP%], .create-subagent-modal[_ngcontent-%COMP%]   .modal-footer[_ngcontent-%COMP%]   .create-btn[_ngcontent-%COMP%] {\n  padding: 10px 20px;\n  border: 1px solid;\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.2s;\n}\n.create-subagent-modal[_ngcontent-%COMP%]   .modal-footer[_ngcontent-%COMP%]   .cancel-btn[_ngcontent-%COMP%]:disabled, .create-subagent-modal[_ngcontent-%COMP%]   .modal-footer[_ngcontent-%COMP%]   .create-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.create-subagent-modal[_ngcontent-%COMP%]   .modal-footer[_ngcontent-%COMP%]   .cancel-btn[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border-color: var(--mj-border-default);\n  color: var(--mj-text-muted);\n}\n.create-subagent-modal[_ngcontent-%COMP%]   .modal-footer[_ngcontent-%COMP%]   .cancel-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-border-strong);\n}\n.create-subagent-modal[_ngcontent-%COMP%]   .modal-footer[_ngcontent-%COMP%]   .create-btn[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.create-subagent-modal[_ngcontent-%COMP%]   .modal-footer[_ngcontent-%COMP%]   .create-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n}\n.create-subagent-modal[_ngcontent-%COMP%]   .modal-footer[_ngcontent-%COMP%]   .create-btn[_ngcontent-%COMP%]   .loading-spinner-sm[_ngcontent-%COMP%] {\n  width: 14px;\n  height: 14px;\n  border: 2px solid transparent;\n  border-top-color: currentColor;\n  border-radius: 50%;\n  animation: _ngcontent-%COMP%_spin 1s linear infinite;\n}"] });
+        } }, dependencies: [i3.NgSelectOption, i3.ɵNgSelectMultipleOption, i4.LoadingComponent], styles: [".agent-editor-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--mj-bg-surface-card);\n}\n\n.editor-header[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  padding: 16px 20px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-shrink: 0;\n}\n.editor-header[_ngcontent-%COMP%]   .header-info[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 20px;\n}\n.editor-header[_ngcontent-%COMP%]   .header-info[_ngcontent-%COMP%]   .header-actions[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n.editor-header[_ngcontent-%COMP%]   .header-info[_ngcontent-%COMP%]   .back-btn[_ngcontent-%COMP%], .editor-header[_ngcontent-%COMP%]   .header-info[_ngcontent-%COMP%]   .open-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 16px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  text-decoration: none;\n  font-size: 14px;\n  cursor: pointer;\n  transition: all 0.2s;\n}\n.editor-header[_ngcontent-%COMP%]   .header-info[_ngcontent-%COMP%]   .back-btn[_ngcontent-%COMP%]:hover, .editor-header[_ngcontent-%COMP%]   .header-info[_ngcontent-%COMP%]   .open-btn[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-border-strong);\n}\n.editor-header[_ngcontent-%COMP%]   .header-info[_ngcontent-%COMP%]   .back-btn[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-muted);\n}\n.editor-header[_ngcontent-%COMP%]   .header-info[_ngcontent-%COMP%]   .back-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-border-default);\n  color: var(--mj-text-primary);\n}\n.editor-header[_ngcontent-%COMP%]   .header-info[_ngcontent-%COMP%]   .open-btn[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n.editor-header[_ngcontent-%COMP%]   .header-info[_ngcontent-%COMP%]   .open-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary-hover);\n}\n.editor-header[_ngcontent-%COMP%]   .header-info[_ngcontent-%COMP%]   .agent-breadcrumb[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 24px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n.editor-header[_ngcontent-%COMP%]   .header-info[_ngcontent-%COMP%]   .agent-breadcrumb[_ngcontent-%COMP%]   .breadcrumb-item[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: var(--mj-text-muted);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-top: 4px;\n}\n.editor-header[_ngcontent-%COMP%]   .header-controls[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n}\n.editor-header[_ngcontent-%COMP%]   .header-controls[_ngcontent-%COMP%]   .control-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 12px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  color: var(--mj-text-muted);\n  font-size: 12px;\n  cursor: pointer;\n  transition: all 0.2s;\n}\n.editor-header[_ngcontent-%COMP%]   .header-controls[_ngcontent-%COMP%]   .control-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}\n.editor-header[_ngcontent-%COMP%]   .header-controls[_ngcontent-%COMP%]   .control-btn.active[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n.tab-navigation[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  padding: 0 20px;\n  display: flex;\n  gap: 2px;\n  flex-shrink: 0;\n}\n.tab-navigation[_ngcontent-%COMP%]   .tab-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 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;\n}\n.tab-navigation[_ngcontent-%COMP%]   .tab-btn[_ngcontent-%COMP%]:hover {\n  color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-card);\n}\n.tab-navigation[_ngcontent-%COMP%]   .tab-btn.active[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  border-bottom-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-card);\n}\n.tab-navigation[_ngcontent-%COMP%]   .tab-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 16px;\n}\n\n.tab-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: hidden;\n}\n\n.loading-container[_ngcontent-%COMP%], .error-container[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n}\n.loading-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%], .loading-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%], .error-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%], .error-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%] {\n  text-align: center;\n}\n.loading-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%]   .loading-spinner[_ngcontent-%COMP%], .loading-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%]   .loading-spinner[_ngcontent-%COMP%], .error-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%]   .loading-spinner[_ngcontent-%COMP%], .error-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%]   .loading-spinner[_ngcontent-%COMP%] {\n  position: relative;\n  width: 60px;\n  height: 60px;\n  margin: 0 auto 20px;\n}\n.loading-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%]   .spinner-ring[_ngcontent-%COMP%], .loading-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%]   .spinner-ring[_ngcontent-%COMP%], .error-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%]   .spinner-ring[_ngcontent-%COMP%], .error-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%]   .spinner-ring[_ngcontent-%COMP%] {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border: 3px solid transparent;\n  border-radius: 50%;\n  animation: _ngcontent-%COMP%_spin 1.5s linear infinite;\n}\n.loading-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%]   .spinner-ring[_ngcontent-%COMP%]:nth-child(1), .loading-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%]   .spinner-ring[_ngcontent-%COMP%]:nth-child(1), .error-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%]   .spinner-ring[_ngcontent-%COMP%]:nth-child(1), .error-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%]   .spinner-ring[_ngcontent-%COMP%]:nth-child(1) {\n  border-top-color: var(--mj-brand-primary);\n  animation-delay: 0s;\n}\n.loading-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%]   .spinner-ring[_ngcontent-%COMP%]:nth-child(2), .loading-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%]   .spinner-ring[_ngcontent-%COMP%]:nth-child(2), .error-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%]   .spinner-ring[_ngcontent-%COMP%]:nth-child(2), .error-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%]   .spinner-ring[_ngcontent-%COMP%]:nth-child(2) {\n  border-top-color: var(--mj-brand-primary);\n  animation-delay: 0.3s;\n  transform: scale(0.8);\n}\n.loading-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%]   .spinner-ring[_ngcontent-%COMP%]:nth-child(3), .loading-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%]   .spinner-ring[_ngcontent-%COMP%]:nth-child(3), .error-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%]   .spinner-ring[_ngcontent-%COMP%]:nth-child(3), .error-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%]   .spinner-ring[_ngcontent-%COMP%]:nth-child(3) {\n  border-top-color: var(--mj-status-warning);\n  animation-delay: 0.6s;\n  transform: scale(0.6);\n}\n.loading-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%]   .loading-text[_ngcontent-%COMP%], .loading-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%]   .loading-text[_ngcontent-%COMP%], .error-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%]   .loading-text[_ngcontent-%COMP%], .error-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%]   .loading-text[_ngcontent-%COMP%] {\n  font-size: 16px;\n  color: var(--mj-text-muted);\n}\n.loading-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], .loading-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], .error-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], .error-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 48px;\n  color: var(--mj-status-error);\n  margin-bottom: 16px;\n}\n.loading-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%], .loading-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%], .error-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%], .error-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 8px 0;\n  color: var(--mj-text-primary);\n}\n.loading-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%]   p[_ngcontent-%COMP%], .loading-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%]   p[_ngcontent-%COMP%], .error-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%]   p[_ngcontent-%COMP%], .error-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0 0 16px 0;\n  color: var(--mj-text-muted);\n}\n.loading-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%]   .retry-btn[_ngcontent-%COMP%], .loading-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%]   .retry-btn[_ngcontent-%COMP%], .error-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%]   .retry-btn[_ngcontent-%COMP%], .error-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%]   .retry-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 16px;\n  background: var(--mj-status-error);\n  border: none;\n  border-radius: 4px;\n  color: var(--mj-text-inverse);\n  cursor: pointer;\n}\n.loading-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%]   .retry-btn[_ngcontent-%COMP%]:hover, .loading-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%]   .retry-btn[_ngcontent-%COMP%]:hover, .error-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%]   .retry-btn[_ngcontent-%COMP%]:hover, .error-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%]   .retry-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-status-error);\n}\n\n.editor-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: hidden;\n}\n\n.main-splitter[_ngcontent-%COMP%], .bottom-splitter[_ngcontent-%COMP%] {\n  height: 100%;\n}\n.main-splitter[_ngcontent-%COMP%]     .as-split-area-content, .bottom-splitter[_ngcontent-%COMP%]     .as-split-area-content {\n  overflow: hidden;\n}\n\n.hierarchy-section[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--mj-bg-surface);\n}\n.hierarchy-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%] {\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-bg-surface-sunken);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-shrink: 0;\n}\n.hierarchy-section[_ngcontent-%COMP%]   .section-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.hierarchy-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%]   .hierarchy-controls[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 20px;\n}\n.hierarchy-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%]   .hierarchy-controls[_ngcontent-%COMP%]   .zoom-controls[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 4px;\n}\n.hierarchy-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%]   .hierarchy-controls[_ngcontent-%COMP%]   .zoom-controls[_ngcontent-%COMP%]   .zoom-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  transition: all 0.2s;\n}\n.hierarchy-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%]   .hierarchy-controls[_ngcontent-%COMP%]   .zoom-controls[_ngcontent-%COMP%]   .zoom-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}\n.hierarchy-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%]   .hierarchy-controls[_ngcontent-%COMP%]   .zoom-controls[_ngcontent-%COMP%]   .zoom-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n.hierarchy-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%]   .hierarchy-controls[_ngcontent-%COMP%]   .hierarchy-legend[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 16px;\n}\n.hierarchy-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%]   .hierarchy-controls[_ngcontent-%COMP%]   .hierarchy-legend[_ngcontent-%COMP%]   .legend-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n.hierarchy-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%]   .hierarchy-controls[_ngcontent-%COMP%]   .hierarchy-legend[_ngcontent-%COMP%]   .legend-item[_ngcontent-%COMP%]   .legend-rect[_ngcontent-%COMP%] {\n  width: 20px;\n  height: 12px;\n  border-radius: 2px;\n  border: 1px solid;\n}\n.hierarchy-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%]   .hierarchy-controls[_ngcontent-%COMP%]   .hierarchy-legend[_ngcontent-%COMP%]   .legend-item[_ngcontent-%COMP%]   .legend-rect.level-0[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary-hover);\n}\n.hierarchy-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%]   .hierarchy-controls[_ngcontent-%COMP%]   .hierarchy-legend[_ngcontent-%COMP%]   .legend-item[_ngcontent-%COMP%]   .legend-rect.level-1[_ngcontent-%COMP%] {\n  background: var(--mj-status-success);\n  border-color: var(--mj-color-success-700);\n}\n.hierarchy-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%]   .hierarchy-controls[_ngcontent-%COMP%]   .hierarchy-legend[_ngcontent-%COMP%]   .legend-item[_ngcontent-%COMP%]   .legend-rect.level-2[_ngcontent-%COMP%] {\n  background: var(--mj-status-warning);\n  border-color: var(--mj-status-warning);\n}\n.hierarchy-section[_ngcontent-%COMP%]   .hierarchy-chart[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 300px;\n  overflow: hidden;\n  position: relative;\n}\n.hierarchy-section[_ngcontent-%COMP%]   .hierarchy-chart[_ngcontent-%COMP%]   .chart-help[_ngcontent-%COMP%] {\n  position: absolute;\n  bottom: 10px;\n  left: 10px;\n  background: color-mix(in srgb, var(--mj-bg-surface) 90%, transparent);\n  padding: 6px 10px;\n  border-radius: 4px;\n  border: 1px solid var(--mj-border-default);\n  z-index: 10;\n}\n.hierarchy-section[_ngcontent-%COMP%]   .hierarchy-chart[_ngcontent-%COMP%]   .chart-help[_ngcontent-%COMP%]   small[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n.hierarchy-section[_ngcontent-%COMP%]   .hierarchy-chart[_ngcontent-%COMP%]   .chart-help[_ngcontent-%COMP%]   small[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n.hierarchy-section[_ngcontent-%COMP%]   .hierarchy-chart[_ngcontent-%COMP%]   .empty-hierarchy[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  padding: 40px 20px;\n  text-align: center;\n  color: var(--mj-text-muted);\n}\n.hierarchy-section[_ngcontent-%COMP%]   .hierarchy-chart[_ngcontent-%COMP%]   .empty-hierarchy[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 64px;\n  margin-bottom: 20px;\n  opacity: 0.5;\n}\n.hierarchy-section[_ngcontent-%COMP%]   .hierarchy-chart[_ngcontent-%COMP%]   .empty-hierarchy[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n  margin: 0 0 12px 0;\n  font-size: 18px;\n  color: var(--mj-text-primary);\n}\n.hierarchy-section[_ngcontent-%COMP%]   .hierarchy-chart[_ngcontent-%COMP%]   .empty-hierarchy[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0 0 24px 0;\n  font-size: 14px;\n  color: var(--mj-text-muted);\n  line-height: 1.5;\n}\n.hierarchy-section[_ngcontent-%COMP%]   .hierarchy-chart[_ngcontent-%COMP%]   .empty-hierarchy[_ngcontent-%COMP%]   .create-subagent-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 20px;\n  background: var(--mj-brand-primary);\n  border: none;\n  border-radius: 6px;\n  color: var(--mj-text-inverse);\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: background 0.2s;\n}\n.hierarchy-section[_ngcontent-%COMP%]   .hierarchy-chart[_ngcontent-%COMP%]   .empty-hierarchy[_ngcontent-%COMP%]   .create-subagent-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary);\n}\n\n.prompts-section[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--mj-bg-surface);\n  border-right: 1px solid var(--mj-bg-surface-sunken);\n}\n.prompts-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%] {\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-bg-surface-sunken);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-shrink: 0;\n}\n.prompts-section[_ngcontent-%COMP%]   .section-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.prompts-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%]   .add-prompt-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  background: var(--mj-brand-primary);\n  border: none;\n  border-radius: 4px;\n  color: var(--mj-text-inverse);\n  font-size: 12px;\n  cursor: pointer;\n}\n.prompts-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%]   .add-prompt-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary);\n}\n.prompts-section[_ngcontent-%COMP%]   .prompts-list[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 16px 20px;\n}\n.prompts-section[_ngcontent-%COMP%]   .prompts-list[_ngcontent-%COMP%]   .empty-prompts[_ngcontent-%COMP%] {\n  text-align: center;\n  padding: 40px 20px;\n  color: var(--mj-text-muted);\n}\n.prompts-section[_ngcontent-%COMP%]   .prompts-list[_ngcontent-%COMP%]   .empty-prompts[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 48px;\n  margin-bottom: 16px;\n}\n.prompts-section[_ngcontent-%COMP%]   .prompts-list[_ngcontent-%COMP%]   .empty-prompts[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0 0 20px 0;\n  font-size: 14px;\n}\n.prompts-section[_ngcontent-%COMP%]   .prompts-list[_ngcontent-%COMP%]   .empty-prompts[_ngcontent-%COMP%]   .add-first-prompt-btn[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 16px;\n  background: var(--mj-brand-primary);\n  border: none;\n  border-radius: 4px;\n  color: var(--mj-text-inverse);\n  cursor: pointer;\n}\n.prompts-section[_ngcontent-%COMP%]   .prompts-list[_ngcontent-%COMP%]   .empty-prompts[_ngcontent-%COMP%]   .add-first-prompt-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary);\n}\n.prompts-section[_ngcontent-%COMP%]   .prompts-list[_ngcontent-%COMP%]   .prompt-card[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  margin-bottom: 12px;\n}\n.prompts-section[_ngcontent-%COMP%]   .prompts-list[_ngcontent-%COMP%]   .prompt-card[_ngcontent-%COMP%]   .prompt-header[_ngcontent-%COMP%] {\n  padding: 12px 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.prompts-section[_ngcontent-%COMP%]   .prompts-list[_ngcontent-%COMP%]   .prompt-card[_ngcontent-%COMP%]   .prompt-header[_ngcontent-%COMP%]   .prompt-info[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n  margin: 0 0 4px 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n.prompts-section[_ngcontent-%COMP%]   .prompts-list[_ngcontent-%COMP%]   .prompt-card[_ngcontent-%COMP%]   .prompt-header[_ngcontent-%COMP%]   .prompt-info[_ngcontent-%COMP%]   .prompt-type[_ngcontent-%COMP%] {\n  font-size: 11px;\n  padding: 2px 6px;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-radius: 3px;\n  text-transform: uppercase;\n}\n.prompts-section[_ngcontent-%COMP%]   .prompts-list[_ngcontent-%COMP%]   .prompt-card[_ngcontent-%COMP%]   .prompt-header[_ngcontent-%COMP%]   .prompt-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 4px;\n}\n.prompts-section[_ngcontent-%COMP%]   .prompts-list[_ngcontent-%COMP%]   .prompt-card[_ngcontent-%COMP%]   .prompt-header[_ngcontent-%COMP%]   .prompt-actions[_ngcontent-%COMP%]   .action-btn[_ngcontent-%COMP%] {\n  padding: 4px 8px;\n  background: none;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 3px;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  font-size: 12px;\n}\n.prompts-section[_ngcontent-%COMP%]   .prompts-list[_ngcontent-%COMP%]   .prompt-card[_ngcontent-%COMP%]   .prompt-header[_ngcontent-%COMP%]   .prompt-actions[_ngcontent-%COMP%]   .action-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-color: var(--mj-border-strong);\n}\n.prompts-section[_ngcontent-%COMP%]   .prompts-list[_ngcontent-%COMP%]   .prompt-card[_ngcontent-%COMP%]   .prompt-header[_ngcontent-%COMP%]   .prompt-actions[_ngcontent-%COMP%]   .action-btn.danger[_ngcontent-%COMP%]:hover {\n  background: var(--mj-status-error);\n  border-color: var(--mj-status-error);\n  color: var(--mj-text-inverse);\n}\n.prompts-section[_ngcontent-%COMP%]   .prompts-list[_ngcontent-%COMP%]   .prompt-card[_ngcontent-%COMP%]   .prompt-content[_ngcontent-%COMP%] {\n  padding: 12px 16px;\n}\n.prompts-section[_ngcontent-%COMP%]   .prompts-list[_ngcontent-%COMP%]   .prompt-card[_ngcontent-%COMP%]   .prompt-content[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  line-height: 1.4;\n}\n\n.properties-section[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--mj-bg-surface);\n}\n.properties-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%] {\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-bg-surface-sunken);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-shrink: 0;\n}\n.properties-section[_ngcontent-%COMP%]   .section-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.properties-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%]   .save-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  background: var(--mj-status-success);\n  border: none;\n  border-radius: 4px;\n  color: var(--mj-text-inverse);\n  font-size: 12px;\n  cursor: pointer;\n}\n.properties-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%]   .save-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-color-success-700);\n}\n.properties-section[_ngcontent-%COMP%]   .properties-form[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 20px;\n}\n.properties-section[_ngcontent-%COMP%]   .properties-form[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%] {\n  margin-bottom: 16px;\n}\n.properties-section[_ngcontent-%COMP%]   .properties-form[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  display: block;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 4px;\n}\n.properties-section[_ngcontent-%COMP%]   .properties-form[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%]   .form-input[_ngcontent-%COMP%], .properties-section[_ngcontent-%COMP%]   .properties-form[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%]   .form-select[_ngcontent-%COMP%], .properties-section[_ngcontent-%COMP%]   .properties-form[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%]   .form-textarea[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 8px 12px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  font-size: 13px;\n  background: var(--mj-bg-surface);\n  box-sizing: border-box;\n}\n.properties-section[_ngcontent-%COMP%]   .properties-form[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%]   .form-input[_ngcontent-%COMP%]:focus, .properties-section[_ngcontent-%COMP%]   .properties-form[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%]   .form-select[_ngcontent-%COMP%]:focus, .properties-section[_ngcontent-%COMP%]   .properties-form[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%]   .form-textarea[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n}\n.properties-section[_ngcontent-%COMP%]   .properties-form[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%]   .form-textarea[_ngcontent-%COMP%] {\n  resize: vertical;\n  min-height: 60px;\n}\n.properties-section[_ngcontent-%COMP%]   .properties-form[_ngcontent-%COMP%]   .form-group.checkbox-group[_ngcontent-%COMP%]   .checkbox-label[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n  font-size: 13px;\n  font-weight: 500;\n}\n.properties-section[_ngcontent-%COMP%]   .properties-form[_ngcontent-%COMP%]   .form-group.checkbox-group[_ngcontent-%COMP%]   .checkbox-label[_ngcontent-%COMP%]   input[type=checkbox][_ngcontent-%COMP%] {\n  width: auto;\n  margin: 0;\n}\n.properties-section[_ngcontent-%COMP%]   .properties-form[_ngcontent-%COMP%]   .form-group.checkbox-group[_ngcontent-%COMP%]   small[_ngcontent-%COMP%] {\n  display: block;\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  margin-top: 4px;\n  margin-left: 24px;\n}\n.properties-section[_ngcontent-%COMP%]   .properties-form[_ngcontent-%COMP%]   .form-row[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 16px;\n}\n\n@keyframes _ngcontent-%COMP%_spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n.modal-overlay[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  width: 100vw;\n  height: 100vh;\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 9999;\n  padding: 20px;\n  box-sizing: border-box;\n}\n\n.create-subagent-modal[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border-radius: 8px;\n  width: 100%;\n  max-width: 500px;\n  max-height: calc(100vh - 40px);\n  min-height: 300px;\n  display: flex;\n  flex-direction: column;\n  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);\n  position: relative;\n}\n.create-subagent-modal[_ngcontent-%COMP%]   .modal-header[_ngcontent-%COMP%] {\n  padding: 20px 24px;\n  border-bottom: 1px solid var(--mj-border-default);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.create-subagent-modal[_ngcontent-%COMP%]   .modal-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n.create-subagent-modal[_ngcontent-%COMP%]   .modal-header[_ngcontent-%COMP%]   .close-btn[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  padding: 8px;\n  cursor: pointer;\n  color: var(--mj-text-muted);\n  border-radius: 4px;\n}\n.create-subagent-modal[_ngcontent-%COMP%]   .modal-header[_ngcontent-%COMP%]   .close-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-primary);\n}\n.create-subagent-modal[_ngcontent-%COMP%]   .modal-body[_ngcontent-%COMP%] {\n  padding: 24px;\n  flex: 1;\n  overflow-y: auto;\n}\n.create-subagent-modal[_ngcontent-%COMP%]   .modal-body[_ngcontent-%COMP%]   .error-message[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-status-error) 20%, var(--mj-bg-surface));\n  border-radius: 6px;\n  padding: 12px;\n  margin-bottom: 20px;\n  color: var(--mj-status-error);\n  font-size: 14px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.create-subagent-modal[_ngcontent-%COMP%]   .modal-body[_ngcontent-%COMP%]   .error-message[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n.create-subagent-modal[_ngcontent-%COMP%]   .modal-body[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%] {\n  margin-bottom: 20px;\n}\n.create-subagent-modal[_ngcontent-%COMP%]   .modal-body[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  display: block;\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 8px;\n}\n.create-subagent-modal[_ngcontent-%COMP%]   .modal-body[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%]   .form-input[_ngcontent-%COMP%], .create-subagent-modal[_ngcontent-%COMP%]   .modal-body[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%]   .form-textarea[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 12px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  font-size: 14px;\n  background: var(--mj-bg-surface);\n  box-sizing: border-box;\n  transition: border-color 0.2s;\n}\n.create-subagent-modal[_ngcontent-%COMP%]   .modal-body[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%]   .form-input[_ngcontent-%COMP%]:focus, .create-subagent-modal[_ngcontent-%COMP%]   .modal-body[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%]   .form-textarea[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n}\n.create-subagent-modal[_ngcontent-%COMP%]   .modal-body[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%]   .form-input[_ngcontent-%COMP%]::placeholder, .create-subagent-modal[_ngcontent-%COMP%]   .modal-body[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%]   .form-textarea[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-disabled);\n}\n.create-subagent-modal[_ngcontent-%COMP%]   .modal-body[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%]   .form-textarea[_ngcontent-%COMP%] {\n  resize: vertical;\n  min-height: 80px;\n  font-family: inherit;\n}\n.create-subagent-modal[_ngcontent-%COMP%]   .modal-body[_ngcontent-%COMP%]   .parent-info[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  padding: 12px;\n  font-size: 14px;\n  color: var(--mj-text-muted);\n}\n.create-subagent-modal[_ngcontent-%COMP%]   .modal-body[_ngcontent-%COMP%]   .parent-info[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {\n  color: var(--mj-text-primary);\n}\n.create-subagent-modal[_ngcontent-%COMP%]   .modal-footer[_ngcontent-%COMP%] {\n  padding: 20px 24px;\n  border-top: 1px solid var(--mj-border-default);\n  display: flex;\n  justify-content: flex-end;\n  gap: 12px;\n}\n.create-subagent-modal[_ngcontent-%COMP%]   .modal-footer[_ngcontent-%COMP%]   .cancel-btn[_ngcontent-%COMP%], .create-subagent-modal[_ngcontent-%COMP%]   .modal-footer[_ngcontent-%COMP%]   .create-btn[_ngcontent-%COMP%] {\n  padding: 10px 20px;\n  border: 1px solid;\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.2s;\n}\n.create-subagent-modal[_ngcontent-%COMP%]   .modal-footer[_ngcontent-%COMP%]   .cancel-btn[_ngcontent-%COMP%]:disabled, .create-subagent-modal[_ngcontent-%COMP%]   .modal-footer[_ngcontent-%COMP%]   .create-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.create-subagent-modal[_ngcontent-%COMP%]   .modal-footer[_ngcontent-%COMP%]   .cancel-btn[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border-color: var(--mj-border-default);\n  color: var(--mj-text-muted);\n}\n.create-subagent-modal[_ngcontent-%COMP%]   .modal-footer[_ngcontent-%COMP%]   .cancel-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-border-strong);\n}\n.create-subagent-modal[_ngcontent-%COMP%]   .modal-footer[_ngcontent-%COMP%]   .create-btn[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.create-subagent-modal[_ngcontent-%COMP%]   .modal-footer[_ngcontent-%COMP%]   .create-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n}\n.create-subagent-modal[_ngcontent-%COMP%]   .modal-footer[_ngcontent-%COMP%]   .create-btn[_ngcontent-%COMP%]   .loading-spinner-sm[_ngcontent-%COMP%] {\n  width: 14px;\n  height: 14px;\n  border: 2px solid transparent;\n  border-top-color: currentColor;\n  border-radius: 50%;\n  animation: _ngcontent-%COMP%_spin 1s linear infinite;\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AgentEditorComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-agent-editor', template: "<div class=\"agent-editor-container\">\n  <!-- Header -->\n  <div class=\"editor-header\">\n    <div class=\"header-info\">\n      <div class=\"header-actions\">\n        <button \n          type=\"button\" \n          class=\"back-btn\"\n          (click)=\"closeEditor()\"\n          title=\"Back to Agent List\">\n          <i class=\"fa-solid fa-arrow-left\"></i>\n          Back to Agents\n        </button>\n        \n        @if (currentAgent) {\n          <button \n            type=\"button\" \n            class=\"open-btn\"\n            (click)=\"openCurrentAgentRecord()\"\n            title=\"Open Agent Record\">\n            <i class=\"fa-solid fa-external-link\"></i>\n            Open Record\n          </button>\n        }\n      </div>\n      \n      @if (currentAgent) {\n        <div class=\"agent-breadcrumb\">\n          <h2>{{ currentAgent.Name }}</h2>\n          @if (currentAgent.Parent) {\n            <span class=\"breadcrumb-item\">\n              <i class=\"fa-solid fa-chevron-right\"></i>\n              Child of {{ currentAgent.Parent }}\n            </span>\n          }\n        </div>\n      }\n    </div>\n  </div>\n\n  <!-- Tab Navigation -->\n  @if (!isLoading && !error && currentAgent) {\n    <div class=\"tab-navigation\">\n      <button \n        type=\"button\" \n        class=\"tab-btn\"\n        [class.active]=\"activeTab === 'hierarchy'\"\n        (click)=\"setActiveTab('hierarchy')\">\n        <i class=\"fa-solid fa-sitemap\"></i>\n        Hierarchy\n      </button>\n      \n      <button \n        type=\"button\" \n        class=\"tab-btn\"\n        [class.active]=\"activeTab === 'prompts'\"\n        (click)=\"setActiveTab('prompts')\">\n        <i class=\"fa-solid fa-comment-dots\"></i>\n        Prompts\n      </button>\n      \n      <button \n        type=\"button\" \n        class=\"tab-btn\"\n        [class.active]=\"activeTab === 'properties'\"\n        (click)=\"setActiveTab('properties')\">\n        <i class=\"fa-solid fa-cog\"></i>\n        Properties\n      </button>\n    </div>\n  }\n\n  <!-- Loading State -->\n  @if (isLoading) {\n    <div class=\"loading-container\">\n      <mj-loading text=\"Loading agent data...\" size=\"large\"></mj-loading>\n    </div>\n  }\n\n  <!-- Error State -->\n  @if (error) {\n    <div class=\"error-container\">\n      <div class=\"error-content\">\n        <i class=\"fa-solid fa-exclamation-triangle\"></i>\n        <h3>Error Loading Agent</h3>\n        <p>{{ error }}</p>\n        <button class=\"retry-btn\" (click)=\"loadAgentData()\">\n          <i class=\"fa-solid fa-retry\"></i>\n          Retry\n        </button>\n      </div>\n    </div>\n  }\n\n  <!-- Tab Content -->\n  @if (!isLoading && !error && currentAgent) {\n    <div class=\"tab-content\" >\n      \n      <!-- Hierarchy Tab -->\n      @if (activeTab === 'hierarchy') {\n        <div class=\"hierarchy-section\" >\n          <div class=\"section-header\">\n            <h3>\n              <i class=\"fa-solid fa-sitemap\"></i>\n              Agent Hierarchy\n            </h3>\n            \n            <div class=\"hierarchy-controls\">\n              <div class=\"zoom-controls\">\n                <button \n                  type=\"button\" \n                  class=\"zoom-btn\"\n                  (click)=\"zoomIn()\"\n                  title=\"Zoom In\">\n                  <i class=\"fa-solid fa-plus\"></i>\n                </button>\n                <button \n                  type=\"button\" \n                  class=\"zoom-btn\"\n                  (click)=\"zoomOut()\"\n                  title=\"Zoom Out\">\n                  <i class=\"fa-solid fa-minus\"></i>\n                </button>\n                <button \n                  type=\"button\" \n                  class=\"zoom-btn\"\n                  (click)=\"resetZoom()\"\n                  title=\"Reset Zoom\">\n                  <i class=\"fa-solid fa-expand\"></i>\n                </button>\n              </div>\n              \n              <div class=\"hierarchy-legend\">\n                <div class=\"legend-item\">\n                  <div class=\"legend-rect level-0\"></div>\n                  <span>Root</span>\n                </div>\n                <div class=\"legend-item\">\n                  <div class=\"legend-rect level-1\"></div>\n                  <span>Level 1</span>\n                </div>\n                <div class=\"legend-item\">\n                  <div class=\"legend-rect level-2\"></div>\n                  <span>Level 2+</span>\n                </div>\n              </div>\n            </div>\n          </div>\n          \n          <div class=\"hierarchy-chart\" #hierarchyChart >\n            <!-- Help text overlay -->\n            @if (hierarchyData && (hasChildren() || hasParent())) {\n              <div class=\"chart-help\">\n                <small>\n                  <i class=\"fa-solid fa-hand-pointer\"></i>\n                  Drag to pan \u2022 Use zoom controls or scroll to zoom \u2022 Click nodes to navigate\n                </small>\n              </div>\n            }\n            \n            <!-- Empty state for hierarchy -->\n            @if (!hierarchyData || (!hasChildren() && !hasParent())) {\n              <div class=\"empty-hierarchy\">\n                <i class=\"fa-solid fa-sitemap\"></i>\n                <h4>No Agent Hierarchy</h4>\n                <p>This agent doesn't have any parent or child agents yet.</p>\n                <button class=\"create-subagent-btn\" (click)=\"openCreateSubAgent()\">\n                  <i class=\"fa-solid fa-plus\"></i>\n                  Create Sub-Agent\n                </button>\n              </div>\n            }\n          </div>\n        </div>\n      }\n      \n      <!-- Prompts Tab -->\n      @if (activeTab === 'prompts') {\n        <div class=\"prompts-section\" >\n          <div class=\"section-header\">\n            <h3>\n              <i class=\"fa-solid fa-comment-dots\"></i>\n              Agent Prompts\n            </h3>\n            <button class=\"add-prompt-btn\" title=\"Add New Prompt\">\n              <i class=\"fa-solid fa-plus\"></i>\n              Add Prompt\n            </button>\n          </div>\n          \n          <div class=\"prompts-list\">\n            @if (agentPrompts.length === 0) {\n              <div class=\"empty-prompts\">\n                <i class=\"fa-solid fa-comment-dots\"></i>\n                <p>No prompts configured for this agent</p>\n                <button class=\"add-first-prompt-btn\">\n                  <i class=\"fa-solid fa-plus\"></i>\n                  Add First Prompt\n                </button>\n              </div>\n            } @else {\n              @for (prompt of agentPrompts; track prompt.id) {\n                <div class=\"prompt-card\">\n                  <div class=\"prompt-header\">\n                    <div class=\"prompt-info\">\n                      <h4>{{ prompt.name }}</h4>\n                      <span class=\"prompt-type\">{{ prompt.type }}</span>\n                    </div>\n                    <div class=\"prompt-actions\">\n                      <button class=\"action-btn\" title=\"Edit Prompt\">\n                        <i class=\"fa-solid fa-edit\"></i>\n                      </button>\n                      <button class=\"action-btn danger\" title=\"Delete Prompt\">\n                        <i class=\"fa-solid fa-trash\"></i>\n                      </button>\n                    </div>\n                  </div>\n                  <div class=\"prompt-content\">\n                    <p>{{ prompt.content }}</p>\n                  </div>\n                </div>\n              }\n            }\n          </div>\n        </div>\n      }\n      \n      <!-- Properties Tab -->\n      @if (activeTab === 'properties') {\n        <div class=\"properties-section\" >\n          <div class=\"section-header\">\n            <h3>\n              <i class=\"fa-solid fa-cog\"></i>\n              Agent Properties\n            </h3>\n            <button class=\"save-btn\" title=\"Save Changes\">\n              <i class=\"fa-solid fa-save\"></i>\n              Save\n            </button>\n          </div>\n          \n          <div class=\"properties-form\">\n            <div class=\"form-group\">\n              <label>Name</label>\n              <input \n                type=\"text\" \n                class=\"form-input\"\n                [value]=\"currentAgent.Name\"\n                placeholder=\"Agent name\">\n            </div>\n            \n            <div class=\"form-group\">\n              <label>Description</label>\n              <textarea \n                class=\"form-textarea\"\n                [value]=\"currentAgent.Description\"\n                placeholder=\"Agent description\"\n                rows=\"3\"></textarea>\n            </div>\n            \n            <div class=\"form-row\">\n              <div class=\"form-group\">\n                <label>Execution Mode</label>\n                <select class=\"form-select\" [value]=\"currentAgent.ExecutionMode\">\n                  <option value=\"Sequential\">Sequential</option>\n                  <option value=\"Parallel\">Parallel</option>\n                </select>\n              </div>\n              \n              <div class=\"form-group\">\n                <label>Execution Order</label>\n                <input \n                  type=\"number\" \n                  class=\"form-input\"\n                  [value]=\"currentAgent.ExecutionOrder\"\n                  min=\"0\">\n              </div>\n            </div>\n            \n            <div class=\"form-group checkbox-group\">\n              <label class=\"checkbox-label\">\n                <input \n                  type=\"checkbox\" \n                  [checked]=\"currentAgent.ExposeAsAction\">\n                <span class=\"checkmark\"></span>\n                Expose as Action\n              </label>\n              <small>Allow this agent to be used as an action by other agents</small>\n            </div>\n            \n            <div class=\"form-group checkbox-group\">\n              <label class=\"checkbox-label\">\n                <input \n                  type=\"checkbox\" \n                  [checked]=\"currentAgent.EnableContextCompression\">\n                <span class=\"checkmark\"></span>\n                Enable Context Compression\n              </label>\n              <small>Automatically compress conversation context when threshold is reached</small>\n            </div>\n            \n            @if (currentAgent.EnableContextCompression) {\n              <div class=\"form-row\">\n                <div class=\"form-group\">\n                  <label>Message Threshold</label>\n                  <input \n                    type=\"number\" \n                    class=\"form-input\"\n                    [value]=\"currentAgent.ContextCompressionMessageThreshold\"\n                    min=\"1\"\n                    placeholder=\"Number of messages\">\n                </div>\n                \n                <div class=\"form-group\">\n                  <label>Retention Count</label>\n                  <input \n                    type=\"number\" \n                    class=\"form-input\"\n                    [value]=\"currentAgent.ContextCompressionMessageRetentionCount\"\n                    min=\"0\"\n                    placeholder=\"Messages to keep\">\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Sub-Agent creation now uses CreateAgentService slide-in panel -->\n</div>", styles: [".agent-editor-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--mj-bg-surface-card);\n}\n\n.editor-header {\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  padding: 16px 20px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-shrink: 0;\n}\n.editor-header .header-info {\n  display: flex;\n  align-items: center;\n  gap: 20px;\n}\n.editor-header .header-info .header-actions {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n.editor-header .header-info .back-btn, .editor-header .header-info .open-btn {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 16px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  text-decoration: none;\n  font-size: 14px;\n  cursor: pointer;\n  transition: all 0.2s;\n}\n.editor-header .header-info .back-btn:hover, .editor-header .header-info .open-btn:hover {\n  border-color: var(--mj-border-strong);\n}\n.editor-header .header-info .back-btn {\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-muted);\n}\n.editor-header .header-info .back-btn:hover {\n  background: var(--mj-border-default);\n  color: var(--mj-text-primary);\n}\n.editor-header .header-info .open-btn {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n.editor-header .header-info .open-btn:hover {\n  background: var(--mj-brand-primary-hover);\n}\n.editor-header .header-info .agent-breadcrumb h2 {\n  margin: 0;\n  font-size: 24px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n.editor-header .header-info .agent-breadcrumb .breadcrumb-item {\n  font-size: 14px;\n  color: var(--mj-text-muted);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-top: 4px;\n}\n.editor-header .header-controls {\n  display: flex;\n  gap: 8px;\n}\n.editor-header .header-controls .control-btn {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 12px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  color: var(--mj-text-muted);\n  font-size: 12px;\n  cursor: pointer;\n  transition: all 0.2s;\n}\n.editor-header .header-controls .control-btn:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}\n.editor-header .header-controls .control-btn.active {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n.tab-navigation {\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  padding: 0 20px;\n  display: flex;\n  gap: 2px;\n  flex-shrink: 0;\n}\n.tab-navigation .tab-btn {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 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;\n}\n.tab-navigation .tab-btn:hover {\n  color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-card);\n}\n.tab-navigation .tab-btn.active {\n  color: var(--mj-brand-primary);\n  border-bottom-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-card);\n}\n.tab-navigation .tab-btn i {\n  font-size: 16px;\n}\n\n.tab-content {\n  flex: 1;\n  overflow: hidden;\n}\n\n.loading-container, .error-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n}\n.loading-container .loading-content, .loading-container .error-content, .error-container .loading-content, .error-container .error-content {\n  text-align: center;\n}\n.loading-container .loading-content .loading-spinner, .loading-container .error-content .loading-spinner, .error-container .loading-content .loading-spinner, .error-container .error-content .loading-spinner {\n  position: relative;\n  width: 60px;\n  height: 60px;\n  margin: 0 auto 20px;\n}\n.loading-container .loading-content .spinner-ring, .loading-container .error-content .spinner-ring, .error-container .loading-content .spinner-ring, .error-container .error-content .spinner-ring {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border: 3px solid transparent;\n  border-radius: 50%;\n  animation: spin 1.5s linear infinite;\n}\n.loading-container .loading-content .spinner-ring:nth-child(1), .loading-container .error-content .spinner-ring:nth-child(1), .error-container .loading-content .spinner-ring:nth-child(1), .error-container .error-content .spinner-ring:nth-child(1) {\n  border-top-color: var(--mj-brand-primary);\n  animation-delay: 0s;\n}\n.loading-container .loading-content .spinner-ring:nth-child(2), .loading-container .error-content .spinner-ring:nth-child(2), .error-container .loading-content .spinner-ring:nth-child(2), .error-container .error-content .spinner-ring:nth-child(2) {\n  border-top-color: var(--mj-brand-primary);\n  animation-delay: 0.3s;\n  transform: scale(0.8);\n}\n.loading-container .loading-content .spinner-ring:nth-child(3), .loading-container .error-content .spinner-ring:nth-child(3), .error-container .loading-content .spinner-ring:nth-child(3), .error-container .error-content .spinner-ring:nth-child(3) {\n  border-top-color: var(--mj-status-warning);\n  animation-delay: 0.6s;\n  transform: scale(0.6);\n}\n.loading-container .loading-content .loading-text, .loading-container .error-content .loading-text, .error-container .loading-content .loading-text, .error-container .error-content .loading-text {\n  font-size: 16px;\n  color: var(--mj-text-muted);\n}\n.loading-container .loading-content i, .loading-container .error-content i, .error-container .loading-content i, .error-container .error-content i {\n  font-size: 48px;\n  color: var(--mj-status-error);\n  margin-bottom: 16px;\n}\n.loading-container .loading-content h3, .loading-container .error-content h3, .error-container .loading-content h3, .error-container .error-content h3 {\n  margin: 0 0 8px 0;\n  color: var(--mj-text-primary);\n}\n.loading-container .loading-content p, .loading-container .error-content p, .error-container .loading-content p, .error-container .error-content p {\n  margin: 0 0 16px 0;\n  color: var(--mj-text-muted);\n}\n.loading-container .loading-content .retry-btn, .loading-container .error-content .retry-btn, .error-container .loading-content .retry-btn, .error-container .error-content .retry-btn {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 16px;\n  background: var(--mj-status-error);\n  border: none;\n  border-radius: 4px;\n  color: var(--mj-text-inverse);\n  cursor: pointer;\n}\n.loading-container .loading-content .retry-btn:hover, .loading-container .error-content .retry-btn:hover, .error-container .loading-content .retry-btn:hover, .error-container .error-content .retry-btn:hover {\n  background: var(--mj-status-error);\n}\n\n.editor-content {\n  flex: 1;\n  overflow: hidden;\n}\n\n.main-splitter, .bottom-splitter {\n  height: 100%;\n}\n.main-splitter .k-pane, .bottom-splitter .k-pane {\n  overflow: hidden;\n}\n\n.hierarchy-section {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--mj-bg-surface);\n}\n.hierarchy-section .section-header {\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-bg-surface-sunken);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-shrink: 0;\n}\n.hierarchy-section .section-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.hierarchy-section .section-header .hierarchy-controls {\n  display: flex;\n  align-items: center;\n  gap: 20px;\n}\n.hierarchy-section .section-header .hierarchy-controls .zoom-controls {\n  display: flex;\n  gap: 4px;\n}\n.hierarchy-section .section-header .hierarchy-controls .zoom-controls .zoom-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  transition: all 0.2s;\n}\n.hierarchy-section .section-header .hierarchy-controls .zoom-controls .zoom-btn:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}\n.hierarchy-section .section-header .hierarchy-controls .zoom-controls .zoom-btn i {\n  font-size: 12px;\n}\n.hierarchy-section .section-header .hierarchy-controls .hierarchy-legend {\n  display: flex;\n  gap: 16px;\n}\n.hierarchy-section .section-header .hierarchy-controls .hierarchy-legend .legend-item {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n.hierarchy-section .section-header .hierarchy-controls .hierarchy-legend .legend-item .legend-rect {\n  width: 20px;\n  height: 12px;\n  border-radius: 2px;\n  border: 1px solid;\n}\n.hierarchy-section .section-header .hierarchy-controls .hierarchy-legend .legend-item .legend-rect.level-0 {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary-hover);\n}\n.hierarchy-section .section-header .hierarchy-controls .hierarchy-legend .legend-item .legend-rect.level-1 {\n  background: var(--mj-status-success);\n  border-color: var(--mj-color-success-700);\n}\n.hierarchy-section .section-header .hierarchy-controls .hierarchy-legend .legend-item .legend-rect.level-2 {\n  background: var(--mj-status-warning);\n  border-color: var(--mj-status-warning);\n}\n.hierarchy-section .hierarchy-chart {\n  flex: 1;\n  min-height: 300px;\n  overflow: hidden;\n  position: relative;\n}\n.hierarchy-section .hierarchy-chart .chart-help {\n  position: absolute;\n  bottom: 10px;\n  left: 10px;\n  background: color-mix(in srgb, var(--mj-bg-surface) 90%, transparent);\n  padding: 6px 10px;\n  border-radius: 4px;\n  border: 1px solid var(--mj-border-default);\n  z-index: 10;\n}\n.hierarchy-section .hierarchy-chart .chart-help small {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n.hierarchy-section .hierarchy-chart .chart-help small i {\n  color: var(--mj-brand-primary);\n}\n.hierarchy-section .hierarchy-chart .empty-hierarchy {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  padding: 40px 20px;\n  text-align: center;\n  color: var(--mj-text-muted);\n}\n.hierarchy-section .hierarchy-chart .empty-hierarchy i {\n  font-size: 64px;\n  margin-bottom: 20px;\n  opacity: 0.5;\n}\n.hierarchy-section .hierarchy-chart .empty-hierarchy h4 {\n  margin: 0 0 12px 0;\n  font-size: 18px;\n  color: var(--mj-text-primary);\n}\n.hierarchy-section .hierarchy-chart .empty-hierarchy p {\n  margin: 0 0 24px 0;\n  font-size: 14px;\n  color: var(--mj-text-muted);\n  line-height: 1.5;\n}\n.hierarchy-section .hierarchy-chart .empty-hierarchy .create-subagent-btn {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 20px;\n  background: var(--mj-brand-primary);\n  border: none;\n  border-radius: 6px;\n  color: var(--mj-text-inverse);\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: background 0.2s;\n}\n.hierarchy-section .hierarchy-chart .empty-hierarchy .create-subagent-btn:hover {\n  background: var(--mj-brand-primary);\n}\n\n.prompts-section {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--mj-bg-surface);\n  border-right: 1px solid var(--mj-bg-surface-sunken);\n}\n.prompts-section .section-header {\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-bg-surface-sunken);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-shrink: 0;\n}\n.prompts-section .section-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.prompts-section .section-header .add-prompt-btn {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  background: var(--mj-brand-primary);\n  border: none;\n  border-radius: 4px;\n  color: var(--mj-text-inverse);\n  font-size: 12px;\n  cursor: pointer;\n}\n.prompts-section .section-header .add-prompt-btn:hover {\n  background: var(--mj-brand-primary);\n}\n.prompts-section .prompts-list {\n  flex: 1;\n  overflow-y: auto;\n  padding: 16px 20px;\n}\n.prompts-section .prompts-list .empty-prompts {\n  text-align: center;\n  padding: 40px 20px;\n  color: var(--mj-text-muted);\n}\n.prompts-section .prompts-list .empty-prompts i {\n  font-size: 48px;\n  margin-bottom: 16px;\n}\n.prompts-section .prompts-list .empty-prompts p {\n  margin: 0 0 20px 0;\n  font-size: 14px;\n}\n.prompts-section .prompts-list .empty-prompts .add-first-prompt-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 16px;\n  background: var(--mj-brand-primary);\n  border: none;\n  border-radius: 4px;\n  color: var(--mj-text-inverse);\n  cursor: pointer;\n}\n.prompts-section .prompts-list .empty-prompts .add-first-prompt-btn:hover {\n  background: var(--mj-brand-primary);\n}\n.prompts-section .prompts-list .prompt-card {\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  margin-bottom: 12px;\n}\n.prompts-section .prompts-list .prompt-card .prompt-header {\n  padding: 12px 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.prompts-section .prompts-list .prompt-card .prompt-header .prompt-info h4 {\n  margin: 0 0 4px 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n.prompts-section .prompts-list .prompt-card .prompt-header .prompt-info .prompt-type {\n  font-size: 11px;\n  padding: 2px 6px;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-radius: 3px;\n  text-transform: uppercase;\n}\n.prompts-section .prompts-list .prompt-card .prompt-header .prompt-actions {\n  display: flex;\n  gap: 4px;\n}\n.prompts-section .prompts-list .prompt-card .prompt-header .prompt-actions .action-btn {\n  padding: 4px 8px;\n  background: none;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 3px;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  font-size: 12px;\n}\n.prompts-section .prompts-list .prompt-card .prompt-header .prompt-actions .action-btn:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-color: var(--mj-border-strong);\n}\n.prompts-section .prompts-list .prompt-card .prompt-header .prompt-actions .action-btn.danger:hover {\n  background: var(--mj-status-error);\n  border-color: var(--mj-status-error);\n  color: var(--mj-text-inverse);\n}\n.prompts-section .prompts-list .prompt-card .prompt-content {\n  padding: 12px 16px;\n}\n.prompts-section .prompts-list .prompt-card .prompt-content p {\n  margin: 0;\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  line-height: 1.4;\n}\n\n.properties-section {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--mj-bg-surface);\n}\n.properties-section .section-header {\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-bg-surface-sunken);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-shrink: 0;\n}\n.properties-section .section-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.properties-section .section-header .save-btn {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  background: var(--mj-status-success);\n  border: none;\n  border-radius: 4px;\n  color: var(--mj-text-inverse);\n  font-size: 12px;\n  cursor: pointer;\n}\n.properties-section .section-header .save-btn:hover {\n  background: var(--mj-color-success-700);\n}\n.properties-section .properties-form {\n  flex: 1;\n  overflow-y: auto;\n  padding: 20px;\n}\n.properties-section .properties-form .form-group {\n  margin-bottom: 16px;\n}\n.properties-section .properties-form .form-group label {\n  display: block;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 4px;\n}\n.properties-section .properties-form .form-group .form-input, .properties-section .properties-form .form-group .form-select, .properties-section .properties-form .form-group .form-textarea {\n  width: 100%;\n  padding: 8px 12px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  font-size: 13px;\n  background: var(--mj-bg-surface);\n  box-sizing: border-box;\n}\n.properties-section .properties-form .form-group .form-input:focus, .properties-section .properties-form .form-group .form-select:focus, .properties-section .properties-form .form-group .form-textarea:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n}\n.properties-section .properties-form .form-group .form-textarea {\n  resize: vertical;\n  min-height: 60px;\n}\n.properties-section .properties-form .form-group.checkbox-group .checkbox-label {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n  font-size: 13px;\n  font-weight: 500;\n}\n.properties-section .properties-form .form-group.checkbox-group .checkbox-label input[type=checkbox] {\n  width: auto;\n  margin: 0;\n}\n.properties-section .properties-form .form-group.checkbox-group small {\n  display: block;\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  margin-top: 4px;\n  margin-left: 24px;\n}\n.properties-section .properties-form .form-row {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 16px;\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n.modal-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  width: 100vw;\n  height: 100vh;\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 9999;\n  padding: 20px;\n  box-sizing: border-box;\n}\n\n.create-subagent-modal {\n  background: var(--mj-bg-surface);\n  border-radius: 8px;\n  width: 100%;\n  max-width: 500px;\n  max-height: calc(100vh - 40px);\n  min-height: 300px;\n  display: flex;\n  flex-direction: column;\n  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);\n  position: relative;\n}\n.create-subagent-modal .modal-header {\n  padding: 20px 24px;\n  border-bottom: 1px solid var(--mj-border-default);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.create-subagent-modal .modal-header h3 {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n.create-subagent-modal .modal-header .close-btn {\n  background: none;\n  border: none;\n  padding: 8px;\n  cursor: pointer;\n  color: var(--mj-text-muted);\n  border-radius: 4px;\n}\n.create-subagent-modal .modal-header .close-btn:hover {\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-primary);\n}\n.create-subagent-modal .modal-body {\n  padding: 24px;\n  flex: 1;\n  overflow-y: auto;\n}\n.create-subagent-modal .modal-body .error-message {\n  background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-status-error) 20%, var(--mj-bg-surface));\n  border-radius: 6px;\n  padding: 12px;\n  margin-bottom: 20px;\n  color: var(--mj-status-error);\n  font-size: 14px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.create-subagent-modal .modal-body .error-message i {\n  color: var(--mj-status-error);\n}\n.create-subagent-modal .modal-body .form-group {\n  margin-bottom: 20px;\n}\n.create-subagent-modal .modal-body .form-group label {\n  display: block;\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 8px;\n}\n.create-subagent-modal .modal-body .form-group .form-input, .create-subagent-modal .modal-body .form-group .form-textarea {\n  width: 100%;\n  padding: 12px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  font-size: 14px;\n  background: var(--mj-bg-surface);\n  box-sizing: border-box;\n  transition: border-color 0.2s;\n}\n.create-subagent-modal .modal-body .form-group .form-input:focus, .create-subagent-modal .modal-body .form-group .form-textarea:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n}\n.create-subagent-modal .modal-body .form-group .form-input::placeholder, .create-subagent-modal .modal-body .form-group .form-textarea::placeholder {\n  color: var(--mj-text-disabled);\n}\n.create-subagent-modal .modal-body .form-group .form-textarea {\n  resize: vertical;\n  min-height: 80px;\n  font-family: inherit;\n}\n.create-subagent-modal .modal-body .parent-info {\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  padding: 12px;\n  font-size: 14px;\n  color: var(--mj-text-muted);\n}\n.create-subagent-modal .modal-body .parent-info strong {\n  color: var(--mj-text-primary);\n}\n.create-subagent-modal .modal-footer {\n  padding: 20px 24px;\n  border-top: 1px solid var(--mj-border-default);\n  display: flex;\n  justify-content: flex-end;\n  gap: 12px;\n}\n.create-subagent-modal .modal-footer .cancel-btn, .create-subagent-modal .modal-footer .create-btn {\n  padding: 10px 20px;\n  border: 1px solid;\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.2s;\n}\n.create-subagent-modal .modal-footer .cancel-btn:disabled, .create-subagent-modal .modal-footer .create-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.create-subagent-modal .modal-footer .cancel-btn {\n  background: var(--mj-bg-surface);\n  border-color: var(--mj-border-default);\n  color: var(--mj-text-muted);\n}\n.create-subagent-modal .modal-footer .cancel-btn:hover:not(:disabled) {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-border-strong);\n}\n.create-subagent-modal .modal-footer .create-btn {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.create-subagent-modal .modal-footer .create-btn:hover:not(:disabled) {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n}\n.create-subagent-modal .modal-footer .create-btn .loading-spinner-sm {\n  width: 14px;\n  height: 14px;\n  border: 2px solid transparent;\n  border-top-color: currentColor;\n  border-radius: 50%;\n  animation: spin 1s linear infinite;\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-agent-editor', template: "<div class=\"agent-editor-container\">\n  <!-- Header -->\n  <div class=\"editor-header\">\n    <div class=\"header-info\">\n      <div class=\"header-actions\">\n        <button \n          type=\"button\" \n          class=\"back-btn\"\n          (click)=\"closeEditor()\"\n          title=\"Back to Agent List\">\n          <i class=\"fa-solid fa-arrow-left\"></i>\n          Back to Agents\n        </button>\n        \n        @if (currentAgent) {\n          <button \n            type=\"button\" \n            class=\"open-btn\"\n            (click)=\"openCurrentAgentRecord()\"\n            title=\"Open Agent Record\">\n            <i class=\"fa-solid fa-external-link\"></i>\n            Open Record\n          </button>\n        }\n      </div>\n      \n      @if (currentAgent) {\n        <div class=\"agent-breadcrumb\">\n          <h2>{{ currentAgent.Name }}</h2>\n          @if (currentAgent.Parent) {\n            <span class=\"breadcrumb-item\">\n              <i class=\"fa-solid fa-chevron-right\"></i>\n              Child of {{ currentAgent.Parent }}\n            </span>\n          }\n        </div>\n      }\n    </div>\n  </div>\n\n  <!-- Tab Navigation -->\n  @if (!isLoading && !error && currentAgent) {\n    <div class=\"tab-navigation\">\n      <button \n        type=\"button\" \n        class=\"tab-btn\"\n        [class.active]=\"activeTab === 'hierarchy'\"\n        (click)=\"setActiveTab('hierarchy')\">\n        <i class=\"fa-solid fa-sitemap\"></i>\n        Hierarchy\n      </button>\n      \n      <button \n        type=\"button\" \n        class=\"tab-btn\"\n        [class.active]=\"activeTab === 'prompts'\"\n        (click)=\"setActiveTab('prompts')\">\n        <i class=\"fa-solid fa-comment-dots\"></i>\n        Prompts\n      </button>\n      \n      <button \n        type=\"button\" \n        class=\"tab-btn\"\n        [class.active]=\"activeTab === 'properties'\"\n        (click)=\"setActiveTab('properties')\">\n        <i class=\"fa-solid fa-cog\"></i>\n        Properties\n      </button>\n    </div>\n  }\n\n  <!-- Loading State -->\n  @if (isLoading) {\n    <div class=\"loading-container\">\n      <mj-loading text=\"Loading agent data...\" size=\"large\"></mj-loading>\n    </div>\n  }\n\n  <!-- Error State -->\n  @if (error) {\n    <div class=\"error-container\">\n      <div class=\"error-content\">\n        <i class=\"fa-solid fa-exclamation-triangle\"></i>\n        <h3>Error Loading Agent</h3>\n        <p>{{ error }}</p>\n        <button class=\"retry-btn\" (click)=\"loadAgentData()\">\n          <i class=\"fa-solid fa-retry\"></i>\n          Retry\n        </button>\n      </div>\n    </div>\n  }\n\n  <!-- Tab Content -->\n  @if (!isLoading && !error && currentAgent) {\n    <div class=\"tab-content\" >\n      \n      <!-- Hierarchy Tab -->\n      @if (activeTab === 'hierarchy') {\n        <div class=\"hierarchy-section\" >\n          <div class=\"section-header\">\n            <h3>\n              <i class=\"fa-solid fa-sitemap\"></i>\n              Agent Hierarchy\n            </h3>\n            \n            <div class=\"hierarchy-controls\">\n              <div class=\"zoom-controls\">\n                <button \n                  type=\"button\" \n                  class=\"zoom-btn\"\n                  (click)=\"zoomIn()\"\n                  title=\"Zoom In\">\n                  <i class=\"fa-solid fa-plus\"></i>\n                </button>\n                <button \n                  type=\"button\" \n                  class=\"zoom-btn\"\n                  (click)=\"zoomOut()\"\n                  title=\"Zoom Out\">\n                  <i class=\"fa-solid fa-minus\"></i>\n                </button>\n                <button \n                  type=\"button\" \n                  class=\"zoom-btn\"\n                  (click)=\"resetZoom()\"\n                  title=\"Reset Zoom\">\n                  <i class=\"fa-solid fa-expand\"></i>\n                </button>\n              </div>\n              \n              <div class=\"hierarchy-legend\">\n                <div class=\"legend-item\">\n                  <div class=\"legend-rect level-0\"></div>\n                  <span>Root</span>\n                </div>\n                <div class=\"legend-item\">\n                  <div class=\"legend-rect level-1\"></div>\n                  <span>Level 1</span>\n                </div>\n                <div class=\"legend-item\">\n                  <div class=\"legend-rect level-2\"></div>\n                  <span>Level 2+</span>\n                </div>\n              </div>\n            </div>\n          </div>\n          \n          <div class=\"hierarchy-chart\" #hierarchyChart >\n            <!-- Help text overlay -->\n            @if (hierarchyData && (hasChildren() || hasParent())) {\n              <div class=\"chart-help\">\n                <small>\n                  <i class=\"fa-solid fa-hand-pointer\"></i>\n                  Drag to pan \u2022 Use zoom controls or scroll to zoom \u2022 Click nodes to navigate\n                </small>\n              </div>\n            }\n            \n            <!-- Empty state for hierarchy -->\n            @if (!hierarchyData || (!hasChildren() && !hasParent())) {\n              <div class=\"empty-hierarchy\">\n                <i class=\"fa-solid fa-sitemap\"></i>\n                <h4>No Agent Hierarchy</h4>\n                <p>This agent doesn't have any parent or child agents yet.</p>\n                <button class=\"create-subagent-btn\" (click)=\"openCreateSubAgent()\">\n                  <i class=\"fa-solid fa-plus\"></i>\n                  Create Sub-Agent\n                </button>\n              </div>\n            }\n          </div>\n        </div>\n      }\n      \n      <!-- Prompts Tab -->\n      @if (activeTab === 'prompts') {\n        <div class=\"prompts-section\" >\n          <div class=\"section-header\">\n            <h3>\n              <i class=\"fa-solid fa-comment-dots\"></i>\n              Agent Prompts\n            </h3>\n            <button class=\"add-prompt-btn\" title=\"Add New Prompt\">\n              <i class=\"fa-solid fa-plus\"></i>\n              Add Prompt\n            </button>\n          </div>\n          \n          <div class=\"prompts-list\">\n            @if (agentPrompts.length === 0) {\n              <div class=\"empty-prompts\">\n                <i class=\"fa-solid fa-comment-dots\"></i>\n                <p>No prompts configured for this agent</p>\n                <button class=\"add-first-prompt-btn\">\n                  <i class=\"fa-solid fa-plus\"></i>\n                  Add First Prompt\n                </button>\n              </div>\n            } @else {\n              @for (prompt of agentPrompts; track prompt.id) {\n                <div class=\"prompt-card\">\n                  <div class=\"prompt-header\">\n                    <div class=\"prompt-info\">\n                      <h4>{{ prompt.name }}</h4>\n                      <span class=\"prompt-type\">{{ prompt.type }}</span>\n                    </div>\n                    <div class=\"prompt-actions\">\n                      <button class=\"action-btn\" title=\"Edit Prompt\">\n                        <i class=\"fa-solid fa-edit\"></i>\n                      </button>\n                      <button class=\"action-btn danger\" title=\"Delete Prompt\">\n                        <i class=\"fa-solid fa-trash\"></i>\n                      </button>\n                    </div>\n                  </div>\n                  <div class=\"prompt-content\">\n                    <p>{{ prompt.content }}</p>\n                  </div>\n                </div>\n              }\n            }\n          </div>\n        </div>\n      }\n      \n      <!-- Properties Tab -->\n      @if (activeTab === 'properties') {\n        <div class=\"properties-section\" >\n          <div class=\"section-header\">\n            <h3>\n              <i class=\"fa-solid fa-cog\"></i>\n              Agent Properties\n            </h3>\n            <button class=\"save-btn\" title=\"Save Changes\">\n              <i class=\"fa-solid fa-save\"></i>\n              Save\n            </button>\n          </div>\n          \n          <div class=\"properties-form\">\n            <div class=\"form-group\">\n              <label>Name</label>\n              <input \n                type=\"text\" \n                class=\"form-input\"\n                [value]=\"currentAgent.Name\"\n                placeholder=\"Agent name\">\n            </div>\n            \n            <div class=\"form-group\">\n              <label>Description</label>\n              <textarea \n                class=\"form-textarea\"\n                [value]=\"currentAgent.Description\"\n                placeholder=\"Agent description\"\n                rows=\"3\"></textarea>\n            </div>\n            \n            <div class=\"form-row\">\n              <div class=\"form-group\">\n                <label>Execution Mode</label>\n                <select class=\"form-select\" [value]=\"currentAgent.ExecutionMode\">\n                  <option value=\"Sequential\">Sequential</option>\n                  <option value=\"Parallel\">Parallel</option>\n                </select>\n              </div>\n              \n              <div class=\"form-group\">\n                <label>Execution Order</label>\n                <input \n                  type=\"number\" \n                  class=\"form-input\"\n                  [value]=\"currentAgent.ExecutionOrder\"\n                  min=\"0\">\n              </div>\n            </div>\n            \n            <div class=\"form-group checkbox-group\">\n              <label class=\"checkbox-label\">\n                <input \n                  type=\"checkbox\" \n                  [checked]=\"currentAgent.ExposeAsAction\">\n                <span class=\"checkmark\"></span>\n                Expose as Action\n              </label>\n              <small>Allow this agent to be used as an action by other agents</small>\n            </div>\n            \n            <div class=\"form-group checkbox-group\">\n              <label class=\"checkbox-label\">\n                <input \n                  type=\"checkbox\" \n                  [checked]=\"currentAgent.EnableContextCompression\">\n                <span class=\"checkmark\"></span>\n                Enable Context Compression\n              </label>\n              <small>Automatically compress conversation context when threshold is reached</small>\n            </div>\n            \n            @if (currentAgent.EnableContextCompression) {\n              <div class=\"form-row\">\n                <div class=\"form-group\">\n                  <label>Message Threshold</label>\n                  <input \n                    type=\"number\" \n                    class=\"form-input\"\n                    [value]=\"currentAgent.ContextCompressionMessageThreshold\"\n                    min=\"1\"\n                    placeholder=\"Number of messages\">\n                </div>\n                \n                <div class=\"form-group\">\n                  <label>Retention Count</label>\n                  <input \n                    type=\"number\" \n                    class=\"form-input\"\n                    [value]=\"currentAgent.ContextCompressionMessageRetentionCount\"\n                    min=\"0\"\n                    placeholder=\"Messages to keep\">\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Sub-Agent creation now uses CreateAgentService slide-in panel -->\n</div>", styles: [".agent-editor-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--mj-bg-surface-card);\n}\n\n.editor-header {\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  padding: 16px 20px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-shrink: 0;\n}\n.editor-header .header-info {\n  display: flex;\n  align-items: center;\n  gap: 20px;\n}\n.editor-header .header-info .header-actions {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n.editor-header .header-info .back-btn, .editor-header .header-info .open-btn {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 16px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  text-decoration: none;\n  font-size: 14px;\n  cursor: pointer;\n  transition: all 0.2s;\n}\n.editor-header .header-info .back-btn:hover, .editor-header .header-info .open-btn:hover {\n  border-color: var(--mj-border-strong);\n}\n.editor-header .header-info .back-btn {\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-muted);\n}\n.editor-header .header-info .back-btn:hover {\n  background: var(--mj-border-default);\n  color: var(--mj-text-primary);\n}\n.editor-header .header-info .open-btn {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n.editor-header .header-info .open-btn:hover {\n  background: var(--mj-brand-primary-hover);\n}\n.editor-header .header-info .agent-breadcrumb h2 {\n  margin: 0;\n  font-size: 24px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n.editor-header .header-info .agent-breadcrumb .breadcrumb-item {\n  font-size: 14px;\n  color: var(--mj-text-muted);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-top: 4px;\n}\n.editor-header .header-controls {\n  display: flex;\n  gap: 8px;\n}\n.editor-header .header-controls .control-btn {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 12px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  color: var(--mj-text-muted);\n  font-size: 12px;\n  cursor: pointer;\n  transition: all 0.2s;\n}\n.editor-header .header-controls .control-btn:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}\n.editor-header .header-controls .control-btn.active {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n.tab-navigation {\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  padding: 0 20px;\n  display: flex;\n  gap: 2px;\n  flex-shrink: 0;\n}\n.tab-navigation .tab-btn {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 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;\n}\n.tab-navigation .tab-btn:hover {\n  color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-card);\n}\n.tab-navigation .tab-btn.active {\n  color: var(--mj-brand-primary);\n  border-bottom-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-card);\n}\n.tab-navigation .tab-btn i {\n  font-size: 16px;\n}\n\n.tab-content {\n  flex: 1;\n  overflow: hidden;\n}\n\n.loading-container, .error-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n}\n.loading-container .loading-content, .loading-container .error-content, .error-container .loading-content, .error-container .error-content {\n  text-align: center;\n}\n.loading-container .loading-content .loading-spinner, .loading-container .error-content .loading-spinner, .error-container .loading-content .loading-spinner, .error-container .error-content .loading-spinner {\n  position: relative;\n  width: 60px;\n  height: 60px;\n  margin: 0 auto 20px;\n}\n.loading-container .loading-content .spinner-ring, .loading-container .error-content .spinner-ring, .error-container .loading-content .spinner-ring, .error-container .error-content .spinner-ring {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border: 3px solid transparent;\n  border-radius: 50%;\n  animation: spin 1.5s linear infinite;\n}\n.loading-container .loading-content .spinner-ring:nth-child(1), .loading-container .error-content .spinner-ring:nth-child(1), .error-container .loading-content .spinner-ring:nth-child(1), .error-container .error-content .spinner-ring:nth-child(1) {\n  border-top-color: var(--mj-brand-primary);\n  animation-delay: 0s;\n}\n.loading-container .loading-content .spinner-ring:nth-child(2), .loading-container .error-content .spinner-ring:nth-child(2), .error-container .loading-content .spinner-ring:nth-child(2), .error-container .error-content .spinner-ring:nth-child(2) {\n  border-top-color: var(--mj-brand-primary);\n  animation-delay: 0.3s;\n  transform: scale(0.8);\n}\n.loading-container .loading-content .spinner-ring:nth-child(3), .loading-container .error-content .spinner-ring:nth-child(3), .error-container .loading-content .spinner-ring:nth-child(3), .error-container .error-content .spinner-ring:nth-child(3) {\n  border-top-color: var(--mj-status-warning);\n  animation-delay: 0.6s;\n  transform: scale(0.6);\n}\n.loading-container .loading-content .loading-text, .loading-container .error-content .loading-text, .error-container .loading-content .loading-text, .error-container .error-content .loading-text {\n  font-size: 16px;\n  color: var(--mj-text-muted);\n}\n.loading-container .loading-content i, .loading-container .error-content i, .error-container .loading-content i, .error-container .error-content i {\n  font-size: 48px;\n  color: var(--mj-status-error);\n  margin-bottom: 16px;\n}\n.loading-container .loading-content h3, .loading-container .error-content h3, .error-container .loading-content h3, .error-container .error-content h3 {\n  margin: 0 0 8px 0;\n  color: var(--mj-text-primary);\n}\n.loading-container .loading-content p, .loading-container .error-content p, .error-container .loading-content p, .error-container .error-content p {\n  margin: 0 0 16px 0;\n  color: var(--mj-text-muted);\n}\n.loading-container .loading-content .retry-btn, .loading-container .error-content .retry-btn, .error-container .loading-content .retry-btn, .error-container .error-content .retry-btn {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 16px;\n  background: var(--mj-status-error);\n  border: none;\n  border-radius: 4px;\n  color: var(--mj-text-inverse);\n  cursor: pointer;\n}\n.loading-container .loading-content .retry-btn:hover, .loading-container .error-content .retry-btn:hover, .error-container .loading-content .retry-btn:hover, .error-container .error-content .retry-btn:hover {\n  background: var(--mj-status-error);\n}\n\n.editor-content {\n  flex: 1;\n  overflow: hidden;\n}\n\n.main-splitter, .bottom-splitter {\n  height: 100%;\n}\n.main-splitter ::ng-deep .as-split-area-content, .bottom-splitter ::ng-deep .as-split-area-content {\n  overflow: hidden;\n}\n\n.hierarchy-section {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--mj-bg-surface);\n}\n.hierarchy-section .section-header {\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-bg-surface-sunken);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-shrink: 0;\n}\n.hierarchy-section .section-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.hierarchy-section .section-header .hierarchy-controls {\n  display: flex;\n  align-items: center;\n  gap: 20px;\n}\n.hierarchy-section .section-header .hierarchy-controls .zoom-controls {\n  display: flex;\n  gap: 4px;\n}\n.hierarchy-section .section-header .hierarchy-controls .zoom-controls .zoom-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  transition: all 0.2s;\n}\n.hierarchy-section .section-header .hierarchy-controls .zoom-controls .zoom-btn:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}\n.hierarchy-section .section-header .hierarchy-controls .zoom-controls .zoom-btn i {\n  font-size: 12px;\n}\n.hierarchy-section .section-header .hierarchy-controls .hierarchy-legend {\n  display: flex;\n  gap: 16px;\n}\n.hierarchy-section .section-header .hierarchy-controls .hierarchy-legend .legend-item {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n.hierarchy-section .section-header .hierarchy-controls .hierarchy-legend .legend-item .legend-rect {\n  width: 20px;\n  height: 12px;\n  border-radius: 2px;\n  border: 1px solid;\n}\n.hierarchy-section .section-header .hierarchy-controls .hierarchy-legend .legend-item .legend-rect.level-0 {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary-hover);\n}\n.hierarchy-section .section-header .hierarchy-controls .hierarchy-legend .legend-item .legend-rect.level-1 {\n  background: var(--mj-status-success);\n  border-color: var(--mj-color-success-700);\n}\n.hierarchy-section .section-header .hierarchy-controls .hierarchy-legend .legend-item .legend-rect.level-2 {\n  background: var(--mj-status-warning);\n  border-color: var(--mj-status-warning);\n}\n.hierarchy-section .hierarchy-chart {\n  flex: 1;\n  min-height: 300px;\n  overflow: hidden;\n  position: relative;\n}\n.hierarchy-section .hierarchy-chart .chart-help {\n  position: absolute;\n  bottom: 10px;\n  left: 10px;\n  background: color-mix(in srgb, var(--mj-bg-surface) 90%, transparent);\n  padding: 6px 10px;\n  border-radius: 4px;\n  border: 1px solid var(--mj-border-default);\n  z-index: 10;\n}\n.hierarchy-section .hierarchy-chart .chart-help small {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n.hierarchy-section .hierarchy-chart .chart-help small i {\n  color: var(--mj-brand-primary);\n}\n.hierarchy-section .hierarchy-chart .empty-hierarchy {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  padding: 40px 20px;\n  text-align: center;\n  color: var(--mj-text-muted);\n}\n.hierarchy-section .hierarchy-chart .empty-hierarchy i {\n  font-size: 64px;\n  margin-bottom: 20px;\n  opacity: 0.5;\n}\n.hierarchy-section .hierarchy-chart .empty-hierarchy h4 {\n  margin: 0 0 12px 0;\n  font-size: 18px;\n  color: var(--mj-text-primary);\n}\n.hierarchy-section .hierarchy-chart .empty-hierarchy p {\n  margin: 0 0 24px 0;\n  font-size: 14px;\n  color: var(--mj-text-muted);\n  line-height: 1.5;\n}\n.hierarchy-section .hierarchy-chart .empty-hierarchy .create-subagent-btn {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 20px;\n  background: var(--mj-brand-primary);\n  border: none;\n  border-radius: 6px;\n  color: var(--mj-text-inverse);\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: background 0.2s;\n}\n.hierarchy-section .hierarchy-chart .empty-hierarchy .create-subagent-btn:hover {\n  background: var(--mj-brand-primary);\n}\n\n.prompts-section {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--mj-bg-surface);\n  border-right: 1px solid var(--mj-bg-surface-sunken);\n}\n.prompts-section .section-header {\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-bg-surface-sunken);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-shrink: 0;\n}\n.prompts-section .section-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.prompts-section .section-header .add-prompt-btn {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  background: var(--mj-brand-primary);\n  border: none;\n  border-radius: 4px;\n  color: var(--mj-text-inverse);\n  font-size: 12px;\n  cursor: pointer;\n}\n.prompts-section .section-header .add-prompt-btn:hover {\n  background: var(--mj-brand-primary);\n}\n.prompts-section .prompts-list {\n  flex: 1;\n  overflow-y: auto;\n  padding: 16px 20px;\n}\n.prompts-section .prompts-list .empty-prompts {\n  text-align: center;\n  padding: 40px 20px;\n  color: var(--mj-text-muted);\n}\n.prompts-section .prompts-list .empty-prompts i {\n  font-size: 48px;\n  margin-bottom: 16px;\n}\n.prompts-section .prompts-list .empty-prompts p {\n  margin: 0 0 20px 0;\n  font-size: 14px;\n}\n.prompts-section .prompts-list .empty-prompts .add-first-prompt-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 16px;\n  background: var(--mj-brand-primary);\n  border: none;\n  border-radius: 4px;\n  color: var(--mj-text-inverse);\n  cursor: pointer;\n}\n.prompts-section .prompts-list .empty-prompts .add-first-prompt-btn:hover {\n  background: var(--mj-brand-primary);\n}\n.prompts-section .prompts-list .prompt-card {\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  margin-bottom: 12px;\n}\n.prompts-section .prompts-list .prompt-card .prompt-header {\n  padding: 12px 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.prompts-section .prompts-list .prompt-card .prompt-header .prompt-info h4 {\n  margin: 0 0 4px 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n.prompts-section .prompts-list .prompt-card .prompt-header .prompt-info .prompt-type {\n  font-size: 11px;\n  padding: 2px 6px;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-radius: 3px;\n  text-transform: uppercase;\n}\n.prompts-section .prompts-list .prompt-card .prompt-header .prompt-actions {\n  display: flex;\n  gap: 4px;\n}\n.prompts-section .prompts-list .prompt-card .prompt-header .prompt-actions .action-btn {\n  padding: 4px 8px;\n  background: none;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 3px;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  font-size: 12px;\n}\n.prompts-section .prompts-list .prompt-card .prompt-header .prompt-actions .action-btn:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-color: var(--mj-border-strong);\n}\n.prompts-section .prompts-list .prompt-card .prompt-header .prompt-actions .action-btn.danger:hover {\n  background: var(--mj-status-error);\n  border-color: var(--mj-status-error);\n  color: var(--mj-text-inverse);\n}\n.prompts-section .prompts-list .prompt-card .prompt-content {\n  padding: 12px 16px;\n}\n.prompts-section .prompts-list .prompt-card .prompt-content p {\n  margin: 0;\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  line-height: 1.4;\n}\n\n.properties-section {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--mj-bg-surface);\n}\n.properties-section .section-header {\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-bg-surface-sunken);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-shrink: 0;\n}\n.properties-section .section-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.properties-section .section-header .save-btn {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  background: var(--mj-status-success);\n  border: none;\n  border-radius: 4px;\n  color: var(--mj-text-inverse);\n  font-size: 12px;\n  cursor: pointer;\n}\n.properties-section .section-header .save-btn:hover {\n  background: var(--mj-color-success-700);\n}\n.properties-section .properties-form {\n  flex: 1;\n  overflow-y: auto;\n  padding: 20px;\n}\n.properties-section .properties-form .form-group {\n  margin-bottom: 16px;\n}\n.properties-section .properties-form .form-group label {\n  display: block;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 4px;\n}\n.properties-section .properties-form .form-group .form-input, .properties-section .properties-form .form-group .form-select, .properties-section .properties-form .form-group .form-textarea {\n  width: 100%;\n  padding: 8px 12px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  font-size: 13px;\n  background: var(--mj-bg-surface);\n  box-sizing: border-box;\n}\n.properties-section .properties-form .form-group .form-input:focus, .properties-section .properties-form .form-group .form-select:focus, .properties-section .properties-form .form-group .form-textarea:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n}\n.properties-section .properties-form .form-group .form-textarea {\n  resize: vertical;\n  min-height: 60px;\n}\n.properties-section .properties-form .form-group.checkbox-group .checkbox-label {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n  font-size: 13px;\n  font-weight: 500;\n}\n.properties-section .properties-form .form-group.checkbox-group .checkbox-label input[type=checkbox] {\n  width: auto;\n  margin: 0;\n}\n.properties-section .properties-form .form-group.checkbox-group small {\n  display: block;\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  margin-top: 4px;\n  margin-left: 24px;\n}\n.properties-section .properties-form .form-row {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 16px;\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n.modal-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  width: 100vw;\n  height: 100vh;\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 9999;\n  padding: 20px;\n  box-sizing: border-box;\n}\n\n.create-subagent-modal {\n  background: var(--mj-bg-surface);\n  border-radius: 8px;\n  width: 100%;\n  max-width: 500px;\n  max-height: calc(100vh - 40px);\n  min-height: 300px;\n  display: flex;\n  flex-direction: column;\n  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);\n  position: relative;\n}\n.create-subagent-modal .modal-header {\n  padding: 20px 24px;\n  border-bottom: 1px solid var(--mj-border-default);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.create-subagent-modal .modal-header h3 {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n.create-subagent-modal .modal-header .close-btn {\n  background: none;\n  border: none;\n  padding: 8px;\n  cursor: pointer;\n  color: var(--mj-text-muted);\n  border-radius: 4px;\n}\n.create-subagent-modal .modal-header .close-btn:hover {\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-primary);\n}\n.create-subagent-modal .modal-body {\n  padding: 24px;\n  flex: 1;\n  overflow-y: auto;\n}\n.create-subagent-modal .modal-body .error-message {\n  background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-status-error) 20%, var(--mj-bg-surface));\n  border-radius: 6px;\n  padding: 12px;\n  margin-bottom: 20px;\n  color: var(--mj-status-error);\n  font-size: 14px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.create-subagent-modal .modal-body .error-message i {\n  color: var(--mj-status-error);\n}\n.create-subagent-modal .modal-body .form-group {\n  margin-bottom: 20px;\n}\n.create-subagent-modal .modal-body .form-group label {\n  display: block;\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 8px;\n}\n.create-subagent-modal .modal-body .form-group .form-input, .create-subagent-modal .modal-body .form-group .form-textarea {\n  width: 100%;\n  padding: 12px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  font-size: 14px;\n  background: var(--mj-bg-surface);\n  box-sizing: border-box;\n  transition: border-color 0.2s;\n}\n.create-subagent-modal .modal-body .form-group .form-input:focus, .create-subagent-modal .modal-body .form-group .form-textarea:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n}\n.create-subagent-modal .modal-body .form-group .form-input::placeholder, .create-subagent-modal .modal-body .form-group .form-textarea::placeholder {\n  color: var(--mj-text-disabled);\n}\n.create-subagent-modal .modal-body .form-group .form-textarea {\n  resize: vertical;\n  min-height: 80px;\n  font-family: inherit;\n}\n.create-subagent-modal .modal-body .parent-info {\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  padding: 12px;\n  font-size: 14px;\n  color: var(--mj-text-muted);\n}\n.create-subagent-modal .modal-body .parent-info strong {\n  color: var(--mj-text-primary);\n}\n.create-subagent-modal .modal-footer {\n  padding: 20px 24px;\n  border-top: 1px solid var(--mj-border-default);\n  display: flex;\n  justify-content: flex-end;\n  gap: 12px;\n}\n.create-subagent-modal .modal-footer .cancel-btn, .create-subagent-modal .modal-footer .create-btn {\n  padding: 10px 20px;\n  border: 1px solid;\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.2s;\n}\n.create-subagent-modal .modal-footer .cancel-btn:disabled, .create-subagent-modal .modal-footer .create-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.create-subagent-modal .modal-footer .cancel-btn {\n  background: var(--mj-bg-surface);\n  border-color: var(--mj-border-default);\n  color: var(--mj-text-muted);\n}\n.create-subagent-modal .modal-footer .cancel-btn:hover:not(:disabled) {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-border-strong);\n}\n.create-subagent-modal .modal-footer .create-btn {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.create-subagent-modal .modal-footer .create-btn:hover:not(:disabled) {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n}\n.create-subagent-modal .modal-footer .create-btn .loading-spinner-sm {\n  width: 14px;\n  height: 14px;\n  border: 2px solid transparent;\n  border-top-color: currentColor;\n  border-radius: 50%;\n  animation: spin 1s linear infinite;\n}\n"] }]
     }], () => [{ type: i1.CreateAgentService }, { type: i2.NavigationService }], { agentId: [{
             type: Input
         }], close: [{