npm - @memberjunction/ng-core-entity-forms - Versions diffs - 3.0.0 → 3.1.1 - Mend

@memberjunction/ng-core-entity-forms 3.0.0 → 3.1.1

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 (1275) hide show

package/dist/lib/custom/AIAgents/FlowAgentType/flow-agent-diagram.component.js CHANGED Viewed

@@ -2010,5 +2010,5 @@ export class FlowAgentDiagramComponent {
             type: HostListener,
             args: ['document:mousemove', ['$event']]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FlowAgentDiagramComponent, { className: "FlowAgentDiagramComponent" }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FlowAgentDiagramComponent, { className: "FlowAgentDiagramComponent", filePath: "src/lib/custom/AIAgents/FlowAgentType/flow-agent-diagram.component.ts", lineNumber: 641 }); })();
 //# sourceMappingURL=flow-agent-diagram.component.js.map

package/dist/lib/custom/AIAgents/FlowAgentType/flow-agent-form-section.component.js CHANGED Viewed

@@ -409,5 +409,5 @@ export { FlowAgentFormSectionComponent };
             type: ViewChild,
             args: ['reteContainer', { static: true }]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FlowAgentFormSectionComponent, { className: "FlowAgentFormSectionComponent" }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FlowAgentFormSectionComponent, { className: "FlowAgentFormSectionComponent", filePath: "src/lib/custom/AIAgents/FlowAgentType/flow-agent-form-section.component.ts", lineNumber: 16 }); })();
 //# sourceMappingURL=flow-agent-form-section.component.js.map

package/dist/lib/custom/AIAgents/FlowAgentType/flow-editor-integration/components/condition-editor/condition-editor.component.js CHANGED Viewed

@@ -194,5 +194,5 @@ export class ConditionEditorComponent {
         }], cancel: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ConditionEditorComponent, { className: "ConditionEditorComponent" }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ConditionEditorComponent, { className: "ConditionEditorComponent", filePath: "src/lib/custom/AIAgents/FlowAgentType/flow-editor-integration/components/condition-editor/condition-editor.component.ts", lineNumber: 178 }); })();
 //# sourceMappingURL=condition-editor.component.js.map

package/dist/lib/custom/AIAgents/FlowAgentType/flow-editor-integration/components/confirmation-dialog/confirmation-dialog.component.js CHANGED Viewed

@@ -94,5 +94,5 @@ export class ConfirmationDialogComponent {
         }], cancel: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ConfirmationDialogComponent, { className: "ConfirmationDialogComponent" }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ConfirmationDialogComponent, { className: "ConfirmationDialogComponent", filePath: "src/lib/custom/AIAgents/FlowAgentType/flow-editor-integration/components/confirmation-dialog/confirmation-dialog.component.ts", lineNumber: 114 }); })();
 //# sourceMappingURL=confirmation-dialog.component.js.map

package/dist/lib/custom/AIAgents/FlowAgentType/flow-editor-integration/components/custom-node/custom-node.component.js CHANGED Viewed

@@ -278,5 +278,5 @@ export class CustomNodeViewComponent {
         }], socketMouseLeave: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CustomNodeViewComponent, { className: "CustomNodeViewComponent" }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CustomNodeViewComponent, { className: "CustomNodeViewComponent", filePath: "src/lib/custom/AIAgents/FlowAgentType/flow-editor-integration/components/custom-node/custom-node.component.ts", lineNumber: 251 }); })();
 //# sourceMappingURL=custom-node.component.js.map

package/dist/lib/custom/AIAgents/FlowAgentType/flow-editor-integration/components/execution-panel/execution-panel.component.js CHANGED Viewed

@@ -283,5 +283,5 @@ export class ExecutionPanelComponent {
         type: Component,
         args: [{ selector: 'app-execution-panel', standalone: true, imports: [CommonModule], template: "<div class=\"execution-panel\" \n     [class.active]=\"executionStatus !== 'idle' && !isPanelClosed\"\n     [class.resizing]=\"isResizing\"\n     [style.height.px]=\"executionStatus !== 'idle' && !isPanelClosed ? panelHeight : 0\">\n  \n  <!-- Resize handle -->\n  <div class=\"resize-handle\" \n       *ngIf=\"executionStatus !== 'idle' && !isPanelClosed\"\n       (mousedown)=\"onResizeStart($event)\">\n    <div class=\"resize-grip\"></div>\n  </div>\n  \n  <div class=\"panel-header\">\n    <h3 class=\"panel-title\">\n      <i class=\"fas fa-terminal\"></i> Flow Execution\n    </h3>\n    <div class=\"header-actions\">\n      <button \n        class=\"icon-button\"\n        (click)=\"clearLogs()\"\n        title=\"Clear logs\"\n        [disabled]=\"executionStatus === 'running'\">\n        <i class=\"fas fa-trash\"></i>\n      </button>\n      <button \n        class=\"icon-button close\"\n        (click)=\"closePanel()\"\n        title=\"Close panel\">\n        <i class=\"fas fa-times\"></i>\n      </button>\n    </div>\n  </div>\n  \n  <div class=\"execution-controls\">\n    <div class=\"status-indicator\" [class]=\"'status-' + executionStatus\">\n      <i class=\"fas\" [ngClass]=\"{\n        'fa-circle': executionStatus === 'idle',\n        'fa-spinner fa-spin': executionStatus === 'running',\n        'fa-pause-circle': executionStatus === 'paused',\n        'fa-check-circle': executionStatus === 'completed',\n        'fa-exclamation-circle': executionStatus === 'error'\n      }\"></i>\n      <span>{{ executionStatus | titlecase }}</span>\n    </div>\n    \n    <div class=\"control-buttons\">\n      <button \n        class=\"control-button\"\n        (click)=\"onPause()\"\n        [disabled]=\"executionStatus !== 'running'\"\n        title=\"Pause execution\">\n        <i class=\"fas fa-pause\"></i>\n      </button>\n      <button \n        class=\"control-button\"\n        (click)=\"onResume()\"\n        [disabled]=\"executionStatus !== 'paused'\"\n        title=\"Resume execution\">\n        <i class=\"fas fa-play\"></i>\n      </button>\n      <button \n        class=\"control-button stop\"\n        (click)=\"onStop()\"\n        [disabled]=\"executionStatus !== 'running' && executionStatus !== 'paused'\"\n        title=\"Stop execution\">\n        <i class=\"fas fa-stop\"></i>\n      </button>\n    </div>\n  </div>\n  \n  <div class=\"logs-container\">\n    <div *ngIf=\"executionLogs.length === 0\" class=\"empty-logs\">\n      <i class=\"fas fa-info-circle\"></i>\n      <p>No execution logs yet. Click \"Run Flow\" to start.</p>\n    </div>\n    \n    <div *ngFor=\"let log of executionLogs\" \n         class=\"log-entry\" \n         [class]=\"getLogClass(log.type)\"\n         [class.current-step]=\"log.stepId === currentStepId && currentStepId !== 0\">\n      <div class=\"log-timestamp\">{{ formatTimestamp(log.timestamp) }}</div>\n      <div class=\"log-icon\">\n        <i class=\"fas\" [ngClass]=\"getLogIcon(log.type)\"></i>\n      </div>\n      <div class=\"log-content\">\n        <div class=\"log-step\" *ngIf=\"log.stepId\">\n          <strong>{{ log.stepName }}</strong>\n        </div>\n        <div class=\"log-message\">{{ log.message }}</div>\n        <div class=\"log-data\" *ngIf=\"log.data\">\n          <pre>{{ log.data | json }}</pre>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Minimized indicator when panel is closed but execution is active -->\n<div class=\"execution-indicator\" \n     *ngIf=\"executionStatus !== 'idle' && isPanelClosed\"\n     (click)=\"isPanelClosed = false\"\n     title=\"Click to reopen execution panel\">\n  <i class=\"fas\" [ngClass]=\"{\n    'fa-spinner fa-spin': executionStatus === 'running',\n    'fa-pause-circle': executionStatus === 'paused',\n    'fa-check-circle': executionStatus === 'completed',\n    'fa-exclamation-circle': executionStatus === 'error'\n  }\"></i>\n  <span>{{ executionStatus | titlecase }}</span>\n</div>", styles: [".execution-panel {\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 0;\n  background: var(--white-color);\n  border-top: 1px solid var(--gray-700);\n  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);\n  transition: height 0.3s ease;\n  z-index: 100;\n  display: flex;\n  flex-direction: column;\n  \n  &.active {\n    transition: none; // Disable transition during resize\n  }\n  \n  &.resizing {\n    user-select: none;\n    \n    .resize-grip {\n      opacity: 1 !important;\n    }\n  }\n}\n\n.resize-handle {\n  position: absolute;\n  top: -5px;\n  left: 0;\n  right: 0;\n  height: 10px;\n  cursor: ns-resize;\n  z-index: 10;\n  \n  &:hover .resize-grip {\n    opacity: 1;\n  }\n}\n\n.resize-grip {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 50px;\n  height: 4px;\n  background: var(--gray-800);\n  border-radius: 2px;\n  opacity: 0;\n  transition: opacity 0.2s;\n  \n  &::before,\n  &::after {\n    content: '';\n    position: absolute;\n    left: 0;\n    right: 0;\n    height: 1px;\n    background: var(--gray-700);\n  }\n  \n  &::before {\n    top: -2px;\n  }\n  \n  &::after {\n    bottom: -2px;\n  }\n}\n\n.panel-header {\n  padding: 1rem 1.5rem;\n  border-bottom: 1px solid var(--gray-700);\n  background: var(--gray-600);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.panel-title {\n  font-size: 1rem;\n  font-weight: 600;\n  margin: 0;\n  color: var(--gray-900);\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  \n  i {\n    color: var(--mj-blue);\n  }\n}\n\n.header-actions {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.icon-button {\n  width: 32px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  color: var(--gray-800);\n  border-radius: 50%;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all var(--transition-time);\n  \n  &:hover:not(:disabled) {\n    background: var(--gray-700);\n    color: var(--gray-900);\n  }\n  \n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n  \n  &.close {\n    &:hover:not(:disabled) {\n      background: #dc3545;\n      color: white;\n    }\n  }\n}\n\n.execution-controls {\n  padding: 0.75rem 1.5rem;\n  background: var(--gray-600);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  border-bottom: 1px solid var(--gray-700);\n}\n\n.status-indicator {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  font-size: 0.875rem;\n  font-weight: 600;\n  \n  &.status-idle {\n    color: var(--gray-800);\n  }\n  \n  &.status-running {\n    color: var(--mj-blue);\n  }\n  \n  &.status-paused {\n    color: #ffc107;\n  }\n  \n  &.status-completed {\n    color: #28a745;\n  }\n  \n  &.status-error {\n    color: #dc3545;\n  }\n}\n\n.control-buttons {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.control-button {\n  padding: 0.375rem 0.75rem;\n  border: 1px solid var(--gray-700);\n  background: var(--white-color);\n  color: var(--gray-900);\n  border-radius: var(--border-radius);\n  cursor: pointer;\n  font-size: 0.875rem;\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n  transition: all var(--transition-time);\n  \n  &:hover:not(:disabled) {\n    background: var(--gray-700);\n    border-color: var(--gray-800);\n  }\n  \n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n  \n  &.stop {\n    color: #dc3545;\n    border-color: #dc3545;\n    \n    &:hover:not(:disabled) {\n      background: #dc3545;\n      color: white;\n    }\n  }\n}\n\n.logs-container {\n  flex: 1;\n  overflow-y: auto;\n  background: var(--gray-600);\n  padding: 1rem;\n}\n\n.empty-logs {\n  text-align: center;\n  color: var(--gray-800);\n  padding: 2rem;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 1rem;\n  \n  i {\n    font-size: 2rem;\n    color: var(--mj-blue);\n  }\n  \n  p {\n    margin: 0;\n    font-size: 0.875rem;\n  }\n}\n\n.log-entry {\n  display: flex;\n  gap: 0.75rem;\n  padding: 0.5rem;\n  margin-bottom: 0.5rem;\n  background: var(--white-color);\n  border-radius: var(--border-radius);\n  border-left: 3px solid transparent;\n  font-size: 0.875rem;\n  transition: all var(--transition-time);\n  \n  &.log-start {\n    border-left-color: var(--mj-blue);\n  }\n  \n  &.log-success {\n    border-left-color: #28a745;\n  }\n  \n  &.log-error {\n    border-left-color: #dc3545;\n  }\n  \n  &.log-info {\n    border-left-color: #17a2b8;\n  }\n  \n  &.current-step {\n    background: #e3f2fd;\n    box-shadow: 0 2px 4px rgba(0, 118, 182, 0.2);\n  }\n}\n\n.log-timestamp {\n  color: var(--gray-800);\n  font-family: monospace;\n  font-size: 0.75rem;\n  white-space: nowrap;\n  padding-top: 0.125rem;\n}\n\n.log-icon {\n  flex-shrink: 0;\n  width: 20px;\n  text-align: center;\n  \n  .fa-play-circle {\n    color: var(--mj-blue);\n  }\n  \n  .fa-check-circle {\n    color: #28a745;\n  }\n  \n  .fa-exclamation-circle {\n    color: #dc3545;\n  }\n  \n  .fa-info-circle {\n    color: #17a2b8;\n  }\n}\n\n.log-content {\n  flex: 1;\n  min-width: 0;\n}\n\n.log-step {\n  margin-bottom: 0.25rem;\n  color: var(--gray-900);\n}\n\n.log-message {\n  color: var(--gray-800);\n  word-wrap: break-word;\n}\n\n.log-data {\n  margin-top: 0.5rem;\n  \n  pre {\n    margin: 0;\n    padding: 0.5rem;\n    background: var(--gray-600);\n    border-radius: var(--border-radius);\n    font-size: 0.75rem;\n    overflow-x: auto;\n    white-space: pre-wrap;\n    word-wrap: break-word;\n  }\n}\n\n// Minimized execution indicator\n.execution-indicator {\n  position: fixed;\n  bottom: 20px;\n  left: 50%;\n  transform: translateX(-50%);\n  background: var(--white-color);\n  border: 1px solid var(--gray-700);\n  border-radius: 30px;\n  padding: 0.5rem 1.5rem;\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  cursor: pointer;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n  transition: all var(--transition-time);\n  z-index: 100;\n  font-size: 0.875rem;\n  font-weight: 600;\n  \n  &:hover {\n    transform: translateX(-50%) translateY(-2px);\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);\n  }\n  \n  i {\n    font-size: 1rem;\n    \n    &.fa-spinner {\n      color: var(--mj-blue);\n    }\n    \n    &.fa-pause-circle {\n      color: #ffc107;\n    }\n    \n    &.fa-check-circle {\n      color: #28a745;\n    }\n    \n    &.fa-exclamation-circle {\n      color: #dc3545;\n    }\n  }\n}"] }]
     }], () => [{ type: i1.FlowExecutorService }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ExecutionPanelComponent, { className: "ExecutionPanelComponent" }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ExecutionPanelComponent, { className: "ExecutionPanelComponent", filePath: "src/lib/custom/AIAgents/FlowAgentType/flow-editor-integration/components/execution-panel/execution-panel.component.ts", lineNumber: 13 }); })();
 //# sourceMappingURL=execution-panel.component.js.map

package/dist/lib/custom/AIAgents/FlowAgentType/flow-editor-integration/components/flow-editor/flow-editor.component.js CHANGED Viewed

@@ -947,5 +947,5 @@ export class FlowEditorComponent {
         }], stepMoved: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FlowEditorComponent, { className: "FlowEditorComponent" }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FlowEditorComponent, { className: "FlowEditorComponent", filePath: "src/lib/custom/AIAgents/FlowAgentType/flow-editor-integration/components/flow-editor/flow-editor.component.ts", lineNumber: 18 }); })();
 //# sourceMappingURL=flow-editor.component.js.map

package/dist/lib/custom/AIAgents/FlowAgentType/flow-editor-integration/components/prompt-editor/prompt-editor.component.js CHANGED Viewed

@@ -446,5 +446,5 @@ export class PromptEditorComponent {
         }], cancel: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PromptEditorComponent, { className: "PromptEditorComponent" }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PromptEditorComponent, { className: "PromptEditorComponent", filePath: "src/lib/custom/AIAgents/FlowAgentType/flow-editor-integration/components/prompt-editor/prompt-editor.component.ts", lineNumber: 14 }); })();
 //# sourceMappingURL=prompt-editor.component.js.map

package/dist/lib/custom/AIAgents/FlowAgentType/flow-editor-integration/components/properties-panel/properties-panel.component.js CHANGED Viewed

@@ -419,5 +419,5 @@ export class PropertiesPanelComponent {
         type: Component,
         args: [{ selector: 'app-properties-panel', standalone: true, imports: [CommonModule, FormsModule], template: "<div class=\"properties-panel\">\n  <div class=\"properties-header\">\n    <h3 class=\"properties-title\">\n      <i class=\"fa-solid fa-cog\"></i> Properties\n    </h3>\n  </div>\n  \n  <div class=\"properties-content\">\n    <!-- Empty State -->\n    <div *ngIf=\"!selectedStep\" class=\"empty-state\">\n      <i class=\"fa-solid fa-info-circle\"></i>\n      <p>Select a step to view its properties</p>\n    </div>\n    \n    <!-- Step Properties -->\n    <div *ngIf=\"selectedStep\">\n      <div class=\"property-field\">\n        <label for=\"step-name\">Step Name</label>\n        <input \n          id=\"step-name\"\n          type=\"text\" \n          [value]=\"selectedStep.name\" \n          (input)=\"onStepNameChange($any($event.target).value)\"\n          class=\"form-input\">\n      </div>\n      \n      <!-- Show editable name for prompts -->\n      <div class=\"property-field\" *ngIf=\"selectedStep.type === 'prompt' && selectedStep.selectedOption\">\n        <label for=\"prompt-name\">\n          Prompt Display Name\n          <span class=\"edit-indicator\">Editable</span>\n        </label>\n        <div class=\"editable-field\">\n          <input \n            id=\"prompt-name\"\n            type=\"text\" \n            [(ngModel)]=\"selectedStep.name\" \n            (blur)=\"onStepNameChange(selectedStep.name)\"\n            (keyup.enter)=\"onStepNameChange(selectedStep.name)\"\n            class=\"form-input\"\n            placeholder=\"Enter prompt name...\">\n        </div>\n      </div>\n      \n      <div class=\"property-field\">\n        <label for=\"step-type\">Step Type</label>\n        <input \n          id=\"step-type\"\n          type=\"text\" \n          [value]=\"selectedStep.config.name\" \n          readonly \n          class=\"form-input\"\n          disabled>\n      </div>\n      \n      <div class=\"property-field\">\n        <label for=\"step-id\">Step ID</label>\n        <input \n          id=\"step-id\"\n          type=\"text\" \n          [value]=\"selectedStep.id\" \n          readonly \n          class=\"form-input\"\n          disabled>\n      </div>\n      \n      <div class=\"divider\"></div>\n      \n      <div class=\"property-field\">\n        <label for=\"step-option\">Selected Option</label>\n        <div class=\"option-select-container\">\n          <select \n            id=\"step-option\"\n            class=\"form-input\"\n            [value]=\"selectedStep.selectedOption || ''\"\n            (change)=\"onStepOptionChange($any($event.target).value)\">\n            <option value=\"\" disabled>Select {{ selectedStep.config.name }}...</option>\n            <option \n              *ngFor=\"let option of availableOptions; let i = index\" \n              [value]=\"option.value\"\n              [class.new-prompt-option]=\"option.value === 'new_custom_prompt'\"\n              [class.custom-prompt-option]=\"option.value.startsWith('custom_')\"\n              [class.separator-after]=\"i === 0 && availableOptions.length > 1\">\n              {{ option.value === 'new_custom_prompt' ? '\u2795 ' + option.name : option.name }}\n            </option>\n          </select>\n        </div>\n      </div>\n      \n      <div class=\"divider\"></div>\n      \n      <!-- Dynamic properties based on selected option -->\n      <div *ngIf=\"selectedStep.selectedOption && getOptionProperties().length > 0\" \n           class=\"editable-properties-section\">\n        <h4 class=\"section-title\">\n          {{ selectedStep.selectedOption.startsWith('custom_') ? 'Custom Prompt Configuration' : getSelectedOption()?.name + ' Properties' }}\n          <span class=\"edit-indicator\">All properties are editable</span>\n        </h4>\n        \n        <div *ngFor=\"let property of getOptionProperties()\" class=\"property-field\">\n          <label [for]=\"'prop-' + property.key\">\n            {{ property.label }}\n          </label>\n          \n          <!-- Text input -->\n          <input \n            *ngIf=\"property.type === 'text'\"\n            [id]=\"'prop-' + property.key\"\n            type=\"text\"\n            [placeholder]=\"property.placeholder || ''\"\n            [value]=\"getPropertyValue(property.key)\"\n            (input)=\"onPropertyChange(property.key, $any($event.target).value)\"\n            class=\"form-input\">\n          \n          <!-- Number input -->\n          <input \n            *ngIf=\"property.type === 'number'\"\n            [id]=\"'prop-' + property.key\"\n            type=\"number\"\n            [min]=\"property.min\"\n            [max]=\"property.max\"\n            [step]=\"property.step || 1\"\n            [placeholder]=\"property.placeholder || ''\"\n            [value]=\"getPropertyValue(property.key)\"\n            (input)=\"onPropertyChange(property.key, +$any($event.target).value)\"\n            class=\"form-input\">\n          \n          <!-- Select dropdown -->\n          <select \n            *ngIf=\"property.type === 'select'\"\n            [id]=\"'prop-' + property.key\"\n            [value]=\"getPropertyValue(property.key)\"\n            (change)=\"onPropertyChange(property.key, $any($event.target).value)\"\n            class=\"form-input\">\n            <option *ngFor=\"let option of property.options\" [value]=\"option.value\">\n              {{ option.label }}\n            </option>\n          </select>\n          \n          <!-- Textarea -->\n          <div *ngIf=\"property.type === 'textarea' || property.type === 'json'\" class=\"textarea-wrapper\">\n            <textarea \n              [id]=\"'prop-' + property.key\"\n              [placeholder]=\"property.placeholder || ''\"\n              [rows]=\"property.rows || 3\"\n              [value]=\"getPropertyValue(property.key)\"\n              (input)=\"onPropertyChange(property.key, $any($event.target).value)\"\n              class=\"form-input editable-textarea\">\n            </textarea>\n          </div>\n          \n          <!-- Checkbox -->\n          <label *ngIf=\"property.type === 'checkbox'\" class=\"checkbox-label\">\n            <input \n              type=\"checkbox\"\n              [checked]=\"getPropertyValue(property.key)\"\n              (change)=\"onPropertyChange(property.key, $any($event.target).checked)\">\n            {{ property.label }}\n          </label>\n        </div>\n      </div>\n      \n      <!-- Message when no option is selected -->\n      <div *ngIf=\"selectedStep.selectedOption && getOptionProperties().length === 0\" class=\"empty-state\">\n        <p>No additional properties for this option</p>\n      </div>\n      \n      <div *ngIf=\"!selectedStep.selectedOption\" class=\"empty-state\">\n        <p>Select an option above to configure properties</p>\n      </div>\n      \n      <div class=\"step-info\">\n        <div class=\"info-badge\" [style.background-color]=\"selectedStep.config.color + '20'\" [style.color]=\"selectedStep.config.color\">\n          <i class=\"fas\" [ngClass]=\"selectedStep.config.icon\"></i>\n          {{ selectedStep.config.name }}\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n", styles: ["\n    :host {\n      display: block;\n      height: 100%;\n      background: white;\n    }\n    \n    .properties-panel {\n      height: 100%;\n      background: white;\n      border-left: 1px solid #D9D9D9;\n      display: flex;\n      flex-direction: column;\n      box-shadow: -1px 0 3px rgba(0, 0, 0, 0.05);\n    }\n    \n    .properties-header {\n      padding: 1.5rem;\n      border-bottom: 1px solid #D9D9D9;\n      background: #F4F4F4;\n    }\n    \n    .properties-title {\n      font-size: 1.25rem;\n      font-weight: 600;\n      margin: 0;\n      color: #333;\n      display: flex;\n      align-items: center;\n      gap: 0.5rem;\n    }\n    \n    .properties-title i {\n      color: #0076B6;\n    }\n    \n    .properties-content {\n      flex: 1;\n      overflow-y: auto;\n      padding: 1rem;\n    }\n    \n    .empty-state {\n      text-align: center;\n      color: #AAA;\n      padding: 2rem;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      gap: 1rem;\n    }\n    \n    .empty-state .fa-info-circle {\n      font-size: 2rem;\n      color: #0076B6;\n    }\n    \n    .empty-state p {\n      margin: 0;\n      font-size: 0.875rem;\n    }\n    \n    .property-field {\n      margin-bottom: 1.5rem;\n    }\n    \n    .property-field label {\n      display: block;\n      margin-bottom: 0.5rem;\n      font-weight: 600;\n      color: #333;\n      font-size: 0.875rem;\n    }\n    \n    .form-input {\n      width: 100%;\n      padding: 0.5rem;\n      border: 1px solid #D9D9D9;\n      border-radius: 4px;\n      font-size: 0.875rem;\n    }\n    \n    .form-input:focus {\n      outline: none;\n      border-color: #0076B6;\n    }\n    \n    .form-input[readonly] {\n      background-color: #F4F4F4;\n      cursor: not-allowed;\n    }\n  "] }]
     }], () => [{ type: i1.FlowEditorService }, { type: i0.ChangeDetectorRef }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PropertiesPanelComponent, { className: "PropertiesPanelComponent" }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PropertiesPanelComponent, { className: "PropertiesPanelComponent", filePath: "src/lib/custom/AIAgents/FlowAgentType/flow-editor-integration/components/properties-panel/properties-panel.component.ts", lineNumber: 106 }); })();
 //# sourceMappingURL=properties-panel.component.js.map

package/dist/lib/custom/AIAgents/FlowAgentType/flow-editor-integration/components/simple-condition-editor/simple-condition-editor.component.js CHANGED Viewed

@@ -178,5 +178,5 @@ export class SimpleConditionEditorComponent {
         }], cancel: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SimpleConditionEditorComponent, { className: "SimpleConditionEditorComponent" }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SimpleConditionEditorComponent, { className: "SimpleConditionEditorComponent", filePath: "src/lib/custom/AIAgents/FlowAgentType/flow-editor-integration/components/simple-condition-editor/simple-condition-editor.component.ts", lineNumber: 160 }); })();
 //# sourceMappingURL=simple-condition-editor.component.js.map

package/dist/lib/custom/AIAgents/FlowAgentType/flow-editor-integration/components/step/step.component.js CHANGED Viewed

@@ -167,5 +167,5 @@ export class StepComponent {
         }], socketMouseLeave: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(StepComponent, { className: "StepComponent" }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(StepComponent, { className: "StepComponent", filePath: "src/lib/custom/AIAgents/FlowAgentType/flow-editor-integration/components/step/step.component.ts", lineNumber: 221 }); })();
 //# sourceMappingURL=step.component.js.map

package/dist/lib/custom/AIAgents/FlowAgentType/flow-editor-integration/components/toolbar/toolbar.component.js CHANGED Viewed

@@ -74,5 +74,5 @@ export class ToolbarComponent {
     }], () => [], { runFlow: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ToolbarComponent, { className: "ToolbarComponent" }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ToolbarComponent, { className: "ToolbarComponent", filePath: "src/lib/custom/AIAgents/FlowAgentType/flow-editor-integration/components/toolbar/toolbar.component.ts", lineNumber: 12 }); })();
 //# sourceMappingURL=toolbar.component.js.map

package/dist/lib/custom/AIAgents/FlowAgentType/mj-integrated-flow-editor.component.js CHANGED Viewed

@@ -496,5 +496,5 @@ export class MJIntegratedFlowEditorComponent {
         }], pathsChanged: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJIntegratedFlowEditorComponent, { className: "MJIntegratedFlowEditorComponent" }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJIntegratedFlowEditorComponent, { className: "MJIntegratedFlowEditorComponent", filePath: "src/lib/custom/AIAgents/FlowAgentType/mj-integrated-flow-editor.component.ts", lineNumber: 291 }); })();
 //# sourceMappingURL=mj-integrated-flow-editor.component.js.map

package/dist/lib/custom/AIAgents/FlowAgentType/step-info-control.component.js CHANGED Viewed

@@ -80,5 +80,5 @@ export class StepInfoControlComponent {
     }], null, { step: [{
             type: Input
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(StepInfoControlComponent, { className: "StepInfoControlComponent" }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(StepInfoControlComponent, { className: "StepInfoControlComponent", filePath: "src/lib/custom/AIAgents/FlowAgentType/step-info-control.component.ts", lineNumber: 61 }); })();
 //# sourceMappingURL=step-info-control.component.js.map

package/dist/lib/custom/AIAgents/add-action-dialog.component.js CHANGED Viewed

@@ -574,5 +574,5 @@ export class AddActionDialogComponent {
         type: Component,
         args: [{ selector: 'mj-add-action-dialog', template: "<!-- Add Action Dialog -->\n<div class=\"add-action-dialog\">\n  \n  <!-- Dialog Header -->\n  <div class=\"dialog-header\">\n    <div class=\"search-section\">\n      <kendo-textbox \n        [formControl]=\"searchControl\" \n        placeholder=\"Search actions by name, description, or category...\"\n        class=\"search-input\"\n        [clearButton]=\"true\">\n        <ng-template kendoTextBoxPrefixTemplate>\n          <i class=\"fa-solid fa-search\"></i>\n        </ng-template>\n      </kendo-textbox>\n    </div>\n    \n    <div class=\"header-actions\">\n      <!-- View Toggle -->\n      <button kendoButton \n              [toggleable]=\"true\" \n              [selected]=\"(viewMode$ | async) === 'grid'\"\n              (click)=\"toggleViewMode()\"\n              size=\"small\"\n              kendoTooltip\n              [title]=\"(viewMode$ | async) === 'grid' ? 'Switch to list view' : 'Switch to grid view'\">\n        <i class=\"fa-solid\" \n           [class.fa-th]=\"(viewMode$ | async) === 'grid'\" \n           [class.fa-list]=\"(viewMode$ | async) === 'list'\"></i>\n      </button>\n      \n      <!-- Stats -->\n      <div class=\"stats\">\n        <span class=\"stat-item\">\n          <i class=\"fa-solid fa-bolt\"></i>\n          {{ filteredCount }} of {{ totalActionCount }} actions\n        </span>\n      </div>\n    </div>\n  </div>\n\n  <!-- Main Content -->\n  <div class=\"dialog-content\">\n    \n    <!-- Category Sidebar -->\n    <div class=\"category-sidebar\">\n      <div class=\"sidebar-header\">\n        <h4><i class=\"fa-solid fa-folder-tree\"></i> Categories</h4>\n      </div>\n      \n      <div class=\"category-list\">\n        @for (category of categoryTree$ | async; track category.id) {\n          <div class=\"category-item\" \n               [class.selected]=\"(selectedCategoryId$ | async) === category.id\"\n               (click)=\"selectCategory(category.id)\">\n            <i class=\"fa-solid {{ category.icon }} category-icon\"></i>\n            <span class=\"category-name\">{{ category.name }}</span>\n            <span class=\"category-count\">{{ category.count }}</span>\n          </div>\n        }\n      </div>\n    </div>\n\n    <!-- Actions Display -->\n    <div class=\"actions-container\">\n      \n      <!-- Loading State -->\n      @if (isLoading$ | async) {\n        <div class=\"loading-state\">\n          <div class=\"loading-spinner\">\n            <i class=\"fa-solid fa-spinner fa-spin fa-2x\"></i>\n          </div>\n          <p>Loading actions...</p>\n        </div>\n      }\n\n      <!-- Empty State -->\n      @if (!(isLoading$ | async) && filteredCount === 0) {\n        <div class=\"empty-state\">\n          <i class=\"fa-solid fa-search-minus\"></i>\n          <h3>No actions found</h3>\n          <p>Try adjusting your search criteria or selecting a different category</p>\n          <button kendoButton (click)=\"clearSearch()\">Clear Search</button>\n        </div>\n      }\n\n      <!-- Grid View -->\n      @if (!(isLoading$ | async) && (viewMode$ | async) === 'grid' && filteredCount > 0) {\n        <div class=\"actions-grid\">\n          @for (action of filteredActions$ | async; track action.ID) {\n            <div class=\"action-card\" \n                 [class.selected]=\"action.selected\"\n                 [class.existing]=\"existingActionIds.includes(action.ID)\"\n                 (click)=\"toggleActionSelection(action)\">\n              \n              <!-- Selection Indicator -->\n              <div class=\"selection-indicator\">\n                <i class=\"fa-solid\" \n                   [class.fa-check-circle]=\"action.selected\" \n                   [class.fa-circle]=\"!action.selected\"></i>\n              </div>\n              \n              <!-- Card Content -->\n              <div class=\"card-header\">\n                <div class=\"action-icon\">\n                  <i class=\"fa-solid {{ getActionIcon(action) }}\"></i>\n                </div>\n                <h3 class=\"action-name\">{{ action.Name }}</h3>\n              </div>\n              \n              <div class=\"card-body\">\n                <p class=\"action-description\">{{ action.Description || 'No description available' }}</p>\n                \n                @if (action.categoryName) {\n                  <div class=\"category-badge\">\n                    <i class=\"fa-solid fa-folder\"></i>\n                    {{ action.categoryName }}\n                  </div>\n                }\n                \n                @if (action.Type) {\n                  <div class=\"type-badge\">\n                    <i class=\"fa-solid fa-tag\"></i>\n                    {{ action.Type }}\n                  </div>\n                }\n              </div>\n              \n              <!-- Existing Action Overlay -->\n              @if (existingActionIds.includes(action.ID)) {\n                <div class=\"existing-overlay\">\n                  <i class=\"fa-solid fa-check\"></i>\n                  <span>Already Added</span>\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n\n      <!-- List View -->\n      @if (!(isLoading$ | async) && (viewMode$ | async) === 'list' && filteredCount > 0) {\n        <div class=\"actions-list\">\n          \n          <!-- List Header -->\n          <div class=\"list-header\">\n            <span class=\"col-select\"></span>\n            <span class=\"col-name\">Name</span>\n            <span class=\"col-category\">Category</span>\n            <span class=\"col-type\">Type</span>\n            <span class=\"col-description\">Description</span>\n            <span class=\"col-status\">Status</span>\n          </div>\n          \n          <!-- List Items -->\n          @for (action of filteredActions$ | async; track action.ID) {\n            <div class=\"list-item\" \n                 [class.selected]=\"action.selected\"\n                 [class.existing]=\"existingActionIds.includes(action.ID)\"\n                 (click)=\"toggleActionSelection(action)\">\n              \n              <span class=\"col-select\">\n                <i class=\"fa-solid\" \n                   [class.fa-check-circle]=\"action.selected\" \n                   [class.fa-circle]=\"!action.selected\"></i>\n              </span>\n              \n              <span class=\"col-name\">\n                <i class=\"fa-solid {{ getActionIcon(action) }} action-icon\"></i>\n                {{ action.Name }}\n              </span>\n              \n              <span class=\"col-category\">{{ action.categoryName || '-' }}</span>\n              <span class=\"col-type\">{{ action.Type || '-' }}</span>\n              <span class=\"col-description\">{{ action.Description || '-' }}</span>\n              \n              <span class=\"col-status\">\n                @if (existingActionIds.includes(action.ID)) {\n                  <span class=\"status-badge existing\">\n                    <i class=\"fa-solid fa-check\"></i>\n                    Added\n                  </span>\n                } @else {\n                  <span class=\"status-badge available\">\n                    <i class=\"fa-solid fa-plus\"></i>\n                    Available\n                  </span>\n                }\n              </span>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  </div>\n\n  <!-- Selected Actions Summary -->\n  @if (selectedCount > 0) {\n    <div class=\"selection-summary\">\n      <div class=\"summary-content\">\n        <i class=\"fa-solid fa-check-circle\"></i>\n        <span>{{ selectedCount }} action{{ selectedCount === 1 ? '' : 's' }} selected</span>\n      </div>\n    </div>\n  }\n\n  <!-- Dialog Footer -->\n  <div class=\"dialog-footer\">\n    <button kendoButton \n            look=\"flat\" \n            (click)=\"cancel()\">\n      Cancel\n    </button>\n    \n    <button kendoButton \n            themeColor=\"primary\" \n            [disabled]=\"selectedCount === 0\"\n            (click)=\"addSelectedActions()\">\n      <i class=\"fa-solid fa-plus\"></i>\n      Add Selected ({{ selectedCount }})\n    </button>\n  </div>\n</div>", styles: [".add-action-dialog {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n}\n\n/* Ensure dialog appears above banner and other elements */\n:host ::ng-deep .k-dialog,\n:host ::ng-deep .k-window {\n  z-index: 10000 !important;\n}\n\n:host ::ng-deep .k-overlay {\n  z-index: 9999 !important;\n}\n\n/* === Dialog Header === */\n.add-action-dialog .dialog-header {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  padding: 1rem 1.5rem;\n  border-bottom: 1px solid #e0e0e0;\n  background: #f8f9fa;\n}\n\n.add-action-dialog .dialog-header .search-section {\n  flex: 1;\n}\n\n.add-action-dialog .dialog-header .search-section .search-input {\n  width: 100%;\n  max-width: 400px;\n}\n\n.add-action-dialog .dialog-header .header-actions {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n}\n\n.add-action-dialog .dialog-header .header-actions .stats .stat-item {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  color: #6c757d;\n  font-size: 0.9rem;\n}\n\n.add-action-dialog .dialog-header .header-actions .stats .stat-item i {\n  color: #28a745;\n}\n\n/* === Main Content === */\n.add-action-dialog .dialog-content {\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n}\n\n/* === Category Sidebar === */\n.add-action-dialog .category-sidebar {\n  width: 250px;\n  background: #f8f9fa;\n  border-right: 1px solid #e0e0e0;\n  overflow-y: auto;\n}\n\n.add-action-dialog .category-sidebar .sidebar-header {\n  padding: 1rem;\n  border-bottom: 1px solid #e0e0e0;\n}\n\n.add-action-dialog .category-sidebar .sidebar-header h4 {\n  margin: 0;\n  color: #495057;\n  font-size: 1rem;\n  font-weight: 600;\n}\n\n.add-action-dialog .category-sidebar .sidebar-header h4 i {\n  margin-right: 0.5rem;\n  color: #6c757d;\n}\n\n.add-action-dialog .category-sidebar .category-list {\n  padding: 0.5rem 0;\n}\n\n.add-action-dialog .category-sidebar .category-list .category-item {\n  display: flex;\n  align-items: center;\n  padding: 0.75rem 1rem;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  border-left: 3px solid transparent;\n}\n\n.add-action-dialog .category-sidebar .category-list .category-item:hover {\n  background: #e9ecef;\n}\n\n.add-action-dialog .category-sidebar .category-list .category-item.selected {\n  background: #e3f2fd;\n  border-left-color: #2196f3;\n  color: #1976d2;\n}\n\n.add-action-dialog .category-sidebar .category-list .category-item.selected .category-icon {\n  color: #1976d2;\n}\n\n.add-action-dialog .category-sidebar .category-list .category-item .category-icon {\n  width: 16px;\n  text-align: center;\n  margin-right: 0.75rem;\n  color: #6c757d;\n}\n\n.add-action-dialog .category-sidebar .category-list .category-item .category-name {\n  flex: 1;\n  font-weight: 500;\n}\n\n.add-action-dialog .category-sidebar .category-list .category-item .category-count {\n  background: #dee2e6;\n  color: #495057;\n  padding: 0.25rem 0.5rem;\n  border-radius: 12px;\n  font-size: 0.8rem;\n  font-weight: 600;\n  min-width: 24px;\n  text-align: center;\n}\n\n.add-action-dialog .category-sidebar .category-list .category-item.selected .category-count {\n  background: #bbdefb;\n  color: #1976d2;\n}\n\n/* === Actions Container === */\n.add-action-dialog .actions-container {\n  flex: 1;\n  padding: 1.5rem;\n  overflow-y: auto;\n  background: white;\n}\n\n/* Loading State */\n.add-action-dialog .actions-container .loading-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 200px;\n  color: #6c757d;\n}\n\n.add-action-dialog .actions-container .loading-state .loading-spinner {\n  margin-bottom: 1rem;\n}\n\n.add-action-dialog .actions-container .loading-state .loading-spinner i {\n  color: #2196f3;\n}\n\n.add-action-dialog .actions-container .loading-state p {\n  margin-top: 1rem;\n  font-size: 1.1rem;\n}\n\n/* Empty State */\n.add-action-dialog .actions-container .empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 300px;\n  color: #6c757d;\n  text-align: center;\n}\n\n.add-action-dialog .actions-container .empty-state i {\n  font-size: 3rem;\n  margin-bottom: 1rem;\n  color: #dee2e6;\n}\n\n.add-action-dialog .actions-container .empty-state h3 {\n  margin: 0 0 0.5rem 0;\n  color: #495057;\n}\n\n.add-action-dialog .actions-container .empty-state p {\n  margin: 0 0 1.5rem 0;\n}\n\n/* === Grid View === */\n.add-action-dialog .actions-container .actions-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n  gap: 1.5rem;\n}\n\n.add-action-dialog .actions-container .actions-grid .action-card {\n  position: relative;\n  background: white;\n  border: 2px solid #e0e0e0;\n  border-radius: 8px;\n  padding: 1.5rem;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);\n}\n\n.add-action-dialog .actions-container .actions-grid .action-card:hover {\n  border-color: #2196f3;\n  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.15);\n  transform: translateY(-2px);\n}\n\n.add-action-dialog .actions-container .actions-grid .action-card.selected {\n  border-color: #28a745;\n  background: #f8fff9;\n  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.15);\n}\n\n.add-action-dialog .actions-container .actions-grid .action-card.selected .selection-indicator i {\n  color: #28a745;\n}\n\n.add-action-dialog .actions-container .actions-grid .action-card.existing {\n  border-color: #6c757d;\n  background: #f8f9fa;\n  cursor: default;\n  opacity: 0.7;\n}\n\n.add-action-dialog .actions-container .actions-grid .action-card.existing:hover {\n  transform: none;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);\n}\n\n.add-action-dialog .actions-container .actions-grid .action-card .selection-indicator {\n  position: absolute;\n  top: 1rem;\n  right: 1rem;\n}\n\n.add-action-dialog .actions-container .actions-grid .action-card .selection-indicator i {\n  font-size: 1.25rem;\n  color: #dee2e6;\n  transition: color 0.2s ease;\n}\n\n.add-action-dialog .actions-container .actions-grid .action-card .card-header {\n  display: flex;\n  align-items: center;\n  margin-bottom: 1rem;\n}\n\n.add-action-dialog .actions-container .actions-grid .action-card .card-header .action-icon {\n  width: 40px;\n  height: 40px;\n  background: #e3f2fd;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-right: 1rem;\n}\n\n.add-action-dialog .actions-container .actions-grid .action-card .card-header .action-icon i {\n  font-size: 1.25rem;\n  color: #1976d2;\n}\n\n.add-action-dialog .actions-container .actions-grid .action-card .card-header .action-name {\n  margin: 0;\n  font-size: 1.1rem;\n  font-weight: 600;\n  color: #212529;\n  line-height: 1.2;\n}\n\n.add-action-dialog .actions-container .actions-grid .action-card .card-body .action-description {\n  margin: 0 0 1rem 0;\n  color: #6c757d;\n  line-height: 1.4;\n  font-size: 0.9rem;\n}\n\n.add-action-dialog .actions-container .actions-grid .action-card .card-body .category-badge,\n.add-action-dialog .actions-container .actions-grid .action-card .card-body .type-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n  background: #f8f9fa;\n  color: #495057;\n  padding: 0.25rem 0.5rem;\n  border-radius: 4px;\n  font-size: 0.8rem;\n  font-weight: 500;\n  margin-right: 0.5rem;\n  margin-bottom: 0.5rem;\n}\n\n.add-action-dialog .actions-container .actions-grid .action-card .card-body .category-badge i,\n.add-action-dialog .actions-container .actions-grid .action-card .card-body .type-badge i {\n  font-size: 0.7rem;\n}\n\n.add-action-dialog .actions-container .actions-grid .action-card .card-body .type-badge {\n  background: #fff3cd;\n  color: #856404;\n}\n\n.add-action-dialog .actions-container .actions-grid .action-card .existing-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(108, 117, 125, 0.9);\n  color: white;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  border-radius: 6px;\n}\n\n.add-action-dialog .actions-container .actions-grid .action-card .existing-overlay i {\n  font-size: 2rem;\n  margin-bottom: 0.5rem;\n}\n\n.add-action-dialog .actions-container .actions-grid .action-card .existing-overlay span {\n  font-weight: 600;\n}\n\n/* === List View === */\n.add-action-dialog .actions-container .actions-list .list-header {\n  display: grid;\n  grid-template-columns: 40px 1fr 150px 100px 2fr 120px;\n  gap: 1rem;\n  padding: 1rem;\n  background: #f8f9fa;\n  border-radius: 6px;\n  font-weight: 600;\n  color: #495057;\n  margin-bottom: 0.5rem;\n  font-size: 0.9rem;\n}\n\n.add-action-dialog .actions-container .actions-list .list-item {\n  display: grid;\n  grid-template-columns: 40px 1fr 150px 100px 2fr 120px;\n  gap: 1rem;\n  padding: 1rem;\n  border: 1px solid #e0e0e0;\n  border-radius: 6px;\n  margin-bottom: 0.5rem;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  align-items: center;\n}\n\n.add-action-dialog .actions-container .actions-list .list-item:hover {\n  background: #f8f9fa;\n  border-color: #2196f3;\n}\n\n.add-action-dialog .actions-container .actions-list .list-item.selected {\n  background: #f8fff9;\n  border-color: #28a745;\n}\n\n.add-action-dialog .actions-container .actions-list .list-item.selected .col-select i {\n  color: #28a745;\n}\n\n.add-action-dialog .actions-container .actions-list .list-item.existing {\n  background: #f8f9fa;\n  opacity: 0.7;\n  cursor: default;\n}\n\n.add-action-dialog .actions-container .actions-list .list-item.existing:hover {\n  background: #f8f9fa;\n  border-color: #e0e0e0;\n}\n\n.add-action-dialog .actions-container .actions-list .list-item .col-select i {\n  font-size: 1.25rem;\n  color: #dee2e6;\n}\n\n.add-action-dialog .actions-container .actions-list .list-item .col-name {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  font-weight: 500;\n}\n\n.add-action-dialog .actions-container .actions-list .list-item .col-name .action-icon {\n  color: #1976d2;\n}\n\n.add-action-dialog .actions-container .actions-list .list-item .col-description {\n  color: #6c757d;\n  font-size: 0.9rem;\n}\n\n.add-action-dialog .actions-container .actions-list .list-item .status-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n  padding: 0.25rem 0.5rem;\n  border-radius: 4px;\n  font-size: 0.8rem;\n  font-weight: 500;\n}\n\n.add-action-dialog .actions-container .actions-list .list-item .status-badge.existing {\n  background: #6c757d;\n  color: white;\n}\n\n.add-action-dialog .actions-container .actions-list .list-item .status-badge.available {\n  background: #d4edda;\n  color: #155724;\n}\n\n/* === Selection Summary === */\n.add-action-dialog .selection-summary {\n  padding: 1rem 1.5rem;\n  background: #d4edda;\n  border-top: 1px solid #c3e6cb;\n}\n\n.add-action-dialog .selection-summary .summary-content {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  color: #155724;\n  font-weight: 500;\n}\n\n.add-action-dialog .selection-summary .summary-content i {\n  color: #28a745;\n}\n\n/* === Dialog Footer === */\n.add-action-dialog .dialog-footer {\n  display: flex;\n  justify-content: flex-end;\n  gap: 1rem;\n  padding: 1rem 1.5rem;\n  border-top: 1px solid #e0e0e0;\n  background: #f8f9fa;\n}\n\n.add-action-dialog .dialog-footer button[kendoButton] {\n  min-width: 120px;\n}\n\n.add-action-dialog .dialog-footer button[kendoButton][look=\"primary\"] i {\n  margin-right: 0.5rem;\n}\n\n/* === Responsive Design === */\n@media (max-width: 768px) {\n  .add-action-dialog .dialog-content {\n    flex-direction: column;\n  }\n\n  .add-action-dialog .category-sidebar {\n    width: 100%;\n    max-height: 200px;\n  }\n\n  .add-action-dialog .actions-container .actions-grid {\n    grid-template-columns: 1fr;\n  }\n\n  .add-action-dialog .actions-container .actions-list .list-header,\n  .add-action-dialog .actions-container .actions-list .list-item {\n    grid-template-columns: 40px 1fr 80px;\n    gap: 0.5rem;\n  }\n\n  .add-action-dialog .actions-container .actions-list .list-header .col-category,\n  .add-action-dialog .actions-container .actions-list .list-header .col-type,\n  .add-action-dialog .actions-container .actions-list .list-header .col-description,\n  .add-action-dialog .actions-container .actions-list .list-item .col-category,\n  .add-action-dialog .actions-container .actions-list .list-item .col-type,\n  .add-action-dialog .actions-container .actions-list .list-item .col-description {\n    display: none;\n  }\n}"] }]
     }], () => [{ type: i1.WindowRef }, { type: i0.ChangeDetectorRef }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AddActionDialogComponent, { className: "AddActionDialogComponent" }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AddActionDialogComponent, { className: "AddActionDialogComponent", filePath: "src/lib/custom/AIAgents/add-action-dialog.component.ts", lineNumber: 31 }); })();
 //# sourceMappingURL=add-action-dialog.component.js.map

package/dist/lib/custom/AIAgents/agent-permissions-dialog.component.js CHANGED Viewed

@@ -786,5 +786,5 @@ export class AgentPermissionsDialogComponent {
             type: ViewChild,
             args: ['grid']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AgentPermissionsDialogComponent, { className: "AgentPermissionsDialogComponent" }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AgentPermissionsDialogComponent, { className: "AgentPermissionsDialogComponent", filePath: "src/lib/custom/AIAgents/agent-permissions-dialog.component.ts", lineNumber: 438 }); })();
 //# sourceMappingURL=agent-permissions-dialog.component.js.map

package/dist/lib/custom/AIAgents/agent-prompt-advanced-settings-dialog.component.js CHANGED Viewed

@@ -396,5 +396,5 @@ export class AgentPromptAdvancedSettingsDialogComponent {
         type: Component,
         args: [{ selector: 'mj-agent-prompt-advanced-settings-dialog', template: "<!-- Prompt Advanced Settings Dialog -->\n<div class=\"prompt-advanced-settings-dialog\">\n  \n  <!-- Loading State -->\n  @if (isLoading$ | async) {\n    <div class=\"loading-state\">\n      <div class=\"loading-spinner\">\n        <i class=\"fa-solid fa-spinner fa-spin fa-2x\"></i>\n      </div>\n      <p>Loading prompt settings...</p>\n    </div>\n  } @else {\n    \n    <!-- Form Content -->\n    <form [formGroup]=\"advancedForm\" class=\"advanced-form\">\n      \n      <!-- Execution Configuration Section -->\n      <div class=\"form-section\">\n        <h3 class=\"section-title\">\n          <i class=\"fa-solid fa-list-ol\"></i>\n          Execution Configuration\n        </h3>\n        \n        <div class=\"form-grid\">\n          <!-- Execution Order -->\n          <div class=\"form-field\">\n            <label for=\"executionOrder\">Execution Order *</label>\n            <kendo-numerictextbox \n              formControlName=\"executionOrder\"\n              [min]=\"0\"\n              [format]=\"'0'\"\n              [class.error-border]=\"hasExecutionOrderError()\"\n              class=\"form-control\">\n            </kendo-numerictextbox>\n            @if (isFieldInvalid('executionOrder')) {\n              <div class=\"field-error\">{{ getFieldError('executionOrder') }}</div>\n            }\n            @if (hasExecutionOrderError()) {\n              <div class=\"field-error\">{{ executionOrderError }}</div>\n            }\n            <small class=\"field-hint\">Order in which this prompt executes (0 = first). Must be unique among agent prompts.</small>\n          </div>\n          \n          <!-- Purpose -->\n          <div class=\"form-field\">\n            <label for=\"purpose\">Purpose</label>\n            <kendo-textbox \n              formControlName=\"purpose\"\n              placeholder=\"e.g., Initialize, ProcessData, Summarize\"\n              class=\"form-control\">\n            </kendo-textbox>\n            <small class=\"field-hint\">Functional purpose of this prompt within the agent workflow</small>\n          </div>\n          \n          <!-- Status -->\n          <div class=\"form-field\">\n            <label for=\"status\">Status *</label>\n            <kendo-dropdownlist \n              formControlName=\"status\"\n              [data]=\"statusOptions\"\n              textField=\"text\"\n              valueField=\"value\"\n              [valuePrimitive]=\"true\"\n              class=\"form-control\">\n            </kendo-dropdownlist>\n            @if (isFieldInvalid('status')) {\n              <div class=\"field-error\">{{ getFieldError('status') }}</div>\n            }\n            <small class=\"field-hint\">Current status of this prompt mapping</small>\n          </div>\n        </div>\n      </div>\n\n      <!-- Context Behavior Section -->\n      <div class=\"form-section\">\n        <h3 class=\"section-title\">\n          <i class=\"fa-solid fa-comments\"></i>\n          Context Behavior\n        </h3>\n        \n        <div class=\"form-grid\">\n          <!-- Context Behavior -->\n          <div class=\"form-field full-width\">\n            <label for=\"contextBehavior\">Context Behavior *</label>\n            <kendo-dropdownlist \n              formControlName=\"contextBehavior\"\n              [data]=\"contextBehaviorOptions\"\n              textField=\"text\"\n              valueField=\"value\"\n              [valuePrimitive]=\"true\"\n              class=\"form-control\">\n              <ng-template kendoDropDownListItemTemplate let-dataItem>\n                <div class=\"context-behavior-option\">\n                  <div class=\"option-title\">{{ dataItem.text }}</div>\n                  <div class=\"option-description\">{{ dataItem.description }}</div>\n                </div>\n              </ng-template>\n            </kendo-dropdownlist>\n            @if (isFieldInvalid('contextBehavior')) {\n              <div class=\"field-error\">{{ getFieldError('contextBehavior') }}</div>\n            }\n            <small class=\"field-hint\">{{ getContextBehaviorDescription(advancedForm.get('contextBehavior')?.value) }}</small>\n          </div>\n          \n          <!-- Context Message Count (conditional) -->\n          @if (requiresMessageCount()) {\n            <div class=\"form-field\">\n              <label for=\"contextMessageCount\">Message Count *</label>\n              <kendo-numerictextbox \n                formControlName=\"contextMessageCount\"\n                [min]=\"1\"\n                [format]=\"'0'\"\n                class=\"form-control\">\n              </kendo-numerictextbox>\n              @if (isFieldInvalid('contextMessageCount')) {\n                <div class=\"field-error\">{{ getFieldError('contextMessageCount') }}</div>\n              }\n              <small class=\"field-hint\">Number of messages to include for {{ advancedForm.get('contextBehavior')?.value }}</small>\n            </div>\n          }\n        </div>\n      </div>\n\n      <!-- AI Configuration Section -->\n      <div class=\"form-section\">\n        <h3 class=\"section-title\">\n          <i class=\"fa-solid fa-cog\"></i>\n          AI Configuration Override\n        </h3>\n        \n        <div class=\"form-grid\">\n          <!-- Configuration Override -->\n          <div class=\"form-field full-width\">\n            <label for=\"configurationID\">AI Configuration</label>\n            <kendo-dropdownlist \n              formControlName=\"configurationID\"\n              [data]=\"configurations$ | async\"\n              textField=\"Name\"\n              valueField=\"ID\"\n              [valuePrimitive]=\"true\"\n              [defaultItem]=\"{ Name: 'Use Agent Default', ID: null }\"\n              class=\"form-control\">\n            </kendo-dropdownlist>\n            <small class=\"field-hint\">Override the agent's default AI configuration for this specific prompt</small>\n          </div>\n        </div>\n      </div>\n    </form>\n  }\n\n  <!-- Dialog Footer -->\n  <div class=\"dialog-footer\">\n    <button kendoButton \n            look=\"flat\" \n            (click)=\"cancel()\"\n            [disabled]=\"(isSaving$ | async) || false\">\n      Cancel\n    </button>\n    \n    <button kendoButton \n            themeColor=\"primary\" \n            (click)=\"save()\"\n            [disabled]=\"((isSaving$ | async) || false) || ((isLoading$ | async) || false) || hasExecutionOrderError()\">\n      @if (isSaving$ | async) {\n        <i class=\"fa-solid fa-spinner fa-spin\"></i>\n        Saving...\n      } @else {\n        <i class=\"fa-solid fa-save\"></i>\n        Save Settings\n      }\n    </button>\n  </div>\n</div>", styles: [".prompt-advanced-settings-dialog {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n}\n\n/* Ensure dialog appears above banner and other elements */\n:host ::ng-deep .k-dialog,\n:host ::ng-deep .k-window {\n  z-index: 10000 !important;\n}\n\n:host ::ng-deep .k-overlay {\n  z-index: 9999 !important;\n}\n\n/* === Loading State === */\n.loading-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 300px;\n  color: #6c757d;\n}\n\n.loading-spinner {\n  margin-bottom: 1rem;\n}\n\n.loading-spinner i {\n  color: #2196f3;\n}\n\n.loading-state p {\n  margin-top: 1rem;\n  font-size: 1.1rem;\n}\n\n/* === Form Layout === */\n.advanced-form {\n  flex: 1;\n  overflow-y: auto;\n  padding: 1.5rem;\n}\n\n.form-section {\n  margin-bottom: 2rem;\n  background: white;\n  border-radius: 8px;\n  border: 1px solid #e0e0e0;\n  overflow: hidden;\n}\n\n.section-title {\n  margin: 0;\n  padding: 1rem 1.5rem;\n  background: #f8f9fa;\n  border-bottom: 1px solid #e0e0e0;\n  color: #495057;\n  font-size: 1.1rem;\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.section-title i {\n  color: #2196f3;\n}\n\n.form-grid {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 1.5rem;\n  padding: 1.5rem;\n}\n\n.form-field {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.form-field.full-width {\n  grid-column: 1 / -1;\n}\n\n/* === Form Controls === */\nlabel {\n  font-weight: 600;\n  color: #495057;\n  font-size: 0.9rem;\n}\n\n.form-control {\n  width: 100%;\n}\n\n.field-hint {\n  color: #6c757d;\n  font-size: 0.8rem;\n  margin-top: 0.25rem;\n  line-height: 1.3;\n}\n\n.field-error {\n  color: #dc3545;\n  font-size: 0.8rem;\n  margin-top: 0.25rem;\n}\n\n/* === Validation States === */\n.form-control.ng-invalid.ng-touched,\n.error-border {\n  border-color: #dc3545 !important;\n}\n\n.form-control.ng-valid.ng-touched {\n  border-color: #28a745;\n}\n\n/* === Context Behavior Option Template === */\n.context-behavior-option {\n  padding: 0.5rem 0;\n}\n\n.option-title {\n  font-weight: 500;\n  color: #333;\n  font-size: 0.9rem;\n}\n\n.option-description {\n  font-size: 0.8rem;\n  color: #666;\n  margin-top: 0.25rem;\n  line-height: 1.3;\n}\n\n/* === Dialog Footer === */\n.dialog-footer {\n  display: flex;\n  justify-content: flex-end;\n  gap: 1rem;\n  padding: 1rem 1.5rem;\n  border-top: 1px solid #e0e0e0;\n  background: #f8f9fa;\n}\n\n.dialog-footer button {\n  min-width: 120px;\n}\n\n.dialog-footer button[themeColor=\"primary\"] i {\n  margin-right: 0.5rem;\n}\n\n/* === Section-Specific Styling === */\n\n/* Execution Configuration */\n.form-section:first-child .section-title {\n  background: linear-gradient(135deg, #e3f2fd, #f8f9fa);\n}\n\n/* Context Behavior */\n.form-section:nth-child(2) .section-title {\n  background: linear-gradient(135deg, #f3e5f5, #f8f9fa);\n}\n\n/* AI Configuration */\n.form-section:nth-child(3) .section-title {\n  background: linear-gradient(135deg, #e8f5e8, #f8f9fa);\n}\n\n/* === Responsive Design === */\n@media (max-width: 768px) {\n  .form-grid {\n    grid-template-columns: 1fr;\n    gap: 1rem;\n    padding: 1rem;\n  }\n  \n  .form-field.full-width {\n    grid-column: 1;\n  }\n  \n  .advanced-form {\n    padding: 1rem;\n  }\n  \n  .section-title {\n    padding: 0.75rem 1rem;\n    font-size: 1rem;\n  }\n  \n  .dialog-footer {\n    padding: 1rem;\n    flex-direction: column;\n  }\n  \n  .dialog-footer button {\n    width: 100%;\n  }\n}\n\n/* === Error Highlighting === */\n.error-border {\n  border: 2px solid #dc3545 !important;\n  background-color: #fff5f5;\n}"] }]
     }], () => [{ type: i1.WindowRef }, { type: i2.FormBuilder }, { type: i0.ChangeDetectorRef }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AgentPromptAdvancedSettingsDialogComponent, { className: "AgentPromptAdvancedSettingsDialogComponent" }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AgentPromptAdvancedSettingsDialogComponent, { className: "AgentPromptAdvancedSettingsDialogComponent", filePath: "src/lib/custom/AIAgents/agent-prompt-advanced-settings-dialog.component.ts", lineNumber: 27 }); })();
 //# sourceMappingURL=agent-prompt-advanced-settings-dialog.component.js.map

package/dist/lib/custom/AIAgents/ai-agent-form.component.js CHANGED Viewed

@@ -4317,7 +4317,7 @@ export { AIAgentFormComponentExtended };
             type: ViewChild,
             args: ['customSectionContainer', { read: ViewContainerRef }]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AIAgentFormComponentExtended, { className: "AIAgentFormComponentExtended" }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AIAgentFormComponentExtended, { className: "AIAgentFormComponentExtended", filePath: "src/lib/custom/AIAgents/ai-agent-form.component.ts", lineNumber: 74 }); })();
 export function LoadAIAgentFormComponentExtended() {
     // This function is called to ensure the component is loaded and registered
 }

package/dist/lib/custom/AIAgents/create-prompt-dialog.component.js CHANGED Viewed

@@ -459,5 +459,5 @@ export class CreatePromptDialogComponent {
             type: ViewChild,
             args: ['templateEditor']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CreatePromptDialogComponent, { className: "CreatePromptDialogComponent" }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CreatePromptDialogComponent, { className: "CreatePromptDialogComponent", filePath: "src/lib/custom/AIAgents/create-prompt-dialog.component.ts", lineNumber: 41 }); })();
 //# sourceMappingURL=create-prompt-dialog.component.js.map

package/dist/lib/custom/AIAgents/create-sub-agent-dialog.component.js CHANGED Viewed

@@ -712,5 +712,5 @@ export class CreateSubAgentDialogComponent {
         type: Component,
         args: [{ selector: 'mj-create-sub-agent-dialog', template: "<div class=\"sub-agent-dialog\">\n  <div class=\"sub-agent-header\">\n    <h2 class=\"dialog-title\">\n      <i class=\"fa-solid fa-robot\"></i>\n      {{ config.title || 'Create New Sub-Agent' }}\n    </h2>\n    @if (config.parentAgentName) {\n      <p class=\"parent-info\">\n        <i class=\"fa-solid fa-link\"></i>\n        Sub-agent of: <strong>{{ config.parentAgentName }}</strong>\n      </p>\n    }\n  </div>\n\n  @if (isLoading$ | async) {\n    <div class=\"loading-container\">\n      <i class=\"fa-solid fa-spinner fa-spin\"></i>\n      <span>Loading sub-agent creation form...</span>\n    </div>\n  } @else {\n    <form [formGroup]=\"subAgentForm\" class=\"sub-agent-form\">\n      <!-- Basic Information Section -->\n      <div class=\"form-section\">\n        <h3 class=\"section-title\">\n          <i class=\"fa-solid fa-info-circle\"></i>\n          Basic Information\n        </h3>\n        \n        <div class=\"form-row\">\n          <div class=\"form-group\">\n            <label for=\"name\">Name *</label>\n            <input type=\"text\" id=\"name\" formControlName=\"name\" class=\"form-control\" placeholder=\"Enter sub-agent name\">\n          </div>\n          \n          <div class=\"form-group\">\n            <label for=\"typeID\">Type *</label>\n            <select id=\"typeID\" formControlName=\"typeID\" class=\"form-control\">\n              <option value=\"\">Select agent type...</option>\n              @for (type of availableAgentTypes$ | async; track type.ID) {\n                <option [value]=\"type.ID\">{{ type.Name }}</option>\n              }\n            </select>\n          </div>\n        </div>\n\n        <div class=\"form-row\">\n          <div class=\"form-group\">\n            <label for=\"description\">Description</label>\n            <textarea id=\"description\" formControlName=\"description\" class=\"form-control\" rows=\"2\" placeholder=\"Enter description\"></textarea>\n          </div>\n        </div>\n\n        <div class=\"form-row\">\n          <div class=\"form-group\">\n            <label for=\"status\">Status</label>\n            <select id=\"status\" formControlName=\"status\" class=\"form-control\">\n              <option value=\"Pending\">Pending</option>\n              <option value=\"Active\">Active</option>\n              <option value=\"Disabled\">Disabled</option>\n            </select>\n          </div>\n          \n          <div class=\"form-group\">\n            <label for=\"executionMode\">Execution Mode</label>\n            <select id=\"executionMode\" formControlName=\"executionMode\" class=\"form-control\">\n              <option value=\"Sequential\">Sequential</option>\n              <option value=\"Parallel\">Parallel</option>\n            </select>\n          </div>\n        </div>\n      </div>\n\n      <!-- Purpose & Messages Section -->\n      <div class=\"form-section\">\n        <h3 class=\"section-title\">\n          <i class=\"fa-solid fa-bullseye\"></i>\n          Purpose & Messages\n        </h3>\n        \n        <div class=\"form-row\">\n          <div class=\"form-group\">\n            <label for=\"purpose\">Purpose</label>\n            <input type=\"text\" id=\"purpose\" formControlName=\"purpose\" class=\"form-control\" placeholder=\"Enter the purpose of this sub-agent\">\n          </div>\n        </div>\n\n        <div class=\"form-row\">\n          <div class=\"form-group\">\n            <label for=\"userMessage\">User Message</label>\n            <textarea id=\"userMessage\" formControlName=\"userMessage\" class=\"form-control\" rows=\"3\" placeholder=\"Enter user message\"></textarea>\n          </div>\n        </div>\n\n        <!-- System Message field removed - property does not exist on AIAgentEntity -->\n      </div>\n\n      <!-- Model Configuration Section -->\n      <div class=\"form-section\">\n        <h3 class=\"section-title\">\n          <i class=\"fa-solid fa-cogs\"></i>\n          Model Configuration\n        </h3>\n        \n        <div class=\"form-row\">\n          <div class=\"form-group\">\n            <label for=\"modelSelectionMode\">Model Selection Mode</label>\n            <select id=\"modelSelectionMode\" formControlName=\"modelSelectionMode\" class=\"form-control\">\n              <option value=\"Agent Type\">Agent Type</option>\n              <option value=\"Agent\">Agent</option>\n            </select>\n          </div>\n        </div>\n\n        <div class=\"form-row\">\n          <div class=\"form-group\">\n            <label for=\"temperature\">Temperature</label>\n            <input type=\"number\" id=\"temperature\" formControlName=\"temperature\" class=\"form-control\" min=\"0\" max=\"2\" step=\"0.1\">\n          </div>\n          \n          <div class=\"form-group\">\n            <label for=\"topP\">Top P</label>\n            <input type=\"number\" id=\"topP\" formControlName=\"topP\" class=\"form-control\" min=\"0\" max=\"1\" step=\"0.1\">\n          </div>\n        </div>\n\n        <div class=\"form-row\">\n          <div class=\"form-group\">\n            <label for=\"topK\">Top K</label>\n            <input type=\"number\" id=\"topK\" formControlName=\"topK\" class=\"form-control\" min=\"1\" max=\"100\" step=\"1\">\n          </div>\n          \n          <div class=\"form-group\">\n            <label for=\"maxTokens\">Max Tokens</label>\n            <input type=\"number\" id=\"maxTokens\" formControlName=\"maxTokens\" class=\"form-control\" min=\"1\" max=\"32000\" step=\"1\">\n          </div>\n        </div>\n\n        <div class=\"form-row\">\n          <div class=\"form-group\">\n            <label for=\"enableCaching\">\n              <input type=\"checkbox\" id=\"enableCaching\" formControlName=\"enableCaching\">\n              Enable Caching\n            </label>\n          </div>\n          \n          <div class=\"form-group\">\n            <label for=\"cacheTTL\">Cache TTL (seconds)</label>\n            <input type=\"number\" id=\"cacheTTL\" formControlName=\"cacheTTL\" class=\"form-control\" min=\"60\" max=\"86400\" step=\"60\">\n          </div>\n        </div>\n      </div>\n\n      <!-- Prompts Section -->\n      <div class=\"form-section\">\n        <h3 class=\"section-title\">\n          <i class=\"fa-solid fa-comments\"></i>\n          Prompts ({{ linkedPromptCount }})\n        </h3>\n        \n        <div class=\"section-actions\">\n          <button type=\"button\" class=\"btn btn-primary btn-sm\" (click)=\"addPrompt()\">\n            <i class=\"fa-solid fa-plus\"></i>\n            Add Existing Prompt\n          </button>\n          <button type=\"button\" class=\"btn btn-success btn-sm\" (click)=\"createNewPrompt()\">\n            <i class=\"fa-solid fa-plus\"></i>\n            Create New Prompt\n          </button>\n        </div>\n\n        @if (linkedPrompts.length > 0) {\n          <div class=\"linked-items\">\n            @for (prompt of linkedPrompts; track prompt.ID) {\n              <div class=\"linked-item prompt-item\">\n                <div class=\"item-info\">\n                  <i class=\"fa-solid fa-comments\"></i>\n                  <span class=\"item-name\">{{ prompt.Name }}</span>\n                  @if (prompt.Description) {\n                    <span class=\"item-description\">{{ prompt.Description }}</span>\n                  }\n                </div>\n                <button type=\"button\" class=\"btn btn-danger btn-xs\" (click)=\"removePrompt(prompt)\">\n                  <i class=\"fa-solid fa-times\"></i>\n                </button>\n              </div>\n            }\n          </div>\n        } @else {\n          <div class=\"empty-state\">\n            <i class=\"fa-solid fa-comments\"></i>\n            <p>No prompts added yet. Click the buttons above to add prompts.</p>\n          </div>\n        }\n      </div>\n\n      <!-- Actions Section -->\n      <div class=\"form-section\">\n        <h3 class=\"section-title\">\n          <i class=\"fa-solid fa-bolt\"></i>\n          Actions ({{ linkedActionCount }})\n        </h3>\n        \n        <div class=\"section-actions\">\n          <button type=\"button\" class=\"btn btn-primary btn-sm\" (click)=\"addAction()\">\n            <i class=\"fa-solid fa-plus\"></i>\n            Add Action\n          </button>\n        </div>\n\n        @if (linkedActions.length > 0) {\n          <div class=\"linked-items\">\n            @for (action of linkedActions; track action.ID) {\n              <div class=\"linked-item action-item\">\n                <div class=\"item-info\">\n                  <i class=\"fa-solid fa-bolt\"></i>\n                  <span class=\"item-name\">{{ action.Name }}</span>\n                  @if (action.Description) {\n                    <span class=\"item-description\">{{ action.Description }}</span>\n                  }\n                </div>\n                <button type=\"button\" class=\"btn btn-danger btn-xs\" (click)=\"removeAction(action)\">\n                  <i class=\"fa-solid fa-times\"></i>\n                </button>\n              </div>\n            }\n          </div>\n        } @else {\n          <div class=\"empty-state\">\n            <i class=\"fa-solid fa-bolt\"></i>\n            <p>No actions added yet. Click the button above to add actions.</p>\n          </div>\n        }\n      </div>\n    </form>\n  }\n\n  <!-- Dialog Actions -->\n  <div class=\"dialog-actions\">\n    <button type=\"button\" class=\"btn btn-secondary\" (click)=\"cancel()\" [disabled]=\"isSaving$ | async\">\n      <i class=\"fa-solid fa-times\"></i>\n      Cancel\n    </button>\n    <button type=\"button\" class=\"btn btn-primary\" (click)=\"save()\" [disabled]=\"(isSaving$ | async) || !subAgentForm.valid\">\n      @if (isSaving$ | async) {\n        <i class=\"fa-solid fa-spinner fa-spin\"></i>\n        Creating...\n      } @else {\n        <i class=\"fa-solid fa-save\"></i>\n        Create Sub-Agent\n      }\n    </button>\n  </div>\n</div>", styles: [".sub-agent-dialog {\n  padding: 16px;\n  max-width: 100%;\n  max-height: 90vh;\n  overflow-y: auto;\n}\n\n.sub-agent-header {\n  margin-bottom: 20px;\n  border-bottom: 1px solid #e0e0e0;\n  padding-bottom: 15px;\n}\n\n.dialog-title {\n  margin: 0;\n  font-size: 1.4em;\n  font-weight: 600;\n  color: #333;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.dialog-title i {\n  color: #007bff;\n}\n\n.parent-info {\n  margin: 8px 0 0 0;\n  color: #666;\n  font-size: 0.9em;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.parent-info i {\n  color: #28a745;\n}\n\n.loading-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  padding: 40px;\n  color: #666;\n}\n\n.loading-container i {\n  font-size: 1.2em;\n  color: #007bff;\n}\n\n.sub-agent-form {\n  display: flex;\n  flex-direction: column;\n  gap: 25px;\n}\n\n.form-section {\n  border: 1px solid #e9ecef;\n  border-radius: 8px;\n  padding: 20px;\n  background-color: #f8f9fa;\n}\n\n.section-title {\n  margin: 0 0 15px 0;\n  font-size: 1.1em;\n  font-weight: 600;\n  color: #495057;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.section-title i {\n  color: #007bff;\n}\n\n.form-row {\n  display: flex;\n  gap: 15px;\n  margin-bottom: 15px;\n}\n\n.form-row:last-child {\n  margin-bottom: 0;\n}\n\n.form-group {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n}\n\n.form-group label {\n  font-weight: 500;\n  color: #495057;\n  margin-bottom: 5px;\n  font-size: 0.9em;\n}\n\n.form-group label[for=\"enableCaching\"] {\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n}\n\n.form-group label[for=\"enableCaching\"] input {\n  margin: 0;\n  width: auto;\n}\n\n.form-control {\n  padding: 8px 12px;\n  border: 1px solid #ced4da;\n  border-radius: 4px;\n  font-size: 0.9em;\n  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n}\n\n.form-control:focus {\n  outline: none;\n  border-color: #007bff;\n  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);\n}\n\n.form-control[readonly] {\n  background-color: #e9ecef;\n  opacity: 1;\n}\n\n.section-actions {\n  display: flex;\n  gap: 10px;\n  margin-bottom: 15px;\n}\n\n.linked-items {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.linked-item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px;\n  background-color: #ffffff;\n  border: 1px solid #dee2e6;\n  border-radius: 6px;\n  transition: box-shadow 0.15s ease-in-out;\n}\n\n.linked-item:hover {\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n\n.item-info {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  flex: 1;\n}\n\n.item-info i {\n  color: #007bff;\n  width: 16px;\n  text-align: center;\n}\n\n.item-name {\n  font-weight: 500;\n  color: #333;\n}\n\n.item-description {\n  color: #666;\n  font-size: 0.85em;\n  margin-left: 10px;\n}\n\n.prompt-item .item-info i {\n  color: #28a745;\n}\n\n.action-item .item-info i {\n  color: #ffc107;\n}\n\n.empty-state {\n  text-align: center;\n  padding: 30px;\n  color: #6c757d;\n}\n\n.empty-state i {\n  font-size: 2em;\n  color: #dee2e6;\n  margin-bottom: 10px;\n}\n\n.empty-state p {\n  margin: 0;\n  font-size: 0.9em;\n}\n\n.dialog-actions {\n  display: flex;\n  justify-content: flex-end;\n  gap: 10px;\n  margin-top: 30px;\n  padding-top: 20px;\n  border-top: 1px solid #e0e0e0;\n}\n\n.btn {\n  padding: 8px 16px;\n  border: none;\n  border-radius: 4px;\n  font-size: 0.9em;\n  font-weight: 500;\n  cursor: pointer;\n  transition: background-color 0.15s ease-in-out;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.btn:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.btn-primary {\n  background-color: #007bff;\n  color: white;\n}\n\n.btn-primary:hover:not(:disabled) {\n  background-color: #0056b3;\n}\n\n.btn-secondary {\n  background-color: #6c757d;\n  color: white;\n}\n\n.btn-secondary:hover:not(:disabled) {\n  background-color: #545b62;\n}\n\n.btn-success {\n  background-color: #28a745;\n  color: white;\n}\n\n.btn-success:hover:not(:disabled) {\n  background-color: #1e7e34;\n}\n\n.btn-danger {\n  background-color: #dc3545;\n  color: white;\n}\n\n.btn-danger:hover:not(:disabled) {\n  background-color: #c82333;\n}\n\n.btn-sm {\n  padding: 6px 12px;\n  font-size: 0.8em;\n}\n\n.btn-xs {\n  padding: 4px 8px;\n  font-size: 0.75em;\n}\n\n/* Responsive adjustments */\n@media (max-width: 768px) {\n  .sub-agent-dialog {\n    padding: 15px;\n    max-width: 95vw;\n  }\n  \n  .form-row {\n    flex-direction: column;\n    gap: 10px;\n  }\n  \n  .section-actions {\n    flex-direction: column;\n  }\n  \n  .dialog-actions {\n    flex-direction: column;\n  }\n  \n  .linked-item {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 10px;\n  }\n}\n\n/* Validation styles */\n.form-control.ng-invalid.ng-touched {\n  border-color: #dc3545;\n}\n\n.form-control.ng-valid.ng-touched {\n  border-color: #28a745;\n}\n\n/* Custom scrollbar for dialog */\n.sub-agent-dialog::-webkit-scrollbar {\n  width: 8px;\n}\n\n.sub-agent-dialog::-webkit-scrollbar-track {\n  background: #f1f1f1;\n  border-radius: 4px;\n}\n\n.sub-agent-dialog::-webkit-scrollbar-thumb {\n  background: #c1c1c1;\n  border-radius: 4px;\n}\n\n.sub-agent-dialog::-webkit-scrollbar-thumb:hover {\n  background: #a8a8a8;\n}\n\n/* Ensure dialog appears above banner and other elements */\n:host ::ng-deep .k-dialog,\n:host ::ng-deep .k-window {\n  z-index: 10000 !important;\n}\n\n:host ::ng-deep .k-overlay {\n  z-index: 9999 !important;\n}"] }]
     }], () => [{ type: i1.WindowRef }, { type: i0.ChangeDetectorRef }, { type: i2.AIAgentManagementService }, { type: i0.ViewContainerRef }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CreateSubAgentDialogComponent, { className: "CreateSubAgentDialogComponent" }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CreateSubAgentDialogComponent, { className: "CreateSubAgentDialogComponent", filePath: "src/lib/custom/AIAgents/create-sub-agent-dialog.component.ts", lineNumber: 48 }); })();
 //# sourceMappingURL=create-sub-agent-dialog.component.js.map

package/dist/lib/custom/AIAgents/new-agent-dialog.component.js CHANGED Viewed

@@ -308,5 +308,5 @@ export class NewAgentDialogComponent {
     }], () => [{ type: i1.FormBuilder }, { type: i2.DialogRef }, { type: i3.NavigationService }, { type: i4.NotificationService }], { config: [{
             type: Input
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(NewAgentDialogComponent, { className: "NewAgentDialogComponent" }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(NewAgentDialogComponent, { className: "NewAgentDialogComponent", filePath: "src/lib/custom/AIAgents/new-agent-dialog.component.ts", lineNumber: 23 }); })();
 //# sourceMappingURL=new-agent-dialog.component.js.map

package/dist/lib/custom/AIAgents/prompt-selector-dialog.component.js CHANGED Viewed

@@ -375,5 +375,5 @@ export class PromptSelectorDialogComponent {
         type: Component,
         args: [{ selector: 'mj-prompt-selector-dialog', template: "<!-- Prompt Selector Dialog -->\n<div class=\"prompt-selector-dialog\">\n  \n  <!-- Loading State -->\n  @if (isLoading$ | async) {\n    <div class=\"loading-state\">\n      <div class=\"loading-spinner\">\n        <i class=\"fa-solid fa-spinner fa-spin fa-2x\"></i>\n      </div>\n      <p>Loading prompts...</p>\n    </div>\n  } @else {\n    \n    <!-- Search and Controls Header -->\n    <div class=\"dialog-header\">\n      <div class=\"search-section\">\n        <div class=\"search-box\">\n          <i class=\"fa-solid fa-search search-icon\"></i>\n          <kendo-textbox \n            [formControl]=\"searchControl\"\n            placeholder=\"Search prompts by name or description...\"\n            class=\"search-input\">\n          </kendo-textbox>\n        </div>\n        \n        <div class=\"view-controls\">\n          <button kendoButton \n                  size=\"small\"\n                  fillMode=\"flat\"\n                  [class.active]=\"viewMode === 'list'\"\n                  (click)=\"toggleViewMode()\"\n                  title=\"Toggle between list and grid view\">\n            <i class=\"fa-solid\" [class.fa-list]=\"viewMode === 'grid'\" [class.fa-th]=\"viewMode === 'list'\"></i>\n          </button>\n        </div>\n      </div>\n    </div>\n\n    <!-- Results Summary -->\n    <div class=\"results-summary\">\n      <span class=\"results-count\">\n        <i class=\"fa-solid fa-comment-dots\"></i>\n        {{ (filteredPrompts$ | async)?.length || 0 }} prompt(s)\n      </span>\n      @if (config.multiSelect && selectedPrompts.size > 0) {\n        <span class=\"selected-count\">\n          <i class=\"fa-solid fa-check-circle\"></i>\n          {{ selectedPrompts.size }} selected\n        </span>\n      }\n    </div>\n\n    <!-- Prompts List/Grid -->\n    <div class=\"prompts-container\" [class.grid-view]=\"viewMode === 'grid'\" [class.list-view]=\"viewMode === 'list'\">\n      @if ((filteredPrompts$ | async)?.length === 0) {\n        <div class=\"no-results\">\n          <i class=\"fa-solid fa-search fa-2x\"></i>\n          <h4>No prompts found</h4>\n          <p>Try adjusting your search criteria or check that prompts are properly configured.</p>\n        </div>\n      } @else {\n        @for (prompt of filteredPrompts$ | async; track prompt.ID) {\n          <div class=\"prompt-card\" \n               [class.selected]=\"isPromptSelected(prompt)\"\n               [class.linked]=\"isPromptLinked(prompt)\"\n               (click)=\"togglePromptSelection(prompt)\">\n            \n            <!-- Selection indicator -->\n            <div class=\"selection-indicator\">\n              @if (isPromptLinked(prompt)) {\n                <i class=\"fa-solid fa-link linked-icon\" title=\"Already linked to this agent\"></i>\n              } @else if (isPromptSelected(prompt)) {\n                <i class=\"fa-solid fa-check-circle selected-icon\"></i>\n              } @else {\n                <i class=\"fa-regular fa-circle unselected-icon\"></i>\n              }\n            </div>\n\n            <!-- Prompt Content -->\n            <div class=\"prompt-content\">\n              <div class=\"prompt-header\">\n                <h4 class=\"prompt-name\">{{ prompt.Name }}</h4>\n                <div class=\"prompt-badges\">\n                  @if (isPromptLinked(prompt)) {\n                    <span class=\"linked-badge\">\n                      <i class=\"fa-solid fa-link\"></i>\n                      Linked\n                    </span>\n                  }\n                  <span class=\"status-badge\" \n                        [style.background-color]=\"getPromptStatusColor(prompt)\">\n                    {{ getPromptStatusText(prompt) }}\n                  </span>\n                </div>\n              </div>\n\n              @if (prompt.Description) {\n                <p class=\"prompt-description\">{{ prompt.Description }}</p>\n              }\n\n              <!-- Prompt Metadata -->\n              <div class=\"prompt-metadata\">\n                @if (prompt.__mj_CreatedAt) {\n                  <span class=\"metadata-item\">\n                    <i class=\"fa-solid fa-calendar\"></i>\n                    Created {{ prompt.__mj_CreatedAt | date:'short' }}\n                  </span>\n                }\n              </div>\n            </div>\n          </div>\n        }\n      }\n    </div>\n  }\n\n  <!-- Dialog Footer -->\n  <div class=\"dialog-footer\">\n    <div class=\"footer-left\">\n      @if (config.showCreateNew) {\n        <button kendoButton \n                look=\"flat\"\n                (click)=\"createNew()\">\n          <i class=\"fa-solid fa-plus\"></i>\n          Create New Prompt\n        </button>\n      }\n    </div>\n    \n    <div class=\"footer-right\">\n      <button kendoButton \n              look=\"flat\" \n              (click)=\"cancel()\">\n        Cancel\n      </button>\n      \n      <button kendoButton \n              themeColor=\"primary\" \n              (click)=\"selectPrompts()\"\n              [disabled]=\"selectedPrompts.size === 0\">\n        @if (config.multiSelect) {\n          <i class=\"fa-solid fa-check\"></i>\n          Add {{ selectedPrompts.size }} Prompt{{ selectedPrompts.size === 1 ? '' : 's' }}\n        } @else {\n          <i class=\"fa-solid fa-check\"></i>\n          Select Prompt\n        }\n      </button>\n    </div>\n  </div>\n</div>", styles: [".prompt-selector-dialog {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  max-height: 70vh;\n}\n\n/* Ensure dialog appears above banner and other elements */\n:host ::ng-deep .k-dialog,\n:host ::ng-deep .k-window {\n  z-index: 10000 !important;\n}\n\n:host ::ng-deep .k-overlay {\n  z-index: 9999 !important;\n}\n\n/* === Loading State === */\n.loading-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 300px;\n  color: #666;\n}\n\n.loading-spinner {\n  margin-bottom: 16px;\n}\n\n/* === Header Section === */\n.dialog-header {\n  padding: 16px;\n  border-bottom: 1px solid #e0e0e0;\n  background: #f8f9fa;\n}\n\n.search-section {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.search-box {\n  flex: 1;\n  position: relative;\n}\n\n.search-icon {\n  position: absolute;\n  left: 12px;\n  top: 50%;\n  transform: translateY(-50%);\n  color: #666;\n  z-index: 2;\n}\n\n.search-input {\n  width: 100%;\n}\n\n.search-input input {\n  padding-left: 36px !important;\n}\n\n.view-controls button.active {\n  background-color: #007bff;\n  color: white;\n}\n\n/* === Results Summary === */\n.results-summary {\n  padding: 12px 16px;\n  background: #f1f3f4;\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  font-size: 14px;\n  color: #666;\n  border-bottom: 1px solid #e0e0e0;\n}\n\n.results-count, .selected-count {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.selected-count {\n  color: #007bff;\n  font-weight: 500;\n}\n\n/* === Prompts Container === */\n.prompts-container {\n  flex: 1;\n  overflow-y: auto;\n  padding: 16px;\n}\n\n/* List View */\n.prompts-container.list-view {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n/* Grid View */\n.prompts-container.grid-view {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n  gap: 16px;\n}\n\n/* === Prompt Cards === */\n.prompt-card {\n  border: 2px solid #e0e0e0;\n  border-radius: 8px;\n  padding: 16px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  background: white;\n  display: flex;\n  gap: 12px;\n  position: relative;\n}\n\n.prompt-card:hover {\n  border-color: #007bff;\n  box-shadow: 0 2px 8px rgba(0, 123, 255, 0.15);\n}\n\n.prompt-card.selected {\n  border-color: #007bff;\n  background: #f8f9ff;\n  box-shadow: 0 2px 8px rgba(0, 123, 255, 0.25);\n}\n\n.prompt-card.linked {\n  border-color: #6c757d;\n  background: #f8f9fa;\n  opacity: 0.7;\n  cursor: not-allowed;\n}\n\n.prompt-card.linked:hover {\n  border-color: #6c757d;\n  box-shadow: none;\n}\n\n/* === Selection Indicator === */\n.selection-indicator {\n  display: flex;\n  align-items: flex-start;\n  margin-top: 2px;\n}\n\n.selected-icon {\n  color: #007bff;\n  font-size: 18px;\n}\n\n.unselected-icon {\n  color: #ccc;\n  font-size: 18px;\n}\n\n.linked-icon {\n  color: #6c757d;\n  font-size: 18px;\n}\n\n/* === Prompt Content === */\n.prompt-content {\n  flex: 1;\n  min-width: 0;\n}\n\n.prompt-header {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 12px;\n  margin-bottom: 8px;\n}\n\n.prompt-name {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: #333;\n  line-height: 1.4;\n  flex: 1;\n}\n\n.prompt-badges {\n  display: flex;\n  gap: 6px;\n  align-items: center;\n}\n\n.status-badge {\n  padding: 4px 8px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 500;\n  color: white;\n  white-space: nowrap;\n}\n\n.linked-badge {\n  padding: 4px 8px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 500;\n  background: #6c757d;\n  color: white;\n  white-space: nowrap;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.prompt-description {\n  margin: 0 0 12px 0;\n  color: #666;\n  font-size: 14px;\n  line-height: 1.4;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n/* === Prompt Metadata === */\n.prompt-metadata {\n  display: flex;\n  gap: 16px;\n  font-size: 12px;\n  color: #888;\n  flex-wrap: wrap;\n}\n\n.metadata-item {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.metadata-item i {\n  width: 12px;\n  font-size: 10px;\n}\n\n/* === No Results === */\n.no-results {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 200px;\n  color: #666;\n  text-align: center;\n}\n\n.no-results i {\n  margin-bottom: 16px;\n  color: #ccc;\n}\n\n.no-results h4 {\n  margin: 0 0 8px 0;\n  color: #333;\n}\n\n.no-results p {\n  margin: 0;\n  color: #888;\n  max-width: 300px;\n}\n\n/* === Dialog Footer === */\n.dialog-footer {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px;\n  border-top: 1px solid #e0e0e0;\n  background: #f8f9fa;\n}\n\n.footer-left {\n  display: flex;\n}\n\n.footer-right {\n  display: flex;\n  gap: 8px;\n}\n\n/* === Responsive Design === */\n@media (max-width: 768px) {\n  .prompts-container.grid-view {\n    grid-template-columns: 1fr;\n  }\n  \n  .prompt-header {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 8px;\n  }\n  \n  .search-section {\n    flex-direction: column;\n    gap: 8px;\n  }\n  \n  .view-controls {\n    align-self: flex-end;\n  }\n}"] }]
     }], () => [{ type: i1.WindowRef }, { type: i0.ChangeDetectorRef }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PromptSelectorDialogComponent, { className: "PromptSelectorDialogComponent" }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PromptSelectorDialogComponent, { className: "PromptSelectorDialogComponent", filePath: "src/lib/custom/AIAgents/prompt-selector-dialog.component.ts", lineNumber: 42 }); })();
 //# sourceMappingURL=prompt-selector-dialog.component.js.map

package/dist/lib/custom/AIAgents/sub-agent-advanced-settings-dialog.component.js CHANGED Viewed

@@ -369,5 +369,5 @@ export class SubAgentAdvancedSettingsDialogComponent {
         type: Component,
         args: [{ selector: 'mj-sub-agent-advanced-settings-dialog', template: "<!-- Sub-Agent Advanced Settings Dialog -->\n<div class=\"sub-agent-advanced-settings-dialog\">\n  \n  <!-- Loading State -->\n  @if (isLoading$ | async) {\n    <div class=\"loading-state\">\n      <div class=\"loading-spinner\">\n        <i class=\"fa-solid fa-spinner fa-spin fa-2x\"></i>\n      </div>\n      <p>Loading sub-agent settings...</p>\n    </div>\n  } @else {\n    \n    <!-- Form Content -->\n    <form [formGroup]=\"advancedForm\" class=\"advanced-form\">\n      \n      <!-- Execution Configuration Section -->\n      <div class=\"form-section\">\n        <h3 class=\"section-title\">\n          <i class=\"fa-solid fa-play\"></i>\n          Execution Configuration\n        </h3>\n        \n        <div class=\"form-grid\">\n          <!-- Execution Order -->\n          <div class=\"form-field\">\n            <label for=\"executionOrder\">Execution Order *</label>\n            <kendo-numerictextbox \n              formControlName=\"executionOrder\"\n              [min]=\"0\"\n              [format]=\"'0'\"\n              [class.error-border]=\"hasExecutionOrderError()\"\n              class=\"form-control\">\n            </kendo-numerictextbox>\n            @if (isFieldInvalid('executionOrder')) {\n              <div class=\"field-error\">{{ getFieldError('executionOrder') }}</div>\n            }\n            @if (hasExecutionOrderError()) {\n              <div class=\"field-error\">{{ executionOrderError }}</div>\n            }\n            <small class=\"field-hint\">Order in which this sub-agent executes among siblings (0 = first). Must be unique among sibling agents.</small>\n          </div>\n          \n          <!-- Execution Mode -->\n          <div class=\"form-field\">\n            <label for=\"executionMode\">Execution Mode *</label>\n            <kendo-dropdownlist \n              formControlName=\"executionMode\"\n              [data]=\"executionModeOptions\"\n              textField=\"text\"\n              valueField=\"value\"\n              [valuePrimitive]=\"true\"\n              class=\"form-control\">\n              <ng-template kendoDropDownListItemTemplate let-dataItem>\n                <div class=\"execution-mode-option\">\n                  <div class=\"option-header\">\n                    <i class=\"fa-solid {{ dataItem.icon }}\"></i>\n                    <span class=\"option-title\">{{ dataItem.text }}</span>\n                  </div>\n                  <div class=\"option-description\">{{ dataItem.description }}</div>\n                </div>\n              </ng-template>\n            </kendo-dropdownlist>\n            @if (isFieldInvalid('executionMode')) {\n              <div class=\"field-error\">{{ getFieldError('executionMode') }}</div>\n            }\n            <small class=\"field-hint\">{{ getExecutionModeDescription(advancedForm.get('executionMode')?.value) }}</small>\n          </div>\n        </div>\n      </div>\n\n      <!-- Agent Configuration Section -->\n      <div class=\"form-section\">\n        <h3 class=\"section-title\">\n          <i class=\"fa-solid fa-robot\"></i>\n          Agent Configuration\n        </h3>\n        \n        <div class=\"form-grid\">\n          <!-- Agent Type -->\n          <div class=\"form-field\">\n            <label for=\"typeID\">Agent Type</label>\n            <kendo-dropdownlist \n              formControlName=\"typeID\"\n              [data]=\"agentTypes$ | async\"\n              textField=\"Name\"\n              valueField=\"ID\"\n              [valuePrimitive]=\"true\"\n              [defaultItem]=\"{ Name: 'Default Type', ID: null }\"\n              class=\"form-control\">\n            </kendo-dropdownlist>\n            <small class=\"field-hint\">Specialized agent type that defines behavior and capabilities</small>\n          </div>\n          \n          <!-- Status -->\n          <div class=\"form-field\">\n            <label for=\"status\">Status *</label>\n            <kendo-dropdownlist \n              formControlName=\"status\"\n              [data]=\"statusOptions\"\n              textField=\"text\"\n              valueField=\"value\"\n              [valuePrimitive]=\"true\"\n              class=\"form-control\">\n            </kendo-dropdownlist>\n            @if (isFieldInvalid('status')) {\n              <div class=\"field-error\">{{ getFieldError('status') }}</div>\n            }\n            <small class=\"field-hint\">Current operational status of this sub-agent</small>\n          </div>\n        </div>\n      </div>\n\n      <!-- Capability Restrictions Section -->\n      <div class=\"form-section\">\n        <h3 class=\"section-title\">\n          <i class=\"fa-solid fa-shield-alt\"></i>\n          Capability Restrictions\n        </h3>\n        \n        <div class=\"form-grid\">\n          <!-- Expose As Action (Disabled for Sub-Agents) -->\n          <div class=\"form-field full-width\">\n            <label class=\"checkbox-label disabled\">\n              <kendo-checkbox \n                formControlName=\"exposeAsAction\"\n                [disabled]=\"true\">\n              </kendo-checkbox>\n              Expose As Action\n            </label>\n            <small class=\"field-hint disabled-hint\">\n              <i class=\"fa-solid fa-info-circle\"></i>\n              Sub-agents cannot be exposed as actions. Only root agents (without parents) can be exposed as actions for use by other agents.\n            </small>\n          </div>\n        </div>\n      </div>\n    </form>\n  }\n\n  <!-- Dialog Footer -->\n  <div class=\"dialog-footer\">\n    <button kendoButton \n            look=\"flat\" \n            (click)=\"cancel()\"\n            [disabled]=\"(isSaving$ | async) || false\">\n      Cancel\n    </button>\n    \n    <button kendoButton \n            themeColor=\"primary\" \n            (click)=\"save()\"\n            [disabled]=\"((isSaving$ | async) || false) || ((isLoading$ | async) || false) || hasExecutionOrderError()\">\n      @if (isSaving$ | async) {\n        <i class=\"fa-solid fa-spinner fa-spin\"></i>\n        Saving...\n      } @else {\n        <i class=\"fa-solid fa-save\"></i>\n        Save Settings\n      }\n    </button>\n  </div>\n</div>", styles: [".sub-agent-advanced-settings-dialog {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n}\n\n/* Ensure dialog appears above banner and other elements */\n:host ::ng-deep .k-dialog,\n:host ::ng-deep .k-window {\n  z-index: 10000 !important;\n}\n\n:host ::ng-deep .k-overlay {\n  z-index: 9999 !important;\n}\n\n/* === Loading State === */\n.loading-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 300px;\n  color: #6c757d;\n}\n\n.loading-spinner {\n  margin-bottom: 1rem;\n}\n\n.loading-spinner i {\n  color: #2196f3;\n}\n\n.loading-state p {\n  margin-top: 1rem;\n  font-size: 1.1rem;\n}\n\n/* === Form Layout === */\n.advanced-form {\n  flex: 1;\n  overflow-y: auto;\n  padding: 1.5rem;\n}\n\n.form-section {\n  margin-bottom: 2rem;\n  background: white;\n  border-radius: 8px;\n  border: 1px solid #e0e0e0;\n  overflow: hidden;\n}\n\n.section-title {\n  margin: 0;\n  padding: 1rem 1.5rem;\n  background: #f8f9fa;\n  border-bottom: 1px solid #e0e0e0;\n  color: #495057;\n  font-size: 1.1rem;\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.section-title i {\n  color: #2196f3;\n}\n\n.form-grid {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 1.5rem;\n  padding: 1.5rem;\n}\n\n.form-field {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.form-field.full-width {\n  grid-column: 1 / -1;\n}\n\n/* === Form Controls === */\nlabel {\n  font-weight: 600;\n  color: #495057;\n  font-size: 0.9rem;\n}\n\n.checkbox-label {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  font-weight: 600;\n  color: #495057;\n  cursor: pointer;\n}\n\n.checkbox-label.disabled {\n  color: #6c757d;\n  cursor: not-allowed;\n}\n\n.form-control {\n  width: 100%;\n}\n\n.field-hint {\n  color: #6c757d;\n  font-size: 0.8rem;\n  margin-top: 0.25rem;\n  line-height: 1.3;\n}\n\n.disabled-hint {\n  color: #999;\n  font-style: italic;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.disabled-hint i {\n  color: #17a2b8;\n}\n\n.field-error {\n  color: #dc3545;\n  font-size: 0.8rem;\n  margin-top: 0.25rem;\n}\n\n/* === Validation States === */\n.form-control.ng-invalid.ng-touched,\n.error-border {\n  border-color: #dc3545 !important;\n}\n\n.form-control.ng-valid.ng-touched {\n  border-color: #28a745;\n}\n\n/* === Execution Mode Option Template === */\n.execution-mode-option {\n  padding: 0.5rem 0;\n}\n\n.option-header {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  margin-bottom: 0.25rem;\n}\n\n.option-header i {\n  color: #2196f3;\n  width: 16px;\n}\n\n.option-title {\n  font-weight: 500;\n  color: #333;\n  font-size: 0.9rem;\n}\n\n.option-description {\n  font-size: 0.8rem;\n  color: #666;\n  line-height: 1.3;\n  margin-left: 1.5rem;\n}\n\n/* === Dialog Footer === */\n.dialog-footer {\n  display: flex;\n  justify-content: flex-end;\n  gap: 1rem;\n  padding: 1rem 1.5rem;\n  border-top: 1px solid #e0e0e0;\n  background: #f8f9fa;\n}\n\n.dialog-footer button {\n  min-width: 120px;\n}\n\n.dialog-footer button[themeColor=\"primary\"] i {\n  margin-right: 0.5rem;\n}\n\n/* === Section-Specific Styling === */\n\n/* Execution Configuration */\n.form-section:first-child .section-title {\n  background: linear-gradient(135deg, #e3f2fd, #f8f9fa);\n}\n\n/* Agent Configuration */\n.form-section:nth-child(2) .section-title {\n  background: linear-gradient(135deg, #f3e5f5, #f8f9fa);\n}\n\n/* Capability Restrictions */\n.form-section:nth-child(3) .section-title {\n  background: linear-gradient(135deg, #fff3e0, #f8f9fa);\n}\n\n/* === Responsive Design === */\n@media (max-width: 768px) {\n  .form-grid {\n    grid-template-columns: 1fr;\n    gap: 1rem;\n    padding: 1rem;\n  }\n  \n  .form-field.full-width {\n    grid-column: 1;\n  }\n  \n  .advanced-form {\n    padding: 1rem;\n  }\n  \n  .section-title {\n    padding: 0.75rem 1rem;\n    font-size: 1rem;\n  }\n  \n  .dialog-footer {\n    padding: 1rem;\n    flex-direction: column;\n  }\n  \n  .dialog-footer button {\n    width: 100%;\n  }\n}\n\n/* === Error Highlighting === */\n.error-border {\n  border: 2px solid #dc3545 !important;\n  background-color: #fff5f5;\n}"] }]
     }], () => [{ type: i1.WindowRef }, { type: i2.FormBuilder }, { type: i0.ChangeDetectorRef }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SubAgentAdvancedSettingsDialogComponent, { className: "SubAgentAdvancedSettingsDialogComponent" }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SubAgentAdvancedSettingsDialogComponent, { className: "SubAgentAdvancedSettingsDialogComponent", filePath: "src/lib/custom/AIAgents/sub-agent-advanced-settings-dialog.component.ts", lineNumber: 27 }); })();
 //# sourceMappingURL=sub-agent-advanced-settings-dialog.component.js.map

package/dist/lib/custom/AIAgents/sub-agent-selector-dialog.component.js CHANGED Viewed

@@ -459,5 +459,5 @@ export class SubAgentSelectorDialogComponent {
         type: Component,
         args: [{ selector: 'mj-sub-agent-selector-dialog', template: "<!-- Sub-Agent Selector Dialog -->\n<div class=\"sub-agent-selector-dialog\">\n  \n  <!-- Dialog Header -->\n  <div class=\"dialog-header\">\n    <div class=\"header-info\">\n      <h3>{{ config.title || 'Select Sub-Agents' }}</h3>\n      <p class=\"header-description\">\n        Choose existing root agents to convert into sub-agents. Only active agents without parents and not exposed as actions can be selected.\n      </p>\n    </div>\n    <div class=\"header-stats\">\n      @if (selectedCount > 0) {\n        <span class=\"selection-count\">{{ selectedCount }} selected</span>\n      }\n      <span class=\"total-count\">{{ filteredCount }} of {{ totalAgentCount }} agents</span>\n    </div>\n  </div>\n\n  <!-- Search and Filter Controls -->\n  <div class=\"controls-section\">\n    <div class=\"search-controls\">\n      <div class=\"search-input\">\n        <i class=\"fa-solid fa-search search-icon\"></i>\n        <kendo-textbox \n          [formControl]=\"searchControl\"\n          placeholder=\"Search agents by name, description, or type...\"\n          class=\"search-field\">\n        </kendo-textbox>\n        @if (searchControl.value) {\n          <button kendoButton \n                  fillMode=\"flat\" \n                  size=\"small\"\n                  (click)=\"clearSearch()\"\n                  class=\"clear-search\">\n            <i class=\"fa-solid fa-times\"></i>\n          </button>\n        }\n      </div>\n    </div>\n\n    <div class=\"filter-controls\">\n      <div class=\"type-filter\">\n        <label>Agent Type:</label>\n        <kendo-dropdownlist \n          [value]=\"selectedTypeId$ | async\"\n          (valueChange)=\"selectType($event)\"\n          textField=\"Name\"\n          valueField=\"ID\"\n          [valuePrimitive]=\"true\"\n          [defaultItem]=\"{ Name: 'All Types', ID: 'all' }\"\n          [data]=\"agentTypes$ | async\"\n          class=\"type-dropdown\">\n        </kendo-dropdownlist>\n      </div>\n    </div>\n  </div>\n\n  <!-- Loading State -->\n  @if (isLoading$ | async) {\n    <div class=\"loading-state\">\n      <i class=\"fa-solid fa-spinner fa-spin fa-2x\"></i>\n      <p>Loading available agents...</p>\n    </div>\n  } @else {\n    \n    <!-- Content Area -->\n    <div class=\"content-area\">\n      @if (filteredCount === 0) {\n        <div class=\"empty-state\">\n          <i class=\"fa-solid fa-robot\"></i>\n          <h4>No agents found</h4>\n          @if (totalAgentCount === 0) {\n            <p>No eligible root agents are available to become sub-agents.</p>\n          } @else {\n            <p>Try adjusting your search criteria or selecting a different agent type.</p>\n            <button kendoButton (click)=\"clearSearch()\" themeColor=\"primary\">\n              Clear Search\n            </button>\n          }\n        </div>\n      } @else {\n        \n        <!-- Agents Grid -->\n        <div class=\"agents-grid\">\n          @for (agent of (filteredAgents$ | async); track agent.ID) {\n            <div class=\"agent-card\" \n                 [class.selected]=\"agent.selected\"\n                 (click)=\"toggleAgentSelection(agent)\">\n              \n              <!-- Selection Indicator -->\n              <div class=\"selection-indicator\">\n                @if (agent.selected) {\n                  <i class=\"fa-solid fa-check-circle\"></i>\n                } @else {\n                  <i class=\"fa-regular fa-circle\"></i>\n                }\n              </div>\n              \n              <!-- Agent Icon/Logo -->\n              <div class=\"agent-icon\">\n                @if (agent.LogoURL) {\n                  <img [src]=\"agent.LogoURL\" [alt]=\"agent.Name + ' logo'\" class=\"agent-logo\">\n                } @else {\n                  <i [class]=\"getAgentIcon(agent)\"></i>\n                }\n              </div>\n              \n              <!-- Agent Info -->\n              <div class=\"agent-info\">\n                <div class=\"agent-name\">{{ agent.Name }}</div>\n                @if (agent.Description) {\n                  <div class=\"agent-description\">{{ agent.Description }}</div>\n                }\n                <div class=\"agent-meta\">\n                  @if (agent.Status) {\n                    <span class=\"status-badge\" [style.background-color]=\"getAgentStatusColor(agent)\">\n                      {{ agent.Status }}\n                    </span>\n                  }\n                  @if (agent.typeName) {\n                    <span class=\"type-badge\">{{ agent.typeName }}</span>\n                  }\n                  @if (agent.ExecutionMode) {\n                    <span class=\"execution-badge\">{{ agent.ExecutionMode }}</span>\n                  }\n                </div>\n              </div>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Dialog Footer -->\n  <div class=\"dialog-footer\">\n    <div class=\"footer-left\">\n      @if (config.showCreateNew) {\n        <button kendoButton \n                look=\"outline\"\n                themeColor=\"primary\"\n                (click)=\"createNew()\">\n          <i class=\"fa-solid fa-plus\"></i>\n          Create Sub-Agent\n        </button>\n      }\n    </div>\n    \n    <div class=\"footer-right\">\n      <button kendoButton \n              look=\"flat\" \n              (click)=\"cancel()\">\n        Cancel\n      </button>\n      \n      <button kendoButton \n              themeColor=\"primary\" \n              (click)=\"addSelectedAgents()\"\n              [disabled]=\"selectedCount === 0\">\n        @if (config.multiSelect) {\n          Add {{ selectedCount > 0 ? selectedCount + ' ' : '' }}Sub-Agent{{ selectedCount !== 1 ? 's' : '' }}\n        } @else {\n          Add Sub-Agent\n        }\n      </button>\n    </div>\n  </div>\n</div>", styles: [".sub-agent-selector-dialog {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: #f8f9fa;\n  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n}\n\n/* Ensure dialog appears above banner and other elements */\n:host ::ng-deep .k-dialog,\n:host ::ng-deep .k-window {\n  z-index: 10000 !important;\n}\n\n:host ::ng-deep .k-overlay {\n  z-index: 9999 !important;\n}\n\n/* === Dialog Header === */\n.dialog-header {\n  padding: 1.5rem;\n  background: white;\n  border-bottom: 1px solid #e9ecef;\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n}\n\n.header-info h3 {\n  margin: 0 0 0.5rem 0;\n  color: #212529;\n  font-size: 1.25rem;\n  font-weight: 600;\n}\n\n.header-description {\n  margin: 0;\n  color: #6c757d;\n  font-size: 0.9rem;\n  line-height: 1.4;\n}\n\n.header-stats {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  gap: 0.25rem;\n  font-size: 0.85rem;\n}\n\n.selection-count {\n  color: #0d6efd;\n  font-weight: 600;\n}\n\n.total-count {\n  color: #6c757d;\n}\n\n/* === Controls Section === */\n.controls-section {\n  padding: 1rem 1.5rem;\n  background: white;\n  border-bottom: 1px solid #e9ecef;\n  display: flex;\n  gap: 1rem;\n  align-items: flex-end;\n}\n\n.search-controls {\n  flex: 1;\n}\n\n.search-input {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n.search-icon {\n  position: absolute;\n  left: 12px;\n  color: #6c757d;\n  z-index: 1;\n}\n\n.search-field {\n  width: 100%;\n  padding-left: 40px;\n}\n\n.clear-search {\n  position: absolute;\n  right: 8px;\n  z-index: 1;\n}\n\n.filter-controls {\n  display: flex;\n  gap: 1rem;\n  align-items: flex-end;\n}\n\n.type-filter {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.type-filter label {\n  font-size: 0.85rem;\n  font-weight: 500;\n  color: #495057;\n}\n\n.type-dropdown {\n  min-width: 150px;\n}\n\n/* === Content Area === */\n.content-area {\n  flex: 1;\n  overflow-y: auto;\n  padding: 1rem;\n}\n\n/* === Loading State === */\n.loading-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 300px;\n  color: #6c757d;\n}\n\n.loading-state i {\n  color: #0d6efd;\n  margin-bottom: 1rem;\n}\n\n.loading-state p {\n  margin: 0;\n  font-size: 1rem;\n}\n\n/* === Empty State === */\n.empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 300px;\n  color: #6c757d;\n  text-align: center;\n}\n\n.empty-state i {\n  font-size: 3rem;\n  color: #dee2e6;\n  margin-bottom: 1rem;\n}\n\n.empty-state h4 {\n  margin: 0 0 0.5rem 0;\n  color: #495057;\n  font-size: 1.1rem;\n}\n\n.empty-state p {\n  margin: 0 0 1rem 0;\n  max-width: 400px;\n  line-height: 1.5;\n}\n\n/* === Agents Grid === */\n.agents-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n  gap: 1rem;\n}\n\n.agent-card {\n  background: white;\n  border: 2px solid #e9ecef;\n  border-radius: 8px;\n  padding: 1rem;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  display: flex;\n  gap: 1rem;\n  position: relative;\n}\n\n.agent-card:hover {\n  border-color: #0d6efd;\n  box-shadow: 0 2px 8px rgba(13, 110, 253, 0.15);\n}\n\n.agent-card.selected {\n  border-color: #0d6efd;\n  background: #f8f9ff;\n  box-shadow: 0 2px 8px rgba(13, 110, 253, 0.2);\n}\n\n.selection-indicator {\n  position: absolute;\n  top: 0.75rem;\n  right: 0.75rem;\n  font-size: 1.1rem;\n}\n\n.selection-indicator .fa-check-circle {\n  color: #198754;\n}\n\n.selection-indicator .fa-circle {\n  color: #dee2e6;\n}\n\n.agent-icon {\n  flex-shrink: 0;\n  width: 48px;\n  height: 48px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 8px;\n  background: #f8f9fa;\n  border: 1px solid #e9ecef;\n}\n\n.agent-icon i {\n  font-size: 1.5rem;\n  color: #0d6efd;\n}\n\n.agent-logo {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: 6px;\n}\n\n.agent-info {\n  flex: 1;\n  min-width: 0;\n}\n\n.agent-name {\n  font-size: 1rem;\n  font-weight: 600;\n  color: #212529;\n  margin-bottom: 0.5rem;\n  word-wrap: break-word;\n}\n\n.agent-description {\n  font-size: 0.85rem;\n  color: #6c757d;\n  line-height: 1.4;\n  margin-bottom: 0.75rem;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n.agent-meta {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n}\n\n.status-badge,\n.type-badge,\n.execution-badge {\n  padding: 0.25rem 0.5rem;\n  border-radius: 4px;\n  font-size: 0.75rem;\n  font-weight: 500;\n  color: white;\n}\n\n/* Status badge color set dynamically via style binding */\n\n.type-badge {\n  background: #6f42c1;\n}\n\n.execution-badge {\n  background: #fd7e14;\n}\n\n/* === Dialog Footer === */\n.dialog-footer {\n  padding: 1rem 1.5rem;\n  background: white;\n  border-top: 1px solid #e9ecef;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.footer-left {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.footer-right {\n  display: flex;\n  gap: 0.75rem;\n}\n\n.dialog-footer button {\n  min-width: 100px;\n}\n\n.dialog-footer button i {\n  margin-right: 0.5rem;\n}\n\n/* === Responsive Design === */\n@media (max-width: 768px) {\n  .agents-grid {\n    grid-template-columns: 1fr;\n  }\n  \n  .dialog-header {\n    flex-direction: column;\n    gap: 1rem;\n  }\n  \n  .header-stats {\n    align-items: flex-start;\n  }\n  \n  .controls-section {\n    flex-direction: column;\n    align-items: stretch;\n  }\n  \n  .filter-controls {\n    justify-content: flex-start;\n  }\n  \n  .dialog-footer {\n    flex-direction: column-reverse;\n    gap: 1rem;\n  }\n  \n  .footer-left,\n  .footer-right {\n    width: 100%;\n    justify-content: center;\n  }\n}"] }]
     }], () => [{ type: i1.WindowRef }, { type: i0.ChangeDetectorRef }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SubAgentSelectorDialogComponent, { className: "SubAgentSelectorDialogComponent" }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SubAgentSelectorDialogComponent, { className: "SubAgentSelectorDialogComponent", filePath: "src/lib/custom/AIAgents/sub-agent-selector-dialog.component.ts", lineNumber: 36 }); })();
 //# sourceMappingURL=sub-agent-selector-dialog.component.js.map